:root{
    --open-template-title-icon-width: 40px;
    --circular-progress: 115px;
    --unit-speed-color: #3e9795;
}
/* [1.0.4.G] 29/08/2023 - SoPhol.Truong: Comments */
/* @media screen and (min-width: 768px) {
    .quick-setting-title { max-width: 125px !important; }
}
@media screen and (min-width: 992px) {
    .quick-setting-title { max-width: unset !important; }
} */
/* Cartridge Info Table */
.table-borderless td, .table-borderless th { border-top: none; }

.cartridgeInfoRow {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

#table_Open_Temp_print tbody tr { min-height: 60px !important; }
.table-selected-row {
    background-color: var(--selected-list-color) !important;
    color: white;
}
.nav-icon-right { width: 100%; }
/* Table database*/
#nav-preview-database .table tbody td {
    padding-top: 2px;
    padding-bottom:2px;
    vertical-align: top !important;
    border-top: 1px solid #dee2e6 !important;
}
#nav-preview-database .table thead th {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Open template dialog */
.open-template-tab {
    width: 100%;
    display: flex;
    align-items: center;
}
.open-template-tab .title-tab-close {
    margin-left: auto;
    display: flex;
    height: 100%;
    text-align: center;
}
.open-template-tab .title-tab-close > i {
    width: var(--open-template-title-icon-width);
    margin-left: auto;
    color: #FFFFFF;
    font-size: xx-large;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
/* ------------------------------------------------------------------------------------------ */
/* Printed Pages */
.printedPageParent {
    display: flex;
    justify-content: center;
    color: var(--fore-color);
}
.printedPageParent > h5 {
    text-align: center;
    font-weight: bold;
}
/* Total Print */
.printedTotalPrintParent {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}
.printedTotalPrintParent > label {
    font-size: smaller;
    color: var(--main-disable-text-color);
    text-align: center;
}
/* [1.0.7.G] 08/01/2024 - SoPhol.Truong: add */
.printedPageParent.r10h,
.printedTotalPrintParent.r10h {
    margin-top: 30px;
}
.printedPage.r10h {
    font-size: 22pt;
}

/* ------------------------------------------------------------------------------------------ */
/* Quick setting tab */
ul.header.quick-setting li a {
    padding-left: 4px !important;
    padding-right: 4px !important;
    height: 38px;
    /* [1.0.4.G] 21/08/2023 - SoPhol.Truong: Simulation */
    display: flex;
    align-items: center;
}
/* [Domino] */
ul.header.quick-setting li a:not(.active):hover{ background-image: var(--button-gradient-blue); }
ul.navbar-right.header li:hover{ background-color: var(--main-button-color-hover); }

.desc-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* [1.0.4.G] 21/08/2023 - SoPhol.Truong: Simulation */
    margin-left: 5px;
    text-align: left;
    /* [Domino][1.0.4.G] 16/11/2023 - SoPhol.Truong: Add "margin-bottom" */
    margin-bottom: 0.1rem !important;
}
.desc-label-width-unset { max-width: unset; }
/* 5 inch */
@media screen and (max-width: 800px) {
    .desc-label-width-small {
        max-width: 120px;
    }
}
/* 03/03/2022 - SoPhol.Truong: add */
/* 5 inch */
@media screen and (max-width: 800px) {
    .desc-label-width-unset[tag="quick-setting"][data-language="ru"] { max-width: 250px; }
    .desc-label-width-unset[tag="quick-setting"][data-language="el"] { max-width: 240px; }
}

/* POD Input */
.podInput-parrents { display: flex !important; }
legend.tab-pane-legend-pod {
    font-size: 1rem !important;
    color:black !important;
}
div.tab-pane-legend-pod {
    height: 134px;
    overflow: auto;
}
.tab-pane-pod-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tab-pane-pod-button > button,
.tab-pane-simulation-button button { height: 75px; }

/*[Progress Bar]*****************************************************************************************/
.circular-progress{
    width: var(--circular-progress);
    height: var(--circular-progress);
    position: relative;
    background: conic-gradient(from 
    -130deg, rgb(63 150 22) 
    0deg, #dcdcdc
    0deg);
    border-radius: 50%;
    display: grid;
    place-items: center;
    /* font-size: 13px; */ /* 01/03/2022 - SoPhol.Truong: comment */
}

