/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {

}


/* Desktops and laptops ----------- */
@media only screen and (min-device-width: 1200px)  and (max-width : 1824px) {
     .menu-size-devices {
        width: 103%;
        height: 40px;
        float: right;
        background-color: #f2f2f2;
        font-size: 12px;
    }
      .main-menu li {
        display: inline-block;
        padding: 0 10px;
        overflow: hidden;
        font-weight: 100;
        color: #fff;
        font-size: 13px;
    }

    .time-position {
    margin-left: 60px;
    }   
    .handling-option {
        width:28%; 
        height: 75%; 
        border-radius: 0;
        margin-left: 1%;
    }
}

@media only screen and (min-device-width: 900px) and (max-width : 1440px) {
    .device-status-command {
        width: 117%;
        height: 22px;
    }
    .white-box-event {
    background-color: #fff;
    /*border: 2px solid #000;*/
    width:85%;
    height: 450px;
    margin: 0 auto;
    text-align:center;
    overflow-y: scroll;
    /*overflow: hidden !important;*/
    border-radius: 5px;
    /*padding-top: 15px;*/
  
    }

.white-box-event-handling {
    background-color: #fff;
    /*border: 2px solid #000;*/
    width:85%;
    height: 450px;
    margin: 0 auto;
    text-align:center;
    overflow-y: scroll;
    /*overflow: hidden !important;*/
    border-radius: 5px;
    /*padding-top: 15px;*/
  
    }
}

@media only screen and (min-device-width: 800px) and (max-width : 1280px) {
    
    .white-box-event {
    background-color: #fff;
    /*border: 2px solid #000;*/
    width:90%;
    height: 450px;
    margin: 0 auto;
    text-align:center;
    overflow-y: scroll;
    /*overflow: hidden !important;*/
    border-radius: 5px;
    /*padding-top: 15px;*/
  
    }

.white-box-event-handling {
    background-color: #fff;
    /*border: 2px solid #000;*/
    width:90%;
    height: 450px;
    margin: 0 auto;
    text-align:center;
    overflow-y: scroll;
    /*overflow: hidden !important;*/
    border-radius: 5px;
    /*padding-top: 15px;*/
  
    }
.event-log-header {
    position: fixed;
    height: 30px;
    margin-left: 13px;
    width: 88%;
}
 .event-handling-header {
    position: fixed; 
    width: 83%; 
    height:30px; 
    margin-left: 7px; 
   
    }
  .handling-option {
        width: 40%; 
        height: 75%; 
        border-radius: 0;
        margin-left: 1%;
    }
}

@media only screen and (min-device-width: 1300px)  and (max-width : 1500px) {

    .time-position {
    margin-left: 50px;
        }  
    .comand-position {
        margin-left: 27px;
        }
    .temperature-position {
        margin-left: 0px;
        padding-left:0px; 
        word-wrap: break-word;
        }
    .battery-position {
        margin-left: -10px;
        } 
    .date-position {
        margin-left: -58px; 
        padding-left:0px;
    }

  
    .event-log-header {
        position: fixed; 
        height:30px; 
        margin-left: 13px;
        width: 80%;
    }

    .white-box-event-handling {
    background-color: #fff;
    /*border: 2px solid #000;*/
    width:85%;
    height: 450px;
    margin: 0 auto;
    text-align:center;
    overflow-y: scroll;
    /*overflow: hidden !important;*/
    border-radius: 5px;
    /*padding-top: 15px;*/
  
    }
    .event-handling-header {
    position: fixed; 
    width: 83%; 
    height:30px; 
    margin-left: 7px; 
   
    }
    /*.menu-size-log {
    width: 104%;
    height: 25px;
    background-color: #e6e6e6;
    float: right;
    font-size: 12px;
}*/

}


