@font-face {
    font-family: 'SAP Icons';
    src: url(../fonts/SAP_font/SAP-icons.ttf) format('truetype');
}

@font-face {
    font-family: "72-Regular";
    src: url("../fonts/SAP_font/72-Regular.ttf");
}

@font-face {
    font-family: "72-Bold";
    src: url("../fonts/SAP_font/72-Bold.ttf");
}

@font-face {
    font-family: 'LCD-Nomal';
    src: url(../fonts/Digital/DS-DIGI.TTF);
}

@font-face {
    font-family: "LCD-Bold";
    src: url("../fonts/Digital/DS-DIGIB.TTF");
}

@font-face {
    font-family: "LCD-Italic";
    src: url("../fonts/Digital/DS-DIGII.TTF");
}

@font-face {
    font-family: "LCD-BoldItalic";
    src: url("../fonts/Digital/DS-DIGIT.TTF");
}

[data-sap-icon]:before {
    font-family: "SAP Icons";
    content: attr(data-sap-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

/* Material Symbols Icons */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-flex;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/*p, h1, h2, h3, h4, h5, h6 {
    user-select: none;
}*/
.libre-barcode-39-regular {
    font-family: "Libre Barcode 39", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
}

* {
    box-sizing: border-box;
    /*font-family: "Mukta", sans-serif;*/
    font-family: "72", "72full", Arial, Helvetica, sans-serif; /*SAP-coppy*/
}

html {
    font-size: 1rem;
    color: #424242;
}

body {
    margin: 0;
    /*font-family: "Roboto Condensed", sans-serif;*/
}
/*body::-webkit-scrollbar {
    display: none;
}*/
#login_title, #cp_title {
    margin-bottom: 2rem !important;
    font-size: 1.5rem !important;
    font-weight: normal !important;
}

input, select, button {
    /*margin-bottom: 6px;*/
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border: 1px solid #919396;
    border-radius: 2px;
    color: #424242;
    /*font-family: "Roboto Condensed", sans-serif;*/
    font-size: 1rem;
    background: white;
    outline: none;
}

select, button {
    -webkit-appearance: none;
    cursor: pointer;
}

select {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
    background-position: right 20px center, right 15px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

    input:disabled, select:disabled {
        color: #c0c0c0;
        border-color: #c0c0c0;
        /*cursor: not-allowed;*/
    }

        input:disabled::placeholder {
            color: #a8a8a8;
        }

input::placeholder {
    color: #a8a8a8;
}

.modalHeaderCustom input::placeholder {
    color: #cae4fb !important;
}

.scrollJS input::placeholder {
    color: #bfbfbf;
}

input::-ms-input-placeholder {
    color: #a8a8a8;
}
/*input:not([type="checkbox"]), select {
    display: block;*/
/*margin-bottom: 2.25rem;*/
/*width: 100%;
    height: 3rem;
}*/
.offcanvas-backdrop.show {
    display: none !important;
}
/*.contentHomePG::-webkit-scrollbar {
    display: none;
}*/
.offcanvas-open {
    overflow: unset !important
}

    .offcanvas-open::-webkit-scrollbar {
        display: none;
    }

.btn-custumLGP {
    width: 100%;
    border: none;
    border-radius: 4px;
    background-color: #f0ab00;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.06);
    cursor: pointer;
    color: white;
    /*font-family: "72-Bold";*/
    height: 2.625rem;
    display: block !important;
}

    .btn-custumLGP:hover {
        background-color: #f0ab00;
        opacity: 0.8;
    }

    .btn-custumLGP:disabled {
        background: #ddd;
        cursor: not-allowed;
    }

        .btn-custumLGP:disabled:hover {
            opacity: unset;
        }

.offcanvas-body {
    overflow-y: auto;
}

.offcanvas {
    pointer-events: auto; /* Cho phép tương tác với nội dung */
}
/* Đảm bảo khi offcanvas mở ra, scroll của body vẫn hoạt động */
body.offcanvas-open {
    overflow: hidden; /* Ẩn thanh cuộn của body */
}

/* Thay đổi backdrop để không chặn cuộn */
.offcanvas-backdrop {
    overflow: hidden; /* Chỉ cần ẩn cuộn của backdrop */
    transition-duration: 0.3s; /* Tăng thời gian chuyển tiếp của lớp backdrop */
}

/* Đảm bảo navbar không chặn nội dung ngoài */
.offcanvas {
    z-index: 1045; /* Đặt z-index để offcanvas không chặn nội dung ngoài */
    transition-duration: 0.3s; /* Tăng thời gian chuyển tiếp khi mở/đóng */
}

.modal-open {
    overflow: auto;
}

.nav-link.active {
    border-bottom: 3px solid white; /* Màu sắc của border-bottom, bạn có thể thay đổi theo ý muốn */
}

.iconArrowRotate {
    background-image: url(/img/icon/icons8-arrow-down-30.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
    width: 2rem;
    height: 1.25rem;
    transition: transform 0.3s;
    display: inline-block;
}

.styleBtnHideShowFilter {
    background-color: #4f667a !important;
    width: 2rem;
    height: 1.25rem;
    border-radius: 0.1875rem;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.5s ease;
    z-index: 10;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.styleTextTT {
    font-size: .875rem;
    font-weight: normal;
    color: #666
}

.styleTextTTwhite {
    font-size: .875rem;
    font-weight: normal;
    color: white
}

.modal-content {
    border: none ;
    border-radius: 10px ;
}

.modalHeaderCustom {
    color: #666;
    border-bottom: none;
    padding: 0.25rem 0;
    width: 100%;

}
.modal-header-draggable {
    cursor: grab;
    position: relative;
}
.modal-header-draggable:active {
    cursor: grabbing;
}
.modal-drag-icon {
    position: absolute;
    top: 0.35rem;
    left: 0.5rem;
    font-size: 1.1rem;
    color: #9aa0ab;
    pointer-events: none;
    user-select: none;
}
.modal-header-sap {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modalCpn .modalHeaderCustomSAP {
    color: #666;
    border-bottom: none;
    padding: 0.25rem 0;
    width: 100%;
    align-items: flex-start !important;
}

.modalFooterCustom {
    border-top: none;
    padding: 0.25rem 0.4375rem;
    background-color: #374d61;
    border-radius: 0 0 0.25rem 0.25rem;
    width: 100%
}

.changeContent, .changeContentST {
    line-height: 1rem;
    font-size: .875rem;
    color: white;
    text-decoration: none;
}

    .changeContent.active, .changeContentST.active {
        color: #91c8f6;
        border-bottom: 0.125rem solid #91c8f6;
    }

    .changeContent:hover, .changeContentST:hover {
        cursor: pointer;
    }

.inputCustum, .itemRenderDemoDR input[type=text] {
    /*background-color: #E0F4FF;*/
    border: .0625rem solid #bfbfbf;
    padding-left: .375rem;
    /*  padding-top: 5px;
    padding-bottom: 5px;*/
    font-size: 1rem;
    /*font-weight: 350;*/
    /*padding-right: 15px;*/
    height: 36px;
    outline: none;
    color: #333;
    background: none
    /*font-weight: 400;*/
}

.itemRenderDemoDR input[type=text], .itemRenderDemoDR input[type=number] {
    height: 36px;
}

.dropdownSelectNS {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #bfbfbf;
    border-top: none;
    border-radius: 0;
    display: none;
    z-index: 9;
    padding: 0;
    transform: translate(0px, 27px) !important;
}

.dropdown-menu.dropTest {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #bfbfbf;
    border-top: none;
    border-radius: 0;
}

.dropdownSelectNS li {
    padding: 2px 8px;
    cursor: pointer;
}

    .dropdownSelectNS li:hover {
        background-color: rgb(128, 128, 128, 0.4);
    }

.dropdown-item.itemDropTest:hover {
    background-color: rgb(128, 128, 128, 0.4) !important;
    color: black !important;
}

.inputCustumHD {
    border: 1px solid #8fb4d3;
    background: none;
    padding-left: .375rem;
    font-size: 1rem;
    height: 1.625rem;
    outline: none;
    border-radius: 10px;
    color: #fafafa !important;
    /*color: black;*/
}
.inputCustumHDblackinput {
    border: 1px solid #8fb4d3;
    background: none;
    padding-left: .375rem;
    font-size: 1rem;
    height: 1.625rem;
    outline: none;
    border-radius: 10px;
    color: black !important;
    /*color: ;*/
}

.modalHeaderCustom input[type=text] {
    border: 1px solid #8fb4d3;
}

.scrollJS .inputCustumHD,
.itemRenderDemoDR input[type=text],
.viewDemoDR input[type=text] {
    border: .0625rem solid #bfbfbf;
}
.scrollJS .inputCustumHD {
    color: black !important;
}

.scrollJS .ticketManagerInput .inputCustumHD {
    border: 1px solid #8fb4d3;
    color: white !important
}

    .scrollJS .ticketManagerInput .inputCustumHD::placeholder {
        color: white;
        opacity: 0.6
    }

.itemRenderDemoDR input[type=date],
.viewDemoDR input[type=date],
.itemRenderDemoDR input[type=time],
.viewDemoDR input[type=time],
.itemRenderDemoDR input[type=number],
.viewDemoDR input[type=number],
.itemRenderDemoDR textarea,
.viewDemoDR textarea,
textarea {
    border: .0625rem solid #bfbfbf;
}

.itemRenderDemoDR input[type=text],
.viewDemoDR input[type=text],
.itemRenderDemoDR input[type=date],
.viewDemoDR input[type=date],
.itemRenderDemoDR input[type=number],
.viewDemoDR input[type=number],
.itemRenderDemoDR input[type=time],
.viewDemoDR input[type=time] {
    height: 36px;
}

.inputCustumHD::placeholder {
    font-style: italic;
    color: #c3d7e8;
}


.custumSearch {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 5px 10px;
    font-size: 1rem;
    /* background-image: url(/img/icon/icons8-search-48.png);*/
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    border-radius: 10px;    
     /* Thêm !important và màu mặc định */
    transition: border-color 0.3s ease;
}

/* Khi hover vào */
.custumSearch:hover {
    border-color: #4da6ff !important; /* Viền xanh biển nhạt */
}

/* Khi đang nhập (focus) */
    .custumSearch:focus {
        border: 2px solid  !important;
        border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
        outline: none;
    }

.custumSearchBlackInput {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 5px 10px;
    font-size: 1rem;
    /* background-image: url(/img/icon/icons8-search-48.png);*/
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    border-radius: 10px;
    color: black !important;
    /* Thêm !important và màu mặc định */
    transition: border-color 0.3s ease;
}

    /* Khi hover vào */
    .custumSearchBlackInput:hover {
        border-color: #4da6ff !important; /* Viền xanh biển nhạt */
    }

    /* Khi đang nhập (focus) */
    .custumSearchBlackInput:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
        outline: none;
    }
.dropdown-input {
    border-radius: 10px;
}
    .dropdown-input:hover {
        border-color: #4da6ff !important; 
    }

    .dropdown-input:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; 
        outline: none;
    }
.custumDate {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 5px 10px;
    font-size: 1rem;
    background-image: url(/img/icon/icons8-weekend-48.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    border-radius: 10px;

}
    .custumDate:hover {
        border-color: #4da6ff !important; 
    }

    .custumDate:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; 
        outline: none;
    }

    .custumDate:has(+ .custumTime) {
        border-radius: 10px 0 0 10px;
    }

.custumDateBlackicon {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 5px 10px;
    font-size: 1rem;
    background-image: url(/img/icon/icons8-weekend-48-darkTheme.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    border-radius: 10px;
}

    .custumDateBlackicon:hover {
        border-color: #4da6ff !important; 
    }

    .custumDateBlackicon:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; 
        outline: none;
    }

.custumDateTime {
    background-image: url(/img/icon/icons8-schedule-48-date-time.png);
}

.selectCT {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 20px;
    background-image: url(/img/icon/icons8-arrow-down-30SL.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
    border-radius: 10px;
}

.customSelect {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 20px;
    background-image: url(/img/icon/icons8-arrow-down-30SL.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
}

.buttonShow {
    width: 100%;
    padding-right: 20px;
    background-image: url(/img/icon/icons8-arrow-down-30SL.png) !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 5px) center !important;
    text-align: left;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #8fb4d3;
    background: none;
    padding-left: .375rem;
    font-size: 1rem;
    height: 1.625rem;
    outline: none;
    color: #fafafa;
    border-radius: 10px;
}
.buttonShow:hover {
    border-color: #4da6ff !important; /* Viền xanh biển nhạt */
}

/* Khi đang nhập (focus) */
    .buttonShow:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
        outline: none;
    }

.custumDate::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.custumTime {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 5px 10px;
    font-size: 1rem;
    background-image: url(/img/icon/icons8-time-48.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}

    .custumTime::-webkit-calendar-picker-indicator {
        opacity: 0;
    }

    .custumDate + .custumTime {
        border-radius: 0 10px 10px 0 !important;
    }

.btnRInput {
    border: none;
    position: absolute;
    right: 0;
    background: none;
    padding: 0 5px;
}

    .btnRInput:hover {
        background-color: #b2b2b2;
        height: 1.625rem
    }

.custumButtonPGLO {
    line-height: 1.5rem;
    font-size: 1rem;
    
}

.custumButtonPG {
    background-color: #5496cd;
    border-color: #418ac7;
    align-items: center;
    height: 1.625rem;
    cursor: pointer;
    color: white;
    border-radius: 10px !important;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.custumButtonPG:hover {
    background-color: #4a88bb;
    border-color: #3d7db5;
    box-shadow: 0 2px 8px rgba(84, 150, 205, 0.3);
    transform: translateY(-2px);
}

.custumButtonPG:active {
    background-color: #3d7db5;
    transform: translateY(0);
}

.custumButtonPG:disabled {
    background-color: #a0a0a0;
    border-color: #888888;
    cursor: not-allowed;
    opacity: 0.6;
}

.styleTitleContent {
    font-size: 1.125rem;
    line-height: 2.875rem;
    /*padding: 0;*/
    height: 2.75rem;
    color: white;
}
/*#calendar-container {
    position: relative;
    z-index: 1;
    margin-left: 200px;
}*/
#calendar {
    max-width: 100%;
    /*margin: 20px auto;*/
}

.fc-dayGridMonth-view tbody table tbody tr:last-child {
    display: none;
}

.fc .fc-view-harness {
    height: 80vh !important;
}
/* CSS cho sự kiện trong chế độ xem danh sách */
.fc-list-event {
    position: relative; /* Đặt lại vị trí để nút xóa hiển thị đúng */
}

.fc-event, .fc-event-main {
    cursor: pointer;
}
/* CSS cho nút chỉnh sửa sự kiện */
.fc-event-edit-button {
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 50px;
    z-index: 1;
    font-size: 0.8em;
}

    /* Tùy chọn cho nút chỉnh sửa khi di chuột qua */
    .fc-event-edit-button:hover {
        background-color: #2980b9;
    }

.fc .fc-col-header-cell-cushion {
    text-decoration: none;
    line-height: 1.5rem;
    font-size: 1.2rem;
    color: white;
    /*border: 2px solid #4f667a !important;*/
}

.fc .fc-daygrid-day-number {
    text-decoration: none;
    line-height: 1.5rem;
    font-size: 1.5rem;
    color: #4f667a;
    /*border: 2px solid #4f667a !important;*/
}

.fc-dayGridMonth-view table thead {
    background-color: #4f667a !important;
}

.fc-theme-standard th {
    background-color: #4f667a;
}

.fc-timeGridDay-view table thead {
    background-color: #4f667a;
}

.fc-listMonth-view table .fc-list-day-cushion {
    background-color: #4f667a;
}

    .fc-listMonth-view table .fc-list-day-cushion a {
        text-decoration: none;
        line-height: 1.5rem;
        font-size: 1rem;
        color: white;
    }

.fc .fc-timegrid-axis-cushion, .fc .fc-timegrid-slot-label-cushion, .fc .fc-list-table td, .fc .fc-list-event-title a {
    color: #4f667a;
    font-weight: 700;
}

.fc .fc-daygrid-body table {
    border-color: #4f667a; /* Màu đỏ */
}

.fc .fc-timegrid-body table {
    border-color: #4f667a; /* Màu xanh lá */
}

.fc-listMonth-view td {
    text-align: start !important;
}

.fc-view-harness {
    background: white
}

.fc-toolbar-title {
    color: white;
}

/*.fc-daygrid-day-frame {
    border: 1px solid #4f667a;*/ /* Màu đỏ */
/*}*/
/* Thay đổi màu đường lưới cho ngày hiện tại */
/*.fc-daygrid-day.fc-day-today {
    border: 1px solid #4f667a;*/ /* Màu xanh lá */
/*}*/
/* CSS cho mô tả sự kiện */
.event-description {
    font-size: 0.8em; /* Kích thước chữ nhỏ hơn */
    color: #555; /* Màu chữ xám */
    margin-top: 5px; /* Khoảng cách giữa tiêu đề và mô tả */
}

.tooltip {
    max-width: 600px; /* Đặt độ rộng tối đa của tooltip */
    font-size: 14px; /* Kích thước font của tooltip */
    background-color: #333; /* Màu nền của tooltip */
    color: #fff; /* Màu chữ của tooltip */
    border-radius: 5px; /* Bo góc cho tooltip */
    /*padding: 10px;*/ /* Khoảng cách giữa nội dung và viền của tooltip */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Đổ bóng cho tooltip */
    text-align: left;
}

    /* Định dạng tiêu đề trong tooltip */
    /*.tooltip-inner {
    white-space: pre-wrap;*/ /* Giữ khoảng trắng và xuống dòng trong nội dung */
    /*}*/

    /* Định dạng cho mũi tên của tooltip */
    .tooltip .arrow::before {
        border-top-color: #333; /* Màu của mũi tên của tooltip */
    }

    /* Định dạng khi tooltip hiển thị */
    .tooltip.show {
        opacity: 1; /* Đảm bảo tooltip có độ trong suốt đầy đủ khi hiển thị */
    }

.sp-replacer {
    border: 1px solid #bfbfbf;
    padding-left: .375rem;
    font-size: 1rem;
    /*height: 1.625rem;*/
    outline: none;
    width: 70%;
}

.custom-spectrum .sp-preview {
    height: 1rem;
    width: 96%
}

table {
    border-collapse: collapse;
    width: 100%;
}

.tableCustom th, .tableCustom td {
    border: 1.5px solid #8fb4d3;
    height: 34px;
    color: #2c4a65;
}

.tableCustom td {
    text-align: center;
    font-size: 0.85rem;
    /*padding-right: 10px;*/
}
    /*.tableCustom tbody th, .tableCustom td {
    border-left: none;
    border-right: none;
}*/
    .tableCustom tbody th:first-child, .tableCustom td:first-child {
        border-left: 1.5px solid #8fb4d3;
    }

    .tableCustom tbody th:last-child, .tableCustom td:last-child {
        border-right: 1.5px solid #8fb4d3;
    }

th::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    /*height: 100%;*/
    cursor: ew-resize;
}

.customTable th:last-child, .customTable td:last-child {
    width: 200px;
}
/*thead th:hover {
    background-color: #F0F0F0 !important;
    cursor: pointer;
}*/
.tableCustom tr:nth-child(even) {
    background-color: rgb(166, 191, 212, 0.3);
}

.tableCustom tr:nth-child(odd) {
    background-color: #ffffff;
}

.tableCustom thead th:hover, .tableCSharp th:hover {
    background-color: #fffadf !important;
    cursor: pointer;
    color: #4f667a;
}

th:last-child, td:last-child {
    min-width: 50px;
}

.tableCustom th {
    border-top: 2px solid #8fb4d3;
    background-color: rgb(166, 191, 212, 0.3);
    color: #8fb4d3;
    font-weight: 600;
    font-size: 0.875rem;
}

.tableCustom {
    border-right: 2px solid #8fb4d3;
}

.tabMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 70px;*/
    background-color: #e4ecf2;
}

.tab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    padding: 5px
}

    .tab:hover {
        cursor: pointer
    }

    .tab.active {
        /*color: #ed7e07;*/
        background-color: white;
    }

.tabContent {
    padding: 10px 40px;
    font-size: 1rem;
}

.content {
    display: none;
}

    .content.active {
        display: block;
    }

.lv2 div {
    min-height: 2rem
}

.inputCustum:disabled {
    background-color: #111418 !important;
    opacity: 0.4;
    color: white !important;
}
.inputCustumBlackInputV2:disabled {
    background-color: #111418 !important;
    opacity: 0.4;
    color: white !important;
}
.inputDisableNew:disabled {
    background-color: #111418 !important;
    opacity: 0.4;
    color: black !important;
}

.styleBtnDelete {
    background: none;
    border: none;
}

.style-btn-grid {
    background: none;
    border: none;
}

.custumTextarea {
    width: 100%;
}

.inputCustumTB {
    width: 100%
}

.styleTextI {
    color: gray !important;
    font-style: italic;
}

td {
    vertical-align: middle;
}

.col-1 {
    padding-right: 0;
}

.toggle-label {
    position: relative;
    display: block;
    width: 60px;
    height: 1.8rem;
    border: 1px solid #376682;
    border-radius: 15px;
    cursor: pointer
}

    .toggle-label input[type=checkbox] {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

        .toggle-label input[type=checkbox] + .back {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #cccccc;
            transition: background 150ms linear;
            border-radius: 15px;
        }

        .toggle-label input[type=checkbox]:checked + .back {
            background: #cccccc;
        }

        .toggle-label input[type=checkbox] + .back .toggle {
            display: block;
            position: absolute;
            content: ' ';
            background: #5496cd;
            width: 50%;
            height: 100%;
            transition: margin 150ms linear;
            border: 1px solid #418ac7;
            border-radius: 15px;
            /*opacity: 1;*/
        }

        .toggle-label input[type=checkbox]:checked + .back .toggle {
            margin-left: 29px;
        }

    .toggle-label .label {
        display: block;
        position: absolute;
        width: 50%;
        text-align: center;
    }

        .toggle-label .label.on {
            left: 0px;
            top: 3px
        }

        .toggle-label .label.off {
            right: 0px;
            top: 3px
        }

disabled {
    background-color: #111418;
    opacity: 0.4;
    color: white;
}

.cursor-pointer {
    cursor: pointer
}

.d-none {
    display: none;
}

.opacity-hidden {
    opacity: 0;
    transition: opacity 0.5s;
}

.opacity-visible {
    opacity: 1;
    transition: opacity 0.5s;
}

.navbar-nav li a.active {
    background: #5496cd !important;
    color: white !important;
    font-weight: 600 !important;
}

button[data-bs-toggle="collapse"].active {
    background: red !important;
}

.inputCustumUpFile {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0;
    margin: 0;
    width: 100%;
    border: 1px solid #8fb4d3;
    height: 1.625rem;
    background: none;
    border-radius: 10px;
}

.btnUpfileRR {
    background-color: #5496cd;
    color: white;
    /*border: 1px solid #bfbfbf;*/
    height: 24px;
    padding: 5px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px 0 0 10px;
    border-right: 1px solid #8fb4d3;
}

.custumButtonPGUpFile {
    font-weight: 500;
}

.hidden-input {
    display: none;
}

.datepicker table {
    width: 100%;
    table-layout: fixed;
}

.datepicker td, .datepicker th {
    text-align: center;
    font-size: 1rem;
    /*font-weight: 400;*/
    color: #305A80;
    padding: 0;
    width: 14.28%
}

.datepicker .day:hover, .datepicker .day.focused {
    background: #b2b2b2 !important;
    color: white !important;
    border-radius: 0 !important;
    cursor: pointer;
}

.datepicker .active {
    background-color: #337ab7;
    color: white;
    opacity: 1 !important;
}

.datepicker .today {
    background: #5496cd !important;
    color: white !important;
    border-radius: 0 !important;
}

    .datepicker .today:hover {
        opacity: 1 !important;
    }

.datepicker .prev, .datepicker .next {
    color: #337ab7;
    font-weight: bold;
}

    .datepicker .prev:hover, .datepicker .next:hover {
        background-color: #b2b2b2 !important;
        border-radius: 0 !important;
        color: #23527c;
    }

.datepicker th:hover {
    background-color: #b2b2b2 !important;
    border-radius: 0 !important;
    color: white !important;
}

.datepicker table tr td span.focused {
    background-color: #5496cd !important;
    border-radius: 0 !important;
    color: black;
}

.datepicker table tr td span:hover {
    background-color: #b2b2b2 !important;
    border-radius: 0 !important;
    color: white !important;
}

.datepicker table tr td span.active {
    background: #5496cd !important;
}

.datepicker table tr td.active.active {
    background: #cccccc !important;
    color: black;
    font-weight: bold;
    border-radius: 0 !important;
}
/*.form-control:focus {
    border-radius: 0 !important;
    box-shadow: none;
    border: 1px solid #DADBE3 !important;*/
/*background-image: url(/img/icon/icons8-calender-64.png) !important;*/
/*background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 17px !important;
}*/
#video-container {
    display: flex;
    flex-wrap: wrap;
}

    #video-container a {
        text-decoration: none;
        color: inherit;
        margin: 0 0.5rem 0.5rem 0;
        position: relative;
    }

    #video-container img {
        display: block;
        border-radius: 0.25rem;
        height: 11rem;
        width: 22.5rem;
        border: 1px solid white;
    }

    #video-container p {
        text-align: center;
        padding-top: 0.5625rem !important;
        width: 100%;
        text-align: start;
        padding: 0 1rem;
        background-color: rgba(41, 76, 106, 0.85);
        height: 4.125rem;
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        color: white;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-left: 1px solid white;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
    }

