body, p, div, span {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

body {
	min-width: initial!important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
}

/* Archive breadcrumb and border */
html.archive .breadcrumb { background-color: var(--butter); }
html.archive.theme-dark .breadcrumb { background-color: var(--butter-shadow); }

/* hide disabled menus */
li.disabled {
	display: none;
}

.mutealert {
	cursor: pointer;
}

.subheader {
	font-weight: bold;
	border-bottom: solid 1px #333;
}

.alertsetpanel .glyphicon-ok {
	display: none;
	color: green;
}
.alertsetpanel .glyphicon-remove {
	color: red;
	display: none;
}

.alertsetpanel .on .glyphicon-ok,
.alertsetpanel .val-on .glyphicon-ok {
	display: inline-block;
}

.alertsetpanel .off .glyphicon-remove,
.alertsetpanel .val-off .glyphicon-remove {
	display: inline-block;
}

.alertsetpanel .val-on .glyphicon-globe {
	display: none;
}
.alertsetpanel .val-off .glyphicon-globe {
	display: none;
}
.alertsetpanel .gon .glyphicon-globe {
	color: #8ACA8A;
}
.alertsetpanel .goff .glyphicon-globe {
	color: #FFA0A0;
}

.alertsetpanel .glyphicon {
	cursor: pointer;
}
.alertsetpanel tr td:first-child {
	font-weight: bold;
}

.pointer {
	cursor: pointer;
}
@media screen and (max-width: 560px) {
	#alertsettingsform {
		margin: 0 -16px;
	}
	#alertsettingsform td {
		padding: 5px;
	}
}
@media screen and (max-width: 480px) {
	#alertsettingsform {
		font-size: 10px!important;
	}
}
@media screen and (max-width: 350px) {
	#alertsettingsform td {
		padding: 1px;
	}
}

.overlayselector button {
	width: 100%;
}
.overlayselector .glyphicon {
	margin-right: 10px;
}
.overlayselector a {
	cursor: pointer;
}
.weathercont {
	padding-right: 0px;
}
.overlaycont {
	padding-right: 0px;
}
.breadcrumb {
	line-height: 18px!important;
}

.familiarisation {
	max-width: 1000px;
	margin: auto;
}
.familiarisationtest {
	display: none;
	text-align: center;
}
.familiarisation .slide {
	width: 100%;
}
.hiddenslide {
	display: none;
}
.widgetbox h5,
.widgetbox h6 {
	margin: 0;
}

#radar_area_overlay_f {
	display:none;
}
.adhkeycontainer,
.lotkeycontainer,
.logkeycontainer {
	z-index: 10;
	position: absolute;
	right: 21px;
}

.panel-response {
	line-height: 30px;
}

/*fileupload button*/
.fileUpload {
	position: relative;
	overflow: hidden;
	/*margin: 10px;*/
}
.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}


/*DECISION BOARD CSS*/
form {
	margin: 15px;
}

.action {
	margin: 0 -15px;
}

.panel-heading {
	cursor: pointer;
}

.panel-footer .archivemessage {
	color: red;
	line-height: 30px;
}

.glyphicon-remove {
	color: red;
	cursor: pointer;
}

.table select.input-sm {
	margin-top: -5px;
	margin-bottom: -5px;
}

/* CLEANING UP CSS ALREADY DEFINED  */
/*
table tbody td {
	text-align: initial;
}
table th,
table td {
	border-right: initial;
	border-bottom: initial;
}
table {
	border-top: initial;
	border-left: initial;
	margin: initial;
}
table thead th {
	background: initial;
	padding: initial;
}
*/


#grap_ext_0,
#grap_ext_1 {
	position: relative;
}
#grap_ext_1 {
	top: 20px;
}
.grap_ext_title {
	position: absolute;
	left: 10px;
}

.chart_extra_line_0 {
	float: left;
	position: relative;
}

table .smi,
table .smi .glyphicon {
	font-size: 10px;
	line-height: 4px;

}
table .smi .glyphicon {
	font-size: 8px;
	color: blue;
}
.glyphicon-tint {
	color: blue;
}

.overflowx {
	overflow-x: scroll;
}

