/* HubOPE OVERWRITE CSS */
:root {
    /* --bs-info: #0154A5; */
    --bs-primary: #0154A5;
    --bs-primary-light: #fffbf1;
    --bs-info-dark: color(srgb 0.1466 0.2156 0.425);
    --bs-link-color: #000;
    --bs-info: #0154A5;
    --bs-info-transparent: rgba(255, 201, 136, 0.1);
    --bs-nav-pills-link-active-color: #000;
    --bs-nav-pills-link-active-bg: #0154A5;
    --bs-text-red: #ce5151;
    --bs-link-hover-color-rgb: #F8A01E;
    /* --bs-link-color-rgb: #0154A5;
    --bs-text-primary: #0154A5;
    --bs-text-secondary: #0154A5;
    --bs-primary-active: #ff9900;
    --bs-component-active-bg: #2b4eb8;
    --bs-border-color: var(--bs-gray-300);
    --bs-primary-rgb: #0154A5;
    --bs-primary-2: #f8a11f;
    --bs-scrollbar-size: 10px;
    --bs-link-hover-color-rgb: #F8A01E;
    --bs-text-gray-400: #666;
    --bs-text-gray-500: #000;
    --bs-text-gray-600: #000;
    --bs-text-gray-700: #000;
    --bs-text-gray-800: #000;
    --bs-text-gray-900: #000;
    --bs-text-muted: #333!important;
    --bs-gray-600: #333;
    --bs-gray-700: #000;
    --bs-gray-800: #000;
    --bs-gray-900: #000;
    --bs-light-inverse: #000; */
}
option {
    text-align: left;
}
.link-primary {
    color: var(--bs-info)!important;
}
.link-primary:hover {
    color: var(--bs-active)!important;
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #ffffff;
    --bs-nav-pills-link-active-bg: #0154A5;
}

.form-control:not(.select2-selection, .form-select):read-only {
    background-color: var(--bs-gray-100);
}

/* Course Calendar */
.calendar {
    --bs-text-red: #ce5151;
    --bs-text-blue: #518fce;
    --bs-text-green: #07882a;
    --bs-text-grey: rgb(127, 127, 127);
    --bs-text-purple: hsl(305, 59%, 33%);
    --bs-text-yellow: #f7c30d;
    --bs-background-color-semi-light: #ced2d4;
    --bs-border-semi-light: #e6e9ea;
    --bs-daynum: #e6e9ea;
    --bs-border-color-grey: #7c878d;
    --bs-background-color-hover-ignore: #f1f2f3;
    --bs-background-color-selected: #fdfdad;
}

.card {
    /* --bs-card-border-radius: 0; */
    --bs-card-border-color: var(--bs-gray-400);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color:  transparent;
    background-clip: border-box;
    /* border: var(--bs-card-border-width) solid var(--bs-card-border-color); */
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);
}

[data-bs-theme=light] {
    --bs-info: #0154A5;
    --bs-info-active: #2d4fb6;
    --bs-link-color-rgb: #0154A5;
    --bs-text-primary: #0154A5;
    --bs-text-secondary: #0154A5;
    --bs-primary-active: #0154A5;
    --bs-component-active-bg: #2b4eb8;
    --bs-border-color: var(--bs-gray-300);
    --bs-primary-rgb: #0154A5;
    --bs-primary-2: #0154A5;
    --bs-scrollbar-size: 10px;
    --bs-link-hover-color-rgb: #F8A01E;
    --bs-info-light: #f1f4ff;
    ;
    --bs-text-info: #0154A5;
    --bs-text-gray-400: #666;
    --bs-text-gray-500: #000;
    --bs-text-gray-600: #000;
    --bs-text-gray-700: #000;
    --bs-text-gray-800: #000;
    --bs-text-gray-900: #000;
    --bs-text-muted: #333 !important;
    --bs-gray-400: #aaa;
    --bs-gray-500: #444;
    --bs-gray-600: #333;
    --bs-gray-700: #000;
    --bs-gray-800: #000;
    --bs-gray-900: #000;
    --bs-light-inverse: #000;
    --bs-danger: #E41E3F;
}

body {
    font-family: Arial, "Open Sans", sans-serif;
}

.fw-semibold {
    font-weight: 600 !important;
}

.aside .menu .menu-item>.menu-link>.menu-badge {
    color: var(--bs-text-gray-800);
}

.menu-root-here-bg-desktop>.menu-item.here>.menu-link {
    /* background-color: var(--bs-primary); */
    background-color: transparent;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .2);

}

.menu-state-primary .menu-item.here>.menu-link .menu-title {
    /* color: var(--bs-primary-inverse); */
    color: var(--bs-primary);
}

