:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #828282;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #156bc1;
    --bs-hover-primary: #105ba5;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    --bs-blue-rgb: 14, 100, 230;
    --bs-primary-rgb: 21, 107, 193;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-pagination-bg: var(--bs-white) !important;

    /* Button */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-hover-primary);
    --bs-btn-hover-border-color: var(--bs-hover-primary);
    --bs-btn-focus-shadow-rgb: 56, 129, 202;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #11569a;
    --bs-btn-active-border-color: #105091;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #156bc1;
    --bs-btn-disabled-border-color: #156bc1;

    /* Fonts */
    --bs-font-sans-serif: "Calibri", sans-serif;
    --bs-body-font-size: 1.25rem;
}
a {
    text-decoration: none;
}
.usertype-option {
    padding: 24px 16px;
    background-color: #fff;
    border: 1px dashed var(--bs-gray-500);
    border-radius: 12px;
}
.usertype-option h5 {
    color: var(--bs-primary);
}
.usertype-option p {
    color: var(--bs-secondary);
}

.usertype-option:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    cursor: pointer;
    transition: background-color 300ms;
}

.usertype-option.clicked {
    background-color: var(--bs-primary);
    transition: background-color 300ms;
}
.usertype-option.clicked h5 {
    color: var(--bs-white);
}
.usertype-option.clicked p {
    color: var(--bs-white);
}

#carouselAuthBanner {
    max-height: 670px;
}

#carouselAuthBanner .carousel-inner {
    height: 670px;
    min-height: 40rem;
}
#carouselAuthBanner .carousel-inner .carousel-item {
    height: 670px;
    min-height: 40rem;
}
#carouselAuthBanner .carousel-inner .carousel-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 93%;
    border-radius: 1rem;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 25%
    );
    z-index: 1;
}
#carouselAuthBanner .carousel-inner .carousel-caption {
    position: sticky;
    z-index: 3;
    padding-bottom: 5%;
}
.sidebar-container {
    transition: 300ms ease-in-out;
}
.content-container {
    transition: 300ms ease-in-out;
}
.sidebar-container .sidebar-custom .sidebar-menus {
    gap: 20px;
}
.sidebar-container .sidebar-custom.opened {
}
.sidebar-item i.far {
    min-width: 24px;
}
.sidebar-container .sidebar-custom.opened .sidebar-menus .sidebar-item {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: var(--bs-gray);
}

.sidebar-container .sidebar-custom .sidebar-menus .sidebar-item.active {
    background-color: var(--bs-primary);
    padding: 0.75rem 1rem;
    color: var(--bs-white);
}

.sidebar-container .sidebar-custom .sidebar-menus .sidebar-item.active a {
    background-color: var(--bs-primary);
    padding: 0.75rem 1rem;
    color: var(--bs-white);
}
.sidebar-container .sidebar-custom.closed {
    transition: 300ms ease-in-out;
}
.sidebar-container .sidebar-custom.closed .sidebar-menus .sidebar-item {
    display: flex;
    justify-content: center;
}
.sidebar-container .sidebar-custom.closed .sidebar-menus .sidebar-item span {
    display: none;
}
.sidebar-container .sidebar-custom.closed .sidebar-minimize {
    text-align: center;
    justify-content: center;
}
.sidebar-container .sidebar-custom.closed .sidebar-minimize span {
    display: none;
}
.sidebar-container .sidebar-custom .sidebar-minimize {
    background-color: background-white;
}
.sidebar-container .sidebar-custom .sidebar-minimize:hover {
    cursor: pointer;
    background-color: var(--bs-gray-300);
}
.sidebar-container .sidebar-custom .sidebar-menus .sidebar-item {
    padding: 0.75rem 1rem;
    color: var(--bs-gray);
}
.sidebar-container .sidebar-custom .sidebar-menus .sidebar-item:hover {
    background-color: rgba(var(--bs-blue-rgb), 0.25);
    color: var(--bs-gray);
    cursor: pointer;
}
.sidebar-container .sidebar-custom .sidebar-menus img {
    display: none;
}
#learning-path-child {
    display: none;
    -webkit-animation: scale-in-ver-top 0.1s
        cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-ver-top 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.card-course {
    background-color: var(--bs-white);
    border-radius: 8px;
}
.card-course .card-img {
    position: relative;
}
.card-course .card-img .status {
    display: none;
}
.card-course .card-img img {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}
.card-course .card-img .badges {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 8px;
}
.card-course .card-body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    justify-content: space-between;
}
.card-course .card-body h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 40px;
}