@media (max-width: 767px) {
	.navbar-form {
		width: auto;
		padding-top: 0;
		padding-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.form-control, .btn, button.navbar-toggler {
		height: calc(1.5em + 0.5rem + 2px);
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		padding-left: 0.5rem;
		font-size: 0.875rem;
	}

	.breadcrumb .btnarrowleft, .breadcrumb .btnarrowright { display: none; }
}

/*table style from old roads site*/
#report_container table tbody td{
	text-align: center;
	padding: 0.25em 5px;
}

/*table style from old roads site*/
table#rbf_table thead th,
table#rbf_table tbody td{
	text-align: center;
	padding: 0.25em 5px;
}

table.taf td:first-child {
	width: 300px;
}

table.metar td.site {
	width: 300px;
}
table.metar td.dtg {
	width: 200px;
}
.optioncontainer ul {
	max-height: 266px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.smidrop {
	font-size: 12px;
}

.floodmapstrigger {
	color: #093981;
}
.floodmapstrigger:hover {
	color: #23527c;
	text-decoration: underline;
}
.floodloading {
	line-height: 32px;
}
.floodloading img {
	height: 16px;
	margin: 0 4px 4px 0;
}

#riverchartcontainer {
	display: none;
	position: fixed;
	width: 400px;
	height: 400px;
	top: 50%;
	left: 50%;
	transform: translate(-200px,-150px);
	background: white;
	z-index: 1200;
}

#riverchartcanvas {
	padding-top: 30px;
}


#draganddrophandler {
	border: 2px dotted #0B85A1;
	text-align: center;
	line-height: 100px;
	vertical-align: middle;
}

#draganddrophandler.active {
	border: 2px solid #0B85A1;
}


#assetlocator .fileinput-button {
	position: relative;
	overflow: hidden;
	display: inline-block;
	margin-left: 10px;
}
#assetlocator .fileinput-button input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
	font-size: 200px !important;
	direction: ltr;
	cursor: pointer;
}

#assetlocator .pointer {
	text-decoration: underline;
	cursor: pointer;
}

tr.highlight,
.formline.highlight input {
	background: #bbffc3;
}

/* .chartmodeswitch .active {
	border: solid 1px red;
	color: red;
} */

#mouseTooltip {
	padding: 5px;
    font-size: 12px;
    line-height: 14px;
	white-space: nowrap;
	display: none;
	border-radius: 3px;
    text-decoration:none;
    position:fixed;
    background: rgba( 240, 240, 240, .8 );
    border: solid black 1px;
    z-index: 10;
}


.loadingoverlay {
	text-align: center;
	padding-top: 5px;
	font-size: 18px;
	background: white;
	margin: 0;
	width: 100%;
	height: 1500px;
    position: absolute;
    z-index: 15;
    margin: -15px;
}

.clickdisabled {
	cursor: wait;
}

tr.selected_domain td:nth-child(1),
tr.selected_domain td:nth-child(2) {
	background: black;
	color: white;
}

.righticons .active {
	border: solid 1px red;
	color: red;
}


/*.michael-map-icon.red4 {
	color: #FF0000;
}
.michael-map-icon.red3 {
	color: #FF3F3F;
}
.michael-map-icon.red2 {
	color: #FF7F7F;
}
.michael-map-icon.red1 {
	color: #FFBFBF;
}
.michael-map-icon.white {
	color: #FFFFFF;
}
.michael-map-icon.blue1 {
	color: #BFBFFF;
}
.michael-map-icon.blue2 {
	color: #7F7FFF;
}
.michael-map-icon.blue3 {
	color: #3F3FFF;
}
.michael-map-icon.blue4 {
	color: #0000FF;
}*/

.michael-map-icon.red2 {
	color: darkred;
}
.michael-map-icon.red1 {
	color: red;
}
.michael-map-icon.gray {
	color: gray;
}
.michael-map-icon.white {
	color: white;
}
.michael-map-icon.blue1 {
	color: blue;
}
.michael-map-icon.blue2 {
	color: darkblue;
}

.michael-map-icon.extra-danger {
    color: white;
    font-weight: bold;
    font-size: 10px;
    background: blue;
    padding: 1px 3px;
    display: block;
    border-radius: 12px;
    width: initial!important;
    height: initial!important;
}

.michael-map-icon.amber {
	color: #ee6600;
    font-weight: bold;
}
.michael-map-icon.red {
	color: red;
    font-weight: bold;
}
.michael-map-icon.yellow {
	color: yellow;
    font-weight: bold;
}
.michael-map-icon.blue {
	color: blue;
    font-weight: bold;
    font-size: 9px;
}
.michael-map-icon.smallfont {
	font-size: 9px;
}

