body {margin:0; padding:1rem;}


div#container {max-width:600px; margin:0 auto; background-color:#9bd7ff; color:#444; padding:1rem; border-radius:.25rem; text-align:center; transition:.5s;}


div#container h1 {text-align:center; margin-bottom:1rem;}
div#container h1 img {height:1em; margin-right:.25rem; position:relative; top:-.25rem;}

div#container div#colA {padding-right:.5rem;}
div#container div#colB {padding-left:.5rem;}

div#container div.selector {background-color:#0001; border-radius:.25rem; padding:.75rem .75rem .35rem;}
div#container div.selector h2 {text-align:center; margin:.5em 0 .75em; display:none;}
div#container div.selector div.select {user-select:none;}
div#container div.selector div.select input {display:none;}
div#container div.selector div.select label {background-color:#fffa; box-shadow: 0px 1px 1px rgba(0,0,0,.5); font-weight:300; transition:.25s; margin-bottom:.15rem;}
div#container div.selector div.select label {border-radius:.25rem; cursor:pointer; width:100%; padding:.25rem 0; text-align:center; position:relative; overflow:hidden;}
div#container div.selector div.select label:hover {box-shadow: 0px 2px 2px rgba(0,0,0,.5);}
div#container div.selector div.select input:checked + label {background-color:dodgerblue;}

div#container div.selector div.select.clear label:hover,
div#container div.selector div.select.clear input:checked + label, 
div#container div.selector div.select.clear label {background-color:#0000; box-shadow:0 0 0 #0000; font-weight:bold; padding-bottom:0;}

div#container div#rootSelector div#colA1 {padding-right:.25rem;}
div#container div#rootSelector div#colA2 {padding-left:.25rem; display:flex; flex-direction:column-reverse;}
div#container div#rootSelector div.select label {font-weight:600;}

div#container div#intervalSelector div#colB1,
div#container div#intervalSelector div#colB3 {padding-right:.25rem;}
div#container div#intervalSelector div#colB2,
div#container div#intervalSelector div#colB4 {padding-left:.25rem; /*display:flex; flex-direction:column-reverse;*/}

div#container div#intervalSelector div#colB3,
div#container div#intervalSelector div#colB4 {/*display:none;*/ margin-top:.5rem;}
/*div#container div#intervalSelector div.select label {}*/


div#container div#chosenInterval {margin:2rem auto; border-radius:5rem; text-align:center; background-color:#0002; font-size:2rem; font-style:italic; display:inline-block; padding:.25rem .5em;}
div#container div#chosenInterval:empty {box-sizing:content-box; height:1.5em; width:3em;}


div#container div#intervalDisplay {margin-bottom:1rem; position:relative;}
div#container div#intervalDisplay img {width:100%; border-radius:.25rem; box-shadow:0px 1px 2px rgba(0,0,0,.5);}
div#container div#intervalDisplay div.highlight {border-radius:50%; padding:1.5%; display:inline-block;}
div#container div#intervalDisplay div.highlight {position:absolute; top:0; left:0; transform:translateX(-50%);}
div#container div#intervalDisplay div.highlight.black {background-color:rgba(255,0,0,0.75); top:50%;}
div#container div#intervalDisplay div.highlight.white {background-color:rgba(255,0,0,0.55); top:75%;}

div#container button {background-color:#fffa; box-shadow: 0px 1px 1px rgba(0,0,0,.5); font-weight:300; transition:.25s;}
div#container button {border:1px solid #888; border-radius:.25rem; padding:.5rem; width:100%; display:none;}
div#container button:hover {box-shadow: 0px 2px 2px rgba(0,0,0,.5);}



/* not mobile (sm,md,lg,xl) */
@media screen and (min-width:576px) {
	div#container div.selector div.select label span.mini {position:absolute; top:0; right:0;}
	div#container div.selector div.select label span.mini {padding:0 .25rem; font-size:.65rem;}
	/*div#container div.selector div.select label span.full {}*/
}


/* mobile (xs) */
@media screen and (max-width:575px) {
	div#container h1 {font-size:2rem;}

	div#container div.selector div.select label {font-size:1.15rem; /*padding:.5rem 0;*/}
	/*div#container div.selector div.select label span.mini {}*/
	div#container div.selector div.select label span.full {position:absolute; top:0; right:0; border-radius:inherit;}
	div#container div.selector div.select label span.full {opacity:0; background-color:#fffc; width:0; height:0; font-size:.65rem; padding:.1rem; transition:.25s;}
	div#container div.selector div.select label:hover span.full {opacity:1; width:100%; height:100%;}

	div#container div#chosenInterval {font-size:3rem; padding:1rem .5em;}
}