#login-offcanvas.try-login:before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    z-index: 999;
    background-color: rgba(255,255,255,.9);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" fill="none" stroke="rgba(0,0,0,.35)" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform></circle></svg>');
    background-repeat: no-repeat;
    background-position: center 150px;
}
#login-offcanvas.login-error:before ,
#login-offcanvas.login-warning:before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    z-index: 999;
    background-color: rgba(255,255,255,.6);
}

#login-offcanvas .login-message {
    position: absolute;
    inset: 150px calc(var(--bs-offcanvas-padding-x) *.5) auto calc(var(--bs-offcanvas-padding-x) *.5);
    z-index: 9999;
    transform: translate(0,-50%);
    border-radius: .5rem;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
}
#login-offcanvas .login-message .btn-close {
    position: absolute;
    top: .3rem;
    right: .3rem;
}
#login-offcanvas.login-error .login-message .btn-close {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(204deg) brightness(104%) contrast(104%);
}
#login-offcanvas.login-error .login-message {
    background-color: #f00;
    color: #fff;
}
#login-offcanvas.login-warning .login-message {
    background-color: #f80;
    color: #000;
}

.nav-item.nav-item-logout a {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}