.admin-container {
  height: 100%;
  overflow: auto; }
  .admin-container .inner {
    max-width: 1140px;
    margin: 60px auto; }
    .admin-container h2 {
      margin-bottom: 60px; }
      .admin-container h2 span {
        font-size: 16px;
        color: #d9d9d9;
        float: right; }
  .admin-container h3 {
    padding-bottom: 15px; }
    .admin-container .global-actions a {
      display: inline-block;
      margin-right: 25px;
      background: #333;
      padding: 10px; }
  .admin-container .sections {
    display: flex;
    justify-content: space-between;
    margin-top: 60px; }
    .admin-container .sections .section {
      max-width: 31.5%; }
      .admin-container .sections .section .row {
        border: 1px solid #333;
        margin-bottom: 20px; }
        .admin-container .sections .section .row .info {
          padding: 10px;
          display: flex;
          flex-direction: column; }
          .admin-container .sections .section .row .info p span {
            font-size: 18px;
            padding-left: 15px; }
            .admin-container .sections .section .row .actions a {
              display: block;
              background: #FF4848;
              padding: 10px;
              text-align: center; }
      .admin-container .sections .section p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        text-transform: uppercase;
        width: 100%; }

@font-face {
  font-family: "OLLondon-Black";
  src: url("../fonts/OLLondon-Black.woff2") format("woff2"),
    url("../fonts/OLLondon-Black.woff") format("woff"),
    url("../fonts/OLLondon-Black.otf") format("opentype");
  font-style: normal;
  font-weight: 400; }

  * {
    box-sizing: border-box; }

    body {
      padding: 0;
      margin: 0;
      height: 100vh;
      overflow: hidden;
      font-family: "Roboto Mono", monospace;
      background: #111;
      color: #fff; }
      @media (max-width: 640px) {
        body {
          overflow: auto;   }
}
        body.dashboard, body.disabled, body.basin {
          background: #111;
          color: #d9d9d9; }
          body.admin {
            overflow: auto;
            height: auto; }
            body.loading #loading {
              display: block; }
              body.loading .container {
                opacity: 0.3; }

.disabled {
  display: flex;
  height: 100vh;
  align-items: center;
  flex-direction: column;
  justify-content: center; }
  .disabled img {
    display: block;
    margin-bottom: 30px; }

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none; }

  canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none; }

    a {
      color: #d9d9d9; }

      h2, h3, h4, h5, h6 {
        font-weight: normal;
        text-transform: uppercase;
        margin: 0;
        padding: 0; }

        header.main {
          color: #fff;
          background: #111;
          border-bottom: 1px solid #333;
          padding: 15px 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-transform: uppercase; }
          @media (max-width: 640px) {
            header.main {
              flex-direction: column;
              text-align: center;   }
              header.main img {
                display: block;
                margin: 10px 0;   }
}
          header.main p {
            margin: 0;
            font-size: 13px; }
            @media (max-width: 1080px) {
              header.main p {
                font-size: 12px;   }
}
              header.main p a {
                color: #d9d9d9; }
          header.main div:first-child, header.main div:last-child {
            width: 30%; }
            @media (max-width: 640px) {
              header.main div:first-child, header.main div:last-child {
                width: 100%;   }
}
          header.main div:last-child {
            text-align: right; }
            @media (max-width: 640px) {
              header.main div:last-child {
                text-align: inherit;   }
}

.container {
  transition: 0.3s opacity ease-in-out;
  height: 100%; }

  .dashboard-container {
    display: flex;
    justify-content: center;
    position: relative; }
    @media (max-width: 640px) {
      .dashboard-container {
        flex-direction: column;   }
}
      .dashboard-container .last-updated {
        top: 15px; }

.basins-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 70%;
  height: calc(100vh - 67px - 37px);
  overflow: auto; }
  @media (max-width: 640px) {
    .basins-container {
      width: 100%;
      height: auto;
      overflow: inherit;
      margin: 15px 0;   }
}
    .basins-container .basin {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(70vw / 3); }
      @media (max-width: 640px) {
        .basins-container .basin {
          width: auto;
          padding: 10px;   }
}
        .basins-container .basin.stable a {
          background: #4ECF6A; }
          .basins-container .basin.stable a:hover {
            box-shadow: 0px 0px 20px 5px #4ECF6A; }
      .basins-container .basin.mild a {
        background: #FBFF43; }
        .basins-container .basin.mild a:hover {
          box-shadow: 0px 0px 20px 5px #FBFF43; }
      .basins-container .basin.severe a {
        background: #FF4848; }
        .basins-container .basin.severe a:hover {
          box-shadow: 0px 0px 20px 5px #FF4848; }
  .basins-container .basin a {
    width: calc(70vw / 4);
    height: calc(70vw / 4);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #0B89B4;
    color: #111;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: box-shadow 0.3s ease-in-out; }
    @media (max-width: 640px) {
      .basins-container .basin a {
        width: 40vw;
        height: 40vw;   }
}
      .basins-container .basin a p {
        font-size: 14px;
        margin: 15px 0; }
        .basins-container .basin a .value {
          flex-direction: column;
          display: flex;
          align-items: center;
          font-size: 12px;
          width: 65%;
          justify-content: space-between;
          padding-bottom: 15px;
          margin: 15px 0;
          border-bottom: 1px solid #111; }
          @media (max-width: 640px) {
            .basins-container .basin a .value {
              font-size: 10px;   }
}
            .basins-container .basin a .value > div {
              display: flex;
              justify-content: space-between;
              width: 100%; }
              .basins-container .basin a .value:last-child {
                border: 0;
                margin: 0;
                padding: 0; }
  .basins-container .basin .details {
    width: calc(100% - 360px); }
    .basins-container .basin .details h3:nth-child(2) {
      margin-bottom: 15px; }
      .basins-container .basin .details .value {
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #333; }

.basin-container {
  display: flex;
  position: relative; }

  .basin-forecast-types {
    position: absolute;
    z-index: 2;
    top: calc(67px + 37px + 50px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    background: #111;
    padding: 10px; }
    @media (max-width: 640px) {
      .basin-forecast-types {
        top: calc(67px + 37px + 115px);
        left: inherit;
        transform: none;
        right: 0;   }
}
      .basin-forecast-types button {
        margin: 0 10px; }
        @media (max-width: 640px) {
          .basin-forecast-types button {
            font-size: 10px;   }
}
          .basin-forecast-types button.active {
            background: rgba(73, 177, 235, 0.75); }
            .basin-forecast-types button.active#forecast-aop {
              background: rgba(73, 89, 235, 0.75); }

.basin-values {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%; }
  @media (max-width: 640px) {
    .basin-values {
      width: 100%;   }
}
    .basin-values .value {
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 50%; }
      .basin-values .value .row {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%; }
        @media (max-width: 640px) {
          .basin-values .value .row {
            padding: 10px 0;   }
}
      .basin-values .value h4 {
        font-size: 12px;
        font-weight: normal;
        background: #222;
        padding: 5px;
        width: 100%; }
        .basin-values .value p {
          padding: 0;
          margin: 0;
          display: inline-block;
          font-size: 24px; }
          .basin-values .value span {
            font-size: 80%;
            color: #aaa; }
            @media (max-width: 1080px) {
              .basin-values .value span {
                font-size: 70%;   }
}

.values {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 30%;
  height: calc(100vh - 67px - 46px); }
  @media (max-width: 640px) {
    .values {
      width: 100%;
      height: auto;
      border-bottom: 1px solid #333;   }
}
    .values#tp-current-values {
      width: 100%;
      height: auto;
      border-bottom: 1px solid #333;
      justify-content: center; }
      .values#tp-current-values .value {
        width: auto;
        flex-direction: row;
        border-right: 0;
        background: #222;
        padding-right: 15px; }
        .values#tp-current-values .value:last-child {
          border-right: 1px solid #333;
          margin-right: 0; }
          .values#tp-current-values .value h4 {
            padding: 10px 0 10px 15px;
            border-left: 1px solid #333;
            background: none;
            color: #999; }
            @media (max-width: 640px) {
              .values#tp-current-values .value h4 {
                font-size: 10px;   }
}
        .values#tp-current-values .value p {
          line-height: 1; }
          @media (max-width: 640px) {
            .values#tp-current-values .value p {
              font-size: 12px;
              line-height: 1.25;   }
}
        .values#tp-current-values .value .row {
          flex-direction: row;
          padding: 0; }
          .values#tp-current-values .value .row .col {
            margin: 0 0 0 15px;
            display: flex;
            align-items: center;
            justify-content: center; }
  .values .value {
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    width: 50%;
    text-align: center;
    font-size: 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative; }
    @media (max-width: 640px) {
      .values .value:nth-child(even) {
        border-right: 0;   }
}
    .values .value:nth-last-of-type(-n+2) {
      border-bottom: 0; }
      .values .value .row {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%; }
        @media (max-width: 640px) {
          .values .value .row {
            padding: 10px 0;   }
}
          .values .value .row.single p {
            font-size: 125%; }
            .values .value .row .col {
              margin: 0 0 20px; }
              .values .value .row .col:last-child {
                margin-bottom: 0; }
  .values h4 {
    font-size: 12px;
    font-weight: normal;
    background: #222;
    padding: 10px 5px;
    width: 100%; }
    .values h5 {
      font-size: 12px;
      font-weight: normal;
      color: #999; }
      @media (max-width: 1080px) {
        .values h5 {
          font-size: 10px;   }
}
  .values .col.overflow h5 {
    padding-right: 10px; }
    .values p {
      padding: 0;
      margin: 0;
      display: inline-block; }
      .values p.overflow-1::before {
        content: "";
        width: 10px;
        height: 10px;
        background: #FF4848;
        border-radius: 100%;
        display: inline-block;
        position: relative;
        left: -10px;
        margin-left: -10px; }
        .values p.overflow-2::before {
          content: "";
          width: 10px;
          height: 10px;
          background: #FF4848;
          border-radius: 100%;
          display: inline-block;
          position: relative;
          left: -10px;
          margin-left: -10px; }
          .values p.overflow-3::before {
            content: "";
            width: 10px;
            height: 10px;
            background: #FF4848;
            border-radius: 100%;
            display: inline-block;
            position: relative;
            left: -10px;
            margin-left: -10px; }
            .values p.overflow-4::before {
              content: "";
              width: 10px;
              height: 10px;
              background: #FF4848;
              border-radius: 100%;
              display: inline-block;
              position: relative;
              left: -10px;
              margin-left: -10px;
              background: #FBFF43; }
              .values p.overflow-5::before {
                content: "";
                width: 10px;
                height: 10px;
                background: #FF4848;
                border-radius: 100%;
                display: inline-block;
                position: relative;
                left: -10px;
                margin-left: -10px;
                background: #FBFF43; }
                .values p.overflow-6::before {
                  content: "";
                  width: 10px;
                  height: 10px;
                  background: #FF4848;
                  border-radius: 100%;
                  display: inline-block;
                  position: relative;
                  left: -10px;
                  margin-left: -10px;
                  background: #FBFF43; }
                  .values p.overflow-7::before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    background: #FF4848;
                    border-radius: 100%;
                    display: inline-block;
                    position: relative;
                    left: -10px;
                    margin-left: -10px;
                    background: #FBFF43; }
                    .values p.overflow-8::before {
                      content: "";
                      width: 10px;
                      height: 10px;
                      background: #FF4848;
                      border-radius: 100%;
                      display: inline-block;
                      position: relative;
                      left: -10px;
                      margin-left: -10px;
                      background: #4ECF6A; }
  .values span {
    margin-left: -5px;
    font-size: 80%;
    color: #aaa; }
    @media (max-width: 1080px) {
      .values span {
        font-size: 70%;   }
}
  .values a.view-graph {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-transform: uppercase;
    font-size: 10px;
    text-decoration: none;
    color: #aaa;
    text-indent: -9999px;
    display: block;
    width: 32px;
    height: 32px;
    background: url(/static/icon-graph.svg);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: bottom right; }

.charts-container {
  position: relative;
  width: 100%; }
  .charts-container .row {
    display: flex; }
    .charts-container .row.lt {
      height: calc(100vh - 67px - 37px); }
      @media (max-width: 640px) {
        .charts-container .row.lt {
          height: calc(92vh - 67px - 37px);   }
}
    .charts-container .row.lt.basin-1 {
      height: calc(75vh - 67px - 37px); }
      .charts-container .row.st {
        height: 25vh; }
        @media (max-width: 640px) {
          .charts-container .row.st {
            height: auto;
            flex-direction: column;   }
}
  .charts-container .legend {
    color: #d9d9d9;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px; }
    .charts-container .legend ul {
      margin: 0;
      padding: 0; }
      .charts-container .legend ul li {
        display: inline-block;
        padding: 0 10px; }
        .charts-container .legend ul li.observed::before {
          content: "";
          width: 15px;
          height: 15px;
          background-color: #fff;
          display: inline-block;
          margin-right: 10px;
          vertical-align: bottom; }
          .charts-container .legend ul li.forecasted::before {
            content: "";
            width: 0;
            height: 0;
            display: inline-block;
            margin-right: 10px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 15px solid #aaa;
            vertical-align: bottom; }
            .charts-container .legend ul li.forecast::before {
              content: "";
              width: 15px;
              height: 15px;
              border-radius: 100%;
              display: inline-block;
              margin-right: 10px;
              background-color: #00ff19;
              vertical-align: bottom; }

.chart {
  width: 100%;
  position: relative; }
  .chart canvas {
    width: 100% !important; }
    .chart.chart-lt {
      margin: 0;
      padding: 0 15px 15px;
      border-bottom: 1px solid #333; }
      .chart.chart-lt .chart-title {
        text-align: center;
        text-transform: uppercase;
        position: absolute;
        top: 7.5%;
        left: 0;
        width: 100%; }
  .chart.chart-st {
    width: 80%;
    margin: 0;
    padding: 5px 15px;
    border-right: 1px solid #333; }
    @media (max-width: 640px) {
      .chart.chart-st {
        border-right: 0;
        width: 100%;   }
}
      .chart.chart-st canvas {
        height: 100%; }
  .chart .range-container {
    display: block;
    width: 150px;
    height: 100%;
    position: absolute;
    top: 14px;
    right: 0;
    padding: 15px;
    border: 1px solid #333;
    border-bottom: 0;
    border-right: 0; }
    .chart .range-container.short {
      height: 98.5%; }
      .chart .range-container h5 {
        text-align: center;
        margin-bottom: 15px; }
        .chart .range-container h5 span {
          display: block;
          font-weight: normal;
          font-size: 80%; }
    .chart .range-container .range {
      display: block;
      margin: 0 auto; }

.last-updated {
  position: absolute;
  top: 15px;
  right: 15px;
  text-align: right;
  padding: 5px 15px;
  color: #999;
  font-size: 10px;
  text-transform: uppercase; }
  @media (max-width: 640px) {
    .last-updated {
      display: none;   }
}
    .last-updated span {
      font-size: 12px;
      color: #d9d9d9; }

.input {
  margin: 0 0 30px; }
  .input label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    padding-bottom: 5px; }

button {
  outline: 0;
  border: 0;
  padding: 7px 10px;
  text-transform: uppercase;
  background: #333;
  color: white;
  cursor: pointer;
  transition: 0.3s all ease-in-out; }
  button.open-upload {
    margin-left: 20px; }
    button.open-upload a {
      color: white;
      text-decoration: none;
      display: block; }
  button:hover {
    background: #222; }

input, button, textarea, select {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  border-radius: 5px;
  color: #d9d9d9; }

  select {
    border: 6px solid #333;
    border-bottom-width: 5px;
    background: #333;
    color: #d9d9d9;
    border-radius: 5px;
    outline: 0;
    text-transform: uppercase; }

    .noUi-target {
      box-shadow: none;
      border: 0;
      border-radius: 8px;
      background: #aaa; }
      .noUi-target.noUi-vertical {
        height: calc(100% - 60px);
        width: 15px;
        background: transparent;
        border: 1px solid #333; }

.noUi-horizontal {
  height: 1px; }

  .noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
    box-shadow: none;
    border: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    cursor: grab;
    top: -10px;
    left: -4px; }
    .noUi-horizontal .noUi-handle:active, .noUi-vertical .noUi-handle:active {
      cursor: grabbing; }
      .noUi-horizontal .noUi-handle:before, .noUi-horizontal .noUi-handle:after,
      .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after {
        display: none; }

.noUi-origin .noUi-handle {
  background: #00ff19;
  outline: 0; }
  .noUi-origin .noUi-handle .noUi-touch-area {
    outline: 0; }
    .noUi-origin .noUi-handle .noUi-tooltip {
      border: 0; }
.noUi-origin[disabled] .noUi-handle {
  background: #333;
  cursor: pointer; }
  .noUi-origin[disabled] .noUi-handle .noUi-tooltip {
    background: #333;
    color: white; }

.noUi-pips {
  font-size: 11px; }

  .noUi-marker-horizontal.noUi-marker-large {
    height: 5px; }

    .noUi-marker-vertical.noUi-marker {
      background: #333;
      height: 1px; }

      .noUi-marker-horizontal.noUi-marker {
        width: 1px; }

        html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
          right: -7px; }

          .noUi-tooltip {
            font-size: 11px;
            padding: 3px; }

            .modal-window {
              position: fixed;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              z-index: 999;
              opacity: 0;
              pointer-events: none;
              background: rgba(0, 0, 0, 0.75);
              transition: all 0.3s ease-in-out; }
              .modal-window:target, .modal-window.open {
                opacity: 1;
                pointer-events: auto; }
                .modal-window.closed {
                  opacity: 0;
                  pointer-events: none; }
                  .modal-window > div {
                    width: 400px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    padding: 30px;
                    background: #111;
                    border: 1px solid #333; }
                    .modal-window > div .modal-graph {
                      height: 100%; }
              .modal-window.large > div {
                width: 80vw;
                height: 80vh; }
                .modal-window header {
                  padding: 0 0 15px; }

.modal-close {
  z-index: 1000;
  color: #aaa;
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  text-decoration: none;
  text-transform: uppercase; }
  .modal-close:hover {
    color: white; }

.reports-container {
  height: 100%;
  overflow: auto; }
  .reports-container .inner {
    max-width: 650px;
    margin: 60px auto 120px; }
    .reports-container h2 span {
      font-size: 16px;
      color: #d9d9d9;
      float: right; }
  .reports-container .reports-list {
    margin-top: 30px; }
    .reports-container .reports-list .report {
      font-size: 18px;
      color: #fff;
      text-decoration: none;
      border: 1px solid #333;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px; }