/******************************MEDIA QUERIES***********************/
@media (min-width:2280px) {
    .container {
        width: 2100px;
    }
}

@media (min-width:1900px) {
    .container {
        width: 1700px;
    }
}

@media (min-width:1600px) {
    .container {
        width: 1400px;
    }

}

@media screen and (max-width: 1500px) {
    .top-right.float-end {
        position: relative;
        z-index: 9;
        width: 90%;
        display: flex;
        margin: 20px  50px;
    }

    .threshold-tabs ul#pills-tab li button {
        font-size: 13px !important;
        width: 100% !important;
    }
    .valve-alarm-tab ul#pills-tab li {
        width: 234px;
    }

       .user-sec.float-end {
           position: absolute;
           top: 12px;
       }
        header#desktop-version ul {
            padding: 0;
            text-align: left;
            margin: 0;
        }
.fill-left-menu {
    padding: 0px 0 40px 0;
}
#m-chart1 canvas#BA-chart-job-error {
    height: 43vh !important;
}
body#dashboard_features {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10%;
}
#m-chart1 canvas#BA-chart-job-error {
    height: 65vh !important;
    margin: 50px auto 0;
}
h4.t-headingg {
    font-size: 16px;
}
.t-count li {
    font-size: 13px;
}
.row.top-statt {
    background: #f4f7ff;
    z-index: 9;
    position: relative;
    width: 100%;
}
div#comm_status_table_section {
    /* margin: 42% 0 0 0; */
}
}
@media screen and (max-width: 1373px){
.main-header {
    width: 78%;
}
.top-statt {
    width: 79%;
    top: 15.9%;
}
.valve-status-tab {
    margin: 24px 0 0 0;
}
.fill-right-menu {
    width: 76.8%;
}
.fill-left-menu {
    width: 22%;
}
#comm_status_table_section h4.hover-heading {
    font-size: 13px;
}
/* .top-right {
    margin: 12px 4% 0px;
}*/
h4.hover-heading {
    font-size: 16px;
    margin: 33px 0 10px 0;
}
.top-right {
    margin: 12px 1% 0px;
}
}
@media screen and (max-width: 1367px) {
header#desktop-version ul li {
    display: inline-flex;
    padding: 0 10px 0 0px;
    text-align: center;
}
header#desktop-version ul {
    padding-right: 120px;
    text-align: right;
    margin: 0;
}
.toggle-buttons {
    float: right;
    margin: 5px 0 0 0;
}
    .main-header input[type="date"] {
        width: 53%;
    }
    .valve-tabs-each .nav-pills .nav-link {
        width: 237px !important;
        font-size: 15px !important;
    }
    .threshold1-tabs .nav-pills .nav-link {
        width: 250px !important;
        font-size: 15px !important;
    }
    .report-tab .nav-pills .nav-link {
        width: 100% !important;
        font-size: 15px !important;
    }
.site-tabs .nav {
    flex-wrap: wrap;
}
button.csv_download {
    margin: 28px 0 14px 11px;
    font-size: 9px;
}
.user-box {
    top: 47px;
    right: -5px;
}
}

@media screen and (max-width:1300px){
.site-tabs .nav-pills .nav-link {
    padding: 10px 10px !important;
    width: 192px;
}
#m-chart1 canvas#BA-chart-job-error {
    height: 48vh !important;
}
}
@media screen and (max-width:1200px){

    .main-header input[type="date"]{
        width: 100%;
    }
    .site-tabs .nav {
        position: inherit;
    }
    .sticky{
        display: none;
    }
.user-sec {
    position: absolute;
    width: 16%;
    top: 13px;
    right: 24px;
    right: 0;
    /* bottom: 130px; */
}
#m-chart1 canvas#BA-chart-job-error {
    margin: 0 auto;
    width: 100% !important;
    height: 33vh !important;
}
    .valve-tabs-each {
        position: inherit !important;
    }
