html{
    width: 1080px;
    height: 2130px;
    background: #29333f;
    
    
}
body{
    position: relative;
    width: 1080px;
    height: 2130px;
    margin: 0;   
    font-family: 'Roboto Thin', sans-serif;
    margin-left: auto;
    margin-right: auto;
}
.status_panel_main{  
    height: 90px;
    width: 1080px;
    background: #1d242c;
}
.blockwarning{
    position: relative;
    width: 1080px;
    height: 90px; 
    background: #1d242c; 
    margin-left: auto;
    margin-right: auto;  
}

/* Предупреждения и аварии */
.warning_false{
    position: absolute;
    top: 15px;
    right: 330px;
    width: 255px;
    height: 48px;
    border-style: solid;
    border-width: 3px;
    border-color: #5b6700;
    border-radius: 90px;
    text-align: center;
    font-size: 32px;
    color: #7c8d01;
    padding-top: 9px; 
    
}
.warning_true{
    position: absolute;
    top: 15px;
    right: 330px;
    width: 255px;
    height: 48px;
    background: rgb(245, 255, 0);
    border-style: solid;
    border-width: 3px;
    border-color: #5b6700;
    border-radius: 90px;
    text-align: center;
    font-size: 32px;
    /*font-weight: 900;*/
    color: #000000;
    padding-top: 9px; 
    
}
.alarm_false{
    position: absolute;
    top: 15px;
    right: 30px;
    width: 255px;
    height: 48px;
    border-style: solid;
    border-width: 3px;
    border-color: #9a0000;
    border-radius: 90px;
    text-align: center;
    font-size: 32px;
    color: #c60000;
    padding-top: 9px; 
   
}
.alarm_true{
    position: absolute;
    top: 15px;
    right: 30px;
    width: 255px;
    height: 48px;
    background: rgb(255, 0, 0);
    border-style: solid;
    border-width: 3px;
    border-color: #ff0000;
    border-radius: 90px;
    text-align: center;
    font-size: 32px;
    /*font-weight: 900;*/
    color: #ffffff;
    padding-top: 9px; 
}
.text_norm{
    position: absolute;
    left: 15px;
    right: 90px;
    width: 480px;
    font-size: 33px;
    color:#9b9b9b;
    padding-top: 0px; 
}
.text_warning{
    position: absolute;
    left: 15px;
    right: 90px;
    width: 480px;
    font-size: 33px;
    color:#ddaa00;
    padding-top: 0px; 
}
.text_alarm{
    position: absolute;
    left: 15px;
    right: 90px;
    width: 480px;
    font-size: 33px;
    color:#c31e00;
    padding-top: 0px; 
}

/* Журнал аварий */
.text_zagolovok{
    position: absolute;
    font-size: 33px;
    color:#cccccc;
    font-size: 39px;
}
.text_number{
    position: absolute;
    width: 105px;
    height: 48px;
    text-align: center;
    font-size: 33px;
    color:#cccccc;
    font-size: 39px;
}
.text_datetime{
    position: absolute;
    text-align: center;
    width: 120px;
    height: 48px;
    font-size: 33px;
    color:#cccccc;
    font-size: 39px;
}
.text_message_Y{
    position: absolute;
    width: 720px;
    height: 48px;
    font-size: 33px;
    color:#ffc62d;
    font-size: 39px;
}
.text_message_R{
    position: absolute;
    width: 720px;
    height: 48px;
    font-size: 33px;
    color:#ff3434;
    font-size: 39px;
}
.text_message{
    position: absolute;
    width: 720px;
    height: 48px;
    font-size: 33px;
    color:#cccccc;
    font-size: 39px;
}


.zatemnenie_none {
        display: none;
      }
.zatemnenie_block {
        background: rgba(0, 0, 0, 0.56);
        width: 1080px;
        height: 2130px;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: 1000;
      }
.window_none{
    display: none;    
}
.window_block{
    position: absolute;
    top: 400px;
    left: 30px;
    margin: 0;
    width: 1020px;
    height: 700px;
    background: rgb(33, 41, 51);
    border-radius: 24px;
    border-style: solid;
    border-width: 3px;
    border-color: #5a5a5a;
    display: block;
    z-index: 1010;
}
.window_panel_block{
    position: absolute;
    top: 100px;
    left: 60px;
    margin: 0;
    width: 960px;
    height: 1900px;
    max-height: 1900px;
    background: rgb(33, 41, 51);
    border-radius: 3px;
    border-style: solid;
    border-width: 3px;
    border-color: #5a5a5a;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    z-index: 1010;
    pointer-events: auto;
}
.header{
    position: relative;
    width: 970px;
    height: 105px;
    top: 1px;
    left: 2px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 50px;
    padding-top: 40px;
    padding-left: 45px;
    color: #ffffff;
}
.tx{
    position: absolute;
    width: 780px;
    height: 300px;
    top: 240px;
    left: 90px;
    font-size: 66px;
    color: #c1c1c1;
}
.link1{
    position: absolute;
    top: 30px;
    left: 84px;
    width: 90px;
    height: 30px;
    background: rgba(37, 201, 56, 0.63); 
    border-style: solid;
    border-width: 3px;
    border-color: #00ff14;
    border-radius: 30px;   
}
.link2{
    position: absolute;
    top: 30px;
    left: 84px;
    width: 90px;
    height: 30px;
    background: rgba(201, 119, 37, 0.63); 
    border-style: solid;
    border-width: 3px;
    border-color: #ff7600;
    border-radius: 30px;   
}
.link3{
    position: absolute;
    top: 30px;
    left: 84px;
    width: 90px;
    height: 30px;
    background: rgba(201, 37, 37, 0.62); 
    border-style: solid;
    border-width: 3px;
    border-color: #ff0000;
    border-radius: 30px;    
}
.workspace_block{    
    width: 1080px;
    background: rgb(38, 47, 59);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    left: 0px;
    top: 109px;
}
.workspace_none{
     display: none;
}
.process_page_block{
    position: relative;
    background: rgb(38, 47, 59);
    height: 1750px;
    width: 1080px; 
    top: 110px;
}
.process_page_none{
    display: none;
}
.block{
    position: relative; 
    margin-left: auto; 
    margin-right: auto;
}

