@import url('https://fonts.cdnfonts.com/css/mulish');

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

:root {
    --blue-color: #076091 !important;
    --green-color: #56aa2e !important;
    --white-color: #fff !important;
}
/* --------- */
.fullHight-padding {
    height: 100vh;
    padding-top: 8vh;
}

.imgs-container .logo {
    height: 18vh;
}

.imgs-container .poster {
    height: 70vh;
}


/* -- */
.form-content-colors {
    background-color: var(--blue-color);
    color: var(--white-color);
}

.formHeader h2 {
    font-size: 6vh;
}

.formHeader p {
    font-size: 3.4vh;
    font-weight: 500;
}

form {
    width: 50vh;
    margin: auto;
}

form label {
    font-weight: 400;
    font-size: 2.5vh;
}

form .form-control {
    height: 6.5vh;
}
.check-big{
    margin: 5vh 0 7vh;
}
.check-big div label {
    font-size: 2.1vh;
    padding-left: 1vh;

}

.check-big a {

    font-size: 2.1vh;
    line-height: 2.1vh;

}
.custom-control{
    display: flex;
    padding-left: 2vh;
}
.custom-control-label::before {
    top: 0.8vh;
    left: -2vh;
    width: 2vh;
    height: 2vh;
}
.custom-control-label::after {
    position: absolute;
    top: 0.7vh;
    left: -2vh;
    display: block;
    width: 2vh;
    height: 2vh;
}
.register-section{
    font-weight: 300;
    font-size: 2.8vh;
}
.register-section a{

    line-height: 2.5vh;
}


.button-index{
    transition: all .6s ease;
    background: var(--green-color);
    border: none !important;
    box-shadow: none;
    outline: none;
    height: 6.5vh;
    margin-top: 5vh;
    font-size: 2.6vh;
}
.button-index:hover{
    opacity: 0.8;
}
.copyRight{
    margin-top: 10vh;
    font-size: 2.6vh;
}

/* validation */

.was-validated .custom-control-input:valid~.custom-control-label{
    color: var(--white-color);
}
input{
    border: none !important;
    box-shadow: none !important;
    font-size: 2.3vh !important;
}
.valid-feedback{
    font-size: 2.4vh;
}

.fa-solid{
    position: absolute;
    right: 0;
    width: fit-content;
    background: #fff;
    padding: 1vh ;
    top: 0.6vh;
    font-size: 2.8vh;
}
.error{
    margin: 0;
    background: #fff;
    margin-top: -1vh;
    padding: 0vh 4vh;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    color: #EC5B5B;
    font-size: 2vh;
}
.was-validated .custom-control-input:invalid~.custom-control-label::before {
    border-color: #dc3545;
    background-color: #dc3545;
}
@media (max-width: 992px) {
    .fullHight-padding {
        height: 80vh;
        padding-top: 5vh;
    }
    .formHeader h2 {
        font-size: 5.2vh;
    }
    .formHeader p {
        font-size: 2.4vh;
    }
    .imgs-container .poster {
        height: 55vh;
    }
    .imgs-container .logo {
        height: 16vh;
    }
    form .form-control {
        height: 5.5vh;
    }
    .check-big {
        margin: 4vh 0 5vh;
    }
    .button-index{
        height: 5.5vh;
    }
    .copyRight {
        margin-top: 3vh;
    }
}
@media (max-width: 480px) {
    .fullHight-padding {
        height: 77vh;
        padding-top: 5vh;
    }
    form{
        width: 39vh;
    }
    form label {
        font-size: 2.3vh;
    }
    .imgs-container .logo {
        height: 14vh;
    }
    .imgs-container .poster {
        height: 50vh;
    }
    .formHeader h2 {
        font-size: 4.2vh;
    }
    .formHeader p {
        font-size: 2.2vh;
    }
    form .form-control {
        height: 5vh;
    }
    .check-big a {
        font-size: 2vh;
    }
    .register-section {
        font-size: 2.2vh;
    }
    .button-index {
        height: 5vh;
        font-size: 2.3vh;
    }
    .copyRight {
        margin-top: 5vh;
        font-size: 2.2vh;
    }
    .fa-solid {
        padding: 0.6vh;}
}