.michael-map-icon.black {
	color: black;
}

.map.loading:after {
	/* with no content, nothing is rendered */
	content: "";
	position: fixed;
	/* element stretched to cover during rotation an aspect ratio up to 1/10 */
	top: -500%;
	left: -500%;
	right: -500%;
	bottom: -500%;
	z-index: 9999;
	pointer-events: none; /* to block content use: all */
	/* background */
	background-color: rgba(0,0,0,0.6);
	background-image: url(data:image/png;base64,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);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100px 100px;
	/* animation */
	-webkit-animation-name: linearRotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: linearRotate;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-o-animation-name: linearRotate;
	-o-animation-duration: 1s;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
	animation-name: linearRotate;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@-webkit-keyframes linearRotate {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform:rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.mapkeycontainer {
	z-index: 500;
	max-width: 300px;
}
#radaranalysismap{
	height: 600px;
}



/* MDC Additional styles */
html {
	height: calc(100 * var(--vh));
	min-width: 100vw;
	scroll-behavior: smooth;
	overflow: hidden;
}

html[data-page='login'] {
}

html:not([data-page='login']) #main-container {
	position: relative;
	top: calc(var(--toolbar-height) + var(--navbar-height));
	height: calc((100 * var(--vh)) - var(--toolbar-height) - var(--navbar-height));
	overflow: auto;
	transition: top var(--navbar-transition-time);
}

html:not([data-page='login']) #main-content {
	position: relative;
	top: 0;
}

#main-content {
	opacity: 0;
}

#main-content.visible {
	opacity: 1;
	transition: opacity 1s;
}


/* Only show the big logo background on the login screen and home page */
[data-page="login"] > body,
[data-page="home"] > body {
	background: radial-gradient(
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 1) 80%
    ),
    url(../../../../source/img/metdesk/metdesk_splat_2023.svg), white;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 70% center;
}

[data-page="login"].theme-dark > body,
[data-page="home"].theme-dark > body {
	background: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 80%),
    url(../../../../source/img/metdesk/metdesk_splat_2023.svg) black;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 70% center;
}

/* Ensure the login box doesn't overlap the logo, particularly on mobile */
[data-page="login"] .logincontainer {
	padding-top: 80px;
	height: calc((80 * var(--vh)) - 80px);
}


/* Breadcrumb bar */
#main-breadcrumbs {
	top: var(--toolbar-height);
	overflow: visible;

	/* lower z-index causes map layer controls to obscure mapkey */
	z-index: 1002;
}

nav {
	height: var(--navbar-height);
	transition: height var(--navbar-transition-time);
}

nav > .breadcrumb {
	min-height:	var(--navbar-height);
}

/* Bootstrap uses '/' as a breadcrumb separator by default, but we have that in some of the product names.
** Use a right-chevron instead */
.breadcrumb-item + .breadcrumb-item::before {
	content: '\203a';
	font-size: 1.5em;
	color: var(--gray-40);
	vertical-align: text-bottom;
}

[data-max-breakpoint~='xs'] .breadcrumb-item::before { display: none; }


/* Set breadcrumb entries to the same height as the bar itself to stop overflowed elements appearing at the bottom */
.breadcrumb > li {
	min-height: var(--toolbar-height);
	display: flex;
	align-items: center;
}

[data-max-breakpoint~='xs'] nav {
	min-height: var(--toolbar-height);
}

/* Overflow button to toggle the breadcrumb bar height */
#expand-breadcrumbs {
	position: absolute;
	right: 0;
	height: var(--toolbar-height);
	font-size: 1.5rem;
	font-weight: bold;
	background: transparent;
	border: none;
	color: var(--gray-60);
	display: none;
}
#main-breadcrumbs.overflowing #expand-breadcrumbs { display: initial; }

/* Extra padding at the right of an overflowing bar, to leave space for the overflow button */
#main-breadcrumbs.overflowing > ol.breadcrumb {
	padding-right: var(--toolbar-height) !important;
}

/* Hide additional rows of content on an overflowing bar by default */
#main-breadcrumbs.overflowing:not(.expanded) {
	overflow: hidden;
}

