body {
   /* font-family: 'Barlow', sans-serif; */
   font-family: 'Karla', sans-serif;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;.wrap-login
   margin: 0;
}


/*!* Firefox *!*/
/*input[type=number] {*/
/*   -moz-appearance: textfield;*/
/*}*/
/* STORE */

.store-span-line{
    display: flex;
    flex-grow: 1;
    height: 1.7px;
    margin-left: 15px;
    background: #CCA870;
    align-self: center;
    justify-content: center;
}

/* STORE */
/*Sutro Pro App*/
.recommendation-status{
   text-align: center;
   background: green;
   color: #fff;
   border-radius: 50%;
   height: 40px;
   width: 40px;
   font-size: 11px;
   margin-right: 60px;
}


.health-status{
   text-align: center;
   background: red;
   color: #fff;
   border-radius: 50%;
   height: 40px;
   width: 40px;
   font-size: 15px;
   margin-right: 30px;
}
.customer-div{
   width: 100%;
}
.hidden {
	display: none !important;
}

.health-status-empty{
   text-align: center;
   background: transparent;
   color: #fff;
   border-radius: 50%;
   height: 40px;
   width: 40px;
   font-size: 15px;
   margin-right: 30px;
}

.search-input{
   margin-bottom: 20px;
}


.customer-border{
   border-top: 1px solid;
   padding-top: 10px;
   padding-bottom: 10px;
   padding: 10px;
}


.customer-border, .has-search{
   width: 100%;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #045e66;
}

body{
    background-color: transparent !important;
}

#iframe-loader>#loader{
    display: block !important;
}

.historyreadings, .hwdashboardreadings{
    background: #fff !important;
}


#iframe{
    display: none;
}

#iframe-loader{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 90%;
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: 0;
    background: initial;
    background-color: #045e66 !important;
    color: #fff !important;
    font-size: 1.0625em;
    margin: 0 auto;
}
.swal2-styled:focus{
    box-shadow: none !important;
}

.swal2-popup{
    border-radius: 0 !important;
    border: 1px solid #CCA870 !important;
    box-shadow: 0 0 5px 1px #cca870;
}

.has-search input::placeholder{
    opacity: 0.8;
    color: #045e66;
}

.has-search input, .has-search input:focus{
      opacity: 1;
    color: #045e66;
}
.pull-left{
   float: left !important;
}
.pull-right{
    float: right !important;
}
.pool-master-app .customer-data:last-child .customer-border, #no-result .customer-border{
   border-bottom: 1px solid;
}

.content h2 {
   font-family: 'Barlow', sans-serif;
   color: #045e66;
   margin: 0;
   text-align: center;
   font-size: 2.6em;
   font-weight: 400;
}

.hw-content h3,
.content-right h3, h3 {
   font-family: 'Barlow', sans-serif;
   color: #045e66;
   margin: 0;
   text-align: center;
   font-weight: 500;
   font-size: 1.3rem;
}

#history h2 {
   color: #4a4a4a;
   font-size: 18px;
   font-weight: bold;
   text-align: center;
   margin-bottom: 2px;
   margin-top: 15px;
}

.content h4 {
   font-family: 'Barlow', sans-serif;
   color: #045e66;
   margin: 0;
   text-align: center;
   font-size: 1rem;
}

.content h3 {
   font-family: 'Barlow', sans-serif;
   color: #045e66;
   margin: 0;
   text-align: center;
   font-size: 1.3rem;
   font-weight: bold;
}

.wrapper {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
}

.display-flex {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
}

.customer-div a{
   color: #045e66;
}

.customer-div a:hover, .customer-div a:focus{
   font-weight: bold;
   color: #045D67;
}

/*End Sutro Pro App*/
.clearfix {
   clear: both;
}


.wrapper {
   background: #fff;
   height: 100vh;
}

.content,
.hw-content {
   width: 100%;
}

.pdb-7 {
   padding-bottom: 7px;
}

.pdb-20 {
   padding-bottom: 20px;
}

.pdt-20 {
   padding-top: 20px;
}
.pdt-10{
   padding-top: 10px;
}

.form-group {
   margin-bottom: 10px;
}

