@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --ck-border-radius: 8px !important;
    --ck-color-base-border: rgb(222, 222, 222) !important;
}

.ht-theme-horizon,
.ht-theme-horizon-dark,
.ht-theme-horizon-dark-auto {
    --ht-header-active-border-color: #3182bd !important;
    --ht-header-active-background-color: #3182bd !important;
    --ht-icon-active-button-background-color: #3182bd !important;
    --ht-icon-active-button-border-color: #3182bd !important;
    --ht-wrapper-border-radius: 8px !important;
    --ht-cell-editor-border-color: #3182bd !important;
    --ht-cell-editor-shadow-color: #3182bd !important;
    --ht-cell-selection-border-color: #3182bd !important;
    --ht-cell-selection-background-color: #3182bd !important;
    --ht-cell-autofill-background-color: #3182bd !important;
    --ht-cell-mobile-handle-border-color: #3182bd !important;
    --ht-move-indicator-color: #3182bd !important;
    --ht-checkbox-focus-ring-color: #3182bd !important;
    --ht-checkbox-checked-border-color: #3182bd !important;
    --ht-checkbox-checked-background-color: #3182bd !important;
    --ht-checkbox-checked-focus-background-color: #3182bd !important;
    --ht-primary-button-background-color: #3182bd !important;
    --ht-primary-button-hover-background-color: #205f8d !important;
    --ht-primary-button-focus-background-color: #205f8d !important;
    --ht-link-color: #3182bd !important;
    --ht-input-focus-border-color: #3182bd !important;
    --ht-cell-success-background-color: rgba(49, 130, 189, .3) !important;
    --ht-cell-mobile-handle-background-color: rgba(49, 130, 189, .3) !important;
    --ht-header-filter-background-color: rgba(49, 130, 189, .3) !important;
}

.ht-wrapper {
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
}

.ck-editor {
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
}

#loading .loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}


