*{
    --primary-color: rgb(28, 133, 199);
    --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;
    --kt-body-bg-circles: rgb(28, 133, 199) !important;
    --kt-body-bg-circles-color: rgb(27, 127, 190) !important;
    --kt-app-sidebar-bg-color: rgb(28, 133, 199) !important;
    --kt-app-header-base-bg-color: rgb(28, 133, 199) !important;
    --kt-app-header-sticky-bg-color: rgb(28, 133, 199) !important;
    --kt-app-toolbar-base-bg-color: rgb(28, 133, 199) !important;
    --kt-app-toolbar-sticky-bg-color: rgb(28, 133, 199) !important;
    --kt-app-sidebar-width: 50px !important;
}

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

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

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

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

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

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

.bg-body-circles {
    /* Color base */
    background-color: var(--kt-body-bg-circles) !important;


    /* Múltiples capas de círculos escalados */
    background-image:
            radial-gradient(circle, var(--kt-body-bg-circles-color) 10px, transparent 0% ),
            radial-gradient(circle, var(--kt-body-bg-circles-color) 15px, transparent 0%),
            radial-gradient(circle, var(--kt-body-bg-circles-color) 20px, transparent 0%),
            radial-gradient(circle, var(--kt-body-bg-circles-color) 25px, transparent 0%),
            radial-gradient(circle, var(--kt-body-bg-circles-color) 30px, transparent 0%),
            radial-gradient(circle, var(--kt-body-bg-circles-color) 25px, transparent 0%),
            radial-gradient(circle, var(--kt-body-bg-circles-color) 20px, transparent 0%),
            radial-gradient(circle, var(--kt-body-bg-circles-color) 15px, transparent 0%);
        /* Tamaños y posiciones de las capas */
    background-size: 480px 65px;


    /* Alineación centrada de cada capa */
    background-position:
        0px 0,
        60px 0,
        120px 0,
        180px 0,
        240px 0,
        300px 0,
        360px 0,
        420px 0;

    /* Repetir el patrón en ambas direcciones */
    background-repeat: repeat;

}

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

.bg-body-circles, .bg-body-circles input.form-control{
    color: whitesmoke !important;
}

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

hr.hr-text {
    position: relative;
    border: none;
    height: 13px;
    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;
    }
}