#animation-login {
    width: 450px;
}

.animation-arrow {
    transform: rotate(180deg);
    width: 40px
}

#animation-detail {
    width: 75%
}

#figure-animate {
    width: 15%;
}

#animation-register {
    width: 300px;
}

.logo-qractivity {
    width: 20%;
}

.size-information {
    width: 100%;
    height: 463px;
}

#animation-habilidades {
    width: 400px;
}

#animation-register2 {
    width: 170px;
}

.name {
    width: 115px;
}

.animation-master {
    position: absolute;
    width: 22%;
    margin-left: 267px;
    margin-top: 77px;
}


#qr-video {
    width: 80%;
}

@media only screen and (max-width: 767px) {
    .month-header {
        position: relative; /* Asegura que no sea sticky en vista móvil */
    }
}



    .animation-master {
        position: absolute;
        width: 41%;
        margin-left: 214px;
        margin-top: 104px;
    }

    #animation-login {
        width: 410px;
    }

    #animation-habilidades {
        width: 350px;
    }

    .logo-qractivity {
        width: 225px;
    }

    .size-information {
        width: 100%;
        height: 450px;
    }

    .animation-arrow {
        transform: rotate(180deg);
        width: 40px;
    }



    #figure-animate {
        width: 40%;
    }

    #animation-register {
        width: 350px;
    }

    #animation-register2 {
        width: 270px;
    }
}

.common-width {
    width: 100%; /* Ajusta el ancho según sea necesario */
    max-width: 300px; /* Puedes ajustar este valor según tus necesidades */
}

.month-section {
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente si es necesario */
    flex-direction: column; /* Asegura que los elementos hijos se apilen verticalmente */
}

.arrow-container {
    align-items: center;
    justify-content: center;
    background-color: #ff5900; /* Color de fondo para el bloque de la flecha */
    border-radius: 8px; /* Bordes redondeados */
    margin-left: auto; /* Empuja el contenedor hacia la derecha */
    width: 100%; /* Asegura que tenga el mismo ancho */
    max-width: 50px; /* Ajusta este valor según sea necesario */
}

.arrow-icon {
    font-size: 2rem; /* Ajusta el tamaño de la flecha */
    color: white; /* Color de la flecha */
}

.month-header {
    background-color: #ff5900 !important; /* Color de fondo naranja */
    color: inherit; /* Color del texto predeterminado del tema */
    height: 70px; /* Ajusta la altura de las tarjetas */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Ajusta el borde redondeado */
}


/* Estilos para que el menú esté por encima del mapa */
.mud-appbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Asegura que el menú esté sobre el mapa */
}

.mud-progress-linear.mud-progress-linear-color-info:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: #ff5900;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-check-input {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    accent-color: #ff5900;
}

.form-check-label {
    font-size: 16px;
    }
}


#qr-video {
    width: 80% !important;
    max-width: 400px;
    height: auto;
    object-fit: contain;
    z-index: 1;
}


@media (max-width: 768px) {
    #qr-video {
        max-width: 100%;
        margin-top: 20px;
    }

    //