/**************************************
    - login.php [START]...
***************************************/

.login-wrapper .container-login100 {
    justify-content: flex-start !important;
    padding: 40px 80px
}

.login-wrapper .wrap-login100 {
    width: 700px;
    height: calc(100vh - 80px);
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-wrapper .login-custom-logo img {
    max-height: 50px;
    max-width: 100px;
    object-fit: contain;
}

.login-wrapper .login-custom-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
    margin-bottom: 40px;
}

.login-wrapper .login-title {
    display: flex;
    margin-top: 40px;
    margin-bottom: 20px;
}

.login-wrapper .login-caption {
    display: flex;
    margin-bottom: 60px;
}

.login-wrapper form *,
.login-wrapper .login-caption p,
.login-wrapper .login-title > *,
.login-wrapper form input, 
.login-wrapper form ::placeholder {
    color: var(--font-color) !important;
}

.login-wrapper form .wrap-input100 {
    display: flex;
    align-items: center;
    background-color: var(--color-light-grey);
    border-radius: var(--border-radius-big);
    padding: 0 20px;
}

.login-wrapper form .wrap-input100 input {
    padding: 0;
}

.login-wrapper form .wrap-input100 i {
    padding-right: 20px;
}

.login-wrapper .label-checkbox100::before {
    background: var(--color-light-grey) !important;
}

.login-wrapper .login100-form-btn,
.login-wrapper .login100-form-btn::before {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    width: 100%;
    border-radius: var(--border-radius-big);
}

.login-wrapper .page-background {
    background-image: url("https://images.pexels.com/photos/5076516/pexels-photo-5076516.jpeg?auto=compress");
}

/**************************************
    - login.php ...[END]
***************************************/