:root {
    --bg-color: #E9E9E9;
    /*Primary color*/
    --bs-primary: #25398b !important;
    --bs-primary-rgb: 37, 57, 139 !important;
    --bs-text-primary: #25398b !important;
    --bs-primary-active: #0054a6 !important;

    /*Custom Menu Link*/
    --bs-menu-link-bg-color-here: rgba(255, 255, 255, 0.1) !important;
    --bs-menu-link-bg-color-hover: rgba(255, 255, 255, 0.1) !important;
    --bs-menu-link-bg-color-show: rgba(255, 255, 255, 0.1) !important;
    --bs-menu-link-bg-color-active: rgba(255, 255, 255, 0.1) !important;

    /*Secondary color*/
    --bs-secondary-1: #008ccf !important; /* Secondary color 1 */
    --bs-secondary-1-rgb: #008ccf !important;
    --bs-secondary-2: #0054a6 !important; /* Secondary color 2 */
    --bs-secondary-2-rgb: #0054a6 !important;
    --bs-secondary-3: #ae932b !important; /* Secondary color 3 */
    --bs-secondary-3-rgb: #ae932b !important;

    /*APP Header Height*/
    --bs-app-header-height: 50px !important;

    /*Pagination custom*/
    --bs-component-active-bg: var(--bs-primary) !important;
    --bs-component-hover-color: var(--bs-primary) !important;

    --bs-view: #009198;
    --bs-view-active: #0ba896;
    --bs-edit: #008ccf;
    --bs-edit-active: #17a9ef;
}

/*-----------------------*/
/*Font*/
@font-face {
    font-family: Krasar-regular;
    src: url(../../../../fonts/Krasar/Krasar-Regular.ttf);
}

@font-face {
    font-family: Krasar-light;
    src: url(/public/fonts/Krasar/Krasar-Light.ttf);
}

@font-face {
    font-family: Krasar-bold;
    src: url(/public/fonts/Krasar/Krasar-Bold.ttf);
}

/*-----------------------*/
/*Body*/
body {
    font-family: Krasar-regular, sans-serif;
}

/*-----------------------*/
/*Content background*/
.bg-content {
    background-color: var(--bg-color);
}

/*-----------------------*/
/*Custom buttons*/
.btn-cancel {
    --bs-btn-font-weight: 500;
    --bs-btn-color: gray;
    --bs-btn-bg: #E6E7E8;
    --bs-btn-border-color: #E6E7E8;
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #c1c0c0;
    --bs-btn-hover-border-color: #c1c0c0;
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #E6E7E8;
    --bs-btn-active-border-color: #E6E7E8;
}

.btn-view {
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: #009198;
    --bs-btn-border-color: #009198;
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #0ba896;
    --bs-btn-hover-border-color: #0ba896;
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #009198;
    --bs-btn-active-border-color: #009198;
}

.btn.btn-view {
    color: var(--bs-info-inverse);
    border-color: var(--bs-view);
    background-color: var(--bs-view)
}

.btn.btn-view .svg-icon, .btn.btn-view i {
    color: var(--bs-info-inverse)
}

.btn.btn-view.dropdown-toggle:after {
    color: var(--bs-info-inverse)
}

.btn-check:active + .btn.btn-view, .btn-check:checked + .btn.btn-view, .btn.btn-view.active, .btn.btn-view.show, .btn.btn-view:active:not(.btn-active), .btn.btn-view:focus:not(.btn-active), .btn.btn-view:hover:not(.btn-active), .show > .btn.btn-view {
    color: var(--bs-info-inverse);
    border-color: var(--bs-view-active);
    background-color: var(--bs-view-active) !important
}

