.users-container {
    margin-inline:auto;
    container-type: inline-size;
    @container (width < 850px) {
        .us-wrap-area {gap:20px;}
        .us-grid {grid-template-columns:auto;}
        .us-header {margin-bottom:20px;padding:20px;}
    }
    @container (width < 670px) {
        .us-wrap-area {grid-template-columns:auto;}
    }
}
.users-container.signup-area {max-width:800px;}
.users-container.signIn-area>form,
.users-container.signup-area>form  {margin-block:auto;}
.users-container>footer {margin-top:1em;display:flex;align-items:center;gap:1em;}

.us-header {margin-bottom:2em;padding:1.5em;background-color:#f4f4f4;border-radius:6px;}
.us-grid {display:grid;grid-template-columns:repeat(2, 1fr);gap:1em;}
.us-grid section {padding:1.5em;background-color:#f4f4f4;border-radius:6px;}
.del-account {padding:1.5em;background-color:#ffe9e9;border-radius:6px;border:2px solid #d00c0c;}
.del-account h2 {color:#d00c0c;}
.del-account div {color:#d00c0c;line-height:1.4em;margin-block:2em;}
.del-account footer {text-align:right;}
.del-account button.delete {font-size:1.1em;background-color:#d00c0c;border-color:#d00c0c;display:inline-grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;border-width:2px;}
.del-account button.delete svg {fill:currentColor;}
.del-account button.delete:hover {color:#d00c0c;background-color:#fff;}


.content-wrapper:has(>.users-container.signIn-area) {align-content: center}

.nf-element.checkButton.agree .nf-field-desc {color:inherit;font-size:inherit;}
.nf-element.token {margin-block:2em 1em;}

.users-container.signIn-area,
.users-container.reminder-area {max-width:400px;}
.return-to-signIn {text-align:center;margin-bottom:2em;}
.users-container.signIn-area .remember-pass{text-align:center;}
.users-container.signIn-area .remember-pass a,
.return-to-signIn a,
.users-container>footer .back-to-login {
    color:#5b5b5b;text-decoration:underline;
    &:hover {text-decoration:none;}
}


.signupForm button.submit[name="nfForms[signUp]"] {
    background-color:#3180e5;
    border-color:#3180e5;
    &:hover {background-color:#fff;color:#3180e5;}
}

.users-container>footer .back-to-login {margin-inline:auto;}
.users-container.signIn-area>footer {margin-top:3em;flex-direction:column;gap:1em;align-items: normal;text-align:center;}
.users-container.signIn-area a.sign-up {
    transition: all .2s;
    cursor: pointer;
    border:2px solid #2c7cc3;
    background-color:#fff;
    color: #2c7cc3;
    border-radius: 2em;
    outline: none;
    padding: .5em 1.2em;
    display:block;
    &:hover {background-color:#2c7cc3;color:#fff;}
}
a.button {
    transition: all .2s;
    cursor: pointer;
    border: 2px solid #bbb;
    background-color: #bbb;
    color: #fff;
    border-radius: 4px;
    outline: none;
    padding: .5em 1.2em;
    display:inline-block;
    font-size:.9em;
}
a.button:hover {background-color:#fff;color:#bbb;}
a.button:has(>svg) {display:inline-flex;gap:5px;align-items:center;}
a.button:has(>svg)>* {flex-grow:1;}
a.button:has(>svg)>svg {flex-grow:0;fill:currentColor;width:20px;}

div.modal-dialog.confirm>.modal-footer button.to-delete {background-color:#d00c0c;border-color:#d00c0c;}
div.modal-dialog.confirm>.modal-footer button.to-delete:hover {background-color:#fff;color:#d00c0c;}

.us-wrap-area div.user-name:has(figure) {
    display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:start;margin-bottom:.5em;
    figure {width:60px;aspect-ratio:1;grid-row:span 2;}
    figure img {width:100%;height:100%;object-fit:scale-down;vertical-align:top;}
    h2 {margin:0;}
}
.us-wrap-area h2 {font-weight:500;margin-bottom:.5em;}
.us-wrap-area *+h2 {margin-top:1em;}
.us-wrap-area form.nForms {margin-block:auto;}
.us-wrap-area {display:grid;grid-template-columns:240px 1fr;gap:2em;}
.us-wrap-area>main {order:1;}
.us-wrap-area>aside {
    background-color:#f4f4f4;border-radius:6px;
    h2 {margin:20px 20px .5em;}
}
.us-wrap-area>aside ul {
    list-style:none;
    li {border-bottom:1px solid #e6e6e6;}
    li a {display:block;font-size:17px;padding:10px 20px;;transition: background-color .2s;}
    li.sel>a,
    li>a:hover {background-color:#e6e6e6;}
}

.app-2fa {list-style:none;}
.app-2fa li {display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;}
.app-2fa li:has(>h2) {margin-top:2em}
.app-2fa li>label {align-self:start;}
.app-2fa header div {color:#8a8a8a;font-size:.9em;}
.app-2fa header h3 {font-weight:500;font-size:1.2em;margin-bottom:3px;}
.app-2fa div.code {display:flex;flex-direction:column;gap:2px;}
.app-2fa div.code>button {padding:5px 8px;font-size:14px}
.app-2fa div.code>button.blue {border-color:#2f90d5;background-color:#2f90d5;}
.app-2fa div.code>button.blue:hover {color:#2f90d5;background-color:#fff;}

._2fa-form {max-width:600px;margin-inline:auto;padding:1em;}
._2fa-form .text-field {display:block;width:100%;}
._2fa-form .text-field>input {width:100%;}
._2fa-form .other-method {margin-bottom:1em;}
._2fa-form .other-method button {font:16px 'Source Sans Pro', sans-serif;background-color:transparent;text-decoration:underline;border:none;outline:none;cursor:pointer;color:var(--a-color);}
._2fa-form label.check {display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;cursor:pointer;background-color:rgb(223, 223, 223);color:#555;padding:12px;border-radius:5px;}
._2fa-form label.check input {align-self:start;}
._2fa-form label.check span.addon-info {display:block;font-size:14px;line-height:1;font-weight:normal;}
._2fa-form .submit-field {margin-top:1em;display:flex;align-items:center;gap:10px;justify-content:space-between;}
._2fa-form .submit-field button {display:flex;align-items:center;gap:5px;}
._2fa-form .submit-field button svg {fill:currentColor;width:25px;}

.quick-user-menu {position:relative;z-index:0;}
.quick-user-menu>a {--i-size:30px;color:#000;display:grid;grid-template-columns: auto 1fr;align-items: center;gap:5px;font-weight:900;}
.quick-user-menu>a i {width:var(--i-size);font-size:var(--i-size);}
.quick-user-menu>ul {position:absolute;top:100%;right:0;min-width:100%;background-color:#fff;list-style:none;transition: all .2s;visibility: hidden;opacity: 0;border-radius:6px;box-shadow:0 3px 6px rgba(0,0,0,0.1);}
.quick-user-menu:hover>ul {visibility: visible;opacity: 1;}
.quick-user-menu>ul a {display:block;padding:10px;color:#5b5b5b;transition:color .2s;&:hover {color:var(--a-color);}}
.quick-user-menu>ul a:has(svg) {display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;svg {fill:currentColor;}}