.div-control button {
    width: 100% !important
}

.customH {
    transform: translate(0px, -30px) !important;
    border: 1px solid #bfbfbf
}

.shadow {
    background: white;
}
/*#calendar-container {
    background:white;
}*/
.toggle-btn {
    position: absolute;
    text-align: right;
    z-index: 100 !important;
    margin-left: -40px;
    margin-top: calc(1rem + 2px);
    cursor: pointer;
}

.page-link:disabled {
    background: gray !important;
    color: white;
    border: 1px solid gray;
}

.page-item.active {
    border: none;
    background: none;
    z-index: 1;
}

    .page-item.active .page-link:disabled {
        background-color: rgb(166, 191, 212, 0.3) !important;
        font-weight: 700;
        border: 1px solid #8fb4d3;
        opacity: 1;
        border-radius: 50px;
        color: #8fb4d3;
    }

.page-link:hover {
    background-color: #fffadf;
    color: #4f667a;
    font-weight: 600;
}

.page-link {
    border: 1.5px solid #ddd;
    color: black;
    font-weight: 600;
}

.pagination {
    gap: 3px;
}

.page-link:focus {
    box-shadow: unset;
}

#dateCalendarCT {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 10px;
    font-size: 1rem;
    background-image: url(/img/icon/icons8-tear-off-calendar-50W.png) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center;
    background-size: 17px !important;
    background: #2c4a65;
    background-size: cover !important;
    border: none
}
.dropdown-input.w-100.inputCustumHD {
    color:white;
}
.dropdown-input.w-100.inputCustumBlackInput {
    color: black;
}


