@charset "UTF-8";
@import url('/climate/styles/map-controls.css');
@import url('/climate/styles/breadcrumbs.css');
@import url('/climate/styles/date.css');
@import url('/climate/styles/theme-blue.css');

:root {
	--max-width: 100%; /*calc(100vw - (100vw - 100%));*/
	--max-height: 100%; /*calc(100vh - (100vh - 100%));*/

    --primary-dark: hsl(193, 96%, 18%); 
    --primary: hsl(188, 96%, 28%);
    --primary-mid: hsl(188, 96%, 48%);
    --primary-light: hsl(188, 96%, 74%);
    --primary-lightest:#E5F8FF; /*hsl(188, 56%, 91%);*/

    --active-bg: #06c;
    --active-text: #fff;
    --bom-blue: #2461e5;
}



h1 {padding-bottom:0;}
p {margin:0;}
#textAccordion details p+ul {margin-top: -0.6em;}

#container.fullwidth {padding: 0px 20px 12px 23px;}

footer { margin-top: auto;}
footer, header {
	background-color: #036;
	color: #fff;
	max-width: 100vw;
	padding:5px 5px 5px 10px;
	box-sizing: border-box;
}
header {background: rgb(0,51,102);}


@media all and (min-width: 768px){
	header {
		background: rgb(0,51,102);
		background: linear-gradient(90deg, rgba(0,51,102,1) 45%, rgba(25,100,170,1) 100%);
	}
}
footer a, header a{color: #fff; text-decoration: none;}
footer a.copyright {
    min-width: 1.2em;
    font-size: 0.8em;
    padding: 0;
    margin: 0;
}
header {min-height: 60px;}

html, body {
    font-family: Arial, Helvetica, sans-serif; line-height: 1.6em;
	padding: 0;
    margin: 0;
	font-size: 13px;
    height: 100%;
	width: 100% ;
	background-color:#ccc;
}
body  #content {font-size: 100%;}


.flex-column {display:flex; flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}

#pageContainer {background-color: #fff; min-height: var(--max-height);}
#contentContainer {margin:auto;} /* height is  set by script calc(50vh + 40px) */


#mapContainer, #tableContainer { width: 100%; padding-right: 1.4em; box-sizing:border-box; }
#tableContainer { overflow-x:scroll; }
#mapContainer.offscreen, #tableContainer.offscreen { margin-left: -300vw;  }

.map-variables select {min-width:200px; }
.map-variables input  {min-width:200px; padding-left: 0.4em; background-color: #efefef; border: none;}

/* map popup content */
.rainTotal, .keyValue {font-size: 0.96rem; color: #005BFF; }

.map-page fieldset { margin-right:10px; margin-bottom: 2px; margin-left: 5px;}
.map-page .radio-buttons { min-width:160px; margin-right: 10px; }
.map-page .radio-buttons label {
	border: 1px solid #ccc;
	line-height:unset;
	background-color: #fff;  
	color:#666; 
	font-weight:bold; 
	margin-right: -4px;
	clear:none;
}

#dataTable-selector {width: 40px;}

/* for urban icon in map info */
p img {display: inline-block; vertical-align: text-bottom;}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {background: rgba(255,255,255, 0.9);}
.leaflet-popup-content h3.title {color:#900; padding:0; margin:0; font-size: 1.0em;}
.leaflet-popup-content h3.title.inactive {color:#666; padding:0; margin:0;}

.alt-name {color: #666; padding:0;}

/* leaflet home button */
.leaflet-control-zoomhome  a:nth-child(2)  {
    background: #fff url('icon-map-aus-grey.svg') no-repeat 3px 4px !important; /*/climate/images/symbols/icon-map-aus-grey.svg */
}

.leaflet-popup-content p {margin: 0px 0 !important; padding: 0;}
.leaflet-popup-content p.space-top { margin-top:0.6em !important;}

.leaflet-popup-content b {padding-left: 5px;}
.leaflet-popup-content span {color: #666; min-width: 6em;}


.label, .unit {color:#333; font-size: 0.9em;}
.group-label {color: #900 !important; font-size: 0.9em; margin-top: 0.6rem;}
.black { color: #000; }

/* popup */
.stn_num {font-size: 0.8em !important; padding: 0 0 8px 0 !important;}
.total {padding-top: 8px !important}
.date-label { 
	font-size: 1em;
	font-weight: bold;
	color: #900 !important;
} 

.image-popup-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

.image-popup-panel {
    display: none;
    /*position: fixed;*/
    z-index: 2147483647;
    width: inherit; /* min(320px, calc(100vw - 2rem)); */
    max-width: 500px; /*320px;*/
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    overflow-x: hidden;
}

.image-popup-panel.open {
    display: block;
}

.image-popup-panel img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 45vh;
    object-fit: contain;
    border: 1px solid #ddd;
    background: #f8f8f8;
}

.image-popup-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    border: 0;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    background: rgba(255, 255, 255, 0.95);
    color: #666;
    cursor: pointer;
    line-height: 1;
}

.image-popup-close:hover,
.image-popup-close:focus {
    background: #f0f0f0;
    color: #000;
}

.value {min-width: none;}
/* timeseries link */
.date-label a {display: inline-block; width:10em; text-align: right; padding-left:1em;}
.popup h3:focus { outline: none;;}
/* popup */

/* deciles */
/* stroke = VSCODE hex vals */
.rd1 {fill:#ff1919; stroke:#ff1919;}
.rd2 { fill: #ff6666; stroke:#ff6666}
.rd3 { fill: #ffcccc; stroke:#ffcccc;}
.rd4 { fill: #c8c8c8; stroke:#c8c8c8;}
.rd5 { fill: #ccccff; stroke:#ccccff;}
.rd6 { fill: #6666ff; stroke: #6666ff;}
.rd7 { fill: #0000ff; stroke: #0000ff;}


.rt1 {fill:#000000; stroke:#696969;} 
.rt2 { fill: #702500; stroke:  #696969;}
.rt3 { fill: #ba450b; stroke: #696969;}
.rt4 { fill: #F8972c; stroke: #696969;}
.rt5 { fill: #FBC351; stroke: #696969;}

.rt6 { fill: #F7e8a4; stroke: #696969;}
.rt7 { fill: #C9E4B4; stroke: #696969;}
.rt8 { fill: #9EC9E0; stroke: #696969;}
.rt9 { fill: #3d83b6; stroke: #696969;}
.rt10 { fill: #00509b; stroke: #696969;}
.rt11 { fill: #66ff00; stroke: #696969;}

/* not used in DS */
.hide-rt1 .rt1, 
.hide-rt2 .rt2,
.hide-rt3 .rt3,
.hide-rt4 .rt4,
.hide-rt5 .rt5,
.hide-rt6 .rt6,
.hide-rt7 .rt7,
.hide-rt8 .rt8,
.hide-rt9 .rt9,
.hide-rt10 .rt10,
.hide-rt11 .rt11,
.hide-rt12 .rt12,
.hide-rt13 .rt13 {display: none; } /* review reliability for events */


#map { background-color: #aad3df; margin-bottom: 20px; }

/* for loading animation */
#mapContainer {position:absolute; width: 100%; box-sizing: border-box;}
#tableContainer {position:absolute; /* min-height: 100px;*/ width: 100%; }  

table th {vertical-align: top; }
table td:first-child {background-color: #efefef; border-color: #fff;}
table td:nth-child(1) {color: #0080FF; text-decoration: underline;}
table td:nth-child(1):hover, table td:nth-child(4):active {cursor: pointer; background-color: #fff; }
table td:nth-child(4) { background-color: #EDF5FF; font-weight: bold;}
table td {border-bottom: #efefef solid 1px;}
table th {background-color:#d3e6ff; color:#15436c;}
.dataTable-top {background-color: #efefef;}

/* elevation, lat lon */
.dataTable-table td:nth-last-child(1),
.dataTable-table td:nth-last-child(2),
.dataTable-table td:nth-last-child(3) {background-color: #f8f8f8;}

.dataTable-table tr:hover td {background-color: #d3e6ff;}
.dataTable-table td:first-child {background-color: #f0f4f8; font-weight: bold; color: #666;}

.dataTable-table td {border-bottom: 1px dotted #ddd;}

.dataTable-table>tbody>tr>td, .dataTable-table>tbody>tr>th, .dataTable-table>tfoot>tr>td, .dataTable-table>tfoot>tr>th, .dataTable-table>thead>tr>td, .dataTable-table>thead>tr>th 
{vertical-align:top;}

#tableMessage {color: #666; padding: 1em;}
#tableContainer {position: relative;}
#tableLoading, #mapLoading {position: absolute; z-index: 999; top: 40px; left:40%;}
#tableContainer ul {font-size: 0.9em;}
#tableContainer li { padding: 0; font-size: 0.9em;}
#tableDataBtn { width: 30px;}


.flex-justify {justify-content: space-between;}


/*
#scrollToMap { 
	padding-left: 30px; background: #fff url('icon-map-aus-grey.svg') no-repeat 4px 1px !important;
	position: absolute; top: 1em; right: 1em;
 }
 */
#downloadTableData {
	background:#fff url(/climate/images/symbols/download-grey.svg) no-repeat 2px 2px;
    min-width: 30px;
    min-height: 30px;
}

.leaflet-control-download-map {
	background:#fff url(/climate/images/symbols/download-grey.svg) no-repeat 2px 2px;
	min-width: 30px;
	min-height: 30px;
	width: 30px;
	height: 30px;
}
.dataTable-table {font-size: 12px;}

/* radio buttons */
fieldset#legendTypes {margin: 0; padding: 0; width:100px; border: none;}

/*//[disabled]  //input[type="radio"]:disabled*/
#legendTypes.radio-buttons label:has(input[type="radio"]:disabled) {
	background:#efefef; color:#fff; cursor: not-allowed;
}


#legendTypes.radio-buttons label { 
    width: 50%;  border: 1px solid #ccc;margin-right: -1px; line-height:unset; background-color: #fff; color:#666; font-weight:bold; 
}
.radio-buttons span { display:block; box-sizing:border-box; height:26px; line-height:26px; text-align: center; } 



.map-page .radio-buttons label:hover, 
#legendTypes.radio-buttons label:hover,  
.radio-buttons label.active, 
#legendTypes.radio-buttons label:has(input[type="radio"]:checked) {
	cursor:pointer; background:#06C; color:#fff !important;
}

.map-page .radio-buttons input[type="radio"], 
#legendTypes.radio-buttons input[type="radio"]  {
	position:absolute;
	z-index: -1;
    width: unset;
    height: unset;
    padding: 0;
    opacity: 0;
}


#reselectRegion {width:auto; background-color: #efefef ; color: #ddd; cursor:not-allowed;}
#reselectRegion.active {background-color: #fff ; color:#000; cursor: pointer;}
#reselectRegion.active:hover {background-color: #ddd ; }


/* spinner */
.showing {display: inline-block;}
.hidden {display: none !important;} /* unset */

/* loading spinner */
#loading {
	color: inherit;
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	z-index: 99999999999999;
	left:45%;
	top: 45%;
  }
  #loading div {
	transform-origin: 40px 40px;
	animation: lds-spinner 1.2s linear infinite;
  }
  #loading div:after {
	content: " ";
	display: block;
	position: absolute;
	top: 3px;
	left: 37px;
	width: 6px;
	height: 18px;
	border-radius: 20%;
	background: #1964AA; /* rgb(3, 141, 84);*/
  }
  #loading div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -1.1s;
  }
  #loading div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -1s;
  }
  #loading div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.9s;
  }
  #loading div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.8s;
  }
  #loading div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.7s;
  }
  #loading div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.6s;
  }
  #loading div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.5s;
  }
  #loading div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.4s;
  }
  #loading div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.3s;
  }
  #loading div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.2s;
  }
  #loading div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.1s;
  }
  #loading div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
  }
  @keyframes lds-spinner {
	0% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
  }
  
/* table button */
.button {background-color: #ffffff;}
.button:hover, .button:hover:active  {background-color: #efefef;}
.icon-table { padding-left: 24px !important; background:#fff url(/climate/images/symbols/icon-table-20x20.png) 4px 4px no-repeat; }
.icon-loading { background: url(/climate/images/symbols/icon-loading-24x24.gif) left middle no-repeat; }
.icon-map { background: #fff url('icon-map-aus-grey.svg') no-repeat 3px 4px !important; width:30px; height: 30px;}

.btn-narrow {padding-left:0; border-width:1px; background-color:#fff; }
.btn-narrow.icon {
	width: 30px; height:28px; min-height:30px;min-width:30px;
	padding-left:0; background-position:center; background-repeat:no-repeat;  background-color:#fff;
}
.btn-narrow:hover, .btn-narrow:active {background-color:#efefef; cursor:pointer;}

.icon-download {
    background: url(/climate/images/symbols/download-grey.svg) no-repeat left;
    min-width: 24px;
    min-height: 20px;
    display: inline-block;
    vertical-align: middle;
}



.legend-btn {
	width: 100px;
    height: 30px;
	line-height: 30px;
	display: block;
	border-radius: 2px;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
	background-color: #fff;
	text-align: center;
}

.legend-btn:hover, .legend-btn:active {
	background-color: #efefef !important;
}

.legend-bg, #legend #bg {fill: rgba(255,255,255,0.8); }

.legend {transition: margin 300ms ease-in-out; margin-left: 0;}

.legend.open { margin-left: 0; margin-bottom: 1px;  }
.legend.close {margin-bottom: -680px;} /*-580px */

#legend.leaflet-control {margin-bottom: 0;}
/* ************************************** */
#legendsMaps {height: fit-content;line-height: 1px;}
#legendSites {height: fit-content;min-height:1px; line-height: 1px;}
#legendSites svg[style] {line-height: 1px !important; }


/* redundant? */
.list li, .list label, .list ul {display:block; float:none; clear: both; height: auto; clear:both; float:none;}
.list li {height: 25px;}
.list p {float: none; clear: both;}

.map-page label {text-align: left;}
.map-page label, .control-label, #content label {font-size: inherit;}

.map-page select.dataTable-selector {min-width: 50px !important;}
.dataTable-dropdown label {font-size:0.8rem ;}


.summary li {
    list-style: outside none none;
    background: rgba(0, 0, 0, 0) url(/climate/images/symbols/bullet-blue.png) no-repeat scroll 0 0.3em;
    line-height: 1.6em;
    margin: 0 0 1.4em 0;
    padding: 0 0 0 24px;
}


/* Base styles for the hidden content */
details::details-content {
  opacity: 0;
  block-size: 0;
  overflow: clip;
  transition: 
    block-size 0.3s ease-out, 
    opacity 0.3s ease-out, 
    content-visibility 0.3s allow-discrete;
}

/* Target styles when the details element is open */
details[open]::details-content {
  opacity: 1;
  block-size: auto;
}

/* info sections below maps */
details {  
    border-radius: 5px;
    margin-bottom: 10px;
    padding:5px;
    border: 1px solid var(--primary-lightest);
}


details[open] {
    border-color: var(--primary-light);
}

summary::marker {
  content: ""; 
  list-style: none;
}
 
/* For better cross-browser compatibility, include the vendor prefix for Safari */
summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: "▶";
  display: inline-block;
  width: 1em;
  margin-right: 0.5em;
  transition: transform 0.2s ease;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details h2, details h3,details h4 {/*display:inline-block; padding:0;*/ margin:0; font-size: 1.1em; color:#000;padding-top: 0;}
details h4 {font-size: 1em; }
#textAccordion details, details[name='accordion'],#textAccordion details[open]  {
    border: none;
    margin:1px;
    padding:0;
}

details[open] > summary::before {
  transform: rotate(90deg); /* Rotate when open */
}

details summary{
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    border-radius: 5px;
    padding:10px;
    background-color: var(--primary-lightest);
}
details summary:focus {
    background-color: var(--primary-lightest);
}
details summary figure { margin:5px; }


/**************************************************** */

#legend svg {background-color: rgba(255, 255, 255, 0.76);}
#selectionTitle span.label {  color:#1964AA; font-weight: bold; }
#selectionTitle h2, #selectionTitle h3 { text-align: left;/*display: inline; margin: 0; padding: 0; font-weight: normal; color:#000;*/ min-width: 6em }
#selectionTitle h3 { padding-right: 1em;}

.banner {
    background: linear-gradient( 
75deg,#003366 20%,#1964AA 70%);
    padding: 20px 10px 10px 20px;
    margin: 7px 0 10px 0;
    color:#fff;
}
.banner p, .banner h1, .banner time, .banner .date,.banner p.date time:first-child:before {color:#fff; font-weight: normal;}


/*hide radio buttons - display labels as  buttons*/
input[name="format"] { opacity: 0; }

/* secondary controls inactive state */
fieldset.flex-row[hidden] > * { opacity: 0.2; cursor: none;}

/*.radio-buttons background: #fff; color: #666;*/
#content fieldset.flex-row[hidden] > label:hover,  
#content fieldset.flex-row[hidden] > label:active {cursor: none; background: #fff; color: #666;}
#content fieldset.flex-row[hidden] > label.active {background: #063; color: #fff;}

/* layout ****************************************************************************************************** */

@media screen and (max-width: 374px){
	h1 {font-size: 1.1rem;}
	#map { margin-bottom: 20px; }	
	.map-page input, .map-page select, #period {
		width:auto;
		/* change to scalable */
		max-width: 100px;
		min-width: 80px;
		margin: 0 2px;
	}	
}

/*  (max-width: 600px) */
@media screen and (min-width: 375px) and (max-width: 767px){
	#map { margin-bottom: 20px; }	
	.map-page input, .map-page select, #period {
		width:auto;
		/* change to scalable */
		max-width: 120px;
		min-width: 110px;
		margin: 0 2px;
	}

    #pageContainer {width: var(--max-width);} /* scaling test check only = remove */
    
    
    html, body #content {
        font-size:14px;
    }
    select, option, input, button, li, details, summary, label, label span {font-size:14px;}
    h1 {font-size: 1.2rem; margin: 8px 0;}
    p.date {font-size: 12px;}

    /*.mapcontrols {padding:2px;}*/
}

/* prevent overlap legend button 767 */
@media only screen and (max-width:767px)  {
    .flex-row {flex-wrap: wrap;}
    .flex-row.nowrap {flex-wrap: nowrap;}
    .leaflet-touch .leaflet-control-attribution {
        margin-left:120px;
        overflow: hidden;
        max-height: 16px;
    }
    .map-page input#reselectRegion { min-width:auto;}
    .hide-small-screen {display: none;}
}

@media only screen and (min-width:768px)  {
    h1 {font-size: 1.4rem;}
}

@media only screen and  (max-width: 1003px) {
	p.date { margin:0; font-size: 13px;}
	h1, p.date {padding-left: 10px;}
	footer { padding:10px; }
	details { margin:10px 0; }
}

@media only screen and (min-width: 1004px){
	/**/
	#pageContainer {max-width: 1004px; margin:auto; min-height:100%; }
	#mainContent { width: 800px; margin:0 auto;}
	#content { width: 922px; margin:0 auto;}

	#contentContainer { max-width: 760px; margin:0 auto 0 0;} /* bom wrapper page - needs map-free scroll area */
	#mapContainer, #tableContainer { max-width: 760px; padding-right:0;
	}
/* test small 
	#contentContainer { max-width: 560px; margin:0 auto 0 0;}
	#mapContainer, #tableContainer { max-width: 560px; padding-right:0;
	} 
*/
	#mapContainer.offscreen, #tableContainer.offscreen { margin-left: -5000px;  }
	footer {padding:10px; font-size: 0.8rem;}
}

@media screen and (min-width: 768px) {
	#breadcrumb { margin: 0 0 10px 0;} 
}




 /* test max rendering size */
 /* @media only screen and (min-width: 1004px) {} */
    #content {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }


    #contentContainer {
        max-width: 100%;
        margin: 20px auto 0 0;
    }
    .content-text {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .mapcontrols, .box-product {
        max-width: 100%; 
        width: 100%;
        margin: auto;
    }

    #mapTextContainer {
        position: relative;
    }

    #mapContainer {
        padding-right: 0;
    }
    #tableContainer {
        padding-right: 0;
        max-width: 100%;
        margin: 0 auto 0 0;
    }

/* phone/tablet */
@media only screen and (max-width: 1003px) {
    .content-text {
        width:100vw; 
        max-height: 100vh; 
        left: 0;
        /* float:none; */
        position: relative;
    }

    #mapContainer, .map-size {
        width:100vw; 
        max-height: 100vh; 
    }
    #mapContainer {
        float:none;
        position: relative;
    }
    #tableContainer {
        width:100vw; 
        max-width: 100vw; 
    }
}

@media only screen and (min-width: 1004px){

    /* options - flex, grid, position absolute */
    .content-text {
        position: absolute;
    }
}
  
@media only screen and (min-width: 1004px) and (max-width:1399px) {
    .content-text {
        left: 570px;
        width:340px; 
        max-height: 600px; 
    }

    #mapContainer, .map-size {
        max-width: 560px;
        max-height: 600px;
    }
    #tableContainer {
        max-width: 960px;
    }
}
    
@media only screen and (min-width: 1400px) {
    
    #mapContainer, .map-size {
        max-width: 800px;
        max-height: 700px; 
        min-height: 700px;
        height: 700px;
    }
    #tableContainer {
        max-width: 1370px;
    }

    .content-text {
        left: 810px;
        width:500px; 
        max-height: 700px; 
        min-height: 700px;
        height: 700px;
    }

}


/* responsive adjustments for wider page */
@media only screen and (min-width: 1400px) {

    .banner {margin-top: 0; }
    
    .wide #pagewrap {width:1400px; }
    #container.two-column {width:100%;} 
    .two-column #content {width:95%; margin:0; margin-left:5%;}
   
	/* header */
	#header, #header .l_content, #header-main .l_bottom {width:100%;}
	#header-main {float:right;width:70%;}

	#header-main .l_top {text-align:right;padding-left: 0;width: auto;}
	#header-logo {width:200px;} /* could do as % */
	
	/* page */
	body {max-width:100%}
	#columns, #content,#pagewrap, #pageheight {width: 100%; overflow-x: hidden;}
    #columns {padding-bottom:10px; }
	/* content */
	#container.fullwidth {width:98%; /*width: calc(100% - 20px);*/}

    #footer {height:auto;width:100%;overflow-x: hidden;}

    /* per 1003px */
    #footer-columns {
        max-width: 100%; 
        width:1400px;
        padding:20px 0 0 0; margin:0 auto; height:auto;
    }/* 963px */
    #footer-columns ul, #footer-columns  ul#fc-one {box-sizing:border-box; width:23%; margin:0; margin-left:1%; height:auto; padding:3px;}
    #footer-columns li.row-link-first {margin-left:0;}
    #footer-columns li.row-link {margin-left:4px;padding-left:4px;}
    #footer #footer-columns li.uppercase {font-size:10px !important; }
   
}


@media only screen and (min-width: 1004px) {
    #mapTextContainer.offscreen, #mapContainer.offscreen, #tableContainer.offscreen {
        margin-left: -5000px;
    }
}
#mapTextContainer.offscreen,#mapContainer.offscreen, #tableContainer.offscreen {
    margin-left: -300vw;
    height:0;
}
/* reset container div triggered by table height displacement */
#tableContainer.offscreen, #mapContainer.offscreen {height: 1px;}

.map-variables input, .map-page input,  .map-page .radio-buttons {
    width: auto; min-width: auto;
    /*max-width:160px;*/
}
.map-page select {width:auto; max-width:auto; min-width: 200px;}

input[type="range"] {width:80px; }
input[type="radio"]{display: hidden;width:10px;}


.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 6px; 
	}
.leaflet-popup-content {
	margin: 5px 19px 5px 5px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 8px 0; 
	}

.leaflet-popup-content h3.title {
    color: #900;
    padding: 0;
    margin: 0;
}

.leaflet-popup-content span.value {color:#000; font-weight: bold;}
.leaflet-popup-content span.label {display: inline-block; min-width: 11em; }

details label {display: block !important;}
details h3 {clear: both; display: block;}

/*
.content-text .ui-state-default,
.content-text .ui-widget-content .ui-state-default,
.content-text .ui-widget-header .ui-state-default {
    background:#E5F8FF;    
    border-color:#fff; 
    border-width: 1px;
    color:#054364;
}
*/

.p-id {position: relative;}

details h2, details h3, details h4 {
    margin: unset;
    margin-bottom: 0.4em;

}
summary h2, summary h3, summary h4 { margin:0}

.map-title {
    background-color: inherit;
    margin-bottom: 0px;
    padding: 5px;/* 30px;*/
}

.map-title h2,.map-title h3 {margin-top:0;padding:0;}
.map-page {margin-bottom: 10px;}

p.date > time:first-of-type:before {
        content: " ";
    }


/* full width - 3 columns */
.contentColumns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 2px;
}

.contentColumns > * {
    width:33%;
    margin:0 !important;
    box-sizing: border-box;
    /*padding:0 !important;*/
    margin:0 !important;
}
.contentColumns > .wide {
     width:66%;
}

/* inbetween - 2 columns */
@media (min-width: 601px) and (max-width: 1004px) {
    /* narrow page - 1 column */
    .contentColumns > *, .contentColumns > .wide {
       width:49%;
    }
}

@media (max-width: 600px) {
  .contentColumns {
    flex-direction: column;
  }
  .contentColumns > *, .contentColumns > .wide {
       width:100%;
    }
}

details img.legend {
    background-color: #FFF;
    width:102px; /* temp - test legend. inkscape save as optimised svg needs a width applied when used as image */
}

a.button.shouty {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: var(--bom-blue);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.button.shouty:hover {
    background-color: var(--primary-lightest);
    color: #000;
}
/* table button */
.button-dark {background-color: var(--blue-dk);color: #fff;}
.button-dark:hover, .button-dark:hover:active  {background-color: var(--active-bg);}

.inline {display: inline-block;}


@media only print {
   .leaflet-control-fullscreen  {display: none !important;} /* .leaflet-control-container, */
    
}

.button h2 {color:  #666 ; font-size: 1.1em;}
.content-columns-2 {columns: 2;} 
a.button.inline {display: inline-block;}