/* Card Course Done */
.card-course.done {
}

.card-course.done .card-img .status {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(var(--bs-dark-rgb), 0.5);
    text-align: center;
    color: var(--bs-white);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.accordion .accordion-body .list-topic i {
    width: 16px;
}
.accordion .accordion-body .list-topic {
    border-bottom: 1px solid rgba(var(--bs-dark-rgb), 0.15);
    padding: 12px 8px;
}
.accordion .accordion-body .list-topic:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}
.accordion .accordion-body .list-topic:last-child {
    border-bottom: 0px solid rgba(var(--bs-dark-rgb), 0.15);
}

.select2-container--bootstrap5 .select2-selection {
    box-shadow: none;
    height: auto;
    outline: 0 !important;
}

.select2-container--bootstrap5.select2-container--focus:not(
        .select2-container--disabled
    )
    .form-select-solid,
.select2-container--bootstrap5.select2-container--open:not(
        .select2-container--disabled
    )
    .form-select-solid {
    background-color: var(--bs-gray-200);
}

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

.select2-container--bootstrap5.select2-container--disabled .form-select {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
}

.select2-container--bootstrap5.select2-container--disabled
    .form-select
    .select2-selection__placeholder,
.select2-container--bootstrap5.select2-container--disabled
    .form-select
    .select2-selection__rendered {
    color: var(--bs-gray-500) !important;
}

.select2-container--bootstrap5.select2-container--disabled
    .form-select.form-select-transparent {
    background-color: transparent;
    border-color: transparent;
}

.select2-container--bootstrap5 .select2-search.select2-search--inline {
    flex-grow: 1;
}

.select2-container--bootstrap5
    .select2-search.select2-search--inline
    .select2-search__field {
    color: var(--bs-gray-700);
    font-weight: 500;
    font-family: inherit !important;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.select2-container--bootstrap5
    .select2-search.select2-search--inline
    .select2-search__field::placeholder {
    color: var(--bs-gray-500);
}

.select2-container--bootstrap5
    .select2-search.select2-search--inline
    .select2-search__field::-moz-placeholder {
    color: var(--bs-gray-500);
    opacity: 1;
}

.select2-container--bootstrap5
    .form-select-solid
    .select2-search.select2-search--inline
    .select2-search__field {
    color: var(--bs-gray-700);
    font-family: inherit !important;
}

.select2-container--bootstrap5
    .form-select-solid
    .select2-search.select2-search--inline
    .select2-search__field::placeholder {
    color: var(--bs-gray-500);
}

.select2-container--bootstrap5
    .form-select-solid
    .select2-search.select2-search--inline
    .select2-search__field::-moz-placeholder {
    color: var(--bs-gray-500);
    opacity: 1;
}

.select2-container--bootstrap5 .select2-selection--single {
    display: flex;
    align-items: center;
}

.select2-container--bootstrap5
    .select2-selection--single
    .select2-selection__rendered {
    display: block;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-input-color);
}

.select2-container--bootstrap5
    .select2-selection--single
    .select2-selection__placeholder {
    color: var(--bs-gray-500);
}

.select2-container--bootstrap5
    .select2-selection--single.form-select-solid
    .select2-selection__rendered {
    color: var(--bs-gray-700);
}

.select2-container--bootstrap5
    .select2-selection--single.form-select-solid
    .select2-selection__placeholder {
    color: var(--bs-gray-500);
}

.select2-container--bootstrap5
    .select2-selection--single.form-select-transparent
    .select2-selection__rendered {
    color: var(--bs-gray-800);
}

