@import url("https://rsms.me/inter/inter.css");
@supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } }

.view { width: 100%; margin-top: 50px; background-color: #F8F9FA; }

.calcite-map.sidebar-revealed #mapViewDiv { width: -webkit-calc(100vw - 500px); width: calc(100vw - 500px); -webkit-transition: width 0.35s ease; -moz-transition: width 0.35s ease; -ms-transition: width 0.35s ease; -o-transition: width 0.35s ease; transition: width 0.35s ease; }

.calcite-map #mapViewDiv { width: 100%; -webkit-transition: width 0.35s ease; -moz-transition: width 0.35s ease; -ms-transition: width 0.35s ease; -o-transition: width 0.35s ease; transition: width 0.35s ease; }

.mobile #mapViewDiv { width: 100% !important; }

.navbar { background-color: #FFFFFF; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); border-bottom: 1px solid #F8F9FA; width: 100%; -webkit-transition: width 0.35s ease; -moz-transition: width 0.35s ease; -ms-transition: width 0.35s ease; -o-transition: width 0.35s ease; transition: width 0.35s ease; }

.navbar.map-view { border-bottom: 1px solid rgba(50, 50, 50, 0.25); }

.navbar .natural-flows-logo, .navbar .tnc-logo, .navbar .nav-link { cursor: pointer; }

.navbar .tnc-logo { margin: 0 20px; }

.navbar .tnc-logo .full-logo { display: block; width: 110px; height: 80%; }

.navbar .tnc-logo .mobile-logo { display: none; }

.navbar .natural-flows-logo { max-width: 175px; }

.navbar .calcite-title-main { color: #000000; font-size: 20px; line-height: normal; }

.navbar .nav-icon { font-size: 11px; line-height: 1; margin-left: 11px; border-radius: 3px; padding: 1px 4px; }

.navbar .nav-icon.dev-mode { display: none; color: #5454C5; border: 1px solid #5454C5; }

.navbar [class*="esri-icon-"] { font-weight: bold !important; }

.navbar .navbar-nav { padding-right: 5px; }

.navbar .navbar-nav li > a { padding: 15px 20px; }

.navbar .dropdown.calcite-dropdown { display: none; order: 3; }

.navbar .dropdown.calcite-dropdown .dropdown-toggle { background-image: none; }

.navbar .dropdown.calcite-dropdown .dropdown-toggle::after { display: none; }

.navbar .nav-link { font-size: 16px !important; font-weight: 500; color: #000000 !important; }

.navbar .nav-link:hover, .navbar .nav-link:focus { background-image: none !important; background-color: rgba(32, 33, 36, 0.04) !important; }

.navbar .nav-link.active { background-image: linear-gradient(to bottom, transparent 95%, #0056D6 3px) !important; }

.mobile .tnc-logo .full-logo { display: none; }

.mobile .tnc-logo .mobile-logo { display: block; }

.mobile .calcite-nav.nav.navbar-nav { display: none; }

.mobile .dropdown.calcite-dropdown { display: block; position: initial; }

.mobile .dropdown.calcite-dropdown .dropdown-menu { background-color: #FFFFFF; display: flex; justify-content: space-around; width: 100%; height: 40px; left: 0; }

.mobile .dropdown.calcite-dropdown .calcite-dropdown-toggle span { background-color: #000000; }

.esri-popup__content p { font-size: 14px; max-width: 400px; font-weight: 300; }

.esri-popup__content a[href] { font-size: 14px; color: #0056D6; text-decoration: none; cursor: pointer; }

.esri-popup__content a[href]:hover { color: #000000; text-decoration: none; }

.esri-popup { font-family: "Inter", sans-serif; }

.esri-popup .esri-popup__header-title { font-size: 14px; font-weight: 300; text-transform: uppercase; color: #000000; }

.esri-popup .esri-popup__header-title strong { font-size: 12px; font-weight: 600; padding-bottom: 3px; display: block; }

.esri-popup .esri-popup__main-container { max-height: 370px; background-color: #F8F9FA; width: auto; }

.esri-popup .streams-popup-content-container { width: 550px; }

.popup-footer { display: flex; margin-top: 10px; }

.popup-footer .popup-actions { display: inherit; position: relative; width: 100%; align-items: center; justify-content: center; }

.popup-footer .popup-actions .chart-controls .arrows { display: flex; }

.popup-footer .popup-actions .chart-controls .arrows div[class^="arrow-"] { font-size: 12px; padding: 0px 10px; }

.popup-footer .popup-actions .chart-controls .arrows div[class^="arrow-"]:hover { cursor: pointer; }

.popup-footer .popup-actions .chart-controls .arrows .disabled { color: #a9a9b1; cursor: default; }

.popup-footer .popup-actions .chart-controls .chart-name { font-weight: 600; font-size: 12px; width: 140px; text-align: center; }

.popup-footer .popup-actions .chart-controls .dots { display: flex; justify-content: center; }

.popup-footer .popup-actions .chart-controls .dots .dot { padding: 0px 4px; }

.popup-footer .popup-actions .chart-controls .dots .dot.available { display: inline-flex; color: #d8d8d8; }

.popup-footer .popup-actions .chart-controls .dots .dot.active { color: #0056D6; }

.popup-footer .popup-actions .chart-controls .dots .dot:hover { cursor: pointer; }

.popup-footer .popup-actions .queue-controls { display: inherit; position: absolute; right: 0; }

.popup-footer .popup-actions .queue-controls .action-button { padding: 4px 6px 3px 7px; }

.popup-footer .popup-actions .queue-controls .action-button .button-text { max-width: 0; margin: 0px; -webkit-transition: max-width 0.25s ease; -moz-transition: max-width 0.25s ease; -ms-transition: max-width 0.25s ease; -o-transition: max-width 0.25s ease; transition: max-width 0.25s ease; display: inline-block; white-space: nowrap; overflow: hidden; }

.popup-footer .popup-actions .queue-controls .action-button:hover .button-text { max-width: 125px; margin-left: 5px; }

.popup-footer .popup-actions .queue-controls .action-button[data-action="add-stream-to-queue"] .icon.esri-icon-plus { display: block; }

.popup-footer .popup-actions .queue-controls .action-button[data-action="add-stream-to-queue"] .icon.esri-icon-minus { display: none; }

.popup-footer .popup-actions .queue-controls .action-button[data-action="remove-stream-from-queue"] .icon.esri-icon-plus { display: none; }

.popup-footer .popup-actions .queue-controls .action-button[data-action="remove-stream-from-queue"] .icon.esri-icon-minus { display: block; }

.popup-footer .popup-actions .chart-type-tabs { display: inherit; }

.popup-footer .popup-actions .chart-type-tabs .action-button { padding-left: 20px; font-weight: bold; color: #a9a9b1; cursor: pointer; }

.popup-footer .popup-actions .chart-type-tabs .action-button .button-text { padding-right: 2px; padding-top: 6px; font-size: 12px; }

.popup-footer .popup-actions .chart-type-tabs .action-button .active-underline { display: block; width: 25px; height: 2px; vertical-align: 11px; margin: 3px auto 0px auto; pointer-events: none; background-color: #85c1e9; opacity: 0; }

.popup-footer .popup-actions .chart-type-tabs .action-button.active { color: #000000; }

.popup-footer .popup-actions .chart-type-tabs .action-button.active .active-underline { opacity: 1; }

.popup-footer .popup-actions .chart-type-tabs .action-button:hover { color: #000000; }

.mobile .queue-controls, .esri-popup--is-docked .queue-controls { display: none !important; }

.mobile .streams-popup-content-container, .esri-popup--is-docked .streams-popup-content-container { width: 100%; max-height: 100%; }

.mobile .esri-popup .esri-popup__main-container, .esri-popup--is-docked .esri-popup .esri-popup__main-container { width: 100%; max-height: 100%; }

div[class*="-chart"] { display: none; }

div.active[class*="-chart"] { display: block; }

.chart-type-tabs div.available[class*="-chart"] { display: block; }

/* focused metric displays */
.focus-metrics, .metric { display: block; }

.focus-metrics { width: 100%; display: flex; justify-content: center; }

.focus-metrics .metric-display { min-width: 400px; display: flex; justify-content: space-around; }

.focus-metrics .variable .variable-label { font-size: 12px; font-weight: bold; font-style: italic; text-align: center; padding-bottom: 3px; border-bottom: 1px solid #000000; }

.focus-metrics .variable .metrics { display: flex; }

.focus-metrics .variable .metric { width: 82px; height: 40px; margin-right: 11px; }

.focus-metrics .variable .metric .dot { width: 10px; height: 10px; border-radius: 5px; display: inline-block; margin-right: 5px; }

.focus-metrics .variable .metric .label { padding-top: 5px; padding-bottom: 3px; font-size: 12px; font-weight: 500; }

.focus-metrics .variable .metric .focus-data { font-size: 16px; padding-top: 5px; padding-left: 14px; }

.focus-metrics .variable .metric .units { font-size: 10px; padding-left: 3px; }

.focus-metrics .variable .metric.raster { width: 100%; }

.focus-metrics .variable .metric.raster .label { display: flex; }

.focus-metrics .variable .metric.raster .dot { margin-top: 3px; background-color: #EFEFEF; }

.focus-metrics .variable .metric:last-child { margin-right: 0px; }

.focus-metrics .observed { display: none; }

.focus-metrics .observed .metric { width: 92px; }

.focus-metrics .observed .all .dot { background-color: #A3288E; }

.focus-metrics .observed .observation-count { display: none; font-size: 10px; padding-left: 14px; }

.focus-metrics .observed .observation-count .count { border: 1px solid #000000; color: #A3288E; border-radius: 2px; padding: 0px 2px; }

.focus-metrics .estimated .dry .dot { background-color: #85C1E9; }

.focus-metrics .estimated .mod .dot { background-color: #2E86C1; }

.focus-metrics .estimated .wet .dot { background-color: #1B4F72; }

.focus-metrics .flow-alteration .metric { width: 92px; }

.focus-metrics .flow-alteration .inflated .dot { background-color: #2E86C1; }

.focus-metrics .flow-alteration .deflated .dot { background-color: #DA2A1D; }

/* Charts */
.spinner { border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #000000; width: 60px; height: 60px; -webkit-animation: spin 1.5s ease-in-out infinite; /* Safari */ animation: spin 1.5s ease-in-out infinite; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px); }

/* Safari */
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.chart { min-height: 200px; /* Axis */ /* overlay */ }

.chart .domain, .chart .tick line { fill: none; stroke: #a9a9b1; stroke-width: 0.5; opacity: 0.5; }

.chart text { fill: #a9a9b1; font: 12px "Inter", sans-serif; }

.chart text.focused { fill: #000000; }

.chart .overlay { fill: none; pointer-events: all; }

/* Line hydrograph */
#lineHydrograph .metric .line { fill: none; stroke-width: 2; }

#lineHydrograph .metric .point { stroke-width: 2; stroke: #ffffff; }

#lineHydrograph .metric .range { fill-opacity: 0.20; fill: #a9a9b1; }

#lineHydrograph .metric.observedAll .line { stroke: #A3288E; }

#lineHydrograph .metric.observedAll .point { fill: #A3288E; }

#lineHydrograph .metric.estimatedDry .line { stroke: #85C1E9; }

#lineHydrograph .metric.estimatedDry .point { fill: #85C1E9; }

#lineHydrograph .metric.estimatedMod .line { stroke: #2E86C1; }

#lineHydrograph .metric.estimatedMod .point { fill: #2E86C1; }

#lineHydrograph .metric.estimatedWet .line { stroke: #1B4F72; }

#lineHydrograph .metric.estimatedWet .point { fill: #1B4F72; }

#lineHydrograph .focus circle { stroke-width: 2; stroke-opacity: 1; fill: #ffffff; }

#lineHydrograph .focus .halo { stroke-width: 0; stroke-opacity: 0.3; fill-opacity: 0; }

#lineHydrograph .focus .observedAll { stroke: #A3288E; }

#lineHydrograph .focus .estimatedDry { stroke: #85C1E9; }

#lineHydrograph .focus .estimatedMod { stroke: #2E86C1; }

#lineHydrograph .focus .estimatedWet { stroke: #1B4F72; }

#lineHydrograph .observed-tooltip { display: none; }

#lineHydrograph .observed-tooltip rect { stroke: #000000; stroke-width: 1; fill: #F8F9FA; rx: 2; }

#lineHydrograph .observed-tooltip .triangle { fill: #F8F9FA; stroke: none; }

#lineHydrograph .observed-tooltip .triangle-outline { stroke: #000000; fill: none; }

#lineHydrograph .observed-tooltip text { font-size: 12px; font-weight: bold; fill: #000000; }

#lineHydrograph .observed-tooltip text.count { fill: #A3288E; }

#lineHydrograph .confidence-interval-key rect { fill-opacity: 0.20; fill: #a9a9b1; }

#lineHydrograph .confidence-interval-key .label { fill: #000000; font-size: 12px; }

/* raster chart */
#rasterHydrograph .domain, #rasterHydrograph .tick line { display: none; }

#rasterHydrograph .month-labels text:nth-child(even) { display: none; }

#rasterHydrograph rect:hover { fill: #21618C; }

/* flow alteration chart */
#flowAlteration .inflated-bars { fill: #2E86C1; }

#flowAlteration .deflated-bars { fill: #DA2A1D; }

#flowAlteration .focus-line { stroke-width: 1; stroke: #000000; }

.functional-flow-metrics-chart .ffm-filters { display: flex; justify-content: space-evenly; }

.functional-flow-metrics-chart .ffm-filters .filter { position: relative; padding-bottom: 5px; }

.functional-flow-metrics-chart .ffm-filters .filter-label { font-size: 12px; font-weight: bold; font-style: italic; text-align: center; padding-bottom: 5px; }

.functional-flow-metrics-chart .ffm-filters .filter-selector { min-width: 122px; border: 1px solid #0056D6; background-color: #FFFFFF; border-radius: 3px; text-align: center; font-size: 12px; padding: 4px; cursor: pointer; }

.functional-flow-metrics-chart .ffm-filters .filter-selector .text { margin-right: 5px; font-weight: 500; }

.functional-flow-metrics-chart .ffm-filters .filter-selector .icon { transform: rotate(90deg); font-size: 10px; }

.functional-flow-metrics-chart .ffm-filters .filter-selector:hover { background-color: #F8F9FA; }

.functional-flow-metrics-chart .ffm-filters .filter-options { position: absolute; min-width: 122px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none; margin-top: 5px; padding: 6px 10px; background-color: #FFFFFF; border-radius: 4px; border: 1px #a9a9b1 solid; -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.15); z-index: 1; }

.functional-flow-metrics-chart .ffm-filters .filter-options .checkbox-container { font-size: 14px; }

.functional-flow-metrics-chart .ffm-filters .filter-options.show { display: block; }

.functional-flow-metrics-chart .ffm-filters .filter.disabled .filter-label { color: #a9a9b1; }

.functional-flow-metrics-chart .ffm-filters .filter.disabled .filter-selector { border-color: #a9a9b1; color: #a9a9b1; cursor: default; }

.functional-flow-metrics-chart .ffm-filters .filter.disabled .filter-selector:hover { background-color: #FFFFFF; }

.functional-flow-metrics-chart .ffm-filters .component .filter-options { width: 200px; }

.functional-flow-metrics-chart .ffm-table { margin-top: 15px; width: 100%; border-collapse: collapse; table-layout: fixed; }

.functional-flow-metrics-chart .ffm-table thead { font-size: 11px; font-weight: 500; color: #5F6368; }

.functional-flow-metrics-chart .ffm-table thead th { padding-bottom: 10px; }

.functional-flow-metrics-chart .ffm-table thead th .mobile-text { display: none; }

.functional-flow-metrics-chart .ffm-table .first-cell { text-transform: uppercase; width: 40%; }

.functional-flow-metrics-chart .ffm-table tbody tr { font-size: 12px; border-top: 1px solid #d6d6d6; }

.functional-flow-metrics-chart .ffm-table tbody th { font-weight: 600; }

.functional-flow-metrics-chart .ffm-table tbody td { padding-top: 11px; padding-bottom: 11px; }

.functional-flow-metrics-chart .ffm-table tbody td .val { font-weight: 500; padding-right: 6px; }

.functional-flow-metrics-chart .ffm-table tbody td .unit { color: #a9a9b1; font-size: 10px; text-transform: uppercase; }

.functional-flow-metrics-chart .ffm-table tbody td.indeterminate .val::after { content: '*'; }

.functional-flow-metrics-chart [data-tt-type] { text-decoration: underline; }

.functional-flow-metrics-chart [data-tt-type]:hover { color: #0056D6; cursor: pointer; }

.ffm-tooltip { position: absolute; left: 15px; padding: 10px 15px; font-size: 12px; background-color: #ffffff; border: 1px solid #000000; border-radius: 5px; width: calc(100% - 30px); display: flex; align-items: center; }

.ffm-tooltip img { width: 12px; padding-right: 15px; }

.ffm-tooltip .header { font-weight: 600; }

.ffm-tooltip .body { padding-left: 10px; color: #5F6368; }

.ffm-tooltip .body .dynamic { font-weight: 600; color: #000000; }

.ffm-tooltip .arrow { width: 0; height: 0; position: absolute; }

.ffm-tooltip .arrow.top { top: -7px; }

.ffm-tooltip .arrow.top .fill { position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 7px solid #ffffff; }

.ffm-tooltip .arrow.top .outline { position: absolute; top: -1px; left: -1px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 8px solid #000000; }

.ffm-tooltip .arrow.bottom { bottom: 0; }

.ffm-tooltip .arrow.bottom .fill { position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 7px solid #ffffff; }

.ffm-tooltip .arrow.bottom .outline { position: absolute; left: -1px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 8px solid #000000; }

.no_data, .not_enough_observed_data, .no_prediction_data { color: #a9a9b1 !important; /* TODO: this is ugly. clean this up */ }

.no_data .val, .not_enough_observed_data .val, .no_prediction_data .val { color: #a9a9b1; }

.likely_altered_early, .likely_altered_high, .likely_altered_late, .likely_altered_low { color: #CF4F5D !important; }

.likely_altered_early .val, .likely_altered_high .val, .likely_altered_late .val, .likely_altered_low .val { color: #CF4F5D; }

.indeterminate, .likely_unaltered { color: #15A47E !important; }

.indeterminate .val, .likely_unaltered .val { color: #15A47E; }

.mobile .focus-metrics { padding-bottom: 10px; display: block; }

.mobile .focus-metrics .metric-display { display: flex; justify-content: space-around; min-width: 0; }

.mobile .focus-metrics .variable { padding-left: 0px; }

.mobile .focus-metrics .variable .metric .label { font-size: 10px; }

.mobile .focus-metrics .variable .metric .focus-data { font-size: 13px; }

.mobile .focus-metrics .line-hydrograph .metric { width: 73px; }

.mobile .ffm-filters { display: block; }

.mobile .ffm-filters .filter-label { display: none; }

.mobile .ffm-filters .filter-options { width: 100% !important; }

.mobile .ffm-table thead th .mobile-text { display: block; }

.mobile .ffm-table thead th .desktop-text { display: none; }

.mobile .ffm-table th:nth-child(3), .mobile .ffm-table td:nth-child(3) { display: none; }

.mobile .ffm-table tbody td .val { padding-right: 2px; }

.mobile .popup-footer .chart-type-tabs { width: 100%; justify-content: space-around; }

.mobile .popup-footer .chart-type-tabs .action-button { padding-left: 0px; }

html, body, #mapArea { height: 100%; width: 100%; margin: 0; padding: 0; }

body { font: 100% "Inter", sans-serif; color: #000000; background-color: #EFEFEF; }

a:focus, button:focus, input:focus, textarea:focus, li:focus, h2:focus, div:focus, .esri-view .esri-view-surface--inset-outline:focus::after { outline: none; }

.esri-component:not(.esri-attribution):not(.esri-spinner):not(.esri-popup--is-docked) { font-family: "Inter", sans-serif !important; box-shadow: 0 1px 70px rgba(0, 0, 0, 0.15) !important; border: 1px solid rgba(50, 50, 50, 0.25); color: #000000 !important; }

.esri-component:not(.esri-attribution):not(.esri-spinner):not(.esri-popup--is-docked) h2, .esri-component:not(.esri-attribution):not(.esri-spinner):not(.esri-popup--is-docked) p { font-family: "Inter", sans-serif !important; }

.esri-component:not(.esri-attribution):not(.esri-spinner):not(.esri-popup--is-docked) .esri-icon { color: #000000 !important; }

.esri-component:not(.esri-attribution):not(.esri-spinner):not(.esri-popup--is-docked) .esri-widget__heading { color: #000000; }

.esri-component:not(.esri-attribution):not(.esri-spinner):not(.esri-popup--is-docked) .esri-widget--button { color: #a9a9b1; }

.esri-component:not(.esri-attribution):not(.esri-spinner):not(.esri-popup--is-docked) .esri-widget--button:hover { color: #000000; }

.esri-widget { font-family: "Inter", sans-serif !important; color: #000000 !important; background-color: #F8F9FA; }

.esri-widget .esri-widget--button, .esri-widget .esri-input { background-color: #F8F9FA; }

[class*="esri-icon-"] { font-weight: bold !important; }

.calcite-panels { background-color: #F8F9FA !important; color: #000000 !important; }

.calcite-panels .panel-heading { background-color: #EFEFEF !important; }

.navbar-nav { flex-direction: inherit; }

.esri-attribution { background-color: rgba(0, 0, 0, 0); }

.esri-popup { z-index: 0 !important; }

.mobile .esri-popup { z-index: 10 !important; }

.esri-popup__pointer-direction { background-color: #F8F9FA !important; }

.esri-popup__header-title:hover, .esri-popup__button:hover { background: none; }

.map-sidebar { width: 500px; height: -webkit-calc(100vh - 50px); height: calc(100vh - 50px); right: -500px; min-height: 85vh; overflow-x: hidden; position: absolute; background-color: #FFFFFF; border-left: 1px solid rgba(50, 50, 50, 0.25); -webkit-transition: right 0.35s ease; -moz-transition: right 0.35s ease; -ms-transition: right 0.35s ease; -o-transition: right 0.35s ease; transition: right 0.35s ease; box-shadow: 0 1px 70px rgba(0, 0, 0, 0.15); }

.map-sidebar .panel-body { padding: 0px 20px 20px 20px; position: relative; height: -webkit-calc(100vh - 50px - 50px); height: calc(100vh - 50px - 50px); }

.map-sidebar.revealed { right: 0; }

.map-sidebar .selection-mode-tabs { display: flex; }

.map-sidebar .selection-mode-tabs .tab { width: 250px; padding: 15px; text-align: center; font-size: 14px; cursor: pointer; height: 50px; }

.map-sidebar .selection-mode-tabs .tab:not(.selected) { background-color: #EFEFEF; color: #a9a9b1; }

.map-sidebar .selection-mode-tabs .tab:not(.selected):hover { background-color: #F8F9FA; color: #0056D6; }

.map-sidebar #streamQueue { margin-top: 20px; display: none; }

.map-sidebar #streamQueue.revealed { display: block; }

.map-sidebar #streamQueue .form-section-label { font-size: 18px; font-weight: 600; margin-top: 10px; display: inline; }

.map-sidebar #streamQueue #clearQueue { float: right; }

.map-sidebar #streamQueue #listContainer { margin-top: 12px; margin-bottom: 12px; border: 1px solid #000000; height: 180px; overflow-y: scroll; position: relative; display: flex; align-items: center; }

.map-sidebar #streamQueue #listContainer ul { list-style-type: none; padding: 0px; top: 0; background-color: #F8F9FA; width: 100%; position: absolute; z-index: 5; }

.map-sidebar #streamQueue #listContainer ul li { list-style-type: none; border: 1px solid; border-left: 4px solid #a9a9b1; border-right: 0px; padding: 6px 10px; margin-bottom: -1px; position: relative; }

.map-sidebar #streamQueue #listContainer ul li:nth-child(1) { margin-top: -1px; }

.map-sidebar #streamQueue #listContainer ul li .comid { font-size: 16px; font-weight: 700; display: inline; }

.map-sidebar #streamQueue #listContainer ul li .segment-name { font-size: 14px; color: #5F6368; font-weight: 300; font-style: italic; display: inline; position: absolute; top: 8px; margin-left: 16px; }

.map-sidebar #streamQueue #listContainer ul li .esri-icon-close { padding-top: 3px; padding-left: 10px; color: #5F6368; float: right; cursor: pointer; }

.map-sidebar #streamQueue #listContainer ul li .esri-icon-close:hover { color: #000000; }

.map-sidebar #streamQueue #listContainer ul li:hover { border-left-color: #0056D6; background-color: #fff; }

.map-sidebar #huSelector { display: none; width: 370px; margin: 20px auto; }

.map-sidebar #huSelector.revealed { display: flex; }

.map-sidebar #huSelector .button-container { width: 100%; display: flex; justify-content: center; }

.map-sidebar #huSelector button { position: relative; font-size: 16px; color: #a9a9b1; border: none; padding: 0px; padding-bottom: 6px; border-radius: 0px; background: none; }

.map-sidebar #huSelector button.selected, .map-sidebar #huSelector button:hover { color: #000000; }

.map-sidebar #huSelector .selected:before { content: ""; position: absolute; left: 20%; bottom: 0; height: 1px; width: 60%; border-bottom: 1px solid #000000; }

.map-sidebar #huInfo { text-align: center; margin-left: auto; margin-right: auto; width: 330px; display: none; }

.map-sidebar #huInfo.revealed { display: block; }

.map-sidebar #huInfo #huLabel { color: #a9a9b1; font-weight: 100; margin-top: 40px; margin-bottom: 0px; }

.map-sidebar #huInfo #huName { font-size: 30px; font-weight: 500; font-family: "Inter", sans-serif; margin-top: 6px; margin-bottom: 0px; }

.map-sidebar #huInfo #huData { font-size: 16px; list-style-type: none; margin-left: 0px; margin-top: 15px; margin-bottom: 45px; padding: 0; font-weight: 300; color: #5F6368; }

.map-sidebar #huInfo #huData .label { font-weight: 500; color: #000000; }

.map-sidebar .selection-instructions { color: #a9a9b1; font-style: italic; font-size: 16px; text-align: center; width: 250px; margin-right: auto; margin-left: auto; margin-bottom: 0px; opacity: 0.6; }

.map-sidebar .selection-instructions.hidden { opacity: 0; }

.map-sidebar #huSelectionInstructions { margin-top: 6px; }

.map-sidebar .form-section { border-top: 1px solid #000000; display: flex; align-items: center; }

.map-sidebar .form-section .form-section-label { font-size: 18px; font-weight: 600; margin-top: 12px; margin-bottom: 12px; width: 120px; }

.map-sidebar .form-section .options label { font-size: 14px; font-weight: 400; color: #000000; margin-bottom: 0px; }

.map-sidebar .form-section #statisticsCheckboxes, .map-sidebar .form-section #variablesCheckboxes { flex-grow: 1; display: flex; justify-content: space-between; }

.map-sidebar .form-section #yearsInputs .year-picker { display: inline; }

.map-sidebar .form-section #yearsInputs .year-picker:nth-child(2) { padding-left: 20px; }

.map-sidebar .form-section #yearsInputs .year-picker input { border: none; color: #0056D6; background-color: #F8F9FA; border-radius: 2px; font-size: 14px; padding: 2px 5px; width: 60px; }

.map-sidebar .form-section #yearsInputs label { padding-right: 10px; }

.map-sidebar .form-section #monthsCheckboxes { height: 120px; display: flex; flex-direction: column; flex-wrap: wrap; }

.map-sidebar #buttons { border: none; text-align: center; min-height: 65px; display: flex; justify-content: space-evenly; align-items: center; }

.map-sidebar #buttons .download-button { font-size: 14px; font-weight: 400; padding: 6px 12px 6px 22px; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; display: flex; align-items: center; }

.map-sidebar #buttons .download-button .icon { font-size: 14px !important; }

.map-sidebar #buttons .download-button .button-text { margin: 0px 10px; }

.checkbox-container { font-weight: 400; display: block; position: relative; padding-left: 25px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a accent color */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.checkbox-container input { position: absolute; opacity: 0; cursor: pointer; }

.checkbox-container .checkmark { position: absolute; top: 2px; left: 0; height: 14px; width: 14px; border-radius: 2px; border: 1px solid #5F6368; /* Create the checkmark/indicator (hidden when not checked) */ }

.checkbox-container .checkmark:after { content: ""; position: absolute; display: none; }

.checkbox-container:hover input ~ .checkmark { background-color: #F8F9FA; }

.checkbox-container input:checked ~ .checkmark:after { display: block; }

.checkbox-container .checkmark:after { left: 4px; width: 5px; height: 10px; border: solid #0056D6; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.mobile .map-sidebar { display: none; right: -500px !important; }

span.internal-link, a { color: #0056D6; text-decoration: none; cursor: pointer; overflow-wrap: break-word; }

span.internal-link:hover, a:hover { color: #000000; text-decoration: none; }

.header-section, .body-section, .footer-section { padding: 60px 0px; }

.header-section .container, .body-section .container, .footer-section .container { padding-right: 30px; padding-left: 30px; }

.header-section { position: relative; z-index: 10; }

.header-section .header-content h1 { font-size: 48px; font-weight: 200; margin-bottom: 25px; }

.header-section .header-content p { font-size: 18px; margin-bottom: 25px; line-height: 26px; }

.header-section .header-content button { background-color: #0056D6; border-color: #0056D6; color: #FFFFFF; }

.header-section .header-content button:hover { color: #0056D6; background-color: #FFFFFF; }

.body-section { background-color: #FFFFFF; }

.body-section .section { margin-bottom: 50px; }

.body-section h2 { font-weight: 500; margin-bottom: 30px; }

.body-section h3 { margin-bottom: 20px; }

.body-section p, .body-section ul { font-size: 16px; color: #5F6368; margin-bottom: 25px; line-height: 24px; }

.body-section .teaser { padding-left: 0px; padding-right: 20px; padding-bottom: 30px; }

.body-section .teaser .thumbnail img { max-width: 100%; padding-bottom: 16px; }

.footer-section { background-color: #F8F9FA; padding-bottom: 0px; }

.footer-section p { color: #000000; }

.footer-section .row { margin-bottom: 40px; }

.footer-section .rec-citation { text-align: center; }

.footer-section .rec-citation h3 { margin-bottom: 20px; }

.footer-section .rec-citation p { font-size: 12px; color: #5F6368; }

.footer-section .partner-logos { align-items: center; }

.footer-section .partner-logos a { padding: 0px 30px; display: inherit; vertical-align: middle; }

.footer-section .partner-logos a svg { max-width: 140px; }

.footer-section .partner-logos a svg path, .footer-section .partner-logos a svg polygon, .footer-section .partner-logos a svg polyline { fill: #000000; }

.footer-section .partner-logos a:hover svg path, .footer-section .partner-logos a:hover svg polygon, .footer-section .partner-logos a:hover svg polyline { fill: #5F6368; }

.footer-section .copyright { margin-top: 25px; font-size: 12px; }

.footer-section .copyright span.internal-link, .footer-section .copyright a { color: #000000; }

.footer-section .copyright span.internal-link:hover, .footer-section .copyright a:hover { color: #0056D6; }

a.button-link { text-decoration: none; border: 2px solid #0056D6; color: #0056D6; background-color: #ffffff; border-radius: 3px; font-size: 18px; font-weight: 300; padding: 7px 16px 5px 16px; }

a.button-link.disabled { border-color: #a9a9b1; color: #a9a9b1; }

a.button-link:hover:not([disabled]) { color: #FFFFFF; background-color: #0056D6; }

button { border: 2px solid #0056D6; color: #0056D6; background-color: #ffffff; border-radius: 3px; font-size: 18px; font-weight: 300; padding: 7px 16px 5px 16px; }

button.disabled { border-color: #a9a9b1; color: #a9a9b1; }

button:hover:not([disabled]) { color: #FFFFFF; background-color: #0056D6; }

button.pill { border: 1px solid #000000; background: none; font-size: 12px; color: #000000; font-weight: bold; padding: 4px 10px 4px 14px; border-radius: 20px; display: flex; justify-content: flex-start; align-items: center; }

button.pill .icon { font-size: 10px !important; }

button.pill .button-text { margin: 0px 5px; }

button.pill:hover:not([disabled]) { background-color: #000000; color: #F8F9FA; }

button.pill:hover:not([disabled]) .button-text, button.pill:hover:not([disabled]) .icon { color: #F8F9FA; }

.ffm-table-header { font-size: 18px; font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid #a9a9b1; }

.ffm-table-header .component-name { padding-bottom: 10px; border-bottom: 1px solid #000000; }

.ffm-component-desc { padding-top: 12px; font-size: 16px; color: #5F6368; font-weight: 400; }

.ffm-definitions-table { width: 100%; font-size: 16px; border-collapse: collapse; margin: 20px 0px 50px 0px; border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }

.ffm-definitions-table .header-characteristic { width: 18%; }

.ffm-definitions-table .header-metric { width: 16%; }

.ffm-definitions-table .header-metric-code { width: 16%; }

.ffm-definitions-table thead tr { background-color: #000000; color: #ffffff; text-align: left; }

.ffm-definitions-table thead tr th { font-weight: 500; }

.ffm-definitions-table th, .ffm-definitions-table td { padding: 12px 15px; }

.ffm-definitions-table tbody tr:not(:last-child) { border-bottom: 1px solid #dddddd; }

.ffm-definitions-table tbody th { font-weight: 400; }

.faq-view .section { align-items: center; margin-bottom: 60px; }

.faq-view .visual video, .faq-view .visual img { max-width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }

.mobile .header-section { padding: 20px 0px; }

.mobile .header-section .header-content h1 { font-size: 40px; }

.mobile .ffm-definitions-table td:nth-child(1), .mobile .ffm-definitions-table th:nth-child(1) { display: none; }

.widget-button { padding: 8px; font-size: 14px; color: #5F6368; background-color: #FFFFFF; }

.widget-button:hover { cursor: pointer; color: #000000; background-color: #F8F9FA; }

.legend-expander { position: relative; }

.legend-header { height: 30px; background-color: #F8F9FA; position: absolute; right: -1px; top: -1px; }

.legend-header .widget-button { border-top: 1px solid rgba(50, 50, 50, 0.25); border-right: 1px solid rgba(50, 50, 50, 0.25); }

.legend-header .widget-button[data-toggle="open"] { border: 1px solid rgba(50, 50, 50, 0.25); }

#locate { display: none; width: 32px; height: 32px; }

#locate .esri-icon { padding-top: 1px; padding-left: 1px; }

#search .esri-search__sources-button { display: flex; }

#search .esri-search__submit-button { border: none; }

.hint { box-shadow: none !important; border: none !important; margin-right: 0px !important; margin-bottom: 5px; background: #FFFFFF; border-radius: 3px; padding: 10px; display: flex; align-items: center; }

.hint .widget-button { font-size: 12px; }

.hint .text { margin-left: 5px; }

.mobile #collapseSidebar { display: none; }

.mobile #locate { display: block; }

/*# sourceMappingURL=main.css.map */