@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700|Source+Sans+Pro:400,400i,700,700i);
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/*html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*/

html {
    --baseColor:         #1c1d1f;
    --dkGrayColor:       #3d4551;
    --grayColor:         #8d9297;
    --ltGrayColor:       #c6cace;
    --lterGrayColor:     #dcdee0;
    --ltestGrayColor:    #f1f3f6;
    --whiteColor:        #ffffff;
    --ltBlueColor:       #2491ff;
    --blueColor:         #0076d6;
    --dkBlueColor:       #0050d8;
    --dkestBlueColor:    #162e51;
    --ltAccentBlueColor: #a8f2ff;
    --accentBlueColor:   #52daf2;
    --dkAccentBlueColor: #00bde3;
    --infoColor:         #29e1cb;
    --errorColor:        #e41d3d;
    --warningColor:      #face00;
    --successColor:      #21c834;

    --red: var(--errorColor);
}

a.skip-to-main {
    position:  absolute !important;
    overflow:  hidden;
    clip:      rect(1px, 1px, 1px, 1px);
    width:     1px;
    height:    1px;
    word-wrap: normal;
}
a.skip-to-main:focus,
a.skip-to-main:active {
    position:        static !important;
    overflow:        visible;
    clip:            auto;
    width:           auto;
    height:          auto;
    outline:         none;
    text-decoration: none;
}

.print { display: none !important; }

/* Header/Footer CSS */
/*********************/
.ncei-header-footer-container {
    font-family:      "Source Sans Pro", sans-serif;
    font-size:        16px;
    background-color: #112e51;
    padding:          12px;
}

.ncei-header-footer {
    max-width:  1140px;
    text-align: center;
    margin:     auto;
}

.product-name {
    padding:     10px 20px;
    border-left: 1px solid;
    display:     inline-block;
    margin-left: 4px;
}

.product-name h1 {
    font-family: "Merriweather",serif;
    font-size:   22px;
    margin:      0;
    line-height: 33px;
    font-weight: 400;
    max-height:  60px;
  
}

.product-button {
    display:          inline-block;
    border:           1px solid white;
    background-color: rgba(0, 0, 0, 0)!important;
    font-family:      "Source Sans Pro",sans-serif;
    font-size:        18px;
    line-height:      18px;
    font-weight:      400;
    font-style:       normal;
    color:            white;
    padding:          10px 20px;
    border-radius:    8px;
    margin-top:       4px;
    margin-left:      15%;
}

.ncei-header-footer-container p.ncei-header-footer-title {
    font-family: "Merriweather",serif;
    font-size:   16px;
    font-weight: 400;
}
.ncei-header-footer-inner {
    padding:    15px;
    text-align: left;
    color:      white;
}
.ncei-app-inner {
    padding:    0px 15px;
    text-align: left;
    color:      white;
}
.ncei-header-footer-inner li {
    height: 28px;
}
.ncei-header-footer-inner a {
    color:           #9bdaf1;
    text-decoration: none;
    height:          28px;
}
.ncei-header-footer-inner a:hover {
    color: #e1f3f8;
}
.ncei-header-footer-inner ul {
    list-style-type:      none;
    padding-inline-start: 0px;
}

.ncei-header-logo img {
    width:  300px;
    height: 60px;
}

.app-container {
    background-color: var(--blueColor);
    padding:          6px 12px;
}

ol.app-breadcrumbs {
    font-family:      "Source Sans Pro",sans-serif;
    font-size:        14px;
    line-height:      1em;
    font-weight:      400;
    font-style:       normal;
    text-align:       left;
    color:            white;
    display:          flex;
    flex-wrap:        wrap;
    list-style:       none;
    background-color: transparent!important;
    border-radius:    0;
    margin:           0.75rem 0 !important;
    padding:          0 !important;
}
ol.app-breadcrumbs a {
    text-decoration: none;
    color:           var(--whiteColor);
}
ol.app-breadcrumbs a:visited {
    color: white;
}
.app-breadcrumb-item+.app-breadcrumb-item {
    padding-left: .5rem;
}
.app-breadcrumb-item+.app-breadcrumb-item::before {
    display:       inline-block;
    padding-right: .5rem;
    color:         white;
    content:       "/";
}

.ncei-footer-half-width {
    width:          49%;
    display:        inline-block;
    vertical-align: top;
}
.ncei-footer-third-width {
    width:          33%;
    display:        inline-block;
    vertical-align: top;
}
.ncei-footer-two-thirds-width {
    width:          66%;
    display:        inline-block;
    vertical-align: top;
}
.ncei-footer-quarter-width {
    width:          24%;
    display:        inline-block;
    vertical-align: top;
}
.ncei-footer-quarter-width img {
    width:          auto;
    height:         18px;
    vertical-align: text-bottom;
    margin-left:    4px;
}
.ncei-footer-half-width img {
    width:  300px;
    height: 60px;
}

/* ++ Header Search Box ++ */
#search-monitoring-div { height: 100%; vertical-align: bottom; }