.form-control.inputCustumHD {
    color: #cae4fb;
}

.form-control.dateChooseCalendar {
    padding: 5px 21px !important;
    background-image: url(/img/icon/icons8-tear-off-calendar-WhiteTheme-50W.png);
    background-repeat: no-repeat !important;
    background-size: 34px !important;
    background: #2c4a65;
    border: none
}

    .form-control.dateChooseCalendar:focus {
        padding: 5px 21px !important;
        background-image: url(/img/icon/icons8-tear-off-calendar-WhiteTheme-50W.png) !important ;
        background-repeat: no-repeat !important;
        background-size: 34px !important;
        background: #2c4a65;
        border: none !important
    }

.style-user-setting .modal-content {
    border-radius: 10px !important
}

.style-user-setting .modal-header .styleTextTT {
    color: white !important
}

.style-user-setting .modal-body {
    /*background-color: #3f5161;*/
}

.style-user-setting .modal-header {
    background-color: #374d61;
}

.btnTicketManager {
    width: 12rem !important
}

    .btnTicketManager.active {
        background-color: #2c4a65;
    }

.dropdownDS {
    position: relative;
    display: inline-block;
}

    .dropdownDS button {
        border: none;
        background: none;
        /*display: flex;
    justify-content: center;
    align-items: center;*/
        padding: 0;
    }

