@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
.hydro-blue {
  color: #00447A;
}

.light-blue {
  color: #08b4f4;
}

.secondary-grey {
  color: #75787B;
}

.light-red {
  color: #F08080;
}

.bg-light-red {
  background-color: #F08080 !important;
}

.green {
  color: #63e6be;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  border-bottom: none;
  padding: 0 1rem;
  min-height: 80vh;
}

.row {
  margin-left: 0;
  width: 100%;
}
.row .column:first-child, .row .column:last-child {
  padding: 0;
}

.container {
  max-width: 100%;
}

a {
  color: #007381;
}
a:hover {
  color: #00447A;
}

label {
  font-size: 1.5rem;
}

#loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(233, 233, 233, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  border: 4px solid white;
  border-top: 4px solid #007381;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
}

h1 {
  font-weight: 400;
}

.error {
  color: #cc1f1a;
}

.sidebar-content a {
  font-size: 1.5rem;
}

#mapindex {
  width: 100%;
  height: auto;
  overflow-y: auto;
}
#mapindex ul {
  list-style: none;
}
#mapindex li {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}

select, input[type=date] {
  font-size: 1.2rem;
}

.sub-header {
  font-size: 1.5rem;
}

.highlight-text {
  font-size: 1.5rem;
  background-color: #F08080;
  color: white;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 10px;
}

p, .def-txt-size {
  font-size: 1.5rem;
}

.small-font {
  font-size: 1.2rem;
}

.std-font {
  font-size: 1.5rem;
}

.pagination.row {
  font-size: 1.2rem;
}

header {
  background-color: #007381;
  padding: 0 1rem 0 1rem;
  max-height: 10vh;
  position: relative;
}

#title {
  color: #f5f5f5;
  font-family: "Roboto", sans-serif;
}

#slogan {
  text-align: right;
  color: #f5f5f5;
  position: absolute;
  bottom: 0;
}

.logo {
  max-width: 7%;
  position: absolute;
  top: 0.5rem;
  transform: translate(0, 0.5rem);
  right: 1rem;
}

#footer-text {
  font-size: 1.5rem;
}

.env-tag {
  color: #fff;
  padding: 5px;
  width: 10%;
  font-weight: bold;
  font-size: 8pt;
  position: fixed;
  bottom: 0px;
  border-radius: 0 8px;
  text-align: center;
}
.env-tag.dev {
  background-color: #580087;
}
.env-tag.test {
  background-color: #fff44f;
  color: black;
}

button,
.button {
  background-color: #007381 !important;
  color: #fff !important; /*Fix for external buttons such as google maps, ensures that the text inside the buttons will always be white*/
  border: 0 !important;
}
button:hover:enabled,
.button:hover:enabled {
  box-shadow: inset 0 0 3px 1px #fff;
}

.input.radio .inline {
  display: inline-block;
}
.input.radio .inline label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
}

input[type=radio] {
  margin-right: 1rem;
}

.radio-buttons-wrapper label {
  font-size: 1.6rem;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 1.5rem;
}

.splide__arrow svg {
  fill: #fff !important;
}

/*====== Custom Radio Buttons =====*/
.dot {
  height: 1.2rem;
  width: 1.2rem;
  background-color: #f5f5f5;
  border-radius: 50%;
  border: solid #606c76 1px;
  display: inline-block;
}