#search-monitoring { text-align: left; min-width: 220px;; }
/* comment this out to fix the placeholder opacity in Firefox
::-moz-placeholder { opacity: 1; }*/
::-webkit-input-placeholder,
:-moz-placeholder,       /* Firefox 18- */
::-moz-placeholder,      /* Firefox 19+ */
:-ms-input-placeholder,  /* IE 10+ */
::-ms-input-placeholder, /* Edge */
:placeholder-shown      /* Standard (last) */
{ color: #72777d; font-style: italic !important; }

#monitoring-search-icon {
    padding:  0.5rem 0 0.75rem;
    position: relative;
}
#monitoring-search-icon::after {
    color:             #72777d;
    content:           "\26b2";
    position:          absolute;
    font-size:         28px;
    padding-right:     0.2rem;
    margin-right:      0.2rem;
    right:             0;
    top:               0;
    display:           inline-block;
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
}

#search-monitoring .ui-autocomplete {
    z-index:    1000000;
    max-height: 300px !important;
    max-width:  295px !important;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 75%;
}


.ui-menu-item { border-bottom: solid 1px var(--dkGrayColor); }
.ui-menu-item a { text-decoration: none; }
.ui-state-hover, .ui-state-active {
    color:            var(--whiteColor) !important;
    background-color: var(--blueColor) !important;
    background-image: none !important;
}

.ui-menu-item .monitoring-product-name {
    font-size:        22px;
    line-height:      24px;
    color:            var(--blueColor);
    background-color: transparent;
    margin:           7px 5px;
}
.ui-menu-item .monitoring-product-description {
    font-size:        18px;
    line-height:      20px;
    color:            var(--grayColor);
    background-color: transparent;
    margin:           0 5px 7px 5px;
}

.ui-state-hover .monitoring-product-name,
.ui-state-active .monitoring-product-name { color: var(--whiteColor); }
.ui-state-hover .monitoring-product-description,
.ui-state-active .monitoring-product-description { color: var(--ltestGrayColor); }
/* -- Header Search Box -- */

@media only screen and (min-width: 992px){
    #search-monitoring-div { text-align: right; }
    #search-monitoring { width: 75%; }
}

@media only screen and (max-width: 991px){
    .ncei-footer-half-width, .ncei-footer-third-width, .ncei-footer-two-thirds-width, .ncei-footer-quarter-width, .ncei-header-logo {
        width:      100%;
        display:    block;
        text-align: center;
    }
    .product-name, .product-button {
        padding: 10px;
        margin:  8px auto;
    }

    #next-release { text-align: left !important; }

    .product-name { border: none !important; }

    #search-monitoring-div { text-align: center; }
    #search-monitoring { width: 300px; }
}

#next-release { text-align: right; white-space: nowrap; }
#next-release a {
    text-decoration: none;
    color:           var(--whiteColor);
    font-family:     "Source Sans Pro",sans-serif;
    font-size:       14px;
    line-height:     1em;
    font-weight:     400;
    font-style:      normal;
}
/*********************/
/* Header/Footer CSS */

/* General */
/***********/
body {
    font-family: "Source Sans Pro",sans-serif;
    font-size:   20px;
    line-height: 150%;
    font-weight: 400;
    font-style:  normal;
    color:       var(--baseColor);
}

