:root {
    --mdc-theme-primary: #1a73e8;
    --mdc-theme-secondary: #1a73e8;/*rgb(225, 245, 254);*/
    --mdc-theme-on-secondary: rgb(1, 87, 155);
    --mdc-typography-button-font-size: 10px;
    --swd-theme-accent: #ff461ecc;
    --swd-theme-on-accent: white;
}

.darkTheme {
    --mdc-theme-text-primary-on-background:white;
}

/*MDC overrides*/
.mdc-linear-progress__buffer-bar {
    background-color: transparent;
}

:not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item:hover::before {
    opacity: 0.15;
}

:not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item::before, :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item::after {
    background-color: rgb(181 181 181);
}

.darkTheme .mdc-select__menu .mdc-list .mdc-list-item--selected::before, .darkTheme .mdc-select__menu .mdc-list .mdc-list-item--selected::after {
    background-color: #fff;
    background-color: var(--swd-theme-on-accent);
}

/*Main*/
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    /*font-family: sans-serif;*/
}

input, select {
    background-color: white;
    border: 1px solid gray;
    border-radius: 3px;
}

.mdc-linear-progress {
    position: absolute;
    z-index: 1000;
}

/* flexbox classes*/
.flexContainer {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
}

.flexChild-NoShrink {
    flex: 1 0 auto;
    min-height: 0px;
}

.flexChild, .flexChild-Scroll {
    flex: 1 1 auto;
    min-height: 0px;
}

.flexChild-Scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.flexContainer-row {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    min-width: 0;
    align-content: center;
}

.flexChild-row {
    flex: 1 1 auto;
    min-width: 0px;
}

    .flexChild-row, .flexChild-row div, .flexChild-row-NoShrink {
        display: inline-block;
        margin: auto;
    }

.flexChild-row-NoShrink {
    flex: 1 0 auto;
    min-width: 0px;
}

.no-vertical-scroll {
    overflow-y: hidden;
}

/* END flexbox classes*/


div#FilterControls .flexChild-row, div#FilterControls .flexChild-row-NoShrink {
    margin-right: 5px;
}


/* MDC Tab classes*/
.stn_header .mdc-tab--active .mdc-tab__text-label {
    color: var(--swd-theme-on-accent,white);
}

/*span.mdc-tab__icon.material-icons {
	display: none;
}*/

.mdc-tab {
    padding-top: 10px;
}

.mdc-tabBar-content {
    display: none !important;
}

.mdc-tabBar-content--active {
    display: flex !important;
}

.mdc-tab-indicator .mdc-tab-indicator__content--underline {
    border-color: white;
    border-color: rgb(255 255 255 / 87%);
}

.mdc-tab .mdc-tab__text-label {
    color: rgb(255 255 255 / 67%);
}

/* END MDC Tab classes*/

/*map fade transition*/
#map div div div[role=group] {
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}
.hr-top {
    border-top: 1px solid #00000024;
    padding-top: 5px;
}

.darkTheme .hr-top {
    border-top: 1px solid #ffffff73;
    padding-top: 5px;
}

#Apps,
#stnNotes {
    /*white-space: pre-line;*/
    line-height: 170%;
    padding-bottom: 10px;
    scrollbar-width: thin;
    /*height: 1em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;*/
    /*display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;*/
    /*overflow: hidden;*/
}

    #stnNotes:hover,
    #stnNotes:focus {
        overflow: auto;
        display: block;
        /*height: auto;
		max-height: 150px;
		overflow: auto;
		white-space:normal;*/
    }

hr {
    border: none;
    height: 0.6px;
    background-color: #0000002e;
}

#map {
    background-color: #aadaff
}

.darkTheme #map {
    background-color: #363636
}

.darkTheme hr {
    background-color: #ffffff2e;
}

.darkTheme a {
    color: #ffdf00;
}


.gm-style .gm-style-iw-d {
    overflow: auto !important;
    width: 260px;
}

#invstats_holder .loading {
    background: url('img/ajax-loader.gif') no-repeat center;
    height: 100%;
    min-height: 30px;
}


#DMethod {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

    #DMethod span {
        font-weight: 500;
    }

.gm-style .gm-style-iw-t::after {
    background: linear-gradient( 45deg,var(--swd-theme-accent) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
}

.gm-style .gm-style-iw-c {
    border-bottom: 8px solid var(--swd-theme-accent);
}
/*.stn_info div#inventory {
		background-color: white;
	}*/

.poi-info-window div, .poi-info-window a {
    background-color: transparent;
}


.progressbar {
    position: absolute;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-primary);
}

