@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}*/
#image-modal-img{width:100%}
html {
    --baseColor:       #1c1d1f;
    --darkGray:        #3d4551;
    --gray:            #8d9297;
    --lightGray:       #c6cace;
    --lighterGray:     #dcdee0;
    --lightestGray:    #f1f3f6;
    --white:           #ffffff;
    --lightBlue:       #2491ff;
    --blue:            #0076d6;
    --darkBlue:        #0050d8;
    --darkestBlue:     #162e51;
    --lightAccentBlue: #a8f2ff;
    --accentBlue:      #52daf2;
    --darkAccentBlue:  #00bde3;
    --darkestAccentBlue: #0B8297;
    --infoColor:       #29e1cb;
    --red:             #e41d3d;
    --darkRed:         #c11732;
    --darkestRed:      #a9142c;
    --orange:          #e4691d;
    --ltYellow:        #f6e496;
    --yellow:          #face00;
    --ltGreen:         #a3e2aa;
    --green:           #21c834;
    --dkGreen:         #2c9839;

    --errorColor:   var(--red);
    --warningColor: var(--yellow);
    --successColor: var(--green);
}

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;
}

a.skip-to-main:focus {
    outline: var(--lightBlue) solid 3px !important;
}

h1:focus, h2:focus { outline: 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:    0 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: 0;
}

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

.app-container {
    background-color: var(--blue);
    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(--white);
}
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);
       -moz-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
 * 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(--darkGray); }
.ui-menu-item a { text-decoration: none; }
.ui-state-hover, .ui-state-active {
    color:            var(--white) !important;
    background-color: var(--blue) !important;
    background-image: none !important;
}

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