.form-group p {
   text-align: center;
}

a{
    cursor: pointer;
}

/*---------------------------------------------*/
input {
	outline: none;
	border: none;
}

textarea {
  outline: none;
  border: none;
}

label {
  display: block;
  margin: 0;
}

/*---------------------------------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}


.limiter {
  width: 100%;
  margin: 0 auto;
}

.container-login {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-color: #f1f1f1;
}

.wrap-login {
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 55px;
  padding-bottom: 55px;
  width: 42%;
  background: #fff;
  position: relative;
  box-shadow: 0px 1px 7px 9px rgba(162, 162, 162, 0.12);
}

.logo-login{
    position: absolute;
    top: -134px;
    margin: 0 auto;
    width: 100%;
    left: 0;
}

.dataTable ::placeholder, .dataTable .form-control{
    font-size: 10px !important;
    color: #045d67 !important;
}

.login-form {
  width: 100%;
}
p.fancy{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 25px 0;
}

p.fancy:before, p.fancy:after {
    content: '';
    border-top: 1px solid #ccc;
    margin: 0 10px 0 10px;
    flex: 1 0 20px;
}

.input-login[readonly] {
    cursor: pointer;
    background-color: #e9ecef;
    opacity: 1;
    height: 44px;
}
.modal-body .input-login[readonly]{
    height: 55px;
}
.swall-overlay {
    z-index: 100005;
}
.swal-modal {
    z-index: 99999;
}

.validate-formula{
    border: 1px solid #cca870 !important;
    padding-bottom: 7.5px;
    margin-top: 0;
}

#example input{
    font-size: 1rem !important;
    color: #495057 !important;
    text-align: center;
}

.select21 {
  width: 100%;
}

.login-form-title {
  padding-bottom: 32px;
  font-size: 30px;
  color: #555555;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  display: block;
}
#account .login-form-title{
        margin-left: -10%;
    width: 120%;
}
.wrap-input-login {
  margin-bottom: 14px;
  width: 100%;
  position: relative;
  background-color: #fff;
  border: 1px solid #e6e6e6;
}

.register-here{
    padding-bottom: 48px;
}
#condition-test .wrap-input-login{
    margin-bottom: 55px;
}
.input-login {
  color: #555555;
  line-height: 1.2;
  font-size: 18px;
  display: block;
  width: 100%;
  background: transparent;
  height: 55px;
  padding: 0 25px 0 25px;
}

.input-login:focus{
  border: 1px solid #045e66;
}


.overlay .loader{
    font-size: 13px;
    width: 150px;
    height: 150px;
    left: 40%;
}
.overlay{
    width: 100%;
    position: relative;
    margin: 0 auto;
    margin-top: 200px;
}

.overlay h2{
    clear: both;
    padding-top: 20px;
    color: #c7a876;
    font-size: 20px;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

#loader{
    display: none;
}

.loading{
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color: #c8a775;
    font-size: 19px;
}

.loader {
    margin-left: -28px;
    font-size: 2px;
    position: relative;
    margin: 0 auto;
    border-top: 5.1em solid rgba(199,168,118, 0.2);
    border-right: 5.1em solid rgba(199,168,118, 0.2);
    border-bottom: 5.1em solid rgba(199,168,118, 0.2);
    border-left: 5.1em solid #c7a876;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#account .input-login:focus{
    height: 44px;
}

.btn-show-pass {
  font-size: 15px;
  color: #999999;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  position: absolute;
  height: 100%;
  top: 0;
  right: 12px;
  padding: 0 5px;
  cursor: pointer;
  -webkit-transition: background 0.4s;
  -o-transition: background 0.4s;
  -moz-transition: background 0.4s;
  transition: background 0.4s;
}

.btn-show-pass:hover {
  color: #045e66;
}

.btn-show-pass.active {
  color: #045e66;
}

.container-login-form-btn{
    width: 100%;
    margin: 0 auto;
}

.add-chemical{
    position: absolute;
    top: 10px;
    left: 10px;
}
.btn{
    border-radius: 0;
}
/*MODAL*/

