:root {
	--outofservice-color: #f33;
	--degraded-color: #ffb833;
	--normal-color: #3f3;
	}

.last_modified { text-align: center; }

/* Front */

#frequency_list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0 auto 1em;
	}
#frequency_list li {
	flex: 1;
	border: 1px solid #999;
	padding: 2px;
	text-align: center;
	margin: 0;
	}

.nwr-bannernotes {
	list-style: none;
	margin: 0 0 .5rem;
	text-align: center;
	font-size:1.1em;
	line-height: 1.5;
	font-weight:bold;
	background-color: #d3ebfe;
	}

.nwr-bannernotes li {
	padding:0.75rem;
	margin:0;
	}

.nwr-bannernotes li:nth-child(even) { background-color:#e2f2fe; }


.p-5px {padding:5px;}
.p-10px {padding:10px;}
.pt-1rem {padding-top:1rem;}
.mt-1rem {margin-top:1rem;}
.mtb-1rem {margin-top:1rem;margin-bottom:1rem;}
.d-inline-block {display:inline-block;}
.btop-lb {border-top: 1px dotted #94c6ef;}


.leaflet-attribution-flag { display: none !important; }

ul.legend {
	margin: -2px 0.5em 0;
	list-style: none;
	}

ul.legend li {
	text-indent: -1em;
	margin: 0 0 2em 1em;
	}

ul.legend li img { margin-top: -7px; }

ul.legend li strong {
	color: #f00;
	text-transform: uppercase;
	}


.transmitter-info {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.3em 1em;
	margin-bottom: 1em;
	}

	.transmitter-info dt {
		font-weight: bold;
		text-align: left;
		}

	.transmitter-info dd { margin: 0; }

/* Outages */

#map {
	height: 500px;  /* Adjust height as needed */
	width: 100%; /* Make sure the map fills its container */
	border: #999 solid 1px;
	border-radius: 5px;
	margin-bottom: 1em;
	position: relative;
	}


#notices > h3  {
	font-size: 1em;
	background: #0076d6;
	padding: .5em 1em;
	color: #fff;
	}

/*
#notices > ol {
	list-style:none;
	margin: 0;
	}

	#notices details {
		margin-left: 1em;
		}

		#notices details summary {
			cursor: pointer;
			font-weight: bold;
			margin-left: -1em;
			margin-bottom: .5em;
			}
*/
#detail {
	width: 50%;
	margin: auto;
	padding: 10px;
	display: none;
	/*box-shadow: rgba(0, 0, 0, 0.23) 0px 5px 6px, rgba(0, 0, 0, 0.19) 0px 3px 3px;*/
	}

#detail tbody tr:nth-of-type(odd) { background: #eee; }

.cms-content h3 {
	text-align: center;
	font-weight: bold;
	text-wrap: balance;
	margin: 1em 0 .5em;
	}

	#detail table :is(th,td) {
	padding: .2em 1em;
	}

#listtable, #detail table {
	width: 100%;
	}

	#listtable thead,  #detail table thead {
		font-weight: bold;
		text-align: center;
		text-transform: uppercase;
		}


	#listtable tr:is(.status_outofservice, .status_degraded) { font-weight: bold; }
	#listtable tr:is(.status_outofservice, .status_degraded) > td:last-child { color: #f33; }

input#image-button {
	background: #ccc;
	padding-right: 16px;
	}

.leaflet-control-fullscreen a { background: #fff url(/images/nwr/fullscreen.png) no-repeat 0 0; }

.leaflet-touch .leaflet-control-fullscreen a { background-position: 2px 2px; }

.leaflet-fullscreen-on .leaflet-control-fullscreen a { background-position: 0 -26px; }

.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a { background-position: 2px -24px; 

}
/* Do not combine these two rules; IE will break. */
.leaflet-container:-webkit-full-screen {
	width: 100%!important;
	height: 100%!important;
	}

.leaflet-container.leaflet-fullscreen-on {
	width: 100%!important;
	height: 100%!important;
	}

.leaflet-pseudo-fullscreen {
	position: fixed!important;
	width: 100%!important;
	height: 100%!important;
	top: 0!important;
	left: 0!important;
	z-index: 99999;
	}



@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {
	.leaflet-control-fullscreen a {	background-image: url(/images/nwr/fullscreen@2x.png); 	}
}

.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	color: #444;
	display: block;
	height: 26px;
	width: 26px;
	line-height: 1.45 !important;
	text-align: center;
	text-decoration: none;
	font: bold 18px 'Lucida Console', Monaco, monospace;
	}

#divMain .leaflet-top { z-index: 500; }


#status {
	width: 30%;
	margin: auto;
	padding: 10px;
	}



.slider {
	margin: 0.25rem;
	padding-top: 0.5rem;

	/* outages map only, possibly */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	gap: 2em;
	}


.leaflet-control-slidemenu { cursor: pointer; }

.leaflet-menu {
position: absolute;
background-color: rgba(255, 255, 255, 255);
overflow: auto;
cursor: default;
z-index: 9999;
box-shadow: #222 -1px -1px 2px 0px;
}

.leaflet-menu-contents { padding: 10px; }

.leaflet-menu::-webkit-scrollbar {
width: 7px;
height: 7px;
background: #f2f2f2;
}

