@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: calc(100% - 20px) calc(1.5rem - 4px), calc(100% - 15px) calc(1.5rem - 4px);
    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-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;
}

.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;
}