/* When expanding, keep the overflow hidden, but make it visible at the end otherwise pop-ups don't work */
#main-breadcrumbs.overflowing.expanded {
	animation-name: expandBreadcrumbBar;
	animation-duration: var(--navbar-transition-time);
}
@keyframes expandBreadcrumbBar {
	0% { overflow: hidden; }
	99% { overflow: hidden; }
	100% { overflow: visible; }
}

.mapkeycontainer.show {
	max-height: calc((100 * var(--vh)) - var(--toolbar-height) - var(--navbar-height) - 1em);
	overflow: auto;
}

/* End of breadcrumb bar */


/* Add drop shadows to the tables, including those in the injected content */
table {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
	border: 1px solid var(--gray-60);
	margin-bottom: 0.5em !important;
	font-variant-numeric: tabular-nums;		/* Improve alignment of numeric columns in supporting fonts */
}


/* Add a spacer class for use in Bootstrap flexbox layout */
.spacer {
	flex: 1 1 auto;
}


/* Override bootstrap defaults */
a {
	color: var(--link-text) !important;
}

a.no-hover:hover {
	text-decoration: none;
}

.navbar a {
	color: var(--fg) !important;
}

.dropdown-item * {
	color: var(--fg) !important;
}

/*
 * Bootstrap default is to use the primary colour for the .active background, which clashes with the text and
 * looks rather heavy. Replace it with a simple tick to the left of the active item instead.
 */
.dropdown-item.active {
	background-color: transparent;
}
.dropdown-item.active:before {
	content: '\2714';			/* Unicode: HEAVY CHECK MARK */
	position: absolute;
	left: 6px;
}

.theme-light .breadcrumb {
	box-shadow: inset 0px 0px 10px -5px rgba(0,0,0,0.5);
}

.form-control {
	background-color: var(--bg);
	color: var(--fg);
}

.form-control:focus {
	background-color: var(--bg-focus);
	color: var(--fg-focus);
}

.form-control:disabled {
	background-color: var(--bg-disabled);
	color: var(--fg-disabled);
}

/* Date pickers only need enough space for 8 digits (plus slashes) */
.form-control.dtgselector, .form-control.hasDatepicker {
	width: 8em;
	text-align: center;
}

.btn-primary > a {
	color: inherit !important;
}

html.theme-dark .btn.btn-outline-primary { color: var(--link-text); }

/* Smaller headings for phones */
[data-max-breakpoint~='xs'] .card h1 { font-size: 1.5rem; }
[data-max-breakpoint~='xs'] .card h2 { font-size: 1.35rem; }
[data-max-breakpoint~='xs'] .card h3 { font-size: 1.25rem; }
[data-max-breakpoint~='xs'] .card h4 { font-size: 1.20rem; }
[data-max-breakpoint~='xs'] .card h5 { font-size: 1.15rem; }
[data-max-breakpoint~='xs'] .card h6 { font-size: 1.10rem; }


/* Bootstrap 4 uses .d-none, but there are enough existing .hidden references to warrant adding this */
.hidden {
	display: none !important;
}