.modal-content{
    border-radius: 0;
    box-shadow: 0 0 5px 1px #cca870;
    border-color: #cca870;
}
.modal-body{
    padding: 3% 7% 3% 7%;
}
.modal-dialog{
    max-width: 800px;
}
.modal-button{
    width: 100%;
    margin: 0 auto;
}
.modal-button input{
    width: 50%;
    height: 44px;
}
.modal-header .close{
    color: red;
    font-size: 2.2rem;
}

button.remove_field{
    color: red;
    font-size: 2.5rem;
    border: 1px solid red;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    opacity: .5;
    font-family: Arial;
}

button.remove_field:hover{
    opacity: .75;
}

.login-txt {
  padding-bottom: 11px;
  font-size: 13px;
  color: #555555;
  line-height: 1.4;
  text-transform: uppercase;
}

.login-txt-2 {
  font-size: 13px;
  color: #045e66;
  line-height: 1.4;
  font-weight: bold;
}
.login-txt-2:hover, .login-txt-2:active{
    color: #045e66;
}

.login-txt-3 {
  font-size: 13px;
  color: #555555;
  line-height: 1.4;

}
#login-top{
    font-size: 1.4rem;
    position: absolute;
    top: -29px;
    width: 50%;
    background: rgba(4, 94, 102, .9);
    color: #fff;
    padding: 14px;
    height: 55px;
}


.manual-txt {
  padding-bottom: 11px;
  font-size: 15px;
  font-weight: 700;
  color: #045e66;
  line-height: 1.4;
  text-transform: uppercase;
}

#manual-test input{
    border: 1px solid #cca870;
    height: 44px;
}

#manual-test #submit_manual{
    border: 1px solid #045e66;
    margin-top: 20px;
}

#manual-test .wrap-input-login{
    margin-bottom: 20px;
}

.manual-test{
    position: absolute;
    top: 20px;
    right: 20px;
}

#manual-test{
    margin-top: 30px;
}

#recommendations{
    display: none;
    padding: 15px;
    padding-top: 5px;
}

.manual-test a{
    padding: 10px;
}

.recommendation-holder{
    background: #dcdcdc3d;
    padding: 20px;
    color: #045e66;
    /*border-radius: 40px;*/
    margin-bottom: 10px;
}

.recommendation-holder p{
    margin-bottom: 0;
}

.customer-name-link{
    height: 45px;
    display: flex;
    align-items: center;
}

a#user-details{
    cursor: pointer;
    overflow: hidden;
}

form {
    padding-bottom: 15px;
}

#submit_sutro, #submit_sutro_db {
    height: 55px;
    padding: 0 25px 0 25px;
    width: 100%;
}

#submit_login {
   padding-left: 4.5rem;
   padding-right: 4.5rem;
}

.confirmation-code {
   width: 19%!important;
   float: left;
   margin-right: 8%;
   height: 70px;
   font-size: 2.5rem;
   text-align: center;
}

.form-code {
   margin-bottom: 40px;
   margin-top: 10px;
}

input.form-control.confirmation-code:nth-child(4) {
   margin-right: 0;
}

.form-control, .bootstrap-tagsinput {
   border: 1px solid #045e66;
   font-family: 'Karla', sans-serif;
   background: #fff;
   border-radius: 0;
}

