.login {
  margin: auto;
  width: 70%;
  padding: 10px;
  }
  div .dt-buttons{
  float:right;  
  margin-left:5px;
  }
  .table_fun_div{
  float:left;  
  }
  .row_selected{
  background-color: #3f6791 !important;  
  }
  .action_col{
  display:none;  
  }
  .function-button{
  cursor: pointer; 
  margin-left:5px; 
  }
  .jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box{
  background-color: #454d55 !important;    
  }
  .nav-bar-separator{
  border-bottom: 1px solid #4f5962;  
  }
  
  .modal {
      padding: 0 !important; 
    }
    .modal .modal-dialog {
      width: 100%;
      max-width: none;
      height: 100%;
      margin: 0;
    }
    .modal .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
    }
    .modal .modal-body {
      overflow: auto;
    }
    .middle{
      float:left;
      width:48%;  
      padding-left: 1%;
    }
    .center_div{
      float:left;
      width:100%;  
      padding-left: 1%;
    } 
  
  
    .dataTable {
      width: 100% !important;
    }
  
  
    .sino_item{
      display: none;
    }
  
   
    .vasca_compenso{
      background: url(/img/sinottico/vasca_compenso.png);
      background-repeat: no-repeat;
      background-size: contain, cover;
      width:200px;
      height:200px;
    } 
  
    .level_container {
      height: 170px;
      width: 195px;
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-top: 7px;
    }
  
    .livello_now {
      position: absolute;
      margin-top: -5px;
      background-color: rgb(0, 123, 255);
      margin-left: 20px;
      width: 155px;
      opacity: 0.5;
      height: 50%;
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
      padding-left:5px;
      bottom:0px;
    }
  
    .level_image{
      width:300px; 
      float:left;
      min-height: 5px;
    }
  
    #vasca_compenso_setting{
      background: url(/img/sinottico/vasca_compenso_450.png);
      background-repeat: no-repeat;
      background-size: contain, cover;
      height: 450px;
      width: 450px;
      position: relative;
      margin-left: 2%;;
      } 
  
    .level_image_setting {
        width: 100%;
        position: absolute;
    }
   
    #not_found{
     display: none; 
    }
  
    .level_container_setting {
      height: 420px;
      width: 400px;
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  
    #altezza_vasca_compenso{
      margin-left: 5%;   
    }
  
    .livello_now_setting {
      position: absolute;
      margin-top: 0;
      background-color: rgb(0, 123, 255);
      bottom: 0;
      margin-left: 5px;
      width: 390px;
      opacity: 0.4;
      height: 50%;
  }
  
  .sinottico_item{
    margin-left:5px;
  }
  
  .auto {
    background: url(/img/sinottico/auto.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  .on {
    background: url(/img/sinottico/on.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  .off {
    background: url(/img/sinottico/off.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  .manual_button {
    background: url(/img/sinottico/manual.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  .multiswitch{
   margin-left: 2%; 
  }
  .manual{
    border: 3px solid  rgb(255, 132, 0);
    box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }
  
  
  .alerts_border {
    border: 2px #ff0000 solid;
    animation: blink 1s;
    animation-iteration-count: 3;
  }
  
  @keyframes blink { 50% { border-color:#fff ; }  }
  
  #main_tabs-1{
   padding: 0 !important;
   margin-top:1px;
  }
  
  .value_sinottioco h5{
   padding:2px ;
   font-size: 18px; 
  }
  
  .value_ok{
    color: rgb(3, 177, 3) !important;
    font-weight: bolder;
    font-size: 22px;
  }
  
  .value_ko{
    color: rgb(251, 49, 9) !important;
    font-weight: bolder;
    font-size: 24px;
  }
  
  
  .label_black{
    color: #000;
   }
  
   .value_table{
    border: 1px solid;
    border-bottom: 1px solid #000;
   }
  
  .value_table h5{
    width:100%; 
    margin: 0% !important;
    color: #000;
   }
  
   .value_table tr:first-child td:nth-child(1){
    width:120px !important;
    white-space: nowrap; 
    text-align: left;
   }
  
   .value_table tr:first-child td:nth-child(2){
    width:60px;
    white-space: nowrap;  
    text-align: center;
   }
  
   .value_table tr:first-child td:nth-child(3){
    width:60px;
    white-space: nowrap; 
    text-align: center;
   }
  
   .value_table tr:first-child td:nth-child(3) h5{
    color: deeppink;
    font-weight: bold;
   }
  
   .value_table tr:first-child td:nth-child(4){
    width:10px;
    white-space: nowrap; 
    text-align: left;
   }
  
   #sidebar-wrapper{
    z-index: 1;
    position: fixed;
    width: 250px;
    height: 100%;
    overflow-y: hidden;
    transition: 0.15s;
    background-color: var(--black) ;
    font-size: 1em;
  }
  
  .pompa_filtrazione{
    background: url(/img/sinottico/pompa.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
  }
  
  .filtro{
    background: url(/img/sinottico/filtro.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
  }
  
  .pompa_ph{
    background: url(/img/sinottico/dosaggio.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .pompa_cloro{
    background: url(/img/sinottico/dosaggio.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .produttore{
    background: url(/img/sinottico/disinfezione.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .valvola_io{
    background: url(/img/sinottico/valvola.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .valvola_prop{
    background: url(/img/sinottico/valvola.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .valvola_io_riscaldamento{
    background: url(/img/sinottico/riscaldamento.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .valvola_prop_riscaldamento{
    background: url(/img/sinottico/riscaldamento.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .valvola_io_reffrescamento{
    background: url(/img/sinottico/raffrescamento.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .valvola_prop_raffrescamento{
    background: url(/img/sinottico/raffrescamento.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  .luci{
    background: url(/img/sinottico/luci.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  .luci{
    background: url(/img/sinottico/luci.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 1;
  }
  
  .linea_acido{
    background: url(/img/sinottico/linea_acido.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 413px;
    height: 35px;
    position: absolute;
    top:420px;
    left:94px;
  }
  
  .linea_cloro{
    background: url(/img/sinottico/linea_cloro.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 411px;
    height: 39px;
    position: absolute;
    top:538px;
    left:96px;
  }
  
  .linea_uv{
    background: url(/img/sinottico/by_pass.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 265px;
    height: 115px;
    position: absolute;
    top:610px;
    left:485px;
  }
  
  
  .tanica_ph{
    background: url(/img/sinottico/serbatoio_acido.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top:385px;
    left:100px;
    z-index: 1;
  }
  
  .tanica_cloro{
    background: url(/img/sinottico/serbatoio_cloro.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top:505px;
    left:100px;
    z-index: 1;
  }
  .feedback_io_filtrazione{
    width: 220px;
    height: 25px;
    position: absolute;
    top: 220px;
    left: 705px;
  
  }
  
  .feedback_4_20_filtrazione_control{
    background: url(/img/sinottico/pressostato.png);
    position: absolute;
    top:555px;
    left:600px;
    width: 100px;
    height: 100px;
  }
  
  .idro{
    background: url(/img/sinottico/idromassaggio.png);
    position: absolute;
    top:140px;
    left:430px;
    width: 100px;
    height: 100px;
  }
  
  .idro_setting{
    background: url(/img/sinottico/idromassaggio.png);
    width: 100px;
    height: 100px;
  }
  
  .idro_info{
    text-align:left;
    padding-right:10px;
    padding-left:10px;
    color: rgb(255, 255, 255);
    font-size: 14px;
  }
  
  .compressore{
    background: url(/img/sinottico/compressore.png);
    position: absolute;
    top:620px;
    left:1025px;
    width: 100px;
    height: 100px;
  }
  
  .compressore_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
  }
  
  .declorazione{
    background: url(/img/sinottico/declorazione.png);
    position: absolute;
    top:620px;
    left:920px;
    width: 100px;
    height: 100px;
  }
  
  .declorazione_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
  }
  
  .lampada_uv{
    background: url(/img/sinottico/uv.png);
    position: absolute;
    top:655px;
    left:505px;
    width: 100px;
    height: 100px;
    z-index: 1;
  }
  
  .lampada_uv_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    
  }
  
  .alim_centralina{
    background: url(/img/sinottico/centralina.png);
    position: absolute;
    top:620px;
    left:805px;
    width: 100px;
    height: 100px;
    z-index: 1;
  }
  
  .alim_centralina_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:center;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 9px;
    line-height: 10px;
    
  }
  
  .aspirafango{
    background: url(/img/sinottico/aspirafango.png);
    position: absolute;
    top:620px;
    left:815px;
    width: 100px;
    height: 100px;
  }
  
  .aspirafango_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
  }
  
  .name_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 14px;
  }
  
  .filtro_name_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  .filtro_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 10px;
    line-height: 10px;
  }
  
  .filtro_pressione_info{
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    color: black;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 10px;
    z-index:1;
    }
    
  
  .freq_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 0px;
    font-size: 10px;
  }
  
  .ph_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  
  .cl_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .valvola_io_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .valvola_prop_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .valvola_io_riscaldamento_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .valvola_prop_riscaldamento_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .valvola_io_raffrescamento_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom:2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .valvola_prop_raffrescamento_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .produttore_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  .pressostato_1_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 14px;
  }
  
  .feedback_4_20_filtrazione_control_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:right;
    width: 100%;
    padding-right:10px;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 15px;
  }
  
  .luci1_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:center;
    width: 100%;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .luci2_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:center;
    width: 100%;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 10px;
    min-height: 20px;
  }
  
  .tanica_ph_info{
    position: absolute;
    bottom: 3px;
    left: 0;
    text-align:center;
    width: 100%;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 11px;
    min-height: 20px;
  }
  
  .tanica_cloro_info{
    position: absolute;
    bottom: 3px;
    left: 0;
    text-align:center;
    width: 100%;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 11px;
    min-height: 20px;
  }
  
  .feedback_io_filtrazione_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:center;
    width: 100%;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 16px;
    line-height: 25px;
    min-height: 25px;
    float:left;
  }
  
  .giochi_info{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align:center;
    width: 100%;
    color: black;
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 25px;
    min-height: 25px;
    float:left;
  }
  
  
  .feedback_io_filtrazione_stato{
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 25px;
    height: 25px;
    float:left;
  }
  
  
  
  
  
  .live_table_filtrazione  tr:first-child td:first-child{
    width:70%;
    white-space: nowrap;  
   }
  
   .live_table_filtrazione td:nth-child(2){
    width:15%;
    white-space: nowrap; 
    font-weight: bold; 
   }
  
   .live_filtrazione{
    padding-left:2%;
    padding-top:2%;
    background: url(/img/sinottico/schermo.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 500px;
    height: 400px;
    color: black;
  }
  
  
  .sinottico_backgroud{
    width: 1150px;
    height: 860px;
    position: relative;
  }
  
  
  /*BACKGROUND SINOTTICO*/
  
  .sinottico_backgroud_1_filtri{
    background: url(/img/sinottico/sinottico_1_filtri.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .sinottico_backgroud_2_filtri{
    background: url(/img/sinottico/sinottico_2_filtri.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .sinottico_backgroud_3_filtri{
    background: url(/img/sinottico/sinottico_3_filtri.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .sinottico_backgroud_4_filtri{
    background: url(/img/sinottico/sinottico_4_filtri.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .sinottico_backgroud_skimmer_1_filtri{
    background: url(/img/sinottico/sinottico_1_filtri_skimmer.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .sinottico_backgroud_skimmer_2_filtri{
    background: url(/img/sinottico/sinottico_2_filtri_skimmer.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .sinottico_backgroud_skimmer_3_filtri{
    background: url(/img/sinottico/sinottico_3_filtri_skimmer.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .sinottico_backgroud_skimmer_4_filtri{
    background: url(/img/sinottico/sinottico_4_filtri_skimmer.jpg);
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .content_compenso{
    position: absolute;
    top:25px;
    left:813px;
  }
  
  .content_compenso_empty{
    position: absolute;
    top:25px;
    left:813px;
    background: url(/img/sinottico/vasca_compenso.png);
    width: 200px;
    height:200px;
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .content_compenso_galleggianti{
    position: absolute;
    top:25px;
    left:813px;
    background: url(/img/sinottico/vasca_compenso_galleggianti.png);
    width: 200px;
    height:200px;
    background-repeat: no-repeat;
    background-size: contain, cover;
  }
  
  .content_valvola{
    position: absolute;
    top:25px;
    left:1020px;
  }
  
  .pressostato_1{
    position: absolute;
    top:125px;
    left:1020px;
    width: 100px;
    height: 100px;
  }
  
  .content_analizzatore{
     position: absolute;
     top:130px;
     background: url(/img/sinottico/elaboratore.png);
     background-repeat: no-repeat;
     background-size: contain, cover;
     width:370px;
     height:235px;
     padding-left:10px;
  }
  
  .content_analizzatore_live{
    min-width: 350px;
    position: absolute;
    top:35px;
    left:35px;
  }
  
  .content_analizzatore_setting{
    padding-left:2%;
     background: url(/img/sinottico/schermo.png);
     background-repeat: no-repeat;
     background-size: contain, cover;
     min-width: 350px;
     margin:auto;
   }
  
  /*LUCI*/
  
  .luci1_item{
    position: absolute;
    top:265px;
    left:430px;
  } 
  
  .luci2_item{
    position: absolute;
    top:265px;
    left:555px;
  } 
  
  
  /*FILTRI*/
  
  .filtro_1{
    position: absolute;
    top:425px;
    left:1030px;
  }
  
  .filtro_2{
    position: absolute;
    top:425px;
    left:925px;
  }
  
  .filtro_3{
    position: absolute;
    top:425px;
    left:820px;
  }
  
  .filtro_4{
    position: absolute;
    top:425px;
    left:715px;
  }
  
  
  /*POMPE*/
  
  .pompa_1{
    position: absolute;
    top:300px;
    left:1030px;
  }
  
  .pompa_2{
    position: absolute;
    top:300px;
    left:925px;
  }
  
  .pompa_3{
    position: absolute;
    top:300px;
    left:820px;
  }
  
  .pompa_4{
    position: absolute;
    top:300px;
    left:715px;
  }
  
  /*TERMICA*/
  
  .termica_item{
    position: absolute;
    top:555px;
    left:505px;
  }
  
  .pump_scheduler{
  top:0;
  left:5px;
  position:relative;
  }
  
  .pump_consenso_esterno{
    top:0;
    left:55px;
    position:relative;
    }
  
  /*DOSAGGIO*/
  
  .pompa_ph_item{
    position: absolute;
    top:385px;
    left:240px;
  }
  
  .pompa_cloro_item{
    position: absolute;
    top:506px;
    left:240px;
  }
  
  .produttore_item{
    position: absolute;
    top:506px;
    left:240px;
  }
  
  .valvola_cloro{
    position: absolute;
    top:506px;
    left:375px;
  }
  
  
  
  .table_allarmi{
    position: absolute;
    top:620px;
    left:0px;
    width: 100%;
    padding:2%;
    color: #000;
  }
  
  
  .highcharts-media_filtrazione,
  .highcharts-data-table table {
      width: 200px;
      position: absolute;
      top:390px;
      left:505px;
      border: 4px solid #43a52b;
      background-color: #e6e6e6;
  }
  
  

  
  
  .highcharts-credits{
    display:none;
  }
  
  
  .centralina_alarm{
    margin-top:25px;
    font-size: 16px;
    color: #ff0000;
    font-weight: bold;
  }

  .red{
    color: #ff0000;
    font-weight: bold;
  }

  .green{
    color: #29b100;
    font-weight: bold;
  }
  
  
  
  #main_tabs{
    width: 1155px;  
  }
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    padding:0 !important;
  }
  
  .content {
    padding:0 !important;
  }
  
  .logo_aziendale{
    max-width: 300px;
    max-height: 120px;
  }
  
  .logo_aziendale_sinottico{
    position: absolute;
    left: 22px;
    top: 5px;
  }
  
  
  
  .galleggiante_minima_stato{
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 25px;
    height: 25px;
    float:left;
  }
  
  
  .galleggiante_minima_info{
    text-align:left;
    color: black;
    font-weight: bold;
    font-size: 10px;
    line-height: 25px;
    min-height: 25px;
  }
  
  .galleggiante_minima{
    position: absolute;
    bottom: 25px;
    left: 25px;
    width: 100%;
    line-height: 25px;
    min-height: 25px;
    float:left;
  }
  
  
  .galleggiante_massimo_stato{
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 25px;
    height: 25px;
    float:left;
  }
  
  
  .galleggiante_massimo_info{
    text-align:left;
    color: black;
    font-weight: bold;
    font-size: 10px;
    line-height: 25px;
    min-height: 25px;
  }
  
  .galleggiante_massimo{
    position: absolute;
    bottom: 75px;
    left: 25px;
    width: 100%;
    line-height: 25px;
    min-height: 25px;
    float:left;
  }
  
  .galleggiante_esercizio_stato{
    background-repeat: no-repeat;
    background-size: contain, cover;
    width: 25px;
    height: 25px;
    float:left;
  }
  
  
  .galleggiante_esercizio_info{
    text-align:left;
    color: black;
    font-weight: bold;
    font-size: 10px;
    line-height: 25px;
    min-height: 25px;
  }
  
  .galleggiante_esercizio{
    position: absolute;
    bottom: 50px;
    left: 25px;
    width: 100%;
    line-height: 25px;
    min-height: 25px;
    float:left;
  }

  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.main_loading {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width:10%;
}
.logo_image{
  width:35px;
  height:35px;
  margin-right: 10px;
}
  
  
 
   
  
.dark-mode .navbar-dark {
  background: url("../img/barra500x100dwm01.jpg") 50% 50% repeat !important;
  border-bottom: 3px solid #3aa935 !important;
  color: #ffffff !important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
  overflow: hidden;
}
  
.dark-mode .content-wrapper {
  transition: background-color 0.5s ease;
  background: url("../img/barra500x100dwm02.jpg") repeat !important;
  background-size: auto !important; /* Facoltativo, mantiene la dimensione originale */
  background-position: top left !important; /* Facoltativo, allinea l'immagine */
  color: #ffffff; /* Imposta il colore del testo per contrastare lo sfondo */
  overflow: hidden !important;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
  background: url("../img/barra500x10dwm01.png") 50% 50% repeat-x !important;
  border-bottom: 3px solid #3aa935 !important;
  color: #ffffff !important;
  transition: background-color 0.5s ease, color 0.5s ease;
  overflow: hidden;
}

[class*=sidebar-dark-] {
  background: url("../img/barra500x100dwm01.jpg") repeat !important;
  color: #ffffff !important;
  transition: background-color 0.5s ease, color 0.5s ease;
}

[class*=sidebar-dark-] a {
  color: #ffffff !important;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}

[class*=sidebar-dark-] a:hover {
  color: #3aa935 !important;
  background-color: #4a4949 !important;
  border-radius: 4px;
}

.dark-mode .main-footer {
  background: url("../img/barra500x100dwm01.jpg") 50% 50% repeat-x !important;
  border-top: 3px solid #3aa935 !important;
  color: #ffffff;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
  overflow: hidden;
}

.nav-sidebar .nav-link:hover, 
.nav-sidebar .nav-link.active {
  color: #3aa935 !important; /* Colore del testo al passaggio del mouse o quando è attivo */
  transform: translateY(-2px) scale(1.02);
}

.navbar-dark .navbar-nav .nav-link, 
.navbar-dark .navbar-nav .nav-link i {
  color: #ffffff !important; /* Testo e icone */
}

.navbar-dark .navbar-nav .nav-link:hover, 
.navbar-dark .navbar-nav .nav-link.active {
  color: #3aa935 !important;
  transform: translateY(-2px) scale(1.02);
}

.table thead th {
  background: url("../img/barra500x100dwm01.jpg") 40% 40% repeat-x !important;
  color: #3aa935 !important;
  border-color: transparent !important;
  border-bottom: 2px solid #3aa935 !important;
  font-weight: bold;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8);
}


#simple_slider img {
  max-width: inherit;
  max-height: inherit;
  height: inherit;
  width: inherit;
  object-fit: cover;
}