.chart_block{
    position: relative;
    margin-left: auto;
    margin-right: auto; 
    height: 900px; 
    width: 900px; 
    top: 80px;  
}
.chart_none{
    display: none;  
}
.panel_block{    
    display: block;
    
}
.panel_none{
     display: none;
}


.type_process_not{
    position: absolute;
    font-size: 36px;
    color:#8d8d8d; 
}
.type_process{
    position: absolute;
    font-size: 33px;
    color: #ffc400;
}
.status_process_not{
    display: none; 
}
.status_process{
    position: absolute;
    width: 400px;
    font-size: 36px;
    color: #00b9ff;
}


.line_T{
    position: absolute; 
    top: 9px;
    left: 0px;
    width: 150px; 
    height: 3px; 
    background: #585858; 
}
.tochka{
    position: absolute;
    top: 3px;
    left: 0px;
    width: 15px;
    height: 15px;
    border-radius: 9px;
    background: #333333;
}
.line_T_left{
    position: absolute; 
    top: 9px;
    left: 330px;
    width: 150px; 
    height: 3px; 
    background: #585858; 
}
.tochka_left{
    position: absolute;
    top: 4px;
    left: 465px;
    width: 15px;
    height: 15px;
    border-radius: 9px;
    background: #333333;
}
.pos_T{
    position: absolute;
    width: 21px;
    height: 21px;
}
.POPUGAY{
    position: absolute;
    width: 225px;
    height: 80px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #212933;
    border-radius: 6px;
    text-align: center;
    font-size: 54px;
    color: #fd61c1;
    padding-top: 10px;
}
.temp_out{
    position: absolute;
    width: 180px;
    height: 65px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #212933;
    border-radius: 6px;
    text-align: center;
    font-size: 45px;
    color: #00ceff;
    padding-top: 6px;
}
.temp_tca{
    position: absolute;
    width: 210px;
    height: 65px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #212933;
    border-radius: 6px;
    text-align: center;
    font-size: 45px;
    color: #00ceff;
    padding-top: 6px;
}
.temp_high{
    position: absolute;
    width: 210px;
    height: 65px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #212933;
    border-radius: 6px;
    text-align: center;
    font-size: 45px;
    color: #00ff76;
    padding-top: 6px;
}
.temp_low{
    position: absolute;
    width: 210px;
    height: 65px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #212933;
    border-radius: 6px;
    text-align: center;
    font-size: 45px;
    color: #ebff00;
    padding-top: 6px;
}
.temp_kub{
    position: absolute;
    width: 270px;
    height: 80px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #005503;
    border-radius: 9px;
    text-align: center;
    font-size: 60px;
    color: #ffba00;
    padding-top: 9px;
}
.delta{
    position: absolute;
    width: 250px;
    height: 105px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #222934;
    border-radius: 9px;
    text-align: center;
    font-size: 60px;
    color: #ffffff;
    padding-top: 20px;
}
.uzel_sellect{
    position: absolute;
    width: 180px;
    height: 90px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: rgba(23, 27, 34, 0.43);
    border-radius: 6px;

    padding-top: 9px;
}
.fix_delta{
    position: absolute;
    width: 180px;
    height: 48px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 36px;
    color: #ff6192;
    padding-top: 6px;
}
.t_diapazon{
    position: absolute;
    width: 120px;
    height: 39px;
    font-size: 36px;
    color:#ffffff;
    padding-top: 0px;
    text-align: right;
}
.text_speed_diapazon{
    position: absolute;
    width: 150px;
    height: 48px;
    font-size: 42px;
    color:#ffb4b4;
    padding-top: 0px;
    text-align: center;
}

.power_heat{
    position: absolute;
    width: 285px;
    height: 120px;
    font-size: 100px;
    color:#ff7600;
    padding-top: 15px;
    text-align: right;
}
.power_heat2{
    position: absolute;
    width: 180px;
    height: 90px;
    font-size: 84px;
    color:#ff7600;
    padding-top: 0px;
    text-align: right;
}
.power_heat_PROCENT{
    position: absolute;
    width: 54px;
    height: 60px;
    font-size: 54px;
    color:#cccccc;
    left: 21px;
}
.power_heat_PROCENT2{
    position: absolute;
    width: 54px;
    height: 60px;
    font-size: 54px;
    color:#cccccc;
    left: 21px;
}
.power_heat_PROCENT_main{
    position: absolute;
    width: 54px;
    height: 60px;
    font-size: 66px;
    color:#cccccc;
    left: 41px;
}
.power_heat_kWt{
    position: absolute;
    width: 60px;
    height: 45px;
    font-size: 48px;
    color:#cccccc;
    padding-top: 33px;
    text-align: left;
    left: 45px;
}
.power_heat_kWt2{
    position: absolute;
    width: 90px;
    height: 45px;
    font-size: 48px;
    color:#cccccc;
    padding-top: 54px;
    text-align: left;
    left: 45px;
}
.power_heat_kWt_main{
    position: absolute;
    width: 90px;
    height: 45px;
    font-size: 50px;
    color:#cccccc;
    padding-top: 54px;
    text-align: left;
    left: 45px;
}

