html { overflow-x: hidden; height: 100%; }

body { font-family: Tahoma, Verdana, Arial, sans-serif;            
       color: #000000;
       background-color: #ffffff;
       background-image: var(--bg-main-image);
       background-repeat: no-repeat;
       background-size: cover;
       margin-left:   0px;
       margin-top:    0px;
       margin-right:  0px;
       margin-bottom: 0px;
       overflow-x: hidden;
       height: 100%;
       overflow: hidden;
     }

.mbox { position:relative;                                
        float:left;
        width:50%;
        border-radius: 20px 20px 20px 20px; 
        -webkit-border-radius: 20px 20px 20px 20px;               
        padding:50px;              
        background: #eff1f4;
        margin-bottom: 20px;
        margin-top: 20px;
        font-size:18px;
        font-size: 48px;              
        text-align: center;
        cursor: pointer;
        left: 20%;
      }

.inputbutton { position:relative;
               border: solid;
               color: #000;
               border-width: 1px;                      
               height:30px;
               width:100%;
               padding:0px 10px 0px 10px;
               border-radius: 5px 5px 5px 5px;
               box-sizing:border-box;
               font-size: 48px;
               line-height:48px;
               text-align: center;
             }

.inputbox { position:relative;                    
            border:  #8aaec8 2px solid;                 
            font-size:30px;
            line-height:30px;
            height:30px; 
            width:100%;
            height:102%;
            padding:10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
            box-sizing:border-box;
          }

#wrapper { float:left;
           width:100%;
           height: 100%;             
         }

.mbox:hover { background: linear-gradient(to bottom, #eff1f4 25%, #c0c0ff 100%); }

.bigmbox { height: 450px; 
           cursor: default; 
           line-height: 450px; 
           display: none; 
           padding: 0px;
           left: 25%; 
         }

.welcomembox { height: 450px; 
               cursor: default; 
               line-height: 450px; 
               display: block; 
               padding: 0px;
               left: 15%; 
               width:70%;
               background-image: url(/img/phone.png);
               background-size: 300px;
               background-repeat: no-repeat; 
               background-position: left; 
             }

.welcomembox:hover { background: #eff1f4;
                     background-image: url(/img/phone.png);
                     background-size: 300px;
                     background-repeat: no-repeat;
                     background-position: left; 
                   }

#terminal_top { position:relative;                                
                float:left;                        
                height: 4%;
                width: 100%; 
              }

#infoh { display: table-cell;
         vertical-align: middle; 
         text-align: center;
         display: none; 
       }

.bigmbox:hover, .mboxtab:hover { background: var(--vtab_block_background); }

.mboxall:hover  { background: var(--allview_block_background); }

#view_top { position:relative;
            float:left;
            width:100%;                  
            height: 10%;
            background-color: var(--top_block_background);
            text-align: center;
            color: var(--top_block_textcolor);
            font-size: 4.5vmin;
          }

#view_comm_top { position:relative;
                 float:left;
                 width:100%;                  
                 height: 5%;
                 background: var(--view_comm_block_background);
                 text-align: center;
                 color: var(--view_comm_block_textcolor);
                 font-size: 22px;
               }

#view_bottom { position:relative;
               float:left;
               width:100%;                  
               height: 10%;
               background-color: var(--buttom_block_background);
               text-align: center;
               color: var(--buttom_block_textcolor);
               font-size: 42px;
             }

#view_box { position:relative;
            float:left;
            width:100%;
            left:0px;
            height: 75%;
          }

.mboxtab { height: 100%; 
           cursor: default; 
           line-height: 50px;
           float: left;
           position: unset;
           width: 49.99%;
           padding: 0px;
           margin: 0px;
           border-radius: 0px;
           -webkit-border-radius: 0px;
           background: unset;
         }

.mboxall { height: 100%; 
           cursor: default; 
           line-height: 50px; 
           float: left;
           position: unset;
           width: 20%;
           padding: 0px;
           margin: 0px;
           border-radius: 0px;
           -webkit-border-radius: 0px;
           background-color: var(--allview_block_background);
         }