.flex {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.custom-radio-btn-font {
  font-size: 1.5rem;
  color: #606c76;
  font-weight: 400;
}

.input-inline {
  line-height: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
}

table {
  line-height: 1;
  font-size: 1.2rem;
  width: 100%;
}
table th a {
  color: #fafafa;
  font-weight: 500;
}

table.data-table {
  table-layout: auto;
  word-break: break-word;
}
table.data-table th {
  width: auto !important;
  background-color: #007381;
  color: #fafafa;
  font-weight: 200;
  border-right: 1px solid white;
  padding: 1rem 0.5rem;
}
table.data-table th:first-child {
  border-radius: 0.4rem 0 0 0;
  text-indent: 0.5rem;
}
table.data-table th:last-child {
  border-radius: 0 0.4rem 0 0;
}
table.data-table th:first-child:last-child {
  border-radius: 0.4rem 0.4rem 0 0;
}
table.data-table td {
  padding-top: 5px;
  padding-bottom: 5px;
  border-left: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  padding: 1rem 0.5rem;
}
table.data-table td:first-child {
  padding-left: 0.5rem;
}
table.data-table td:last-child {
  padding-right: 0.5rem;
}
table.data-table td:nth-child(3) {
  max-width: 170px;
}

.bb-none {
  border-bottom: none;
}

.bb-grey {
  border-bottom: 0.1rem solid #e1e1e1;
}

.vertical-align-top {
  vertical-align: top;
}

.noborder .noborder-specific {
  border: none;
}

.nowrap {
  white-space: nowrap;
}

#display-profile-table {
  vertical-align: baseline;
}
#display-profile-table label {
  font-size: 1.2rem;
}

.dgraph-checkboxes td {
  text-align: center;
}
.dgraph-checkboxes label {
  font-size: 1.2rem;
  vertical-align: middle;
}

.spacing-reduction {
  padding: 0.3rem;
}

.dygraph-container {
  table-layout: fixed;
}

.paginator {
  margin-top: 2rem;
}
.paginator ul {
  list-style: none;
}
.paginator .pagination {
  place-content: center;
}
.paginator .pagination li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.paginator .pagination li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.paginator .pagination li.active a {
  box-shadow: 0 0 10px #777 inset;
}
.paginator .pagination a {
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #e9e9e9;
}
.paginator .pagination a:hover {
  background-color: #e9e9e9;
}

/* Flash messages */
.message {
  z-index: 10;
  min-width: 250px;
  color: #fff;
  text-align: center;
  border: 1px solid green;
  border-radius: 8px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 30px;
  padding: 1rem;
  animation: fadein 0.5s;
}
.message.hidden {
  display: none;
}
.message.success {
  background-color: #1f9d55;
  border-color: #51d88a;
}
.message.warning {
  background-color: #FF7518;
  border-color: #FF571F;
}
.message.error {
  background-color: #cc1f1a;
  border-color: #ef5753;
}
.message small {
  font-size: 70%;
}

/* Animations to fade the snackbar in and out */
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
.txt-align-right {
  text-align: right;
}

.no-wrap {
  white-space: nowrap;
}

.txt-align-center {
  text-align: center;
}

.sidebar-content {
  height: 80%;
  white-space: nowrap;
  max-width: 100%;
  width: auto !important;
  padding-right: 1rem !important;
}
.sidebar-content a {
  display: block;
  margin-bottom: 5px;
  padding-right: 2vw;
  margin-right: 0.5vw;
  padding-left: 15px;
}
.sidebar-content a:hover {
  background-color: #e9e9e9;
}
.sidebar-content a i {
  width: 30px;
  text-align: center;
}

.error-message {
  color: #cc1f1a;
}

.form-error {
  border-color: #cc1f1a !important;
}

.align-self-end {
  align-self: end;
}

.align-self-center {
  align-self: center;
}

input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=color], input[type=date], input[type=month], input[type=week], input[type=datetime], input[type=datetime-local], input:not([type]), textarea, select {
  background-color: transparent;
  border: 0.1rem solid #d1d1d1;
  border-radius: 0.4rem;
  box-shadow: none;
  box-sizing: inherit;
  height: 3rem;
  padding: 0.6rem 1rem;
  width: 100%;
}

fieldset, input:not([type=date]), textarea {
  margin-bottom: 0.5rem;
}

label, legend {
  margin-bottom: 0.5rem;
}

#progressbar {
  height: 20px;
  width: 100%;
  background-color: #e9e9e9;
  border-radius: 10px;
}
#progressbar::before {
  border-radius: 10px;
  height: 20px;
  top: 0;
  left: 0;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}
#progressbar.weak::before {
  width: 33.3%;
  content: "Weak Password";
  background: #F08080;
}
#progressbar.good::before {
  width: 66.3%;
  content: "Good Password";
  background: #08b4f4;
}
#progressbar.strong::before {
  width: 100%;
  content: "Strong Password";
  background: #63e6be;
}