#map {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
/*#tooltip {
		position: absolute;
		z-index: 100;
		display: none;
		padding:5px;
		border-radius:2px;
		background: white;
		box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;*/
/*border: 1px solid black;*/
/*pointer-events: none;
		font-family: Roboto;*/
/*text-shadow: 0 0 11px #000000bf;*/
/*}*/
#tooltip .tooltip_h {
    font-size: 14px;
    font-weight: 400;
    /*-webkit-text-stroke: 0.5px white;*/
    margin-bottom: 2px;
    white-space: nowrap;
}

#tooltip div {
    padding-bottom: 5px
}

.tooltip_hc {
    font-weight: 100;
    font-size: 90%;
    white-space: nowrap;
}


#tooltip span {
    /*font-size: 70%;*/
    /*-webkit-text-stroke: 0.3px white;*/
    font-weight: normal;
}
/*#tooltip::after {
			content: ' ';
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-right: 10px solid white;
			position: absolute;
			left: -10px;
			top: 0;
		}*/
/* The popup bubble styling. */
.popup-bubble {
    /* Position the bubble centred-above its parent. */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%);
    /* Style the bubble. */
    background-color: #ffffffa6;
    backdrop-filter: blur(5px);
    padding: 5px;
    border-radius: 5px;
    font-family: sans-serif;
    overflow-y: auto;
    /* max-height: 60px;*/
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
    border-bottom: 5px solid var(--swd-theme-accent);
    cursor: pointer;
    pointer-events: none;  
}

/*.darkTheme .popup-bubble {
	color: white;
	background-color: #404040a8;
}

@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
	.darkTheme .popup-bubble {
	
		background-color: #404040ed;
	}
}*/
/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
    /* Position the div a fixed distance above the tip. */
    position: absolute;
    width: 100%;
    bottom: 8px;
    left: 0;
    pointer-events: none;
}
    /* This element draws the tip. */
    .popup-bubble-anchor::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        /* Center the tip horizontally. */
        transform: translate(-50%, 0);
        /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
        width: 0;
        height: 0;
        /* The tip is 8px high, and 12px wide. */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid var(--swd-theme-accent);
        pointer-events: none;
    }
/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
    cursor: pointer; /* auto;*/
    height: 0;
    position: absolute;
    width: 200px;
  
    /*cursor: url(https://maps.gstatic.com/mapfiles/openhand_8_8.cur), default;*/
    pointer-events: none;
}


.controls {
    width: 100%;
    height: 24px;
    box-sizing: border-box;
    margin: auto;
    margin-bottom: 10px;
}

#controls, .panel {
    /*position: absolute;*/
    /*z-index: 110;
		top: 0;*/
    /*width: 420px;*/
    /*	left: calc( 50% - 800px/2);*/
    /*right: 0;*/
    background-color: white;
    /*padding: 15px;*/
    border-radius: 5px;
    /*border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;*/
    box-shadow: 1px 1px 5px #0000006b;
    margin: 10px;
    display: none;
    line-height: 170%;
    z-index: 1; /*Ensure search DDL appears above Data Inventory panel*/
    padding: 10px;
}


    #controls table,
    #buttons {
        width: 100%;
        border-collapse: collapse;
    }

    #controls > table td {
        padding: 10px 10px 0;
    }

    /*    #controls table td:first-child {
                padding-left: 10px !important;
                padding-right: 5px;
            }

            #controls table td:last-child {
                padding-left: 5px;
                padding-right: 10px !important;
            }

        #controls table tr:first-child td {
            padding-top: 10px;
            padding-bottom: 5px;
        }
            */
    #controls > table tr:last-child td {
        padding-bottom: 10px;
    }

/*.hint_text */
#FilterControls {
    margin-bottom: 7px;
}

.group_header {
    background-color: var(--swd-theme-accent);
    color: white;
    padding: 0 10px 2px !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: -10px -10px 10px;
}

    .group_header h1,
    .group_header h2 {
        font-weight: 400;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 5px;
    }

#buttons {
    text-align: right
}