.form-control-1{
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #f1f1f1;
    background-clip: padding-box;
    border: 1px solid #cca870;
    height: 38px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus {
   background-color: #FFFFFF;
   border-color: #0273808c;
   -webkit-box-shadow: none;
   box-shadow: none;
   outline: 0 !important;
}

.form-account {
   border: 1px solid;
   cursor: pointer;
   height: 44px;
}

.submit-input {
    margin-top: 10px;
   text-align: center;
}

.btn-sutro {
   background: #045e66 !important;
   color: #fff !important;
   border-color: #045e66;
   border-radius: 0;
}

.btn-sutro-seconday {
   background: #fff !important;
   color: #025d67 !important;
   border-radius: 0;
   border: 3px solid transparent;
   border-color: #cca870;
}

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:hover,
.btn-primary.hover,
.btn-primary.disabled,
.btn-primary:disabled {
   background-color: #7A9E9F !important;
   box-shadow: none !important;
   transition: all 150ms linear;
}

.btn-red{
   background: red !important;
   border-color: red !important;
}
.btn-red.focus,
.btn-red:active,
.btn-red:hover,
.btn-red.disabled {
   border-color: red !important;
   box-shadow: none !important;
}


.sutro-account form {
   width: 100%;
   margin: 0 auto;
}

.error_msg,
.error_msg_sutro,
.error_msg_phone {
   font-family: 'Barlow', sans-serif;
   color: red;
   font-size: 0.9rem;
   font-weight: bold;
}

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

.bold {
   font-weight: bold;
}

.sidebar {
   height: 100%;
   width: 260px;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: #F8F8F8;
   overflow-x: hidden;
   box-shadow: 0 0 5px 1px #cca870;
}
.my-account-form {
   margin-top: 30px;
}

#delete-modal{
    max-width: 50% !important;
}

.sidebar-content {
   padding-top: 20px;
   padding-left: 3rem;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
}

.upper-title,
.content-right {
   margin-top: 40px !important;
   margin-bottom: 40px !important;
}

.upper-title::after {
   content: '';
   display: block;
   width: 0;
   height: 1.5px;
   background: #CCA870;
   width: 20%;
   margin-right: auto;
   margin-left: auto;
   margin-top: 10px;
}

#dashboard .content,
#history .content,
#hardware .hw-content,
#cartridge .content,
#poolstore .content,
#integrations .content{
   margin-left: 260px;
   padding: 0px 10px;
   width: calc(100% - 260px);
}

#dashboard .wrapper{
   height: 100%;
   background: #ffffff;
}

.readings {
   color: #045e66;
   background-color: transparent;
   /*height: 250px;*/
   padding: 10px;
   padding-top: 20px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   /*border-radius: 20px;*/
   margin-left: 3%;
   box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
   width: 100%;
}

 /* pool store chemical styles */

#readings .poolstore-chemical-table {
    background-color: transparent ;
}
#readings .poolstore-chemical-table .scrollable {
    width: 100%;
    height: 120px;
    margin: 0;
    padding: 0;
    overflow: auto;
}
#readings .btn-chemical-store {
    background-color: transparent;
    color: #045d67;
    /* border-color: #CCA870; */
    border: 2px solid #cca870;
    width: 100%;
    margin: 0 5px;
}
#readings .text-teal {
    color: #045d67;
}

.poolstore-logout {
    display: flex;
}

.readings-lamotte {
   height: 310px;
}

.poolstore-pdf-content, .flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
}


.ht-100 {
   height: 100% !important;
}


.sidebar a,
nav a,
nav a:focus,
nav a:hover,
nav a:active {
   text-decoration: none;
   color: #045e66;
}

.sidebar h5 {
   display: flex;
   font-size: 1.25em;
}

h5 {
   font-size: 1.25em;
   font-weight: 400;
   line-height: 1.4em;
   margin-bottom: 15px;
}

.sidebar-content h5 span {
   display: flex;
   flex-grow: 1;
   height: 1.7px;
   margin-left: 15px;
   background: #CCA870;
   align-self: center;
   justify-content: center;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span,
a,
th,
td {
   font-family: 'Karla', sans-serif;
}

.pd-0 {
   padding: 0;
}

.red-error {
   color: red !important;
   font-weight: bold !important;
}

button.swal2-confirm.btn.btn-success {
    margin-left: 15px;
}

.wd-100{
    width: 100%;
}
input{
    border-radius: 0 !important;
}

input[type="radio"] {
    display: none;
}

#manual-test input[type=radio]:checked+label {
    border-color: #cca870;
}

#manual-test input[type=radio]+label {
    border: 1.5px solid #cca870;
    border-radius: 7px;
    padding: 10px;
}

#manual-test div p>span {
    display: inline-block;
    height: 32px;
    width: 32px;
    font-weight: 700;
}

#manual-test input[type=radio]+label p {
    padding-top: 20px;
    margin-bottom: 0;
}

#manual-test p{
    color: #045d67;
}