.speed_select{
    position: absolute;
    width: 210px;
    height: 60px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #454545;
    border-radius: 3px;
    text-align: center;
    font-size: 45px;
    color: #00d642;
    padding-top: 6px;
}
.valve_spirt_off{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 36px;
    height: 36px;
    border-style: solid;
    border-width: 3px;
    border-color: #605f5f;
    border-radius: 9px;
    background: linear-gradient(to top, #1d242e, #2e3946);
}
.valve_spirt_on{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 36px;
    height: 36px;
    border-style: solid;
    border-width: 3px;
    border-color: #00ff14;
    border-radius: 9px;
    background: linear-gradient(to top, #019a01, #01d10b);
}
.valve_def_off{
    position: absolute;
    width: 75px;
    height: 24px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #03499b;
    border-radius: 9px;
    text-align: center;
    font-size: 24px;
    color: #f0f0f0;
    padding-top: 6px;    
}
.valve_def_on{
    position: absolute;
    width: 75px;
    height: 24px;
    background: linear-gradient(to top, #005ecc, #0481fd);
    border-style: solid;
    border-width: 3px;
    border-color: #0093ff;
    border-radius: 9px;
    text-align: center;
    font-size: 30px;
    color: #f0f0f0;
    padding-top: 6px;    
}

/* -----------------------   Мешалка рыхлитель насос */
.speed_mx{
    position: absolute;
    width: 140px;
    height: 60px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #414141;
    border-radius: 6px;
    text-align: center;
    font-size: 45px;
    color: #00c3ac;
    padding-top: 6px;
}
/* Состояние запущен/остановлен*/
.status_grey{
    position: absolute;
    width: 75px;
    height: 27px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #444b57;
    border-radius: 6px;
    text-align: center;
    font-size: 20px;
    color: #b2b2b2;
    padding-top: 3px;    
}
.status_green{
    position: absolute;
    width: 75px;
    height: 27px;
    background: #00790e;
    border-style: solid;
    border-width: 3px;
    border-color: #00b71c;
    border-radius: 6px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    padding-top: 3px;    
}
.status_red{
    position: absolute;
    width: 75px;
    height: 27px;
    background: #b90233;
    border-style: solid;
    border-width: 3px;
    border-color: #ff0062;
    border-radius: 6px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    padding-top: 3px;    
}

/* Обратный таймер */
.timer_on{
    position: absolute;
    width: 180px;
    height: 36px;
    font-size: 36px;
    text-align: center;
    color: #d3a200;
}
.timer_off{
    position: absolute;
    width: 180px;
    height: 36px;
    font-size: 36px;
    text-align: center;
    color: #525252;
}

/* Индикация производительности */ 
.status_speed_on{
    position: absolute;
    width: 180px;
    height: 96px;
    font-size: 78px;
    color:#00bccc;
    padding-top: 0px;
    text-align: right;
}
.status_speed_off{
    position: absolute;
    width: 180px;
    height: 96px;
    font-size: 78px;
    color:#3e454e;
    padding-top: 0px;
    text-align: right;
}

/* Состояние двигателя */
.stop{
    position: absolute;
    width: 300px;
    height: 32px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
    color: #aaa8a8;
    padding-top: 4px;    
} /* ОСТАНОВЛЕН */
.starting{
    position: absolute;
    width: 300px;
    height: 32px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
    color: #fff500;
    padding-top: 4px;    
} /* ЗАПУСКАЕТСЯ */
.run{
    position: absolute;
    width: 300px;
    height: 32px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
    color: #14ff00;
    padding-top: 4px;    
} /* ЗАПУЩЕН */
.stoped{
    position: absolute;
    width: 300px;
    height: 32px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
    color: #ff9300;
    padding-top: 4px;    
} /* ОСТАНАВЛИВАЕТСЯ */
.pauza{
    position: absolute;
    width: 300px;
    height: 32px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
    color: #3188ff;
    padding-top: 4px;    
} /* ОЖИДАНИЕ */
.fault{
    position: absolute;
    width: 300px;
    height: 32px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
    color: #ff4848;
    padding-top: 4px;    
} /* АВАРИЯ */








.sptext0{
    position: absolute;
    color: #bebebe;
    font-size: 48px;
}
.text1{
    position: absolute;
    font-size: 30px;
    color:#cccccc;
    padding-top: 0px; 
}
.text3{
    position: absolute;
    font-size: 33px;
    color:#cccccc;
    padding-top: 0px; 
}
.input{
    width: 540px;
    height: 135px;
    font-family: 'Roboto Thin', sans-serif;
    text-align: center; 
    background: #1b2229;
    border: 0;
    font-size: 72px;
    font-weight: 300;
    color: #e4ed00;
    /*padding-top: 2px;*/
}
.SetBlock{
    position: relative;
    width: 1080px;
    height: 930px; 
    /*background: #1d242c; */
    margin-left: auto;
    margin-right: auto; 
}
.block-1{
    position: absolute;
    width: 1020px;
    height: 120px;
    background: #1e252e;
    padding-top: 24px;
    padding-left: 30px;
    font-size: 51px;
    color: #eaeaea;  
}
.block-11{
    position: absolute;
    top: 0px; 
    left: 495px;
}
.text_block-1{
    position: absolute;
    top: 39px; 
    left: 30px;
    font-size: 48px;
    color:#cccccc;
    /*padding-top: 1px;*/ 
}
.timer_process_on{
    position: absolute;
    width: 360px;
    height: 90px;
    font-size: 90px;
    text-align: center;
    color: #ea1760;
}
.timer_process_off{
    position: absolute;
    width: 360px;
    height: 90px;
    font-size: 90px;
    text-align: center;
    color: #525252;
}
.v1{
    position: absolute;
    width: 120px;
    height: 45px;
    font-size: 42px;
    color:#ffffff;
    padding-top: 0px;
    text-align: right;
}
.time{
    position: absolute;
    top: 45px; 
    left: 0px;
    font-size: 48px;
    color:#ffffff;
    padding-top: 0px; 
}
.text4{
    position: absolute;
    font-size: 33px;
    color:#aaaaaa;
    padding-top: 3px; 
}
.text5{
    position: absolute;
    font-size: 33px;
    color:#ffba00;
    padding-top: 3px; 
}
.line_buton_menu{
    position: absolute; 
    /*top: 3px;*/
    left: 30px;
    width: 120px; 
    height: 6px; 
    background: #36404e; 
}

/*-------------------- РЕКТИФИКАЦИЯ --------------------------------*/
.t1{
    
}
.status1{
    display: inline-block;
    margin-left: -30px;
    width: 150px; 
    height: 30px;
    background: #151a21;  
     border-style: solid;
    border-width: 9px;
    border-color: #1e252e;   
    color: #a8a8a8;
    text-align: center;
    padding-top: 6px;
    font-size: 24px;
    
}

/*-------------------- ЗАТИРАНИЕ --------------------------------*/
.tx_pauz{
    position: relative; 
    top: 15px;
    text-align: center; 
    font-size: 24px;
    color: #8d8d8d;
}
.payz_grey{
    position: absolute;
    width: 240px;
    height: 300px;
    background: #1e252e;
    border-radius: 6px;
    border-style: solid;
    border-width: 3px;
    border-color: #363e50;
}
.payz_orange{
    position: absolute;
    width: 240px;
    height: 300px;
    background: #1e252e;
    border-radius: 6px;
    border-style: solid;
    border-width: 3px;
    border-color: #ffc400;
}
.payz_yelow{
    position: absolute;
    width: 240px;
    height: 300px;
    background: #1e252e;
    border-radius: 6px;
    border-style: solid;
    border-width: 3px;
    border-color: #ebff00;
}
.payz_green{
    position: absolute;
    width: 240px;
    height: 300px;
    background: #1e252e;
    border-radius: 6px;
    border-style: solid;
    border-width: 3px;
    border-color: #0aff00;
}
.ust_temp_pauz{
    position: absolute;
    top: 57px;
    width: 240px;
    height: 75px;
    background: #161b22;
    border-width: 0px;
    text-align: center;
    font-size: 54px;
    color: #f2f2f2;
    padding-top: 15px;

}
.ust_time_pauz{
    position: absolute;
    top: 156px;
    left: 15px;
    width: 105px;
    height: 60px;

    text-align: right;
    font-size: 45px;
    color: #cecece;
}
.tx_time_pauz{
    position: absolute; 
    top: 177px;
    left: 129px;
    text-align: center; 
    font-size: 24px;
    color: #dbdbdb;
}
.tx_status_pauz_grey{
    position: absolute;
    width: 240px;
    height: 45px;
    top: 240px;
    left: 0px;
    text-align: center; 
    font-size: 30px;
    color: #909090;
}
.tx_status_pauz_orange{
    position: absolute;
    width: 240px;
    height: 60px;
    top: 237px;
    left: 0px;
    text-align: center; 
    font-size: 24px;
    color: #ffc400;
}
.tx_status_pauz_yelow{
    position: absolute;
    width: 240px;
    height: 45px;
    top: 240px;
    left: 0px;
    text-align: center; 
    font-size: 30px;
    color: #ebff00;
}
.tx_status_pauz_green{
    position: absolute;
    width: 240px;
    height: 45px;
    top: 240px;
    left: 0px;
    text-align: center; 
    font-size: 30px;
    color: #0aff00;
}


.temp_kub2{
    position: absolute;
    width: 280px;
    height: 90px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #272727;
    border-radius: 9px;
    text-align: center;
    font-size: 70px;
    color: #ffce00;
    padding-top: 3px;
}
.temp_rub2{
    position: absolute;
    width: 300px;
    height: 54px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #272727;
    border-radius: 9px;
    text-align: center;
    font-size: 42px;
    color: #ffba00;
    padding-top: 3px;
}
.mixer2_off{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 54px;
    height: 54px;
    border-style: solid;
    border-width: 3px;
    border-color: #6a6a6a;
    border-radius: 45px;
    background: linear-gradient(to top, #1d242e, #2e3946);
}
.mixer2_on{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 54px;
    height: 54px;
    border-style: solid;
    border-width: 3px;
    border-color: #00ff14;
    border-radius: 45px;
    background: linear-gradient(to top, #019a01, #01d10b);
}

/*-------------------- Дистилляция --------------------------------*/
.temp_kub_dist{
    position: absolute;
    width: 270px;
    height: 79px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #626262;
    border-radius: 9px;
    text-align: center;
    font-size: 60px;
    color: #ffba00;
    padding-top: 6px;
}

/*-------------------- Дробная дистилляция 3 --------------------------------*/
.temp_kub_dd3{
    position: absolute;
    width: 165px;
    height: 60px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #626262;
    border-radius: 9px;
    text-align: center;
    font-size: 42px;
    color: #ffba00;
    padding-top: 3px;
}
.temp_dd3{
    position: absolute;
    width: 120px;
    height: 48px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 36px;
    color: #00ceff;
    padding-top: 6px;
}

/*-------------------- НБК (из APK 1.2) ----------------------*/
.round_30_off{
    position: absolute;
    width: 30px;
    height: 30px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #777777;
    border-radius: 60px;
}
.round_30_on{
    position: absolute;
    width: 30px;
    height: 30px;
    background: #009138;
    border-style: solid;
    border-width: 3px;
    border-color: #00ff4e;
    border-radius: 60px;
}
.round_40_off{
    position: absolute;
    width: 40px;
    height: 40px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #777777;
    border-radius: 60px;
}
.round_40_on{
    position: absolute;
    width: 40px;
    height: 40px;
    background: #009138;
    border-style: solid;
    border-width: 3px;
    border-color: #00ff4e;
    border-radius: 60px;
}
.temp{
    position: absolute;
    width: 170px;
    height: 60px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #212933;
    border-radius: 6px;
    text-align: center;
    font-size: 280%;
    padding-top: 6px;
}
.status_yelow{
    position: absolute;
    width: 75px;
    height: 27px;
    background: #d4e504;
    border-style: solid;
    border-width: 3px;
    border-color: #f6ff0b;
    border-radius: 6px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    padding-top: 3px;
}
.Press{
    position: absolute;
    width: 180px;
    height: 70px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #212933;
    border-radius: 6px;
    text-align: center;
    font-size: 300%;
    padding-top: 10px;
    color: #ffeb00;
}

/*----------------------------------------------------*/
#pieChart {
  position: absolute;
  top: 0px;
  left: 0px; 

}
#graph {

  stroke-dasharray: 630px;
  stroke-dashoffset: 630px;
  -webkit-transform-origin: 44.5% 44.5%;
  transform-origin: 44.5% 44.5%;
  -webkit-transform: rotate(-90deg);
  transform: rotate(90deg);
}
/*----------------------------------------------------*/
/*----------------------------------------------------*/
#pieChart2 {
  position: absolute;
  top: 0px;
  left: 0px; 

}
#graph2 {

  stroke-dasharray: 630px;
  stroke-dashoffset: 630px;
  -webkit-transform-origin: 44.5% 44.5%;
  transform-origin: 44.5% 44.5%;
  -webkit-transform: rotate(-90deg);
  transform: rotate(90deg);
}

#pieChart3 {
  position: absolute;
  top: 0px;
  left: 0px; 

}
#graph3 {

  stroke-dasharray: 300px;
  stroke-dashoffset: 300px;
  -webkit-transform-origin: 44.5% 44.5%;
  transform-origin: 44.5% 44.5%;
  -webkit-transform: rotate(-90deg);
  transform: rotate(90deg);
}