.stn_info h2 {
    margin-top: 5px;
    font-weight: 400;
    margin-right: 10px;
    margin-bottom: 10px;
}

    .stn_info h2 #station_country, #station_codes_icao {
        font-weight: 100;
        font-size: 80%;
    }

        #station_codes_icao .icao_lbl {
            font-size: 60%;            
          /*  position: absolute;
            margin-left: 4px;            
            margin-top: 2px;
            font-weight: bold;*/
        }

        .stn_info h4 {
            margin-bottom: 3px;
            font-weight: 500;
        }

label#station_codes_icao {
  /*  font-size: 60%;*/
}
label#station_country {
    white-space: nowrap;
}

.stn_info div#table-container,
.stn_info div#inventory {
    margin: 0 -6px;
}

.stn_header {
    background-color: var(--swd-theme-accent);
    color: white;
    padding: 10px 10px 2px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
}



.stn_info table {
    width: 100%;
    font-size: 100%;
    /*border-collapse: collapse;*/
    border: none;
    border-spacing: 6px;
    white-space: nowrap;
}

    .stn_info table td {
        border-bottom: 1px solid #dadada
    }

.darkTheme .stn_info table td {
    border-bottom: 1px solid #dadada61
}

.darkTheme .stn_info table {
    color: white;
}

.stn_info div#inventory:hover {
    overflow-y: scroll;
}

.flexChild-Scroll::-webkit-scrollbar-thumb {
    -webit-border-radius: 10px;
    border-radius: 10px;
    background-color: grey;
}

.flexChild-Scroll::-webkit-scrollbar {
    width: 5px;
    height: 100%;
    background-color: transparent;
}

.flexChild-Scroll {
    scrollbar-width: thin;
}


.stn_info div#inventory table td > span {
    display: inline-block;
}

    .stn_info div#inventory table td > span:first-child {
        width: 74%;
        font-weight: 300;
    }

p.buy_link a {
    /*font-size: 150%;*/
    text-align: center;
    margin-top: 24px;
    margin-bottom: 23px;
}

p.buy_link a {
    background-color: var(--swd-theme-accent);
    padding: 10px;
    color: white;
    text-decoration: none;
    border-radius: 2px;
    box-shadow: 1px 1px 3px #6c6c6c59;
}
/*autocomplete css*/
.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}


.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.sr-title {
    font-weight: bold;
    font-size: 12px;
    color: #999;
    padding: 3px 5px 1px
}

    .sr-title:nth-child(2) {
        border-top: 1px solid #e6e6e6;
    }

.darkTheme .sr-title {
    color: #dedede;
    background-color: #2c2c2c;
}

    .darkTheme .sr-title:nth-child(2) {
        border-top: 1px solid #818181;
    }

.pac-container {
    background-color: #fff;
    position: absolute;
    z-index: 1000;
    border-radius: 2px;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    width: 400px;
    display: none; /* hiiden by default */
}

.darkTheme .pac-container {
    background-color: #000;
    border: 1px solid #818181;
}

.pac-icon {
    width: 15px;
    height: 20px;
    margin-right: 7px;
    margin-top: 6px;
    display: inline-block;
    vertical-align: top;
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
    background-size: 34px;
}

.sac-item.hiddenStn .sac-icon-marker,
.pac-icon-marker {
    background-position: -1px -161px;
}

.sac-icon-marker {
    background-position: 17px -161px;
}

.sac-item,
.pac-item {
    cursor: pointer;
    padding: 0 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 30px;
    vertical-align: middle;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    color: #999;
}

    .sac-item.hiddenStn {
        text-decoration: line-through;
        color: #6c6c6c59;
    }

    .sac-item.custom,
    .pac-item.custom {
        background-color: #FFF9C4;
    }

.darkTheme .sac-item,
.darkTheme .pac-item {
    color: #d8d8d8;
    border-top: 1px solid #818181;
}

    .darkTheme .sac-item.custom,
    .darkTheme .pac-item.custom {
        background-color: #2c2a0c;
    }

.sac-item:hover,
.pac-item:hover {
    background-color: #efefef;
}

.darkTheme .sac-item:hover,
.darkTheme .pac-item:hover {
    background-color: #efefef;
    color: #2c2a0c;
}

.pac-item-error,
.pac-item-error:hover {
    color: #aaa;
    padding: 0 5px;
    cursor: default;
    background-color: #fff;
}

.darkTheme .pac-item-error,
.darkTheme .pac-item-error:hover {
    background-color: #6c6c6c;
    color: #fff;
}