.btn-check:active + .btn.btn-view .svg-icon, .btn-check:active + .btn.btn-view i, .btn-check:checked + .btn.btn-view .svg-icon, .btn-check:checked + .btn.btn-view i, .btn.btn-view.active .svg-icon, .btn.btn-view.active i, .btn.btn-view.show .svg-icon, .btn.btn-view.show i, .btn.btn-view:active:not(.btn-active) .svg-icon, .btn.btn-view:active:not(.btn-active) i, .btn.btn-view:focus:not(.btn-active) .svg-icon, .btn.btn-view:focus:not(.btn-active) i, .btn.btn-view:hover:not(.btn-active) .svg-icon, .btn.btn-view:hover:not(.btn-active) i, .show > .btn.btn-view .svg-icon, .show > .btn.btn-view i {
    color: var(--bs-info-inverse)
}

.btn-check:active + .btn.btn-view.dropdown-toggle:after, .btn-check:checked + .btn.btn-view.dropdown-toggle:after, .btn.btn-view.active.dropdown-toggle:after, .btn.btn-view.show.dropdown-toggle:after, .btn.btn-view:active:not(.btn-active).dropdown-toggle:after, .btn.btn-view:focus:not(.btn-active).dropdown-toggle:after, .btn.btn-view:hover:not(.btn-active).dropdown-toggle:after, .show > .btn.btn-view.dropdown-toggle:after {
    color: var(--bs-info-inverse)
}

.btn-edit {
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-secondary-1);
    --bs-btn-border-color: var(--bs-secondary-1);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #17a9ef;
    --bs-btn-hover-border-color: #17a9ef;
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: var(--bs-secondary-1);
    --bs-btn-active-border-color: var(--bs-secondary-1);
}

.btn.btn-edit {
    color: var(--bs-info-inverse);
    border-color: var(--bs-edit);
    background-color: var(--bs-edit)
}

.btn.btn-edit .svg-icon, .btn.btn-edit i {
    color: var(--bs-info-inverse)
}

.btn.btn-edit.dropdown-toggle:after {
    color: var(--bs-info-inverse)
}

.btn-check:active + .btn.btn-edit, .btn-check:checked + .btn.btn-edit, .btn.btn-edit.active, .btn.btn-edit.show, .btn.btn-edit:active:not(.btn-active), .btn.btn-edit:focus:not(.btn-active), .btn.btn-edit:hover:not(.btn-active), .show > .btn.btn-edit {
    color: var(--bs-info-inverse);
    border-color: var(--bs-edit-active);
    background-color: var(--bs-edit-active) !important
}

.btn-check:active + .btn.btn-edit .svg-icon, .btn-check:active + .btn.btn-edit i, .btn-check:checked + .btn.btn-edit .svg-icon, .btn-check:checked + .btn.btn-edit i, .btn.btn-edit.active .svg-icon, .btn.btn-edit.active i, .btn.btn-edit.show .svg-icon, .btn.btn-edit.show i, .btn.btn-edit:active:not(.btn-active) .svg-icon, .btn.btn-edit:active:not(.btn-active) i, .btn.btn-edit:focus:not(.btn-active) .svg-icon, .btn.btn-edit:focus:not(.btn-active) i, .btn.btn-edit:hover:not(.btn-active) .svg-icon, .btn.btn-edit:hover:not(.btn-active) i, .show > .btn.btn-edit .svg-icon, .show > .btn.btn-edit i {
    color: var(--bs-info-inverse)
}

.btn-check:active + .btn.btn-edit.dropdown-toggle:after, .btn-check:checked + .btn.btn-edit.dropdown-toggle:after, .btn.btn-edit.active.dropdown-toggle:after, .btn.btn-edit.show.dropdown-toggle:after, .btn.btn-edit:active:not(.btn-active).dropdown-toggle:after, .btn.btn-edit:focus:not(.btn-active).dropdown-toggle:after, .btn.btn-edit:hover:not(.btn-active).dropdown-toggle:after, .show > .btn.btn-edit.dropdown-toggle:after {
    color: var(--bs-info-inverse)
}

/*-----------------------*/
/*Custom switch color of not checked*/
.form-switch.form-check-solid .form-check-input:not(:checked) {
    background-color: #c7c4c4;
}