@media only screen and (min-device-width: 1200px)  and (max-width : 1300px) {
    /*.white-box-event {
        background-color: #fff;
        border: 2px solid #000;
        width:85%;
        height: 580px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        overflow: hidden !important;
        border-radius: 5px;
        padding-top: 15px;
  
}
    .event-log-header {
        position: fixed; 
        height:30px; 
        margin-left: 44px;
        width: 80%;
    }*/

    .white-box-event-handling {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:95%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
}
    .event-handling-header {
        position: fixed; 
        width: 85%; 
        height:30px; 
        margin-left: 7px; 
   
    }
     .event-log-header {
        position: fixed; 
        height:30px; 
        margin-left: 13px;
        width: 80%;
    }

    .time-position {
        margin-left: 34px;
        }  
    .comand-position {
        margin-left: 27px;
        }
    .temperature-position {
        margin-left: 0px;
        padding-left:0px; 
        word-wrap: break-word;
        }
    .battery-position {
        margin-left: -18px;
        } 
    .date-position {
        margin-left: -36px; 
        padding-left:0px;
    }
    .battery-percent {
        padding-left: 6px;
    }
    .menu-size-log {
    width: 100%;
    height: 22px;
    background-color: #e6e6e6;
    float: right;
    font-size: 12px;
}
    .color-background-handling-pending {
  background-color: #782234;
  height: 22px;
  padding-top: 8px;
  border-bottom: 4px solid #df0936;
  color:#fff;
  text-align: center !important;
}
.color-background-handling-inprogress{
    /*color: #F4b366 !important;*/ 
    /*background-color: #ab8718;*/
    background-color: #6d6566;
    height: 22px;
    padding-top: 8px;
    /*border-bottom: 4px solid #dfc309;*/
    border-bottom: 4px solid #9d9494;
    color:#fff;
    text-align: center !important;
}
.color-background-handling-completed {
    /*color: #F4b366 !important;*/ 
    /*background-color: #6d6566;*/
    height: 22px;
    padding-top: 8px;
    /*border-bottom: 4px solid #9d9494;*/
    color: #6d6566 !important;
    text-align: center !important;
}

}

@media only screen and (min-width : 900px) and (max-device-width: 1200px) {

   .white-box {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:90%;
        height: 540px;
        margin: 0 auto;
        text-align:center;
        overflow-x: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top:40px;
   
}

     .white-box-event-handling {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:95%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
      }
     .event-handling-header {
        position: fixed; 
        width: 88%; 
        height:30px; 
        margin-left: 7px; 
   
    }
     .menu-size-log {
        width: 98%;
        height: 22px;
        background-color: #e6e6e6;
        float: right;
        font-size: 12px;
    }   

    .main-menu li {
        display: inline-block;
        padding: 0 10px;
        overflow: hidden;
        font-weight: 100;
        color: #fff;
        font-size: 13px;
    }

    .info-circle-position {
        position: relative;
        margin-top: 7px;
        left: 0px;
    }

     /*.content {
        min-height: 900px;
        min-width: 915px;
        /* padding: 15px; 
        margin-right: auto;
        margin-left: auto;
        /*padding-left: 15px;
        padding-right: 15px;
        overflow: hidden;
        overflow-y: hidden;
}*/

    .menu-size-devices {
        width: 103%;
        height: 40px;
        float: right;
        background-color: #f2f2f2;
    }
    .comand-position {
        margin-left: 27px;
        }
    .temperature-position {
        margin-left: 0px;
        padding-left:0px; 
        word-wrap: break-word;
    }
    .battery-position {
        margin-left: -8px;
    }
    .date-position {
        margin-left: -28px !important;
        padding-left:0px;
    }
    .time-position {
        margin-left: 17px;
        } 
    .battery-percent {
        padding-left: 6px !important;
    }
    .info-position {
        padding-right:30px !important;
    }
      .device-status-command {
        width: 85%;
        height: 22px;
    }
    .white-box-event {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width: 95%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
        }

   .event-log-header {
        position: fixed; 
        height:30px; 
        margin-left: 17px;
        width: 92%;
    }

   .filter-container {
        width: 95%;
        margin: 0 auto;
        margin-bottom:10px;
        font-size:16px; 
        color:gray;
        margin-top: 40px;
}
   .monitor-settings-content {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:75%;
        height: 500px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        padding-top: 15px;
        margin-top:230px;
    }
   .handling-option {
        width: 30%; 
        height: 75%; 
        border-radius: 0;
        margin-left: 1%;
    }


}