/*----------------------------------------------------*/
.Panel_Rub{
    /*position: absolute;*/ 
    width: 1080px;
    height: 240px;  
    top: 1000px; 
    left: 0px;
}

/* СТАТУС РУБАШКИ ПВК  */
.status_rub_not{
    position: relative;
    width: 270px;
    height: 34px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #aaa8a8;
    padding-top: 4px;    
} /* неопределено */
.status_rub_opened{
    position: relative;
    width: 270px;
    height: 34px;
    background: #e5ef00;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #313131;
    padding-top: 4px;    
} /* открывается */
.status_rub_open{
    position: relative;
    width: 270px;
    height: 34px;
    background: #029d1a;
    border-style: solid;
    border-width: 3px;
    border-color: #21d900;
    border-radius: 6px;
    text-align: center;
    font-size: 26px;
    color: #ffffff;
    padding-top: 4px;    
} /* открыта */
.status_rub_closened{
    position: relative;
    width: 270px;
    height: 34px;
    background: #dba000;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #ffffff;
    padding-top: 4px;    
} /* закрывается */
.status_rub_close{
    position: relative;
    width: 270px;
    height: 34px;
    background: #ff4f4f;
    border-style: solid;
    border-width: 3px;
    border-color: #ff0000;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #ffffff;
    padding-top: 4px;    
} /* закрыта */