.material-symbols-rounded {
    font-size: initial;
}

.btn {
    border-radius: 0;
}

.table th {
    vertical-align: middle;
}

.btn.btn-outline:not(.btn-outline-dashed) {
    border-color: var(--bs-gray-400);
}

.table:not(.table-bordered) th,
[data-bs-theme="light"] .table:not(.table-bordered) tr {}

[data-bs-theme="light"] .table:not(.table-bordered) td {
    color: var(--bs-text-gray-800);
}

[data-bs-theme="light"] .menu-gray-600 .menu-item .menu-link {
    color: var(--bs-gray-900);
}

.form-check-input:checked {
    background-color: var(--bs-primary-2);
    border-color: var(--bs-primary-2);
}

/* HubOPE CUSTOM CSS */
.list-loading {
    opacity: 0.4;
    min-height: 100px;
    pointer-events: none;
}

.list-loading * {
    pointer-events: none;
    cursor: not-allowed;
}

.as-module {
    transition: background-color 0.2s ease-in-out;
}

.as-module * {
    cursor: pointer;
}

.as-module svg {
    transition: opacity 0.2s ease-in-out;
}

.as-module:hover {
    --bs-bg-rgb-color: var(--bs-light-rgb);
    background-color: var(--bs-light) !important;
}

.as-module:hover svg {
    opacity: 1;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
}

[data-kt-indicator="on"] {
    pointer-events: none;
}

.form-control {
    border-radius: 0;
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: calc(100% - 20px);
    }
}

@media (min-width: 1600px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: calc(100% - 20px);
    }
}

[data-action="under-construction"]:not(.nav-link) {
    position: relative;
}

.nav-link[data-action="under-construction"] {
    position: relative;
}

.menu-link[data-action="under-construction"] {
    position: relative;
}

[data-action="under-construction"]::after {
    content: 'construction';
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: -15px;
    color: var(--bs-warning);
}

.aside .menu>.menu-item>.menu-link[data-action="under-construction"]::after {
    right: 30px;
}

.as-module[data-action="under-construction"]::after {
    font-size: 40px;
    right: 5px;
    top: 5px;
}

.btn-menu[data-action="under-construction"] {
    position: relative;
    opacity: 0.4;
    margin-right: 0px !important;
}

/* .header-menu .menu-item .menu-link[data-action="under-construction"] {
    margin-right: 20px;
}

.header-menu .menu-item .menu-link[data-action="under-construction"]::after {
    right: 5px;
} */

.menu-content[data-action="under-construction"]::after {
    right: 2px;
}

.aside .menu .menu-item>.menu-link>.menu-title {
    color: var(--bs-gray-900);
}

.btn[data-action="under-construction"]::after {
    right: 3px;
}

.menu-item a[data-action="under-construction"]::after {
    margin-right: 25px !important;
}

.profile-stat-box[data-action="under-construction"]::after {
    font-size: 40px;
    right: 25px;
    top: 15px;
}

.menu-accordion[data-action="under-construction"]::after {
    right: -5px;
    top: 15px;
}

#NoteLogsIndexListContent {
    width: 100%;
}

#NoteLogsIndexListContent>.card-body {
    padding: 0px !important;
}

@media (min-width:1200px) {

    .modal-lg,
    .modal-xl {
        --bs-modal-width: 1100px;
    }

    .modal-full {
        --bs-modal-width: calc(100% - 50px);
    }
}

.current-nav {
    transition: color .2s ease;
    background-color: var(--bs-light) !important;
    color: #009ef7;
}

[list-action="sort"]:hover {
    cursor: pointer;
}

[list-action="sort"] .text-muted {
    opacity: 0.3 !important;
    color: var(--bs-table-color) !important;
}

[sort-direction="asc"] .sort-icon {
    transform: scale(1.3);
    color:  var(--bs-primary);
}

.nav-line-tabs .nav-item .nav-link {
    color: var(--bs-gray-800);
}

/* ORDERS */
.scrollable-orders-table {
    overflow: scroll;
    max-height: 500px;
}

#dtHorizontalVerticalOrder {
    border-collapse: collapse;
}

#dtHorizontalVerticalOrder th,
#dtHorizontalVerticalOrder td {
    overflow: hidden;
    /* white-space: nowrap; */
}

#dtHorizontalVerticalOrder thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
}

#dtHorizontalVerticalOrder td {
    vertical-align: middle;
}

.table-bordered>:not(caption)>* {
    border-width: 0px;
}

.aside {
    width: auto;
}

.aside .menu .menu-item>.menu-link>.menu-title {
    font-size: 1.075rem
}