.leaflet-menu::-webkit-scrollbar-thumb {
border-radius: 2px;
background: #777;
}

.leaflet-menu-close-button {
background-color: transparent;
border: none;
font-size: 12pt;
color: #777;
cursor: pointer;
}

.leaflet-menu-close-button:hover { color: #0443a8; }

.fa,.fa-brands,.fa-duotone,.fa-light,.fa-regular,.fa-solid,.fa-thin,.fab,.fad,.fal,.far,.fas,.fat {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: var(--fa-display,inline-block);
font-style: normal;
font-variant: normal;
line-height: 1.5;
text-rendering: auto;
}

.xinfo {
	position: absolute;
	bottom: 30px;
	left: 10px;
	width: 200px;
	background-color: yellow;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 900;
	font-size: 12px;
	text-align: left;
	border-radius: 8px;
	border: solid 1px gray;
	padding: 8px;
	}

	.xinfo h3 {
		color: #000 !important;
		margin: 0;
		font-size: 1em !important;
		text-transform: uppercase;
		}

	.xinfo > table { width: 100%; }

	:is(.lbox,.xinfo) > table th {
		text-transform: uppercase;
		font-weight: bold;
		text-align: left;
		}

	table.counts td:last-child {
		text-align: right;
		}
		
.lbox {
	background: #fff;
	border-radius: 8px;
	border: solid 1px gray;
	padding: 8px;
	}

.cbox {
	display: none;
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	z-index: 900;
	width: 320px;
	margin: 0 auto;
	padding: 1em;
	text-wrap: balance;
	border: 1px black solid;
	background-color: white;
	font-size: 14px;
	text-align: center;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.23);
	}

.map-label {
	position: absolute;
	top: -1px;
	transform: translateX(-50%);
	background-color: #fff;
	border-radius: 5px;
	border: 2px solid #444;
	padding: 3px;
	text-align: center;
	white-space: nowrap;
	}

.map-label.redborder { border-color: #e00; }

.map-label.redbackground {
	white-space: default;
	color: #fff;
	background-color: #e00;
	}

.map-label.orangebackground {
	white-space: default;
	color: #000;
	background-color: #FFB833;
	}
	

/* from sites page */


    .leaflet-control-layers-toggle:after {
        content: "Switch Layers";
        color: "Blue";
    }
    
    .leaflet-control-layers-toggle {
        width: 100%;
        background-position: 3px 30%;
        padding: 3px;
        padding-left: 36px;
        text-decoration: none;
        line-height: 36px;
        position: relative;
        .leaflet-bar a,
        .leaflet-bar a:hover {
            height: 36px;
            line-height: 36px;
            width: 36px;
        }
    }
    
    .info {
        box-shadow: 1px 2px 1px LightGray;
        border-radius: 8px;
        border-style: solid;
        border-width: 1px;
        border-color: gray;
        padding: 3px;
        position: relative;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto;
        height: 100%;
        width: 100%;
        background-color: #f8f8f8;
        font-family: sans-serif;
    }
    


    .my-label {
        position: absolute;
        width: 200px;
        font-size: 16px;
    }

	#transmitter_status {
		border-radius: 10px;
		padding: 5px;
		flex: 1 1 75%; 
		border: 1px solid black;
		}

		#operating_status {
			font-weight: bold;
			text-align: center;
			}

			#operating_status p { margin: 1em; }


		/* these were for .button-2. Decided to not use them at all. There is another button on the page not using it */

		#coverage_areas { text-align: center; }
			#coverage_areas button { margin: .5em; }
			/*
			#coverage_areas button:focus { box-shadow: rgba(45, 35, 66, 0.3) 0px 2px 2px -3px; }

			#coverage_areas button:hover {
				box-shadow: rgba(45, 35, 66, 0.3) 0px 2px 2px -3px;
				transform: translateY(-2px);
				}

			#coverage_areas button:active {
				box-shadow: #D6D6E7 0 3px 7px inset;
				transform: translateY(2px);
				}

			*/

		#areas_receiving_alert_tones { text-align: center; }

   #explanation {
	border-radius: 5px;
	padding: 1em;
	flex: 1 1 25%; 
	border: 1px solid black;
	text-align: center;
	background-color: #ff9;
	align-content: center;
	}

 	#explanation button { margin: .5em; }


#transmitter_details { margin-top: 1em;}
#transmitter_details table:first-of-type { flex: 1 1 40%; }
#transmitter_details table:last-of-type { flex: 1 1 auto; }


.pca_message {
	background-color: Yellow;
	display: none;
	text-align: center;
	border: 1px solid gray;
	border-radius: 8px;
	padding: 1em;
	margin-bottom: 1em;
}

.pca_message p { font-size: 14px; }

/* station search */

search#station-search {
	width: min(100% - 10rem,90%);
	margin: auto;

	}

	search#station-search .input-group {
		display: block;
		}

		search#station-search input {
			width: 100%;
			padding: 0.7rem 1rem;
			line-height: 1;
			}

		search#station-search ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			font-size: 1rem;
			}

			search#station-search ul li {
				margin: 0;
				padding: .5rem 1.5rem;
				line-height: 1;
				cursor: pointer;
				}

				search#station-search ul li:hover {
					background: #07d;
					color: white;
					}