/* РЕЖИМ РУБАШКИ ПВК  */
.mode_rub_not{
    position: relative;
    width: 204px;
    height: 34px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #aaa8a8;
    padding-top: 4px;    
}
.mode_rub_par{
    position: relative;
    width: 204px;
    height: 34px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #bf9300;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #aaa8a8;
    padding-top: 4px;    
}
.mode_rub_water{
    position: relative;
    width: 204px;
    height: 34px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #0054c6;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #aaa8a8;
    padding-top: 4px;    
}
.mode_rub_perexod{
    position: relative;
    width: 204px;
    height: 34px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #a2a2a2;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #aaa8a8;
    padding-top: 4px;    
}


/* РЕЖИМ УПРАВЛЕНИЯ РУБАШКОЙ  */
.modeupr_rub_manu{
    position: relative;
    width: 45px;
    height: 34px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #ffce00;
    padding-top: 4px;    
}
.modeupr_rub_auto{
    position: relative;
    width: 45px;
    height: 34px;
    background: #1dbc00;
    border-style: solid;
    border-width: 3px;
    border-color: #535353;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #ffffff;
    padding-top: 4px;    
}

.temp_RUB{
    position: absolute;
    width: 120px;
    height: 45px;
    font-size: 48px;
    color:#ffffff;
    padding-top: 0px;
    text-align: right;
}

.press_RUB{
    position: absolute;
    width: 120px;
    height: 45px;
    font-size: 48px;
    color:#ffffff;
    padding-top: 0px;
    text-align: right;
}


.grey{
    position: absolute;
    width: 105px;
    height: 34px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #444b57;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #f0f0f0;
    padding-top: 4px;    
}
.green{
    position: absolute;
    width: 105px;
    height: 34px;
    background: #00bf16;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #f0f0f0;
    padding-top: 4px;    
}
.red{
    position: absolute;
    width: 105px;
    height: 34px;
    background: #e6002c;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #f0f0f0;
    padding-top: 4px;    
}
.blue{
    position: absolute;
    width: 105px;
    height: 34px;
    background: #008ee6;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #f0f0f0;
    padding-top: 4px;    
}

/* ИНДИКАЦИЯ В МЕНЮ ЗАПУЩЕННОГО ПРОЦЕССА  */
.grey_process{
    position: absolute;
    width: 60px;
    height: 20px;
    background: rgba(41, 50, 62, 0.56);
    border-style: solid;
    border-width: 3px;
    border-color: rgba(68, 75, 87, 0.4);
    border-radius: 6px;
    padding-top: 4px;    
}
.blue_process{
    position: absolute;
    width: 60px;
    height: 20px;
    background: rgba(33, 195, 224, 0.58);
    border-style: solid;
    border-width: 3px;
    border-color: #14b0cc;
    border-radius: 6px;
    padding-top: 4px;    
}



.StatusPanelBlock{
    position: relative;
    width: 1080px;
    height: 400px; 
    background: #1d242c; 
    top: 150px; 

}
.StatusPanel{
    position: relative;
    width: 1080px;
    height: 400px; 
    top: 120px; 
    background: #1d242c;
    margin-left: auto;
    margin-right: auto;
}



/* Бродильные емкости  */
.temp_brod{
    position: absolute;
    width: 162px;
    height: 57px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #3e3e3e;
    border-radius: 6px;
    text-align: center;
    font-size: 42px;
    color: #00ffff;
    padding-top: 3px;
}
.block_brod{
    position: absolute;
    width: 420px;
    height: 850px;
}
.block_valve_norm{
    position: absolute;
    width: 210px;
    height: 60px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 48px;
    color: #00d8ff;
    padding-top: 6px;    
}
.block_valve_error{
    position: absolute;
    width: 210px;
    height: 60px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 48px;
    color: #ffd800;
    padding-top: 6px;    
}
.upr_brod_on{
    position: absolute;
    width: 210px;
    height: 30px;
    background: #00af3d;
    border-style: solid;
    border-width: 3px;
    border-color: #14ff00;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #ffffff;
    padding-top: 3px;    
}
.upr_brod_off{
    position: absolute;
    width: 150px;
    height: 39px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #323c4b;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #f0f0f0;
    padding-top: 6px;    
}
.valve_brod_off{
    position: absolute;
    width: 30px;
    height: 30px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #777777;
    border-radius: 60px;   
}
.valve_brod_on{
    position: absolute;
    width: 30px;
    height: 30px;
    background: #009138;
    border-style: solid;
    border-width: 3px;
    border-color: #00ff4e;
    border-radius: 60px;
}


