html { height: 100%; }
body { margin: 0;
        webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        height: 100%;
}
#wrapper { width: 100%;
            position: relative;
            height: 100%;
}
#tform { height: 100%; }
#top { width: 100%;
        height: 50px;
        background-color: #1c2b36;
        box-shadow: 2px 0 3px rgba(0, 0, 0, .5);         
        padding: 0;
        font-size: 28px;
        color: #fff;
}

.btn, .add-btn, .passport-btn { 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: #1c2b36;
                                border: 0;
                                padding: 10px 16px;
                                font-size: 18px;
                                line-height: 1.3333333;
                                border-radius: 6px;
}

.add-btn { float: right; font-size: 24px; padding: 6px 16px; }
.passport-btn { float: right; font-size: 24px; padding: 6px 0px; }

.t-logo { padding: 0; }

.logo-text { font-size: 15px;
              max-width: 70%;
              overflow: hidden;
              text-overflow: ellipsis;
              cursor: auto;
              color: #fff;
              margin-top: 0px;
}

#mbox { width: 100%;
        font-size: 16px;
}

.m-card {
    background: #fff;
    color: rgba(0, 0, 0, .87);
    transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
    display: block;
    position: relative;
    padding: 16px;
    border-radius: 4px;
    margin: 6px 3px 3px;
    padding-top: 7px;
}

.m-card-header { 
    display: flex;
    flex-direction: row;
}

.m-card-avatar { height: 40px;
                   width: 40px;
                   border-radius: 50%;
                   flex-shrink: 0;
                   object-fit: cover;
                   font-size: 32px;
}

.m-card-header-text {  margin: 6px 16px;                                
                        font-weight: 500;
                        font-size: 20px;                               
}

.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;
    opacity: .6;
    min-width: 100px;
    width: 100px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    position: relative;
    color: rgba(0, 0, 0, .87);
}
.m-tab-label:hover { background-color: #c0c0c0;
                     color: #fff;
                   }

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

.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%;
} 

.m-form-field { font-size: inherit;
                font-weight: 400;
                line-height: 1.125;
                font-family: Roboto, "Helvetica Neue", sans-serif;
                display: inline-block;
                position: relative;
                text-align: left;
                width: 100%;
                margin-bottom: 10px;
                border-bottom: 1px solid #404040;
}

.m-input-element { font: inherit;
                    background: 0 0;
                    color: currentColor;
                    border: none;
                    outline: 0;
                    padding: 0;
                    margin: 0;
                    width: 100%;
                    max-width: 100%;
                    vertical-align: bottom;
                    text-align: inherit;                           
}

.m-form-label { width: 100%;
                 font-size: 10px;
                 color: #808080;
                 margin-bottom: 5px;
}

.m-form-input { width: 100%;                     
                 margin-bottom: 5px;                      
}

.checkbox-ios {
    display: inline-block;    
    height: 26px;    
    line-height: 26px;  
    margin-right: 10px;      
    position: relative;
    vertical-align: middle;
    font-size: 14px;
    user-select: none;	
}

.checkbox-ios .checkbox-ios-switch {
    position: relative;	
    display: inline-block;
    box-sizing: border-box;			
    width: 76px;	
    height: 26px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 14%/50%;	
    vertical-align: top;
    background: #eee;
    transition: .2s;
}

.checkbox-ios .checkbox-ios-switch:before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;	
    display: inline-block;
    width: 22px;	
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    transition: .15s;
}

