.sutro-main-notification{
  padding: 10px;
  text-align: center;
  background-color: #045D67;
  font-family: 'Barlow Condensed', serif;
}
/*font-family: 'Barlow Condensed', serif;*/
/*font-family: 'Karla', serif;*/
.sutro-notification-message{
  font-weight: bold;
  font-size: 24px;
  color: white;
  font-family: 'Karla', serif;
}

.sutro-values-notification{
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  background-color: #045D67;
  font-family: 'Karla', serif;
}

.sutro-values-header{
  font-weight: bold;
  font-size: 18px;
  color: #C7A877;
  font-family: 'Barlow Condensed', serif;
}

.sutro-values-list{
  color: white;
  font-family: 'Karla', serif;
}

.sutro-mychem-row{
  padding: 10px;
  color: rgb(130, 132, 132);
  font-family: 'Karla', serif;
}

.sutro-mychem-col {
  text-align: left;
  font-family: 'Karla', serif;
}

.sutro-mychem-button{
  padding: 10px;
  background-color: rgb(36, 37, 87);
  color: white;
  font-weight: bold;
  border: 0;
  /*border-radius: 5px;*/
  font-family: 'Karla', serif;
}

.sutro-advice-header{
  background-color: rgb(233, 170, 84);
  padding-top: 0;
  margin-top: -10px;
  font-family: 'Barlow Condensed', serif;
}

.sutro-manual-reading-button{
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  background-color: rgb(36, 37, 87);
  color: white;
  font-weight: bold;
  font-size: 28px;
  border: 0;
  font-family: 'Barlow Condensed', serif;
}

.sutro-advice-dark{
  font-weight: bold;
  color:rgb(36, 37, 87);
  font-size: 40px;
  font-family: 'Barlow Condensed', serif;
}
/*.pie-wrapper {*/
/*  @include size($default-size, $default-size);*/
/*  float: left;*/
/*  margin: 15px;*/
/*  position: relative;*/

/*  &:nth-child(3n + 1) {*/
/*    clear: both;*/
/*  }*/

/*  .pie {*/
/*    @include size(100%, 100%);*/
/*    clip: rect(0, $default-size, $default-size, $default-size / 2);*/
/*    left: 0;*/
/*    position: absolute;*/
/*    top: 0;*/

/*    .half-circle {*/
/*      @include size(100%, 100%);*/
/*      border: ($default-size / 10) solid #3498db;*/
/*      border-radius: 50%;*/
/*      clip: rect(0, $default-size / 2, $default-size, 0);*/
/*      left: 0;*/
/*      position: absolute;*/
/*      top: 0;*/
/*    }*/
/*  }*/

/*  .label {*/
/*    background: $bg-color;*/
/*    !*border-radius: 50%;*!*/
/*    bottom: $label-font-size-redo / 10;*/
/*    color: #ecf0f1;*/
/*    cursor: default;*/
/*    display: block;*/
/*    font-size: $label-font-size;*/
/*    left: $label-font-size-redo / 10;*/
/*    line-height: $label-font-size-redo * .70;*/
/*    position: absolute;*/
/*    right: $label-font-size-redo / 10;*/
/*    text-align: center;*/
/*    top: $label-font-size-redo / 10;*/

/*    .smaller {*/
/*      color: #bdc3c7;*/
/*      font-size: .45em;*/
/*      padding-bottom: 20px;*/
/*      vertical-align: super;*/
/*    }*/
/*  }*/

/*  .shadow {*/
/*    @include size(100%, 100%);*/
/*    border: $default-size / 10 solid #bdc3c7;*/
/*    border-radius: 50%;*/
/*  }*/

/*  &.style-2 {*/
/*    .label {*/
/*      background: none;*/
/*      color: #7f8c8d;*/

/*      .smaller {*/
/*        color: #bdc3c7;*/
/*      }*/
/*    }*/
/*  }*/

/*  &.progress-30 {*/
/*    @include draw-progress(30, #3498db);*/
/*  }*/

/*  &.progress-60 {*/
/*    @include draw-progress(60, #9b59b6);*/
/*  }*/

/*  &.progress-90 {*/
/*    @include draw-progress(90, #e67e22);*/
/*  }*/

/*  &.progress-45 {*/
/*    @include draw-progress(45, #1abc9c);*/
/*  }*/

/*  &.progress-75 {*/
/*    @include draw-progress(75, #8e44ad);*/
/*  }*/

