/** Form **/
/**********/
form#streak-select { line-height: 2.5em; }

/* Return Types */
/****************/
.return-selection { position: absolute; opacity: 0; }

label.return-selection-label {
    line-height:      1.75em;
    background-color: #ffffff !important;
    border:           solid 1px #dcdee0 !important;
}

.return-selection:not(:checked) ~ label.return-selection-label { color: #0076d6 !important; }

.return-selection:disabled ~ label.return-selection-label {
    color:              #8d9297 !important;
    cursor:             default !important;
    -webkit-box-shadow: none !important;
       -moz-box-shadow: none !important;
            box-shadow: none !important;
}

.return-selection:not(:disabled) ~ label.return-selection-label:hover { border-color: #0076d6 !important; }
.return-selection:checked ~ label.return-selection-label:hover {
    border-color:       #162e51 !important;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

.return-selection:checked ~ label.return-selection-label {
    cursor:             default;
    color:              #162e51 !important;
    border-color:       #162e51 !important;
    -webkit-box-shadow: inset 0 0 3px #000000;
       -moz-box-shadow: inset 0 0 3px #000000;
            box-shadow: inset 0 0 3px #000000;
}
/****************/
/* Return Types */

/* Date Picker */
/***************/
#ui-datepicker-div { z-index: 999999 !important; }
#datePickerDate { padding: 2px; text-align: center; width: 105px; font-weight: normal !important; }

#datePickerDate:disabled { background-color: #c6cace; color: #8d9297; cursor: pointer; }
/***************/
/* Date Picker */
/**********/
/** Form **/

/* Loader Overlay */
/******************/
#dynamicContent,
#map-canvas-div,
#dataTableDiv { position: relative; }

.loader-overlay .noaa-loader { position: absolute; top: calc(50% - 33px); left: calc(50% - 33px); }
/******************/
/* Loader Overlay */

/* Leaflet Map */
/***************/
#map-canvas {
    width:            100%;
    padding:          5px;
    border:           solid 1px #c6cace;
    background-color: #ffffff;
    margin:           1em auto;
}

@media (max-width: 767px) { #map-canvas { height: 500px; } }
@media (min-width: 768px) and (max-width:  991px) { #map-canvas { height: 550px; } }
@media (min-width: 992px) and (max-width: 1199px) { #map-canvas { height: 815px; } }
@media (min-width: 1200px) { #map-canvas { height: 685px; } }

/* Hover Info */
.leaflet-bottom.leaflet-left { width: calc(100% - 20px); }
.infoBox { width: 100%; }

#values {
    padding:       6px 8px;
    background:    rgba(255,255,255,0.8);
    box-shadow:    0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    font-size:     20px;
    font-family:   "Source Sans Pro",sans-serif;
}

#mapTitleDate { display: flex; justify-content: space-between; }

#mapTitle,
#dateDisplay {
    font-family:  "Source Sans Pro",sans-serif;
    color:        #3d4551;
}

#mapTitle { margin-right: 10px; }

@media (max-width: 991px) {
    #mapTitle { font-size: 20px; }
    #dateDisplay { font-size: 16px; }
}

@media (min-width: 992px) {
    #mapTitle { font-size: 26px; }
    #dateDisplay { font-size: 20px; }
}
/**************/
/* Hover Info */

/* Text Labels */
/***************/
.textLabels {
    top:           -1em !important;
    text-align:    center;
    min-height:    1.5em;
    font-family:   "Source Sans Pro",sans-serif;
    cursor:        default !important;
    color:         #000000;
    text-shadow:   -1px -1px 0 #ffffff,
                    1px -1px 0 #ffffff,
                   -1px  1px 0 #ffffff,
                    1px  1px 0 #ffffff;
}
/***************/
/* Text Labels */

/* Legend */
/**********/
.legend {
    font-family: "Source Sans Pro",sans-serif;
    white-space: nowrap;
    line-height: 1.1em;
}

.legend #legend span.key,
.legend #legend span.label {
    display:     inline-block;
    text-align:  left;
    opacity:     1;
    width:       35px;
    white-space: nowrap;
}

.legend #legend span.label {
    color:       #8d9297;
    text-shadow: -1px -1px 0 #ffffff,
                  1px -1px 0 #ffffff,
                 -1px  1px 0 #ffffff,
                  1px  1px 0 #ffffff;
}

.legend #legend span.key {
    height:        1.5em;
    border-top:    solid 1px #8d9297;
    border-bottom: solid 1px #8d9297;
}
.legend #legend span.key:first-of-type { border-left: solid 1px #8d9297; }
.legend #legend span.key:last-of-type  { border-right: solid 1px #8d9297 !important; }
/**********/
/* Legend */

/* FlyTo Buttons */
/*****************/
.flyToButton:not(:disabled):not(:hover) { border: 2px #3d4551 solid !important; }
.flyToButton:not(:first-of-type) { margin-left: 5px; }
/*****************/
/* Flyto Buttons */

/* Popups */
/**********/
.popup-title { font-size: 1.15em; }
.popup-data { display: flex; justify-content: space-between; }
.popup-streak { font-weight: bold; }
.popup-dates { font-style: italic; color: #8d9297; }
/**********/
/* Popups */

/***************/
/* Leaflet Map */

#mapOptionsDiv {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    flex-wrap:       nowrap;
    margin:          0.5em auto 1em auto;
}

/* Display Text Labels */
/***********************/
input#showText { position: absolute; opacity: 0; }

label#showTextLabel {
    color:            #0076d6;
    background-color: #ffffff !important;
    border:           solid 1px transparent;
}

label#showTextLabel:hover { border-color: #0076d6 !important; }

#showText:checked ~ label#showTextLabel {
    background-color: #a8f2ff !important;
    border-color:     #a8f2ff;
}

