#hero { background-color: #1b1e30; }
#hero button > img { top: 11%; }

#timespot > div > h3 { padding: 10px; }

#timespot + #subtext {
	margin-top: 0;
	padding: 0;
	font-size: clamp(11px, 3vw, 15px);
	text-align: center;
}
#swappables #printCADform { padding: 0; }

#swappables #panel1 label:not(:has(textarea)) {
	font-size: clamp(13px, 2vw, 15px);
	max-width: 31%;
	text-wrap: nowrap;
}

@media (max-width: 600px) {	
	#timespot > div > h3 {
		font-size: clamp(12px, 3vw, 15px);
		padding: clamp(5px, 1.45vw, 10px);
	}
	#timespot:before { height: clamp(24px, 6vw, 34px); }
}

@media (max-width: 500px) {
	#tabs > a { font-size: clamp(13px, 3vw, 15px); }
	#swappables #panel1 label:not(:has(textarea), :first-child) { max-width: 48%; }
	#swappables label:first-child { max-width: 100% !important; }
}

@media (min-width: 801px) and (max-width: 900px) {
	#timespot > div > h3 { font-size: 15px; }
}

#tabs {
	display: flex; justify-content: flex-end;
	overflow: hidden; border-radius: 6px 6px 0 0;
}

#tabs > a {
	background: #058e4244; color: black;
	flex-grow: 1; text-align: center; padding: 5px 0;
	animation: tabbable 8s ease infinite;
}
#tabs > a:focus, #tabs > a:hover { filter: brightness(1.75); }
#tabs > a.chosentab { background: none !important; box-shadow: 0 0 5px #0006; }
#tab3.disabled { background: #F005; color: white; opacity: 1; }

@keyframes tabbable {
	0%, 30%, 70%, 100% { background: #058e4244; }
	50% { background: #058e4266; }
}
#tabs > a:nth-of-type(2) { animation-delay: 2s; }
#tabs > a:nth-of-type(3) { animation-delay: 4s; }
#tabs > a:nth-of-type(4) { animation-delay: 6s; }

#options { width: 100%; }

#optionstop {
	padding: 5px;
	position: relative;
	height: 500px;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
}

.optionsection {
	display: none; flex-direction: column; gap: 25px;
	width: 100%; height: 100%; overflow: clip auto;
	margin: -5px; padding: 5px;
}
#options:has(#tab1.chosentab) #infoblock1, #options:has(#tab2.chosentab) #infoblock2,
#options:has(#tab3.chosentab) #infoblock3, #options:has(#tab4.chosentab) #infoblock4 { display: flex; }
.optionsection > div { width: 100%; }
.optionsection > div > h3 { color: black; }

.bold { font-weight: bold; }

#swappables select.inputs:focus {
	background-color: #f8fffc;
	border: solid 2px #058e42;
	margin: -1px auto 3px;
}

.fcbholder, .optionsecton label { text-align: center; display: block; margin: auto; }
.fcbholder > .formbtn:hover, .fcbholder > .formbtn:focus { margin: -1px; }

#swappables > div p.tinystatus {
	text-align: center;
	font-size: 12px;
	margin: 2px;
}

a.formbtn { display: inline-flex; align-items: center; padding: 0 6px; font-size: 13.3333px; height: 48px; }

div[inert] {
	opacity: 0;
	pointer-events: none;
	background: #0002;
	border-radius: 5px;
	min-height: 270px
}

div[inert] form { display: none !important; }

.outofservice {
	position: absolute;
	left: 5%;
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

.outofservice p { font-size: 15px !important; }

#swappables > div > div { position: relative; }