* {
    --kt-primary-inverse: var(--primary-color-inverse) !important;
    --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);
}

.app-sidebar-primary, .app-sidebar {
    --kt-app-sidebar-primary-base-bg-color: var(--kt-app-sidebar-bg-color); /* Blue */
    --kt-app-sidebar-primary-base-bg-color-mobile: var(--kt-app-sidebar-bg-color); /* Blue */
    --kt-app-sidebar-base-bg-color-mobile: var(--kt-app-sidebar-bg-color); /* Blue */
}

.app-sidebar-primary .app-sidebar-menu .menu>.menu-item>.menu-link .menu-icon i {
    color: var(--kt-text-muted); /* Darker Shade of Blue */
}


.btn-white{
    --kt-white: #FFFFFF; /* White */
}

.font-alternative{
    font-family: 'Barlow Condensed', sans-serif;
}

.app-header {
    --kt-app-header-base-bg-color-mobile: var(--kt-app-sidebar-bg-color); /* Blue */
}

hr.hr-text::before{
    --kt-primary: #00bee7; /* Bright Blue */
}

.btn.btn-success {
    --kt-success: #28A745; /* Green */
    --kt-success-active: #218838; /* Darker Green */
}
.btn.btn-primary {
    color: whitesmoke;
    --kt-primary-active: #001649; /* Darker Bright Blue */
}
.btn.btn-secondary {
    --kt-secondary: #686868; /* Gray */
    --kt-secondary-inverse:  #FFFFFF; /* White */
    --kt-secondary-active: #545B62; /* Darker Gray */
}
.btn.btn-warning {
    --kt-warning: #FFC107; /* Yellow */
    --kt-warning-active: #E0A800; /* Darker Yellow */
}
.btn.btn-danger {
    --kt-danger: #DC3545; /* Red */
    --kt-danger-active: #BD2130; /* Darker Red */
}

.btn.btn-blue{
    --bs-btn-bg: #4267B2; /* Bright Blue */
}

.btn-blue{
    --kt-primary: #00bee7; /* Bright Blue */
    --kt-primary-active: #00bee7; /* Darker Bright Blue */
}

.bg-login{
    --kt-app-blank-bg-color: #EFEFEF; /* Light Gray */
}

body, html, .app {
    font-family: 'Barlow Condensed', sans-serif;

}

body, .form-control {
    font-size: 1.2rem !important;

}

.btn-sm{
    font-size:1.1rem;
}



@media (max-width: 991.98px) {
    body,html {
        font-size:0.9rem!important
    }
}

@media (max-width: 767.98px) {
    body,html {
        font-size:0.9rem!important
    }
}

i.bi{
    --kt-text-primary: #00bee7; /* Bright Blue */
}

a{
    --bs-link-color: #00bee7; /* Bright Blue */
}

a:hover{
    color: #001649; !important;
    /* Bright Blue */
}

a.text-primary-dark{
    --bs-link-color: #293462; /* Darker Shade of Blue */
}

.text-green{
    color: #3ffb43; /* Green */
}

.text-purple{
    color: #f930df; /* Green */
}

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

.timeline-label .timeline-label{
    width: 100px !important;
    text-align: right;
    padding-right: 7px;
}

.timeline-label .timeline-content{
    min-width: 100px !important;
}

.timeline-label:before{
    left: 103px !important;
}

button.close-modal {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    font-size: 30px;
}

.glass-container input::placeholder {
    color: #ffffff !important;
}