.select2-container--bootstrap5
    .select2-selection--single.form-select-transparent
    .select2-selection__placeholder {
    color: var(--bs-gray-800);
}

.select2-container--bootstrap5
    .select2-selection--single.form-select-dark
    .select2-selection__rendered {
    color: var(--bs-gray-900);
}

.select2-container--bootstrap5 .select2-selection--multiple {
    display: flex;
    align-items: center;
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-search.select2-search--inline {
    display: inline-flex;
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-selection__rendered {
    display: inline;
    margin: 0;
    padding: 0;
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-selection__rendered
    .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    position: relative;
    background-color: var(--bs-gray-300);
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-selection__rendered
    .select2-selection__choice
    .select2-selection__choice__remove {
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--bs-gray-700);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-gray-7000%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-gray-7000%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    display: block;
    position: absolute;
    transform: translateY(-50%);
    opacity: 0.5;
    border: 0;
    transition: color 0.2s ease;
    top: 50%;
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-selection__rendered
    .select2-selection__choice
    .select2-selection__choice__remove
    span {
    display: none;
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-selection__rendered
    .select2-selection__choice
    .select2-selection__choice__remove:hover {
    opacity: 1;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--bs-primary-login);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-primary%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-primary%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    transition: color 0.2s ease;
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-selection__rendered
    .select2-selection__choice
    .select2-selection__choice__display {
    font-weight: 500;
}

.select2-container--bootstrap5
    .select2-selection--multiple
    .select2-selection__choice
    .select2-selection__choice__remove {
    height: 0.6rem;
    width: 0.6rem;
}

.select2-container--bootstrap5 .select2-selection--multiple.form-select-sm {
    min-height: calc(1.5em + 1.1rem + 2px);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple.form-select-sm
    .select2-selection__choice {
    border-radius: 0.425rem;
    padding: 0.1rem 0.35rem;
    margin-right: 0.35rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple.form-select-sm
    .select2-selection__choice
    .select2-selection__choice__display {
    margin-left: 0.95rem;
    font-size: 0.95rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple.form-select-sm
    .select2-search__field {
    height: 14px;
}

.select2-container--bootstrap5
    .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg) {
    min-height: calc(1.5em + 1.55rem + 2px);
    padding-top: 0.575rem;
    padding-bottom: 0.575rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg)
    .select2-selection__choice {
    border-radius: 0.475rem;
    padding: 0.1rem 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg)
    .select2-selection__choice
    .select2-selection__choice__display {
    margin-left: 1.1rem;
    font-size: 1.1rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg)
    .select2-search__field {
    height: 16px;
}

.select2-container--bootstrap5 .select2-selection--multiple.form-select-lg {
    min-height: calc(1.5em + 1.65rem + 2px);
    padding-top: 0.525rem;
    padding-bottom: 0.525rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple.form-select-lg
    .select2-selection__choice {
    border-radius: 0.625rem;
    padding: 0.15rem 0.65rem;
    margin-right: 0.65rem;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple.form-select-lg
    .select2-selection__choice
    .select2-selection__choice__display {
    margin-left: 1.25rem;
    font-size: 1.15rem;
}

.select2-container--bootstrap5
    .select2-selection--multiple.form-select-lg
    .select2-search__field {
    height: 18px;
}

.select2-container--bootstrap5 .select2-dropdown {
    border: 0;
    box-shadow: var(--bs-dropdown-box-shadow-login);
    border-radius: 0.475rem;
    padding: 1rem 0;
    background-color: var(--bs-light);
}

.modal-open .select2-container--bootstrap5 .select2-dropdown {
    z-index: 1056;
}

.select2-container--bootstrap5 .select2-dropdown .select2-search {
    padding: 0.5rem 1.25rem;
    margin: 0 0 0.5rem 0;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-search
    .select2-search__field {
    background-color: var(--bs-body-bg-login);
    padding: 0.55rem 0.75rem;
    color: var(--bs-gray-700);
    font-size: 0.95rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.425rem;
    outline: 0 !important;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-search
    .select2-search__field:active,
.select2-container--bootstrap5
    .select2-dropdown
    .select2-search
    .select2-search__field:focus {
    border: 1px solid var(--bs-gray-400);
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results
    > .select2-results__options {
    max-height: 250px;
    overflow-y: auto;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    color: var(--bs-gray-700);
    transition: color 0.2s ease;
    padding: 0.75rem 1.25rem;
    margin: 0 0;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__option--highlighted {
    background-color: var(--bs-component-hover-bg);
    color: var(--bs-component-hover-color);
    transition: color 0.2s ease;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__option--selected {
    background-color: var(--bs-component-hover-bg);
    color: var(--bs-component-hover-color);
    transition: color 0.2s ease;
    position: relative;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__option--selected:after {
    top: 50%;
    display: block;
    position: absolute;
    transform: translateY(-50%);
    height: 0.75rem;
    width: 0.75rem;
    content: "";
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--bs-component-hover-color);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3e%3cpath fill='var%28--bs-component-hover-color%29' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3e%3cpath fill='var%28--bs-component-hover-color%29' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/%3e%3c/svg%3e");
    mask-position: center;
    -webkit-mask-position: center;
    right: 1.25rem;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__option--disabled {
    color: var(--bs-gray-400);
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__message {
    color: var(--bs-gray-600);
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__option--group {
    padding-left: 0;
    padding-right: 0;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__option--group
    .select2-results__group {
    display: block;
    color: var(--bs-gray-800);
    font-weight: 500;
    font-size: 1.15rem;
    padding: 0 1.25rem 0 1.25rem;
    margin: 0 0 0.25rem 0;
}

.select2-container--bootstrap5
    .select2-dropdown
    .select2-results__option.select2-results__option--group
    .select2-results__option {
    padding: 0.75rem 1.25rem;
    margin: 0 0;
}

.select2-container--bootstrap5 .select2-selection__clear {
    display: block;
    height: 0.7rem;
    width: 0.7rem;
    top: 50%;
    right: 3rem;
    position: absolute;
    transform: translateY(-50%);
    background-color: var(--bs-gray-700) !important;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--bs-gray-700);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-gray-700%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-gray-700%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

.select2-container--bootstrap5 .select2-selection__clear span {
    display: none;
}

.select2-container--bootstrap5 .select2-selection__clear:hover {
    background-color: var(--bs-primary-login) !important;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--bs-primary-login);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-primary%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-primary%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}
#subordinateAccordion .accordion-header .accordion-button:not(.collapsed) {
    background-color: white;
}
#subordinateAccordion
    .accordion-item:first-of-type
    > .accordion-header
    .accordion-button {
    background-color: white;
    border: 0;
}
#subordinateAccordion .accordion-item:first-of-type {
    border: 0;
}
#subordinateAccordion .accordion-body {
    background-color: white;
    border: 0;
}
#subordinateAccordion .accordion-button {
    background-color: white;
    border: 0;
}
#subordinateAccordion .accordion-item {
    border: 0;
}
#subordinateAccordion .subordinate-card:hover {
    cursor: pointer;
    background-color: rgba(var(--bs-primary-rgb), 0.111);
    border: 1px solid rgba(var(--bs-primary-rgb), 1) !important;
    transition: 200ms ease-in-out;
}
#subordinateAccordion .subordinate-card.active {
    cursor: pointer;
    background-color: rgba(var(--bs-primary-rgb), 0.111);
    border: 1px solid rgba(var(--bs-primary-rgb), 1) !important;
    transition: 200ms ease-in-out;
}
#subordinateAccordion .subordinate-card-registerd:hover {
    cursor: pointer;
    background-color: rgba(var(--bs-danger-rgb), 0.111);
    border: 1px solid rgba(var(--bs-danger-rgb), 1) !important;
    transition: 200ms ease-in-out;
}
#subordinateAccordion .subordinate-card-registerd.active {
    cursor: pointer;
    background-color: rgba(var(--bs-danger-rgb), 0.111);
    border: 1px solid rgba(var(--bs-danger-rgb), 1) !important;
    transition: 200ms ease-in-out;
}
.side-subordinate-detail {
    width: 0%;
    display: none;
    -webkit-animation: slide-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: slide-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.side-subordinate-detail.open {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: start;
    top: 0;
    right: 0;
    margin: 0 0;
    padding: 42px 0;
    background: white;
    width: 30%;
    box-shadow: -4px 4px 12px 0px #4b4b4b2e;
    -webkit-animation: slide-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: slide-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    overflow-y: scroll;
}
.side-subordinate-detail.open::-webkit-scrollbar {
    width: 10px;
}
.side-subordinate-detail.open::-webkit-scrollbar-track {
    background: transparent;
}

.side-subordinate-detail.open::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb), 1);
    border: 1px solid white;
    border-radius: 50px;
}

.side-subordinate-detail.open::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-primary-rgb), 1);
}

.side-subordinate-detail.open::-webkit-scrollbar-button {
    display: none;
}
.side-subordinate-detail img {
    max-width: 200px;
}
.overlay-side-subordinate {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bs-dark-rgb), 0.15);
    z-index: 2;
}
.overlay-side-subordinate.openOverlay {
    display: block;
}
@-webkit-keyframes slide-right {
    0% {
        width: 0%;
    }
    100% {
        width: 30%;
    }
}
@keyframes slide-right {
    0% {
        width: 0%;
    }
    100% {
        width: 30%;
    }
}
@-webkit-keyframes slide-right-85 {
    0% {
        width: 0%;
    }
    100% {
        width: 85%;
    }
}
@keyframes slide-right-85 {
    0% {
        width: 0%;
    }
    100% {
        width: 85%;
    }
}
@-webkit-keyframes slide-right-55 {
    0% {
        width: 0%;
    }
    100% {
        width: 55%;
    }
}
@keyframes slide-right-55 {
    0% {
        width: 0%;
    }
    100% {
        width: 55%;
    }
}
@-webkit-keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}
#benefit-section img {
    max-width: 128px;
}
#carouselAuthBanner .carousel-inner .carousel-item img {
    aspect-ratio: 1 / 1;
}

