: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-selected-row { background-color: gainsboro !important; }
.nav-icon-right { width: 100%; }
/* Table database*/
#nav-preview-database .table tbody td,
#nav-print-job-message .table tbody td {
    padding-top: 2px;
    padding-bottom:2px;
    vertical-align: top !important;
    border-top: 1px solid #dee2e6 !important;
}
/* [1.0.5.G] 07/03/2024 - SoPhol.Truong: Update */
#nav-preview-database .table thead th,
#nav-warning .table thead th,
#nav-product-count .table thead th,
#nav-print-job-message .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: black;
}
.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;
}

.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;
}
.desc-label-width-unset { max-width: unset; }
/* 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, rgb(175, 206, 224) 
    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: white;
    border-radius: 50%;
}

.circular-progress::after{
    position: absolute;
    width: 73%;
    height: 73%;
    content: "";
    background: white;
    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; }

/* 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;
}
/* 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; }
.inks-parameters-value{min-width:70px;}

/* CT2400 */
/* 1367px x 800px */
@media screen and (max-width: 1372px) and (max-height: 800px) and (min-width: 1362px) and (min-height: 790px) {
    .modal-fullscreen-ad .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        max-width: none;
    }
    .modal-fullscreen-ad .modal-body { max-height: 100vh; }
    .modal-fullscreen-ad .modal-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    /* Preview template only */
    #modalSaveAs .fixed-table-body {
        height: 74vh;
        max-height: none !important;
    }
    #modalLoadAllTemplate .preview-template,
    #modal-Load-All-Template-Design .preview-template,
    #modalSaveAs .preview-template { height: 74vh !important; }
}
/* R60 Real */
/* 1024px x 600px */
@media screen and (max-width: 1024px) and (max-height: 600px) and (min-width: 1014px) and (min-height: 590px) {
    .modal-fullscreen-ad .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        max-width: none;
    }
    .modal-fullscreen-ad .modal-body {
        max-height: 100vh;
    }
    .modal-fullscreen-ad .modal-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    /* Preview template only */
    #modalSaveAs .fixed-table-body {
        height: 66vh;
        max-height: none !important;
    }
    #modalLoadAllTemplate .preview-template,
    #modal-Load-All-Template-Design .preview-template { height: 63vh !important; }
    #modalSaveAs .preview-template { height: calc(66vh + 38px + 5px) !important; }
    /* Template name */
    .footer-left > .printingTemplateName { max-width: 300px; }
    /* [1.0.2.G] 27/04/2023 - SoPhol.Truong: set max length for status print */
    #printStatus { max-width: 250px !important; }
    /* [1.0.5.G] 26/02/2024 - SoPhol.Truong: table */
    #table_Open_Temp_print tbody {height: calc(100vh - 255px);}
    /* [1.0.6.G] 24/07/2024 - SoPhol.Truong: POD received data */
    .pnlTablePODDataReceived {height: 400px !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 */
    #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 {height: 53.5vh !important;}
    #modalSaveAs .preview-template { height: 58vh !important; }
    #modalSaveAs .preview-template { height: calc(58vh + 38px + 5px) !important; }
    /* Template name */
    .footer-left > .printingTemplateName { max-width: 135px; }
    /* [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: 80px;
    }
    /* [1.0.5.G] 26/02/2024 - SoPhol.Truong: table */
    #table_Open_Temp_print tbody {height: calc(100vh - 255px);}
    /* [1.0.6.G] 24/07/2024 - SoPhol.Truong: POD received data */
    .pnlTablePODDataReceived {height: 280px;}
    /* [1.0.5.G+] 25/09/2024 - SoPhol.Truong: Show user name */
    .user-id {max-width: 100px !important;}
}
/* ------------------------------------------------------------------------------------------ */
/* Cartrigde for R60 */
@media screen and (max-width: 1024px) and (max-height: 600px) {
    .R60 .printhead-disable,
    .R60 .printhead-enable,
    .R60 .printhead-connected,
    .R60 .printhead-error-communication,
    .R60 .printhead-error-hardware,
    .R60 .printhead-error-notprogram {
        width: 15px;
        height: 15px;
    }
    .R60 .printhead-disable,
    .R60 .printhead-name,
    .R60 .printhead-enable,
    .R60 .cartridge-item label { font-size: 10pt; }
    .R60 .cartrige-setting i { font-size: 11pt !important; }
    .R60 .cartrige-item-border-parrents { margin-bottom: 2px !important; }
    .R60 .control-and-monitor-print { margin-top: 0px !important; }
    .R60 .printedTotalPrintParent label {
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }
    .R60 {
        --circular-progress: 100px;
        --cartridge-item: 28px;
    }
    .R60 .printedPageParent h5 { font-size: 12pt; }
    .R60 .progress-unit { font-size: 11pt; }
}
/* ------------------------------------------------------------------------------------------ */
/* Cartrigde for R40 */
@media screen and (max-width: 800px) and (max-height: 480px) {
    .R40 .printhead-disable,
    .R40 .printhead-enable,
    .R40 .printhead-connected,
    .R40 .printhead-error-communication,
    .R40 .printhead-error-hardware,
    .R40 .printhead-error-notprogram {
        width: 15px;
        height: 15px;
    }
    .R40 .printhead-disable,
    .R40 .printhead-name,
    .R40 .printhead-enable,
    .R40 .cartridge-item label { font-size: 10pt; }
    .R40 .cartrige-setting i { font-size: 11pt !important; }
    .R40 .cartrige-item-border-parrents { margin-bottom: 2px !important; }
    .R40 .control-and-monitor-print { margin-top: 0px !important; }
    .R40 .printedTotalPrintParent label {
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }
    .R40 {
        --circular-progress: 90px;
        --cartridge-item: 28px;
    }
    .R40 .printedPageParent h5 { font-size: 12pt; }
    .R40 .progress-unit { font-size: 9pt; }
    .R40 .printedTotalPrintParent { margin-top: 0px !important; }
}