.form-control,
.form-select {
    border-color: var(--bs-gray-400);
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap5.select2-container--focus:not(.select2-container--disabled) .form-select:not(.form-select-solid):not(.form-select-transparent),
.select2-container--bootstrap5.select2-container--open:not(.select2-container--disabled) .form-select:not(.form-select-solid):not(.form-select-transparent) {
    border-color: var(--bs-gray-600);
}

#kt_aside {
    position: sticky;
    top: 0;
    height: calc(100vh - 94px);
    overflow-y: auto;
}

li.nav-item:hover .btn-custom-warning-color:not(.active) {
    color: var(--bs-primary) !important;
}

.menu-link.active .menu-icon {
    color: var(--bs-gray-900) !important;

}

#kt_aside_show:hover {
    background-color: var(--bs-primary-2);
    color: white !important;
}

.flex-column-fluid.hover-scroll-y.h-100::-webkit-scrollbar {
    width: 10px;
}

.table.gy-5 td,
.table.gy-5 th {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.table-head-sticky thead,
.table-footer-sticky tfoot {
    position: sticky;
}

.table-head-sticky thead {
    inset-block-start: 0;
    z-index: 2;
}

.table-footer-sticky tfoot {
    inset-block-end: 0;
    /* "bottom" */
}

.aside-secondary {
    width: 220px;
}

.column-hover::before {
    content: ',';
    display: block;
    height: 10px;
    width: 100%;
    text-indent: -90000px;
    border: dashed 1px var(--bs-gray-600);
    border-radius: 5px;
}

.th-column-hover {
    box-shadow: -3px 0px 0px 0px var(--bs-primary) !important;
    transform: translateX(3px);
}

[column-control="column-mover"] {
    cursor: pointer;
}

.aside-level1[data-action="under-construction"]::after {
    right: 4px;
    top: 5px;
}

thead .select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) {
    min-height: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    height: 30px;
}

thead .select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) .select2-selection__choice .select2-selection__choice__display {
    font-size: 11px;
}

thead .form-control,
thead .form-select {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    height: 30px;
}

.inline-edit-button {
    color: var(--bs-gray-300);
}

.inline-edit-button:hover {
    color: var(--bs-gray-800);
}

.list-filter-box .form-select,
.list-filter-box .form-control,
.list-filter-box .select2-container--bootstrap5 .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) {
    min-height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    min-height: 35px;
}

.list-filter-box .form-label {
    font-size: 13px;
    margin-bottom: 3px;
    border-radius: 2px;
    top: -17px;
    z-index: 10;
    font-weight: 600 !important;
}

.btn.aside-level1 {
    padding: 5px 7px !important;
    width: 100%;
    height: auto;
    text-transform: uppercase;
    width: 77px;
    height: 68px;
}

.table-head-sticky {
    max-height: calc(100vh - 420px);
    min-height: 400px;
}

.table-empty-box {
    position: absolute;
    left: calc(50% - 107px);
}

.date-with-clear-button {
    position: relative;
}

.date-with-clear-button .clear-button {
    position: absolute;
    right: 4px;
    cursor: pointer;
}

.dropdown-close-button {
    opacity: 0.6;
}

.dropdown-close-button:hover {
    opacity: 1;
}


/* .menu-arrow {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.menu-arrow.rotate {
    transform: rotate(180deg);
} */
#buttonCreateCustomer[data-action="under-construction"]::after {
    top: 33px;
}

.table-bordered tr {
    border: solid 2px #edd3d330;
    border-right: solid 2px #edd3d330 !important;
}


.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

.aside-level1 .material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
    transform: scale(0.8);
}

.menu-rounded .menu-link {
    border-radius: .475rem;
}

.aside .menu .menu-item>.menu-link {
    border-radius: 10px;
}
.aside .menu .menu-item>.menu-link.active {
    border: 0;
}
.aside .aside-extended{
    background: #F9F9F9;
}

.btn.btn-light {
    color: var(--bs-light-inverse);
    border-color: var(--bs-gray-400) !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-color: transparent !important;
}

.btn.btn-light:not(.btn-icon) {
    padding: calc(0.775rem + 0px) calc(1.5rem + 0px);
}

.form-select {
    border-radius: 0;
}

.form-control:focus {
    background-color: #f5f7ff;
}

.form-check-input[type=checkbox] {
    border-radius: 0;
}

.page-item .page-link {
    border-radius: 0;
}

.btn.btn-secondary {
    color: var(--bs-light);
    background-color: var(--bs-gray-500);
}

.btn-check:active+.btn.btn-secondary,
.btn-check:checked+.btn.btn-secondary,
.btn.btn-secondary.active,
.btn.btn-secondary.show,
.btn.btn-secondary:active:not(.btn-active),
.btn.btn-secondary:focus:not(.btn-active),
.btn.btn-secondary:hover:not(.btn-active),
.show>.btn.btn-secondary {
    background-color: var(--bs-gray-700) !important;
    color: var(--bs-light);
}