@supports (-webkit-appearance: none) {
    @media only screen and (max-width: 424px) {
        #carouselSiteAnnouncements .carousel-control-prev {
            bottom: 47%;
        }
        #carouselSiteAnnouncements .carousel-control-next {
            bottom: 47%;
        }
        #carouselSiteAnnouncements .carousel-indicators {
            bottom: 45%;
        }
        #carouselAuthBanner .carousel-inner .carousel-item {
            height: 670px;
        }
        #carouselAuthBanner .carousel-inner {
            height: 670px;
            /* min-height: 20rem; */
        }
        .sidebar-container .sidebar-custom .sidebar-minimize {
            position: fixed;
            top: 50%;
            opacity: 50%;
            z-index: 99;
            left: 70%;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
            padding-top: 32px !important;
            padding-bottom: 32px !important;
            background-color: var(--bs-primary) !important;
            box-shadow: 3px 3px 12px #0000003b;
        }
        .sidebar-container .sidebar-custom {
            position: fixed;
            top: 50%;
            z-index: 99;
            left: 0;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
            padding-top: 32px !important;
            padding-bottom: 32px !important;
            background-color: var(--bs-primary) !important;
        }
        .sidebar-container .sidebar-custom .sidebar-menus {
            display: flex !important;
            opacity: 1;
            position: fixed;
            width: 80%;
            border-radius: 0 !important;
            height: 100%;
            top: 0;
            left: 0;
            margin-top: 0 !important;
            white-space: nowrap;
            overflow-y: scroll;
            transition: width 300ms ease-in;
            animation: slideOut 0.3s forwards;
            -webkit-transition: all 300ms ease-in;
            -webkit-animation: slideOut 300ms forwards;
        }
        .sidebar-container .sidebar-custom .sidebar-menus img {
            display: block;
            margin-top:24px;
        }
        /* Closed Sidebar */

        .sidebar-container .sidebar-custom.closed .sidebar-minimize {
            left: 0%;
        }
        .sidebar-container .sidebar-custom.closed .sidebar-menus {
            display: none !important;
            width: 0%;
            opacity: 0;
            transition: width 300ms ease-in;
            animation: slideOut 300ms forwards;
            -webkit-transition: width 300ms ease-in;
            -webkit-animation: slideOut 300ms forwards;
        }
        /*  */
        .sidebar-container .sidebar-custom .sidebar-minimize i {
            color: white !important;
        }
        .sidebar-container .sidebar-custom .sidebar-minimize span {
            display: none;
        }
        .sidebar-container
            .sidebar-custom
            .sidebar-minimize:hover
            &
            .sidebar-container
            .sidebar-custom
            .sidebar-minimize:active {
            background-color: rgba(var(--bs-primary-rgb), 0.75) !important;
        }
        .current-course .progress {
            width: 100%;
        }
        .current-course .img-current-course{
            max-width: 12rem;
        }
        .profile-picture-wrapper {
            aspect-ratio: 1 / 1;
            max-width: 100%;
        }
        .profile-picture-wrapper .user-avatar{
            aspect-ratio: 1 / 1;
        }
        .profile-picture-wrapper img {
            aspect-ratio: 1 / 1;
        }
        .card-profile .user-avatar {
            max-width: 100%;
        }
        .dropdown-menu-end[data-bs-popper] {
            right: 0vw;
            left: auto;
        }
        .dropdown-menu-end.notification-card[data-bs-popper] {
            right: -30vw;
            left: auto;
        }
        .notification-card {
            width: 275px;
        }
    }
}

