body{
    /*background: #26A28C;*/
    background: #2E2D2C;
}
.mini-logo{
    filter: brightness(100);
}
.btn-circle {
    display: inline-block;

    border-radius: 50%;
    overflow: hidden;
}

.btn-circle a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000; /* Color del texto */
    padding: 15px;
}

.btn-google{
    border: 2px solid #25AE4A; 
}

.btn-outlook{
    border: 2px solid #229B93;
}

.btn-active{
    border: 2px solid #1993E2; 
}

.text-divider {
    display: flex;
    align-items: center; 
}

.text-divider::before,
.text-divider::after {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1; 
}

.text-divider {
    display: flex;
    align-items: center;
    --text-divider-gap: 1rem; 
}

.text-divider::before,
.text-divider::after {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1;
}

.text-divider::before {
    margin-right: var(--text-divider-gap);
}

.text-divider::after {
    margin-left: var(--text-divider-gap);
}

.btn-send {
    border-color: transparent;
    border-radius: 40px;
    background: linear-gradient(90deg, #1993E2 2.85%, #25AE4A 107.74%);
    color: white;
    transition: background 0.3s ease-in-out;
}

.btn-send:hover {
    background: linear-gradient(90deg, #25AE4A 2.85%, #1993E2 107.74%);
    color: white;
}

.form-check{
    color: #424242;
    font-style: normal;
    line-height: normal;
}
.errorMessage{
    color: tomato;
    font-size: small;
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (min-width: 320px) { 
    .mini-logo{
        height: 40px;
        width: 40px;
    }
    .title-login{
        margin-top: 15%;
        font-size:large ;
    }
    .img-login{
        z-index: 2;
        width: 60%;
    }
    .logo-zora{
        width: 70%;
        margin-top: -10%;
    }
    .form-login{
        width: 100%;
    }
    .left-rect{
        height: 30vh;
    }
    .right-rect{
        height: 70vh;
        background: white;
        border-radius: 40px 40px 0px 0px;
    }
    .text-footer{
        font-size: 10px;
    }

    .btn-circle a {
        padding: 10px;
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 426px) { 
    .mini-logo{
        height: 40px;
        width: 40px;
    }
    .title-login{
        margin-top: 10%;
        font-size:larger ;
    }
    .img-login{
        z-index: 2;
        width: 230px;
    }
    .logo-zora{
        width: 50%;
        margin-top: -5%;
    }
    .form-login{
        width: 100%;
    }
    .left-rect{
        height: 30vh;
    }
    .right-rect{
        height: 70vh;
        background: white;
        border-radius: 40px 40px 0px 0px;
    }
    .text-footer{
        font-size: 10px;
    }

    .btn-circle a {
        padding: 10px;
        width: 40px;
        height: 40px;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .title-login{
        margin-top: 5%;
        font-size: xx-large;
    }
    .img-login{
        z-index: 2;
        width: 200px;
    }
    .logo-zora{
        
        width: 40%;
    }
    .form-login{
        width: 80%;
    }
    .left-rect{
        height: 30vh;
    }
    .right-rect{
        height: 70vh;
        background: white;
        border-radius: 40px 40px 0px 0px;
    }

    .btn-circle a {
        padding: 10px;
        width: 40px;
        height: 40px;
    }

    .text-footer{
        font-size: 12px;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
        .mini-logo{
        height: 60px;
        width: 60px;
    }
    .title-login{
        margin-top: 25%;
    }
    .img-login{
        margin: 10% auto;
        z-index: 2;
        width: 70%;
    }
    .logo-zora{
        width: 50%;
    }

    .form-login{
        width: 90%;
    }
    
        .btn-circle a {
        padding: 15px;
        width: 60px;
        height: 60px;
    }

    .right-rect{
        height: 100vh;
        background-color: white;
        border-radius: 30px 0px 0px 30px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .mini-logo{
        height: 80px;
        width: 80px;
    }
    .title-login{
        margin-top: 15%;
        font-size: 3rem;
    }
    .img-login{
        width: auto;
    }
        .form-login{
        width: 50%;
    }
    .left-rect{
        height: 100vh;
    }
}