.custom-button:hover {
    color: var(--bs-primary);
    /* Màu warning, có thể thay đổi màu theo ý muốn */
}

.material-symbols-rounded.fs-3hx,
.material-symbols-rounded.fs-4hx {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
}

.header-menu>.menu>.menu-item>.menu-link[data-action="under-construction"] {
    margin-right: 20px;
}

.header-menu>.menu>.menu-item>.menu-link[data-action="under-construction"]::after {
    right: 5px;
}

/* START COURSES */
#add-course-time-table-per-week-container .nav-pills .nav-link.active {
    color: #fff !important;
    background-color: var(--bs-info) !important;
}

#add-course-time-table-per-week-container .nav-pills .nav-link {
    color: #000;
}

/* START CALENDAR */

.calendar .days .day_name {
    width: calc(100% / 7);
}

.calendar .days .day_name:nth-child(7) {
    border: none;
}

.calendar .days .day_num {
    width: calc(100% / 7);
    min-height: 100px;
}

.calendar .days .day_num .event.green {
    background-color: var(--bs-text-green);
}

.calendar .days .day_num .event.blue {
    background-color: var(--bs-text-blue);
}

.calendar .days .day_num .event.red {
    background-color: var(--bs-text-red);
}

.calendar .days .day_num .event.purple {
    background-color: var(--bs-text-purple);
}

.calendar .days .day_num .event.grey {
    background-color: var(--bs-text-grey);
}

.calendar .days .day_num:nth-child(7n+1) {
    border-left: 1px solid var(--bs-daynum);
}

.calendar .days .day_num:hover {
    background-color: var(--bs-background-color-hover-ignore);
}

.calendar .days .day_num.ignore {
    background-color: var(--bs-background-color-hover-ignore);
    color: var(--bs-gray-600);
    cursor: inherit;
}

.calendar .days .day_num.selected {
    background-color: var(--bs-background-color-selected);
    cursor: inherit;
}

.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-info-light);
}

#addCourseContainer .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--bs-primary-light);
    background-color: var(--bs-info);
    border-radius: 0;
}

#addCourseContainer .nav-link:focus,
.nav-link:hover {
    color: var(--bs-info);
}

/* END CALENDAR */

/* END COURSES */
.cell-under-construction {
    background: var(--bs-text-gray-700) !important;
    opacity: 0.7;
    text-align: center;
    border: none;
    justify-content: center;
}

.order-type-select .btn-check:checked+.btn.btn-outline.btn-outline-info {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;

}

.card .card-header {
    min-height: 50px;
}

.fixed-topmenu #kt_content_container {
    padding-top: 90px;
}

.fixed-topmenu #kt_content_container {
    padding-top: 90px;
}

.fixed-topmenu #kt_header {
    position: fixed;
    z-index: 10;
    width: 100%;
}

.fixed-topmenu #kt_aside {
    top: 94px;
    padding-top: 17px;
}

.border-gray-400 {
    border-color: var(--bs-gray-400) !important;
}

.bg-dark-info {
    background-color: var(--bs-info-dark) !important;
}



/* start unclick payment reminder*/




.link-under-construction:active {
    position: relative;
    pointer-events: none;
}

.link-under-construction:hover {
    content: attr(data-title);

}



/* end unclick payment reminder*/


/* start progress bar*/
.progress-container::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    z-index: 0;
}

.progress1 {
    margin-top: 35px;
    margin-left: 4%;

    background: var(--bs-info) !important;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 10px;
    border-radius: 5px;
    z-index: 1;
    width: 50%;
    transition: 0.4s ease;
}

.progress2 {
    margin-top: 35px;
    margin-left: 4%;
    background: var(--bs-primary-active) !important;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 10px;
    border-radius: 5px;
    width: 50%;
    transition: 0.4s ease;
    z-index: 2;
}

.progress3 {
    margin-top: 20px;
    margin-left: 4%;
    /* background: var(--bs-primary-active) !important; */

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 50px;
    border-radius: 5px;
    width: 50%;
    transition: 0.4s ease;
    z-index: 2;
}

.progress4 {
    margin-top: 35px;
    margin-left: 4%;
    /* background: var(--bs-primary-active) !important; */

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 50px;
    border-radius: 4px;
    width: 50%;
    transition: 0.4s ease;
    z-index: 4;
}

.circle {

    border-radius: 50%;
    height: 80px;
    width: 80px;
    margin-bottom: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-gray-700);
    transition: .4s ease;
    z-index: 1;
}