.comm { position:relative;
        float:left;
        width:19.99%;
        text-align: center;
        font-size: 2.5vh;
        line-height:2em;
      }         
               
.comm_div { position:relative;
              float:left;
              width:0.01%;
              height:100%;
              background-color: var(--comm_div_color);
            }

.tabview { color: var(--tabview_textcolor); }

.tabview_i { position:relative;
             float:left;
             width:45%;
             font-size: 7vh;
             line-height: 2.1em;
           }

.tabview_m { position:relative;
             float:left;
             width:10%;
             font-size: 7vh;
             line-height: 2.1em;
           }

.allview { position:relative;
           float:left;
           width:100%;
           height:95%;
         }

.allview_i { position:relative;
             float:left;
             width:100%;
             line-height: 7.9vh;
             font-size: 5.5vh;
             color: var(--allview_textcolor);
           }

.allview_n { color: var(--allview_num_textcolor); }

.progress { --progress: 0%;
            width: 90%;
			height: 3%;
			border: 0px solid #fff;    
			float: left;
			left: 5%;
			position: relative;
            top: 1%;
		  }

.progress .bar { width: var(--progress);
		         height: 100%;
				 background: var(--progress_bar);
				 background-repeat: repeat;						    
				 transition: width 5s ease 0s;
			   }

#userleft { position:relative;
            float:left;
            width:20%;
            height:100%;
            background-color: var(--allview_block_background);
            overflow-y:scroll;
          }

#usercenter { position:relative;
              float:left;
              width:60%;
              height:100%;
              background-color: var(--vtab_block_background);
            }

#userright { position:relative;
             float:left;
             width:20%;
             height:100%;
             background-color: var(--allview_block_background);
             overflow-y: scroll;
           }

.mbox_usertop:hover { background: #eff1f4; }

.usertopline { width:90%;
               height:16%;
               left:5%;
               padding: 0px;
               position: relative;
               background-color: #eff1f4;
               border-radius: 20px 20px 20px 20px; 
               -webkit-border-radius: 20px 20px 20px 20px;
               float:left;
               margin-top: 1%;
             }

.mbox_usertop { width:96%;
                height:80%;
                left:1%;
                padding: 0px;
                overflow-y:scroll;
                overflow-x:hidden;
                cursor: default;
                text-align: left;
                font-size: 3vmin;
                line-height: 3vmin;
                border-radius: 0px 0px 0px 0px; 
                -webkit-border-radius: 0px 0px 0px 0px;
                float: left;
                margin: 0px;
                top:10%;
                white-space: nowrap;
              }

.mbox_getticket { width:62%;
                  height:80%;                           
                  padding: 0px;                                                      
                  text-align: center;                           
                  font-size: 50%;                           
                  float:left;
                  left: 5%;
                  margin: 0px;
                  top:10%;                           
                  border: #8aaec8 2px solid;
                }

.mbox_setworkplace { width:30%;
                     height:90%;
                     padding: 0px;
                     text-align: center;
                     font-size: 3vh;
                     float:left;
                     margin: 0px;                                
                   }

.mbox_operators { width:72%;
                  height:80%;
                  padding: 0px;
                  text-align: center;
                  font-size: 30px;
                  float:left;
                  left: 3%;
                  margin: 0px;
                  top:10%;
                }

.mbox_deloperator { width:20%;
                    height:80%;                           
                    padding: 0px;                                                      
                    text-align: center;                           
                    font-size: 120%;                              
                    float:left;
                    left: 5%;
                    margin: 0px;
                    top:10%;                           
                    border: #8aaec8 2px solid;
                  }

.operators_list { width:100%;
                  height:89%;
                  padding: 0px;
                  overflow-y:scroll;
                  overflow-x:hidden;
                  cursor: default;
                  text-align: left;
                  font-size: 2vmin;
                  line-height: 3vh;
                  float: left;
                  margin: 0px;
                  top:1%;
                  white-space: nowrap;
                  position: relative;
                  float: left;
                }

.chkbox { width: 3vmin;
          height: 20px;
        }
        
 .userview_i { position:relative;
                    float:left;
                    width:100%;
                    line-height: 5vh;
                    color: #09254c;
                    font-size: 3vmin;
                    text-align: center;
                    cursor:default;
                  }

.userview_i:hover { background: #8aaec8; }


#extact { position:relative;
          float:left;
          width: 20%;
          text-align:left;
          height: 100%;
        }

.mbox_actions { position: relative;
                float:left;
                width: 24%;
                height:90%;
                margin: 0px;
                padding: 0px;
                left: 0px;
                font-size: 2.6vmin;
                border: #8aaec8 2px solid;
                border-radius: 20px 20px 20px 20px; 
                -webkit-border-radius: 20px 20px 20px 20px;
                cursor: pointer;
              }

.mbox_actions:hover { background: var(--view_comm_block_background);
                      color: var(--top_block_textcolor);
                    }

.t_l1 { height: 35%;
        padding: 5%;
        padding-top: 2%;
        padding-bottom: 1%;
        line-height: 130px;
        width: 30%; 
        font-size: 42px;        
        left: 8%;
        margin-left: 2%;
      }

.t_delimiter { position:relative; float:left; width:2%; }

#reflex { position:relative;
          width:90%;
          height:50%;
          float:left;
          left: 5%;
          top: 20%;
        }

