.users-container {max-width:600px;margin-inline:auto;}
.users-container.signup-area {max-width:800px;}
.users-container.signIn-area>form {margin-block:auto;}
.users-container>footer {margin-top:1em;border-top:1px solid #e6e6e6;padding-top:1em;display:flex;align-items:center;gap:1em;}
.users-container>footer .back-to-login {transition:all .3s;outline:none;display:block;padding:.5em 1em;border:1px solid var(--a-color);background-color:var(--a-color);color:#fff;border-radius:6px;text-align:center;}
.users-container>footer .back-to-login:hover {color:var(--a-color);background-color:#fff;}
.users-container>footer .back-to-login::before {content:'« '}

.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;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;}

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 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;align-items:flex-start}
.us-wrap-area>main {order:1;background-color: #FFFFFF;border-radius: 10px;}
.us-wrap-area>aside {
    background-color:#FFFFFF;border-radius:10px;
    h2 {font-size: 24px;color: var(--g5-color);font-weight: 700;padding: 7px 20px 10px;border-bottom: 1px solid rgba(178,194,209,0.4)}
}
.us-wrap-area>aside ul {
    list-style:none;
    li {padding: 2px 10px}
    li a {display:block;font-size:15px;padding:10px 20px;;transition: background-color .2s;font-weight: 700;color: var(--g5-color);border-radius: 5px}
    li.sel>a,
    li>a:hover {background-color:#F2F4F7;}
}

.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 {display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;}
.quick-user-menu>ul {position:absolute;top:100%;left:0;min-width:100%;background-color:#fff;list-style:none;transition: all .2s;visibility: hidden;opacity: 0;}
.quick-user-menu:hover>ul {visibility: visible;opacity: 1;}
.quick-user-menu>ul a {display:block;padding:10px;}
.quick-user-menu>ul a:has(svg) {display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;svg {fill:currentColor;}}


@media screen and (max-width:1200px){
.us-grid{grid-template-columns: 1fr}
.us-wrap-area{display: flex;flex-wrap: wrap}
.courses{ width: 100%;overflow: auto;}
.us-wrap-area > main{width: 100%}
.cennik {
width: max-content;
border-collapse: collapse;
}
.us-wrap-area > aside{width: 100%}

}