.circle2 {
    border-radius: 50%;
    height: 10px;
    width: 10px;
    margin-bottom: 15px;
    margin-left: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-gray-700);
    transition: .4s ease;
    z-index: 3;
    background-color: var(--bs-text-red);
}

.circle.active {
    border-color: var(--bs-gray-700);
    transform: scale(0.98);

    color: #fff;
}

.price-txt {

    align-self: self-end;
    margin-bottom: 10px;

}

.paid-txt {
    align-self: center;
    margin-top: 100px;
    flex-basis: min-content;
}

.stacking-order {
    z-index: 4;
}

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

/* start progress bar*/
.sidebar-toggle-button {
    position: absolute;
    left: 65px;
    z-index: 100;
}

.aside-level1 .fs-9 {
    font-size: 9px !important;
    font-weight: 800 !important;
}

#kt_aside_show {
    position: fixed;
    z-index: 1000;
    top: 76px;
    left: 1px;
}

.aside-top-heading {
    padding: 5px 13px;
    background: var(--bs-info);
    border-radius: 30px 30px 30px 30px;
    color: #fff !important;
}
.aside-active {
    padding: 5px 13px;
    background: #ECECEC;
    border-radius: 10px 10px 10px 10px;
    color: #fff !important;
}

input[readonly]::placeholder {
    text-align: center;
}

.section-table {
    max-height: 300px;
}
.dashboard-calendar .days .day_num {
    min-height: 50px;
    white-space: nowrap;
}
.aside-nav {
    height: calc(100vh - 120px);
}
.abroad-application-search-input .select2-container--bootstrap5 .select2-selection--single {
    padding-left: 50px;
    background: var(--bs-info-transparent);
}
.mask-loading-effect {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    text-align: center;
    z-index: 1000000;
}
.mask-loading-effect .content {
    display: block;
    margin: auto;
    position: fixed;
    width: 100%;
    top: 40%;
    text-align: center;
    z-index: 100000000000;
    color: #fff;
    font-size: 20px;
    font-style: italic;
}
.line-table{
    border: 2px solid !important;
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 20px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 10px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #aaa;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 6px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 6px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 26px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 45px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(19px, 0);
    }
  }
  /* .table:not(.table-bordered, .table-origin) td, .table:not(.table-bordered, .table-origin) th, .table:not(.table-bordered, .table-origin) tr {
    border: solid 1px #aaa!important;
  }
  .table:not(.table-bordered, .table-origin) tbody tr:last-child td, .table:not(.table-bordered, .table-origin) tbody tr:last-child th, .table:not(.table-bordered) tfoot tr:last-child td, .table:not(.table-bordered) tfoot tr:last-child th {
    border: solid 1px #aaa!important;
  } 
  .table:not(.table-origin) tbody tr:last-child td, .table:not(.table-origin) tbody tr:last-child th {
    border-bottom: solid 1px #aaa;
    } */
    .table:not(.table-bordered) td, .table:not(.table-bordered) tr{
        background-color: #fff;
    }
    .table tr:hover {
        background-color: #fffbf0;
        
    }
    thead tr:hover {
        background-color: white !important;
    }
    
  .table, tr  {
    background-color: #fff;
  }
  [data-action="under-construction"][data-kt-search-element="form"]::after {
    right: 8px;
    top: 13px;
  }
  .alert[data-action="under-construction"]::after {
    right: 15px;
    top: 13px;
    font-size: 30px;
  }
  .table:not(.table-bordered) td:first-child, .table:not(.table-bordered) th:first-child, .table:not(.table-bordered) tr:first-child {
    padding-left: 9.75px;
  }
  .select2-container--bootstrap5 .select2-selection--single {
    min-height: 40px;
  }
/* CSS for table */
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2; 
}
/* CSS to freeze first column */
.freeze-column [data-control="freeze-column"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
}
.freeze-column td[data-control="freeze-column"] {
    background: #fff;
    box-shadow: -1px 0px 0px 0px #aaa inset;
}
.table tr:hover td {
    background-color: #fffbf0;
}


.freeze-column [data-control="freeze-column-1"] {
    position: sticky;
    left: 0;
    z-index: 1;
}
.freeze-column td[data-control="freeze-column-1"] {
    background: #fff;
    box-shadow: -1px 0px 0px 0px #aaa inset;
}
.freeze-column .table tr:hover td[data-control="freeze-column-1"] {
    background-color: #fffbf0;
}
.freeze-column [data-control="freeze-column-2"] {
    position: sticky;
    left: 110px;
    z-index: 1;
}
.freeze-column td[data-control="freeze-column-2"] {
    background: #fff;
    box-shadow: -1px 0px 0px 0px #aaa inset;
}
.freeze-column .table tr:hover td[data-control="freeze-column-2"] {
    background-color: #fffbf0;
}
.freeze-column [data-control="freeze-column-3"] {
    position: sticky;
    left: 280px;
    z-index: 1;
}
.freeze-column td[data-control="freeze-column-3"] {
    background: #fff;
    box-shadow: -1px 0px 0px 0px #aaa inset;
}
.freeze-column .table tr:hover td[data-control="freeze-column-3"] {
    background-color: #fffbf0;
}