.dropdown-menuDS {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    border-top: 1px solid #bfbfbf;
    transform: translate(4px,-1px) !important;
    z-index: 10;
    width: 6.25rem;
    background-color: white;
    border-radius: 0.25rem;
    overflow: visible;
}

.dropdownDS:hover .dropdown-menuDS {
    display: block;
}

.dropdown-item-customDS span {
    color: black;
}
/*.btnAdaptFilter:hover {

}*/
.adaptFilterCss .modal-body {
    padding-left: 0;
    padding-right: 0;
}
/*.contentDGAuto .containerDemoDR, .contentDGAuto .resizable {
    padding: 0
}*/
.namePageDG {
    border: none;
    font-size: 2rem;
    font-weight: 500;
}

.btnCheckDis:disabled {
    background-color: gray !important;
    cursor: not-allowed;
    color: white;
    border: none;
}

button:disabled {
    background-color: gray;
    cursor: not-allowed;
    color: white;
    border: none;
}

.hoverTrTable:hover {
    background-color: #fffadf !important;
    cursor: pointer;
}

.styleSAPTableTr {
    font-size: 0.875rem;
    font-weight: normal;
}

.starFavourite {
    position: absolute;
    bottom: -25px;
    left: 125px;
    font-size: 20px;
    /*   z-index:1;*/
}

.startSapOnline {
    position: absolute;
    bottom: -25px;
    right: 0px;
    font-size: 20px;
    /*    z-index: 1;*/
}
/*.starFavourite:hover, .startSapOnline:hover {
    color: gold !important;
}*/