.bouler_temp{
    position: absolute;
    width: 360px;
    height: 100px;
    background: #1d242c;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 72px;
    color: #00ff31;
    padding-top: 6px;    
}
.max_level_false{
    position: absolute;
    width: 135px;
    height: 30px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 27px;
    color: #f0f0f0;
    padding-top: 3px;    
}

.D_status1{
    position: absolute;
    width: 105px;
    height: 36px;
    background: #29323e;
    border-style: solid;
    border-width: 3px;
    border-color: #13171d;
    border-radius: 6px;
    text-align: center;
    font-size: 30px;
    color: #f0f0f0;
    padding-top: 3px;    
}
.D_status2{
    position: absolute;
    width: 150px;
    height: 42px;
    background: #006dff;
    border-style: solid;
    border-width: 3px;
    border-color: #006dff;
    border-radius: 6px;
    text-align: center;
    font-size: 42px;
    color: #ffffff;
    padding-top: 0px;    
}

.alarm_text_grey{
    position: absolute;
    font-size: 36px;
    color:#868383;
    padding-top: 3px; 
}
.alarm_text_yelow{
    position: absolute;
    font-size: 36px;
    color:#f78e00;
    padding-top: 3px; 
}
.alarm_text_red{
    position: absolute;
    font-size: 36px;
    color:#f78e00;
    padding-top: 3px; 
}

