.bg-login {
    background-image: url('../img/login-background.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}

.form-login form {
    width: 300px;
}

.grid-login {
    display: grid;
    grid-auto-flow: column;
}

@media (max-width: 575px) {
    .grid-login {
        grid-template-rows: 10% 1fr;
    }
}

@media (min-width: 768px) {
    .form-login form {
        width: 350px;
    }
}

@media (max-width: 991px) {
    .grid-login .card {
        grid-row: 2;
    }

    .grid-login .card-login {
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
    }
}

@media (min-width: 992px) {
    .bg-login {
        background-size: contain;
        background-position: right;
    }

    .grid-login {
        grid-template-columns: 35%;
    }

    .grid-login .card-login {
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
    }
}

.form-login .form-label {
    font-size: 0.85rem;
}

.form-login.sem-required .label-required:after {
    content: '';
}

.login-container .btn-primary {
    --bs-primary: #4a89dc;
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary), #fff 88%);
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary), #fff 90%);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary), #000 12%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary), #000 15%);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary), #000 18%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary), #000 20%);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary), #fff 70%);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-primary), #fff 70%);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-border-radius: var(--bs-border-radius);
}

.login-container .form-control,
.login-container .ui-select-toggle {
    border-radius: var(--bs-border-radius);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    width: 350px;
}

.login-container .form-control::placeholder,
.login-container .ui-select-placeholder {
    color: #cdcdcd !important;
    /* font-size: 0.85rem !important; */
    opacity: 1;
    font-weight: 200 !important;
}

.login-container .ui-select-bootstrap .ui-select-toggle > a.btn {
    top: 12px;
}

.login-container .ui-select-bootstrap .ui-select-toggle > .caret {
    top: 22px;
}