.toggle-s-box {
    margin: 76% 0 0 0;
    /* display: inline-block; */
}
.site-tabs .nav-pills .nav-link {
    padding: 10px 10px !important;
}
}
@media screen and (max-width: 1199px) {
.fill-left-menu {
    width: 225px;
    position: static;
}
li.nav-item.main-site-menu-each.active {
    position: relative;
}
#m-chart1 canvas#BA-chart-job-error {
    margin: 0 auto;
    width: 100% !important;
    height: 45vh !important;
}
}
@media screen and (max-width: 1167px){
.site-tabs .nav-pills .nav-link {
    padding: 10px 0px !important;
    width: 165px;
}
.fill-left-menu {
    width: 210px;
    position: inherit;
}
}

@media screen and (max-width: 1100px) {
.new-login-form-area {
              background: none;
          }
          section.new-login {
              height: 100%;
          }
    .site-tabs .nav-pills .nav-link.active img, .site-tabs .nav-pills .show>.nav-link img, .site-tabs .nav-pills .nav-link img {
        width: 44px;
        float: none;
        display: block;
        margin: 0 auto;
    }
     .site-tabs .nav-pills .nav-link {
            padding: 10px 15px !important;
        }
.toggle-s-box {
    margin: 53px 0 0;
}
}
@media screen and (max-width: 1026px) {
.site-tabs .nav-pills .nav-link {
    padding: 10px 0px !important;
    width: 195px;
}
.main-header {
    /* background: var(--bg-color); */
    /* box-shadow: 0 0 10px var(--color10); */
    padding: 0 20px 0 38px;
    /* border-bottom: 1px solid #b9b9b9 !important; */
    border-image-source: linear-gradient(to right,  #0791a8 48%,#e64c25 48%,#e64c25 48%) !important;
    border-top: 3px solid;
    border-image-slice: 1;
    border-width: 5px;
}
#m-chart1 canvas#BA-chart-job-error {
    margin: 0 auto;
    width: 100% !important;
    height: 33vh !important;
}
}
@media screen and (max-width: 995px) {
   .site-tabs .nav-pills .nav-link.active, .site-tabs .nav-pills .show>.nav-link, .site-tabs .nav-pills .nav-link {
       padding: 10px 10px 10px !important;
       width: 100% !important;
       margin: 0 !important;
   }

.color-palette {
    width: 37px;
    height: 37px;
    border-radius: 5px;
    color: var(--bg-color);
    line-height: 34px;
    background: var(--color1);
    position: absolute;
    top: 19px;
    right: 19%;
}
    .container {
        width: 950px !important;
    }
    header#desktop-version{
        display: none;
    }
    header#responsive-version {
        display: block;
        background: #fff;
    }

    .menu-res {
        display: none;
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 80px;
        background: var(--color1);
        z-index: 999999;
        height: auto;
        padding: 30px;
    }

    .fill-left-menu {
        height: auto;
        position: inherit;
        left: 0;
        width: auto;
        overflow-y: auto;
    }

    .sel-group label,  .main-date-pick form label {
        color: var(--bg-color);
        font-weight: 600;
        width: 100%;
        padding-bottom: 6px;
    }
    .sel-group select {
        width: 100%;
        border: none;
        height: 35px;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .main-date-pick form input[type="date"] {
        width: 100%;
        border: none;
        height: 35px;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .menu-toggle {
        color: var(--bg-color);
        font-size: 17px;
        cursor: pointer;
        text-align: right;
        display: inline-block;
        font-weight: 800;
        margin: 20px 0 0 0;
        padding: 5px 10px;
        position: absolute;
        top: 0;
        left: 20px;
        background: var(--color2);
    }
.logo-area img {
    margin: 2px auto 20px;
    display: block;
    width: 72px;
}
    .user-sec {
        margin-bottom: 20px;
        /* bottom: 0; */
        height: 0;
    }
    ul.menu li a {
        color: #000;
        padding: 19px 17px;
        display: block;
    }


    .menu-toggle .fa {
        /* position: absolute; */
        /* top: 25px; */
        /* right: 20px; */
        color: #000;
        z-index: 999;
        float: right;
        padding-right: 70px;
        z-index: 999;
    }

    .menu li {
        display: inline-block;
        width: 100%;
        transition: all ease-in-out 0.2s;
        -webkit-transition: all ease-in-out 0.2s;
        -moz-transition: all ease-in-out 0.2s;
        -ms-transition: all ease-in-out 0.2s;
        -o-transition: all ease-in-out 0.2s;
    }

    .site-tabs .nav-pills .nav-link {
        font-size: 11px !important;
        padding: 20px 10px 9px !important;
    }
    .site-tabs .nav-pills .nav-link.active, .site-tabs .nav-pills .show>.nav-link {
        font-size: 11px !important;
       padding: 20px 10px 9px !important;
               width: 200px;
    }
    #m-chart1 canvas#BA-chart-job-error {
        height: auto !important;
    }
    div#tab-chart {
        background: var(--bg-color);
        padding: 30px 20px 150px 20px;
        display: block;
        /* margin-bottom: 14%; */
    }
    .valve-tabs-each {
        position: inherit;
    }
    .v-a-tt.d-flex.align-content-stretch, .ee1 {
        display: block !important;
        margin: 0 auto;
    }
    .valve-alarm-tab {
        width: 94%;
        margin: 0px auto 30px;
    }
    .event1-tab, .event2-tab, .event3-tab, .event4-tab {
        padding: 0px;
        border-radius: 10px;
    }
    .top-right.float-end {
        width: 100%;
        display: flow-root;
        margin: 20px  auto 20px;
    }
    .top-right select {
        background: var(--bg-color);
        width: 100%;
        margin-bottom: 10px;
    }
    .valve-alarm-tab .nav-pills .nav-link {
        width: 100% !important;
        font-size: 12px !important;
    }