.ui-state-hover .monitoring-product-name,
.ui-state-active .monitoring-product-name { color: var(--white); }
.ui-state-hover .monitoring-product-description,
.ui-state-active .monitoring-product-description { color: var(--lightestGray); }
/* -- 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(--white);
    font-family:     "Source Sans Pro",sans-serif;
    font-size:       14px;
    line-height:     1em;
    font-weight:     400;
    font-style:      normal;
}

/* 100% of view height - header height - footer height */
#main-content {
    min-height: calc(100vh - 164px - 242px);
}
/*********************/
/* 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(--darkBlue); }
#page-content a img[src$=svg] {
    filter: invert(20%) sepia(52%) saturate(4988%) hue-rotate(215deg) brightness(91%) contrast(103%);
}
.td-none { text-decoration: none; }
.default-cursor { cursor: default; }
.pointer-cursor { cursor: pointer; }
.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; color: #6c757d; padding-top: 0.5rem; padding-bottom: 0.5rem; }
label    { font-family: "Source Sans Pro",sans-serif; font-weight:    500; font-style: normal; font-size: 20px; }

li.nobullet { list-style: none; margin-left: -1em !important; }

code {
    font-family:      var(--bs-font-monospace);
    color:            #404245;
    background-color: #e7e9eb;
    border-radius:    3px;
    padding:          1px 5px;
    white-space:      pre-wrap;
}

.xparent-bg { background-color: transparent; }

#page-content fieldset {
    position:      relative;
    border:        2px solid var(--gray);
    background:    var(--lightestGray);
    border-radius: 5px;
    padding:       1.5rem 1rem 1rem;
    margin:        1rem 0 1.5rem;
}

#page-content fieldset legend {
    position:      absolute;
    top:           -1.25rem;
    left:          20px;
    width:         min-content;
    white-space:   nowrap;
    background:    var(--darkestBlue);
    color:         var(--white);
    padding:       0.1rem 1rem;
    border-radius: 5px;
    box-shadow:    0 0 0 2px var(--gray);
}

abbr { text-decoration: none !important; }

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

.bold { font-weight: bold; }
.italic { font-style: italic; }
.font-style-normal,
.normal-font-style { font-style: normal; }
.normalWeight,
.font-weight-normal,
.normal-font-weight { font-weight: normal; }
.underline { border: 0; text-decoration: underline; }
.overline { border: 0; text-decoration: overline; }
.strikethrough { text-decoration: line-through; }

.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; }
.hidden { display: none !important; }
.collapsed:not(.accordion-button) { visibility: collapse; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.sr-only {
    position: absolute;
    clip:     rect(1px, 1px, 1px, 1px);
    padding:  0;
    border:   0;
    height:   1px;
    width:    1px;
    overflow: hidden;
}

.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-wrap-reverse > * { 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; }
.extra-small,
.extraSmall        { font-size: 60% !important; line-height: normal; }
.big,.large        { font-size: 120% !important; }
.extra-big,
.extraBig          { font-size: 140% !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,
.padding0,
.pad-zero          { padding: 0 !important; }
.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; }
.word-break-all { word-break: break-all; }

.base-txt           { color: var(--baseColor)       !important; }
.dk-gray-txt        { color: var(--darkGray)        !important; }
.gray-txt           { color: var(--gray)            !important; }
.lt-gray-txt        { color: var(--lightGray)       !important; }
.lter-gray-txt      { color: var(--lighterGray)     !important; }
.ltest-gray-txt     { color: var(--lightestGray)    !important; }
.white-txt          { color: var(--white)           !important; }
.lt-blue-txt        { color: var(--lightBlue)       !important; }
.blue-txt           { color: var(--blue)            !important; }
.dk-blue-txt        { color: var(--darkBlue)        !important; }
.dkest-blue-txt     { color: var(--darkestBlue)     !important; }
.lt-accent-blue-txt { color: var(--lightAccentBlue) !important; }
.accent-blue-txt    { color: var(--accentBlue)      !important; }
.dk-accent-blue-txt { color: var(--darkAccentBlue)  !important; }
.info-txt           { color: var(--infoColor)       !important; }
.red,
.red-txt,
.error-txt          { color: var(--errorColor)   !important; }
.dk-red-txt         { color: var(--darkRed)   !important; }
.dkest-red-txt      { color: var(--darkestRed)   !important; }
.lt-yellow-txt      { color: var(--ltYellow)   !important; }
.yellow-txt,
.warning-txt        { color: var(--warningColor) !important; }
.lt-green-txt       { color: var(--ltGreen) !important; }
.green-txt,
.success-txt        { color: var(--successColor) !important; }
.dk-green-txt       { color: var(--dkGreen)      !important; }
.orange-txt         { color: var(--orange)      !important; }

.base-bg           { background-color: var(--baseColor)       !important; }
.dk-gray-bg        { background-color: var(--darkGray)        !important; }
.gray-bg           { background-color: var(--gray)            !important; }
.lt-gray-bg        { background-color: var(--lightGray)       !important; }
.lter-gray-bg      { background-color: var(--lighterGray)     !important; }
.ltest-gray-bg     { background-color: var(--lightestGray)    !important; }
.white-bg          { background-color: var(--white)           !important; }
.lt-blue-bg        { background-color: var(--lightBlue)       !important; }
.blue-bg           { background-color: var(--blue)            !important; }
.dk-blue-bg        { background-color: var(--darkBlue)        !important; }
.dkest-blue-bg     { background-color: var(--darkestBlue)     !important; }
.lt-accent-blue-bg { background-color: var(--lightAccentBlue) !important; }
.accent-blue-bg    { background-color: var(--accentBlue)      !important; }
.dk-accent-blue-bg { background-color: var(--darkAccentBlue)  !important; }
.info-bg           { background-color: var(--infoColor)       !important; }
.red-bg,
.error-bg          { background-color: var(--errorColor)   !important; }
.lt-yellow-bg      { background-color: var(--ltYellow)   !important; }
.yellow-bg,
.warning-bg        { background-color: var(--warningColor) !important; }
.lt-green-bg       { background-color: var(--ltGreen) !important; }
.green-bg,
.success-bg        { background-color: var(--successColor) !important; }
.dk-green-bg       { background-color: var(--dkGreen)      !important; }
.orange-bg         { background-color: var(--orange)      !important; }

.black-border           { border: solid 1px #000       !important; }
.base-border           { border: solid 1px var(--baseColor)       !important; }
.dk-gray-border        { border: solid 1px var(--darkGray)        !important; }
.gray-border           { border: solid 1px var(--gray)            !important; }
.lt-gray-border        { border: solid 1px var(--lightGray)       !important; }
.lter-gray-border      { border: solid 1px var(--lighterGray)     !important; }
.ltest-gray-border     { border: solid 1px var(--lightestGray)    !important; }
.white-border          { border: solid 1px var(--white)           !important; }
.lt-blue-border        { border: solid 1px var(--lightBlue)       !important; }
.blue-border           { border: solid 1px var(--blue)            !important; }
.dk-blue-border        { border: solid 1px var(--darkBlue)        !important; }
.dkest-blue-border     { border: solid 1px var(--darkestBlue)     !important; }
.lt-accent-blue-border { border: solid 1px var(--lightAccentBlue) !important; }
.accent-blue-border    { border: solid 1px var(--accentBlue)      !important; }
.dk-accent-blue-border { border: solid 1px var(--darkAccentBlue)  !important; }
.info-border           { border: solid 1px var(--infoColor)       !important; }
.red-border,
.error-border          { border: solid 1px var(--errorColor)   !important; }
.yellow-border,
.warning-border        { border: solid 1px var(--warningColor) !important; }
.lt-green-border       { border: solid 1px var(--ltGreen) !important; }
.green-border,
.success-border        { border: solid 1px var(--successColor) !important; }
.dk-green-border       { border: solid 1px var(--dkGreen)      !important; }
.orange-border         { border: solid 1px var(--orange)       !important; }
.border0               { border: none                          !important; }

.black-svg {
    filter: brightness(0) saturate(100%);
}

.white-svg {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(360deg) brightness(100%) contrast(100%);
}

.container {
    width:         100%;
    padding-right: 15px;
    padding-left:  15px;
    margin-right:  auto;
    margin-left:   auto;
    position:      relative;
}
@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 */
/**
<div class="loader-overlay">
    <div class="noaa-loader">
        <img alt="NOAA Loader" src="/monitoring-content/lib/images/noaa-loader.gif">
    </div>
</div>
*/
/******************/
.loader-overlay {
    position:            absolute;
    width:               100%;
    height:              100%;
    z-index:             1002;
    color:               var(--white);
    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(--white) 0, var(--white) 20px, transparent 20px, transparent 100%);
}
*/
.loader-overlay .noaa-loader {
    position:   sticky;
    text-align: center;
    transform:  translateY(33%);
    background: radial-gradient(circle, var(--white) 0, var(--white) 20px, transparent 20px, transparent 100%);
}
/******************/
/* Loader Overlay */

