.bg-login-image {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background-color: #1b523b;
    background-image:
        radial-gradient(circle at 72% 22%, rgba(226, 239, 173, .85) 0 7%, transparent 7.2%),
        linear-gradient(155deg, #153d30 0%, #1e6346 58%, #34754c 100%);
    background-position: center;
    background-size: cover;
}

.bg-login-image::before,
.bg-login-image::after {
    position: absolute;
    right: -22%;
    bottom: -25%;
    left: -24%;
    height: 58%;
    border: 1px solid rgba(236, 246, 206, .43);
    border-radius: 50%;
    content: "";
    transform: rotate(-13deg);
}

.bg-login-image::before {
    box-shadow:
        0 -24px 0 -1px rgba(0, 0, 0, 0),
        0 -48px 0 -1px rgba(0, 0, 0, 0),
        0 -72px 0 -1px rgba(0, 0, 0, 0);
}

.bg-login-image::after {
    right: -31%;
    bottom: -33%;
    left: -14%;
    height: 68%;
    border-color: rgba(222, 241, 190, .2);
}

.password-field { position: relative; }

.password-field .form-control-user { padding-right: 3rem; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: .65rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #858796;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: #224abe;
    background: #eaecf4;
    outline: none;
}

.password-toggle:focus-visible { box-shadow: 0 0 0 .15rem rgba(78, 115, 223, .3); }

@media (max-width: 991.98px) {
    .card .p-5 { padding: 2.25rem !important; }
}