* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #262A33;
}

/*===========================================================*/
.container {
    width: 50em;
    height: 450px;
    margin: 200px auto;
    display: flex;
    background-color: #4869B6;
    border-radius: 20px;
}


.container .container-inf {
    width: 400px;
    height: 350px;
    display: block;

    position: absolute;
    left: 19em;
    /*border-radius: 40px 0 0 40px;*/
    font-family: 'Jost', sans-serif;
    font-size: 40px;

    z-index: 700;

}

.container .container-inf .informacao {
    width: 500px;
    height: 120px;
    margin: 10px 0 0 0;

}


.container .container-inf .informacao>label {
    width: 120px;
    height: 50px;

    margin: 40px 0 0 150px;
    font-weight: bold;
    color: white;

}


.container .container-inf .informacao>input {
    width: 300px;
    height: 40px;
    margin-left: 60px;
    margin-top: 10px;
    display: inline-block;

    padding-left: 7px;

    text-align: left;

    border: none;
    border-radius: 5px;
    background-color: #D9D9D9;
    box-shadow: 2px 10px 15px rgba(0, 0, 0, 0.25);
}


.container .btn-cadastro {
    width: 450px;
    height: 40px;
    display: flex;
    justify-content: center;

    position: relative;
    top: 170px;
    right: 10px;
}

.container .btn-cadastro>.btn-login,
.btn-registro {
    font-size: 24px;
    font-family: 'jost', sans-serif;
    font-weight: bold;
    margin-right: 30px;
    margin-left: 20px;
    padding-bottom: 40px;
    cursor: pointer;
}

.container .redirecionamento {
    width: 25em;
    height: 5em;
    display: flex;
    flex-direction: row;
    position: relative;
    top: 390px;
    left: 190px;
    font-size: 20px;

    font-family: 'jost', sans-serif;
    font-weight: bold;
    color: white;


}

.container .redirecionamento h1 {
    width: 370px;
}

.container .redirecionamento a {
    width: 240px;
    height: 60px;
    position: relative;
    left: -10px;
    top: 1px;

    font-size: 30px;
    text-decoration: none;
    color: black;
    cursor: pointer;
}


/*Tela de loading */


.btn-login.loading{
    color: #D9D9D9;
    pointer-events: none;
    user-select: none;
 
}

.btn-login.loading::after{
    position: absolute;
    
    right: 49%;
    top: 10%;

    content: '';
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 100%;
    border: 2px solid transparent;
    border-left-color: black;

    background: transparent;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to{
        transform: rotate(0deg);
    }
    from{
        transform: rotate(-360deg);
    }
}


@media screen and (min-width: 320px) and (max-width: 767px) {
    .container {
        width: 22em;
        margin: 120px 0 0 10px;
    }

    .container .container-inf {
        width: 10em;
        height: 2em;
        display: inline;
        top: 15px;
        left: -25px;
        margin-top: 120px;
    }

    .container .container-inf .informacao {
        width: 300px;
        height: 100px;
        display: block;
        font-size: 32px;
        height: 40px
    }


    .container .container-inf .informacao>label {
        width: 100px;
        height: 10px;
        font-size: 20;

    }

    .container .container-inf .informacao>input {
        width: 300px;
        height: 100px;
        display: inline-block;
        font-size: 20px;
        height: 40px
    }

    .container .redirecionamento {
        left: 1em;
        top: 23em;
        font-size: 14px;
    }

    .container .redirecionamento h1 {
        width: 360px;
    }

    .container .redirecionamento a {
        left: -5px;
        top: -2px;
        font-size: 22px;
    }

}

@media screen and (min-width: 768px) and (max-width: 1880px) {
    .container {
        width: 38em;
        margin: 125px;
    }

    .container .container-inf {
        display: inline-block;
        top: 5px;
        left: 220px;
        margin-top: 120px;
    }

    .container .container-inf .informacao {
        width: 500px;
        height: 200px;
    }

    .container .btn-cadastro {
        width: 450px;
        height: 50px;
        top: 100px;
        right: 10px;
    }




    .container .container-inf .redirecionamento {
        top: 8em;
        left: 4em;
        font-size: 14px;
    }

    .container .container-inf .redirecionamento a {
        left: 15em;
        top: -52px;
        font-size: 14px;
    }

}