.table:not(.table-bordered) td:last-child, .table:not(.table-bordered) th:last-child, .table:not(.table-bordered) tr:last-child {
    padding-right: 0.75em;
}
.notification-badge {
    color: #fff;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute!important;
    left: 27px!important;
    top: 5px!important;
    width: auto!important;
    min-width: 15px;
    padding: 3px;
    font-weight: bold;
    border-radius: 100px!important;
}
thead th {
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer/Edge */
    cursor: pointer;
}
button.badge-success {
    border: none;
}
.notification-item.clickable .notification-content:hover {
    outline: 1px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.swal2-container.swal2-center {
    z-index: 1000000;
}
[sidebar-counter]:empty::after {
    content: 'cached';
    font-family: 'Material Symbols Rounded';
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spinner 0.8s infinite linear;
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--bs-text-gray-400);
}
@keyframes spinner {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(360deg) translateZ(0);
    }
}
[list-action="search-action-box"] i {
    cursor: pointer;
    right: 10px;
}
[list-action="search-action-box"] [list-action="keyword-input"] {
    padding-left: 12px!important;
    padding-right: 30px!important;
}
.swal2-container .swal2-html-container {
    line-height: 1.3;
}
.login-back-section {
    position: fixed;
    right: 15px;
    z-index: 100;
    top: 78px;
    border: solid 1px #aaa;
    padding: 5px;
    border-radius: 100%;
}
.login-back-section:hover {
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}
.image-input-placeholder {
    height: 125px;
    width: 125px;
    background-image: url('../core/assets/media/svg/files/blank-image.svg');
    background-size: 125px;
}

[data-bs-theme="dark"] .image-input-placeholder {
    background-image: url('../core/assets/media/svg/files/blank-image.svg');
}

.form-select.disabled {
    pointer-events: none;
    background-color: var(--bs-gray-100);
}
.form-select.disabled .select2-selection__clear {
    display: none;
}
body.as-zoomed-in #kt_wrapper > .content {
    position: fixed;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100vh!important;
    padding: 5px 20px 10px 20px!important;
    background-color: #fff!important;
    z-index: 100;
    transition: all 0.2s ease-in-out;
    overflow: auto;
}
body.as-zoomed-in #kt_toolbar {
    margin-bottom: 7px!important;
}
body.as-zoomed-in #kt_aside_show {
    display: none!important;
}
body.as-zoomed-in .table-head-sticky {
    height: calc(100vh - 227px)!important;
    min-height: auto !important;
    max-height: none !important;
}
[columns-control="options-box"] {
    user-select: none;           /* Standard */
    -webkit-user-select: none;   /* Safari */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
}
.list-note-log-col {
    max-width: 550px;
    min-width: 430px;
    display: -webkit-box!important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
}
.list-note-log-col.list-note-log-col-sm {
    max-width: 450px;
    min-width: 330px;
    -webkit-line-clamp: 1;
}
[list-data="suitable_students"]:empty::after, [list-data="suitable_class"]:empty::after {
    content: 'cached';
    font-family: 'Material Symbols Rounded';
    animation: spin 1s linear infinite;
    display: inline-block;
}
.list-labels {
    margin-top: -9px;
}
.list-labels .btn, .list-labels .label-close {
    line-height: 13px;
}

/* Enhanced List Index Styles */
.list-view-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

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

.list-table {
    width: 100%;
    border-spacing: 0;
}

.list-table thead th {
    background: #f8f9fa;
    padding: 12px 16px;
    font-weight: 600;
    color: #344767;
    font-size: 13px;
    border-bottom: 2px solid #eef0f4;
    white-space: nowrap;
}

.list-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f4;
    color: #495057;
    font-size: 14px;
}

.list-table tbody tr:hover {
    background-color: #f8f9fc;
    transition: background-color 0.2s ease;
}