@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    /*:root {
		--mdc-theme-surface: #ffffffa6;
	}

	.mdc-menu-surface ul.mdc-list {
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}*/

    .gm-style .gm-style-iw-c, .popup-bubble {
        background-color: #ffffffa6;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .darkTheme .gm-style .gm-style-iw-c, .darkTheme .popup-bubble {
        background-color: #404040a8;
        color: white;
    }
}

@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    /*:root {
		--mdc-theme-surface: #ffffffde;
	}*/

    .gm-style .gm-style-iw-c, .popup-bubble {
        background-color: #ffffffde;
    }

    .darkTheme .gm-style .gm-style-iw-c, .darkTheme .popup-bubble {
        background-color: #404040ed;
        color: white;
    }
}

select#elements option {
    color: black;
    font-style: normal;
}

.darkTheme select#elements option {
    color: white;
}

.darkTheme .gm-bundled-control div div {
    background-color: black !important;
    color: white;
}

.darkTheme .gm-bundled-control .gm-control-active img {
    filter: invert(792%) sepia(1038%) saturate(2476%) hue-rotate( 82deg) brightness(1558%) contrast(137%);
}

#FilterControls table tr td {
    padding-top: 0 !important;
}

#DataInvSidePanel .stn_info {
    border-radius: 5px;
    width: 420px;
    margin-left: 10px;
    /*padding: 10px;*/
    box-shadow: 1px 1px 5px #0000006b;
    font: 400 14px Roboto, Arial, sans-serif;
}

@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    .map-control,
    #controls,
    #DataInvSidePanel .stn_info,
    .panel {
        background-color: #ffffffa6;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .darkTheme .map-control,
    .darkTheme #controls,
    .darkTheme #DataInvSidePanel .stn_info,
    .darkTheme .panel {
        background-color: #404040a8;
        color: white;
    }
}

@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    .map-control,
    #controls,
    #DataInvSidePanel .stn_info,
    .panel {
        background-color: #ffffffde;
    }

    .darkTheme .map-control,
    .darkTheme #controls,
    .darkTheme #DataInvSidePanel .stn_info,
    .darkTheme .panel {
        background-color: #404040ed;
        color: white;
    }
}

.darkTheme .mdc-menu-surface {
    color: var(--mdc-theme-surface,#fff);
    background-color: var(--mdc-theme-on-surface, #000);
}

.darkTheme .mdc-select__menu .mdc-list .mdc-list-item--selected,
.darkTheme .mdc-menu .mdc-list {
    color: var(--mdc-theme-surface,#fff);
}

.darkTheme .gm-control-active,
.darkTheme input, .darkTheme select {
    color: var(--mdc-theme-surface,#fff) !important;
    background-color: var(--mdc-theme-on-surface, #000) !important;
}

p.buy_link {
    font-size: 150%;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 23px;
}

    p.buy_link a {
        background-color: var(--swd-theme-accent);
        padding: 10px;
        color: white;
        text-decoration: none;
        border-radius: 2px;
        box-shadow: 1px 1px 3px #6c6c6c59;
    }

#CloseDataInv,
#ClearFilter,
#CloseMapIntro{
    background: none;
    display: block;
    border: 0px;
    margin: 0px;
    padding: 0px;
    text-transform: none;
    appearance: none;
    position: absolute;
    cursor: pointer;
    user-select: none;
    right: -10px;
    width: 30px;
    height: 30px;
}

    #CloseDataInv img,
    #ClearFilter img,
    #CloseMapIntro img{
        pointer-events: none;
        display: block;
        width: 14px;
        height: 14px;
        margin: 8px;
    }

    #CloseDataInv img,
    #CloseMapIntro img {
        filter: invert(1);
    }

.CloseDataInv_Div {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 15px;
    margin-right: 10px;
}

#FilterControls table {
    table-layout: fixed;
}

    #FilterControls table td > div {
        display: inline-block;
    }

        #FilterControls table td > div.al_sp {
            vertical-align: super;
        }

#pComplete {
    --track-background: linear-gradient(to right, #EFCD21,#EFCD21,#63BE7B);
}

input#pComplete[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
}

input#pComplete[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
}

#Apps iframe {
    border: none;
    min-height: 240px;
}

