@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}*/

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: #0076D6;
  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:           #ffffff;
}
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 #3d4551; }
.ui-menu-item a { text-decoration: none; }
.ui-state-hover, .ui-state-active {
  color:            #ffffff !important;
  background-color: #0076d6 !important;
  background-image: none !important;
}

.ui-menu-item .monitoring-product-name {
  font-size:        22px;
  line-height:      24px;
  color:            #0076d6;
  background-color: transparent;
  margin:           7px 5px;
}
.ui-menu-item .monitoring-product-description {
  font-size:        18px;
  line-height:      20px;
  color:            #8d9297;
  background-color: transparent;
  margin:           0 5px 7px 5px;
}

.ui-state-hover .monitoring-product-name,
.ui-state-active .monitoring-product-name { color: #ffffff; }
.ui-state-hover .monitoring-product-description,
.ui-state-active .monitoring-product-description { color: #f1f3f6; }
/* -- 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:           #ffffff;
  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:       #1c1d1f;
}

a { color: #0050d8; }
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); }

.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: #1c1d1f; }
.dk-gray-txt        { color: #3d4551; }
.gray-txt           { color: #8d9297; }
.lt-gray-txt        { color: #c6cace; }
.lter-gray-txt      { color: #dcdee0; }
.ltest-gray-txt     { color: #f1f3f6; }
.white-txt          { color: #ffffff; }
.lt-blue-txt        { color: #2491ff; }
.blue-txt           { color: #0076d6; }
.dk-blue-txt        { color: #0050d8; }
.dkest-blue-txt     { color: #162e51; }
.lt-accent-blue-txt { color: #a8f2ff; }
.accent-blue-txt    { color: #52daf2; }
.dk-accent-blue-txt { color: #00bde3; }
.info-txt           { color: #29e1cb; }
.red,
.red-txt,
.error-txt          { color: #e41d3d; }
.warning-txt        { color: #face00; }
.success-txt        { color: #21c834; }

.base-bg           { background-color: #1c1d1f; }
.dk-gray-bg        { background-color: #3d4551; }
.gray-bg           { background-color: #8d9297; }
.lt-gray-bg        { background-color: #c6cace; }
.lter-gray-bg      { background-color: #dcdee0; }
.ltest-gray-bg     { background-color: #f1f3f6; }
.white-bg          { background-color: #ffffff; }
.lt-blue-bg        { background-color: #2491ff; }
.blue-bg           { background-color: #0076d6; }
.dk-blue-bg        { background-color: #0050d8; }
.dkest-blue-bg     { background-color: #162e51; }
.lt-accent-blue-bg { background-color: #a8f2ff; }
.accent-blue-bg    { background-color: #52daf2; }
.dk-accent-blue-bg { background-color: #00bde3; }
.info-bg           { background-color: #29e1cb; }
.red-bg,
.error-bg          { background-color: #e41d3d; }
.warning-bg        { background-color: #face00; }
.success-bg        { background-color: #21c834; }

.base-border           { border: solid 1px #1c1d1f; }
.dk-gray-border        { border: solid 1px #3d4551; }
.gray-border           { border: solid 1px #8d9297; }
.lt-gray-border        { border: solid 1px #c6cace; }
.lter-gray-border      { border: solid 1px #dcdee0; }
.ltest-gray-border     { border: solid 1px #f1f3f6; }
.white-border          { border: solid 1px #ffffff; }
.lt-blue-border        { border: solid 1px #2491ff; }
.blue-border           { border: solid 1px #0076d6; }
.dk-blue-border        { border: solid 1px #0050d8; }
.dkest-blue-border     { border: solid 1px #162e51; }
.lt-accent-blue-border { border: solid 1px #a8f2ff; }
.accent-blue-border    { border: solid 1px #52daf2; }
.dk-accent-blue-border { border: solid 1px #00bde3; }
.info-border           { border: solid 1px #29e1cb; }
.red-border,
.error-border          { border: solid 1px #e41d3d; }
.warning-border        { border: solid 1px #face00; }
.success-border        { border: solid 1px #21c834; }

.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:               #ffffff;
  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, #ffffff 0, #ffffff 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 #dcdee0;
}

.tabs > * {
  font-family:        "Source Sans Pro",sans-serif !important;
  flex:               1;
  display:            inline-block;
  color:              #1c1d1f;
  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:              #1c1d1f;
  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: #0076d6; }

.tabs > *:not(.selected):hover,
.tabs > *:not(.selected):hover a { color: #dcdee0; }

.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: #0076d6; }

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

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

/* Cards */
/*********/
.card {
  text-decoration:  none;
  color:            #1c1d1f;
  background-color: #ffffff;
  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:        #1c1d1f;
  border-color: #ffffff !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:#fff;
  line-height:     150%;
}

input[type="text"],
input[type="search"],
input[type="date"],
input[type="password"],
select,
textarea {
  background-color: #ffffff;
  border:           1px solid #8d9297;
  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: #2491ff 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: #21c834 3px solid;
}
.success-msg { font-weight: 600; font-size: 0.9em; color: #21c834; }

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: #e41d3d solid 3px;
}

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: #e41d3d; }

.error-msg { font-weight: 600; font-size: 0.9em; color: #e41d3d; }

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: #c6cace;
  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: #dcdee0; }
.checkbox-label input:enabled:checked ~ .checkmark { background-color: #0076d6; }

.checkbox-label input:disabled + .checkbox-label-text { color: #c6cace; }
.checkbox-label input:disabled:checked ~ .checkmark { background-color: #c6cace; }

.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:       #ffffff;
  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:   #ffffff;
  border:             1px solid #ffffff;
  -webkit-box-shadow: 0 0 0 1px #8d9297;
     -moz-box-shadow: 0 0 0 1px #8d9297;
          box-shadow: 0 0 0 1px #8d9297;
}

.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: #dcdee0; }
.radio-label input:enabled:checked ~ .radio-button { background-color: #0076d6; }

.radio-label input:disabled + .radio-label-text { color: #c6cace; }
.radio-label input:disabled:checked ~ .radio-button { background-color: #c6cace; }
.radio-label input:disabled:not(:checked) ~ .radio-button { background-color: #dcdee0; }

.radio-label input:enabled:checked ~ .radio-button { background-color: #0076d6; -webkit-box-shadow: 0 0 0 1px #0076d6; -moz-box-shadow: 0 0 0 1px #0076d6; box-shadow: 0 0 0 1px #0076d6; }
.radio-label input:disabled:checked ~ .radio-button { background-color: #c6cace; }
/* 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:         #1c1d1f;
  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: #c6cace;
  color:            #1c1d1f;
  border:           2px solid #c6cace;
}
.btn:not(.btn-primary):not(.btn-secondary):not(:disabled):hover {
  background-color:   #8d9297;
  color:              #1c1d1f;
  -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: #0076d6;
  color:            #ffffff;
  border:           2px solid #0076d6;
}

[type="submit"]:not(:disabled):hover,
/*.btn:not(.btn-secondary):not(:disabled):hover,*/
.btn.btn-primary:not(:disabled):hover {
  background-color:   #0050ad;
  color:              #ffffff;
  -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: #ffffff;
  color:            #52daf2;
  border:           2px solid #52daf2;
}

.btn.btn-secondary:not(:disabled):hover {
  background-color:   #52daf2;
  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:  #162e51 !important;
  outline-width:  3px !important;
  outline-offset: 1px !important;
}

[type="submit"]:disabled,
.btn:disabled {
  cursor:           default;
  background-color: #c6cace;
  color:            #f1f3f6;
  border:           2px solid #c6cace;
}
/***********/
/* Buttons */

/* Tables */
/**********/
table {
  width:            100%;
  background-color: #ffffff;
  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: #162e51;
  color:            #fff;
  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 #8d9297; }

table.borderless:not(.shading) tr,
table.borderless:not(.shading) th,
table.borderless:not(.shading) td { border-bottom: solid 1px #8d9297; background-color: #fff; color: #1c1d1f; }

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

/* table links */
table a { text-decoration: none; color: #0076d6; }
table.shading tr:nth-child(2n) a,
table:not(.shading):not(.borderless):not(.bordered) tr:nth-child(2n) a { color: #0050d8; }

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: #0076d6; }

tfoot tr { background-color: #ffffff !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: #dcdee0;
  color: #1c1d1f;
}
table.tablesorter tbody tr.odd td {
  background: #ffffff;
  color: #1c1d1f;
}
/****************/
/* 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: #1c1d1f; padding: 20px 10px 20px 50px; border-color: #29e1cb; 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: #1c1d1f; padding: 15px 10px 15px 50px; border-color: #21c834; 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: #1c1d1f; padding: 20px 10px 20px 50px; border-color: #e41d3d; 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.low        { color: #1c1d1f; 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.svg);     background-size: 21px 21px !important; background-position: 15px 50% !important; }
.alert.medium     { color: #1c1d1f; padding: 20px 10px 20px 50px; border-color: #face00; background-color: rgba(250, 206,   0, 0.33); background-image: url(/monitoring-content/lib/images/ncei/medium.svg);  background-size: 21px 21px !important; background-position: 15px 50% !important; }
.alert.warning    { color: #1c1d1f; padding: 20px 10px 20px 50px; border-color: #face00; 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.high       { color: #1c1d1f; padding: 20px 10px 20px 50px; border-color: #e41d3d; background-color: rgba(228,  29,  61, 0.33); background-image: url(/monitoring-content/lib/images/ncei/high.svg);    background-size: 21px 21px !important; background-position: 15px 50% !important; }

.alert.success-lt { color: #ffffff; padding: 20px 10px 20px 50px; background-color: #21c834; border-color: #B6ECBC; background-image: url(/monitoring-content/lib/images/ncei/success.svg); background-size: 21px 21px !important; background-position: 15px 50% !important; }
.alert.info-lt    { color: #ffffff; padding: 20px 10px 20px 50px; background-color: #29e1cb; border-color: #B9F5EE; 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:     #1c1d1f;
  font-family: "Merriweather";
  font-weight: normal;
  font-style:  normal;
  font-size:   26px;
  line-height: 125%;
  margin-top:  40px;
}

.modal-body {
  color:       #1c1d1f;
  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:           #ffffff;
  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:              #ffffff;
  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;
}