@media only screen  and (min-width : 900px) and (max-device-width: 1136px) {
     .white-box {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:90%;
        height: 540px;
        margin: 0 auto;
        text-align:center;
        overflow-x: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top:40px;
   
}
    /*.content {
        min-height: 900px;
        min-width: 915px;
        /* padding: 15px; */
        margin-right: auto;
        margin-left: auto;
        /*padding-left: 15px;
        padding-right: 15px;*/
        overflow: hidden;
        overflow-y: hidden;
}*/
    .info-about {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:75%;
        height: 115px;
        /*text-align:center;*/
        overflow: hidden !important;
        border-radius: 5px;
        padding-top: 20px;
        margin-bottom: 40px;
        overflow: hidden;
        /*display:none;*/
    }

  .menu-size {
        width: 104%;
        height: 45px;
        background-color: #e6e6e6;
        float: right;
    }

  .menu-size-log {
    width: 100%;
    height: 22px;
    background-color: #e6e6e6;
    float: right;
    font-size: 12px;
}

  .info-circle-position {
        position: relative;
        margin-top: 7px;
        left: 0px;
    }
 .comand-position {
        margin-left: 27px;
        }
  .temperature-position {
    margin-left: 0px;
    padding-left:0px; 
    word-wrap: break-word;
 }
  .battery-position {
    margin-left: -9px;
 }
  .date-position {
    margin-left: -35px; 
    padding-left:0px;
}
  .time-position {
    margin-left: 10px;
        } 
  .battery-percent {
        padding-left: 6px;
    }
   .info-position {
        padding-right:30px !important;
    }
   .device-status-command {
        width: 105%;
        height: 22px;
}
    .white-box-event {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:94%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
  
    }
    .event-log-header {
        position: fixed; 
        height:30px; 
        margin-left: 8px;
        width: 88%;
    }
   .filter-container {
        width: 100%;
        margin: 0 auto;
        margin-bottom:10px;
        font-size:16px; 
        color:gray;
        margin-top: 40px;
    }
   .monitor-settings-content {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width: 90%;
        height: 500px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        padding-top: 15px;
        margin-top:100px;
    }
   .notification-dropdown {
       left: -24px;
        -moz-box-shadow: 0 0 10px #9c9c9c; 
        -webkit-box-shadow: 0 0 10px #9c9c9c; 
        box-shadow: 0 0 10px #9c9c9c;
    }
   .chek-submit {
    font-size: 18px; 
    width: 33%; 
    padding-left: 8%; 
    padding-top: 7%;
    height: 170%;
    }
   .record-type-space {
        margin-left:60px !important;
    }

 
   /*Color-background-handling status*/

.color-background-handling-leak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}

.color-background-handling-alarm {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}

.color-background-handling-waterleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-gasleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-ok {
    /*color: #e6e6e6 !important;*/ 
    background-color: #e6e6e6;
    height: 45px;
    padding-top: 8px;
   
}
.color-background-handling-offline {
    /*color: #6a5e60 !important;*/ 
    background-color: #6d6566;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #9d9494;
}
.color-background-handling-check {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
}
.color-background-handling-alert {
    /*color: #df0936 !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-warning {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
}
.color-background-handling-pending {
  background-color: #782234;
  height: 24px;
  padding-top: 8px;
  border-bottom: 4px solid #df0936;
  color:#fff;
  text-align: center !important;
}
.color-background-handling-inprogress{
    /*color: #F4b366 !important;*/ 
    /*background-color: #ab8718;*/
    background-color: #6d6566;
    height: 24px;
    padding-top: 8px;
    /*border-bottom: 4px solid #dfc309;*/
    border-bottom: 4px solid #9d9494;
    color:#fff;
    text-align: center !important;
}
.color-background-handling-completed {
    /*color: #F4b366 !important;*/ 
    /*background-color: #6d6566;*/
    height: 24px;
    padding-top: 8px;
    /*border-bottom: 4px solid #9d9494;*/
    color: #6d6566 !important;
    text-align: center !important;
}
/*Color-background-handling status*/

/*Color-background status*/
.color-background-leak {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 45px;
}

.color-background-alarm {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 45px;
}