#reflex_bed { position:relative;
               width:30%;
               height:100%;
               float:left;
               background: var(--bed-img);
               background-repeat: no-repeat;
               background-size: contain;
             }

#reflex_notbed { position:relative;
                 width:30%;
                 height:100%;
                 float:left;
                 background: var(--notbed-img);
                 background-repeat: no-repeat;
                 background-size: contain;
                 left: 5%;
               }

#reflex_good { position:relative;
               width:30%;
               height:100%;
               float:right;
               background: var(--good-img);
               background-repeat: no-repeat;
               background-size: contain;
             }


#phone { position:relative;
         width:90%;
         height:8%;
         float:left;
         left:5%;
         display:none;
       }

.inp_phone { position:relative;
             width:100%;
             height:100%;
             float:left;
             padding-bottom:5%;
           }

#inp_line { position:relative;
            width:60%;
            height:100%;
            float:left;
            left:16%;
          }

.kbd { position:relative;
       width:9%;
       height:100%;
       float:left;
       font-size:42px;
       text-align:center;
       line-height: 122px;
       border: 1px solid;
       border-radius: 20px 20px 20px 20px; 
       -webkit-border-radius: 20px 20px 20px 20px;
       margin-left: 0.5%;
       cursor: pointer;
       background-color: #fff;
     }

.kbd:hover { background: linear-gradient(#4c6cae, #09254c, #4c6cae);
             color:#fff;
           }

#spasibo { display:none; padding-top: 10%; }

#vtab { position:relative;
        float: left;
        width: 80%;
        height: 100%;
        background-color: var(--vtab_block_background);
      }

.v2 { width: 13.39%; }

#cyear { cursor: pointer;
         border: 0px;
         background-color: unset;    
         width: 20%;
         height: 100%;              
         float: left;    
         font-size: 2.2vmin;
         color: var(--top_block_textcolor);
         text-align: center;
       }

#cday { cursor: pointer;
        border: 0px;
        background-color: unset;    
        width: 20%;
        height: 100%;             
        float: right;    
        font-size: 2.2vmin;
        color: var(--top_block_textcolor);
        text-align: center;
      }

.stat_name { padding: 5px;                       
             background-color: gainsboro;
           }

.stat_p { padding: 5px;                       
          background-color: azure;
          text-align: center;
        }