.top-right form {
    float: none;
    /* margin-right: 30px !important; */
}
.top-right form label {
    margin-left: 0;
    font-size: 16px;
    width: 0;
    /* width: 8%; */
    display: contents;
}
 .toggle-s-box {
     margin: 0 auto;
     position: absolute;
     top: 24px;
     left: 20%;
 }
 .valve-tabs-each ul li {
     margin-bottom: 20px;
 }
.palette-swatches {
    width: 250px;
    z-index: 999999;
    overflow-y: auto;
}
  .switch-color li {
      width: 35px;
      height: 35px;
      margin: 4px 4px;
      display: inline-block;
  }
  .palette-swatches .close-icon i {
      text-align: center;
  }
  .user-sec a i {
      text-align: center;
  }
  button.darkModeButton {
      background: var(--color9);
      color: #fff;
      padding: 16px 20px;
      border: none;
      border-radius: 5px;
      margin: 7px auto 20px;
      width: auto;
      font-size: 16px;
      height: auto;
      line-height: 12px;
  }
  button.lightModeButton {
      background: #f2f2f2;
      color: #000;
            padding: 16px 20px;
            border: none;
            border-radius: 5px;
            margin: 7px auto 20px;
      width: auto;
      font-size: 16px;
      height: auto;
      line-height: 12px;
  }
  .toggle-buttons i {
      margin-right: 10px;
  }
  .table-rec {
                  text-align: center;
                  display: flex;
              }
          button.csv_download {
              margin: 30px 0 14px 10px;
          }
.site-tabs .nav li {
    padding: 2px 0 2px 0;
    width: 80%;
}

}



