/*
:root {
    --main-color:#3e9795;
    --header-color:#3e9795;
    --footer-color:#3e9795;
    --main-header-color:#4DB6AC;
    --main-button-color:#009688;
    --main-button-color-hover:#004D40;
    --main-button-color-disable:#B2DFDB;
    --border-color:#dee2e6;
    --main-button-color-drawing:#006064;
    --setting-title-color:#61bebc;  
    --setting-title-active-color:#9ec8c7;
    --button-active-duration:500;
    --main-disable-text-color:rgb(105, 105, 105);
    --modal-header-success:#28a745;
    --modal-header-warning:#ffc107;
    --modal-header-error:#dc3545;
    --modal-header-color:#17a2b8;
    --toggle-button-off:#ffffff;
    --toggle-button-on:#007bff;
    --toggle-button-disable:#b4b4b4;
}
*/
* {
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}

.filter-item{display:none}
.filter-item.active{display:block}
.input-group-addon{
    padding:6px 6px;
    background:#ddd;
    border-radius:0px 0.25rem 0.25rem 0px;
    min-width:49px;
    text-align:center;
}
.panel-heading{
    font-size:18px;
    font-weight:bold;
    width:100%!important;
    /* color:#34675c; */
    color: var(--legend-title); /*Matthews*/
    margin-top:10px;
}
.icon-show-hide-setting-print{
    color:#fff;
    font-size:17px;
    width:30px;
    border:2px solid #fff;
    background:none;
}
.modal.loading-div{z-index:auto}