.color-background-waterleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 45px;
}
.color-background-gasleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 45px;
}
.color-background-ok {
    color: #e6e6e6 !important; 
    background-color: #39b735;
    height: 45px;
}
.color-background-offline {
    color: #6a5e60 !important; 
    background-color: #6a5e60;
    height: 45px;
}
.color-background-check {
    color: #dfc309 !important; 
    background-color: #dfc309;
    height: 45px;
}
.color-background-alert {
    color: #df0936 !important; 
    background-color: #df0936;
    height: 45px;
}
.color-background-warning {
    color: #F4b366 !important; 
    background-color: #F4b366 !important;
    height: 45px;
}
/*Color-background status*/
}

@media only screen and (min-width : 768px) and (max-device-width: 1366px) {
    .record-type-space {
        margin-left: 50px !important;
    }

    .date-to {
        width: 49.5%;
        float: right;
        margin-top: -30px;
    }
    .menu-size {
        width: 104%;
        height:35px;
        background-color: #e6e6e6;
        float: right;
    }
      .white-box {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:95%;
        height: 360px;
        margin: 0 auto;
        text-align:center;
        overflow-x: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
        padding-bottom: 15px;
        /*margin-top:40px;*/
   
    }
      .white-box-event {
        background-color: #fff;
        width: 85%;
        height: 345px;
        margin: 0 auto;
        text-align: center;
        overflow-y: scroll;
        /* overflow: hidden !important; */
        border-radius: 5px;
        /* padding-top: 15px; */
    }
      .monitor-settings-content {
        background-color: #fff;
        /* border: 2px solid #000; */
        width: 70%;
        height: 400px;
        margin: 0 auto;
        text-align: center;
        overflow-y: scroll;
        /* overflow: hidden !important; */
        border-radius: 5px;
        padding-top: 15px;
        margin-top: 230px;
    }
    .info-circle-position {
        position: relative;
        left: 82px;
        margin-top: 4px;
    }
    .menu-size-devices {
        width: 103%;
        height: 38px;
        float: right;
        background-color: #f2f2f2;
    }
    /*.filter-container {
       width: 67%;
        margin: 0 auto;
        margin-bottom:10px;
        font-size:16px; 
        color:gray;
        margin-top: -30px;
    }*/
    .date-from {
        width: 51%;
        margin-top: 65px;
        margin-left: 50px;
    }
    .filter {
        margin-left: 50px;
        margin-top: 5px;
    }


/*Color-background-handling status*/

.color-background-handling-leak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
    }

.color-background-handling-alarm {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
    }

.color-background-handling-waterleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
    }
.color-background-handling-gasleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
    }
.color-background-handling-ok {
    /*color: #e6e6e6 !important;*/ 
    background-color: #e6e6e6;
    height: 35px;
    padding-top: 8px;
   
    }
.color-background-handling-offline {
    /*color: #6a5e60 !important;*/ 
    background-color: #6d6566;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #9d9494;
    }
.color-background-handling-check {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
    }
.color-background-handling-alert {
    /*color: #df0936 !important;*/ 
    background-color: #782234;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
    }
.color-background-handling-warning {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 35px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
    }
.color-background-handling-pending {
  background-color: #782234;
  height: 24px;
  padding-top: 8px;
  border-bottom: 4px solid #df0936;
  color:#fff;
  text-align: center !important;
    }
.color-background-handling-inprogress{
    /*color: #F4b366 !important;*/ 
    /*background-color: #ab8718;*/
    background-color: #6d6566;
    height: 24px;
    padding-top: 8px;
    /*border-bottom: 4px solid #dfc309;*/
    border-bottom: 4px solid #9d9494;
    color:#fff;
    text-align: center !important;
    }
.color-background-handling-completed {
    /*color: #F4b366 !important;*/ 
    /*background-color: #6d6566;*/
    height: 24px;
    padding-top: 8px;
    /*border-bottom: 4px solid #9d9494;*/
    color: #6d6566 !important;
    text-align: center !important;
    }
/*Color-background-handling status*/

/*Color-background status*/
.color-background-leak {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 35px;
}

.color-background-alarm {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 35px;
}

.color-background-waterleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 35px;
}
.color-background-gasleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 35px;
}
.color-background-ok {
    color: #e6e6e6 !important; 
    background-color: #39b735;
    height: 35px;
}
.color-background-offline {
    color: #6a5e60 !important; 
    background-color: #6a5e60;
    height: 35px;
}
.color-background-check {
    color: #dfc309 !important; 
    background-color: #dfc309;
    height: 35px;
}
.color-background-alert {
    color: #df0936 !important; 
    background-color: #df0936;
    height: 35px;
}
.color-background-warning {
    color: #F4b366 !important; 
    background-color: #F4b366 !important;
    height: 35px;
}
/*Color-background status*/
}