.btnInTable {
    border: 1px solid #5496CD;
    border-radius: 100%;
    padding: 0;
    width: 30px;
    height: 30px;
}

    .btnInTable:hover {
        background-color: #d4d4d4b8;
    }

.dropdown-item-customDS:hover {
    background-color: #5496cd !important;
    border-radius: 0.25rem;
    cursor: pointer;
}

    .dropdown-item-customDS:hover .styleListPG {
        color: white !important;
        font-weight: 600 !important;
    }

.changeBtnFix:hover {
    border: none !important;
    background-color: #5496cd !important;
    color: white;
    border-radius: 10px;

}

.dropFix {
    transform: translate(0px, 25px) !important;
    border: 1px solid #8fb4d3;
}

.auto-expand {
    width: auto;
    min-width: 100%;
    max-width: 100%;
    box-sizing: content-box;
    overflow: hidden;
}

.changePointer .attachmentObject .file-select {
    display: none;
}

.modalCpn .inputSearchTop .inputCustumHD, .modalCpn #navbarInHisQuery .inputCustumHD {
    color: #cae4fb ;
}

.circle {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.percent {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(55, 77, 97);
    color: white;
    font-weight: 600;
}

.btnViewPage:hover + .btnDelete {
    display: inline-block !important;
}

.tree-sign {
    padding-left: 21px;
}

.tree-sign-vertical {
    border-left: 1px solid #bfbfbf;
    height: 92%;
    width: 1px;
    position: absolute;
    background-color: black;
    bottom: 20px;
}

.tree-sign-horizontal {
    border-bottom: 1px solid #bfbfbf;
    width: 50%;
    height: 80%;
    position: absolute;
    bottom: 50%;
}

.icon-sort-equal {
    width: 17px;
    height: 17px;
    display: inline-block;
    background: none;
}

    .icon-sort-equal svg {
        fill: currentColor;
    }

.list-search-container {
    height: 60vh;
    overflow-y: scroll;
}

.resizer {
    display: inline-block;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.trm-resizer:hover::after {
    content: "";
    position: absolute;
    top: -1000px;
    bottom: -1000px;
    left: 50%;
    transform: translateX(50%);
    width: 2px;
    background: rgba(144, 186, 236, 0.7);
    z-index: 20;
    pointer-events: none;
}

th {
    position: relative;
}

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

.truncate-span {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.flatpickr-input::placeholder {
    font-style: normal;
    color: #ffffff;
}

/* user selection */
.user-selection-header-container {
    background-color: #D4D7D7;
    height: 15%;
    padding-top: 20px;
}

.user-selection-left-side, .user-selection-right-side {
    height: 70vh;
}

.user-selection-left-container, .user-line-container {
    height: 90%;
    overflow: scroll;
}

.user-selection-search, .user-search {
    margin-bottom: 15px;
}

.department-item {
    display: flex;
    /*margin-bottom: 10px;*/
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .department-item:hover {
        background-color: #D4D7D7;
        cursor: pointer;
    }

    .department-item.active {
        background-color: #5496cd;
        color: white;
    }

.user-selection-header {
    min-height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

    .user-selection-header h3 {
        margin: 0;
    }

.user-selection-nav-menu {
    padding: 0 20px;
}

.nav-item {
    min-width: 25%;
}

    .nav-item button {
        border-radius: 0px;
        min-width: 100%;
    }

.user-line:hover {
    background-color: #D4D7D7;
    cursor: pointer;
}

.user-line input {
    margin-right: 10px;
}

/* ---------------- Adapt Filter -----------------------*/
.adapt-filter-nav-menu {
    padding-right: 20px;
}

.custom-dropdown-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #495057;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative;
    min-height: 38px;
}

    .custom-dropdown-button::after {
        content: "" !important;
        display: inline-block;
        width: 1em;
        height: 1em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 12px;
        position: absolute;
        right: 0.75rem;
        pointer-events: none;
        border: none;
    }

.query-tab-header {
    color: rgba(0, 0, 0, 0.55);
    font-weight: 600;
    font-size: 0.9rem;
}

.custom-date-btn {
    min-height: 38px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0.375rem 0.98rem;
    cursor: pointer;
    border: 1px solid #008ad4;
    animation: focus-shadow-with-border-pulse 4s ease-in-out infinite;
}

@keyframes focus-shadow-with-border-pulse {
    0% {
        box-shadow: 0 0 0 3px rgba(0,120,212,.23),0 0 0 1px rgba(0,120,212,1);
        box-shadow: 0 0 0 3px var(--focus-pulse-max-color,rgba(0, 120, 212, .23)),0 0 0 1px var(--focus-border-color,rgba(0, 120, 212, 1))
    }

    50% {
        box-shadow: 0 0 0 3px rgba(0,120,212,.15),0 0 0 1px rgba(0,120,212,1);
        box-shadow: 0 0 0 3px var(--focus-pulse-min-color,rgba(0, 120, 212, .15)),0 0 0 1px var(--focus-border-color,rgba(0, 120, 212, 1))
    }

    100% {
        box-shadow: 0 0 0 3px rgba(0,120,212,.23),0 0 0 1px rgba(0,120,212,1);
        box-shadow: 0 0 0 3px var(--focus-pulse-max-color,rgba(0, 120, 212, .23)),0 0 0 1px var(--focus-border-color,rgba(0, 120, 212, 1))
    }
}

.custom-date-btn:hover {
    background-color: #f8f9fa;
}

.adapt-user-selection-btn {
    min-height: 38px;
    cursor: pointer;
}

    .adapt-user-selection-btn span {
        width: 95%;
    }

.horizontal-line {
    width: 100%;
    height: 1px;
    background-color: #ced4da;
}

.adapt-user-selection-content {
    width: 90%;
}

.filter-field-dropdown {
    max-height: 400px;
    overflow-y: auto;
}

.sticky-search {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.filter-multi-select {
    height: 38px;
    display: flex;
    justify-content: start;
    align-items: center;
}

    .filter-multi-select ul li {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 150px;
    }

.filter-multi-select-dropdown {
    z-index: 20000 !important;
}
/*.custom-dropdown-button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}*/
@media print {
    .navbar.fixed-top {
        display: none !important;
    }

    #hidePrint {
        display: none !important;
    }

    .openFullScreen.contentHomePG.scrollJS {
        display: block !important;
    }
}

#datepicker {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ----------- Questionaries -------------- */
.move-btn-container {
    width: 100px;
}

.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

#itemSlider {
    width: 100%;
    padding: 0;
    border: 0;
}

.range-labels {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

    .range-labels span {
        font-size: 0.8rem;
    }



.nav-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.nav-content {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    flex: 1;
    padding: 10px 0;
}

    .nav-content::-webkit-scrollbar {
        display: none;
    }

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-59%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 20px;
    z-index: 10;
}

.left-arrow {
    left: 0;
}

.right-arrow {
    right: 0;
}

#imageContainer {
    position: relative;
}

#zoomableImg {
    width: 100%;
    height: auto;
    cursor: crosshair;
}

.zoomed-container {
    position: absolute;
    top: 35%;
    left: 102%;
    width: 350px;
    height: 350px;
    overflow: hidden;
    border: 1px solid #000000;
    display: none;
    background-color: white;
}

.zoomed-img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 475%;
    height: auto;
    transform: scale(1);
    transition: transform 0.1s ease;
    padding: 120px;
}

#zoomedImg {
    width: 100%;
    height: auto;
}

