body {
        font-family: "Open Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:
            "wdth" 100;
        font-size: 62.5%;
    }
    div {
      font-size: 1.2rem;
      line-height: 1.2rem;
    }
    @media (max-width: 350px;) {
        div {
          font-size: .8rem;
          line-height: .9rem;
        }
    }
    .smaller {
      font-size: small;
      line-height: .2rem;
    }
    @media (max-width: 350px;) {
      .smaller {
        font-size: smaller;
      }    
    }
    .pool--status {
        height: 100vh;
        background: #fff;
    }
    @media (max-width: 350px;) {
      .pool--status {
        height: unset;
      }
    }@media (max-width: 576px) {
      div#lifeguard {
        border-top: 0 !important;
      }
    }
    .svg-light {
       filter: invert(29%) sepia(13%) saturate(398%) hue-rotate(169deg) brightness(96%) contrast(87%);
    }
    .svg-info {
       filter: invert(23%) sepia(29%) saturate(2468%) hue-rotate(154deg) brightness(94%) contrast(96%);
    }
    .svg-secondary {
       filter: invert(13%) sepia(19%) saturate(263%) hue-rotate(162deg) brightness(101%) contrast(89%);
    }
    .svg-warning {
       filter: invert(27%) sepia(18%) saturate(3398%) hue-rotate(18deg) brightness(100%) contrast(98%);
    }
    .svg-orange {
       filter: invert(40%) sepia(96%) saturate(2878%) hue-rotate(14deg) brightness(96%) contrast(87%);
    }
    .svg-brown {
       filter: invert(19%) sepia(48%) saturate(1344%) hue-rotate(354deg) brightness(93%) contrast(88%);
    }
    .svg-puke {
       filter: invert(33%) sepia(70%) saturate(4701%) hue-rotate(74deg) brightness(90%) contrast(108%);
    }
    .svg-success {
       filter: invert(13%) sepia(9%) saturate(7196%) hue-rotate(117deg) brightness(97%) contrast(92%);
    }
    .svg-primary {
       filter: invert(18%) sepia(10%) saturate(7329%) hue-rotate(190deg) brightness(96%) contrast(110%);
    }
    .svg-danger {
       filter: invert(16%) sepia(12%) saturate(5038%) hue-rotate(315deg) brightness(91%) contrast(105%);
    }
    .text-orange-emphasis {
      color: #ca6510;
    } 
    .bg-orange-subtle {
      background: #ffe5d0;
    }
    .border-orange-subtle {
      border-color: #feb272 !important;
    }    
    .text-brown-emphasis {
      color: #613613;
    } 
    .bg-brown-subtle {
      background: #dfd7d0;
    }
    .border-brown-subtle {
      border-color: #c0afa1 !important;
    }  
    .text-puke-emphasis {
      color: #257600;
    } 
    .bg-puke-subtle {
      background: #94ff1d;
    }
    .border-puke-subtle {
      border-color: #73da00;
    }
    .icon {
      width: 70%;
      max-width: 50px;
      margin-bottom: 1em;
    }
    @media (max-width: 350px;) {
      .icon {
        width: 70%;
        max-width: 35px;
        margin-bottom: .5em;
      }
    }
    .icon-sm {
      width: 50%;
      max-width: 30px;
      margin-right: .2em;
    }
    @media (max-width: 350px;) {
      .icon-sm {
        width: 50%;
        max-width: 18px;
        margin-right: .2em;
      }
    }
    #update {
      position: absolute;
      bottom: .2em;
    }
    @media (max-width: 350px;) {
      #update {
        position: relative;
        bottom: unset;
      }
    }

    #update--buttons {
      position: absolute;
      bottom: 2em;
      width: 100%;
    }

    @media (max-width: 350px;) {
      #update--buttons {
        position: relative;
        bottom: unset;
      }
    }


    .refresher {     
      width: 70%;
      max-width: 56px;
      border: 4px solid #777777;
      filter: invert(50%) sepia(0%) saturate(388%) hue-rotate(148deg) brightness(93%) contrast(97%);
      padding: 8px;
      border-radius: 30px;
    }

    @media (max-width: 350px;) {
      .refresher {
        max-width: 40px;
        border: 2px solid #777777;
      }
    }


    #countdown {
      display: inline-flex !important; 
    }

    .no_wrap {
      white-space: nowrap;
    }

    .promoBanner {  
      font-size: 1rem;
      line-height: 1.2rem;
      text-align: center;
    }

    @media (max-width: 350px;) {
      .promoBanner {
        font-size: .8rem;
        line-height: .9rem;
      }
    }

    .navbar-brand {
      font-family: "Libre Baskerville", serif;
      font-optical-sizing: auto;
      font-weight: normal;
      font-style: normal;
    }


    .carousel {
      margin-top: 5px;
    }
    .carousel-indicators {
      margin-bottom: -1.4rem;
    }
    .carousel-indicators [data-bs-target] {
      background-color: #000;
    }