/*----------------------------------------------------*/
.switch_off {
  position: absolute;
   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 36px;        
  color: #ffffff; 
  /*width: 118px;
  height: 23px;*/
    width: 355px;
    height: 75px;
  text-align: center;
  cursor: pointer;
    
    
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 27px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 0px;  /* Устанавливает радиус скругления уголков рамки.*/
    border-style: solid;
    border-width: 1px;
    border-color: #1e242e;
  background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  /*box-shadow:  /* Добавляет тень к элементу.*/
  /* 0 0px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.5),
   0 0 1px 1px rgba(0,1,6,.2);*/
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}
.switch_off:hover:not(:active) {  /* hover Определяет стиль элемента при наведении на него курсора мыши. Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор*/
  background:  linear-gradient(to top, #262f3b, #2c3743);
}
.switch_off:active {   /* Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.*/
  
  background: linear-gradient(to top, #212933, #262f3b);
  box-shadow:
   0 0 1px rgba(0,0,0,.5) inset,
   0 2px 3px rgba(0,0,0,.5) inset,
   0 1px 1px rgba(255,255,255,.1);
}
.switch_on {
  position: absolute;

   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 36px;        
  color: #ffffff; 
  width: 355px;
  height: 75px;
  text-align: center;
  cursor: pointer;
    
 
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -1px 2px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 27px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 0px;  /* Устанавливает радиус скругления уголков рамки.*/
    border-style: solid;
    border-width: 1px;
    border-color: #14191f;
    background: #1d242c;
  /*background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  /*box-shadow:  /* Добавляет тень к элементу.*/
  /* 0 0px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.5),
   0 0 1px 1px rgba(0,1,6,.2);*/
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}

.switch_indicator_on{
    position: absolute;
    top: 95px;
    height: 6px;
    width: 100%;
    background: rgb(6, 102, 145);
}
.switch_indicator_off{  
    display: none;
}





.button_none{
    display: none;  
}

.button_menu {
  position: absolute;

   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 42px;        
  color: #ffffff; 
  width: 180px;
  height: 90px;
  text-align: center;
   cursor: pointer;
    
    
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -3px 2px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 30px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 3px;  /* Устанавливает радиус скругления уголков рамки.*/
  background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  box-shadow:  /* Добавляет тень к элементу.*/
   0 0px rgba(255,255,255,.2) inset,
   0 9px 15px rgba(0,1,6,.5),
   0 0 3px 3px rgba(0,1,6,.2);
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}
.button_menu:hover:not(:active) {  /* hover Определяет стиль элемента при наведении на него курсора мыши. Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор*/
  background:  linear-gradient(to top, #262f3b, #2c3743);
}
.button_menu:active {   /* Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.*/
  
  background: linear-gradient(to top, #212933, #262f3b);
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 6px 9px rgba(0,0,0,.5) inset,
   0 3px 3px rgba(255,255,255,.1);
}

.button_alarm {
  position: absolute;

   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 42px;        
  color: #9b4848; 
  width: 360px;
  height: 90px;
  text-align: center;
   cursor: pointer;
    
    
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -3px 6px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 30px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 3px;  /* Устанавливает радиус скругления уголков рамки.*/
  background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  box-shadow:  /* Добавляет тень к элементу.*/
   0 0px rgba(255,255,255,.2) inset,
   0 9px 15px rgba(0,1,6,.5),
   0 0 3px 3px rgba(0,1,6,.2);
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}
.button_alarm:hover:not(:active) {  /* hover Определяет стиль элемента при наведении на него курсора мыши. Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор*/
  background:  linear-gradient(to top, #262f3b, #2c3743);
}
.button_alarm:active {   /* Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.*/
  
  background: linear-gradient(to top, #212933, #262f3b);
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 6px 9px rgba(0,0,0,.5) inset,
   0 3px 3px rgba(255,255,255,.1);
}

.button_end_process {
  position: absolute;

   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 42px;        
  color: #767676; 
  width: 360px;
  height: 112px;
  text-align: center;
   cursor: pointer;
    
    
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -3px 6px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 8px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 3px;  /* Устанавливает радиус скругления уголков рамки.*/
  background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  box-shadow:  /* Добавляет тень к элементу.*/
   0 0px rgba(255,255,255,.2) inset,
   0 9px 15px rgba(0,1,6,.5),
   0 0 3px 3px rgba(0,1,6,.2);
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}
.button_end_process:hover:not(:active) {  /* hover Определяет стиль элемента при наведении на него курсора мыши. Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор*/
  background:  linear-gradient(to top, #262f3b, #2c3743);
}
.button_end_process:active {   /* Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.*/
  
  background: linear-gradient(to top, #212933, #262f3b);
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 6px 9px rgba(0,0,0,.5) inset,
   0 3px 3px rgba(255,255,255,.1);
}

.button_aktiv_alarm {
  position: absolute;

   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 42px;        
  color: #9b4848; 
  width: 360px;
  height: 90px;
  text-align: center;
   cursor: pointer;
    
    
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -3px 6px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 30px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 3px;  /* Устанавливает радиус скругления уголков рамки.*/
  background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  box-shadow:  /* Добавляет тень к элементу.*/
   0 0px rgba(255,255,255,.2) inset,
   0 9px 15px rgba(0,1,6,.5),
   0 0 3px 3px rgba(0,1,6,.2);
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}
.button_aktiv_alarm:hover:not(:active) {  /* hover Определяет стиль элемента при наведении на него курсора мыши. Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор*/
  background:  linear-gradient(to top, #262f3b, #2c3743);
}
.button_aktiv_alarm:active {   /* Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.*/
  
  background: linear-gradient(to top, #212933, #262f3b);
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 6px 9px rgba(0,0,0,.5) inset,
   0 3px 3px rgba(255,255,255,.1);
}

.button_panel {
  position: absolute;

   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 42px;        
  color: #ffffff; 
  width: 930px;
  height: 90px;
  text-align: center;
   cursor: pointer;
    
    
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -3px 6px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 30px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 1px;  /* Устанавливает радиус скругления уголков рамки.*/
  background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  box-shadow:  /* Добавляет тень к элементу.*/
   0 0px rgba(255,255,255,.2) inset,
   0 9px 15px rgba(0,1,6,.5),
   0 0 3px 3px rgba(0,1,6,.2);
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}
.button_panel:hover:not(:active) {  /* hover Определяет стиль элемента при наведении на него курсора мыши. Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор*/
  background:  linear-gradient(to top, #262f3b, #2c3743);
}
.button_panel:active {   /* Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.*/
  
  background: linear-gradient(to top, #212933, #262f3b);
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 6px 9px rgba(0,0,0,.5) inset,
   0 3px 3px rgba(255,255,255,.1);
}

.button1 {
  position: absolute;

   /* свойство, которое определяет, как элемент должен быть показан в документе */
  /*font-family: 'Roboto Thin', sans-serif;*/
  font-size: 42px;        
  color: #ffffff; 
  width: 330px;
  height: 90px;
  text-align: center;
   cursor: pointer;
    
    
    
    
   
    
  text-decoration: none;    /* Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  text-shadow: 0 -3px 6px rgba(0,0,0,.2);  /* Добавляет тень к тексту, а также устанавливает её параметры*/
  padding-top: 30px;             /* Устанавливает значение полей вокруг содержимого элемента*/     
  outline: none; /* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.*/
  border-radius: 3px;  /* Устанавливает радиус скругления уголков рамки.*/
  background: linear-gradient(to top, #212933, #262f3b); /* Универсальное свойство background позволяет установить одновременно до пяти характеристик фона */
  box-shadow:  /* Добавляет тень к элементу.*/
   0 0px rgba(255,255,255,.2) inset,
   0 9px 15px rgba(0,1,6,.5),
   0 0 3px 3px rgba(0,1,6,.2);
  transition: .1s ease-in-out; /* Устанавливает эффект перехода между двумя состояниями элемента, (ease-in-out
Анимация начинается и заканчивается медленно)*/
}
.button1:hover:not(:active) {  /* hover Определяет стиль элемента при наведении на него курсора мыши. Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор*/
  background:  linear-gradient(to top, #262f3b, #2c3743);
}
.button1:active {   /* Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.*/
  
  background: linear-gradient(to top, #212933, #262f3b);
  box-shadow:
   0 0 3px rgba(0,0,0,.5) inset,
   0 6px 9px rgba(0,0,0,.5) inset,
   0 3px 3px rgba(255,255,255,.1);
}

.ng-app-connect-block {
    display: block;
    height: auto !important;
    min-height: 200px;
    padding: 18px 30px 20px;
    box-sizing: border-box;
    overflow: visible;
}
.ng-app-connect-btn {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 960px;
    height: 90px;
    margin: 0;
    padding-top: 30px;
    box-sizing: border-box;
}
.ng-app-connect-status {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 14px 0 0 0;
    padding: 0;
    font-size: 36px;
    line-height: 1.35;
    color: #9d9d9d;
    word-break: break-word;
    clear: both;
}
.ng-app-connect-status.is-ok {
    color: #6fcf97;
}
.ng-app-connect-status.is-error {
    color: #ff6b6b;
}
.ng-app-connect-status.is-busy {
    color: #e8c547;
}

#set_page .SetBlock {
    height: auto;
    min-height: 1280px;
    padding-bottom: 100px;
}

.ng-app-sections-block {
    position: absolute;
    top: 920px;
    left: 15px;
    width: 1020px;
    box-sizing: border-box;
    z-index: 2;
}

.ng-app-sections-settings {
    display: block !important;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    background: #171d24;
    border: 1px solid #2d3748;
    border-radius: 8px;
    padding: 20px 22px 22px;
    color: #eaeaea;
    font-size: 34px !important;
    line-height: 1.35;
    overflow: visible;
}

.ng-app-sections-title {
    display: block !important;
    position: static;
    margin: 0 0 14px 0;
    padding: 0;
    font-size: 1em;
    font-weight: 400;
    color: #cccccc;
    white-space: normal;
}

.ng-app-sections-list {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.ng-app-sections-row {
    display: table !important;
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 0 2px 0;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.ng-app-sections-check,
.ng-app-sections-label {
    display: table-cell !important;
    vertical-align: middle;
    padding: 10px 6px;
    font-size: 1em;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}

.ng-app-sections-check {
    width: 52px;
    text-align: center;
}

.ng-app-sections-label {
    width: auto;
    color: #eaeaea;
}

.ng-app-sections-row input[type="checkbox"] {
    width: 32px;
    height: 32px;
    margin: 0;
    vertical-align: middle;
}

#set_page .block-1.ng-app-connect-block {
    height: auto !important;
    min-height: 200px;
    overflow: visible;
}

@media (max-width: 900px) {
    #set_page .SetBlock {
        width: 100%;
        max-width: 100vw;
        min-height: 0;
        padding: 0 10px 72px;
        box-sizing: border-box;
    }

    #set_page .block-1 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 0;
        margin: 0 0 12px 0;
        padding: 14px 12px 16px;
        font-size: 22px;
        box-sizing: border-box;
        overflow: visible;
    }

    #set_page .block-11 {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-top: 8px;
    }

    #set_page .text_block-1 {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        font-size: 22px;
        line-height: 1.25;
        margin: 0 0 6px 0;
        padding: 0;
    }

    #set_page .input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 22px;
    }

    #set_page .ng-app-connect-block {
        padding: 12px;
        gap: 12px;
    }

    #set_page .ng-app-connect-btn {
        height: auto;
        min-height: 52px;
        padding: 14px 12px 12px;
        font-size: 20px;
        line-height: 1.2;
    }

    #set_page .ng-app-connect-status {
        font-size: 18px;
        line-height: 1.3;
    }

    #set_page .ng-app-sections-settings {
        width: 100%;
        max-width: 100%;
        margin: 4px 0 0 0;
        padding: 14px 12px 16px;
    }

    #set_page .ng-app-sections-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    #set_page .ng-app-sections-list {
        gap: 4px;
    }

    #set_page .ng-app-sections-block {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 0 16px 0;
    }

    #set_page .ng-app-sections-settings {
        font-size: 20px !important;
        padding: 14px 12px 16px;
    }

    #set_page .ng-app-sections-check {
        width: 40px;
    }

    #set_page .ng-app-sections-row input[type="checkbox"] {
        width: 26px;
        height: 26px;
    }
}

html.ng-app-narrow #set_page .ng-app-sections-block {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 16px 0;
}