a { color: var(--dkBlueColor); }
a.td-none { text-decoration: none; }
.base-bg a,
.dk-gray-bg a { color: #9bdaf1 !important; }

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { margin: 0.67em auto; }
h1,.h1  { font-family: "Merriweather",serif;         font-weight:    700; font-style: normal; font-size: 52px; }
h2,.h2  { font-family: "Merriweather",serif;         font-weight: normal; font-style: normal; font-size: 36px; }
h3,.h3  { font-family: "Merriweather",serif;         font-weight: normal; font-style: normal; font-size: 30px; }
h4,.h4  { font-family: "Source Sans Pro",sans-serif; font-weight: normal; font-style: normal; font-size: 26px; }
p       { font-family: "Source Sans Pro",sans-serif; font-weight: normal; font-style: normal; font-size: 20px; line-height: 150%; margin: 0.5rem auto; padding-bottom: 1.25em; }
.caption,
caption { font-family: "Source Sans Pro",sans-serif; font-weight: normal; font-style: italic; font-size: 20px/*16px*/; caption-side: top !important; }
label   { font-family: "Source Sans Pro",sans-serif; font-weight:    500; font-style: normal; font-size: 20px; }

.pre,
pre * { font-family: var(--bs-font-monospace) !important; }

.bold { font-weight: bold; }
.italic { font-style: italic; }
.normal-font-style { font-style: normal; }
.normal-font-weight { font-weight: normal; }
.underline { border: 0; text-decoration: underline; }
.overline { border: 0; text-decoration: overline; }

.rounded-corners { border-radius: 5px; }
.top-rounded-corners { border-radius: 5px 5px 0 0; }
.bottom-rounded-corners { border-radius: 0 0 5px 5px; }

.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
.sr-only,.hidden { display: none !important; }

.flex,
.flex-wrap,
.flex-wrap-reverse { display: flex; list-style: none; margin: 0 !important; padding: 0 !important; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex > *,
.flex-wrap > * { flex: 1; margin: 0 !important; padding: 0.5rem 2rem !important; }

.relative,
.position-relative { position: relative; }
.absolute,
.position-absolute { position: absolute; }

.text-right,
.right             { text-align: right !important; }
.text-left,
.left              { text-align: left !important; }
.text-center,
.center            { text-align: center !important; }
.text-justify,
.justify           { text-align: justify !important; }
.indent            { margin-left: 1em !important; }
.small             { font-size: 80% !important; line-height: normal; }
.big               { font-size: 120% !important; }
.normalWeight      { font-weight: normal !important; }
.wrap              { white-space: normal !important; }
.nowrap            { white-space: nowrap !important; }
.pad               { padding:        1rem !important; }
.padTop            { padding-top:    1rem !important; }
.padBottom         { padding-bottom: 1rem !important; }
.padLeft           { padding-left:   1rem !important; }
.padRight          { padding-right:  1rem !important; }
.smallPad          { padding:        0.5em !important; }
.smallPadTop       { padding-top:    0.5em !important; }
.smallPadBottom    { padding-bottom: 0.5em !important; }
.smallPadLeft      { padding-left:   0.5em !important; }
.smallPadRight     { padding-right:  0.5em !important; }
.bigPad            { padding:        2em !important; }
.bigPadTop         { padding-top:    2em !important; }
.bigPadBottom      { padding-bottom: 2em !important; }
.bigPadLeft        { padding-left:   2em !important; }
.bigPadRight       { padding-right:  2em !important; }
.pad0,
.pad-zero          { padding: 0; }
.margin            { margin:        1em !important; }
.marginTop         { margin-top:    1em !important; }
.marginBottom      { margin-bottom: 1em !important; }
.marginLeft        { margin-left:   1em !important; }
.marginRight       { margin-right:  1em !important; }
.smallMargin       { margin:        0.5em !important; }
.smallMarginTop    { margin-top:    0.5em !important; }
.smallMarginBottom { margin-bottom: 0.5em !important; }
.smallMarginLeft   { margin-left:   0.5em !important; }
.smallMarginRight  { margin-right:  0.5em !important; }
.bigMargin         { margin:        2em !important; }
.bigMarginTop      { margin-top:    2em !important; }
.bigMarginBottom   { margin-bottom: 2em !important; }
.bigMarginLeft     { margin-left:   2em !important; }
.bigMarginRight    { margin-right:  2em !important; }
.margin0,
.margin-zero       { margin: 0; }
.marginAuto        { margin: auto; }
.floatRight        { float: right !important; }
.floatLeft         { float: left !important; }
:not(hr).clear     { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
hr.clear           { clear: both; }
.vertical-align-top    { vertical-align: top; }
.vertical-align-bottom { vertical-align: bottom; }

.base-txt           { color: var(--baseColor)         !important; }
.dk-gray-txt        { color: var(--dkGrayColor)       !important; }
.gray-txt           { color: var(--grayColor)         !important; }
.lt-gray-txt        { color: var(--ltGrayColor)       !important; }
.lter-gray-txt      { color: var(--lterGrayColor)     !important; }
.ltest-gray-txt     { color: var(--ltestGrayColor)    !important; }
.white-txt          { color: var(--whiteColor)        !important; }
.lt-blue-txt        { color: var(--ltBlueColor)       !important; }
.blue-txt           { color: var(--blueColor)         !important; }
.dk-blue-txt        { color: var(--dkBlueColor)       !important; }
.dkest-blue-txt     { color: var(--dkestBlueColor)    !important; }
.lt-accent-blue-txt { color: var(--ltAccentBlueColor) !important; }
.accent-blue-txt    { color: var(--accentBlueColor)   !important; }
.dk-accent-blue-txt { color: var(--dkAccentBlueColor) !important; }
.info-txt           { color: var(--infoColor)         !important; }
.red,
.red-txt,
.error-txt          { color: var(--errorColor)        !important; }
.warning-txt        { color: var(--warningColor)      !important; }
.success-txt        { color: var(--successColor)      !important; }

.base-bg           { background-color: var(--baseColor)         !important; }
.dk-gray-bg        { background-color: var(--dkGrayColor)       !important; }
.gray-bg           { background-color: var(--grayColor)         !important; }
.lt-gray-bg        { background-color: var(--ltGrayColor)       !important; }
.lter-gray-bg      { background-color: var(--lterGrayColor)     !important; }
.ltest-gray-bg     { background-color: var(--ltestGrayColor)    !important; }
.white-bg          { background-color: var(--whiteColor)        !important; }
.lt-blue-bg        { background-color: var(--ltBlueColor)       !important; }
.blue-bg           { background-color: var(--blueColor)         !important; }
.dk-blue-bg        { background-color: var(--dkBlueColor)       !important; }
.dkest-blue-bg     { background-color: var(--dkestBlueColor)    !important; }
.lt-accent-blue-bg { background-color: var(--ltAccentBlueColor) !important; }
.accent-blue-bg    { background-color: var(--accentBlueColor)   !important; }
.dk-accent-blue-bg { background-color: var(--dkAccentBlueColor) !important; }
.info-bg           { background-color: var(--infoColor)         !important; }
.red-bg,
.error-bg          { background-color: var(--errorColor)        !important; }
.warning-bg        { background-color: var(--warningColor)      !important; }
.success-bg        { background-color: var(--successColor)      !important; }

.base-border           { border: solid 1px var(--baseColor)         !important; }
.dk-gray-border        { border: solid 1px var(--dkGrayColor)       !important; }
.gray-border           { border: solid 1px var(--grayColor)         !important; }
.lt-gray-border        { border: solid 1px var(--ltGrayColor)       !important; }
.lter-gray-border      { border: solid 1px var(--lterGrayColor)     !important; }
.ltest-gray-border     { border: solid 1px var(--ltestGrayColor)    !important; }
.white-border          { border: solid 1px var(--whiteColor)        !important; }
.lt-blue-border        { border: solid 1px var(--ltBlueColor)       !important; }
.blue-border           { border: solid 1px var(--blueColor)         !important; }
.dk-blue-border        { border: solid 1px var(--dkBlueColor)       !important; }
.dkest-blue-border     { border: solid 1px var(--dkestBlueColor)    !important; }
.lt-accent-blue-border { border: solid 1px var(--ltAccentBlueColor) !important; }
.accent-blue-border    { border: solid 1px var(--accentBlueColor)   !important; }
.dk-accent-blue-border { border: solid 1px var(--dkAccentBlueColor) !important; }
.info-border           { border: solid 1px var(--infoColor)         !important; }
.red-border,
.error-border          { border: solid 1px var(--errorColor)        !important; }
.warning-border        { border: solid 1px var(--warningColor)      !important; }
.success-border        { border: solid 1px var(--successColor)      !important; }

.container {
    width:         100%;
    padding-right: 15px;
    padding-left:  15px;
    margin-right:  auto;
    margin-left:   auto;
}
@media (min-width:  576px) { .container { max-width:  540px; } }
@media (min-width:  768px) { .container { max-width:  720px; } }
@media (min-width:  992px) { .container { max-width:  960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
/***********/
/* General */

/* Loader Overlay */
/******************/
.loader-overlay {
    position:            absolute;
    width:               100%;
    height:              100%;
    z-index:             1002;
    color:               var(--whiteColor);
    background:          rgba(0,0,0,0.25);
    -webkit-text-stroke: 1px black;
    font-weight:         bold;
    font-size:           32px;
    line-height:         110%;
    text-align:          center;
}
.loader-overlay .noaa-loader {
    position:   absolute;
    top:        33%;
    left:       50%;
    transform:  translate(-50%,-50%);
    background: radial-gradient(circle, var(--whiteColor) 0, var(--whiteColor) 20px, transparent 20px, transparent 100%);
}
/******************/
/* Loader Overlay */

/* Back To Top */
/***************/
#backToTop {
    display:          none;
    position:         fixed;
    right:            24px;
    bottom:           22px;
    cursor:           pointer;
    width:            68px;
    height:           68px;
    background-color: rgba(0,0,0,0.5);
    text-indent:      -9999px;
    border-radius:    80px; -webkit-border-radius: 80px; -moz-border-radius: 80px;
    z-index:          1002;
    transition:       bottom           0.25s ease,
                      background-color 0.25s ease;
}

#backToTop span {
    position:     absolute;
    top:          50%;
    left:         50%;
    margin-left:  -11px;
    margin-top:   -5px;
    height:       0;
    width:        0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.7);
    border-width: 0 1px 1px 0;
    display:      inline-block;
    padding:      .5em;
    transform:    rotate(-135deg); -webkit-transform: rotate(-135deg);
    transition:   border-color 0.25s ease;
}

#backToTop:hover {
    background-color: rgba(0,0,0,0.7);
    opacity:          1;
    filter:           "alpha(opacity=100)";
    -ms-filter:       "alpha(opacity=100)";
    bottom:           26px;
}

#backToTop:hover span {
    border-color: rgba(255, 255, 255, 0.7);
}
/***************/
/* Back To Top */
 
