:root {
    --main-color: #e5e5e5;
    --header-color: #737373; /* Header of page */
    --footer-color: #C3C3C3; /* Footer of page */
    --ruler-color: #00263c;
    /* [1.0.7.G] 18/03/2025-SoPhol.Truong: comment */
    /* --design-bar-color: linear-gradient(0deg, rgba(0,38,60,1) 0%, rgba(0,47,75,1) 5%, rgba(0,91,149,1) 96%, rgba(25,108,159,1) 98%, rgba(54,127,171,1) 100%); */
    --main-background-color: #f8f8f8;
    --design-bottom-bar-color: #c3c3c3;
    --design-background-color: #f8f8f8;
    --main-header-color: #6c757d;
    --main-button-color: #007bff;
    --main-button-color-hover: #005ba2;
    --selected-list-color: #005ba2;
    --main-button-color-disable: #f8f8f8;
    --border-color: #dee2e6;
    --main-button-color-drawing: #006064;
    --button-disable : #f8f8f8;
    --setting-title-color: #737373;  
    --setting-title-active-color: #9ec8c7;
    --setting-button-active: linear-gradient(0deg, rgba(102,102,102,1) 0%, rgba(115,115,115,1) 2%, rgba(126,126,126,1) 4%, rgba(180,180,180,1) 95%, rgba(197,197,197,1) 100%);
    --setting-button: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(42, 42, 42) 4%, rgb(85, 85, 85) 96%, rgb(103, 103, 103) 98%, rgb(122, 122, 122) 100%);
    --button-active-duration :500; /* Animation for click button */
    --button-gradient-red: linear-gradient(0deg, rgba(103,8,14,1) 0%, rgba(113,9,16,1) 3%, rgba(127,10,20,1) 5%, rgba(231,57,81,1) 100%);
    --button-gradient-green: linear-gradient(0deg, rgba(14,112,46,1) 0%, rgba(15,116,49,1) 2%, rgba(17,138,59,1) 5%, rgba(0,211,119,1) 100%);
    --button-gradient-blue: linear-gradient(180deg, rgba(15,100,167,1) 0%, rgba(0,91,162,1) 12%, rgba(0,156,237,1) 91%, rgba(0,130,196,1) 95%, rgba(0,105,158,1) 100%);
    --button-gradient-gray: linear-gradient(0deg, rgba(32,32,32,1) 0%, rgba(42,42,42,1) 4%, rgba(85,85,85,1) 96%, rgba(103,103,103,1) 98%, rgba(122,122,122,1) 100%);
    --button-gradient-orange: linear-gradient(0deg, rgba(212,101,0,1) 0%, rgba(218,103,0,1) 3%, rgba(255,122,0,1) 5%, rgba(255,180,0,1) 100%);
    --button-gradient-popup: linear-gradient(0deg, #4D4D4D 0%, #606060 6%, #929292 96%, #9D9D9D 98%, #AAAAAA 100%);
    --button-design-cancel: linear-gradient(0deg, #347FAB 0%, #419CD2 6%, #6DD1F2 96%, #7CD6F4 98%, #8DDCF6 100%);
    --main-disable-text-color: rgb(105, 105, 105);
    --modal-header-success: #28a745;
    --modal-header-warning: #ffc107;
    --modal-header-error: #dc3545;
    --fore-color: #2d2d2d;
    --modal-header-color: #00204b;
    --main-design-background-color: #e6eef3; 
    --design-background-color: #f8f8f8;
    --red: #b93526;
    --green: #08b05b;
    --warning: #fe9500;
    --outline-color: #b4b4b4;
    /* 15/06/2022 - SoPhol.Truong: add */
    --input-gradient: linear-gradient(0deg, #F8F8F8 0%, #F4F4F4 79%, #E1E1E1 87%, #ACACAC 95%, #A0A0A0 100%);
    --input-border-color: #777777;
    --input-border-disabled-color: #B4B4B4;
    --input-text-color: #2D2D2D;
    --input-text-disable-color: #9B9B9B;
    --input-text-placeholder: linear-gradient(180deg, rgba(15,100,167,1) 0%, rgba(0,91,162,1) 12%, rgba(0,156,237,1) 91%, rgba(0,130,196,1) 95%, rgba(0,105,158,1) 100%);
    /* --input-text-placeholder: linear-gradient(0deg, #00263C 0%, #002F4B 5%, #005B95 96%, #196C9F 98%, #367FAB 100%); */
    --input-text-placeholder-color: #FFFFFF;
    --select-icon-background: linear-gradient(0deg, #4D4D4D 0%, #606060 6%, #929292 96%, #9D9D9D 98%, #AAAAAA 100%);
    --select-icon-disabled-background: white;

    --toggle-button-off: #b4b4b4;
    --toggle-button-on : #b4b4b4;
    --toggle-button-disable : #b4b4b4;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body, html {
    height: 100%;
}  
/* ------------------------ end font face ------------------------ */
.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;
    margin-top: 10px;
}

.label-heading {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-info {
    font-weight: bold;
    color: var(--ruler-bar-color);
}

/* For update.html */
.Update-Printer .Choose-File-Update {
    z-index: 0;
    width: calc(100% - 125px);
}

.Choose-File-Database {
    z-index: 0;
    width: calc(100% - 215px);
}

.Append-Title-Update, .Append-Title-Database {
    z-index: 10;
    border-radius: 0px !important;
    width: 50px;
    border-right: none !important;
}

/* End update.html */
/* UPDATE BOOTSTRAP */
#div-menubox {
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1050;
}

#div-content {
    height: 100%;
    overflow: auto;
}

.icon-show-hide-setting-print {
    color: #fff;
    font-size: 30px;
    width: 49px;
    height: 49px;
    border: 2px solid #fff;
    background: none;
    padding-left: 10px;
}

/* hide icon X in select 2 */
.select2-selection__clear {
    display: none !important;
}


#loading-div {
    width: 300px;
    height: 200px;
    background-color: #0c0b0b;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
}