.dd-blue {
    --dd-overlay: rgba(0, 0, 0, 0.75);
    --dd-background: #FFFFFF;
    --dd-text1: #333333;
    --dd-text2: #FFFFFF;
    --dd-primary: #3182bd;
    --dd-gradient: linear-gradient(45deg, #3182bd 0%, #3182bd 100%);
    --dd-headerBackground: linear-gradient(45deg, #3182bd 0%, #3182bd 100%);
    --dd-confirmButtonBackground: linear-gradient(45deg, #3182bd 0%, #3182bd 100%);
    --dd-radius: 0.35em;
    --dd-shadow: 0 0 2.5em rgba(0, 0, 0, 0.1);
    --dd-range: rgba(0, 0, 0, 0.05);
}

.calendar_default_main {
    --dp-calendar-border-color: #E0E0E0 !important;
    --dp-calendar-header-bg-color: #fff !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.calendar_default_event_inner {
    background: #f7f7f7 !important;
    border-color: #E0E0E0 !important;
}

body {

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    background-color: #F6F8FA;
}

.text-xs {
    font-size: 11px;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-disabled {
    cursor: not-allowed;
}

.fancybox__container {
    z-index: 10000 !important;
}

.page-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 500;
}

.page-actions .btn {
    font-size: 0.875rem;
}

.menu-wrap {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) rotate(-0.3deg);
    background-color: var(--gs-menu-background);
    z-index: 1000;
    background-color: #fff;
    padding: 5px 12px;
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    border-bottom: 1px solid #E0E0E0;
    text-align: center;
    border-radius: 8px;
}

.menu {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

.menu::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.menu>li {
    display: inline-block;
    vertical-align: middle;
    list-style: none;
    position: relative;
}

.menu>li.brand {
    font-weight: 600;
    color: #3182bd;
}

.menu>li>a {
    display: flex;
    align-items: center;
    gap: 4px;
    ;
    text-decoration: none;
    color: inherit;
    padding: 1px 5px;
}

.menu>li>ul {
    display: none;
    padding: 10px 0 0 0;
    margin: 0;
    text-align: left;
    position: fixed;
}

.menu>li:hover>ul {
    display: block;
    top: 95%;
    left: 0;
}

.menu>li:hover>ul>div {
    background: #fff;
    padding: 6px 0;
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}

.menu>li:hover>ul>div>li {
    list-style: none;
    white-space: nowrap;
}

.menu>li:hover>ul>div>li>a {
    display: block;
    color: inherit;
    text-decoration: none;
    min-width: 180px;
    padding: 4px 12px;
}

.menu>li:hover>ul>div>li>a:hover {
    background-color: #f7f7f7;
}


.menu>li:hover>ul>div>li.divider {
    height: 1px;
    padding: 0;
    margin: 2px 0;
    background-color: #EEEEEE;
}

@media (max-width: 769px) {
    .menu-wrap {
        width: 95vw;
    }
}

.header-warp {
    padding-top: 100px !important;
}

.content {
    padding: 50px 0px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    border-radius: 8px;
}

.form-control,
.form-select {
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    border-radius: 8px;
    font-size: 14px;
}

.nav-link {
    color: #3182bd;
    padding: 4px 10px;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.btn-xs {
    font-size: 12px;
}

.btn-lg {
    padding: 10px 20px;
}

.bg-primary {
    background-color: #3182bd !important;
    border-color: #3182bd !important;
}

.btn-primary {
    background-color: #3182bd !important;
    border-color: #3182bd !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #286d9e !important;
    border-color: #286d9e !important;
}

.btn-primary:disabled {
    background-color: #a0aec0;
    cursor: not-allowed;
}

.td-input {
    padding: 0 !important;
}

.td-link {
    padding: 0 !important;
}

.td-link a {
    display: block;
    text-decoration: none;
    color: initial;
    padding: .5rem .5rem;
}

.td-input .form-control,
.td-input .form-select {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.table-custom {
    margin: 0 !important;
}

.table th {
    font-weight: 400 !important;
    font-size: 12px;
    color: #666;
}

.table-print th {
    font-size: 18px !important;
}

.table td {
    color: #000;
    background-color: transparent !important;
}

.table-custom td,
.table-custom th {
    border: 1px solid #E0E0E0 !important;
    vertical-align: middle !important;
}

.table-custom tr.alert td {
    border-color: inherit !important;
    background: inherit !important;
}

.table-custom thead tr:first-child th {
    border-top: 0px !important;
}

.table-custom tfoot tr:last-child th {
    border-bottom: 0px !important;
}

.table-custom tr td:first-child,
.table-custom tr th:first-child {
    border-left: 0px !important;
}

.table-custom tr td:last-child,
.table-custom tr th:last-child {
    border-right: 0px !important;
}

.modal-dialog {
    border: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    border-radius: 8px;
}

.modal-header {
    border-bottom: 0;
    padding-bottom: 0;
}

.modal-footer {
    background: #f7f7f7;
}

.dropdown-menu {
    border: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 1px;
    border-radius: 8px;
}

.card {
    /* border-color: #E0E0E0; */
    border: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 1px;
    border-radius: 8px;
    overflow: hidden;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #E0E0E0;
    padding: 12px 20px;
    font-weight: 500;
}

.alert {
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    border-radius: 8px;
}

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    background-color: #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.avatar.avatar-sm {
    width: 18px;
    height: 18px;
    font-size: 8px;
}

.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: white;
}

.colored-toast .swal2-close {
    color: white;
}

.colored-toast .swal2-html-container {
    color: white;
}

.ts-dropdown {
    z-index: 10000000 !important;
}

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

.sortable thead th {
    position: relative;
    cursor: pointer;
    user-select: none;
    padding-right: 20px;
}

.sortable thead th:not(.no-sort)[aria-sort=ascending]::after {
    color: inherit;
    font-family: "hgi-stroke-rounded";
    content: "㮆";
}

.sortable thead th:not(.no-sort)[aria-sort=descending]::after {
    color: inherit;
    font-family: "hgi-stroke-rounded";
    content: "㭚";
}

.sortable thead th:not(.no-sort)::after {
    margin-left: 3px;
    font-family: "hgi-stroke-rounded";
    content: "㭹";
}

.sortable thead th:not(.no-sort)::after,
.sortable thead th:not(.no-sort)::before {
    position: absolute;
    right: 8px;
    top: 10px;
    transition: color .1s ease-in-out;
    font-size: 10px;
    color: rgba(0, 0, 0, 0);
}

.dropselect {
    background: #fff;
    border-radius: 8px;
    position: absolute;
    z-index: 1050;
    min-width: 150px;
    display: none;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 8px;
}

.dropselect-title {
    padding: 8px 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dropselect-content {
    padding: 8px 11px;
    max-height: 300px;
    overflow-y: auto;
}

.dropselect-item {
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
}

.dropselect-item:hover,
.dropselect-item.selected {
    background-color: rgba(0, 0, 0, 0.05);
}

.status-pill {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

td.active {
    box-shadow: inset 0 0 0 2px rgba(49, 130, 189, 1);
}

.vis-timeline {
    border: 0 !important;
}

.vis-timeline-red {
    --tw-bg-opacity: 1;
    background-color: rgb(252 165 165 / var(--tw-bg-opacity)) !important;
    border-color: rgb(255, 138, 138) !important;
}

.vis-timeline-gray {
    --tw-bg-opacity: 1;
    background-color: rgb(222 222 222 / var(--tw-bg-opacity)) !important;
    border-color: rgb(210 210 210 / var(--tw-bg-opacity)) !important;
}

.task-icon-stop {
    cursor: pointer;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0436 3.25C13.6463 3.24999 14.9086 3.24998 15.913 3.35586C16.9399 3.4641 17.7833 3.68971 18.5113 4.19945C19.0129 4.55072 19.4493 4.98706 19.8005 5.48872C20.3103 6.21671 20.5359 7.06008 20.6441 8.08697C20.75 9.0914 20.75 10.3537 20.75 11.9564V12.0436C20.75 13.6463 20.75 14.9086 20.6441 15.913C20.5359 16.9399 20.3103 17.7833 19.8005 18.5113C19.4493 19.0129 19.0129 19.4493 18.5113 19.8005C17.7833 20.3103 16.9399 20.5359 15.913 20.6441C14.9086 20.75 13.6463 20.75 12.0436 20.75H11.9564C10.3537 20.75 9.0914 20.75 8.08697 20.6441C7.06008 20.5359 6.21671 20.3103 5.48872 19.8005C4.98706 19.4493 4.55072 19.0129 4.19945 18.5113C3.68971 17.7833 3.4641 16.9399 3.35586 15.913C3.24998 14.9086 3.24999 13.6463 3.25 12.0436V11.9564C3.24999 10.3537 3.24998 9.0914 3.35586 8.08697C3.4641 7.06008 3.68971 6.21671 4.19945 5.48872C4.55072 4.98706 4.98706 4.55072 5.48872 4.19945C6.21671 3.68971 7.06008 3.4641 8.08697 3.35586C9.0914 3.24998 10.3537 3.24999 11.9564 3.25H12.0436Z' fill='%23dc3545'/%3E%3C/svg%3E%0A");
}

.task-icon-play {
    cursor: pointer;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9405 6.337C15.5735 7.26468 16.8567 7.99369 17.7709 8.66148C18.6913 9.33386 19.3721 10.0366 19.6159 10.9632C19.7947 11.6426 19.7947 12.3574 19.6159 13.0368C19.3721 13.9634 18.6913 14.6661 17.7709 15.3385C16.8567 16.0063 15.5735 16.7353 13.9406 17.663L13.9406 17.663C12.3632 18.5591 11.033 19.3148 10.0232 19.7444C9.0053 20.1773 8.07729 20.3968 7.17536 20.1412C6.51252 19.9533 5.90941 19.5968 5.42356 19.1066C4.76419 18.4414 4.49951 17.5219 4.37429 16.4154C4.24998 15.3169 4.24999 13.879 4.25 12.0501V12.0501V11.9499V11.9499C4.24999 10.121 4.24998 8.68309 4.37429 7.58464C4.49951 6.4781 4.76419 5.55861 5.42356 4.89335C5.90941 4.40317 6.51252 4.04666 7.17536 3.85883C8.07729 3.60325 9.0053 3.82269 10.0232 4.25565C11.033 4.68516 12.3632 5.44084 13.9405 6.337Z' fill='%23198754'/%3E%3C/svg%3E%0A");
}

.bulk-actions {
    padding: 8px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 80px;
    z-index: 201;
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px 0px;
}

.divide-y>* {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.divide-y>*:last-child {
    border-bottom: 0 !important;
}

/* New Sidebar Menu Styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    z-index: 1000;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.035) 2px 0 4px 0;
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed {
    transform: translateX(-100%);
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header .logo {
    font-weight: 600;
    color: #3182bd;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Push the logo to the right side */
}

.sidebar-toggle {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: #333;
}

.sidebar-menu {
    padding: 10px 0;
    list-style: none;
    flex-grow: 1;
}

.sidebar-menu > li {
    list-style: none;
    position: relative;
}

.sidebar-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 12px 20px;
    transition: background-color 0.2s;
}

.sidebar-menu > li > a:hover {
    background-color: #f7f7f7;
}

.sidebar-menu > li > a.active {
    background-color: #e6f0fa;
    color: #3182bd;
    font-weight: 500;
}

.sidebar-menu > li > ul {
    padding-left: 20px;
    list-style: none;
}

.sidebar-menu > li > ul > li {
    list-style: none;
}

.sidebar-menu > li > ul > li > a {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 8px 20px;
    padding-left: 40px;
    transition: background-color 0.2s;
}

.sidebar-menu > li > ul > li > a:hover {
    background-color: #f7f7f7;
}

.sidebar-menu > li > ul > li > a.active {
    background-color: #e6f0fa;
    color: #3182bd;
    font-weight: 500;
}

.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid #E0E0E0;
    margin-top: auto;
    width: 100%;
}

.content-expanded {
    margin-left: 250px;
}

.content-collapsed {
    margin-left: 0;
}

/* Fixed toggle button for sidebar */
.sidebar-toggle.fixed-top-left {
    position: fixed;
    top: 40px; /* Adjusted to account for banner height */
    left: 10px;
    z-index: 1050;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        z-index: 1000;
        width: 280px; /* Wider on mobile for better touch interaction */
    }

    .sidebar.collapsed {
        transform: translateX(-100%);
    }

    .sidebar.expanded {
        transform: translateX(0);
    }

    .content-expanded {
        margin-left: 0; /* On mobile, content doesn't shift */
    }

    /* Initially hide the fixed toggle button */
    .sidebar-toggle.fixed-top-left {
        display: flex; /* Show on mobile */
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1050;
        background: #fff;
        border: 1px solid #E0E0E0;
        border-radius: 8px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.035) 0px 2px 4px 0px;
    }

    .content {
        padding-top: 70px; /* Add padding for fixed top toggle */
    }

    /* Mobile-specific overlay for backdrop effect */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* Additional mobile optimizations */
@media (max-width: 576px) {
    .sidebar {
        width: 100%; /* Full width on very small screens */
    }

    .sidebar-menu > li > a {
        padding: 16px 20px;
        font-size: 16px; /* Larger touch targets */
    }

    .sidebar-menu > li > ul > li > a {
        padding: 12px 20px;
        padding-left: 40px;
        font-size: 15px; /* Slightly larger text */
    }

    .page-title {
        font-size: 1.5rem; /* Smaller title on small screens */
    }

    .page-actions {
        flex-wrap: wrap; /* Allow wrapping of action buttons */
    }

    .page-actions .btn {
        margin-bottom: 5px; /* Add space between buttons when wrapping */
    }
}

/* Adjust elements that may overlap with the global current task banner */
.sidebar-header {
    margin-top: 30px; /* Account for 30px banner height */
}

.offcanvas-header {
    padding-top: 35px !important; /* Account for banner height + some spacing */
}

/* Ensure sidebar toggle button is not hidden by banner */
.sidebar-toggle {
    z-index: 1050 !important; /* Ensure it's above the banner */
}

/* Right align the offcanvas title */
.offcanvas-header {
    justify-content: space-between;
}

.offcanvas-title {
    padding-top: 30px;
    padding-left: 40px;
}

/* Notification Bell Styles */
.header {
    position: fixed;
    top: 40px;
    right: 15px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-bell {
    position: relative;
}

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

.notification-item {
    border-left: 3px solid transparent;
}

.notification-item:hover {
    background-color: #f8f9fa !important;
}

.notification-item.unread {
    background-color: #e7f4ff;
    border-left-color: #0d6efd;
}

.notification-item .notification-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}

.dropdown-item .fw-bold {
    font-weight: 600 !important;
}

/* Custom scrollbar for notification dropdown */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}