#manual-test input[type=radio]+label p span {
    padding: 3px 8px;
    border: 1px solid #cca870;
    border-radius: 4px;
    background-color: #fff;
    color: #cca870;
    font-weight: 700;
}


#manual-test input[type=radio]:checked+label p span {
    background-color: #cca870;
    color: #fff;
    font-weight: 700;
}

#manual-test input[type=radio]+label p span:after {
    content: ",";
    color: #fff;
}


#manual-test input[type=radio]:checked+label p span:after {
    content: "✓";
}

#select-images .pull-left{
    padding-bottom: 1rem;
    padding-left: 0;
}

#select-images .pull-left:nth-child(6n+1){
    clear: both !important;
}

label img{
    height: 100%;
}


.health-status{
 cursor: pointer;
}

#readings-content .loader, #readings-content .loader:after {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border-width: 4px !important;
}

#readings-content .loading{
    margin-top: 2px;
    font-size: 15px;
}

#readings-content .latest-readings-item{
    margin-left: 5px;
    margin-right: 5px;
}

#readings-content .loading{
    width: auto;
    padding-top: 6px;
    padding-left: 11px;
}


.modal-body h3{
    text-align: left;
}

.table .buttons button {
    margin: 0 5px;
    width: 90px;
}

.table .buttons{
    display: flex;
}

table.dataTable thead th{
    padding: 10px 10px;
}
table.dataTable tbody td{
    padding: 8px 18px;
}


.chemical-form-card, .treatment-form-card{
    float: left;
    padding-left: 0;
    padding-right: 5px;
}

button.add_field_button.btn.btn-sutro.btn-primary{
    margin: 0 auto;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wd-100{
    width: 100%;
}

.condition-style{
    padding: 0;
    margin-right: 15px;
}

#condition-test select, #condition-test .login-txt{
    margin-right: 2.15%;
}

.dropdown.bootstrap-select.col-lg-3.pull-left.form-control {
    margin-right: 2.15%;
}

.bootstrap-select .dropdown-menu{
    min-width: 100% !important;
    max-width: 100% !important;
}

::placeholder{
    color: #999 !important;
}
#condition-test .login-txt{
    padding-left: 0 !important;
    padding-right: 0 !important;
}


#condition-test .wrap-input-login{
    border: none;
}
/*#condition-test .treatment-form-card{*/
/*    margin-bottom: 20px;*/
/*}*/

.form-control, .bootstrap-tagsinput {
    border: 1px solid #cca870;
    height: 38px;
    /*height: auto !important;*/
}

#tag-style .bootstrap-tagsinput{
    height: auto !important;
}


.bootstrap-tagsinput{
    padding: 0 6px;
}
.bootstrap-tagsinput input{
    height: 38px;
    width: 100%;
    max-width: 100%;
}

.tt-input{
    vertical-align: baseline !important;
}

.dropdown-menu, span.twitter-typeahead .tt-menu{
    border-radius: 0;
}

.login-txt {
    padding-bottom: 11px;
    font-size: 15px;
    color: #045e66;
    line-height: 1.4;
    text-transform: uppercase;
}


input[type="radio"] {
    display: none;
}

.treatment-form-card input[type=radio]:checked+label {
    border-color: #cca870;
}

.treatment-form-card input[type=radio]+label {
    border: 1.5px solid #cca870;
    /*border-radius: 7px;*/
    padding: 5px;
}

.treatment-form-card div p>span {
    display: inline-block;
    height: 20px;
    width: 20px;
    font-weight: 700;
}

.treatment-form-card input[type=radio]+label p {
    padding-top: 20px;
    margin-bottom: 0;
    font-size: 12px;
}

.treatment-form-card p{
    color: #045d67;
}

.treatment-form-card input[type=radio]+label p span {
    padding: 0px 4px;
    border: 1px solid #cca870;
    /*border-radius: 4px;*/
    background-color: #fff;
    color: #cca870;
    font-weight: 700;
}


.treatment-form-card input[type=radio]:checked+label p span {
    background-color: #cca870;
    color: #fff;
    font-weight: 700;
}

.treatment-form-card input[type=radio]+label p span:after {
    content: ",";
    color: #fff;
}