/*-----------------------*/
/*Custom Sidebar Scroll*/
#kt_app_sidebar_menu_scroll::-webkit-scrollbar-thumb {
    background-color: rgba(122, 122, 122, 0.3) !important;
    border-radius: 0.5rem;
}

#kt_app_sidebar_menu_scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(155, 155, 155, 0.3) !important;
}

/*-----------------------*/
/*App Sidebar Menu*/
.app-sidebar .menu > .menu-item .menu-link.active {
    background-color: #1a2863 !important; /*Active Menu*/
    color: var(--bs-primary-inverse) !important;
}

.app-sidebar .menu > .menu-item .menu-link .menu-icon i {
    color: #dbdfe9 !important; /*Normal icon*/
}

.app-sidebar .menu > .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i, .app-sidebar .menu > .menu-item.here > .menu-link .menu-icon i, .app-sidebar .menu > .menu-item.show > .menu-link .menu-icon i, .app-sidebar .menu > .menu-item .menu-link.active .menu-icon i {
    color: var(--bs-primary-inverse) !important; /*Icon in 4 states*/
}

.app-sidebar .menu > .menu-item .menu-sub .menu-item .menu-link .menu-title {
    color: #dbdfe9 !important; /*Normal title*/
    font-weight: 600 !important;
}

.app-sidebar .menu > .menu-item:not(.here) .menu-sub .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title, .app-sidebar .menu > .menu-item .menu-sub .menu-item.here > .menu-link .menu-title, .app-sidebar .menu > .menu-item .menu-sub .menu-item.show > .menu-link .menu-title, .app-sidebar .menu > .menu-item .menu-sub .menu-item .menu-link.active .menu-title {
    color: var(--bs-primary-inverse) !important; /*Title in 4 states*/
}

.app-sidebar .menu > .menu-item .menu-link .menu-arrow:after {
    mask-repeat: no-repeat; /*Normal arrow*/
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: #dbdfe9 !important;
}

.app-sidebar .menu > .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after, .app-sidebar .menu > .menu-item .menu-link.active .menu-arrow:after, .app-sidebar .menu > .menu-item.here > .menu-link .menu-arrow:after, .app-sidebar .menu > .menu-item.show > .menu-link .menu-arrow:after {
    background-color: var(--bs-primary-inverse) !important; /*Arrow in 4 states*/
}

/*-----------------------*/
/*CK Editor*/
.ck-content .text-tiny {
    font-size: 0.7em;
}

.ck-content .text-small {
    font-size: 0.85em;
}

.ck-content .text-big {
    font-size: 1.4em;
}

.ck-content .text-huge {
    font-size: 1.8em;
}

/*-----------------------*/
/*H Custom Scroll*/
@media screen and (min-width: 1444px) {
    .h-custom-scroll {
        height: calc(100vh - 20rem) !important;
    }
}

@media screen and (min-width: 1444px) {
    .h-custom-scroll-create {
        height: calc(100vh - 14rem) !important;
    }
}

/*-----------------------*/
/*Other Customization*/
.pad-l-r-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

#viewContent img {
    width: 100%;
    object-fit: contain;
}

.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.2;
    margin: 0;
    padding: 0;
}

/*-----------------------*/
/*APP Header Height*/
[data-kt-app-header-minimize=on] {
    --bs-app-header-height: 50px !important;
}

/*-----------------------*/
/*APP Sidebar Logo*/
#kt_app_sidebar_logo {
    height: 150px; /* Default state (sidebar expanded) */
    transition: height 0.3s ease;
}

.app-sidebar-logo-default {
    height: 120px;
    display: block;
    transition: height 0.3s ease;
}

.app-sidebar-logo-minimize {
    height: 60px;
    display: none;
    transition: height 0.3s ease;
}

.app-sidebar-toggle {
    top: 25px; /* Adjust the toggle button position */
}

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