@supports (-webkit-appearance: none) {
    @media only screen and (max-width: 767px) and (min-width: 426px) {
        .dropdown-menu-end.notification-card[data-bs-popper] {
            right: -20vw;
            left: auto;
        }
        #carouselSiteAnnouncements .carousel-control-prev {
            bottom: 40%;
        }
        #carouselSiteAnnouncements .carousel-control-next {
            bottom: 40%;
        }
        #carouselSiteAnnouncements .carousel-indicators {
            bottom: 45%;
        }
        .notification-card {
            width: 335px;
        }
        .profile-picture-wrapper {
            max-width: 200px;
        }
        .card-profile .user-avatar {
            max-width: 200px;
            margin-bottom: 8px;
        }
        .current-course .progress {
            width: 18rem;
        }
        .current-course img {
            width: 100%;
        }
        .dropdown-menu-end[data-bs-popper] {
            right: 0;
            left: auto;
        }
        .side-subordinate-detail {
            width: 0%;
            display: none;
            -webkit-animation: slide-right-85 0.2s
                cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: slide-right-85 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        }
        .side-subordinate-detail.open {
            display: flex;
            position: fixed;
            justify-content: center;
            align-items: start;
            top: 0;
            right: 0;
            margin: 0 0;
            padding: 42px 0;
            background: white;
            width: 30%;
            box-shadow: -4px 4px 12px 0px #4b4b4b2e;
            -webkit-animation: slide-right-85 0.2s
                cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: slide-right-85 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            overflow-y: scroll;
        }

        .card-header {
            padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
            margin-bottom: 0;
            color: var(--bs-card-cap-color);
            background-color: var(--bs-card-cap-bg);
            border-bottom: var(--bs-card-border-width) solid
                var(--bs-card-border-color);
        }
    }
}