.treatment-form-card input[type=radio]:checked+label p span:after {
    content: "✓";
}

#select-images .pull-left{
    padding-bottom: 1rem;
    padding-left: 0;
}

#select-images .pull-left:nth-child(6n+1){
    clear: both !important;
}

label img{
    height: 100%;
    max-height: 140px;
}

#dashboard .modal-dialog{
    width: 80% !important;
    max-width: 80%;
}

#treatment-from-edit select{
    float: left;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

#treatment-from-edit input{
    float: left;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

#treatment-from-edit{
    padding-bottom: 1px !important;
}

.dropdown-menu{
    border-radius: 0 !important;
}

.modal-dialog.treatment-view .treatment-form-card input[type=radio]+label, .modal-dialog.treatment-view .treatment-form-card input[type=radio]+label p span{
    background-color: #e9ecef;
}

.modal-dialog.treatment-view input[type=radio]+label p span:after {
    content: ",";
    color: #e9ecef;
}

.modal-dialog.treatment-view input[type=radio]:checked+label p span:after {
    content: "✓";
    color: #cca870;
}

.bootstrap-select {
    width: 100% !important;
    border: 1px solid #cca870 !important;
    /*height: 38px;*/
    background: #fff !important;
}

.item {
    width: 100px;
    Height: 100px;
    background: #EEE;
    padding: 20px;
    cursor: pointer;
}

.tooltip {
    cursor: pointer;
    padding: 20px;
    padding-right: 32px;
    background: #EEE;
    position: absolute;
    left: 1px;
    top: -30px;
    /*transform: translate(-50%,-50%);*/
    display: none;
    z-index: 1999;
    text-transform: none;
    border: 1px solid #cca770;
}
.tooltip:after {
    content: "×";
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    top: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5px;
    z-index: 988;
    color: red;
    font-size: 23px;
    height: 26px;
}
.hide {
    display: none;
}
.show {
    display: block;
}

.icon-info{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    margin-left: 6px;
    background-size: 20px 20px;
    background-color: #045e66;
    -webkit-mask-image: url(/static/incodeks-inrec/images/info-icon.svg);
    mask-image: url(/static/incodeks-inrec/images/info-icon.svg);
    cursor: pointer;
}

.textcomplete-dropdown{
    z-index: 9999 !important;
}

.dropdown-toggle.bs-placeholder, .dropdown-toggle{
    height: 36px !important;
    background: #fff !important;
}

.filter-option:focus{
    border: none !important;
}