/* Add some custom properties that really should be in bootstrap! */
:root {
	/* Non-colour stuff */
	--toolbar-height: 50px;
	--navbar-height: 50px;
	--navbar-transition-time: 0.2s;
	--vh: 1vh;							/* Fallback 'fake' vh value. Gets replaced by JS in html-header. */
													/* Based on https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */

	/* Tango colour palette */
	--butter:	#fce94f;
	--butter-highlight:	#edd400;
	--butter-shadow:	#c4a000;
	--chameleon:	#8ae234;
	--chameleon-highlight:	#73d216;
	--chameleon-shadow:	#4e9a06;
	--orange:	#fcaf3e;
	--orange-highlight:	#f57900;
	--orange-shadow:	#ce5c00;
	--chocolate:	#e9b96e;
	--chocolate-highlight:	#c17d11;
	--chocolate-shadow:	#8f5902;
	--sky-blue:	#729fcf;
	--sky-blue-highlight:	#3465a4;
	--sky-blue-shadow:	#204a87;
	--plum:	#ad7fa8;
	--plum-highlight:	#75507b;
	--plum-shadow:	#5c3566;
	--scarlet-red:	#ef2929;
	--scarlet-red-highlight:	#cc0000;
	--scarlet-red-shadow:	#a40000;
	--aluminium:	#eeeeec;
	--aluminium-highlight:	#d3d7cf;
	--aluminium-shadow:	#babdb6;
	--slate:	#888a85;
	--slate-highlight:	#555753;
	--slate-shadow:	#2e3436;

	/* Grayscale values */
	--gray-0: #fff;
	--gray-10: #f7f7f7;
	--gray-20: #ebebeb;
	--gray-30: #dcdcdc;
	--gray-40: #bebebe;
	--gray-50: #969696;
	--gray-60: #6f6f6f;
	--gray-70: #5c5c5c;
	--gray-80: #404040;
	--gray-90: #2a2a2a;
	--gray-100: #000;

	--fg: var(--gray-60);
	--bg: var(--gray-0);
	--fg-focus: var(--fg);
	--bg-focus: var(--bg);
	--fg-disabled: var(--gray-10);
	--bg-disabled: var(--gray-30);
	--bg-track-obs: #aaa;
	--bg-track-fcst: #666;
	--info-bg: var(--info);
	--info-fg: var(--gray-0);
	--link-text: var(--primary);


	/* Standardise colours for key data types */
	--rst: var(--gray-100);
	--deep_temp: var(--butter-shadow);
	--dew_point: var(--chameleon-shadow);
	--air_temp: #333cc0;
	--wind_speed: var(--chocolate-shadow);
	--wind_gust: var(--scarlet-red-shadow);
	--relative_humidity: #aabbff;
	--precip_probability: #3333ff;
	--precip: #bbc7ff;
	--cloud_amount: #e1e8ff;
	--snowfall: #ff0000;
}

.theme-dark {
	/* Swap the Tango shadows and highlights */
	--butter-highlight:	#c4a000;
	--butter-shadow:	#edd400;
	--chameleon-highlight:	#4e9a06;
	--chameleon-shadow:	#73d216;
	--orange-highlight:	#ce5c00;
	--orange-shadow:	#f57900;
	--chocolate-highlight:	#8f5902;
	--chocolate-shadow:	#c17d11;
	--sky-blue-highlight:	#204a87;
	--sky-blue-shadow:	#3465a4;
	--plum-highlight:	#5c3566;
	--plum-shadow:	#75507b;
	--scarlet-red-highlight:	#a40000;
	--scarlet-red-shadow:	#cc0000;
	--aluminium-highlight:	#babdb6;
	--aluminium-shadow:	#d3d7cf;
	--slate-highlight:	#2e3436;
	--slate-shadow:	#555753;

	/* Reverse the grayscale palette */
	--gray-0: #000;
	--gray-10: #2a2a2a;
	--gray-20: #404040;
	--gray-30: #5c5c5c;
	--gray-40: #6f6f6f;
	--gray-50: #969696;
	--gray-60: #bebebe;
	--gray-70: #dcdcdc;
	--gray-80: #ebebeb;
	--gray-90: #f7f7f7;
	--gray-100: #fff;

	--fg: var(--gray-90);
	--bg: var(--gray-30);
	--fg-focus: var(--gray-100);
	--bg-focus: var(--gray-40);
	--fg-disabled: var(--gray-40);
	--bg-disabled: var(--gray-70);
	--link-text: var(--gray-100);

	/* Specific data types */
	--relative_humidity: #ccddff;
	--precip_probability: #6666ff;
	--precip: #ccccff;
	--cloud_amount: #aaaaff;
}


/* Allow the hamburger dropdown menu to scroll vertically, if necessary */
.navbar-collapse.show {
	max-height: calc((100 * var(--vh)) - var(--navbar-height));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: none;
	touch-action: pan-y;
}
html.no-touch {				/* See module-navigation */
	touch-action: none;
	position: fixed;
	overflow: hidden;
}


/* Make the menu drop-down indicators sit a little nicer next to the text, and fade in when hovered */
.dropdown-toggle::after {
	vertical-align: middle;
	opacity: 0.2;
	transition: opacity 0.4s;
}

/* When in an opened hamburger menu, show the drop down indicators more clearly */
.navbar-collapse.show .dropdown-toggle::after {
	opacity: 1;
	transition: opacity 0s;
}

.dropdown-toggle:hover::after {
	vertical-align: middle;
	opacity: 1;
	transition: opacity 0.4s;
}


