* {
    --primary-color: #00217b; /* Updated Base Color */
    --kt-body-bg: var(--primary-color) !important;
    --kt-primary: var(--primary-color) !important;
    --bs-link-color: var(--primary-color) !important;
    --kt-pagination-active-bg: var(--primary-color) !important;
    --bs-pagination-color: var(--primary-color) !important;
    --bs-nav-pills-link-active-bg: var(--primary-color) !important;
    --kt-app-sidebar-bg-color: #001649 !important; /* Darker shade of new base color */
    --kt-app-header-base-bg-color: #001649 !important; /* Darker shade of new base color */
    --kt-app-header-sticky-bg-color: #001649 !important; /* Darker shade of new base color */
    --kt-app-toolbar-base-bg-color: #001649 !important; /* Darker shade of new base color */
    --kt-app-toolbar-sticky-bg-color: #001649 !important; /* Darker shade of new base color */
    --kt-app-sidebar-width: 50px !important;
    --kt-light: var(--kt-app-bg-color);
}

a {
    --bs-link-color: var(--primary-color) !important;
}

.swal2-popup {
    background-color: white !important;
}

.flatpickr-calendar, .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: white !important;
}

.text-primary {
    --kt-text-primary: var(--primary-color) !important;
}

.toolbar-button {
    color: var(--bs-light) !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field {
    background-color: white !important;
}

.active .toolbar-button {
    color: var(--primary-color) !important;
}

#kt_app_toolbar .menu-link {
    color: var(--primary-color) !important;
    font-size: 1.1rem;
}

#kt_app_toolbar .menu-link.active {
    background-color: var(--kt-light-active);
}

.select2-results__group {
    padding-left: 10px !important;
}

.bg-login {
    background: linear-gradient(
        120deg,
        var(--kt-primary),
        color-mix(in srgb, var(--kt-primary) 75%, white),
        var(--kt-primary),
        color-mix(in srgb, var(--kt-primary) 65%, black),
        var(--kt-primary),
        color-mix(in srgb, var(--kt-primary) 75%, white), /* repite para cerrar el ciclo */
        var(--kt-primary)
    );

    background-size: 600% 600%;
    animation: waveMove 10s linear infinite;
}

@keyframes waveMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.bg-body-circles input::placeholder {
    color: #BBBBBB;
}

hr.hr-text {
    position: relative;
    border: none;
    height: 15px;
    background: var(--kt-primary);
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    border-radius: 30rem;
    padding: 2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.w-fit-content {
    width: fit-content !important;
}

.scrolled .custom-scrolled-image {
    transform: scale(0.7) translate(0px, -20px);
    transition: transform 0.3s ease-in-out;
}

.scrolled .profile-menu {
    margin-top: 0 !important;
}

.fade-in-custom {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    #kt_app_main {
        padding-top: var(--kt-app-header-height) !important;
    }
}

#kt_app_content_container{
    max-width: 1800px;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.glass-effect .text-primary{
    color: lightgrey !important;
}

.glass-effect .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--bs-white);
}

.glass-effect .form-control:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
}

.glass-effect .form-control::placeholder {
    color: lightgrey;
}

/* Para que el efecto glass funcione mejor, el fondo debe tener algo de contenido/color */
.glass-container {
    background: linear-gradient(135deg, transparent 0%, transparent 100%);
    position: relative;
}