.bootstrap-select .dropdown-toggle:focus{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark, .dropdown-toggle::after{
    color: #cca870;
}

.tagsinput .tag {
    position: relative;
    background: #cca870;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    color: #fff;
    padding: 5px 30px 5px 5px;
    border-radius: 0;
    margin: 0 5px 5px 0;
}


/* Typeahead theming */
span.twitter-typeahead {
  width: auto;
}

/* Tagsinput theming */
.bootstrap-tagsinput .badge {
    padding: 6px 8px 6px 13px;
    border-radius: .5rem;
    font-size: 1em;
    font-weight: normal;
}
.bootstrap-tagsinput .badge-light {
    background-color: #cca870;
    border: none;
    border-radius: 0;
    margin-right: 9px;
    color: #fff !important;
    max-width: 100%;
    overflow: hidden;
}

.bootstrap-tagsinput .badge [data-role="remove"]:after{
    content: "\00274C";
    background: none !important;
    background-color: rgba(255, 0, 0, 0.4);
    padding-top: 0;
    font-size: 11px;
}

.bootstrap-tagsinput .badge [data-role="remove"]:hover:after {
    background: none !important;
    background-color: rgba(255, 0, 0, 1);
}

.bootstrap-tagsinput .badge [data-role="remove"]{
    background-color: rgba(255, 255, 255, 0.5);
}
.bootstrap-tagsinput .badge [data-role="remove"]:hover{
    background-color: rgba(255, 255, 255, 1);
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 768px) {
    .upper-title{
        margin-bottom: 20px !important;
    }
    .mbp-0, #dashboard .content{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .login{
        overflow: hidden;
    }

    .recommendation-status, .health-status{
        margin-right: 10px;
    }
    .customer-border{
        padding-left: 0;
    }
    .manual-test {
        position: relative;
        margin: 0 auto;
        padding-bottom: 20px;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
    }
    #readings{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

   .readings{
      margin: 0 auto;
      height: auto;
   }
   .single-cartridge {
      height: 100px;
   }
   #login-account.wrapper {
      background: #fff !important;
   }
   #login-account .content {
      padding-top: 10px !important;
      padding-bottom: 0 !important;
   }

   .menu-mobile {
      display: block;
   }
   .sidebar {
      display: none;
   }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (max-width: 600px) {
        .customer-border{
            display: block !important;
            align-items: normal !important;
        }
        #readings-content{
            width: 75%;
        }
        div#readings-content {
             margin: 0 auto !important;
             max-width: 100% !important;
             padding-left: 0 !important;
        }

        #readings-content .latest-readings-item{
            margin-left: 7px;
            margin-right: 7px;
        }

        .customer-name-link{
            display: block !important;
            /*text-align: center;*/
            clear: both;
            padding-top: 10px;
            padding-left: 20px !important;
            padding-bottom: 10px;
        }
        .latest-readings {
            padding-left: 20px !important;
            padding-top: 10px;
            margin-bottom: 10px;
        }
        .health-status{
            margin-right: 10px;
            margin-left: 17px;
            margin-bottom: 10px;
            margin-top: 10px;
        }
        .customer-name-link a{
            text-align: center !important;
        }

        #manual-test .col-3{
            max-width: 100%;
        }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 992px) {

    #dashboard .modal-dialog{
        width: 97% !important;
        max-width: 97%;
    }

    .customer-name-link {
        height: auto;
        overflow: visible;
        display: flex;
        align-items: center;
        word-break: break-word;
    }
   .parentTabs{
      padding-left: 0;
      padding-right: 0;
   }
    #login-top {
        font-size: 1.2rem;
        width: 80%;
    }
    .logo-login{
        top: -23%;
    }
    .wrap-login {
      padding-left: 10%;
      padding-right: 10%;
      padding-top: 50px;
      margin-top: 25%;
      padding-bottom: 55px;
      width: 100%;
      background: #fff;
      position: relative;
      box-shadow: 0px 3px 4px 6px rgba(162, 162, 162, 0.12);
    }
   .readings {
      margin-left: 0;
   }
   .sidebar-content h5 span {
      display: flex;
      flex-grow: 1;
      height: 1.7px;
      margin-left: 27%;
      width: 69%;
      margin-top: -13px;
      margin-bottom: 23px;
      float: right;
   }
   .sidebar-content a {
      display: block;
   }

   .sidebar {
      display: none;
   }
   #dashboard .content,
   #history .content,
   #hardware .hw-content,
   #cartridge .content,
   #poolstore .content,
   #integrations .content{
      margin: 0 auto;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      overflow: hidden;
   }
   .readings,
   .shipments,
   .zendesk,
   .cartridge-history,
   .cartridge-history-bottom,
   .poolstore-bottom {
      margin-bottom: 40px;
   }
   .readings-lamotte {
      height: auto;
   }
   .menu-mobile {
      display: block;
   }
   .sutro-account form {
      width: 100%;
   }

   .flex-center.search-input {
        display: block;
    }
   .add-customer{
       position: relative;
       width: 100%;
       display: block;
       margin-bottom: 5px;
   }
   .add-customer a{
       width: 100%;
   }
    .modal-button input {
        width: 100%;
        height: 44px;
    }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
    .readings{
       width: 100% !important;
       margin: 0 auto;
       height: auto;
       margin-bottom: 50px;
    }
    .customer-border{
       width: 60%;
    }
    .has-search{
       width: 40%;
    }
    .menu-mobile {
      display: none;
    }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    .modal-w-80{
        width: 70% !important;
        max-width: 70% !important;
    }

    #select-images .pull-left:nth-child(6n+1){
        clear: both !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .customer-border{
        width: 100%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1450px) {
    .customer-border{
        width: 90%;
    }
}