/* Back To Top */
/***************/
#backToTop {
    display:          none;
    position:         fixed;
    right:            24px;
    bottom:           50px;
    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;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
            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:           54px;
}

#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 {
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.arr-left  {
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
            transform: rotate(135deg);
}
.arr-up    {
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
.arr-down  {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
            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(--lighterGray);
}

.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(--blue); }

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

.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);
       -moz-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(--blue); }

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

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

/* Cards */
/*********/
.card {
    text-decoration:  none;
    color:            var(--baseColor);
    background-color: var(--white);
    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(--white) !important;
    -webkit-box-shadow:
    0 0 2.2px rgba(0, 0, 0, 0.02),
    0 0 5.3px rgba(0, 0, 0, 0.028),
    0 0 10px rgba(0, 0, 0, 0.035),
    0 0 17.9px rgba(0, 0, 0, 0.042),
    0 0 33.4px rgba(0, 0, 0, 0.05),
    0 0 80px rgba(0, 0, 0, 0.07);
    -moz-box-shadow:
    0 0 2.2px rgba(0, 0, 0, 0.02),
    0 0 5.3px rgba(0, 0, 0, 0.028),
    0 0 10px rgba(0, 0, 0, 0.035),
    0 0 17.9px rgba(0, 0, 0, 0.042),
    0 0 33.4px rgba(0, 0, 0, 0.05),
    0 0 80px rgba(0, 0, 0, 0.07);
    box-shadow:
    0 0 2.2px rgba(0, 0, 0, 0.02),
    0 0 5.3px rgba(0, 0, 0, 0.028),
    0 0 10px rgba(0, 0, 0, 0.035),
    0 0 17.9px rgba(0, 0, 0, 0.042),
    0 0 33.4px rgba(0, 0, 0, 0.05),
    0 0 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(--white);
    line-height:     150%;
}

select:disabled {
    background-color: var(--lightGray);
}

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

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