@supports (-webkit-appearance: none) {
    @media only screen and (max-width: 991px) and (min-width: 420px) {
        #carouselSiteAnnouncements .carousel-control-next {
            bottom: 33%;
        }
        #carouselSiteAnnouncements .carousel-control-prev {
            bottom: 33%;
        }
        #carouselSiteAnnouncements .carousel-indicators {
            bottom: 28%;
        }

        .notification-card {
            width: 335px;
        }
        .sidebar-container .sidebar-custom.closed .sidebar-menus .sidebar-item {
            display: none !important;
        }
        .sidebar-container .sidebar-custom.closed .sidebar-menus .sidebar-item a {
            display: none !important;
        }
        .sidebar-container .sidebar-custom .sidebar-minimize {
            position: fixed;
            top: 50%;
            z-index: 99;
            opacity: 55%;
            left: 70%;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
            padding-top: 32px !important;
            padding-bottom: 32px !important;
            background-color: var(--bs-primary) !important;
            box-shadow: 3px 3px 12px #0000003b;
            transition: all 300ms ease-out;
        }
        .sidebar-container .sidebar-custom {
            position: fixed;
            top: 50%;
            z-index: 99;
            left: 0;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
            padding-top: 32px !important;
            padding-bottom: 32px !important;
            background-color: var(--bs-primary) !important;
        }
        .sidebar-container .sidebar-custom .sidebar-menus {
            max-height: 100vh;
            white-space: nowrap;
            overflow-y: scroll;
            display: flex !important;
            opacity: 1;
            position: fixed;
            width: 40%;
            border-radius: 0 !important;
            height: 100%;
            top: 0;
            left: 0;
            margin-top: 0 !important;
            transition: all 300ms ease-in;
            animation: slideOut 300ms forwards;
            -webkit-transition: all 300ms ease-in;
            -webkit-animation: slideOut 300ms forwards;
        }
        .sidebar-container .sidebar-custom .sidebar-menus img {
            display: block;
            padding-top: 24px;
            max-width: 234px;
        }
        /* Closed Sidebar */

        .sidebar-container .sidebar-custom.closed .sidebar-minimize {
            left: 0%;
        }
        .sidebar-container .sidebar-custom.closed .sidebar-menus {
            /* display: none!important; */
            width: 0%;
            /* opacity: 0; */
            transition: all 300ms ease-out;
            animation: slideIn 300ms forwards;
        }
        /*  */
        .sidebar-container .sidebar-custom .sidebar-minimize i {
            color: white !important;
        }
        .sidebar-container .sidebar-custom .sidebar-minimize span {
            display: none;
        }
        .sidebar-container
            .sidebar-custom
            .sidebar-minimize:hover
            &
            .sidebar-container
            .sidebar-custom
            .sidebar-minimize:active {
            background-color: rgba(var(--bs-primary-rgb), 0.75) !important;
        }
        .current-course img {
            max-width: 150px;
        }
        @supports (-webkit-appearance: none) {
            .current-course img {
                max-width: 150px;
            }
        }
        .current-course .progress {
            width: 20rem;
        }
    }
}

