/** {
    font-family: 'Spartan, sans-serif;' !important;
}*/
/* Ensure keyframes are correctly defined */
@keyframes slideAnimation {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}
@media (min-width: 64rem) {
    .navbar-vertical.navbar-expand-lg {
        position: relative;
        flex: 0 0 2.5rem;
    }

    .page-wrapper {
        flex-direction: row;
        min-height: calc(100vh - 56px);
    }

    textarea {
        line-height: 1.628571 !important;
    }

    body {
        overflow: auto;
        /*font-family: math;*/
        /*   margin: 0;
    font-size: 12px;
    font-family: 'Gotham', 'Battambang', sans-serif !important;*/
    }
    /*.wrapper {
    overflow-y: auto;
    height: calc(100vh - 56px);
}*/
    .card-header-extend {
        text-align: center;
        padding-top: 8px;
        background-color: #e2e2e2;
        height: 40px;
        font-weight: 500;
    }

    .navbar-dark {
        background: #088178;
        color: rgba(255, 255, 255, 0.72);
    }

        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 1);
        }

            .navbar-dark .navbar-nav .nav-link:hover {
                color: rgba(255, 255, 255, 0.83);
            }

        .navbar-dark .nav-item:hover {
            background-color: rgba(214, 251, 227, 0.12);
        }

        .navbar-dark .nav-item.active {
            background-color: #088178;
        }

        .navbar-dark .nav-item .nav-link {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

    .dropdown-item:hover, .dropdown-item:focus {
        color: inherit;
        background-color: rgba(214, 251, 227, 0.12);
    }

    .color-cmg {
        color: #088178 !important;
    }

    .text-cmg {
        color: #088178 !important;
    }

    .bg-cmg {
        background-color: #088178 !important;
    }

    .btn-cmg {
        --tblr-btn-color: #088178 !important;
    }

    .sidebar-collapse-button {
        padding: 0.75rem 0.5rem;
    }

        .sidebar-collapse-button svg {
            fill: #fff;
            height: 8px;
            width: 8px;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            margin-left: auto;
            margin-right: 10px;
        }

    .navbar-vertical .nav-link-title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    @media (min-width: 64rem) {
        .navbar-vertical.navbar-expand-lg {
            flex-basis: 15rem;
            transition-timing-function: ease-out;
            /* A litttttle slower on the way in */
            transition: 0.25s;
        }

        .navbar-vertical.navbar-collapse-lg {
            flex-basis: 2.75rem;
            transition-timing-function: ease-in;
            /* Quick on the way out */
            transition: 0.25s;
        }

            .navbar-vertical.navbar-collapse-lg .nav-link-title {
                margin-left: 15rem;
            }

        .navbar-vertical .nav-link-icon {
            margin-right: 0.25rem;
        }

            .navbar-vertical .nav-link-icon, .navbar-vertical .nav-link-icon .icon {
                width: 1.25rem;
                height: 1.25rem;
            }

        .navbar-vertical.navbar-collapse-lg .sidebar-collapse-button svg {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
    }

    .form-label {
        margin-bottom: 0.2rem;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .cmgdropdown-item.active {
        color: #014223;
        background-color: #017b41 !important;
    }

    #modal-chooseTitleNo .list-group {
        height: calc(100vh - 14rem);
        overflow-y: auto;
    }

    .selectize-control .selectize-input.disabled {
        background-color: #fafbfc !important;
        opacity: 1 !important;
        /*color: #fafbfc;*/
        border: 1px solid #d9dbde !important;
    }

    .selectize-control.multi .selectize-input.disabled > div {
        background: inherit;
        color: #343a40;
    }

    .cc-header {
        font-weight: 500;
        background-color: #088178;
        padding: 5px 15px;
        color: white;
    }

        .cc-header a {
            color: white;
        }

    .cc-sub-header {
        font-weight: 400;
        background-color: #e2e2e2;
        padding: 5px 15px;
        color: black;
    }

    .cc-sub-header-cmg {
        font-weight: 400;
        background-color: #088178;
        padding: 5px 15px;
        color: white;
    }

    .card-header-workflow {
        height: 40px;
        font-size: 14px;
        color: #088178;
        border-block-color: #088178;
    }

    .cc-sub-header2 {
        font-weight: 400;
        padding: 5px 15px;
        display: inline-block;
    }

    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: calc(100vh - 56px);
    }

    @media print {
        .content {
            margin: 0 !important;
        }
    }

    .nav-link.active {
        background-color: #767979 !important;
        color: white !important;
    }
    /*browse Photo*/
    .btn-file {
        position: relative;
        overflow: hidden;
    }

        .btn-file input[type="file"] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }

    .toast {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 11
    }

    .form-selectgroup-label {
        height: 37px;
    }

    .form-selectgroup-boxes {
        height: 27px;
    }

    .datagrid {
        --tblr-datagrid-padding: 1.5rem;
        --tblr-datagrid-item-width: 15rem;
        display: grid;
        grid-gap: var(--tblr-datagrid-padding);
        grid-template-columns: repeat(auto-fit,minmax(var(--tblr-datagrid-item-width),1fr));
    }

    .datagrid-title {
        font-size: .625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        line-height: 1.6;
        color: #626976;
        margin-bottom: 0.25rem;
    }

    .datagrid-content {
        font-weight: 600;
    }


    /*font Khmer*/
    .title-kh {
        font-family: 'Noto Sans Khmer';
        font-size: 1.2rem;
        font-weight: 700;
    }

    .note-kh {
        font-family: 'Noto Sans Khmer';
        font-size: 1.02rem;
    }

    .heading-kh {
        font-family: 'Noto Sans Khmer';
        font-size: 1.1rem;
        /*font-weight: bold;*/
    }

    .text-kh {
        font-family: 'Noto Sans Khmer';
        font-size: 1rem;
    }

    .btn-icon-lst .icon {
        margin: 0 !important;
    }

    .page-loader {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        z-index: 10000;
        align-items: center;
        justify-content: center;
    }

        .page-loader .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 80%; /* Adjust this value to change the width */
        }

            .page-loader .container .text-center {
                width: 50%;
            }

    /*Dropzone*/
    .dropzone {
        border: 1px dashed #9ba3aa;
        border-radius: 8px;
        background: #f8f9fa;
        padding: 20px;
        text-align: center;
    }

        .dropzone .dz-preview .dz-remove {
            display: block;
            margin-top: 10px;
            text-align: center;
            cursor: pointer;
            color: #ff0000;
        }
        /* Hide loading indicators */
        .dropzone .dz-preview .dz-progress,
        .dropzone .dz-preview .dz-error-mark,
        .dropzone .dz-preview .dz-success-mark {
            display: none;
        }

    /*End Dropzone*/
    .selectize-control.multi .selectize-input > div {
        cursor: pointer;
        margin: 0 3px 3px 0;
        padding: 1px 5px;
        background: #6c757f;
        color: #ffffff;
        border: 0 solid #6c757f;
        font-size: 0.875rem;
    }

    .modal-footer {
        background-color: #f9f9f9;
        /* margin-top: 8px; */
        padding-top: 10px;
    }

    .offcanvas-footer {
        background-color: #f9f9f9;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }

    .text-center {
        text-align: center;
    }

    .text-bold {
        font-weight: bold;
    }
    /*.customer-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-body {
    margin-top: 8px;
}

    .customer-body p {
        margin: 4px 0;
    }
*/
    #customerList {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;
    }

    .custom-card {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 16px;
        background: #fff;
        width: 100%; /* Adjust width to fit the container */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative; /* Required for positioning the status bar */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .custom-card .card-status-top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px; /* Adjust height as needed */
        }


        .custom-card:hover {
            transform: translateY(0px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

    .custom-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        border-bottom: 1px solid #d2d4d6;
        padding-bottom: 10px;
        height: 35px;
    }

        .custom-header h3 {
            margin: 0;
            font-size: 18px;
            color: #333;
        }

    .custom-actions button {
        margin-left: 8px;
    }

    .custom-actions .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        color: #fff;
    }

    .custom-actions .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
        color: #fff;
    }

    .custom-body p {
        margin: 8px 0;
        color: #555;
    }

    .card-detail {
        display: flex;
        justify-content: space-between; /* remove this customer value align*/
        margin-bottom: 12px;
        padding: 4px;
        border-bottom: 1px solid #f0f0f0;
    }

    .card-detail-customer {
        display: flex;
        justify-content: flex-start; /* remove this customer value align*/
        margin-bottom: 12px;
        padding: 4px;
        border-bottom: 1px solid #f0f0f0;
    }

    .detail-label {
        color: #555;
        font-weight: 650;
    }

    .detail-value {
        color: #333;
        justify-content: start;
        padding-left: 10px;
        /*font-size:16px;*/
    }


    .btn-action {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border-radius: 50%;
        background: #f5f5f5;
        transition: background 0.3s ease;
    }

        .btn-action:hover {
            background: #e0e0e0;
        }


    .custom-body.collapse {
        display: block;
    }

    .custom-body.expand {
        display: none;
    }

    .small-header {
        text-align: center;
        font-size: 16px;
        background-color: #e2e2e2;
        font-weight: 700;
        height: 32px;
        vertical-align: middle;
        padding-top: 3px;
    }


    .table tr th {
        color: black;
        background-color: #fafbfb;
    }

    .greenbc tr th {
        background-color: #088178 !important;
        color: white;
    }

    .invalid-feedback {
        color: red;
        margin-top: 5px;
        display: block;
    }

    .red-area {
        background-color: red;
        color: white;
        font-weight: bold;
    }

    /* Underline the active menu item */
    #navbar li.active > a {
        color: #088178;
        font-weight: bold;
    }

    @font-face {
        font-family: 'KHBAT';
        src: url('fonts/KHMEROSBATTAMBANG.TTF') format('truetype');
    }

    .font-KB {
        font-family: KHBAT;
    }
}
.link-secondary:hover {
    color: #007bff; /* Change this to your desired hover color */
    text-decoration: none; /* Optional: Removes underline on hover */
}


.form-selectgroup-label {
    position: relative;
    background-color: #f1f1f1;
    border-radius: 5px;
    margin: 5px;
    cursor: default;
}

.close-icon {
    position: absolute;
    top: 3px;
    right: 5px;
    cursor: pointer;
    font-weight: bold;
    color: red;
}