.discPanel {
	display: grid;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	grid-template-columns: auto auto;
}

/* Checkbox and Radio Styling */
input[type=radio], input[type=checkbox] {
	display:none;
}

input[type=radio] + label, input[type=checkbox] + label, .checkButton {
	display:inline-block;
	margin:-2px;
	padding: 2px 4px;
	margin-bottom: 0;
	font-size: inherit;
	line-height: 20px;
	color: #333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255,255,255,0.75);
	vertical-align: middle;
	cursor: pointer;
	background-color: #f5f5f5;
	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
	background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
	background-image: -o-linear-gradient(top,#fff,#e6e6e6);
	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
	background-repeat: repeat-x;
	border: 1px solid #ccc;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	border-bottom-color: #b3b3b3;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	text-decoration: none;
}

 input[type=radio]:checked + label, input[type=checkbox]:checked + label{
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	background-color:#e0e0e0;
}

/* chart and controls */
#chartdiv {
	border: 1px solid black;
	background: white;
	width: 350px;
	height: 500px;
	border-style: solid;
	border-width: 1px;
}
	
.options {
	padding-right: 0px;
	padding-top: 5px;
}

.customization {
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: space-around;
	padding-top: 5px;
}

.checkButton {
	font-size: .8em;
}

.checkButton:hover {
	cursor: pointer;
}

/* disc metadata */
.metadata {
	font-size: 80%;
}

.discname {
	font-weight: bold;
	font-size: 110%;
	padding-left: 3px;
}

/* flight numbers */
.flight-numbers-container {
	display: inline-flex;
}

table.flightnumbers {
	border-collapse: collapse;
	border: 1px solid black;
	width: 50%;
	text-align: center;
	margin-left: 5%;
    table-layout: fixed;
    width: 90px;
}

table.flightnumbers tr, table.flightnumbers td {
	padding: 0px;
	border: 1px solid black;
	text-align: center;
}

/* disc details */

div.metadataextra {
	transition: height .5s ease;
    overflow: hidden;
    display: inline-grid;
    width: 100%;
    padding-right: 10px;
	grid-template-columns: auto auto;
	justify-content: start;
}

.metadatalinks {
	margin-left: 5px;
}

.metadata-grid-container {
	display: inline-grid;
	grid-template-columns: auto auto;
	justify-content: start;
}

.metadata-grid-item {
	text-align: right;
	padding-right: 10px;
}

.metadata-grid-first-column {
	text-align: left;
	padding-left: 10px;
	padding-right: 5px;
}

.disc-spec-header {
	font-weight: bold;
	text-align: left;
	margin-bottom: 0;
	padding-left: 3px;
}