@supports (-webkit-appearance: none) {
    @media only screen and (min-width: 991px) {
        #carouselSiteAnnouncements .carousel-control-prev {
            bottom: 25%;
        }
        #carouselSiteAnnouncements .carousel-control-next {
            bottom: 25%;
        }

        #carouselSiteAnnouncements .carousel-indicators {
            bottom: 24%;
        }
        .notification-card {
            width: 420px;
        }

        #carouselAuthBanner .carousel-inner .carousel-item {
            height: 670px;
            /* min-height:33rem; */
        }
        #carouselAuthBanner .carousel-inner {
            height: 670px;
            /* min-height: 33rem; */
        }

        .current-course .progress {
            width: 23rem;
        }
        .side-subordinate-detail {
            width: 0%;
            display: none;
            -webkit-animation: slide-right-55 0.2s
                cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: slide-right-55 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        }
        .side-subordinate-detail.open {
            display: flex;
            position: fixed;
            justify-content: center;
            align-items: start;
            top: 0;
            right: 0;
            margin: 0 0;
            padding: 42px 0;
            background: white;
            width: 30%;
            box-shadow: -4px 4px 12px 0px #4b4b4b2e;
            -webkit-animation: slide-right-55 0.2s
                cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: slide-right-55 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            overflow-y: scroll;
        }
        .current-course img {
            max-width: 150px;
        }
        @supports (-webkit-appearance: none) {
            .current-course img {
                max-width: 150px;
            }
        }
        .side-subordinate-detail.open {
            display: flex;
            position: fixed;
            justify-content: center;
            align-items: start;
            top: 0;
            right: 0;
            margin: 0 0;
            padding: 42px 0;
            background: white;
            width: 30%;
            box-shadow: -4px 4px 12px 0px #4b4b4b2e;
            -webkit-animation: slide-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
                both;
            animation: slide-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            overflow-y: scroll;
        }
    }
}
.dropdown-menu.dropdown-menu-end .notification-body:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    transition: all 0.2s linear;
}
.dropdown-menu.dropdown-menu-end .notification-body {
    background-color: #fff;
    transition: all 0.2s linear;
}
.list-group-item {
    transition: background-color 0.3s;
    background-color: #fff;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.list-group-item:hover {
    background-color: #87ceeb;
}