.circular-progress::before{
    position: absolute;
    width: 80%;
    height: 80%;
    content: "";
    background: var(--main-background-color);
    border-radius: 50%;
}

.circular-progress::after{
    position: absolute;
    width: 73%;
    height: 73%;
    content: "";
    background: var(--main-background-color);
    top: 60%;
    transform: rotateZ( 
45deg);
}

.progress-value{
    z-index: 2;
    position: absolute;
    top: 20%;
    font-size: 1.5em;
    font-weight: 700;
}
.progress-unit {
    position: absolute;
    top: 50%;
    content: "";
    z-index: 2;
    font-weight: 600;
    color: var(--unit-speed-color);
}
.progress-limit {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    top: calc(var(--circular-progress) - 28%);
    width: 60%;
    font-weight: 600;
}

.input-podinput-fileds > div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.input-podinput-fileds > div > label {
    margin-right: 5px;
    width: 80px;
}

/* 15/02/2022 - SoPhol.Truong: add */
.lable-no-pod-input {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: red;
}

/* 01/03/2022 - SoPhol.Truong: add */
#nav-preview-database {
    overflow: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#nav-preview-database::-webkit-scrollbar { display: none; }

.level.bg-warning{ background-color: var(--warning) !important; }
.level.bg-success{ background-color: var(--green) !important; }
.upQuickSetting .toggle{ width: 110px !important; }

.cartrige-setting:hover { color: var(--main-button-color-hover); }
/* 20/04/2022 - SoPhol.Truong: add */
.cartridge-panel {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}
.cartridge-panel::-webkit-scrollbar { display: none !important; }

@keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
}

/* Hieu.Le add 07/06/2022 cho phep scroll template trong print view */
#mainPrintCanvas{ touch-action: manipulation !important; }

/* Browser,Preview template only */
#modalSaveAs .fixed-table-body {
    height: 60vh;
    max-height: none !important;
}
#modalLoadAllTemplate .preview-template,
#modal-Load-All-Template-Design .preview-template { height: 60vh !important; }
#modalSaveAs .preview-template { height: calc(60vh + 38px + 5px) !important; }
.tab-pane-simulation-button {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
#nav-simulation label {
    margin-bottom: 10px;
}

/* Custom table list template */
/* [1.0.5.G] */
#table_Open_Temp_print{
    display: block;
    empty-cells: show;
    border-spacing: 0;
    border: 1px solid #ddd;
}
#table_Open_Temp_print thead{
    background-color: #f1f1f1;  
    position:relative;
    display: block;
    width:100%;
    overflow-y: scroll;
}
#table_Open_Temp_print tbody{
    display: block; position:relative;
    width:100%; overflow-y:scroll;
    border-top: 1px solid #ddd;
    height: 54vh;
}
#table_Open_Temp_print tr{
    width: 100%;
    display:flex;
}
#table_Open_Temp_print td,#table_Open_Temp_print th{
    flex-grow:2;
    display: block;
}
#table_Open_Temp_print th,
#table_Open_Temp_print td.index {
    text-align: center;
}
#table_Open_Temp_print th.index,
#table_Open_Temp_print td.index,
#table_Open_Temp_print td.checkbox {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#table_Open_Temp_print th.name,
#table_Open_Temp_print td.name {
    width: 75%;
    display: flex;
    flex-direction: column;
}
#table_Open_Temp_print .template-name {
    margin-bottom: 5px;
}
#table_Open_Temp_print .template-size {
    margin-bottom: 0px;
    font-size: small;
    color: gray;
    text-align: end;
}
.total-template-size {
    display: flex;
    font-size: small;
    color: gray;
}
.total-template-size label {
    margin-bottom: 0px;
}
.total-template-title,
.memory-availabled-title {
    max-width: 150px;
}
/* Domino [1.0.7.G] */
#table_Open_Temp_print .chk-add-printjob{
    width: 25px;
    height: 25px;
}
/* End Custom table list template */
/* Product Count */
.product-count-reset,
.product-count-count {
    text-align: center;
}
.product-count-reset button {
    width: 100px;
}
.product-count-count {
    width: 30%;
}
.product-count-reset {
    width: 20%;
}
/* End Product count */
/* POD Received data */
.pnlTablePODDataReceived {height: 300px;}
#tblPODReceived td {
    padding-top: 2px;
    padding-bottom: 2px;
}
/* End POD Received data */

#btnPrintJobUp,
#btnPrintJobDown
 { height: 60px; }