.checkbox-ios input[type=checkbox] {
    display: block;	
    width: 0;
    height: 0;	
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox-ios input[type=checkbox]:not(:disabled):active + .checkbox-ios-switch:before {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
}
.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch {
    background: limegreen;
}
.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch:before {
    transform:translateX(50px);
}

/* Hover */
.checkbox-ios input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch {
    cursor: pointer;
    border-color: rgba(0, 0, 0, .3);
}

/* Disabled */
.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch {
    filter: grayscale(70%);
    border-color: rgba(0, 0, 0, .1);
}
.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch:before {
    background: #eee;
}

/* Focus */
.checkbox-ios.focused .checkbox-ios-switch:before {
    box-shadow: inset 0px 0px 4px #ff5623;
}

.editbutton, .replace_cartridge, .authbutton, .page_counter, .showdischarge, .del_action {
    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;
    display: none;
}

.authbutton { width: 200px;
                height: 50px;
                display: block;
                font-size: 1.3em;
                float: none;
                margin-top: 70px;
}

.showdischarge { width: 240px;
                 height: 30px;
                 display: block;
                 font-size: 1em;
                 margin-top: 10px;
}

.del_action { width: 102px; }

.select2-container--default .select2-selection--single { border: 0px !important; }

#infoh { display: none; }

.t-otp {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.t-otp input {
    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-appearance: none;
    margin: 0;
}
@media (min-width: 360px) {
    .t-otp { gap: 10px; }
}

.inp-search {  width: calc(100% - 24px);
                height: 40px;
                line-height: 40px;
                font-size: 24px;
                padding: 10px;
}

.search-label { font-size: 14px; }
.search-form-field { border: 0px; }
.search_b { position: absolute;
             right: 12px;
             top: 32px;
             float: right;
             z-index: 3;
             font-size: 40px;
             cursor: pointer;
}
.select-search { border: 1px solid #000 !important;
                }
.sresults { width: 100%;
            overflow: hidden;
            white-space: nowrap;
            table-layout: fixed;
}
.sresults td { border-bottom: 1px solid #000;
                padding: 5px;
                cursor: pointer;
}
.result-info { }
.result-ext { display: none;
               background-color: #cfedfb;
               font-size: 14px;                 
               padding: 10px; }

#inv-d, #sn-d, #pass-d { display: none; }

#change_table { width:100%;
                 border: 0px; 
}

#change_table th { padding: 5px;
                    border-bottom: 1px solid #c0c0c0;
                    text-align: center;
}
#change_table td { padding: 5px;
                    border-bottom: 1px solid #c0c0c0;
                    text-align: center;
}

.cBtn, .cBtn-bcc { width:70px;
                   height:120px; 
                   background-position: center;
                   background-repeat: no-repeat; 
                   cursor: pointer;
}

.cBtn-bcc { width: 450px; background-image:url(img/cc.png?1) }

.godev { width: 100%;
         height: 40px;
         cursor: pointer;
}

.result-info-line { 
}

.get-qr-pdf {  width: 170px;
                height: 170px;
                font-size: 30px;
                padding-top: 5px;
                float: left;
}

.pline { float: left;
        margin-left: 10px;
        width: calc(100% - 180px);
        text-align: center;
}

.add-passport-pdf { width: 88%;
                     font-size: 24px;
                     margin-left: 10px;
                     height: 34px;
                     margin-top: 10px;
}

.add-certificat-pdf { width: 88%;                            
                      font-size: 24px;
                      margin-left: 10px;
                      height: 34px;
                      margin-top: 10px;
}

.inputbox {
    position:relative;                    
    border: solid;
    color: #000;
    border-width: 1px;
    font-size:16px; 
    line-height:16px; 
    height:30px; 
    width:70%;
    padding:0px 10px 0px 10px;
    border-radius: 5px 5px 5px 5px;
}
.inputbox-wide { width: calc(100% - 2px);
                 padding: 0;
                 border-radius: 0; }

#swal-wrapper { width: 100%; float: left; }
.swal-inp-name { float: left;
                width: 25%;
                text-align: right;                         
                line-height: 30px; }
.swal-inp-input { float: right; width: 65%; }
.select2-dropdown { z-index: 2051; }
#errhint { color: #FF0000;
          font-size: 14px;
          width: 100%;
          margin-top: 20px;
}