#loading-div-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: black;
    width: 100%;
    height: 100%;
}

.modal.loading-div { z-index: auto; }

@media (max-width: 1024px) {
    #modal-Create-Update-Template .modal-dialog {
        margin-bottom: 3rem !important;
    }
}

.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: 0px !important; }
.br-4 { border-radius: 4px !important; }
.brtr-0 { border-top-right-radius: 0px !important; }
.brbr-0 { border-bottom-right-radius: 0px !important; }
.brtl-0 { border-top-left-radius: 0px !important; }
.brbl-0 { border-bottom-left-radius: 0px !important; }
.brtr-1 { border-top-right-radius: 0.25rem !important; }
.brbr-1 { border-bottom-right-radius: 0.25rem !important; }
.brtl-1 { border-top-left-radius: 0.25rem !important; }
.brbl-1 { border-bottom-left-radius: 0.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-button-color-hover);
    color: #fff
}

.btn-fw1 { min-width: 100px !important; }
.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);
}

.btnRuleConfigurations ,
.btn-main-color{
    background-image: var(--button-gradient-gray);
    color: #ffffff;
    transition: none;
    /* border: 1px solid var(--outline-color); */
}

.btn-main-color:focus{ background-image: var(--button-gradient-blue); }

.btn-fw152 { min-width: 152px !important; }
.btn-fw70{ min-width: 70px; }


.bg-header-modal{ background: var(--modal-header-color) !important; }
.bg-header-main-modal{ background: var(--modal-header-color) !important; }

.bg-main-header { background-color: var(--main-header-color) !important; }
/* [Domino] */
.btn-menubox {
    transition: none;
    color: #fff;
    background-image: var(--button-gradient-green);
    border: 1px solid;
}
.btn-menubox.shape-bar-item {
    color: #fff;
    background-color: var(--main-button-color-drawing);
    border-color: var(--main-button-color-drawing);
}

/* [Domino] 15/03/2022 hieu update */
.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 0.1rem var(--main-button-color); }
.btn.btn-success:disabled,.btn.btn-success.disabled,
.btn-menubox.disabled, .btn-menubox:disabled {
    color: #b4b4b4;
    background: transparent;
    border: 1px solid var(--outline-color);
    min-width: 50px;
}
.btn-menubox:not(:disabled):not(.disabled):active, .btn-menubox:not(:disabled):not(.disabled).active,
.show>.btn-menubox.dropdown-toggle {
    color: var(--button-disable);
    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 0.1rem var(--main-button-color);
}
.btn-outline-menubox {
    color: #004d47 !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--main-button-color) !important;
}
.btn-outline-menubox:hover {
    color: #fff !important;
    background-color: var(--main-button-color) !important;
    border-color: var(--main-button-color) !important;
}
.btn-outline-menubox:focus, .btn-outline-menubox.focus { box-shadow: 0 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: 0.25rem !important;*/
    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;
    width: 110px !important;
}

.toggle-handle {
    min-width: 24px;
    border-width: 0px;
}

/**hoai custom checkbox*/
.custom-control-label::before { transform: scale(1.4); }
.custom-control { padding-left: 30px !important; }

/**for fieldset*/
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;
}
/**end fieldset*/

/* HandHeld and R40 Lite */
@media screen and (max-height: 1200px) {
    .contentsetting .form-group .btn-group {
        max-width: 320px;
    }
}