/*  &.progress-95 {*/
/*    @include draw-progress(95, #e74c3c);*/
/*  }*/
/*}*/

/*.pie-wrapper--solid {*/
/*  border-radius: 50%;*/
/*  overflow: hidden;*/

  /*&:before {*/
  /*  border-radius: 0 100% 100% 0 / 50%;*/
  /*  content: '';*/
  /*  display: block;*/
  /*  height: 100%;*/
  /*  margin-left: 50%;*/
  /*  transform-origin: left;*/
  /*}*/

  /*.label {*/
  /*  background: transparent;*/
  /*}*/

/*  &.progress-65 {*/
/*    @include draw-progress--solid(65, #e67e22, $bg-color);*/
/*  }*/

/*  &.progress-25 {*/
/*    @include draw-progress--solid(25, #9b59b6, $bg-color);*/
/*  }*/

/*  &.progress-88 {*/
/*    @include draw-progress--solid(88, #3498db, $bg-color);*/
/*  }*/
/*}*/

/*@import url(https://fonts.googleapis.com/css?family=Lato:700);*/

/*// -- vars*/
/*$bg-color: #34495e;*/
/*$default-size: 1em;*/
/*$label-font-size: $default-size / 4;*/
/*$label-font-size-redo: $default-size * 4;*/

/*// -- mixins*/
/*@mixin size($width, $height) {*/
/*  height: $height;*/
/*  width: $width;*/
/*}*/

/*@mixin draw-progress($progress, $color) {*/
/*  .pie {*/
/*    .half-circle {*/
/*      border-color: $color;*/
/*    }*/

/*    .left-side {*/
/*      transform: rotate($progress * 3.6deg);*/
/*    }*/

/*    @if $progress <= 50 {*/
/*      .right-side {*/
/*        display: none;*/
/*      }*/
/*    } @else {*/
/*      clip: rect(auto, auto, auto, auto);*/

/*      .right-side {*/
/*        transform: rotate(180deg);*/
/*      }*/
/*    }*/
/*  }*/
/*}*/

/*@mixin draw-progress--solid($progress, $color, $bg-color) {*/
/*  background: linear-gradient(to right, $color 50%, $bg-color 50%);*/

/*  &:before {*/
/*    @if $progress <= 50 {*/
/*      background: $bg-color;*/
/*      transform: rotate((100 - (50 - $progress)) / 100 * 360deg * -1);*/
/*    } @else {*/
/*      background: $color;*/
/*      transform: rotate((100 - $progress) / 100 * 360deg);*/
/*    }*/
/*  }*/
/*}*/

/*// -- selectors*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

.tooltip{
    background-color: #a8dadc;
    border:none;
    opacity: 1;
    visibility:hidden;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;

}
.tooltip-container{
    color: #fff44f;
}
.tooltip-container:hover .tooltip {
      visibility: visible !important;

}
.tooltip > .tooltip-inner {background-color: #eebf3f; padding:5px 15px; color:rgb(23,44,66); font-weight:bold; font-size:13px;}
.popOver + .tooltip > .tooltip-arrow {	border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #eebf3f;}

section{
  margin:100px auto;
  height:1000px;
}
.progress{
  border-radius: 25px;
}
.progress {
  background-color: #aaa;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.progress-bar{
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}

.panel-heading{
  padding: 10px 15px 0 15px;
}

.nav-tabs
 {
   border-color:#045D67 !important;
   width:60% !important;
   border-bottom-color: transparent !important;

 }

.nav-tabs > li a {
    border: 1px solid #045D67 !important;
    background-color:#045D67 !important;
    color:#fff !important;
    }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
    background-color:#fff !important;
    color:#000 !important;
    border: 1px solid #1A3E5E !important;
    border-bottom-color: transparent !important;
    }

.nav-tabs > li > a:hover{
  background-color: #D6E6F3 !important;
    border-radius: 5px !important;
    color:#000 !important;

}

.sidebar,
.sidebar-wrapper{
  background-color:#045D67;
}

.sidebar[data-background-color="black"] .nav li:not(.active) > a, .off-canvas-sidebar[data-background-color="black"] .nav li:not(.active) > a{
  color:#7BA7AF;
}

.sidebar[data-active-color="success"] .nav li.active > a, .off-canvas-sidebar[data-active-color="success"] .nav li.active > a{
  color:#ffffff;
}

/*Chemical Register*/
.chemical-add{
  max-height: 100%;
  min-height: 100vh;
  padding: 30px;
  margin: auto;
}
.chemical-add h1{
  font-family: 'Karla', sans-serif;
  color: #045d67;
  margin-top: 0;
}
.chemical-add label{
  color: #045D67;
}
.chemical-add span ,
.update-profile span {
    display: none;
}
.chemical-add input[type="radio"] ,
.update-profile input[type="radio"] {
    display: none;
}
.chemical-add input[type="radio"] + label{
    border: 1.5px solid rgba(4, 93, 103, 0.31);
    border-radius: 7px;
    padding: 10px 10px;
    width: inherit;
    height: 100%;
}
.update-profile input[type="radio"] + label {
    border: 1.5px solid rgba(4, 93, 103, 0.31);
    border-radius: 7px;
    padding: 10px 10px;
    height: 96px;
    width: 100%;
}
.chemical-add input[type="radio"]:checked + label,
.update-profile input[type="radio"]:checked + label{
    border-color: #045D67;
}
.chemical-add input[type="radio"] + label img,
.update-profile input[type="radio"] + label img {
    border-radius: 5px;
    object-fit: contain;
}
.chemical-add input[type="radio"] + label p {
    padding-top: 20px;
    margin-bottom: 0;
    width: inherit;
    display: flex;
}
.update-profile input[type="radio"] + label p {
    padding-top: 20px;
    margin-bottom: 0;
    width: inherit;
    display: flex;
    font-size: 12px;
}