input:not([type]).form-success,
input[type="text"].form-success,
input[type="search"].form-success,
input[type="date"].form-success,
input[type="password"].form-success,
input[type="date"].form-success,
input[type="month"].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:not([type]).form-error,
input[type="text"].form-error,
input[type="search"].form-error,
input[type="date"].form-error,
input[type="password"].form-error,
input[type="date"].form-error,
input[type="month"].form-error,
select.form-error,
textarea.form-error {
    outline: var(--errorColor) solid 3px !important;
}

input[type="month"].form-error-month::-webkit-datetime-edit-month-field,
input[type="month"].form-error-year::-webkit-datetime-edit-year-field,
input[type="month"].form-error-date::-webkit-datetime-edit-month-field,
input[type="month"].form-error-date::-webkit-datetime-edit-year-field,
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(--lightGray);
    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(--lighterGray);
}
.checkbox-label input:enabled:checked ~ .checkmark {
    background-color: var(--blue);
}

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

.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(--white);
    display:     none;
}

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

/* Accessibility */
.checkbox-label input[type="checkbox"]:focus ~ .checkmark {
    outline: var(--darkestBlue) solid 3px !important;
}

.checkbox-label input[type="checkbox"]:not(:checked):focus ~ .checkmark {
    outline: var(--blue) solid 3px !important;
}
/* Checkboxes */
/**************/

/* Radio Buttons */
/*****************/
#page-content .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;
}

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

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

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

#page-content .radio-label:hover input:enabled ~ .radio-button {
    background-color: var(--lighterGray);
}
#page-content .radio-label input:enabled:checked ~ .radio-button {
    background-color: var(--blue);
}

#page-content .radio-label input:disabled + .radio-label-text {
    color: var(--lightGray);
}
#page-content .radio-label input:disabled:checked ~ .radio-button {
    background-color: var(--lightGray);
}
#page-content .radio-label input:disabled:not(:checked) ~ .radio-button {
    background-color: var(--lighterGray);
}

#page-content .radio-label input:enabled:checked ~ .radio-button {
    background-color:   var(--blue);
    -webkit-box-shadow: 0 0 0 1px var(--blue);
       -moz-box-shadow: 0 0 0 1px var(--blue);
            box-shadow: 0 0 0 1px var(--blue);
}
#page-content .radio-label input:disabled:checked ~ .radio-button {
    background-color: var(--lightGray);
}

/* Accessibility */
#page-content .radio-label input[type="radio"]:focus ~ .radio-button {
    outline: var(--darkestBlue) solid 3px !important;
}
/* 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 {
    position:      relative;
    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-download):not(.btn-secondary):not(:disabled) {
    background-color: var(--lightGray);
    color:            var(--baseColor);
    border:           2px solid var(--lightGray);
}
.btn:not(.btn-primary):not(.btn-download):not(.btn-secondary):not(:disabled):hover {
    background-color:   var(--gray);
    color:              var(--baseColor);
    -webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.25);
       -moz-box-shadow: 0 4px 15px rgba(0,0,0,0.25);
            box-shadow: 0 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(--blue);
    color:            var(--white);
    border:           2px solid var(--blue);
}

[type="submit"]:not(:disabled):hover,
/*.btn:not(.btn-secondary):not(:disabled):hover,*/
.btn.btn-primary:not(:disabled):hover,
.btn.btn-download:not(:disabled):hover {
    background-color:   var(--darkBlue);
    color:              var(--white);
    -webkit-box-shadow: 0 4px 15px rgba(0,80,216,0.5);
       -moz-box-shadow: 0 4px 15px rgba(0,80,216,0.5);
            box-shadow: 0 4px 15px rgba(0,80,216,0.5);
}

