.window .settings{
    display: flex;
    max-height: 100%;
}

.window .settings .sidebtns{
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
}

.window .settings .sidebtns .button.active{
    background-color: var(--chat-button-active-bg);
    border-color: var(--chat-button-active-bg);
    color: var(--chat-button-active-color);
}
/* .window .settings .sidebtns .button{
    padding: 12px 12px 12px 36px;
} */

.window .settingsMain{
    flex: 1;
    padding: 16px;
    overflow: auto;
}


.window .settingsMain .header{
    font-size: 24px;
    margin-bottom: 12px;
}

.window.avatarChange{
    max-width: 600px;
    max-height: 500px;
    /* box-shadow: 1px 1px 4px #00000088; */
    /* background-color: aliceblue; */
    overflow: hidden;
    /* padding-top: 52px; */
}

.window.avatarChange img{
    width: 100%;
    max-width: 100%;
    max-height: 440px;
}
.window.avatarChange .buttons{
    display: flex;
    gap: 8px;
    padding: 8px 0;
}
.window.avatarChange .buttons .button{
    padding: 10px 40px;
    flex: 1;
}


.window .settingsMain .settingsContainer{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.window .settingsMain .setting{
    background-color: var(--setting-bg);
    border-radius: 12px;
    padding: 12px;
}

.window .settingsMain .label{
    color: var(--setting-label);
    /* font-weight: 600; */
    margin-bottom: 12px;
}

.window .settingsMain input{
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 12px;
    padding: 8px;
}

.window .settingsMain .avatarSetting img{
    user-select: none;
    cursor: pointer;
    width: 128px;
    border-radius: 99px;
}


.window .settingsMain .setting.toggle{
    cursor: pointer;
    
    display: flex;
    padding: 31px 11px;
    border: 1px solid var(--setting-bg);
    justify-content: space-between;
    align-items: center;
    transition: .1s;
}

.window .settingsMain .setting.toggle:hover, .window .settingsMain .setting.toggle:focus-visible{
    background-color: var(--setting-bg-hover);
    border: 1px solid var(--setting-border-hover);
}
.window .settingsMain .setting.toggle:active{
    border: 1px solid var(--setting-border-active);
}

.window .settingsMain .setting.toggle .label{
    margin-bottom: 0;
}
.window .settingsMain .setting.toggle .text:last-child{
    color: var(--setting-sublabel);
}


.window .settingsMain .setting.toggle .checkbox{
    width: 4em;
    height: 2em;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    background: var(--setting-checkbox-bg);
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid var(--setting-checkbox-border);
}
.window .settingsMain .setting.toggle .checkbox::after,
.window .settingsMain .setting.toggle .checkbox::before
{
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.window .settingsMain .setting.toggle .checkbox::after{
    left: 0;
    top: -26px;
    border-radius: 2em;
    background: var(--setting-checkbox-ball);
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.window .settingsMain .setting.toggle:hover .checkbox:after{
    will-change: padding;
}
.window .settingsMain .setting.toggle:active .checkbox:after{
    padding-right: 0.4em;
}
.window .settingsMain .setting.toggle.active:active .checkbox:after{
    margin-left: -0.4em;
}
.window .settingsMain .setting.toggle.active .checkbox::after{
    left: 50%;
}
.window .settingsMain .setting.toggle.active .checkbox{
    background-color: var(--online-device);
}

.window .settingsMain .setting.toggle:active .checkbox{
    box-shadow: inset 0 0 0 2em #e8eae9;
}
.window .settingsMain .setting.toggle.active:active .checkbox{
    box-shadow: none;
}