#nav-print-job-message{height: 100%;}
#nav-print-job-message tbody {
    height: 140px;
    overflow-y: auto;
    display: block;
    position: relative;
}
#nav-print-job-message .index {
    width: 10%;
    text-align: center;
}
#nav-print-job-message .name {
    width: 90%;
}
#nav-print-job-message tr{
    width: 100%;
    display:flex;
}
#nav-print-job-message tbody::-webkit-scrollbar { display: none; }
#nav-print-job-message tbody{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
#nav-print-job-message .table-selected-row { background-color: #9ec8c7 !important; }

/* R10 */
/* 800px x 480px */
@media screen and (max-width: 805px) and (max-height: 480px) and (min-width: 795px) and (min-height: 470px) {
    .modal-fullscreen-ad .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        max-width: none;
    }
    .modal-fullscreen-ad .modal-body {
        overflow-y: auto;
        max-height: 100vh;
    }
    .modal-fullscreen-ad .modal-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    /* Preview template only */
    #modalLoadAllTemplate .fixed-table-body,
    #modal-Load-All-Template-Design .fixed-table-body,
    #modalSaveAs .fixed-table-body {
        height: 58vh;
        max-height: none !important;
    }
    #modalLoadAllTemplate .modal-content,
    #modal-Load-All-Template-Design .modal-content,
    #modalSaveAs .modal-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    #modalLoadAllTemplate .preview-template,
    #modal-Load-All-Template-Design .preview-template,
    #modalSaveAs .preview-template { height: 46vh !important; }
    #modalSaveAs .preview-template { height: calc(58vh + 38px + 5px) !important; }
    /* Template name */
    .footer-left > .printingTemplateName {
        /* max-width: 135px; */
        max-width: 120px; /*[1.0.7.G] 05/05/2026-SoPhol.Truong: fix oversize */
    }
    /* [1.0.2.G] 25/04/2023 - SoPhol.Truong: fix change language for top quick settings */
    .upQuickSetting-label { width: 65px !important; }
    /* [1.0.2.G] 25/04/2023 - SoPhol.Truong: set max length for total row */
    #lbTotalRow { max-width: 90px !important; }
    /* [1.0.2.G] 25/04/2023 - SoPhol.Truong: set max length for button export, refresh log */
    #btnRefreshLog,
    #btnExportLog { max-width: 110px !important; }
    /* [1.0.2.G] 27/04/2023 - SoPhol.Truong: set max length for status print */
    #printStatus { max-width: 200px !important; }
    /* [1.0.3.2] 02/06/2023 - SoPhol.Truong: set max length for from, to in log */
    .lbLogFromTo { max-width: 60px !important; }
    /* [1.0.4.G] 21/08/2023 - SoPhol.Truong: Simulation */
    .desc-label-width-small {
        /* max-width: 80px !important; */
        /* min-width: 60px; */
        width: 105px;
    }
    /* [1.0.5.G] 26/02/2024 - SoPhol.Truong: table */
    #table_Open_Temp_print tbody {height: calc(100vh - 290px);}
    /* [1.0.7.G][Domino]05/05/2026-SoPhol.Truong: fix oversize "Remote" */
    .remoteStatus a{max-width: 70px;}
}

button#btnStartPrint:disabled img { filter: contrast(0.5); }
button#btnStartPrint:disabled {
    background: var(--main-background-color);
    opacity: 1;
    color: #b4b4b4;
}

.btn-expend.navbar:hover{ background: var(--button-gradient-blue) !important; }
.btn-expend.navbar .fa-sort-up::before,
.btn-expend.navbar .fa-plus::before, 
.btn-expend.navbar .fa-minus::before {
    content: "";
    width: 100%;
    height: 100%;
    background: url(/theme/domino/img/Dropdown_Enabled_18x16.png);
    position: absolute;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    background-position: center;
}
.btn-expend.navbar .fa-sort-up::before,
.btn-expend.navbar .fa-plus::before { transform: translate(-50%, -50%) rotate(180deg); }
.btn-expend.navbar .fa-minus:before { transform: translate(-50%, -50%); }

#printStatus b:first-letter{ text-transform: uppercase; }
#printStatus b{
    display: block;
    text-transform: lowercase;
}

#btnDetectInsert{ height: 49px; }
#btnDetectInsert:disabled {
    background: var(--button-disable);
    color: var(--toggle-button-disable);
    cursor: auto;
}