@media only screen  and (min-width : 800px) and (max-device-width: 1000px) {
     .white-box {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:95%;
        height: 540px;
        margin: 0 auto;
        text-align:center;
        overflow-x: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top:40px;
   
}
     .info-about {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:75%;
        height: 115px;
        /*text-align:center;*/
        overflow: hidden !important;
        border-radius: 5px;
        padding-top: 20px;
        margin-bottom: 40px;
        overflow: hidden;
        /*display:none;*/
    }
  .menu-size {
        width: 104%;
        height: 45px;
        background-color: #e6e6e6;
        float: right;
    }
    .main-menu li {
        display: inline-block;
        padding: 0 10px;
        overflow: hidden;
        font-weight: 100;
        color: #fff;
        /* background-color: #66c1f2; */
        font-size: 13px;
    }
    .menu-size-log {
        width: 104%;
        height: 25px;
        background-color: #e6e6e6;
        float: right;
        font-size: 12px;
    }

    .info-circle-position {
        position: relative;
        margin-top: 7px;
        left: 0px;
    }
    .battery-percent {
        padding-left: 3px !important;
    }
     .date-style {
        padding-left:3px !important;
    }
     .info-position {
        padding-right:30px !important;
    }
     .device-status-command {
        width: 100%;
        height: 22px;
    }
    .battery-position {
    margin-left: -24px;
    }
    .date-position {
        margin-left: -31px;
    }
    .time-position {
        margin-left: 10px;
    }
    .comand-position {
        margin-right: -20px;
    }
     .white-box-event {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:90%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
  
    }
     .white-box-event-handling {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:96%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
}
    .event-log-header {
        position: fixed; 
        height:30px; 
        margin-left: 8px;
        width: 84%;
    }

    .event-handling-header {
        position: fixed;
        width: 84%;
        height: 30px;
        margin-left: 7px;
    }

    .filter-container {
        width: 95%;
        margin: 0 auto;
        margin-bottom:10px;
        font-size:16px; 
        color:gray;
     margin-top: 40px;
    }
    .monitor-settings-content {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:70%;
        height: 500px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        padding-top: 15px;
        margin-top:100px;
    }

      /*Color-background-handling status*/
.color-background-handling-leak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}

.color-background-handling-alarm {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}

.color-background-handling-waterleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-gasleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-ok {
    /*color: #e6e6e6 !important;*/ 
    background-color: #e6e6e6;
    height: 45px;
    padding-top: 8px;
   
}
.color-background-handling-offline {
    /*color: #6a5e60 !important;*/ 
    background-color: #6d6566;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #9d9494;
}
.color-background-handling-check {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
}
.color-background-handling-alert {
    /*color: #df0936 !important;*/ 
    background-color: #782234;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-warning {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 45px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
}
.color-background-handling-pending {
  background-color: #782234;
  height: 24px;
  padding-top: 8px;
  border-bottom: 4px solid #df0936;
  color:#fff;
  text-align: center !important;
}
.color-background-handling-inprogress{
    /*color: #F4b366 !important;*/ 
    /*background-color: #ab8718;*/
    background-color: #6d6566;
    height: 24px;
    padding-top: 8px;
    /*border-bottom: 4px solid #dfc309;*/
    border-bottom: 4px solid #9d9494;
    color:#fff;
    text-align: center !important;
}
.color-background-handling-completed {
    /*color: #F4b366 !important;*/ 
    /*background-color: #6d6566;*/
    height: 24px;
    padding-top: 8px;
    /*border-bottom: 4px solid #9d9494;*/
    color: #6d6566 !important;
    text-align: center !important;
}
/*Color-background-handling status*/

/*Color-background status*/
.color-background-leak {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 45px;
}

.color-background-alarm {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 45px;
}

