:root { 
           --wm: 250px;
           --toplineHeight: 80px;
           --bhead_height: 50px;
         } 
  html { overflow-x: hidden; height: 100% !important; }
  body { font-family: Tahoma, Verdana, Arial, sans-serif;            
            color: #000000;
            background-color: #343756;
            margin-left:   0px;
            margin-top:    0px;
            margin-right:  0px;
            margin-bottom: 0px;
            overflow-x: hidden;
            height: 100% !important;
            padding: 0px !important;
           }
  #infoh { display: none; }
  .wrapper { width: 100%;
                 height: 100%;
                position: relative;
               }
  .headline { width: 100%;
                  height: var(--toplineHeight);
                  position: relative;
                }
  .headlogobox { width: var(--wm);
                        height: 100%;
                        float: left;
                        position: relative;
                        background-color: #3c3e64;
                        background-image: url(/img/dash26kadr1.png);
                        background-size: contain;
                        background-repeat: no-repeat;                       
                        cursor: pointer;             
                        background-position-y: 23px;
                        background-size: 90%;
                        background-position-x: 12px;
                      }
  .headwidebox { width: calc(100% - var(--wm) - 3px);
                         height: 100%;
                         float: right;
                         position: relative;                        
                         background-color: #3c3e64;
                         color: #fff;
                         font-size: 24px;
                         line-height: var(--toplineHeight);
                         text-indent: 30px;
                       }
  .bodyline { width: 100%;
                  height: calc(100% - var(--toplineHeight));
                  position: relative;
                }
  .bodymenubox { width: var(--wm);
                          height: calc(100% - 3px);
                          margin-top: 3px;
                          float: left;
                          position: relative;                        
                          background-color: #3c3e64;
                        }
   .bodywidebox { width: calc(100% - var(--wm) - 3px);
                          height: 100%;
                          float: right;
                          position: relative;                          
                        }
  .graphwrapper, .legendwrapper { width: 90%;                         
                         position: relative;
                         margin-left: 5%;
                         margin-top: 50px;
                         float: left;                         
                       }
  .legendwrapper { 
                           margin-top: 10px; 
                        }
  .graphlegend { width: 100%;
                       height: 100px;
                       position: relative;
                       float: left;
                       background-color: #3c3e64;
                       border-radius: 5px;
                       color: #fff;
                       font-size: 24px;
                       line-height: 100px;
                       text-indent: 30px;
                       overflow: hidden;
                     }
  .graphbody { width: 100%;
                     height: 397px;
                     margin-top: 3px;
                     float: left;
                     background-color: #3c3e64;
                     border-radius: 5px;                     
                   }
  .graphbox { width: calc(100% - 40px - 400px);
                   height: calc(100% - 40px);
                   margin-top: 20px;
                   position: relative;
                   float: left;
                 }
  .graphtotalbox { width: 400px;
                          height: calc(100% - 40px);
                          margin-top: 20px;
                          margin-left: 20px;
                          position: relative;
                          float: left;
                        }

  .legendblock { width: 18.4%;
                       height: 80px;                       
                       float: left;                       
                       position: relative;
                       background-color: #3c3e64;
                       border-radius: 5px;
                       overflow: hidden;
                     }
  .legendblockdiv { width: 2%;
                           height: 80px;                       
                           float: left;                       
                           position: relative;
                         }
  .legendblockdivline { width: 100%;
                                height: 10px;
                                float: left;                       
                               position: relative;
                              }

  .legendblocksp { width: 40%;
                           height: 100%;
                           position: absolute;
                           font-size: 0.9vw;
                           text-align: center;
                           color:  #fff;
                           line-height: 80px;
                         }

  .legendblockgraph { width: 40%;
                               height: 100%;
                               float: left;
                               position: relative;
                             }

  .legendblocklegend { width: 60%;
                                 height: 100%;
                                 float: left;
                                 position: relative;
                                 font-size: 14px;
                                 line-height: 20px;
                                 text-align: center;
                                 color: #a4adcc;
                               }
  .dlegend { width: 90%;
                 height: 40px;
                 margin: 0 auto;
                 margin-top: 20px; }

  .canvasjs-chart-credit { display: none !important; }

  .authbox { width: 15%;
                 height: 100%;
                 min-width: 200px;
                 float: right;
                 border-left: 3px solid #343756;
                 position: relative;
                 text-align: center;    
                 text-indent: 0px;
                 font-size: 18px;
                 color: #a4adcc;
                 cursor: pointer;                 
               }

  .eventbox { width: 10%;
                  height: 100%;
                  min-width: 100px;
                  float: right;
                  border-left: 3px solid #343756;
                  position: relative;
                  text-align: center;    
                  text-indent: 0px;
                  font-size: 24px;
                  color: #a4adcc;
                  cursor: pointer;
                }
  .eventlist { width: 15%;
                 min-width: 250px;
                 height: 300px;
                 position: absolute;
                 border-top: 3px solid #343756;
                 background-color: #3c3e64;
                 z-index: 1;
                 cursor: auto;
                 line-height: 30px;
                 font-size: 14px;
                 text-align: left;    
                 padding-left: 20px;                
                 overflow: overlay;
                 display: none;
                }
  .authboxmenu { width: 100%;                          
                          min-width: 200px;
                          position: absolute;
                          border-top: 3px solid #343756;
                          background-color: #3c3e64;
                          z-index: 1;
                          line-height: 40px;
                          font-size: 18px;
                          text-align: center;
                          left: 0;
                          right: 0;
                          display: none;
                          padding-bottom: 10px;
                        }

  .eventlist ul { padding: inherit; }
  .eventlist li { color: #fcb737; }
  .eventlist li span { color: #a4adcc; }
  .eventold { color: #a4adcc !important; }

  .eventnew { width: 100%;
                   height: 100%;
                   position: absolute;
                   float: left;
                   z-index: 1;
                  font-size: 8px;
                  color: #fcb737;
                  display: none;
                 }
  .lmenuitem { width: 100%;
                     padding-top: 20px;
                     height: 50px;
                     text-align: center;
                     font-size: 28px;
                     color: #fff;
                     line-height: 45px;
                     cursor: pointer;
                   }
  .lmenuitem_inner { width: 90%;
                              height: 90%;
                              margin-left: 5%;
                              margin-top: 5%;
                              position: relative;
                            }
  .lmenuitem_inner:hover { background-color: #343756; }
  .headtextbox { height: 100%;
                 position: relative;
                 float: left;
                 width: 65%;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
               }

  .t-otp { display: flex;
            justify-content: center;
            gap: 6px;
            input, select { width: 44px;
                      height: 64px;
                      font-size: 32px;
                      text-align: center;
                      padding: 3px;
                      border: 2px solid #ddd;
                      transition: 0.3s ease;
                      border-radius: 3px;
                      -moz-appearance: textfield;
                     &::-webkit-outer-spin-button,
                     &::-webkit-inner-spin-button {
                         -webkit-appearance: none;
                         margin: 0; }
                   }
            @media (min-width: 360px) { gap: 10px; }
          }

  .authboxwnd { width: 400px;                  
                       height: 480px;                  
                       position: relative;                  
                       left: calc(50% - 200px);
                       top: calc(50% - 220px);
                       border-radius: 10px;
                       border: 1px solid #a4adcc;
                       background-color: #3c3e64;
                      }

  .authboxlogo { width: 100%;
                       height: 100px;
                       position: relative;
                       float: left;
                       background-image: url(/img/dash26kadr1.png);
                       background-size: contain;
                       background-repeat: no-repeat;
                       background-position: center;
                       background-size: 80%;
                       background-position-y: 40px;
                      }

  .authboxtext { width: 100%;
                       height: 100px;
                       position: relative;
                       float: left;
                       font-weight: 500;
                       font-size: 20px;
                       color: #a4adcc;
                       text-align: center;
                       margin-top: 50px;
                     }

  .otpwrap { width: 100%;
                 height: 80px;
                 position: relative;
                 float: left;
                 padding-top: 30px;                 
               }

  .authcsp, .authrestore { width: 100%;
                  height: 20px;
                  position: relative;
                  float: left;
                  text-align: center;
                  font-size: 20px;
                  margin-top: 25px;
                  cursor: pointer;
                  color: #a4adcc;                  
                }

  .authboxmenuitem { width: 90%;
                                height: 30px;
                                position: relative;
                                left: 5%;
                                top: 5px;
                                line-height: 30px;
                                padding-top: 10px;
                                padding-bottom: 10px;
                              }
  .authboxmenuitem:hover { background-color: #343756; }
  .graphtotalboxtext { width: 400px;
                               height: calc(100% - 240px);
                               margin-top: 20px;
                               margin-left: 20px;
                               position: absolute;
                               top: 240px;
                               bottom: 0;
                               z-index: 1;
                               text-align: center;
                               text-indent: 0px;
                               font-size: 24px;
                               color: #a4adcc;
                             }
  .refreshlabel { font-size: 12px; 
                       margin-top: 10px; 
                     }

  .grblk { width: calc(10% - 2px);
             height: 30px;
             position: relative;
             float: left;
             background-color: #3c3e64;
             border: #343756 1px solid;
             border-radius: 5px;
             text-align: center;
             color: #a4adcc;
             line-height: 30px;
             font-size: 12px;
             cursor: pointer;
           }
  .workselect { width: 200px;
                     text-indent: 0px;
                     margin-top: 30px;
                    }
  .workactive { background-color: #a4adcc;
                     color: #343756;
                     cursor: default;
                    }
  .grconteiner { width: 100%;                      
                      height: 150px;
                    }
  .grviewconteiner { width: 100%;
                             display: none;
                             height: 150px;
                             overflow: overlay;
                             background-color: #3c3e64;
                             font-size: 14px;
                             color: #a4adcc;
                             border-radius: 5px;
                           }
  .grviewconteinerback { width: 100px;
                                   height: 30px;
                                   position: absolute;
                                   top: 10px;
                                   left: 10px;
                                   font-size: 24px;
                                   cursor: pointer;
                                   z-index: 1;
                                 }
  .grouplist { width: 75%;
                  margin: 0 auto;
                  position: relative;                  
                } 
  .grouplistcolumn { width: calc(50% - 1px);
                             float: left;
                            position: relative;
                           }

.grviewconteiner::-webkit-scrollbar {
  width: 10px;
  background-color: #3c3e64;
}

.grviewconteiner::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #18aaaa;
}

.grviewconteiner::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
  border-radius: 10px;
  background-color: #3c3e64;
}

  .certslist, .resultline { width: 600px;
                  min-height: 250px;                  
                  overflow: overlay;
                  position: relative;
                  margin: 0 auto;
                  border: 1px solid;
                  font-size: 14px;
                  text-align: left;
                  max-height: 250px;
              }

  .resultline { height: 100px; }

  .certslistheader { width: 600px;
                           height: 30px;
                           margin: 0 auto;
                           margin-top: 10px;
                           font-size: 16px;
                           line-height: 30px;
                           font-weight: 600;
                         }

  .certslistitem_dash,
  .certslistitem_csp { width: 90%;                        
                       font-size: 14px;
                       padding: 10px;
                       margin: 0 auto;
                       cursor: pointer;
                     }

  .certslistitem_dash:hover { background-color: #3c3e64; }
  .certslistitem_csp:hover { background-color: #3c3e64; }


  .itempkey { display: none; }

  .certslisttext { width: 100%;
                       height: 30px;
                       text-indent: 20px;
                       margin-top: 10px;
                       line-height: 30px;
                     }

  .cspbtn { display: inline-block;
                margin-bottom: 0;
                font-weight: 400;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                touch-action: manipulation;
                cursor: pointer;
                margin-top: 5px;
                margin-left: 5px;
                color: #fff;
                background-color: #7066e0;
                border: 0;
                padding: 10px 16px;
                font-size: 18px;
                line-height: 1.3333333;
                border-radius: 6px;
               }

  .cspinput { 
                  height: 30px !important;
                  text-align: left !important;
                  font-size: 18px !important;
                  color: #000 !important;
                 }

  .cspinp { width: 80% !important;
                background-color: #c5c5d1 !important;
                cursor: no-drop !important;
              }

  .cspinprw { width: 17.6% !important;                                   
              }

  #calendar { height: calc(100% - 70px) !important; }

  #calworkers { width: 110px;
                height: 100%;
                font-size: 20px;
                text-align: center;
                cursor: pointer;
                background-color: #3c3e64;
                border: 0;
                color: #a4adcc;
              }

    #cyear { cursor: pointer;
                 border: 0px;
                 background-color:  #3c3e64;
                 font-weight: 800;
                 color: #c0c0ff;
                 text-align: center;
              }

    #mbox { position:relative;
                 margin:0 auto;                 
				 width:95%; 
                 border-radius: 20px 20px 20px 20px; 
                 -webkit-border-radius: 20px 20px 20px 20px; 
                 min-width:740px;
                 padding:20px;
                 background-color: #3c3e64;
                 height: 100% !important;
               }

     .inputbox_cal {
                    position:relative;                    
                    border: solid;
                    color: #000;
                    border-width: 1px;
                    font-size:16px; 
                    line-height:16px; 
                    height:30px; 
                    width:75%;
                    padding:0px 10px 0px 10px;
                    border-radius: 5px 5px 5px 5px;
                  }

     .inputbox_addworker {
                          position:relative;                    
                          border: solid;
                          color: #000;
                          border-width: 1px;
                          font-size:16px; 
                          line-height:16px; 
                          height:30px; 
                          width:80%;
                          padding:0px 10px 0px 10px;
                          border-radius: 5px 5px 5px 5px;
                         }

     .swal-inp { margin-bottom: 5px; cursor: pointer; }
     .swal-inp-name { float: left; width: 40%; text-align: right; }
     .swal-inp-input { float: left; width: 60%; }
     .swal-wrapper { width: 100%; float: left; }
     .swal-inp-hide { display: none; }
     .swal_warn { color: #efed59; margin-bottom: 5px; text-align:center; font-size: 14px; }
                  

     .mitem {
                 position:relative;                                 
                 width:100%;
                 float: left;
                 line-height:40px;
                }

#cal { width:100%; height: 100%; }

#cal th { background-color:#a4adcc; color:#fff; border-right: 1px solid; height: 20px; line-height: 20px; width: 14.2%; }

.mday, .mmday {  vertical-align: top; background-color: #343756; border-right: 1px solid; border-top: 1px solid; border-color: #fff; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; min-width: 100px; color: #a4adcc; }
.noday, .mnoday { background-color: #343756; border-right: 1px solid; border-top: 1px solid; border-color: #fff; color: #a4adcc; }

.hday { width:100%; height:30px; line-height: 30px; padding-right: 5px; padding-top: 5px; text-align:right; }

.calitem { width:25%; height:30px; line-height: 30px; float: left; margin: 5px; border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; background-color: #c00000; color: #FFF; margin-top: 2px; font-size: 12px; text-align: center; cursor: pointer; min-width: 90px; }

.cal_l { float:left; width: 48%; z-index: 100000; }
.cal_r { float:right; width: 48%; z-index: 100000; }

#cal_mon {  margin-bottom: 5px;  }
#cal_mon td { text-align: center; width: 110px; float: left; border-radius: 20px 20px 20px 20px;  -webkit-border-radius: 20px 20px 20px 20px; }

.msel { background-color: #a4adcc; cursor: default; }
.mnotsel { background-color: unset; cursor: pointer; color: #a4adcc; }
.mnotsel:hover { background-color: #e5e6ff; color: #000; }

.checkselect-control select { padding-left: 10px; font-size: 16px; border-radius: 5px; border: 1px solid; }
.checkselect label { padding: 4px 6px 4px 35px; }
.checkselect-popup input { top: 12px; width: 20px; height: 20px; }
.checkselect-popup { max-height: 180px; }

.hlink { text-decoration: none; color: #6db1e5; }
.hlink:hover { color: #0000FF; }

.left-m, .left-m-sel { width: 100%;
            height: 30px;
            text-align: center;
            font-size: 16px;
            border-bottom: 1px solid #c0c0c0;
            padding-top: 10px;
            line-height: 12px;
            background-color: unset; 
            cursor: pointer; 
            overflow-y: hidden;
            color: #a4adcc;
          }

.left-m:hover { background-color: #e5e6ff; color: #000; }

.left-m-sel { background-color: #a4adcc; cursor: default;  color: #000; }

.check-warn { color: #FF0000;
                     font-size: 14px;                     
					}

.events_mcount { width: 40px;
						 height: 40px;
						 float: right;						 
                        }

.events_mc { width: 30px;
				   height: 30px;
				   position: relative;
				   border-radius: 100%;
				   margin: 0 auto;
				   top: 5px;
                   background-color: #a4adcc;
				   color: #fff;
                   line-height: 30px;
                  }

.events_mc_w { background-color: #fff; color: #000; }

    #sendfrm { height: calc(100% - var(--bhead_height) * 2 + 20px); margin-top: 20px; }

.mitem::-webkit-scrollbar {
  width: 10px;
  background-color: #3c3e64;
}

.mitem::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 0px;
  background-color: #18aaaa;
}

.mitem::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
  border-radius: 10px;
  border: 0px;
  background-color: #3c3e64;
}


.tab-nav { display: flex;
               position: relative;
               border-bottom: 1px solid #c0c0c0;
             }

.tab-link { font-size: 16px;
               text-decoration: none;
               color: unset;
            }

.m-tab-label {
    height: 48px;
    padding: 0 24px;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 150px;
    width: 150px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    position: relative;
    color: #a4adcc;
    text-indent: 0px;
}
.m-tab-label:hover { background-color: #3c3e64;
                             color: #fff;
                           }

.m-ink-bar { position: absolute;
                  bottom: 0;
                  height: 3px;
                  transition: .5s cubic-bezier(.35,0,.25,1);
                  background-color: #01ffbe;
                }

.tab-content { display: none; right: 0; }

.m-tab-body-wrapper { position: relative;
                                 overflow: hidden;
                                 display: flex;
                                 transition: height .5s cubic-bezier(.35,0,.25,1);
                               }

.m-tab-body-divider  { margin: 14px 0 0px;
                                width: 100%;
                              } 

.workersresult { width:100%; color: #a4adcc; }

.workersresult .numtd { width:50px; text-align:center; border-bottom: 1px dotted #a4adcc; border-right: 1px dotted #a4adcc; }
.workersresult .ldotted { border-bottom: 1px dotted #a4adcc; border-right: 1px dotted #a4adcc; }
.workersresult .timetd { width:50px; text-align:center; }
.workersresult .locationtd { width:50px; text-align:center; }
.workersresult .nopptd { width: 60px; }
.workersresult .parenttd { width: 50px; text-align:center; cursor: pointer; }
.workersresult .specialmark { width: 50px; text-align:center; }
.workersresult .faceid { color: #01ffbe; }
.workersresult .card { color: #efed59; }
.workersresult .biomark { width: 50px; text-align:center; }
.workersresult .commentstd { width:250px; text-align:center; border-right: 0px; max-width: 250px; }

.workersresult th { height: 30px; border-bottom: 1px dotted #a4adcc; border-right: 1px dotted #a4adcc; }

.workersresult .editable { -webkit-user-modify: read-write;
                           -moz-user-modify: read-write;
                           cursor: copy;
                          /* white-space: nowrap; */                          
                         }

.showdischarge {
    margin-left: 0;
    margin-right: 0;
    margin: 0 8px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background-color: #3f51b5;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: 0;
    border: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: baseline;
    text-align: center;
    min-width: 64px;
    line-height: 26px;
    padding: 0 16px;
    border-radius: 4px;
    overflow: visible;
    transform: translate3d(0, 0, 0);
    transition: background .4s cubic-bezier(.25,.8,.25,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);    
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    float: right;
}

.select2 { 
          margin-top: 10px;
          text-align: left;
         }

.inputbox_search {
                  position:relative;                    
                  border: solid;
                  color: #000;
                  border-width: 1px;
                  font-size:16px;
                  line-height:16px;
                  height:28px; 
                  width:100%;
                  padding:0px 10px 0px 10px;
                  border-radius: 5px 5px 5px 5px;
                  box-sizing:border-box;
                  border-color: #aaaaaa;
                  top: -2px;
                }

.cBtn { width: 110px;
        height: 70px;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        font-size: 0.9em;
      }
.cBtn:hover { background-color: #a4adcc;;
              color: #000;
            }

#calreports { display: flex;
              justify-content: center;
            }

.types_line { font-weight: 600;
              color: #01ffbe;
              margin-left: 50px;
              height: 40px;
              display: flex;
              line-height: 40px;
            }

.nava { color: #01ffbe;
        font-weight: 200;
        text-decoration: none;
        margin-right: 10px;
      }
.nava:hover { text-decoration: underline; }      
.nava:visited { color: #01ffbe; }

.sizerbutton { width: 40px;
               height: 40px;
               background-color: #3c3e64;
               position: absolute;
               top: 0;
               right: -42px;
               color: #a4adcc;
               font-size: 18px;
               text-align: center;
               line-height: 40px;
               border-radius: 0px 10px 10px 0px;
               cursor: pointer;
               z-index: 2;
             }        
/*
.hintbutton { background-color: #a4adcc;
              color: #000;
              padding: 5px;
              border-radius: 100%;
              width: 24px;
              height: 24px;
              display: inline-table;
              text-align: center;
              cursor: pointer;
              margin-left:5px;
              margin-right:5px;
              font-size: 20px;
            }
*/
.hintbutton {
             background-color: #a4adcc;
             color: #000;
             padding: 5px;
             width: 300px;
             height: 24px;
             display: flex;
             flex-direction: column;
             text-align: center;
             cursor: pointer;
             margin-bottom: 1px;
            }

.hintbutton:hover { background-color: #3c3e64;
                    color:#18aaaa;
                  }

.warn:hover { background-color: red !important;
              color: #fff !important;
            }

.workeraddbutton { font-size: 22px;     
                   width: 80px;
                   display: inline-flex;
                   cursor: pointer;
                   color: #a4adcc;                   
                 }

.workeraddbutton:hover { color: #fff;
                       }

.editworkersicon { margin-right:10px;
                   float:right;
                   cursor:pointer;
                 }

.editworkersicon:hover { color:#fff;
                       }