input#pComplete[type="range"]::-moz-range-track {
    /*background: transparent;*/
    background-image: var(--track-background); /*linear-gradient(to right, #ffadae,#EFCD21,#63BE7B);*/
    border-radius: 3px;
    border: solid grey 1px;
    height: 100%;
}

input#pComplete[type='range'] { /*::-webkit-slider-runnable-track  - Don't add this, style something other than the track */
    -webkit-appearance: none;
    /*background: transparent;*/
    background-image: var(--track-background); /* linear-gradient(to right, #ffadae,#EFCD21,#63BE7B);*/
    border-radius: 0;
    border: solid grey 1px;
    /* height: 100%;*/
    width: 70%;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 8px;
    margin: 0;
}

    input#pComplete[type='range']::-webkit-slider-thumb {
        border: 1px solid grey;
        background-color: var(--mdc-theme-primary);
    }

.darkTheme  input#pComplete[type='range']::-webkit-slider-thumb {
        border: 1px solid grey;
        background-color: white;
    }

.slidecontainer input#pComplete {
    width: 130px
}

input#pComplete_txt {
    width: 25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

button#ClearFilter {
    position: absolute;
    bottom: -10px;
    right: -10px;
}

.darkTheme .gm-ui-hover-effect img,
.darkTheme button#ClearFilter img {
    filter: invert(792%) sepia(1038%) saturate(2476%) hue-rotate( 287deg) brightness(1558%) contrast(137%);
}

/*.CloseDataInv_Div {
    position: relative;
}*/

/*#CloseDataInv {
    top: -10px;
    right: -10px;
}*/
/*label#hint_text {
	margin-right: -16px;
	display: inline-block;
}*/
/*map style selector*/
.selector-control {
    font-size: 14px;
    line-height: 30px;
    padding: 0 5px;
    margin: 10px;
}
/* Always set the map height explicitly to define the size of the div
	   * element that contains the map. */
#map {
    height: 100%;
    /*opacity:0.5*/
}

    #map > div > div > div[role=group] {
        opacity: 0.5
    }

.map-control {
    /*background-color: #fff;*/
    /*border: 1px solid #ccc;*/
    border-radius: 5px;
    box-shadow: 1px 1px 5px #0000006b;
    font-family: "Roboto", "sans-serif";
    margin: 10px 10px 10px 0;
    /* Hide the control initially, to prevent it from appearing
		   before the map loads. */
    display: none;
}



#DataInvSidePanel {
    display: none;
    width: calc(100% - 80px);
    max-width: 440px;
}

/*This is need to ensure that the google maps search result appear on top of the data invetory panel*/
form#input_controls {
    z-index: 1;
}


/* Display the control once it is inside the map. */
#map #controls,
#map .map-control {
    display: block;
    max-width: 440px;
}

#map #DataInvSidePanel {
    display: flex;
    max-height: calc(100% - 30px);
    z-index: 1 !important;
}

/*#map div div div:nth-child(2) {
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}*/
/* map style select control w/t img */



div#style-selector-control
 {
    padding: 10px;
    z-index: 10 !important;
}

img.mcds-list-item-selected__img {
    margin: 0;
    padding: 1px 0 0 0;
    margin-left: -15px;
}

img.mcds-list-item__img {
    vertical-align: middle;
    margin-right: 10px;
    /* margin-left: 10px; */
    border-radius: 5px;
    border: 2px solid rgb(143 143 143 / 51%);
}


li.mdc-list-item {
    padding: 5px 10px;
}

.mdc-select__anchor {
    min-width: 50px;
    height: 50px;
}
/*  station data invetory styes*/

.gm-style .gm-style-iw-d {
    overflow: auto !important;
    /*width: 430px;*/ /*todo*/
}


.callForData,
.colorBlock {
    width: 16px;
    height: 19px;
    padding: 0;
    display: inline-block;
    /*margin-top: -6px;
	margin-bottom: -3px;*/
    cursor: default;
}
/*
		.colorBlock.narrow {
			width: 7px
		}*/

.callForData {
    /*  background-image: url( https://www.speedwellweather.com/Images/Icon/telephone.png);
    background-repeat: no-repeat;
    background-size: 9px;*/
    height: 11px;
    width: 11px;
    background-position: center;
    /*  filter: grayscale(1);*/

    color: grey;
    font-family: 'InvAppIcons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .callForData:before {
        content: "\e90a";
    }


