/* styles.css */
.loader {
    width: 40px;
    height: 40px;
    --c: no-repeat linear-gradient(#D1D3E2 0 0);
    background: var(--c), var(--c), var(--c), var(--c);
    background-size: 21px 21px;
    animation: l5 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
    /* Centrar vertical y horizontalmente */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* Ajustar el z-index para que esté por debajo del calendario */
}

@keyframes l5 {
    0% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    }
    33% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        width: 60px;
        height: 60px;
    }
    66% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        width: 60px;
        height: 60px;
    }
    100% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
    }
}

.hide {
    opacity: 0;
}