.color-background-waterleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 45px;
}
.color-background-gasleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 45px;
}
.color-background-ok {
    color: #e6e6e6 !important; 
    background-color: #39b735;
    height: 45px;
}
.color-background-offline {
    color: #6a5e60 !important; 
    background-color: #6a5e60;
    height: 45px;
}
.color-background-check {
    color: #dfc309 !important; 
    background-color: #dfc309;
    height: 45px;
}
.color-background-alert {
    color: #df0936 !important; 
    background-color: #df0936;
    height: 45px;
}
.color-background-warning {
    color: #F4b366 !important; 
    background-color: #F4b366 !important;
    height: 45px;
}
/*Color-background status*/

}

@media only screen  and (min-width : 768px) and (max-device-width: 800px) {

     .menu-size {
        width: 104%;
        height: 50px;
        background-color: #e6e6e6;
        float: right;
    }

    .main-menu li {
        display: inline-block;
        padding: 0 10px;
        overflow: hidden;
        font-weight: 100;
        color: #fff;
        /* background-color: #66c1f2; */
        font-size: 13px;
    } 
    .info-circle-position {
        position: relative;
        margin-top: 7px;
        left: 0px;
    }
    .battery-percent {
        padding-left: 3px !important;
    }

    .white-box-event {
        background-color: #fff;
        width:90%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
  
    }
    .white-box-event-handling {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:95%;
        height: 450px;
        margin: 0 auto;
        text-align:center;
        overflow-y: scroll;
        /*overflow: hidden !important;*/
        border-radius: 5px;
        /*padding-top: 15px;*/
    }
    .event-log-header {
        position: fixed; 
        height:30px; 
        margin-left: 44px;
        width: 84%;
    }
    .event-handling-header {
        position: fixed;
        width: 93%;
        height: 30px;
        margin-left: 7px;
    }

    .filter-container {
        width: 95%;
        margin: 0 auto;
        margin-bottom:10px;
        font-size:16px; 
        color:gray;
        margin-top: 40px;
    }
     .info-about {
        background-color: #fff;
        /*border: 2px solid #000;*/
        width:75%;
        height: 115px;
        /*text-align:center;*/
        overflow: hidden !important;
        border-radius: 5px;
        padding-top: 20px;
        margin-bottom: 40px;
        overflow: hidden;
        /*display:none;*/
    }

/*Color-background-handling status*/
.color-background-handling-leak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}

.color-background-handling-alarm {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}

.color-background-handling-waterleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-gasleak {
    /*color: #F4857C !important;*/ 
    background-color: #782234;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-ok {
    /*color: #e6e6e6 !important;*/ 
    background-color: #e6e6e6;
    height: 50px;
    padding-top: 8px;
   
}
.color-background-handling-offline {
    /*color: #6a5e60 !important;*/ 
    background-color: #6d6566;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #9d9494;
}
.color-background-handling-check {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
}
.color-background-handling-alert {
    /*color: #df0936 !important;*/ 
    background-color: #782234;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #df0936;
}
.color-background-handling-warning {
    /*color: #F4b366 !important;*/ 
    background-color: #ab8718;
    height: 50px;
    padding-top: 8px;
    border-bottom: 4px solid #dfc309;
}
.color-background-handling-pending {
  background-color: #782234;
  height: 22px;
  padding-top: 8px;
  border-bottom: 4px solid #df0936;
  color:#fff;
  text-align: center !important;
}
.color-background-handling-inprogress{
    /*color: #F4b366 !important;*/ 
    /*background-color: #ab8718;*/
    background-color: #6d6566;
    height: 22px;
    padding-top: 8px;
    /*border-bottom: 4px solid #dfc309;*/
    border-bottom: 4px solid #9d9494;
    color:#fff;
    text-align: center !important;
}
.color-background-handling-completed {
    /*color: #F4b366 !important;*/ 
    /*background-color: #6d6566;*/
    height: 22px;
    padding-top: 8px;
    /*border-bottom: 4px solid #9d9494;*/
    color: #6d6566 !important;
    text-align: center !important;
}
/*Color-background-handling status*/

/*Color-background status*/
.color-background-leak {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 50px;
}

.color-background-alarm {
    color: #F4857C !important; 
    background-color: #df0936;
    height: 50px;
}