/*.fc-event-time, .fc-list-event-time, .fc-daygrid-event-dot {
    display: none
}*/
.fc-event-time, .fc-list-event-time {
    display: none
}

.fc-event-title.fc-sticky, .fc-event-title {
    padding-left: 10px !important
}

.fc .fc-list-sticky .fc-list-day > * {
    z-index: 1 !important;
}

.fc-event-title.fc-sticky {
    font-weight: 700
}

.addTextDot {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.themeCss {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #8fb4d3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}

.defaultTheme {
    background-color: #2c4a65;
}

.darkTheme {
    background-color: #000000;
}

.whiteTheme {
    background-color: #ffffff;
}

.styleListPG {
    background: rgb(166, 191, 212, 0.3);
    border-bottom: 1px solid #8fb4d3;
    height: 5rem;
    padding: 1rem;
    color: #8fb4d3;
    font-weight: 600
}

.styleModalTotal {
    border: 1px solid #8fb4d3;
    height: 536px;
    border-top: 2px solid #8fb4d3;
    border-right: 2px solid #8fb4d3
}

.styleModalItemList {
    width: 30%;
    border-right: 1px solid #8fb4d3
}

.styleTitleOptionSetUser {
    font-size: 1.375rem;
    color: #8fb4d3;
    font-weight: 600
}

.contentOverSetUser {
    color: black;
}

.headerStickerItem {
    border-bottom: 1px solid #DADBE3;
    height: 45px;
    background-color: #2c4a65;
    padding: 0 20px
}

.btnAddNoteRes {
    background-color: #374d61;
    border-radius: 10px !important;
}
.btn-secondary {   
    border-radius: 10px !important;
}
.inputCustum {
    color: black;
    border-radius: 10px !important;
    width: 100%;
}
    .inputCustum:hover {
        border-color: #4da6ff !important; /* Viền xanh biển nhạt */
    }

/* Khi đang nhập (focus) */
    .inputCustum:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
        outline: none;
    }

.inputCustumV2 {
    color: black !important;
    border-radius: 10px !important;
    width: 100%;
}

    .inputCustumV2:hover {
        border-color: #4da6ff !important; /* Viền xanh biển nhạt */
    }

    /* Khi đang nhập (focus) */
    .inputCustumV2:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
        outline: none;
    }


.inputCustumOvertime {
    color: black;
    border-radius: 10px !important;
    width: 100%;
    border-color: #ced4da !important;
}

.inputCustumBlackInput {
    border: 1px solid #8fb4d3;
    background: none;
    padding-left: .375rem;
    font-size: 1rem;
    height: 1.625rem;
    outline: none;
    border-radius: 10px;
    color: black !important;
    /*color: black;*/

}
    .inputCustumBlackInput:hover {
        border-color: #4da6ff !important; /* Viền xanh biển nhạt */
    }

/* Khi đang nhập (focus) */
    .inputCustumBlackInput:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
        outline: none;
    }

.inputCustumBlackInputV2 {
    border: 1px solid #8fb4d3;
    background: none;
    padding-left: .375rem;
    font-size: 1rem;
    height: 1.625rem;
    outline: none;
    border-radius: 10px;
    color: black !important;
    /*color: black;*/
}

    .inputCustumBlackInputV2:hover {
        border-color: #4da6ff !important; /* Viền xanh biển nhạt */
    }

    /* Khi đang nhập (focus) */
    .inputCustumBlackInputV2:focus {
        border: 2px solid !important;
        border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
        outline: none;
    }


.inputCustumCostCalculation {
    color: white;
}
    .inputCustumCostCalculation:hover {
        border-color: #4da6ff !important; /* Viền xanh biển nhạt */
    }

/* Khi đang nhập (focus) */
.inputCustumCostCalculation:focus {
    border: 2px solid !important;
    border-color: #0080ff !important; /* Viền xanh biển đậm hơn */
    outline: none;
}
.styleNavBarAddNote {
    background-color: #374d61
}

.styleTitleAddNoteDetail {
    color: #000
}

.styleCancelModal {
    color: #cae4fb
}

.styleHeaderPageLayout {
    background-color: #374d61
}

.styleContentPageLayout {
}

.searchNav {
    border: 1px solid #bfbfbf
}

.styleItemNarBarLi {
    border-bottom: 1px solid #e5e5e5
}

.styleItemNarBar {
    color: #333;
}

.styleAItemHPage {
    color: #212529
}

.styleDivItemHPage {
    background-color: white;
    border-radius: 20px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent; 
}

    .styleDivItemHPage:hover {
        border: 1px solid #3b82f6 ; 
    }

.nav-arrow.right-arrow.disabled, .nav-arrow.left-arrow.disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.custom-scroll {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

    .custom-scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }

.inputCustumHD.text-truncate {
    background-color: white;
}

.dropdown-toggle::after, .dropdown-toggle {
    all: unset
}

td.verTop {
    vertical-align: top;
}

.listObEI.nav-link.active {
    border-radius: 0;
    font-weight: 600
}

.listObEI.nav-link:hover {
    background-color: #fffadf;
}

.listObEI.nav-link {
    background-color: #d4d7d7;
    color: black;
    border-radius: 0;
}



.customToggleSwitch {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.customToggleSwitch + label {
    cursor: pointer;
    width: 40px;
    height: 20px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
    transition: background 0.5s;
}

.customToggleSwitch + label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 90px;
    transition: left 0.5s, transform 0.5s;
}

.customToggleSwitch:checked + label {
    background: #418ac7;
}

.customToggleSwitch:checked + label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.customToggleSwitch + label:active:after {
    width: 10px;
}

.placeholder-text {
    color: #999;
    font-style: italic; 
}
#SettingLink .resIconItem {
    width: 70px !important;
    height: 70px !important;
}

.table-row-fixed td {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: max-width 0.3s ease, white-space 0.3s ease;
}

.table-row-fixed:hover td {
    max-width: none;
    white-space: normal;
}

.no-template-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border: 1px dashed #c9ccd1;
    border-radius: 10px;
    margin: 10px 0;
}
.small-header-E_Office {
    color: #ddd;
    font-size: .875rem;
    font-weight: normal
}
.no-template-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #495057;
    opacity: 0.9;
}

.input-inside-table {
    padding-block: 2px;
    max-height: 26px;
    border: .0625rem solid #bfbfbf;
    background: transparent;
    color: black !important;
}
.title-page-header {
    color: white;
    font-size: 1.125rem;
    line-height: 2.875rem;
    padding: 0;
    height: 2.75rem
}
/* v2 switch styles: configurable height and blue/silver states */
.toggle-label.v2-switch {
    position: relative;
    display: inline-block;
    width: calc(var(--switch-height,1.8rem) *2);
    height: var(--switch-height,1.8rem);
    border: 1px solid transparent;
    border-radius: calc(var(--switch-height,1.8rem) /2);
    cursor: pointer;
}

.toggle-label.v2-switch input[type=checkbox] {
    opacity:0;
    position: absolute;
    width:100%;
    height:100%;
    margin:0;
}

.toggle-label.v2-switch input[type=checkbox] + .back {
    position: absolute;
    inset:0;
    background: silver; /* off state */
    transition: background 150ms linear;
    border-radius: inherit;
}

.toggle-label.v2-switch input[type=checkbox] + .back.on {
    background: #91BEE3; /* blue when on */
}

.toggle-label.v2-switch input[type=checkbox] + .back.off {
    background: silver; /* silver when off */
}

.toggle-label.v2-switch input[type=checkbox] + .back .toggle {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--switch-height,1.8rem);
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: calc(var(--switch-height,1.8rem) /2);
    transition: transform 150ms linear;
    margin-left: 0 !important; /* override legacy rule */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* move knob to the right when on */
