@media (max-width:1399.99px) {

    /* smartphones, iPhone, portrait 480x320 phones */
    html {
        font-size: x-small;
    }

    table {
        font-size: 1.1rem;
    }
}

@media (min-width:1400px) {

    /* big landscape tablets, laptops, and desktops */
    html {
        font-size: normal;
    }

    table {
        font-size: 1.1rem;
    }
}

.nav-link:not(.active) {
    color: #495057 !important;
}

@media (max-width:425px) {
    #tarjeta_LogIn {
        width: 65%;
        left: 17.5%
    }
}

@media (min-width:425.1px) and (max-width:700px) {
    #tarjeta_LogIn {
        width: 50%;
        left: 25%
    }
}

@media (min-width:700.1px) and (max-width:1050px) {
    #tarjeta_LogIn {
        width: 30%;
        left: 35%
    }
}

@media (min-width:1050.1px) {
    #tarjeta_LogIn {
        left: 42.5%;
        width: 20%;
    }
}

#tarjeta_LogIn.hide {
    transform: translateX(-100%);
}

.forgot-password-label {
    color: #e2001a;
}

.custom-synergie-button {
    background-color: #e2001a;
    color: white;
    padding: 0.575rem 0.75rem;
    border-radius: 5px;

    /* Añadir grosor a la fuente para hacerla más profesional */
    transition: background-color 0.3s ease;
    /* Añadir transición para mejorar la interacción */
}

.custom-synergie-button:hover {
    background-color: #d00015;
    /* Cambiar el color al pasar el mouse para mejorar la interacción */
}

@keyframes slidein {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
    }
}