/* Force styles on the content from the light DOM that's slotted into the shadow DOM */
.shadowWrapped #report_container {
	margin: auto !important;
	float: none !important;
	width: auto !important;
	max-width: fit-content !important;
}

.shadowWrapped #report_container::after {
	display: block;
	content: "";
	clear: both;
}

.shadowWrapped [data-original-tag="body"] {
	min-width: auto !important;
}


/* Breakpoint-specific rules, switched via data-breakpoint on <html> element */
[data-max-breakpoint~='md'] .form-clientselector {
	max-width: 60% !important;
}

/* If we've switched to a hamburger menu, we don't want the menu entries looking like dropdowns */
[data-max-breakpoint~='md'] header .dropdown-menu {
	border: none;
	background: transparent;
}

/* Make the drop-down menus stand out a little better */
[data-min-breakpoint~='lg'] .dropdown-menu {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

/* Required due to shadow DOM's need for !important */
[data-max-breakpoint~='md']	.shadowWrapped #report_container {
	min-width: 700px !important;
}

[data-min-breakpoint~='lg'] .shadowWrapped #report_container {
	min-width: 900px !important;
}


/* Bring the JQuery UI Datepicker styling in line with the Bootstrap theme */
.ui-datepicker {
	background: var(--gray-20);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.ui-datepicker .ui-state-hover {
	background: var(--primary) !important;
	color: var(--white) !important;
	border: inherit;
}

.ui-datepicker .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
	background-image: url(../../../libs/jquery-ui-1.11.4/images/ui-icons_ffffff_256x240.png);
}

.ui-datepicker-header, .ui-widget-header {
	background: var(--primary);
	color: var(--white);
	border: none;
}

.ui-datepicker-calendar {
	border: none;
	box-shadow: none;
	color: var(--gray-60) !important;
}

.ui-datepicker-calendar tbody a {
	background: var(--gray-10) !important;
}

.ui-datepicker-calendar .ui-datepicker-today > a {
	background: var(--gray-30) !important;
	color: var(--gray-60) !important;
}

.ui-datepicker-calendar .ui-datepicker-current-day > a {
	background: var(--fg) !important;
	color: var(--bg) !important;
}
/* End of JQuery UI Datepicker */


/* Map key */
#dropdownMapKeyButton > img {
	width: 75%;
}

.mapKeyEntry {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	margin: 0.2em 1em;
	font-size: 0.8rem;
}

.mapKeyEntry > .mapKeyText {
	flex: 1;
	text-align: right;
	color: var(--gray-80);
}

/* TODO: Change any existing key headings (often wrapped in <b>) to <h1> for consistency */
.mapKeyEntry h1 {
	font-size: 1rem;
	justify-content: center;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
}

.mapKeyEntry + .mapKeyEntry h1 {
	margin-top: 1em;
}

.mapKeyColour {
	width: 3em;
	height: 1.2em;
	border: 1px solid black;
	margin-left: 0.5em;
}


/* 2020 Leaflet maps styling */
.map-container {
	position: absolute;
	top: 0;
	left: -15px;
	margin: 0;
	padding: 0;
	width: calc(100% + 30px);
	display: flex;
	flex-direction: column;
	height: calc((100 * var(--vh)) - 120px);
}

.md-leaflet-map {
	flex: 1;
}

.dtgbar-marks {
	background: var(--info-bg);
	color: var(--info-fg);
}


/* 2020 table styling - use the table.table selector to ensure we don't hit tables in the injected content */
table.table {
	font-size: 14px;
}

table.table > caption {
	display: none;		/* We only use table captions for export, so hide by default */
}

table.table th {
	text-align: center;
	vertical-align: middle;
}

table.table td, table.table th {
	border-right: 1px solid rgba(127, 127, 127, 0.3);
	padding: 0.5em !important;
	white-space: nowrap;
}

/* Compact view */
[data-table-density='compact'] table.table {
	font-size: 12px;
}

[data-table-density='compact'] table.table th,
[data-table-density='compact'] table.table td {
	padding: 0.1em 0.2em !important;
}

/* Reduce the table font size for smaller screens */
[data-max-breakpoint~='sm'] table.table  th,
[data-max-breakpoint~='sm'] table.table  td {
	font-size: 0.8em !important;
	white-space: initial;
}

table.table td.type-numeric {
	text-align: right;
	padding-right: 0.8em !important;
}

table.table td.type-datetime {
	text-align: center;
}