.stat_pt { border-left: 1px #000 solid; }

.btn_text { position: absolute;
            margin: auto 0;
            top: 0;
            bottom: 0;
            line-height: unset;
            height: 25px;
            width: 100%;                
          }

.teamlogo { background-image: var(--team-img);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 50vmax;
            height: 40vh;
            margin: 0 auto;
          }
        
.flipswitch { position: relative;
              width: 100%;
              height: 4vmin;
              -webkit-appearance: initial;
              border-radius: 3px;
              -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
              outline: none;
              font-size: 1.4vmin;
              font-family: Trebuchet, Arial, sans-serif;  
              cursor: pointer;
              border: 0px;
            }

.flipswitch:after { position: absolute;
                    top: 5%;
                    display: block;
                    line-height: 3.5vmin;
                    width: 45%;
                    height: 90%;  
                    box-sizing: border-box;
                    text-align: center;
                    transition: all 0.3s ease-in 0s;
                    color: black;
                    border: #888 1px solid;
                    border-radius: 3px;
                  }

.flipswitch:after { left: 2%;
                    content: "ПО ОЧЕРЕДИ";
                    background: var(--top_block_background);
                    color: var(--top_block_textcolor);
                  }

.flipswitch:checked:after { left: 53%;
                            content: "ВНЕ ОЧЕРЕДИ";
                            background: var(--top_block_background);
                            color: var(--top_block_textcolor);
                          }

.warpper { display: flex;
           flex-direction: column;
           align-items: center;
           float: left;
           height: 100%;
           width: 100%;
         }

.tab { cursor: pointer;
       padding: 0.7vmin 4vmin;
       margin: 0px 2px;
       background: var(--top_block_background);
       display: inline-block;
       color: var(--top_block_textcolor);
       border-radius: 3px 3px 0px 0px;
       box-shadow: 0 0.5rem 0.8rem #00000080;
       margin-top: 2vmin;
       font-size: 1.5vmin;
     }

.panels { background: #fff;
          box-shadow: 0 2rem 2rem #00000080;  
          width: 100%;    
          overflow: hidden;  
          height: 100%;
          width: 100%;
          float: left;
        }

.panel { display: none;
         animation: fadein 0.8s;
         float: left;
         height: 100%;
         width: 100%;
         border-top: 1px solid var(--top_block_background);
       }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.panel-title { font-size: 1.5em;
               font-weight: bold;
             }

.radio { display: none; }

#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel { display: block; }

#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab { background: #fff;
                                    color: #000;
                                    border-top: 0.3vmin solid var(--top_block_background);
                                  }

.operators_table th { font-size: 1.5vmin; }

.operators_list_a { text-decoration: none; color: var(--top_block_background); }

.operators_list_a:hover { text-decoration: underline; color: var(--allview_block_background); }

.cview { display: none; }

label > input{ visibility: hidden; position: absolute; }
label > input:not(:checked) + img{ cursor:pointer; border:5px solid transparent; }
label > input:checked + img{ border:5px solid var(--allview_block_background); } 

.cview_img { --w: 200px;
             --h: 90%;
             width: calc(var(--w) / var(--h));
             height: var(--h);
           }

.statinp { width: 115px;
           cursor: pointer;
           font-size: 18px;
           height: 30px;
           border-radius: unset;
           border: 1px solid;
         }

.checkselect {  width: 360px; }

.statlist { width: 100%;
            height: 85%;
            overflow-y: scroll;
            overflow-x: hidden;
          }

.tstat { width: 100%;
         font-size: 12px;
         border-top: #c0c0c0 1px dotted;
         border-right: #c0c0c0 1px dotted;
       }

.tstat th, td { text-align: center;
                border-bottom: #c0c0c0 1px dotted; 
                border-left: #c0c0c0 1px dotted; 
              }

.tstatline { background-color: #f2f2f2; }

.adminticketstable { width: 90%; }

.adminticketstable th,
.admindaystattable th { color: #fff;
                        background-color: #09254c;
                        height: 30px;                                
                      }

.adminticketstable td { padding: 5px; }

.admindaystattable { width:94%;
                     margin: 0 auto;
                   }

.pbar-overlay { position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 60px;
                height: 60px;
                background-image: var(--pbar-img);
                background-size: contain;
                background-repeat: no-repeat;
                z-index: 9999;
                pointer-events: none;
                display: none;         
              }