.color-background-waterleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 50px;
}
.color-background-gasleak {
    color: #F4857C !important; 
    background-color: #F4857C;
    height: 50px;
}
.color-background-ok {
    color: #e6e6e6 !important; 
    background-color: #39b735;
    height: 50px;
}
.color-background-offline {
    color: #6a5e60 !important; 
    background-color: #6a5e60;
    height: 50px;
}
.color-background-check {
    color: #dfc309 !important; 
    background-color: #dfc309;
    height: 50px;
}
.color-background-alert {
    color: #df0936 !important; 
    background-color: #df0936;
    height: 50px;
}
.color-background-warning {
    color: #F4b366 !important; 
    background-color: #F4b366 !important;
    height: 50px;
}
/*Color-background status*/

 .menu-size-devices {
        width: 103%;
        height: 40px;
        float: right;
        background-color: #f2f2f2;
    }


}


/* Large screens ----------- */
@media only screen  and (max-device-width: 1826px){
     .menu-size-devices {
        width: 103%;
        height: 38px;
        float: right;
        background-color: #f2f2f2;
    }

}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {

}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {

}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){

}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){

}

    /*temp media queries for the monitor page*/

@media only screen and (max-width : 1900px) {
    /*the right table with devices has hidden colums by this point*/
    .system-table {
        table-layout: auto;
    }
    .dashboard-table td:not(.icon) {
        min-width: 90px;
    }
    /*
        other problem is location filtering
    */
    .location-filtering 
    {
        width: 610px;/*665px;*/
    } 
    .location-filtering-box {
        min-width: 10.7rem;/*127px;*/
        height: 67px;/*85px;*/
        padding: 2px;/*5px;*/
    }
    .location-filtering-box__icon {
        width: 32px;/*35px;*/
        height: 36px;/*42px;*/
        margin-bottom: 3px;/*5px;*/
    }
    /* 
        the problem is the systems-overview part
    */
    .statistic-box__stats {
        flex: 0 0 50%;/*64%*/
    }
    .section-statistics {
        grid-template-columns: repeat(5, minmax(85px, 1fr));/*130px*/
        grid-gap: 5px;/*10px*/
        margin-left: 35px;/*50px;*/
    }
    .statistic-box__count {
    font-size: 27px;/*35px*/
    bottom: 5px;/*0px*/
    }
    .statistic-box__icon {
        height: 33px;/*40px*/
        width: 33px;/*40px*/
    }
    .statistic-box {
        padding: 0.5rem/*10px*/
    }
    .resizable-holder {
        margin-top: 2rem;
    }
}

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

    /*
        other problem is location filtering
    */
    .location-filtering {
        width: 550px;/*665px;*/
    } 
    .location-filtering-box {
        min-width: 50px;/*127px;*/
        height: 67px;/*85px;*/
        padding: 2px;/*5px;*/
    }
    .location-filtering-box__icon {
        width: 32px;/*35px;*/
        height: 36px;/*42px;*/
        margin-bottom: 3px;/*5px;*/
    }
 
       /*other change some margin so the page still looks leveled*/
    .resizable-holder {
        margin-top: 19px;
    }

    /*smaller spacing*/
    .dashboard-table th:first-child {
        width: 35px;/*50px*/
    }
    .toggle-sidebar__label {
        width: 35px;/*50px*/
    }
    .dashboard-default-background.default-background {
        width: calc(100% - 35px);/*(100% - 50px)*/
    }
}

@media only screen and (max-width : 1700px) {
        /*
    .location-filtering {
            width: 600px; /*665px;
        width: 510px;
        /*width: calc(49% - 120px);

    }
    */
    /*.carousel-small{
        display:block !important;
    }
    .carousel-normal{
        display:none;
    }*/

        /*with even lower res*/
    .location-filtering {
        width: 500px;/*535/665px;*/
    } 
    .default-table th {
        padding: 5px 2px 3px;
    }
    .left {
        flex: 0 0 48.5%;/*49.5%*/
    }
    .right {
        flex: 0 0 50.5%;/*49.5%*/
    }
    .statistic-box__count {
        font-size: 25px;/*35px*/
    }
    .system-table td {
        padding: 3px 3px;
    }
    .location-filtering-box .active-item{
        width: 97px;
    }
}

@media only screen and (max-width: 1550px) {
    .location-filtering {
        width: 415px;
    }
}
@media only screen and (max-width: 1400px) {
    .location-filtering {
        width: 343px;
    }
}