/* Button UI ***********************************************************/
/* [Domino][1.0.5.G] 03/04/2024 - SoPhol.Truong: add "btnOpenFileManager" */
.btn-outline-secondary:not(:disabled):not(.disabled,.btn-fit-to-size,.btn-zoom-out,.btn-zoom-in,.btnOpenFileManager,#unlockInk-export,#unlockInk-import,#btnPIgExportPrintercode,#btnPIgImportPrintercode,#btnExportControllerCode,#btnImportControllerCode,.btnAddFontCustom):not(.active),
.btn-outline:not(.active) {
    color: #ffffff;
    border-color: var(--border-color);
    background-color: var(--selected-list-color);
}

/*.btnOpenFileManager{
    border-color: var(--selected-list-color) !important;
}*/

.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline.active {
    color:  var(--selected-list-color);
    background-color: #ffffff;
    border-color: var(--selected-list-color) !important;
}

.btn-outline:not(.active):hover,
.btn-outline-secondary:not(:disabled):not(.disabled):not(.active):hover{
    color: #ffffff !important;
    border-color: var(--main-button-color-hover) !important;
    background-color: var(--selected-list-color) !important;
}
/*
#deign-tool .btn-outline-secondary:not(:disabled):not(.disabled, .btn-fit-to-size, .btn-zoom-out, .btn-zoom-in):not(.active),
#deign-tool .btn-outline:not(.active) {
    color: #ffffff;
    border-color: var(--border-color);
    background-color: var(--selected-list-color);
}

#deign-tool .btnOpenFileManager{
    border-color: var(--selected-list-color) !important;
}

#deign-tool .btn-outline-secondary:not(:disabled):not(.disabled).active,
#deign-tool .btn-outline.active {
    color:  var(--selected-list-color);
    background-color: #ffffff;
    border-color: var(--selected-list-color) !important;
}

#deign-tool .btn-outline:not(.active):hover,
#deign-tool .btn-outline-secondary:not(:disabled):not(.disabled):not(.active):hover{
    color: #ffffff !important;
    border-color: var(--main-button-color-hover) !important;
    background-color: var(--selected-list-color) !important;
}
*/
/* Custom check */
.form-check-custom {
    display: flex;
    align-items: center;
    margin-bottom: .5rem !important;
}
.form-check-custom label {
    margin-bottom: 0px !important;
    margin-left: .5rem!important;
}
.form-check-custom input {
    width: 25px;
    height: 25px;
}

/* For only in device */
.max-screen { height: 100% !important; }

/* Label word wrap ***********************************************************/
/* Label option content */
/* [Domino] Comments */
/*
.label-settings-content { font-size: 1rem; }
*/
.label-print-head-settings { display: flex; margin-bottom: -0.4rem; }
.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: -0.3rem;
}
/* Button group input value */
.label-btn-group-input { font-size: 1rem; }
/************************************************************/
/* Shutown Dialog */
.btn-shutdown { width: 31.5%; }
/* Modal background */
.modal.modal-background { background: #323232cc; }
/* *********************************************************** */
/* 01/03/2022 - SoPhol.Truong: add */
.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; }

/* custom keyborad */
#virtualKeyboard #kbDesk div.kbButton a{ font-size: 28px; }
#vk-input-review{ font-size: 28px; }
#virtualKeyboard #kbDesk div.kbButton, #btn-ch-lang, #btn-check, #btn-move-left, #btn-move-right, #btn-clear{ height: 65px; }
.modal-keyboard { background: #323232cc !important; }
/* [Domino][1.0.5.G] 02/04/2024 - SoPhol.Truong: Update height for Chinese keyboard */
#virtualKeyboard.ZH #kbDesk div.kbButton,
#virtualKeyboard.ZH #btn-ch-lang,
#virtualKeyboard.ZH #btn-check,
#virtualKeyboard.ZH #btn-move-left,
#virtualKeyboard.ZH #btn-move-right,
#virtualKeyboard.ZH #btn-clear {
    height: 55px;
}

/* Fix invalid icon select position*/
select.form-control.is-invalid { background-position: right calc(0.9em + 0.1875rem) center; }

input[type="text"].form-control.is-invalid:hover{
    background-size: unset;
    background-position: unset;
}

/* 25/04/2022 Hieu add selected font */
.selected-font {
    background: var(--main-button-color-hover) !important;
    color: #ffffff;
}

/* font family and font size with language */
.font-family-arabic{
    font-size: 19px;
}
.font-small-arabic{
    /* font-size: 15px; */
    font-size: 12px; /*[1.0.7.G][Domino]05/05/2026-SoPhol.Truong: fix oversize width*/
}
.font-large-arabic{
    font-size: 29px;
}
.font-family-farsi{
    font-size: 18px;
}
.font-small-farsi{
    font-size: 18px;
}
.font-large-farsi{
    font-size: 28px;
}