.graph-container {
  vertical-align: top;
  display: flex !important;
  justify-content: center;
  position: relative;
  width: 40%;
  height: auto;
}
.graph-container .graph-image {
  padding: 1em 0;
  display: block;
}

.dygraph-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto;
}

.m-0 {
  margin: 0;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-10 {
  margin-top: 10rem;
}

.ml-1 {
  margin-left: 1rem !important;
}

.ml-2 {
  margin-left: 2rem;
}

.ml-10 {
  margin-left: 10rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 2rem;
}

.mr-10 {
  margin-right: 10rem;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-05 {
  margin-bottom: 0.5rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-10 {
  margin-bottom: 10rem;
}

.p-0 {
  padding: 0 !important;
}

.px-1 {
  padding: 0 1rem 0 1rem;
}

.py-05 {
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.pt-0 {
  padding-top: 0;
}

.py-1 {
  padding: 1rem 0 1rem 0;
}

.pt-1 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 5rem;
}

.pl-1 {
  padding-left: 1rem;
}

.pl-20 {
  padding-left: 20rem !important;
}

.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: 1rem;
}

.pr-2 {
  padding-right: 2rem;
}

.pr-5 {
  padding-right: 5rem;
}

.pr-10 {
  padding-right: 10rem;
}

.pb-0 {
  padding-bottom: 0;
}

.w-fit-content {
  width: -moz-fit-content;
  width: fit-content;
}

.width-1200 {
  max-width: 1200px;
}

.wperc-15 {
  width: 15%;
}

.wperc-20 {
  width: 20%;
}

.wperc-50 {
  width: 50% !important;
}

.wperc-100 {
  width: 100%;
}

.inline-block {
  display: inline-block;
}

.align-self-center {
  align-self: center;
}

.row .column.column-offset-5 {
  margin-left: 5%;
}

.flex-column {
  flex-direction: column;
}

.vh-80 {
  height: 80vh;
}

.pc-space-between {
  place-content: space-between;
}

.align-content-center {
  align-content: center;
}

.row .column.pr-0 {
  padding-right: 0;
}
.row .column.split-30 {
  flex: 0 0 30%;
  max-width: 30%;
}
.row .column.split-60 {
  flex: 0 0 60%;
  max-width: 60%;
}
.row .column.flex-content-fit {
  flex-basis: content;
}

nav {
  background-color: #e9e9e9;
  min-height: 3vh;
  width: 100% !important;
  align-items: center;
  padding: 0 1rem !important;
}

#mapindex {
  max-height: 460px;
}

.flexed-column {
  display: flex !important;
  align-items: center;
}

.legends {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  border: 1px solid grey;
}
.legends#legend-red {
  background-color: #f90000;
}
.legends#legend-amber {
  background-color: #ff7f27;
}
.legends#legend-blue {
  background-color: #0066ff;
}

.gmnoprint .gm-style-mtc:first-of-type {
  margin-right: 1rem;
}
.gmnoprint .gm-style-mtc:first-of-type button {
  border-start-start-radius: 0.4rem;
  border-end-start-radius: 0.4rem;
}
.gmnoprint .gm-style-mtc:last-of-type button {
  border-start-end-radius: 0.4rem;
  border-end-end-radius: 0.4rem;
}
.gmnoprint .gmnoprint div button img {
  filter: brightness(300%);
}

.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 80px;
  background-color: #75787B;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-top {
  bottom: 150%;
  left: 190%;
  margin-left: -60px;
}

.tooltip-left {
  top: -5px;
  bottom: auto;
  right: 150%;
}

/* Tooltip arrow */
.tooltip-top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-bottom: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: #75787B transparent transparent transparent;
}

.tooltip-left::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #75787B;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#deployment-banner {
  background-color: #F08080;
  color: black;
  justify-content: center;
  cursor: pointer;
}
#deployment-banner p {
  font-weight: 600;
}
#deployment-banner p i {
  font-weight: normal;
}/*# sourceMappingURL=style.css.map */