table.table tbody tr:not(.secondheader):hover {
	background: var(--info-bg) !important;
	color: var(--info-fg) !important;
}

/* Display units in the headings, except at small screen sizes. Do show for print though. */
table.table th[data-suffix]::after {
	content: attr(data-suffix);
	color: var(--gray-50);
}

@media screen {
	[data-max-breakpoint~='md'] table.table th[data-suffix]::after {
		content: '';
		display: none;
	}
}

/* Data-specific table styling */
/* Centre the text in the Surface Conditions column */
table.table td.obs_table-surface {
	text-align: center;
}


/* Colour coding surface conditions based on the content of the shortcode in obs_data_vaisala_c_surfaces table */
table.table [data-shortcode='D'] { background-color: #1aff1a; color: #000000; }
table.table [data-shortcode='M'] { background-color: #b3b3ff; color: #000000; }
table.table [data-shortcode='W'] { background-color: #0000ff; color: #ffffff; }
table.table [data-shortcode='WT'] { background-color: #a2662a; color: #ffffff; }
table.table [data-shortcode='HF'] { background-color: #595959; color: #ffffff; }
table.table [data-shortcode='S'] { background-color: #ff4d4d; color: #ffffff; }
table.table [data-shortcode='I'] { background-color: #000000; color: #ffffff; }
table.table [data-shortcode='Tr'] { background-color: #e0b385; color: #000000; }
table.table [data-shortcode='A'] { background-color: #ffff00; color: #000000; }
table.table [data-shortcode='C'] { background-color: #ff0000; color: #ffffff; }
table.table [data-shortcode='Ab'] { background-color: #ffffff; color: #000000; }
table.table [data-shortcode='Dw'] { background-color: #00ffff; color: #000000; }


/* Sparklines */
table.table .sparkline svg {
	display: block;
	margin: auto;
	width: 100%;
	height: 20px;
}


/* Sortable tables aren't a thing in browsers, despite there being a spec. But we'll style accordingly,
** and write our own sorting code where needed.
** https://www.w3.org/TR/2014/WD-html51-20140617/tabular-data.html#attr-table-sortable
*/
table[sortable] th:not([sortable="false"]) {
	cursor: pointer;
}

table[sortable] th {
	position: relative;
	padding-left: 1em !important;
	padding-right: 1em !important;
}

@media screen {		/* These arrows don't display properly in a PDF, so only show them for screen media */
	table[sortable] th[sorted]::before {
		content: '\279c';
		position: absolute;
		font-size: 1rem;
		margin-right: 2px;
		top: calc(50% - 0.7rem);
		right: 0;
		transform: rotateZ(90deg);
		color: var(--gray-50);
	}

	table[sortable] th[sorted~='reversed']::before {
		transform: rotateZ(-90deg);
	}
}


/* Labels used above charts */
.issuedtg {
	position: absolute;
	z-index: 10;
	font-size: 10px;
	left: 1px;
}

.reloadtimer {
	position: absolute;
	z-index: 10;
	font-size: 10px;
	right: 0;
}


/*
** Page-specific styles
*/

/* PAT Forecast */
[data-page='for-precip'] td .smidrop {
	color: blue;
	font-size: 1.2em;
	line-height: 1em;
}

/* PAT Analysis */

/* Default to display:block for small screens */
[data-page='for-precip'] .pat-grid {
	display: block;
	width: 100%;
	margin-bottom: 1rem;
}

/* Change to grid layout for larger sizes */
[data-min-breakpoint~='sm'][data-page='for-precip'] .pat-grid {
	display: grid;
	grid:
		'a a'
		'b c'
		'd e' / 1fr 1fr;
	grid-gap: 0.3em 0.6em;
	gap: 0.3em 0.6em;
}

[data-min-breakpoint~='lg'][data-page='for-precip'] .pat-grid {
	display: grid;
	grid:
		'a b c'
		'a d e' / 2.1fr 1fr 1fr;
	grid-gap: 0.3em 0.6em;
	gap: 0.3em 0.6em;
}


[data-page='for-precip'] .pat-grid figure {
	margin: 0;
	padding: 0;
	cursor: pointer;
}

[data-page='for-precip'] .pat-grid figure:nth-child(1) { grid-area: a; }
[data-page='for-precip'] .pat-grid figure:nth-child(2) { grid-area: b; }
[data-page='for-precip'] .pat-grid figure:nth-child(3) { grid-area: c; }
[data-page='for-precip'] .pat-grid figure:nth-child(4) { grid-area: d; }
[data-page='for-precip'] .pat-grid figure:nth-child(5) { grid-area: e; }


[data-page='for-precip'] .pat-grid figcaption {
	font-size: 0.8rem;
}

[data-page='for-precip'] .pat-grid img {
	width: 100%;	/* Size responsively */
}


/* Lightbox type stuff from style.css */
.noscroll {
  overflow: hidden;
}

#imgcontainer,
#chartcontainer,
#mapcontainer {
	visibility: hidden;
  position: fixed;
  z-index: 2000;
  top: 0;
  bottom: 0;
  left: 0;
	right: 0;
}

#imgcontainer .mapnavigationbar,
#chartcontainer .mapnavigationbar,
#mapcontainer .mapnavigationbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: #ffffff;
}
#riverchartcontainer .riverchartclosebutton,
#imgcontainer .img-header,
#chartcontainer .img-header,
#mapcontainer .img-header,
#imgcontainer .chartclosebutton,
#chartcontainer .chartclosebutton,
#mapcontainer .chartclosebutton {
  cursor: pointer;
  color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: var(--sky-blue-shadow);
  position: absolute;
  z-index: 2010;
	top: 0;
}

/* May want to extend these rules to the other containers in time */
#imgcontainer .img-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.5em;
}

#imgcontainer {
  overflow: auto;
}

#imgcontainer .img-header .img-closebutton {
	font-size: 40px;
}

#img-canvas,
#chart-canvas {
  position: fixed;
  bottom: 0;
  top: 40px;
  right: 0;
  left: 0;
}
#img-canvas {
  overflow: scroll;
  text-align: center;
  background: #000;
}
#map-canvas {
  width: 100%;
  margin-top: 30px;
  height: 500px;
}

/* Fullscreen mode, set the variables that get used when re-calculating the chart size */
[data-displaymode~='fullscreen'] body {
	--toolbar-height: 0px;
	--navbar-height: 0px;
	--navbar-transition-time: 0.05s;		/* Don't set to 0 or transition events don't fire */
}
/* Only set these in fullscreen mode, otherwise it breaks the menus */
[data-displaymode~='fullscreen'] header {
	overflow: hidden;
	height: var(--toolbar-height);
}
[data-displaymode='transitioning'] {
	--navbar-transition-time: 0.05s;		/* Don't set to 0 or transition events don't fire */
}

[data-displaymode~='fullscreen'] #main-breadcrumbs {
	overflow: hidden;
}

/* Fullscreen button */
#fullscreenBtn {
	width: 70px;
	height: 70px;
	background: var(--gray-10);
	border-radius: 50%;
	border: 2px dashed var(--primary);
	outline: none;
	z-index: 1;
	color: var(--primary);
}

@media print {
	#fullscreenBtn{
		display: none !important;
	}
}