.font-family-romanian{
    font-size: 15px;
}
.font-small-romanian{
    font-size: 12px;
}
.font-large-romanian{
    font-size: 25px;
}

.font-family-chinese{
    font-size: 18px;
}
.font-small-chinese{
    /* font-size: 15px; */
    font-size: 12px; /*[1.0.7.G][Domino]05/05/2026-SoPhol.Truong: fix oversize width*/
}
.font-large-chinese{
    font-size: 28px;
}

.font-family-japanese{
    font-size: 18px;
}
.font-small-japanese{
    /* font-size: 17px; */
    font-size: 12px; /*[1.0.7.G][Domino]05/05/2026-SoPhol.Truong: fix oversize width*/
}
.font-large-japanese{
    font-size: 28px;
}

.font-family-general{
    font-size: 15px;
}
.font-small-general{
    font-size: 12px;
}
.font-large-general{
    font-size: 25px;
}


.special-key-button {
  background: var(--background-special-button) !important;
}

#virtualKeyboard #kbDesk div.kbButton{
    box-shadow: none !important;
}

#kb_bmleft a::after{
    content: "";
    background-image: url(/theme/domino/img/Icon_Backward_Enabled.png);
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-size: 25px 30px;
  }
  #kb_bmright a::after {
    content: "";
    background-image: url(/theme/domino/img/Icon_Forward_Enabled.png);
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-size: 25px 30px;
}
#kb_bClose:after{
    content: "";
    background-image: url(/theme/domino/img/Icon_CancelCross_Enabled_30x30.png);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}
#kb_bCheck:after{
    content: "";
    background-image: url(/theme/domino/img/Icon_Tickmark_Enabled__30x30.png);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}
#virtualKeyboard #kbDesk div#kb_bbackspace ::after{
    content: "";
    background-image: url(/theme/domino/img/Icon_Backspacee_Enabled.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 30px;
}

#virtualKeyboard #kbDesk div#kb_bshift_left ::after{
    content: "";
    background-image: url(/theme/domino/img/Shift_Enabled_30x30.png);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
}

.special-key-button .fa-backspace:before {
    content: "";
    background-image: url(/theme/domino/img/Icon_Backspacee_Enabled.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.special-key-button .fa-chevron-left:before {
    content: "";
    background-image: url(/theme/domino/img/Icon_Backward_Enabled.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.special-key-button .fa-chevron-right:before {
    content: "";
    background-image: url(/theme/domino/img/Icon_Forward_Enabled.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* #################################### TOGGLE BUTTON ############################ */
.toggle-btn {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 24px;
    margin-right: 35px;
    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: 30px;
    width: 30px;
    left: -3px;
    bottom: -3px;
    background-color: #ffffff;
    border: 1px solid #b4b4b4;
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 50%;
}
.toggle-btn input:checked + .slider:before {
    background-color: #2d2d2d !important;
    border: 1px solid #2d2d2d !important;
}
.toggle-btn  input:checked + .slider { background-color: var(--toggle-button-on); }
/* Disabled */
.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;
    bottom: -4px;
}
.toggle-btn input:disabled + .slider .off { color: #9b9b9b; }
/* End disabled */
.toggle-btn  input:focus + .slider { box-shadow: 0 0 1px var(--toggle-button-on); }
.toggle-btn input:checked + .slider:before {
    -webkit-transform: translateX(65px);
    -ms-transform: translateX(65px);
    transform: translateX(65px);
}
.toggle-btn .on,
.toggle-btn .off
{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 130%;
    font-size: 15px;
    max-width: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.toggle-btn .on {
    display: none;
    color: white;
}
.toggle-btn .off { color: #9b9b9b; }
.toggle-btn input:checked + .slider .on {
    display: block;
    color: #2d2d2d;
}
.toggle-btn input:checked + .slider .off { display: none; }
/* End togle button */
.preview-template .canvas-container { pointer-events: none; }
/* [1.0.3.0] 19/05/2023 - SoPhol.Truong: add */
.input-group .input-group-append {
    height: 38px;
}
/* [1.0.5.G+] 30/07/2024 - SoPhol.Truong: Add */
.form-control.is-invalid {
    border-color: #dc3545 !important;
}
.form-control.is-invalid:hover {
    background-image: var(--button-gradient-blue) !important;
    color: white !important;
    border: 1px solid var(--main-button-color-hover);
    background-size: unset;
    background-position: unset;
}
/* [1.0.6.G+] 10/03/2025-SoPhol.Truong: add */
.btn-menu-icon{
    background: var(--select-icon-background);
    color: #ffffff;
}