@import url('./base.css');

/*LOGIN & REGISTER*/
.form-sign{
    height: 100vh;
}
.sidebar-sign{
    background-image: url('../img/imageMar@2x.png');
    background-size: cover;
    background-position: top center;
}
.sidebar-sign > img{
    width: 100%;
    height: auto;
}
.content-logo > img{
    width: 150px;
    height: auto;
    margin-bottom: 3rem;
}

/*form*/
.bg-form-sign{
    background-color: var(--grey);
}


.container-form{
    height: 100%;
    padding: 2rem 5rem;
}
.bmd-form-group{
    margin: 2rem 0;
}
.bmd-form-group input.form-control,
.bmd-form-group input.form-control::placeholder,
.remember label.form-check-label,
.forgot-password{
    font-family: 'Courier Prime';
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--brown-light);
    padding: .5rem 0;            
}
.forgot-password.mobile{
    display: none;
}
.bmd-form-group input.form-control{
    border-bottom: solid 2px var(--brown-light);
}

.remember label.form-check-label,
.forgot-password{
    font-size: .9rem;
    padding: 0 0 0 2rem;
}

.form-check .form-check-sign::before {
    background-color: var(--brown-light);
}
.form-check .form-check-sign .check {
    border: 1px solid var(--brown-light);
}

/*tablet*/
@media only screen and (max-width: 960px){
    .container-form{
        padding: 1rem;
    }
}

/*mobile*/
@media only screen and (max-width: 460px){
    .form-sign{
        flex-direction: column;
    }
    .sidebar-sign, .bg-form-sign{
        max-width: 100% !important;
    }
    .sidebar-sign{
        background-image: url('../img/mobileMar.png');
        background-position: top center;
    }
    .content-logo{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .content-logo > img{
        position: absolute;
        top: -125px;
        width: 110px;
        height: auto;
        margin-bottom: 0;
    }
    .container-form{
        padding: 0;
    }
    .bmd-form-group input.form-control,
    .bmd-form-group input.form-control::placeholder,
    .remember label.form-check-label,
    .forgot-password{
        font-size: 1.1rem;           
    }
    .remember label.form-check-label,
    .forgot-password{
        font-size: .85rem;
    }
    .forgot-password{
        display: none;
    }
    .forgot-password.mobile{
        display: block;
    }
}