.list-group-item.active {
    background-color: #0056b3;
    color: white;
}

.list-group-item.active:hover {
    background-color: #0056b3; /* Darker blue */
}
.list-group-item:nth-child(1) .badge-rank {
    background-color: #ffa500;
    width: 30px;
    height: 30px;
    align-self: center;
}
.list-group-item:nth-child(2) .badge-rank {
    background-color: gray;
    width: 30px;
    height: 30px;
    align-self: center;
}
.list-group-item:nth-child(3) .badge-rank {
    background-color: #f46929;
    width: 30px;
    height: 30px;
    align-self: center;
}
.carousel-control-prev-icon {
    background-image: url("../icon/left-carousel-icon.svg");
}
.carousel-control-next-icon {
    background-image: url("../icon/right-carousel-icon.svg");
}
.loading-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(41, 41, 41, 0.2);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}
.spinner {
    position: absolute;
    top: 50%;
    right: 50%;
    border: 8px solid rgba(21, 107, 193, 0.2);
    border-left-color: #156bc1;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes slideIn {
    from {
        width: 70%;
        display: flex !important;
    }
    to {
        width: 0;
        display: none !important;
    }
}

@keyframes slideOut {
    from {
        width: 0;
        display: none !important;
    }
    to {
        width: 70%;
        display: flex !important;
    }
}
.fc-right {
    display: flex;
}
.nav-tabs {
    border-bottom: 0px;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #ffffff;
}
.navbar-toggler-icon{
    background-image: url("../icon/hamburger.svg")
}
.navbar-toggler:focus{
    text-decoration: none;
    outline: 0;
    box-shadow: rgba(255, 255, 255, 0.39) 0 0 0 0.25rem;
}
.navbar-toggler{
    border: 1px solid rgb(255 255 255 / 15%);
}
.sidebar-custom.closed [hover-tooltip] {
    position: relative;
    cursor: default;
}
.sidebar-custom.closed [hover-tooltip]:hover::before {
    content: attr(hover-tooltip);
    font-size: 14px;
    width: 140px;
    text-align: center;
    position: absolute;
    display: block;
    top: 50%;
    left: calc(100% + 10px); /* Geser tooltip ke kanan */
    transform: translateY(-50%); /* Pusatkan secara vertikal */
    animation: fade-in 300ms ease;
    background: var(--bs-primary);
    border-radius: 4px;
    padding: 10px;
    color: #ffffff;
    z-index: 99;
}
.sidebar-custom.closed [hover-tooltip]:hover::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: calc(100% + 6px); /* Geser segitiga ke kanan */
    transform: translateY(-50%);
    border: 1px solid var(--bs-primary);
    border-color: transparent var(--bs-primary) transparent transparent;
    border-width: 6px 4px 6px 0; /* Segitiga ke kanan */
    animation: fade-in 300ms ease;
    z-index: 1;
}
.sidebar-custom.closed [hover-tooltip][tooltip-position=bottom]:hover::before {
    bottom: auto;
    top: calc(100% + 10px);
}
.sidebar-custom.closed [hover-tooltip][tooltip-position=bottom]:hover::after {
    bottom: auto;
    top: calc(100% + 6px);
    border-color: transparent transparent #272727;
    border-width: 0 6px 4px;
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .fc-toolbar{
    flex-wrap: wrap;
}