/* Action Buttons */
.list-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-button {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Status Badges */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

/* Search & Filter Section */
.list-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.filter-input {
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #e0e4e8;
    border-radius: 4px;
    font-size: 14px;
}

/* Pagination */
.list-pagination {
    padding: 16px;
    border-top: 1px solid #eef0f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-info {
    color: #6c757d;
    font-size: 13px;
}

/* Responsive Table */
@media (max-width: 992px) {
    .list-table {
        display: block;
        overflow-x: auto;
    }
    
    .list-filters {
        flex-direction: column;
        gap: 8px;
    }
    
    .filter-input {
        width: 100%;
    }
}

/* Column Headers */
.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable-header:hover {
    background-color: #eef0f4;
}

.sortable-header::after {
    content: '↕';
    margin-left: 4px;
    opacity: 0.5;
}

/* Selection Styles */
.row-selectable tbody tr {
    cursor: pointer;
}

.row-selected {
    background-color: #e8f0fe !important;
}

/* Loading State */
.list-loading {
    position: relative;
    min-height: 200px;
}

.list-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    z-index: 1;
}

/* Empty State */
.list-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.list-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: #adb5bd;
}

/* Custom Scrollbar */
.list-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.list-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.list-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Enhanced Table Styles */
.table {
    --table-border-color: #e5e7eb;
    --table-header-bg: #f9fafb;
    --table-hover-bg: #f3f4f6;
    --table-stripe-bg: #fafafa;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* .table thead th {
    background: var(--table-header-bg);
    font-weight: 600;
    font-size: 13px;
    padding: 12px 16px;
    color: #19f09a;
    border-bottom: 2px solid var(--table-border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
} */

/* .table tbody tr {
    transition: all 0.2s ease;
}

.table tbody tr:nth-child(even) {
    background-color: var(--table-stripe-bg);
}

.table tbody tr:hover {
    background-color: var(--table-hover-bg);
    transform: scale(1.001);
} */

.table td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--table-border-color);
    font-size: 14px;
    color: #4b5563;
}

/* Rounded corners for first and last cells */
.table thead th:first-child {
    border-top-left-radius: 8px;
}

.table thead th:last-child {
    border-top-right-radius: 8px;
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* Selection styling */
.table tbody tr.selected {
    background-color: #e5edff !important;
}

.table tbody tr.selected td {
    color: #1a56db;
}

/* Checkbox styling */
.table .form-check {
    margin: 0;
}

.table .form-check-input {
    border-radius: 4px;
    border-width: 2px;
    cursor: pointer;
}

/* Action buttons styling */
.table .btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    transition: all 0.2s;
}

.table .btn-action:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Status badge styling */
.table .status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    display: inline-block;
}

/* Empty table state */
.table-empty {
    text-align: center;
    padding: 48px 0;
    background: #fff;
    border-radius: 8px;
}

.table-empty-icon {
    font-size: 48px;
    color: #5d750f;
    margin-bottom: 16px;
}

.table-empty-text {
    color: #000000;
    font-size: 15px;
}

/* Responsive table */
@media (max-width: 768px) {
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table thead th {
        white-space: nowrap;
    }
}

/* Fixed header shadow */
.table thead th {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Button styles with rounded corners */
.btn {
    border-radius: 10px !important;
    padding: 8px 20px;
    transition: all 0.3s ease;
}

.btn-sm {
    border-radius: 10px !important;
    padding: 5px 15px;
}

.btn-lg {
    border-radius: 10px !important;
    padding: 12px 25px;
}

/* Primary button */
.btn-primary {
    border-radius: 10px;
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-primary:hover {
    background-color: var(--bs-info-active);
    border-color: var(--bs-info-active);
}

/* Secondary button */
.btn-secondary {
    border-radius: 10px;
    background-color: var(--bs-gray-400);
    border-color: var(--bs-gray-400);
}

.btn-secondary:hover {
    background-color: var(--bs-gray-500);
    border-color: var(--bs-gray-500);
}

/* Info button */
.btn-info {
    border-radius: 10px;
    background-color: var(--bs-info-light);
    border-color: var(--bs-info);
    color: var(--bs-info);
}

.btn-info:hover {
    background-color: var(--bs-info);
    color: #fff;
}

/* Danger button */
.btn-danger {
    border-radius: 10px;
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-danger:hover {
    background-color: #c91834;
    border-color: #c91834;
}

/* Outline buttons */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-danger {
    border-radius: 10px;
}

/* Button groups */
.btn-group .btn {
    border-radius: 0 !important;
}

.btn-group .btn:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.btn-group .btn:last-child {
    border-top-right-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
}

/* Form controls base styles */
.form-control,
.form-select,
.input-group-text,
textarea,
select {
    border-radius: 10px !important;
    padding: 8px 15px;
    border: 1px solid var(--bs-gray-400);
    transition: all 0.3s ease;
}

/* Select specific styles */
.form-select {
    padding-right: 35px;
    background-position: right 15px center;
}

/* Input group styles */
.input-group .form-control:first-child,
.input-group .input-group-text:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group .form-control:last-child,
.input-group .input-group-text:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-info);
    box-shadow: 0 0 0 0.25rem rgba(37, 63, 142, 0.25);
}

/* Disabled states */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--bs-gray-200);
    opacity: 0.7;
}