.bdl-0{border-left:none!important}
.bdr-0{border-right:none!important}
.bdt-0{border-top:none!important}
.bdb-0{border-bottom:none!important}
.bd-1{border:1px solid #ddd!important}
.bdl-1{border-left:1px solid #ddd!important}
.bdr-1{border-right:1px solid #ddd!important}
.bdt-1{border-top:1px solid #ddd!important}
.bdb-1{border-bottom:1px solid #ddd!important}
.br-0{border-radius:0!important}
.br-4{border-radius:4px!important}
.brtr-0{border-top-right-radius:0!important}
.brbr-0{border-bottom-right-radius:0!important}
.brtl-0{border-top-left-radius:0!important}
.brbl-0{border-bottom-left-radius:0!important}
.brtr-1{border-top-right-radius:.25rem!important}
.brbr-1{border-bottom-right-radius:.25rem!important}
.brtl-1{border-top-left-radius:.25rem!important}
.brbl-1{border-bottom-left-radius:.25rem!important}
.w-33{width:33.3%!important}
.w-20{width:20%!important}
.mw-30px{min-width:30px!important}
.mw-40px{min-width:30px!important}
.mw-50px{min-width:30px!important}
.mw-auto{min-width:auto}
.w-100px{width:100px!important}
.mt-6{margin-top:2.5rem!important}
.modify-dropdown .dropdown-item:hover,.modify-dropdown .dropdown-item:focus{
    color:#fff!important;
    text-decoration:none;
    background-color:var(--main-button-color)!important;
}
.text-menubox{color:var(--main-button-color)!important}
.table-secondary,.table-secondary>th,.table-secondary>td{background-color:var(--main-header-color);color:#fff}

.btn-fw1{min-width:100px}
.btn-group-justified{
    display:table;
    width:100%!important;
    table-layout:fixed;
    border-collapse:separate;
}
.btn-group-justified>.btn{display:table-cell;width:1%!important}
.bg-menubox{background-color:var(--main-header-color)}
a.bg-menubox:hover,a.bg-menubox:focus,button.bg-menubox:hover,button.bg-menubox:focus{background-color:var(--main-button-color-hover)}
.bg-main-header{background-color:var(--main-header-color)!important}
.btn-menubox{
    color:#fff;
    background-color:var(--main-button-color);
    border-color:var(--main-button-color);
}
.btn-menubox.shape-bar-item{
    color: #fff;
    background-color:var(--main-button-color-drawing);
    border-color:var(--main-button-color-drawing);
}
.btn-menubox:hover{
    color: #fff;
    background-color:var(--main-button-color-hover);
    border-color:var(--main-button-color-hover);
}
.btn-menubox:focus,.btn-menubox.focus{box-shadow:0 0 0 .2rem var(--main-button-color)}
.btn-menubox.disabled,.btn-menubox:disabled{
    color:#fff;
    background-color:var(--main-button-color-disable);
    border-color:var(--main-button-color-disable);
    min-width:100px;
}
.btn-menubox:not(:disabled):not(.disabled):active, .btn-menubox:not(:disabled):not(.disabled).active,
.show>.btn-menubox.dropdown-toggle {
    color:#fff;
    background-color:var(--main-button-color-hover);
    border-color:var(--main-button-color-hover);
}
.btn-menubox:not(:disabled):not(.disabled):active:focus,.btn-menubox:not(:disabled):not(.disabled).active:focus,
.show>.btn-menubox.dropdown-toggle:focus{box-shadow:0 0 0 .2rem var(--main-button-color-hover)}
.btn-outline-menubox {
    color:#004d47!important;
    background-color:transparent!important;
    background-image:none!important;
    border-color:var(--main-button-color-hover)!important;
}
.btn-outline-menubox:hover {
    color:#fff!important;
    background-color:var(--main-button-color-hover)!important;
    border-color:var(--main-button-color-hover)!important;
}
.btn-outline-menubox:focus,.btn-outline-menubox.focus{box-shadow:0 0 0 .2rem var(--main-button-color-hover)!important}
.btn-outline-menubox.disabled,.btn-outline-menubox:disabled{color:var(--main-button-color-disable)!important;background-color:transparent!important}
.btn-outline-menubox:not(:disabled):not(.disabled):active, .btn-outline-menubox:not(:disabled):not(.disabled).active,
.show>.btn-outline-menubox.dropdown-toggle {
    color:#fff!important;
    background-color:var(--main-button-color-hover)!important;
    border-color:var(--main-button-color-hover)!important;
}
.btn-outline-menubox:not(:disabled):not(.disabled):active:focus, .btn-outline-menubox:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-menubox.dropdown-toggle:focus {
    box-shadow:0 0 0 0.2rem var(--main-button-color-hover)!important;
}
.dropdown-menu-right{right:0!important;left:auto!important}
.table-sm th,.table-sm td{
    padding-top:8px;
    padding-bottom:8px;
    vertical-align:top!important;
    border-top:1px solid #dee2e6!important;
}
#system-setting .card{border-color:var(--main-button-color)}
#system-setting .card-header{
    border-bottom-color:var(--main-button-color-disable);
    color:var(--main-button-color);
    font-weight:bold;
}
#system-setting .toggle{float:right}
.toggle-handle{min-width:24px;border-width:0}
.custom-control-label::before{transform:scale(1.4)}
.custom-control{padding-left:30px!important}
fieldset{
    border:1px solid #ddd!important;
    padding:0 1.4em 0 1.4em!important;
    margin:0 0 5px 0!important;
    border-radius:5px!important;
}
legend{
    font-size:1.2em!important;
    font-weight:bold!important;
    text-align:left!important;
    width:auto!important;
    padding:0 0px!important;
    border-bottom:none!important;
}
@media screen and (max-height: 1200px) {
    .contentsetting .form-group .btn-group{max-width:300px}
}

.btn-outline{color:var(--main-button-color)!important;border-color:var(--main-button-color)!important}
.btn-outline.active{color:#fff!important;background-color:var(--main-button-color)!important;border-color:var(--main-button-color)!important}
/* Custom check */
.form-check-custom{display:flex;align-items:center;margin-bottom:.5rem!important}
.form-check-custom label{margin-bottom:0!important;margin-left:.5rem!important}
.form-check-custom input{width:25px;height:25px}
.max-screen{height:100%!important}
/* Label word wrap ***********************************************************/
/* Label option content */
.label-settings-content{font-size:1rem}
.label-print-head-settings{display:flex}
.label-print-head-settings .label-name{
    white-space:nowrap;
    max-width:80%;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* Button group input value */
.label-wrap{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    margin-bottom:.1rem;
}
/* Button group input value */
.label-btn-group-input{font-size:1rem}
.modal.modal-background{background:rgba(0,0,0,0.5)}
/* *********************************************************** */
.modal.bootstrap-dialog.type-warning .modal-header{background-color:var(--modal-header-warning)!important}
.modal.bootstrap-dialog.type-danger .modal-header{background-color:var(--modal-header-error)!important}
.modal.bootstrap-dialog.type-success .modal-header{background-color:var(--modal-header-success)!important}
/* *********************************************************** */
.bg-header-modal{background:var(--modal-header-color)!important}
select.form-control.is-invalid{background-position:right calc(0.9em + 0.1875rem) center}
#modalWifiName .selected-row,.selected-font{background:var(--setting-title-active-color)!important;color:#fff}
.toggle-btn{
    position:relative;
    display:block;
    width:100px;
    height:24px;
    margin-bottom:0px;
}
.toggle-btn input{
    opacity:0;
    width:0;
    height:0;
}
.toggle-btn .slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:var(--toggle-button-off);
    -webkit-transition:.2s;
    transition:.2s;
    border-radius:26px;
}
.toggle-btn .slider:before{
    position:absolute;
    content:"";
    height:20px;
    width:20px;
    left:2px;
    bottom:1px;
    background-color:rgb(192, 192, 192);
    border:1px solid rgb(192, 192, 192);
    -webkit-transition:.2s;
    transition:.2s;
    border-radius:50%;
}
.toggle-btn input:checked + .slider:before {
    background-color:rgb(192, 192, 192);
    border:1px solid rgb(192, 192, 192)!important;
    -webkit-transform:translateX(75px);
    -ms-transform:translateX(75px);
    transform:translateX(75px);
}
.toggle-btn input + .slider{border:1px solid rgba(0,0,0,.15)!important}
.toggle-btn input:checked:not([disabled]) + .slider{border:1px solid var(--toggle-button-border)!important;background-color:var(--toggle-button-on)}
.toggle-btn input:disabled+.slider{background-color:#e5e5e5;border:1px solid #b4b4b4}
.toggle-btn input:disabled+.slider:before{border:1px solid #b4b4b4!important;background-color:#e5e5e5!important}
.toggle-btn input:disabled+.slider .off{color:#9b9b9b}
.toggle-btn input:focus + .slider{box-shadow:0 0 1px var(--toggle-button-on)}
.toggle-btn .on {
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:45%;
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:58px;
    text-align:center;
    display:none;
    color:white;
}
.toggle-btn .off {
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:57%;
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:58px;
    text-align:center;
    color:#212529;
}
.toggle-btn input:checked + .slider .on{display:block}
.toggle-btn input:checked + .slider .off{display:none}
/* Custom Checkbox */
.checkbox-custom-main {
    display:flex;
    position:relative;
    padding-left:48px;
    cursor:pointer;
    font-weight:normal;
    margin-bottom:3px;
    margin-top:3px;
    align-items:center;
    word-break:break-word;
    min-height:40px;
}
.checkbox-custom-main .checkbox-custom-label{margin-top:0}
.checkbox-custom-main input[type=checkbox]{visibility:hidden;display:none}
.checkbox-custom-main .checkbox-custom-show{
    position:absolute;
    top:0;
    left:0;
    height:40px;
    width:40px;
    border:#adb5bd solid 1px;
    border-radius:0.25rem;
    background-color:white;
}
.checkbox-custom-main input:checked ~ .checkbox-custom-show{
    color:#fff;
    border-color:#007bff;
    background-color:#007bff;
}
.checkbox-custom-main input:disabled ~ .checkbox-custom-show{
    color:#6c757d;
    border:#adb5bd solid 1px;
    background-color:#e9ecef;
}
.checkbox-custom-main input.is-invalid~.checkbox-custom-show{border:1px solid red}
.checkbox-custom-main>.checkbox-custom-label:has(+ input.is-invalid){color:red}
.checkbox-custom-main .checkbox-custom-show:after{
    content:"";
    position:absolute;
    display:none;
}
.checkbox-custom-main input:checked ~ .checkbox-custom-show:after{display:block}
.checkbox-custom-main .checkbox-custom-show:after{
    left:14px;
    bottom:12px;
    width:11px;
    height:20px;
    border:solid white;
    border-width:0 4px 4px 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}
.checkbox-custom-main input:checked:disabled ~ .checkbox-custom-show:after{border:solid #b3b3b3;border-width:0 4px 4px 0}
/* End custom checkbox */
/* [1.0.6.G] */
.unlockStatus[type="success"],#lblUpgradeUnlockStatus[data-type="success"]{color:#0275d8}
.unlockStatus[type="error"],#lblUpgradeUnlockStatus[data-type="error"]{color:#d9534f}