/* to do SCOPE */
:root {
	--blue-active: #0075FF ; 
    --pad: 5px;
    --line-height: 28px; /* calc(); to rem */
}


#content summary h2 {padding:5px 5px 5px 10px !important; margin:0; border-bottom:none;}
#content summary:hover {background-color: #fff; /* var(--blue-active);*/ cursor: pointer; }
/*#content summary:hover h2 {color: #fff; }*/


.box-image img {max-width: 100% !important;}
.map-page {border:none;}
details {margin-bottom: 1.4em;}
fieldset {border:none;}

.p-id {position: relative;}
.radios input[type=radio], .radios input[type=check], .radios input[type=range] {margin:0 5px;}

figure img {display:block; text-align: centre;margin:auto; }
/* 
olr images have transparent backgrounds!
background: url(/climate/images/interface/unavailable.svg) no-repeat;
*/
figcaption, figcaption h3 {display:block;text-align: center;}

/*legend {float:left; line-height: 2em; font-weight: normal; font-size: 0.92em;}*/

.map-page input[type=radio], .map-page input[type=checkbox] {width: auto;}
.mapcontrols {margin-bottom: 1em;}
.map-page input, .map-page select {width: auto;padding-right: 16px}
.map-page label.bold, #content label.bold { color:#000; font-weight: bold;}


.target {fill: rgba(255,255,255,0.1)}
.target:hover, .target:active {cursor:pointer; fill: rgba(159, 245, 88, 0.3) }

#regionImg img {display:block; max-width: 100%; box-sizing: border-box; height:auto;}

/* TODO - move to root vars as activeBlue */
.active select {border-color:#0075FF !important;}

#phase-cell {overflow: hidden;}
/* from 2013 phase images have too much white space for optimal non-scroll ui - unless scale reduced */
#phase-cell img { aspect-ratio: 0.94; margin-top: -30px; } 
#olr-cell img { aspect-ratio: 0.99; }
#timeolr-cell img, #twinds-cell img { aspect-ratio: 0.89; } 


#content .archive-control { text-align: left; }

.space-between {justify-content: space-between;}
.justify-content {justify-content: center;}
.flex-fill {flex: 1;}
.space-between { justify-content: space-evenly; /*space-between;*/}
.w-600 {max-width: 500px; }
.btn-wind {padding: 0 10px; border:1px solid #ccc; margin-right: 20px;}

fieldset.active { background-color: #efefef; border: 1px dotted var(--blue-active);}
.date-controls > fieldset { padding: 5px 10px; border: 1px solid #ccc;}
.date-controls > fieldset + fieldset {margin-left: -1px;}
.date-controls > fieldset fieldset label {color: #ccc !important;}
.date-controls > fieldset.active fieldset label {color: unset !important;}
/* TODO browser focus/active classes need reinstating! not outline */
select:focus, select:active {border: 1px solid var(--blue-active); box-shadow: 0px 0px 3px var(--blue-active) ;}

/* override below in climate-responsive = poor default */
@media screen and (max-width: 767px){
    .flex > * {
        width: unset;
        margin-left: 0;
        margin-bottom: unset; 
        flex-wrap: wrap;
    }
    .space-between {
        justify-content: unset;
    }
}