@media screen and (max-width: 800px) {
.site-tabs .nav li {
    padding: 2px 0 2px 0;
    width: 90%;
    margin: 0 10px;
}
    .container {
        width: auto !important;
    }
    div#tab-chart {
        background: var(--bg-color);
        padding: 30px;
        display: flow-root;
    }
    div#valve-chart {
        background: var(--bg-color);
        padding: 30px;
        display: flow-root;
    }
    .top-right.float-end {
        position: relative;
        z-index: 9;
        width: 100%;
        /* display: flex; */
        /* margin: 20px  50px; */
    }
    .t-count li {
        padding: 10px 10px;
    }
    .select-meter-tab form {
            display: block;
        }
        .select-meter-tab form input[type="submit"] {
            margin-left: 0;
            margin-top: 10px;
            width: 100%;
        }
        .total_meters_tab-sec ul {
            margin: 20px 0px 10px 20px;
        }
        .total-meters-tab-filters form {
            padding: 0 17px;
        }
        .fill-left-menu {
            width: 100%;
        }

}
@media screen and (max-width:774px) {
 .site-tabs .nav-pills .nav-link {
        font-size: 11px !important;
        padding: 20px 10px 9px !important;
    }
}
@media screen and (max-width: 768px) {
   .valve-tabs-each ul li {
       /* margin-bottom: 20px; */
       width: 49%;
   }

}

@media screen and (max-width:767px) {
    .p-boxx form {
        width: 100%;
        margin: 0 auto;
    }
    .login-box {
        padding: 10% 20px 0 30px;
        height: 100vh;
    }
    .report-tab .nav-pills .nav-link, .report-tab .nav-pills .nav-link.active, .report-tab .nav-pills .show>.nav-link {
        width: 100% !important;
    }
}

@media screen and (max-width: 675px) {
    .top-right.float-end {
        position: relative;
        z-index: 9;
        width: 73%;
        display: block;
        margin: 50px 50px;
    }
    .top-right form input[type="date"] {
        width: 100%;
        margin-bottom: 10px;
    }
    .threshold-tabs ul#pills-tab {
        display: block;
        background: none;
    }
    .valve-tabs-each ul li {
        /* margin-bottom: 20px; */
        width: 100%;
    }
    .new-login-left-sec h1 {
        color: #fff;
        margin: 20px 0;
        font-size: 20px;
        line-height: 42px;
        text-align: left;
        float: none;
    }
    .new-login-left-sec h1 span {
        font-size: 46px;
        color: var(--color2);
    }
    .new-login-form-area {
        background: none;
        height:auto;
    }
    .new-login-form-area form {
        padding: 2% 0px 0px 0px;
        width: auto;
        float: right;
    }
      .new-login-form-area form .login-logo-box img {
          margin: 0 !important;
      }
      section.new-login {
          background-size: cover;
          background-repeat: no-repeat;
          height: auto;
          position: relative;
          padding-bottom: 40px;
      }
    .site-overlay {
        position: absolute;
        content: '';
        background: rgb(0 0 0 / 67%);
        width: 100%;
        height: 100%;
    }
.social-list ul li {
    display: inline-block;
    margin: 0 !important;
}
.social-list ul li {
    display: inline-block;
    margin: 0 !important;
}
}

@media screen and (max-width: 600px) {
    .user-sec.float-end a span {
        display: none;
    }
}

@media screen and (max-width: 575px) {
.site-tabs .nav li {
    width: 46%;
    margin: 0 4px;
}
    .report-tab .nav-pills .nav-link, .report-tab .nav-pills .nav-link.active, .report-tab .nav-pills .show>.nav-link {
        width: 100% !important;
    }
    button.csv_download {
        margin: 10px auto;
    }
    .t-count li {
        width: 100%;
        text-align: center;
        margin-bottom: 9px;
    }
    h4.t-headingg {
        text-align: center;
        margin-bottom: 18px;
    }


    button.csv_download {
        padding: 10px 10px;
    }
}

@media screen and (max-width: 420px) {
.checkbox-label {
    width: 60px;
    height: 29px;
}
.site-tabs .nav li {
    width: 100%;
    margin: 0 20px;
}
}

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