/* Responsive Arrows */
/*********************/
[class^=arr-]{
    border:       solid currentColor;
    border-width: 0 .2em .2em 0;
    display:      inline-block;
    padding:      .20em;
}
.arr-right { transform:rotate(-45deg);  -webkit-transform:rotate(-45deg); }
.arr-left  { transform:rotate(135deg);  -webkit-transform:rotate(135deg); }
.arr-up    { transform:rotate(-135deg); -webkit-transform:rotate(-135deg); }
.arr-down  { transform:rotate(45deg);   -webkit-transform:rotate(45deg); }
/*********************/
/* Responsive Arrows */

/* Circle */
/**********/
.circle {
    display:       inline-block;
    width:         0.75em;
    height:        0.75em;
    border-radius: 50%;
}
/**********/
/* Circle */

/* Tabs */
/********/
.tabs {
    display:         flex;
    justify-content: flex-start;
    align-items:     flex-end;
    flex-wrap:       wrap;
    list-style:      none;
    margin:          2rem 0 !important;
    padding:         0 !important;
    border-bottom:   1px solid var(--lterGrayColor);
}

.tabs > * {
    font-family:        "Source Sans Pro",sans-serif !important;
    flex:               1;
    display:            inline-block;
    color:              var(--baseColor);
    margin:             0 !important;
    padding:            0 !important;
    text-align:         center;
    position:           relative;
    cursor:             default;
    -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
         -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

.tabs > * span,
.tabs > * a {
    display:            block;
    padding:            0.75rem !important;
    color:              var(--baseColor);
    text-decoration:    none;
    font-family:        "Source Sans Pro",sans-serif;
    -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
         -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

.tabs > *:not(.selected):hover a,
.tabs > *:not(.selected):hover { cursor: pointer; }

.tabs > *.selected,
.tabs > *.selected a,
.tabs > *:focus { color: var(--blueColor); }

.tabs > *:not(.selected):hover,
.tabs > *:not(.selected):hover a { color: var(--lterGrayColor); }

.tabs > *.selected::before,
.tabs > *:hover::before,
.tabs > *:focus::before,
.tabs > *::before {
    content:            "";
    position:           absolute;
    width:              100%;
    height:             8px;
    bottom:             0;
    left:               0;
    visibility:         hidden;
    -webkit-transform:  scaleX(0);
            transform:  scaleX(0);
    transform-origin:   left center;
    -webkit-transition: all 0.2s ease-in-out 0s;
       -moz-transition: all 0.2s ease-in-out 0s;
         -o-transition: all 0.2s ease-in-out 0s;
            transition: all 0.2s ease-in-out 0s;
}

.tabs > *.selected::before,
.tabs > *:focus::before/*,
.tabs > *::before*/ { background-color: var(--blueColor); }

.tabs > *:not(.selected):hover::before { background-color: var(--lterGrayColor); }

.tabs > *.selected::before,
.tabs > *:hover::before {
    visibility:        visible;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
}
/********/
/* Tabs */

/* Cards */
/*********/
.card {
    text-decoration:  none;
    color:            var(--baseColor);
    background-color: var(--whiteColor);
    border:           1px solid rgba(0,0,0,.125) !important;
    margin:           25px;
    padding:          14px;
    border-radius:    8px;
    vertical-align:   top;
    max-width:        305px;
    min-width:        250px;
    transition:       border             0.25s ease,
                      -webkit-box-shadow 0.25s ease,
                         -moz-box-shadow 0.25s ease,
                              box-shadow 0.25s ease;
}

/* useful when row of cards with varying heights */
/* put first item in card at top */
.card > *:first-of-type { vertical-align: top;    flex: 1 0 auto; }
/* put last item in card at bottom */
.card > *:last-of-type  { vertical-align: bottom; flex: 0 1 auto; }

.card.content-card { text-align: left; }
.card.product-card { text-align: center; }

.card:hover {
    color:        var(--baseColor);
    border-color: var(--whiteColor) !important;
    -webkit-box-shadow:
    0 0px 2.2px rgba(0, 0, 0, 0.02),
    0 0px 5.3px rgba(0, 0, 0, 0.028),
    0 0px 10px rgba(0, 0, 0, 0.035),
    0 0px 17.9px rgba(0, 0, 0, 0.042),
    0 0px 33.4px rgba(0, 0, 0, 0.05),
    0 0px 80px rgba(0, 0, 0, 0.07);
    -moz-box-shadow:
    0 0px 2.2px rgba(0, 0, 0, 0.02),
    0 0px 5.3px rgba(0, 0, 0, 0.028),
    0 0px 10px rgba(0, 0, 0, 0.035),
    0 0px 17.9px rgba(0, 0, 0, 0.042),
    0 0px 33.4px rgba(0, 0, 0, 0.05),
    0 0px 80px rgba(0, 0, 0, 0.07);
    box-shadow:
    0 0px 2.2px rgba(0, 0, 0, 0.02),
    0 0px 5.3px rgba(0, 0, 0, 0.028),
    0 0px 10px rgba(0, 0, 0, 0.035),
    0 0px 17.9px rgba(0, 0, 0, 0.042),
    0 0px 33.4px rgba(0, 0, 0, 0.05),
    0 0px 80px rgba(0, 0, 0, 0.07);
}

.card-title {
    font-family: "Merriweather";
    font-weight: normal;
    font-style:  normal;
    font-size:   21px;
    line-height: 125%;
}

.card-description {
    font-family: "Source Sans Pro";
    font-weight: normal;
    font-style:  normal;
    font-size:   17px;
    line-height: 125%;
}
/*********/
/* Cards */

/* Accordions */
/**************/
.accordian-actions { display: none; }
.accordion-header { margin: 0; }
/**************/
/* Accordions */

/*** Forms ***/
/*************/
input {
    padding:         4px;
    background-color:var(--whiteColor);
    line-height:     150%;
}

input[type="text"],
input[type="search"],
input[type="date"],
input[type="password"],
select,
textarea {
    background-color: var(--whiteColor);
    border:           1px solid var(--grayColor);
    border-radius:    3px;
}

input[type="radio"]:focus + label,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="date"].focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: var(--ltBlueColor) solid 3px !important;
}