.btn.btn-primary.selected:not(:disabled),
.btn.btn-primary.selected:not(:disabled):hover {
    background-color:   var(--darkestBlue);
    color:              var(--white);
    border:             2px solid var(--darkestBlue);
    cursor:             default;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

.btn.btn-download {
    color:            var(--blue);
    background-color: var(--white);
    border:           2px solid var(--blue);
    padding-left:     calc(2em + 5px);
}
.btn.btn-download::after {
    content:          "";
    position:         absolute;
    top:              calc(50% - 10px);
    left:             1em;
    height:           20px;
    width:            20px;
    background-image: url(/monitoring-content/lib/bootstrap-icons-1.10.5/download.svg);
    background-size:  20px 20px;
    filter:           invert(34%) sepia(61%) saturate(6828%) hue-rotate(193deg) brightness(97%) contrast(102%);
}
.btn.btn-download:hover::after {
    filter: invert(100%) sepia(1%) saturate(7500%) hue-rotate(76deg) brightness(111%) contrast(122%);
}

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

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

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

[type="submit"]:disabled,
.btn:disabled {
    cursor:           default;
    background-color: var(--lightGray);
    color:            var(--lightestGray);
    border-width:     0;
}
/***********/
/* Buttons */

/* Tables */
/**********/
table {
    width:            100%;
    background-color: var(--white);
    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(--darkestBlue);
    color:            var(--white);
    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(--gray); }

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

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

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

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(--blue); }

tfoot tr { background-color: var(--white) !important; }

.table-display {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}
/**********/
/* 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(--lighterGray);
    color: var(--baseColor);
}
table.tablesorter tbody tr.odd td {
    background: var(--white);
    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(--white);
    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(--white);
    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;
    border-radius: 0 0 8px 8px;
}

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

/* Overflow Block */
/******************/
.overflow-block {
    position: relative;
}

.overflow-block-inner {
    overflow:                   auto;
    -webkit-overflow-scrolling: touch;
}

.overflow-block .overflow-block-shadow {
    position:         absolute;
    opacity:          0;
    background-color: transparent;
    pointer-events:   none;
    z-index:          1;
    transition:       opacity 0.3s ease-in-out;
}

.overflow-block .shadow-left,
.overflow-block .shadow-right {
    top:    0;
    width:  20px;
    height: 100%;
}

.overflow-block .shadow-left {
    left:          0;
    border-radius: 3px 0 0 3px;
    background-image: linear-gradient(
        to left,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

.overflow-block .shadow-right {
    right:         0;
    border-radius: 0 3px 3px 0;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

.overflow-block .shadow-top,
.overflow-block .shadow-bottom {
    left:   0;
    width:  100%;
    height: 20px;
}

.overflow-block .shadow-top {
    top:              0;
    background-image: linear-gradient(
        to top,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

.overflow-block .shadow-bottom {
    bottom:           0;
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
}
/******************/
/* Overflow Block */

/* Scroll Box */
/**************/
.hscrollbox {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    background-image:
        /* These two white layers cover the shadow when there’s no overflow */
        linear-gradient(to right, white, white),
        linear-gradient(to right, white, white),
        /* Left Shadow */
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.5),
            rgba(255, 255, 255, 0)
        ),
        /* Right Shadow */
        linear-gradient(
            to left,
            rgba(0, 0, 0, 0.5),
            rgba(255, 255, 255, 0)
        );

    background-position:
        left center,
        right center,
        left center,
        right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size:
        50px 100%,
        50px 100%,
        25px 100%,
        25px 100%;

    /* The white layers use local attachment so they move with content,
     * hiding the shadow when there’s no overflow.
     * Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}

.scrollbox {
	background:
		/* Shadow covers */
		linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
		
		/* Shadows */
		radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background:
		/* Shadow covers */
		linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
		
		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
	
	/* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}

.vscrollbox {
    overflow: auto;
  
    background:
      /* Shadow Cover TOP */
      linear-gradient(
        white 30%,
        rgba(255, 255, 255, 0)
      ) center top,
      
      /* Shadow Cover BOTTOM */
      linear-gradient(
        rgba(255, 255, 255, 0), 
        white 70%
      ) center bottom,
      
      /* Shadow TOP */
      radial-gradient(
        farthest-side at 50% 0,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      ) center top,
      
      /* Shadow BOTTOM */
      radial-gradient(
        farthest-side at 50% 100%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      ) center bottom;
    
    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
	
	/* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}

.scrollbox table,
.hscrollbox table,
.vscrollbox table { background-color: transparent; }
/**************/
/* Scroll Box */

/* Arrow Nav */
/*************/
.arrowNav a {
    background:      rgba(17,46,81,0.9);
    color:           var(--white);
    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(--white);
    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;
}

#citation-anchor,
ul.references li a.url {
    word-break: break-all;
}