.chemical-add input[type="radio"]:checked + label p span::after,
.update-profile input[type="radio"]:checked + label p span::after{
    content: '';
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e")!important;
    background: no-repeat;
}

.chemical-add input[type="radio"] + label p input,
.update-profile input[type="radio"] + label p input{
  border: none;
}
.chemical-add input[type="radio"] + label > div,
.update-profile input[type="radio"] + label > div{
    width: inherit;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}
.chemical-add input[type="radio"] + label p span ,
.update-profile input[type="radio"] + label p span {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 3px 8px;
    border: 1px solid rgba(4, 93, 103, 0.64);
    border-radius: 4px;
    background-color: #fff;
    color: #045D67;
    font-weight: bold;
    margin-right: 10px;
}
.chemical-add input[type="radio"]:checked + label p span ,
.update-profile input[type="radio"]:checked + label p span {
    background-color: #045D67;
    color: #fff;
    font-weight: bold;
    position: relative;
}
@media (min-width: 320px) and (max-width: 768px) {
  .chemical-add .col-3{
    flex: 0 0 50%;
    max-width: 50%;
  }
  .chemical-add input[type="radio"] + label p,
  .update-profile input[type="radio"] + label p{
    overflow: auto;
  }
}

/* Latest test results */
.latest-test-results .card h4{
    color: #045D67;
    text-align: center
}
.latest-test-results .card p{
    color: gray;
}
.latest-test-results .card{
    background-color: transparent;
    box-shadow: 0 0 0;
}
/*
flip card
*/
.latest-test-results .card-flip > div {
    backface-visibility: hidden;
    transition: transform 300ms;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    transition-timing-function: linear;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
}
.latest-test-results .card-flip .card-body{
    width: inherit;
}
.latest-test-results .card-front {
    transform: rotateY(0deg);
    background-color: whitesmoke;
}

.latest-test-results .card-back {
    transform: rotateY(180deg);
    background-color: whitesmoke;
    position: absolute;
    top: 0;
}

.latest-test-results .card-flip:hover .card-front {
  transform: rotateY(-180deg);
}

.latest-test-results .card-flip:hover .card-back {
  transform: rotateY(0deg);
}
/* Water analysis*/
.water-analysis{
    border-bottom: 1px solid #C7A877;
    margin-bottom: 10px;
}
.water-analysis h1{
    font-size: 27px;
    margin-top: 0;
}
.mobile{
    display: none;
}
.desktop{
    display: block;
}
.card{
    margin-bottom: 10px;
}
@media (min-width: 320px) and (max-width: 768px) {
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }
}
#chemical-values .progress{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#chemical-values .progress .progress-bar{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

/*LATEST VISITS -- LOGS  */
.logs .card{
    cursor: pointer;
}
.logs .card h4{
    margin: 5px;
    text-align: center;
    color: #045D67;
}