@font-face {
    font-family: "Gilroy-ExtraBold";
    src: url(fonts/Gilroy-ExtraBold.otf);
}

@font-face {
    font-family: "Gilroy-Light";
    src: url(fonts/Gilroy-Light.otf);
}

* {
    margin: 0px;
    padding: 0px;
}

.container__login {
    display: flex;
    float: left;
    width: 100%;
    height: auto;
    position: fixed;
}

.container__image {
    width: 50vw;
    /* height: 100%; */
    /* background-size: cover;
    background-image: url('../images/thumbnail_1263.png');
    height: inherit; */
    background-color: #f4f4f4;
}
.image__login {
    background-size: cover;
}
.container__formlogin {
    width: 50vw;
    /* height: 100%; */
    background-color: #ffffff;
}

.login__form {
    width: 50%;
    height: 100%;
    margin: 8% 27.5%;
    background-color: #ffffff;
}

.title__form {
    width: 90%;
    height: 15%;
    margin: 0 5%;
    text-align: center;
    font-family: Gilroy-Light;
    font-size: 30px;
}

.title__order {
    font-family: Gilroy-ExtraBold;
    color: #bf0606;
}

.subtitle__form {
    width: 80%;
    height: 25%;
    margin: 0 10%;
    text-align: center;
}

.subtitle__welcome {
    font-family: Gilroy-ExtraBold;
    font-size: 2.2rem;
}

.subtitle__session {
    font-family: Gilroy-Light;
    font-size: 1.5rem;
}

.container__form {
    width: 80%;
    margin: 0 10%;
    height: 60%;
}
textarea:focus,
input:focus {
    outline: none;
}
.input__form {
    width: 100%;
    height: 43px !important;
    border: 2px solid #28379e;
    /* border: 2px solid #bf0606; */
    border-radius: 8px;
    padding: 10px;
    font-family: Gilroy-Light;
    font-size: 18px;
    margin-bottom: 12%;
    text-align: center;
}

.btn__login {
    width: 100%;
    height: 43px !important;
    /* background-color: #bf0606; */
    background-color: #28379e;
    color: #ffffff;
    font-family: Gilroy-Light;
    font-size: 18px;
    border: 2px solid #28379e;
    /* border: 2px solid #bf0606; */
    border-radius: 21px;
}

@media (max-width: 780px) {
    .title__form {
        margin-left: -25%;
    }
    .subtitle__form {
        width: 90%;
        height: 25%;
        margin: 0 5%;
    }
    .container__form {
        width: 100%;
    }
}

@media (max-width: 780px) {
    .title__form {
        margin-left: -25%;
    }
    .subtitle__form {
        width: 90%;
        height: 25%;
        margin: 0 5%;
    }
    .container__form {
        width: 100%;
        margin: 0px;
    }
}

@media (max-width: 500px) {
    .container__image {
        display: none;
    }

    .container__formlogin {
        width: 100%;
    }

    .login__form {
        width: 70%;
        height: 500px;
        margin: 8% 15%;
    }

    .title__form {
        margin-left: 0%;
    }

    .subtitle__form {
        width: 95%;
    }

    .input__form {
        height: 60px !important;
    }

    .btn__login {
        height: 60px !important;
    }
}

@media (max-width: 380px) {
    .title__form {
        margin-left: -6%;
    }
}

@media (max-width: 320px) {
    .title__form {
        margin-left: -16%;
    }
}