/* Search inputs */
input[type="search"] {
    border-radius: 10px !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* Textarea specific */
textarea.form-control {
    border-radius: 10px !important;
}

/* Select2 custom styles */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 10px !important;
    border: 1px solid var(--bs-gray-400);
}

.select2-dropdown {
    border-radius: 10px !important;
    margin-top: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}


/* From Uiverse.io by Chriskoziol */ 
.spinnerContainer-hk-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .spinner {
    width: 56px;
    height: 56px;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #2440cd;
    animation: tri-spinner 1s infinite linear;
  }
  
  .spinner::before,
  .spinner::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: tri-spinner 2s infinite;
  }
  
  .spinner::after {
    margin: 8px;
    animation-duration: 3s;
  }
  
  @keyframes tri-spinner {
    100% {
      transform: rotate(1turn);
    }
  }
  
  .loader {
    color: #4a4a4a;
    font-family: "Poppins",sans-serif;
    font-weight: 500;
    font-size: 25px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 40px;
    padding: 10px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 8px;
  }
  
  .words {
    overflow: hidden;
  }
  
  .word {
    display: block;
    height: 100%;
    padding-left: 0px;
    color: #2440cd;
    animation: cycle-words 5s infinite;
  }
  
  @keyframes cycle-words {
    10% {
      -webkit-transform: translateY(-105%);
      transform: translateY(-105%);
    }
  
    25% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
  
    35% {
      -webkit-transform: translateY(-205%);
      transform: translateY(-205%);
    }
  
    50% {
      -webkit-transform: translateY(-200%);
      transform: translateY(-200%);
    }
  
    60% {
      -webkit-transform: translateY(-305%);
      transform: translateY(-305%);
    }
  
    75% {
      -webkit-transform: translateY(-300%);
      transform: translateY(-300%);
    }
  
    85% {
      -webkit-transform: translateY(-405%);
      transform: translateY(-405%);
    }
  
    100% {
      -webkit-transform: translateY(-400%);
      transform: translateY(-400%);
    }
  }
  


.btn-check:active+.btn.btn-active-primary, .btn-check:checked+.btn.btn-active-primary, .btn.btn-active-primary.active, .btn.btn-active-primary.show, .btn.btn-active-primary:active:not(.btn-active), .btn.btn-active-primary:focus:not(.btn-active), .btn.btn-active-primary:hover:not(.btn-active), .show>.btn.btn-active-primary { 
    /* border-color: var(--bs-secondary); */
    color: var(--bs-primary) !important;
    background-color: var(--bs-border-semi-light) !important;
}



#card-info{
	/* width:359px; */
	/* height:fit-content!important; */
	padding: 35px 35px 35px 35px ;
    margin: 20px    ;
    background-color: #ffffff;
    border-radius: 35px;
    box-shadow: 0px 6px 61px 6px rgb(0 0 0 / 10%);
	transition: transform ease 300ms;
	overflow: hidden;
}
#card-info:hover{
	box-shadow: 0px 25px 68px 6px rgb(1 84 165 / 70%);
	background: linear-gradient(45deg, rgb(191 207 250), #0154A5);
	transform: translate(0, -10px);
}
#my-icon {
	color:#0154A5;
	font-size:56px;
	line-height: 56px;
}

#icon-2{ 
    display: none
}
#card-info:hover #icon-2{
    display: block;
}
 #card-info:hover #my-icon{
     display: none;
content: "\f117";
	
}

#card-info:hover #main-title, #sub-title{
    color: white;
}
#card-info:hover #sub-title{
    color: white;
}
#main-title{
	margin: 20px 0px;
	/* font-family: "Nunito", Sans-serif; */
    font-weight: bold;
    line-height: 28px;
    font-weight: 700;
    font-style: normal;
    color: #333;
    font-size: 20px;

}
#sub-title{
	/* font-family: "Open Sans"; */
    line-height: 26px;
    font-style: normal;
    color: #4b4b4b;
    font-size: 16px;
    /* height: 160px!important; */
}

 /* For Tablet View */
@media screen and (max-width: 768px) {
    
    #card-info{
        padding: 15px 20px 20px 20px !important;
    height: 310px;
        overflow: hidden;
    }
}

.badge {
    border-radius: 10px;
}
.page-item.active {
    z-index: -100;
}

.border-10{
    border-radius: 10px;
}