#outer-square,#popup-overlay{
    display:none;
    position:fixed;
    z-index:3
}
#close-popup,#outer-square,.dropdown,div #section{
    color:var(--text-color)
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    box-sizing:border-box
}
#sidebar-container.settings {
    height: 100%;
}
#topbar-container.settings {
    justify-content: space-between;
    background-color: transparent;
    position: fixed;
}

#outer-square{
    gap:8px;
    flex-direction:row;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    border-radius:32px;
    background:var(--background);
    width:calc(100% - 40px);
    max-width:1080px;
    max-height:720px;
    height:calc(100vh - 40px);
    justify-content:center;
    outline:var(--border-thickness) solid var(--border);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 8px 32px rgba(0,0,0,.3);
    backdrop-filter:blur(100px);
    -webkit-backdrop-filter:blur(100px)
}
#outer-square.fade-in-up {
    animation: fadeInUp 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}
#outer-square.fade-out-down {
    animation: fadeOutDown 0.2s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.12);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.12);
    }
}
#expanded.sidebar.navigation span{
    display:block
}
.settings-panel{
    display:none
}
.settings-panel.active{
    position:relative;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    height:100vh;
    flex-direction:column;
    gap:10px
}
#popup-overlay{
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: none
}
a.setting,button.setting,div.setting{
    display:flex;
    align-items:center;
    height:32px;
    border-radius:16px;
    color: var(--text-color);
    padding-right:8px;
}
.dropdown:hover,a.setting:hover,button.setting:hover{
    background:var(--hover)
}
div #section{
    gap:8px;
    background-color:var(--main);
    height:auto;
    padding:8px;
    display:flex;
    flex-direction:column;
    z-index:2;
    border-radius:24px;
    width:auto;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}
.dropdown{
    height:32px;
    font-size:18px;
    border:none;
    background:0 0;
    border-radius:16px;
    padding:5px
}
.dropdown:active{
    outline:0;
    border:none
}
#tab-title{
    padding:0 5px
}
#topbar-container.settings{
    width:calc(100% - 199px)!important
}
.content{
    display:flex;
    flex-direction:column;
    min-width:0;
    width:100%;
    gap:8px;
    margin:64px 8px 0 199px
}
#settings-topbar{
    gap:10px;
    width:100%;
    height:45px;
    display:flex;
    flex-direction:row;
    color:var(--menu-text);
    align-items:center;
    justify-content:center;
    z-index:4
}
#close-popup{
    text-decoration:none;
    display:flex;
    font-size:30px;
    background-color:transparent;
    border:none;
    border-radius:50px;
    cursor:pointer;
    transition:background .2s,transform .2s;
    height:45px;
    width:45px;
    justify-content:center;
    align-items:center;
    margin-left:auto
}
#close-popup:hover{
    background-color:var(--hover)
}
@media (max-width:1080px){
    #expanded.sidebar.navigation span{
        display:none
    }
    #expanded a{
        justify-content:center
    }
    .content{
        margin-left:72px
    }
    #topbar-container.settings{
        width:calc(100% - 64px)!important
    }
}