.darkTheme .callForData {
    /* filter: grayscale(1) brightness(2);*/
    color: #c5c5c5
}

.cleanedDataFeed,
.cleanedHistory {
    width: 11px !important;
    height: 11px;
    padding: 1px;
    border-radius: 25px;
    color: white;
    text-align: center;
    font-size: 85%;
    display: inline-block;
    cursor: default;
}

.cleanedDataFeed {
    background-color: dodgerblue;
}

.cleanedHistory {
    background-color: limegreen;
}

#inventory {
    padding: 0 5px 0 5px;
}

    #inventory table {
        border-spacing: 0 1px
    }

.stn_info table {
    width: 410px;
}


table.ledgend {
    border-spacing: 0 10px;
    width: 400px;
}

    table.ledgend td,
    .darkTheme table.ledgend td {
        border: none;
    }



        table.ledgend td.colorscale {
            text-align: right;
            width: 100%;
        }

    table.ledgend .colorscale .colorBlock {
        width: 13px;
        height: 14px;
    }

.c-n-r,
.c-n-h {
    width: 150px
}

.c-sd-r,
.c-sd-h {
    width: 55px;
    text-align: right;
}

.c-ed-r,
.c-ed-h {
    width: 55px;
    text-align: left;
}

.c-pcn-r,
.c-pcn-h {
    width: 25px;
    text-align: center;
}

.c-pc-r,
.c-pc-h {
    width: 16px;
    text-align: center;
}

.c-sp-r,
c-sp-h {
    width: 9px;
}

#inventory table thead th {
    vertical-align: bottom
}

    #inventory table thead th i {
        font-family: serif;
    }
/*#table-container table {
	color: black;
}*/


.darkTheme #table-container table {
    color: white;
}


.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


#stnNotes,
#p_AppsPanel {
    font: 400 15px Roboto, Arial, sans-serif;
    text-decoration: none;
    color: #505050;
    line-height: 150%;
    border-collapse: collapse;
}

.darkTheme #stnNotes {
    color: white;
}

table#p_AppsPanel td {
    border: none;
    padding-bottom: 10px;
}

table#p_AppsPanel tr:last-child td {
    padding-bottom: 0;
}

#p_AppsPanel .applink_desc {
    font-size: 10px;
    white-space: break-spaces;
    line-height: 120%;
    margin-left: 40px;
}

#p_AppsPanel a:hover, #p_AppsPanel a:-webkit-any-link,
#p_AppsPanel a:focus,
#p_AppsPanel a:active,
.p_AppsPanel {
    color: #505050;
    background-color: #ffffff5e;
    text-decoration: none;
    display: block;
    padding: 0 5px 10px;
    border-radius: 3px;
    border: 2px solid transparent;
    box-shadow: 1px 1px 3px 0px #0000003d;
}

#p_AppsPanel a:hover, #p_AppsPanel a:focus {
    background-color: #f0a6035c;
    border-color: #858585;
}


.darkTheme #p_AppsPanel a:hover, .darkTheme #p_AppsPanel a:-webkit-any-link,
.darkTheme #p_AppsPanel a:focus,
.darkTheme #p_AppsPanel a:active {
    color: white;
    background-color: #0000002b;
    text-decoration: none;
    box-shadow: 1px 1px 3px 0px #0000008c;
}

.darkTheme #p_AppsPanel a:hover, .darkTheme #p_AppsPanel a:focus {
    border-color: #f0a603;
    background-color: #fb85413b;
}


[class^="IAicn-"], [class*=" IAicn-"] {
    padding-right: 15px;
    font-size: 170%;
    position: relative;
    top: 17px;
    left: 5px;
}
@media only screen and (max-width: 576px) {

    .mdc-tab {
        height: 39px;
    }
    stn_info h2 {
        margin-top: 0;        
        margin-right: 15px;
        margin-bottom: 5px;
    }
}

.gMarkerSPLbl {
    background: #ffff00;
    border-radius: 30px;
    padding: 1px 5px;
}


.mdc-switch + label {
    margin-left: 10px;
}

.mdc-switch.mdc-switch--checked .mdc-switch__track {
    background-color: #018786;
    background-color: var(--mdc-theme-primary, #018786);
}

/*Support for HiDPI monitors*/

_HiDPI_only {
    display: none;
}

@media (-webkit-min-device-pixel-ratio: 1.1) {
    _HiDPI_only{
        display:block;
    }
}