input[type="text"].form-success,
input[type="search"].form-success,
input[type="date"].form-success,
input[type="password"].form-success,
select.form-success,
textarea.form-success {
    outline: var(--successColor) 3px solid;
}
.success-msg { font-weight: 600; font-size: 0.9em; color: var(--successColor); }

input[type="text"].form-error,
input[type="search"].form-error,
input[type="date"].form-error,
input[type="password"].form-error,
select.form-error,
textarea.form-error {
    outline: var(--errorColor) solid 3px !important;
}

input[type="date"].form-error-month::-webkit-datetime-edit-month-field,
input[type="date"].form-error-day::-webkit-datetime-edit-day-field,
input[type="date"].form-error-year::-webkit-datetime-edit-year-field,
input[type="date"].form-error-date::-webkit-datetime-edit-month-field,
input[type="date"].form-error-date::-webkit-datetime-edit-day-field,
input[type="date"].form-error-date::-webkit-datetime-edit-year-field { color: var(--errorColor); }

.error-msg { font-weight: 600; font-size: 0.9em; color: var(--errorColor); }

select { padding: 0.25em 0.5em; }

/* Checkboxes */
/**************/
.checkbox-label {
    display:             inline-block;
    position:            relative;
    padding-left:        35px;
    margin-bottom:       12px;
    font-size:           22px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.checkbox-label input {
    position: absolute;
    opacity:  0;
    height:   0;
    width:    0;
}

.checkmark {
    position:         absolute;
    top:              0;
    left:             0;
    height:           25px;
    width:            25px;
    background-color: var(--ltGrayColor);
    border-radius:    5px;
}

.checkbox-label:hover input:enabled ~ .checkmark,
.checkbox-label:hover input:enabled ~ .checkbox-label-text { cursor: pointer; }

.checkbox-label:hover input:enabled ~ .checkmark { background-color: var(--lterGrayColor); }
.checkbox-label input:enabled:checked ~ .checkmark { background-color: var(--blueColor); }

.checkbox-label input:disabled + .checkbox-label-text { color: var(--ltGrayColor); }
.checkbox-label input:disabled:checked ~ .checkmark { background-color: var(--ltGrayColor); }

.checkmark:after {
    position:    absolute;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 300;
    content:     "\2713";
    color:       var(--whiteColor);
    display:     none;
}

.checkbox-label input:checked ~ .checkmark:after { display: block; }
.checkbox-label .checkmark:after { left: 3px; top: -3px; }
/* Checkboxes */
/**************/

/* Radio Buttons */
/*****************/
 .radio-label {
    display:             inline-block;
    position:            relative;
    padding-left:        35px;
    margin-bottom:       12px;
    font-size:           22px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.radio-label input {
    position: absolute;
    opacity:  0;
    cursor:   pointer;
}

.radio-button {
    position:           absolute;
    top:                5px;
    left:               5px;
    height:             20px;
    width:              20px;
    border-radius:      50%;
    background-color:   var(--whiteColor);
    border:             1px solid var(--whiteColor);
    -webkit-box-shadow: 0 0 0 1px var(--grayColor);
       -moz-box-shadow: 0 0 0 1px var(--grayColor);
            box-shadow: 0 0 0 1px var(--grayColor);
}

.radio-label:hover input:enabled ~ .radio-button,
.radio-label:hover input:enabled ~ .radio-label-text { cursor: pointer; }

.radio-label:hover input:enabled ~ .radio-button { background-color: var(--lterGrayColor); }
.radio-label input:enabled:checked ~ .radio-button { background-color: var(--blueColor); }

.radio-label input:disabled + .radio-label-text { color: var(--ltGrayColor); }
.radio-label input:disabled:checked ~ .radio-button { background-color: var(--ltGrayColor); }
.radio-label input:disabled:not(:checked) ~ .radio-button { background-color: var(--lterGrayColor); }

.radio-label input:enabled:checked ~ .radio-button { background-color: var(--blueColor); -webkit-box-shadow: 0 0 0 1px var(--blueColor); -moz-box-shadow: 0 0 0 1px var(--blueColor); box-shadow: 0 0 0 1px var(--blueColor); }
.radio-label input:disabled:checked ~ .radio-button { background-color: var(--ltGrayColor); }
/* Radio Buttons */
/*****************/

/* Date Picker */
/***************/
.monitoring-datepicker {
    display:         flex;
    justify-content: flex-start;
    align-items:     flex-start;
    list-style:      none;
    margin:          2rem 0;
}

.monitoring-datepicker > * {
    flex :         0 1 auto;
    color:         var(--baseColor);
    font-size:     20px;
}

.monitoring-datepicker > * > input { border-radius: 0; }

.monitoring-datepicker > *:not(:last-of-type) { margin-right: 10px; }

.monitoring-datepicker > * label { font-size: 0.7em; }

.monitoring-datepicker > * input { text-align: center; }

.monitoring-datepicker-day input,
.monitoring-datepicker-month input { width: 40px; }
.monitoring-datepicker-year input { width: 60px; }
/***************/
/* Date Picker */

/*************/
/*** Forms ***/

/* Buttons */
/***********/
[type="submit"],
.btn {
    font-family:   "Source Sans Pro", sans-serif;
    border-radius: 8px;
    font-size:     18px;
    line-height:   20px;
    padding:       0.6rem 1em;
    text-align:    center;
    transition:    background-color   0.25s ease,
                   -webkit-box-shadow 0.25s ease,
                      -moz-box-shadow 0.25s ease,
                           box-shadow 0.25s ease;
}

.btn:not(.btn-primary):not(.btn-secondary):not(:disabled) {
    background-color: var(--ltGrayColor);
    color:            var(--baseColor);
    border:           2px solid var(--ltGrayColor);
}
.btn:not(.btn-primary):not(.btn-secondary):not(:disabled):hover {
    background-color:   var(--grayColor);
    color:              var(--baseColor);
    -webkit-box-shadow: 0px 4px 15px rgba(0,0,0,0.25);
       -moz-box-shadow: 0px 4px 15px rgba(0,0,0,0.25);
            box-shadow: 0px 4px 15px rgba(0,0,0,0.25);
}

[type="submit"]:not(:disabled),
/*.btn:not(.btn-secondary):not(:disabled),*/
.btn.btn-primary:not(:disabled) {
    background-color: var(--blueColor);
    color:            var(--whiteColor);
    border:           2px solid var(--blueColor);
}

[type="submit"]:not(:disabled):hover,
/*.btn:not(.btn-secondary):not(:disabled):hover,*/
.btn.btn-primary:not(:disabled):hover {
    background-color:   #0050ad;
    color:              var(--whiteColor);
    -webkit-box-shadow: 0px 4px 15px rgba(0,118,214,0.5);
       -moz-box-shadow: 0px 4px 15px rgba(0,118,214,0.5);
            box-shadow: 0px 4px 15px rgba(0,118,214,0.5);
}

.btn.btn-secondary {
    background-color: var(--whiteColor);
    color:            var(--accentBlueColor);
    border:           2px solid var(--accentBlueColor);
}

.btn.btn-secondary:not(:disabled):hover {
    background-color:   var(--accentBlueColor);
    color:              #112f4e;
    -webkit-box-shadow: 0px 4px 15px rgba(82,218,242,0.4);
       -moz-box-shadow: 0px 4px 15px rgba(82,218,242,0.4);
            box-shadow: 0px 4px 15px rgba(82,218,242,0.4);
}

[type="submit"]:focus,
.btn:focus {
    outline-style:  dotted !important;
    outline-color:  var(--dkestBlueColor) !important;
    outline-width:  3px !important;
    outline-offset: 1px !important;
}

[type="submit"]:disabled,
.btn:disabled {
    cursor:           default;
    background-color: var(--ltGrayColor);
    color:            var(--ltestGrayColor);
    border:           2px solid var(--ltGrayColor);
}
/***********/
/* Buttons */

/* Tables */
/**********/
table {
    width:            100%;
    background-color: var(--whiteColor);
    border:           0;
    margin:           1em auto;
}

table.bordered { border-collapse: collapse; }

th,td { padding: 10px 15px; border: 0; }

th {
    font-weight:    700;
    text-align:     left;
    line-height:    1.333em;
    vertical-align: middle;
}

td { vertical-align: top; }

table th,
table.shading th {
    background-color: var(--dkestBlueColor);
    color:            var(--whiteColor);
    border:           0;
}

table.shading tr:nth-child(2n) th[scope=row],
table:not(.shading):not(.borderless):not(.bordered) tr:nth-child(2n) th[scope=row] { background-color: #010204; }

table.bordered th,
table.bordered td { border: solid 1px var(--grayColor); }

table.borderless:not(.shading) tr,
table.borderless:not(.shading) th,
table.borderless:not(.shading) td { border-bottom: solid 1px var(--grayColor); background-color: var(--whiteColor); color: var(--baseColor); }

table.shading tr:nth-child(2n),
/* default */
table:not(.shading):not(.borderless):not(.bordered) tr:nth-child(2n) { background-color: var(--lterGrayColor); }

/* table links */
table a { text-decoration: none; color: var(--blueColor); }
table.shading tr:nth-child(2n) a,
table:not(.shading):not(.borderless):not(.bordered) tr:nth-child(2n) a { color: var(--dkBlueColor); }

table th a { text-decoration: none; color: #1898FF; }
table.shading tr:nth-child(2n) th a,
table:not(.shading):not(.borderless):not(.bordered) tr:nth-child(2n) th a { color: var(--blueColor); }

tfoot tr { background-color: var(--whiteColor) !important; }
/**********/
/* Tables */

/*/
/* Table Sorter */
/****************/
table.tablesorter thead th.tablesorter-header:not(.sorter-false) {
    cursor:              pointer;
    background-repeat:   no-repeat;
    background-position: center left;
    padding-left:        20px !important;
    margin-left:         -1px !important;
}

table.tablesorter thead th.tablesorter-headerUnSorted:not(.sorter-false) { background-image: url('/monitoring-content/lib/images/sort-lt.gif'); }
table.tablesorter thead th.tablesorter-headerAsc { background-image: url('/monitoring-content/lib/images/desc-lt.gif'); }
table.tablesorter thead th.tablesorter-headerDesc { background-image: url('/monitoring-content/lib/images/asc-lt.gif'); }

table.tablesorter tbody tr.even td {
    background: var(--lterGrayColor);
    color: var(--baseColor);
}
table.tablesorter tbody tr.odd td {
    background: var(--whiteColor);
    color: var(--baseColor);
}
/****************/
/* Table Sorter */

/* Alerts */
/**********/
.alert {
    font-family:       "Source Sans Pro", sans-serif;
    font-weight:       400;
    line-height:       1.33rem;
    background-repeat: no-repeat;
    border-style:      solid;
    border-width:      0 0 0 20px;
    margin:            0 !important;
    border-radius:     0;
}

.alert.info    {
    color:               var(--baseColor);
    padding:             20px 10px 20px 50px;
    border-color:        var(--infoColor);
    background-color:    rgba( 41, 225, 203, 0.33);
    background-image:    url(/monitoring-content/lib/images/ncei/info.svg);
    background-size:     31px 31px !important;
    background-position: 10px 50% !important;
}
.alert.success {
    color:               var(--baseColor);
    padding:             15px 10px 15px 50px;
    border-color:        var(--successColor);
    background-color:    rgba( 33, 200,  52, 0.33);
    background-image:    url(/monitoring-content/lib/images/ncei/success-dk.svg);
    background-size:     31px 31px !important;
    background-position: 10px 75% !important;
}

.alert.error      {
    color:               var(--baseColor);
    padding:             20px 10px 20px 50px;
    border-color:        var(--errorColor);
    background-color:    rgba(228,  29,  61, 0.33);
    background-image:    url(/monitoring-content/lib/images/ncei/error.svg);
    background-size:     27px 27px !important;
    background-position: 15px 50% !important;
}
.alert.severity-low,
.alert.low        {
    color:               var(--baseColor);
    padding:             20px 10px 20px 50px;
    border-color:        #2e8540;
    background-color:    rgba( 46, 133,  64, 0.33);
    background-image:    url(/monitoring-content/lib/images/ncei/low-black.svg);
    background-size:     21px 21px !important;
    background-position: 15px 50% !important;
}
.alert.severity-medium,
.alert.medium {
    color:               var(--baseColor);
    padding:             20px 10px 20px 50px;
    border-color:        var(--warningColor);
    background-color:    rgba(250, 206,   0, 0.33);
    background-image:    url(/monitoring-content/lib/images/ncei/medium-black.svg);
    background-size:     21px 21px !important;
    background-position: 15px 50% !important;
}
.alert.warning {
    color:               var(--baseColor);
    padding:             20px 10px 20px 50px;
    border-color:        var(--warningColor);
    background-color:    rgba(250, 206,   0, 0.33);
    background-image:    url(/monitoring-content/lib/images/ncei/warning.png);
    background-size:     31px 21px !important;
    background-position: 15px 50% !important;
}
.alert.severity-high,
.alert.high {
    color:               var(--baseColor);
    padding:             20px 10px 20px 75px;
    border-color:        var(--errorColor);
    background-color:    rgba(228,  29,  61, 0.33);
    background-image:    url(/monitoring-content/lib/images/ncei/high-black.svg);
    background-size:     42px 42px !important;
    background-position: 15px 50% !important;
}

.alert.success-lt {
    color:               var(--whiteColor);
    padding:             20px 10px 20px 50px;
    border-color:        #b6ecbc;
    background-color:    var(--successColor);
    background-image:    url(/monitoring-content/lib/images/ncei/success.svg);
    background-size:     21px 21px !important;
    background-position: 15px 50% !important;
}
.alert.info-lt {
    color:               var(--whiteColor);
    padding:             20px 10px 20px 50px;
    border-color:        #b9f5ee;
    background-color:    var(--infoColor);
    background-image:    url(/monitoring-content/lib/images/ncei/low.svg);
    background-size:     21px 21px !important;
    background-position: 15px 50% !important;
}
/**********/
/* Alerts */

/* Modals */
/**********/
.modal-content { border-radius: 8px; }
.modal-content > * { border-radius: 8px; padding: 35px;}
.modal-header,
.modal-footer { border: 0; }

.modal-header { display: block; }

.modal-header .btn-close {
    float:           right;
    background-size: 15px 15px;
    margin:          -1.5rem -1.5rem -.5rem auto;
}

.modal-title {
    text-align:  center;
    color:     var(--baseColor);
    font-family: "Merriweather";
    font-weight: normal;
    font-style:  normal;
    font-size:   26px;
    line-height: 125%;
    margin-top:  40px;
}

.modal-body {
    color:       var(--baseColor);
    font-family: "Source Sans Pro";
    font-weight: normal;
    font-style:  normal;
    font-size:   18px;
    line-height: 125%;
    text-align:  center;
}

.modal-footer {
    z-index:       1;
    display:       block;
    text-align:    center;
    box-shadow:    0 -5px 3px -3px rgb(0 0 0 / 0.2);
    border-radius: 0 0 8px 8px;
}

.modal .text-left { text-align: left !important; }
.modal .text-right { text-align: right !important; }
/**********/
/* Modals */

/* Arrow Nav */
/*************/
.arrowNav a {
    background:      rgba(17,46,81,0.9);
    color:           var(--whiteColor);
    text-decoration: none;
    font-size:       24px;
}

.arrowNav a {
    position:           fixed;
    z-index:            1000;
    top:                45%;
    padding:            2em 5px;
    -webkit-transition: .2s ease-in;
       -moz-transition: .2s ease-in;
         -o-transition: .2s ease-in;
            transition: .2s ease-in;
}

.arrowLeft  a { left:  -5px; }
.arrowRight a { right: -5px; }

.arrowNav a:hover {
    -webkit-transition: .2s ease-in;
       -moz-transition: .2s ease-in;
         -o-transition: .2s ease-in;
            transition: .2s ease-in;
    color:              var(--whiteColor);
    background-color:   rgba(61,69,81,0.75);
}

.arrowLeft  a:hover { left:  0; }
.arrowRight a:hover { right: 0; }

@media (max-width: 575px) {
    .arrowNav a {
        display: none;
    }
}
/*************/
/* Arrow Nav */
 
/* Responsive Arrows */
/*********************
[class^=arrow-] {
    border:       solid currentColor;
    border-width: 0 .2em .2em 0;
    display:      inline-block;
    padding:      .20em;
}

.arrow-right { transform: rotate(-45deg);  -webkit-transform: rotate(-45deg); }
.arrow-left  { transform: rotate(135deg);  -webkit-transform: rotate(135deg); }
.arrow-up    { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.arrow-down  { transform: rotate(45deg);   -webkit-transform: rotate(45deg); }
/*********************/
/* Responsive Arrows */
 
#page-content-container { position: relative; }
#page-content { padding-top: 1rem; padding-bottom: 3rem; }

ul.references { padding: 0 !important; margin: 0 !important; }

ul.references li {
    list-style-type: none !important;
    padding:         0 !important;
    margin:          0.5em 0 0.5em 2em !important;
    text-indent:     -2em;
}

ul.references li a.url {
    word-break: break-all;
}