/* @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); */

@media (min-width: 768px) {

    body{
        background-image: linear-gradient(to right, rgba(4, 0, 121, 0.799), rgba(76, 26, 72, 0.799)),
        url('../images/vigencia-bg.jpg');
       background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #040079;
    }

    .navbarImg{
        background-image: url('../images/logocompecerhorizontal.png');
        background-size: 15%;
        background-position: 10px center;
        background-repeat: no-repeat;
        margin-left: 3% !important;
    }

    .card1{
        top: 50%;
        left: 50%;
        margin: -110px 0 0 -18%;
        width: 35%;
        border-radius: 25px;
        padding: 2% 4% 2% 4%;
        position: absolute;
        background-color: white !important
    }

    .text1{
        margin-top: 20px !important;
        color: white;
        text-align: center;
    }

    .bodyText{
        color: #999999;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    input{
        width: 100%;
        border: 0;
        outline: none;
        border-bottom: 1px solid #999999;
    }

    input::placeholder{
        color: #999999;
        font-size: 17px !important;
        
    }

    .gobackButton, .searchButton{
        background-image: linear-gradient(to right, #040079 0%, #5a2555 80%);
        border-radius:50px;
        color: white;
        width: 40%;
        height: 40px;
    }

    .alertText{
        color: #4C1A48;
        text-align: center;

    }


}

/*diseño para dispositivos menores a 768px  */
@media (max-width: 768px) {
    html, body{
        height:100%;
        margin:0;
        display: flex;
        flex-direction: column;
    }

    body{
        background-image: linear-gradient(to right, #040079 0%, #5a2555 80%);
    }

    .navbarImg{
        background-image: url('../images/logocompecerhorizontal.png');
        background-size: 15%;
        background-position: 10px center;
        background-repeat: no-repeat;
        margin-left: 3% !important;
    }

    .text1{
        margin-top: 10px !important;
        color: white;
        text-align: center;
    }

    .userText{
        color: #999999;
        font-size: 9px;
        text-align: left !important;
    }

    .textLogin{
        color: #040079;
        font-weight: bold;
        font-size: 30px;
    }

    .textLogin2{
        color: #999999;
        font-size: 10px;
    }

    .textPasswordForgotten{
        color: #999999;
        font-size: 11px;
    }

    .errorText{
        color: #ff0000;
        font-size: 11px;
        text-align: center;
    }

    .loginButton{
        background-image: linear-gradient(to right, #040079 0%, #5a2555 80%);
        border-radius:50px;
        color: white;
        width: 70%;
        height: 30px;
    }

    .align-center{
        text-align: center
    }

    .card1{
        background-color: white;
        width: 90%;
        border-radius: 20px;
        padding: 23px;
        margin: 0 auto;
        float: none;
    }

    .buttonRequest{
        background-color: white;
        color: #040079;
        border-radius: 50px;
        width: 90%;
        height: 35px;
        border: 0;
        font-size:11px;
        font-weight: bold;
    }

    .buttonRequest:hover{
        color: #4C1A48;
    }

    .buttonCertification{
        background-color:#4C1A48;
        color: white;
        border-radius: 50px;
        width: 60%;
        height: 35px;
        border: 0;
        font-size: 11px;
    }

    .buttonCertification:hover{
        color: #999999;
    }


    input{
        border: 0;
        outline: none;
        border-bottom: 1px solid #999999;
    }

}