html.ng-app-narrow #set_page .SetBlock {
    width: 100%;
    max-width: 100vw;
    min-height: 0;
    padding: 0 10px 72px;
    box-sizing: border-box;
}

html.ng-app-narrow #set_page .block-1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 56px;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    font-size: 16px;
    box-sizing: border-box;
    overflow: visible;
}

html.ng-app-narrow #set_page .block-11 {
    position: relative;
    top: auto;
    left: auto;
    flex: 1 1 50%;
    width: auto;
    max-width: 52%;
    margin: 0;
}

html.ng-app-narrow #set_page .text_block-1 {
    position: relative;
    top: auto;
    left: auto;
    flex: 1 1 45%;
    font-size: 15px;
    line-height: 1.25;
    margin: 0;
    padding: 0;
    text-align: left;
}

html.ng-app-narrow #set_page .input {
    width: 100%;
    max-width: 100%;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 52px !important;
    line-height: 44px !important;
    box-sizing: border-box;
    font-size: 22px;
}

html.ng-app-narrow #set_page .ng-app-connect-block {
    padding: 12px;
}

html.ng-app-narrow #set_page .ng-app-connect-btn {
    height: auto;
    min-height: 52px;
    padding: 14px 12px 12px;
    font-size: 20px;
    line-height: 1.2;
}

html.ng-app-narrow #set_page .ng-app-connect-status {
    font-size: 18px;
    line-height: 1.3;
    margin-top: 12px;
}

html.ng-app-narrow #set_page .ng-app-sections-block {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 16px 0;
}

html.ng-app-narrow #set_page .ng-app-sections-settings {
    font-size: 20px !important;
    padding: 14px 12px 16px;
}

html.ng-app-narrow #set_page .ng-app-sections-check {
    width: 40px;
}

html.ng-app-narrow #set_page .ng-app-sections-row input[type="checkbox"] {
    width: 26px;
    height: 26px;
}

/* Телефон: экран «Сетевые параметры» — как на десктопе, на всю ширину, со скроллом */
html.ng-app-narrow.ng-app-settings-open,
html.ng-app-narrow.ng-app-settings-open body {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

html.ng-app-narrow.ng-app-settings-open .status_panel_main {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
}

html.ng-app-narrow.ng-app-settings-open .blockwarning {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

html.ng-app-narrow.ng-app-settings-open .ng-layout-toggle {
    position: static !important;
    order: 1;
    min-width: 0 !important;
    width: auto !important;
    max-width: 38vw;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1.2;
    flex: 0 1 auto;
}

html.ng-app-narrow.ng-app-settings-open .link1,
html.ng-app-narrow.ng-app-settings-open .link2,
html.ng-app-narrow.ng-app-settings-open .link3 {
    position: static !important;
    order: 2;
    width: 40px !important;
    height: 22px !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

html.ng-app-narrow.ng-app-settings-open #warning,
html.ng-app-narrow.ng-app-settings-open #alarm,
html.ng-app-narrow.ng-app-settings-open .warning_false,
html.ng-app-narrow.ng-app-settings-open .warning_true,
html.ng-app-narrow.ng-app-settings-open .alarm_false,
html.ng-app-narrow.ng-app-settings-open .alarm_true {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    order: 3;
    width: auto !important;
    max-width: 46vw;
    height: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    flex: 1 1 auto;
    box-sizing: border-box;
}

html.ng-app-narrow.ng-app-settings-open #app_switch_bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 6px 8px 8px !important;
    box-sizing: border-box !important;
}

html.ng-app-narrow.ng-app-settings-open #app_switch_bar > div {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 10px 4px !important;
    box-sizing: border-box !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page.process_page_block {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 110px 0 !important;
    overflow: visible !important;
    background: #29333f;
}

html.ng-app-narrow.ng-app-settings-open #set_page .SetBlock {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 10px 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .block-1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    margin: 0 0 10px 0 !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .text_block-1 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    flex: 1 1 45% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .block-11 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    flex: 1 1 50% !important;
    width: auto !important;
    max-width: 52% !important;
    margin: 0 !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .input {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 52px !important;
    font-size: 22px !important;
    line-height: 44px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-connect-block {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    min-height: 0 !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-connect-btn {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-connect-status {
    font-size: 14px !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-sections-block {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-sections-settings {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    padding: 14px 12px 16px !important;
    box-sizing: border-box !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-sections-title {
    font-size: 17px !important;
    margin-bottom: 10px !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-sections-check {
    width: 40px !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-sections-row input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
}

html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-sections-check,
html.ng-app-narrow.ng-app-settings-open #set_page .ng-app-sections-label {
    padding: 10px 4px !important;
    font-size: 15px !important;
}

html.ng-app-narrow.ng-app-settings-open #app_bottom_bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    z-index: 50;
    box-sizing: border-box !important;
    background: #1d242c;
}