#fullscreenBtn:active {
	background: var(--primary);
	color: var(--gray-10);
}

/* Media query to prevent the hover effect sticking on mobile */
@media(hover: hover) {
	#fullscreenBtn:hover {
		background: var(--primary);
		color: var(--gray-10);
	}
}

#fullscreenBtn.top-right {
	position: fixed;
	top: calc(var(--toolbar-height) + var(--navbar-height) - 1em);
	right: -1em;
}

#fullscreenBtn.top-right:focus {
	border: 2px solid var(--primary);
}


/* May want to replace these entries with toggling classes to show/hide the content */
#chartcontainer { visibility: hidden; }
#mapcontainer { visibility: hidden; }
#riverchartcontainer { visibility: hidden; }

/* Print rules (also used for PDF export) */
@media print {
	:root {
		--navbar-height: 0px;
		--toolbar-height: 0px;
	}

	.hideforprint {
		display: none !important;
	}

	#main-breadcrumbs {
		display: none;
	}

	#main-container {
		overflow: visible !important;
	}

	/* More sensible table breaks across pages */
	table {
		page-break-inside: auto;
	}
	tr    {
		page-break-inside: avoid;
		page-break-after: auto;
	}

	.table th, .table td {
		color: black !important;
	}

	html, body {
		height: 99%;		/* Helps to avoid an extra blank page at the end of the PDF export */
	}
}