#showText:checked ~ label#showTextLabel:hover {
    color: #0076d6 !important;
}
/***********************/
/* Display Text Labels */

/* easyPrint hack */
/* replaces pop-out menu with single button */
/********************************************/
/* hide initial icon */
.leaflet-control-easyPrint-button-export { display: none !important; }

/* show export options menu */
.easyPrintHolder { display: block !important; }

/* fit border around export options menu */
.leaflet-control-easyPrint {
    height: 34px !important;
}
.easyPrintHolder {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/* replace A4Landscape image with download icon */
.A4Landscape {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQzMy41IDQzMy41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MzMuNSA0MzMuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJmaWxlLWRvd25sb2FkIj4KCQk8cGF0aCBkPSJNMzk1LjI1LDE1M2gtMTAyVjBoLTE1M3YxNTNoLTEwMmwxNzguNSwxNzguNUwzOTUuMjUsMTUzeiBNMzguMjUsMzgyLjV2NTFoMzU3di01MUgzOC4yNXoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K) !important;
    transform: rotate(0deg) !important;
}

/* hide unused export options */
.A4Portrait,
.CurrentSize { display: none !important; }
/******************/
/* easyPrint hack */

#easyPrint-export-icon:hover { background-color: #dcdee0; }

/* Data Table */
/**************/
th.sortable {
    cursor:              pointer;
    background-repeat:   no-repeat;
    background-position: center left;
    padding-left:        20px !important;
    margin-left:         -1px !important;
}
th.unsorted { background-image: url('/monitoring-content/lib/images/sort-lt.gif'); }
th.asc      { background-image: url('/monitoring-content/lib/images/asc-lt.gif'); }
th.desc     { background-image: url('/monitoring-content/lib/images/desc-lt.gif'); }

table#streaks-data td.state,
table#streaks-data td.streak,
table#streaks-data td.max,
table#streaks-data td.difference { text-align: center; }
table#streaks-data td.max-dates { text-align: right; white-space: nowrap; }

@media (max-width: 991px) { table#streaks-data .difference, table#streaks-data .max-beg-date { display: none; } }
/**************/
/* Data Table */