.authlgo { width: 200px;
           height: 300px;
           background-image: url(img/26logo-auth.png);
           background-size: contain;
           background-repeat: no-repeat;
           position: relative;
           margin: 0 auto;
}

.ramka { width: 480px;
        height: 600px;
        position: absolute;
        border: #000 1px solid;
        margin-left: 50%;
        left: -240px;
        border-radius: 30px;
}

.small-passport { width: 50px;
                   font-size: 24px;
                   margin-left: 10px;
                   height: 34px;
                   margin-top: 10px;
}

.slidemenu { width: 100%;
            position: absolute;
            z-index: 1;
            background-color: #1c2b36;
            height: 100%;
            opacity: 0.9;
            color: #fff;
            display: none;
}

.slidemenuitem { width: 100%;
                 height: 40px;
                 position: relative;
                 float: left;
                 color: #fff;
                 font-size: 24px;
                 margin-top: 20px;
                 margin-bottom: 20px;
                 text-indent: 10px;
                 line-height: 40px;
                 cursor: pointer;
}

.slidemenuitem:hover { background-color: #10181e; }

.litem { width: 100%;
        height: 30px;
        position: relative;
}

.dischargetabel { width: 100%;                         
                  text-align: center;
}

.dischargetabel th { height: 40px;
                    border-bottom: 1px #000 solid;
}

.dischargetabel td { 
    border-left: 1px #000 solid;
    border-bottom: 1px #000 solid;
}

.dischargetabel_roomheader {
    height: 40px;
    border-left: unset !important;
    font-weight: 600;
    background-color: #e5e6ff;
}

.dischargelink { color: #3f51b5;
                text-decoration: none;
}
.dischargelink:hover { 
    color: #1c2b36;
    text-decoration: underline;
}
.dischargelink:visited { color: #3f51b5; }

/* New classes for inline styles */
.excel-download-link { display:block; }
.tform-no-mob { margin-top:200px; }
.btn-menu-icon { font-size: 22px; }
.logo-img { width:34px;height:34px; }
.icon-margin-right { margin-right: 20px; }
.swal-inp-name-wide { width: calc(100% - 5px); }
.swal-inp-input-wide { cursor: auto; padding-left: 5px; width: calc(100% - 7px); }
.adddev-form { float: left; width: 100%; }
.swal-inp-input-cursor { cursor: auto; }
.swal-inp-input-indent { cursor: auto; text-indent: 10px; }
.swal-errhint-hidden { display: none; }
.addmodelfrm-form { float: left; width: 100%; }
.addtypefrm-form { float: left; width: 100%; }

/* Additional classes from inline styles */
.text-green { color: #008000; }
.w-calc-minus-5 { width: calc(100% - 5px); }
.float-left-w-100 { float: left; width: 100%; }
.cursor-auto-indent-10 { cursor: auto; text-indent: 10px; }
.display-block-w-100-center { display: block; width: 100%; text-align: center; }
.btn-large-custom { width: 100%; height: 200px; font-size: 30px; margin-top: 20px; }
.mt-200 { margin-top: 200px; }
.fs-22 { font-size: 22px; }
.logo-small { width: 34px; height: 34px; }
.mr-20 { margin-right: 20px; }
.d-block { display: block; }
.border-none-w-300 { border: 0px; width: 300px; }
.w-100 { width: 100px; }
.w-200 { width: 200px; }
.border-solid-none { border: solid 0px; }
.border-r-solid-1 { border-right: solid 1px; }
.bg-yellow-h-50-rel-fl { width: 100%; height: 50px; background-color: yellow; position: relative; float: left; }
.text-black { color: #000000; }
.w-100-m-auto-rel-l50-fl-mt50 { width: 100%; margin: 0 auto; position: relative; left: 50%; float: left; margin-top: 50px; }
.bg-unset-p0-m-auto-center { background-color: unset; padding: 0px; margin: auto; text-align: center; }
.bg-unset-p0-m-auto-l-w100 { background-color: unset; padding: 0px; margin: auto; text-align: left; width: 100%; }