.toggle-label.v2-switch input[type=checkbox] + .back.on .toggle {
    transform: translateX(100%);
}

/* labels positioning for v2 to align vertically */
.toggle-label.v2-switch .label {
    display: block;
    position: absolute;
    width:50%;
    text-align: center;
    line-height: var(--switch-height,1.8rem);
}

.toggle-label.v2-switch .label.on { left:0; top:0; color: #ffffff; }
.toggle-label.v2-switch .label.off { right:0; top:0; color: #1f1f1f; }

.label-table-cell {
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.intellisense-container-v2.show {
    display: flex;
}

.intellisense-container-v2 {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.intellisense-list-v2 {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #666;
    border-radius: 5px;
    background-color: #fff;
}

.intellisense-item-v2 {
    padding: 6px 10px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
}

.intellisense-item-v2.active {
    background-color: #e6f3ff;
}

.intellisense-item-v2:hover {
    background-color: #e6f3ff;
}

.intellisense-description-v2 {
    min-height: 40px;
    background: #f4f4f4;
    border-radius: 5px;
    padding: 8px;
    font-size: 0.9rem;
}

.intellisense-actions-v2 {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.tableCustom {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;  
}

    .tableCustom thead {
        position: sticky;
        top: 0 ;
        z-index: 1;
    }

    .tableCustom tfoot {
        position: sticky;
        bottom: 0 ;
        z-index: 1;
    }

label[for] {
    user-select: none;
}
.tableCSharp--redesign .styleInTable--redesign,
.tableCSharp--redesign th.styleInTable--redesign {
    background-color: #dde8f0 !important;
    padding: 10px 14px !important;
    height: auto !important;
    color: #3a6186 !important;
    font-weight: 700 !important;
    border: none !important;
    border-right: 1px solid rgba(168, 179, 187, 0.3) !important;
    line-height: normal !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;

}
table.tableCSharp--redesign {
    box-shadow: 0 4px 16px rgba(58, 97, 134, 0.15);
}

.tableCSharp--redesign tr.tableCustumCL--redesign {
    background: #dde8f0 !important;
}

.tableCSharp--redesign tr.tableCustumR:nth-child(odd) td,
.tableCSharp--redesign tr.tableCustumR:nth-child(even) td {
    background-color: #fafafa !important;
    border-bottom: 1px solid rgba(168, 179, 187, 0.2) !important;
    border-right: 1px solid rgba(168, 179, 187, 0.15) !important;
    border-top: none !important;
    border-left: none !important;
    padding: 8px 14px !important;
    vertical-align: middle !important;
    color: #29343a !important;
}

.tableCSharp--redesign tr.tableCustumR td:last-child {
    border-right: none !important;
}

.tableCSharp--redesign tbody tr.tableCustumR:last-child td {
    border-bottom: none !important;
}

.tableCSharp--redesign tr.tableCustumR:hover td {
    background-color: #f4f8fc !important;
}

.richTextObject--redesign .ql-toolbar.ql-snow {
    background-color: #dde8f0 !important;
    border-color: rgba(168, 179, 187, 0.4) !important;
    border-radius: 8px 8px 0 0 !important;
}

@font-face {
    font-family: 'SAP-icons';
    src: url('/fonts/SAP-icons.woff2') format('woff2');
}

.sap-icon::before {
    font-family: 'SAP-icons';
    font-style: normal;
}

.sap-icon-sales-order::before {
    content: '\xe0c3';
}

.font-family-sap {
    font-family: "72-Light", "72-Lightfull", "72", "72full", Arial, Helvetica, sans-serif;
}
input.sap_input::placeholder {
    color: gray !important;
}
input.sap-search-input::placeholder {
    color: gray !important;
}
.adaptFilterSAPCss{
    border-radius:10px;
}
.profit-segment--positive {
    background-color: #22c55e;
}

.profit-segment--negative {
    background-color: #ef4444;
}


/* ✅ Page Title */
.page-title {
    text-align: center;
    padding: 24px 16px 8px;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
    margin-bottom: 16px;
}

    .page-title h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-primary, #0f4c75);
        letter-spacing: 0.01em;
    }

/* ✅ Ship Table */
.ship-selection-section {
    margin: 0 0 20px 0;
}

.ship-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .ship-table thead tr {
        background-color: #1e3a5f;
        color: #fff;
    }

    .ship-table th {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
    }

.ship-row {
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.15s;
}

    .ship-row:hover {
        background-color: #f0f7ff;
    }

.ship-row--active {
    background-color: #dbeafe !important;
    border-left: 4px solid #2563eb;
}

.ship-table td {
    padding: 10px 12px;
}

.ship-name {
    font-weight: 600;
    color: #1e3a5f;
}

.ship-input {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85rem;
}

.ship-status {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status--active {
    background: #dbeafe;
    color: #1d4ed8;
}

.status--idle {
    background: #f3f4f6;
    color: #6b7280;
}

/* ✅ Selected ship badge in left panel */
.selected-ship-badge {
    background: #1e3a5f;
    color: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}
.ship-selection-section {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(55, 85, 195, 0.08);
    border: 1px solid var(--surface-variant);
    overflow: hidden; /* quan trọng: giữ bo góc cho thead */
}

.ship-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    table-layout: fixed;
}

    .ship-table thead {
        background: #1e3a5f;
    }

        /* Bo góc trên cho ô đầu và cuối của thead */
        .ship-table thead tr th:first-child {
            border-radius: 0.75rem 0 0 0;
        }

        .ship-table thead tr th:last-child {
            border-radius: 0 0.75rem 0 0;
        }

    .ship-table tbody {
        background: white;
    }

    .ship-table td {
        padding: 0.65rem 0.75rem;
        border-bottom: 1px solid var(--surface-variant);
        color: var(--on-surface);
        vertical-align: middle;
        background: white;
    }

    /* Bỏ border dòng cuối */
    .ship-table tbody tr:last-child td {
        border-bottom: none;
    }





.jev2-full-span .sap_label {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.jev2-full-span .sap_textarea {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 2rem;
    background: #eff4ff;
    border: none;
    box-shadow: 0 0 0 1px #81b5f633;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: #00345e;
    font-family: inherit;
    resize: none;
}

.jev2-full-span .sap_textarea {
    field-sizing: content;
    min-height: 2rem;
    max-height: 300px; /* giới hạn tối đa nếu muốn */
    resize: none;
}
.table-modern thead {
    z-index: 1;
}

/* WOColumnColorRuleModal, WOColumnMappingModal, WOVirtualColumnModal, WOColumnTextStyleModal, and
   EntryFieldMappingModal are child modals opened from a picker/settings modal and should appear
   beside it rather than stacked on top/centered. A matching rule written in that modal's own
   ComponentName.razor.css would never actually apply: the modal's markup (id="...", .modal-dialog,
   etc.) is rendered by ModalCpn -- a separate component -- so it never carries the opening
   component's CSS-isolation scope attribute. These plain global rules are the ones that actually
   take effect; don't add an isolated copy back in one of those .razor.css files, it'll be dead
   code. */
.woColumnColorRuleModal .modal-dialog,
.woColumnMappingModal .modal-dialog,
.woVirtualColumnModal .modal-dialog,
.woColumnTextStyleModal .modal-dialog,
.entryFieldMappingModal .modal-dialog,
.createUDFModal .modal-dialog,
.woColumnConditionDefaultValueModal .modal-dialog,
.woColumnBarModal .modal-dialog,
.woColumnPopoverModal .modal-dialog,
.woColumnIconRuleModal .modal-dialog {
    position: fixed;
    top: 1.75rem;
    left: calc(50% + 326px);
    margin: 0;
    max-height: calc(100vh - 3.5rem);
}

.woColumnColorRuleModal .modal-body,
.woColumnMappingModal .modal-body,
.woVirtualColumnModal .modal-body,
.woColumnTextStyleModal .modal-dialog,
.entryFieldMappingModal .modal-body,
.createUDFModal .modal-body,
.woColumnConditionDefaultValueModal .modal-body,
.woColumnBarModal .modal-body,
.woColumnPopoverModal .modal-body,
.woColumnIconRuleModal .modal-body {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

/* WOColumnColorRuleModal and CreateUDFModal specifically pair with AdaptFilterModalSAP, which can
   be up to 90vw wide - the shared "50% + 326px" offset above (tuned for narrower pickers like
   ColumnPickerModal, 640px wide) isn't enough to clear it, so the child modal ends up rendering on
   top of/inside the picker instead of beside it. Anchor to the viewport's right edge instead, which
   clears any picker width, and add a stronger shadow/accent border so it clearly reads as a
   floating layer above whatever's behind it. */
.woColumnColorRuleModal .modal-dialog,
.createUDFModal .modal-dialog {
    left: auto;
    right: 1.75rem;
}

.woColumnColorRuleModal .modal-content,
.createUDFModal .modal-content {
    border-radius: 0.75rem;
    border-top: 4px solid #004ac6;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Vanilla Bootstrap doesn't support opening a second modal while a first one is still open: every
   .modal (z-index:1055) and every .modal-backdrop (z-index:1050) share the same value, so which
   one paints on top is left to DOM/paint order for equal z-index, which isn't reliable here (each
   modal's wrapper gets moved to <body> independently -- see blazorHelper.moveToBody -- and
   Bootstrap appends a brand new backdrop per modal instance rather than reusing one). In practice
   that means the child editor above can render behind the picker it was opened from, and a click
   meant for the child ends up hitting the picker's backdrop and closing the picker instead.
   Give the child modal itself an explicit z-index above the picker's 1055, and the SECOND
   .modal-backdrop.show (the one belonging to whichever child editor is currently open, since the
   picker's own backdrop is always inserted first) a z-index BELOW the picker's modal (but still
   above the picker's own backdrop) -- this app never stacks more than picker + one child editor
   at a time, so targeting "the second backdrop" like this is enough; it isn't a general N-deep
   stacking fix. Keeping the second backdrop under the picker's modal (rather than over it) is
   deliberate: the picker stays fully lit instead of getting dimmed by the child editor's backdrop,
   so the two read as simultaneously open side panels instead of one hiding behind a dark overlay.

   confirmDialogModal (BaseComponent.ShowConfirmDialog, e.g. AdaptFilterModalSAP's "Delete Virtual
   Column"/"Delete UDF" confirmations) is the same situation - it's a single app-wide singleton
   (see MainLayout's cascaded ConfirmDialogModal) opened while whatever modal triggered it is still
   showing, so it needs the same bump or it renders behind that modal and swallows the click meant
   to confirm/cancel it. */
.woColumnColorRuleModal,
.woColumnMappingModal,
.woVirtualColumnModal,
.woColumnTextStyleModal,
.entryFieldMappingModal,
.createUDFModal,
.confirmDialogModal,
.categorySetupModal,
.woColumnConditionDefaultValueModal,
.woColumnBarModal,
.woColumnPopoverModal,
.woColumnIconRuleModal,
.entryFieldVisibilityRuleModal,
.entryFieldTableQueryModal {
    z-index: 1058;
}

.modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1052;
    /* Sits between the parent modal and the child editor's dialog purely to dim the view - since
       the child editors above are click-through (see below), let clicks fall through this too,
       straight to the parent modal it's dimming. */
    pointer-events: none;
}

/* EntryFieldMappingModal's own "Test" results preview (efmTestResultModal) is one level deeper
   still (Field Settings -> Mapping -> Test), opened while entryFieldMappingModal (1058 above) is
   still showing -- needs its own bump above that tier, same reasoning as the block above. */
.efmTestResultModal {
    z-index: 1059;
}

/* Each of these child editors is a full-viewport transparent .modal wrapper (that's how Bootstrap
   centers its dialog and captures outside-clicks) sitting above the picker/settings modal it was
   opened from (see the z-index block above) - so even though only its own dialog is visible, its
   wrapper still swallows every click anywhere on screen, including over the parent modal beside/
   behind it. Making the wrapper itself click-through (dialog excluded, via the second rule) lets
   the parent stay usable - switch tabs, search, etc. - while the child editor is open on top of it.
   Safe here because every one of these is only ever opened as a child of an already-open modal (see
   their @ref="_xModal" declarations nested inside ColumnPickerModal/AdaptFilterModalSAP/
   EntryFromSettingModal/etc.), never as a standalone top-level modal. confirmDialogModal is
   deliberately left out - it can also be shown standalone (not nested from another modal) and must
   keep fully blocking the page behind it until answered. */
.woColumnColorRuleModal,
.woColumnMappingModal,
.woVirtualColumnModal,
.woColumnTextStyleModal,
.entryFieldMappingModal,
.createUDFModal,
.categorySetupModal,
.efmTestResultModal,
.woColumnConditionDefaultValueModal,
.woColumnBarModal,
.woColumnPopoverModal,
.woColumnIconRuleModal,
.entryFieldVisibilityRuleModal,
.entryFieldTableQueryModal {
    pointer-events: none;
}
.woColumnColorRuleModal .modal-dialog,
.woColumnMappingModal .modal-dialog,
.woVirtualColumnModal .modal-dialog,
.woColumnTextStyleModal .modal-dialog,
.entryFieldMappingModal .modal-dialog,
.createUDFModal .modal-dialog,
.categorySetupModal .modal-dialog,
.efmTestResultModal .modal-dialog,
.woColumnConditionDefaultValueModal .modal-dialog,
.woColumnBarModal .modal-dialog,
.woColumnPopoverModal .modal-dialog,
.woColumnIconRuleModal .modal-dialog,
.entryFieldVisibilityRuleModal .modal-dialog,
.entryFieldTableQueryModal .modal-dialog {
    pointer-events: auto;
}

/* Coloris (lib/Coloris) appends its popup (.clr-picker) straight to <body> with z-index:1000,
   outside any component's DOM subtree, so it can't be reached by scoped/isolated component CSS.
   Needs to sit above the child editor modals above (1058), which is where its trigger input lives. */
.clr-picker {
    z-index: 1060 !important;
}

/* "Save Default Setting" password re-confirmation gate - shared across every settings-picker modal
   that has an admin-only "save as the shared default" action (AdaptFilterModalSAP, ColumnPickerModal,
   EntryFromSettingModal, ...). Global (not a .razor.css scoped file) because each of those is a
   separate component - Blazor's per-component CSS isolation means a scoped copy in just one of them
   would never apply to the identical markup rendered by the others. */
.sap-confirm-password-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.sap-confirm-password-modal {
    width: 22rem;
    max-width: 90vw;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.sap-confirm-password-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #d9d9d9;
    font-weight: 600;
    color: #333;
}

.sap-confirm-password-close {
    background: none;
    border: none;
    color: #737686;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.sap-confirm-password-body {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .sap-confirm-password-body p {
        margin: 0;
        font-size: 0.8125rem;
        color: #737686;
    }

.sap-confirm-password-error {
    font-size: 0.8125rem;
    color: #d92d20;
}

.sap-confirm-password-input {
    width: 100%;
    height: 2.2rem;
}

.sap-confirm-password-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid #e5e5e5;
}