<script>
document.querySelector('#pun-navlinks ul').insertAdjacentElement('afterend', document.querySelector('.settings_wrap'));
</script>

.settings_wrap {
width: auto;
height: auto;
position: relative;
}
.settings_container {
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px
}
.settings_wrap .slide_button {
width: auto;
height: auto;
cursor: pointer;
padding: 0;
align-self: stretch;
height: 100%;
font: 500 16px var(--font) !important;
display: flex;
align-items: center;
gap: 5px
}
.settings_wrap .slide_button:before {
content: "\f013";
font: normal 10px FontAwesome;
color: var(--text2);
width: auto;
height: auto;
display: block;
opacity: .75
}
.slide_button.i_active {
opacity: .25
}
.settings_wrap .slide_block {
position: absolute;
background: rgba(18,16,14,.85);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid #5f3f21;
border-radius: 10px;
width: 240px;
top: calc(100% + 5px);
display: none;
left: 50%;
transform: translateX(-50%);
color: var(--text4)
}
.slide_block {
display: none;
top: calc(100% + 5px);
}
#chfont {
text-align: center;
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
box-sizing: border-box;
border-bottom: 1px solid var(--borders);
padding-bottom: 10px
}
#chfont:before {
content: "Шрифт в постах";
font: 300 10px var(--font);
display: block;
margin-bottom: 5px;
width: 100%
}
#chfontbut {
display: none !important;
}
#chfont select {
cursor: pointer;
}
#chfontsize {
width: auto;
display: flex;
align-items: center;
font: 300 12px var(--font);
gap: 5px;
margin-left: 5px
}
.fsizeplus,
.fsizeminus {
box-sizing: border-box;
color: var(--text4);
cursor: pointer;
font-size: 0;
width: 14px;
height: 14px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
}
.fsizeplus::after {
content: "\2b";
font: 9px FOntAwesome;
background: var(--links2);
border-radius: 4px;
width: 14px;
height: 14px;
display: flex;
justify-content: center;
align-items: center
}
.fsizeminus::after {
content: "\f068";
font: 9px FOntAwesome;
background: var(--links2);
border-radius: 4px;
width: 14px;
height: 14px;
display: flex;
justify-content: center;
align-items: center
}
#stylelist {
position: relative;
display: flex;
flex-direction: column;
gap: 10px !important;
font: 500 11px var(--font);
padding: 0px 0 5px;
height: auto !important;
text-align: left;
justify-content: flex-start;
align-items: flex-start;
color: var(--text4)
}
#stylelist:before {
content: "Стиль";
font: 300 10px var(--font);
display: block;
margin-bottom: 5px;
text-align: center;
width: 100%;
}
#stylelist li {
display: flex;
align-items: center;
gap: 5px !important;
position: relative;
align-self: flex-start;
}
#pun #stylelist li a {
text-transform: none;
padding: 0 !important;
background: transparent;
font: 500 12px/100% var(--font) !important;
letter-spacing: 0em;
display: flex;
align-items: center;
gap: 5px;
}
#stylelist li a:before {
content: "";
display: block;
width: 12px;
height: 12px;
background: var(--links2);
border: 1px solid var(--links2);
box-sizing: border-box;
border-radius: 5px;
}
#stylelist li a:after {
content: "\f00c";
font-family: FontAwesome;
font-size: 14px;
width: 12px;
height: 12px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
opacity: 0;
transition: all .3s linear 0s;
color: var(--text4);
z-index: 1;
left: 0;
}
#stylelist li.active a:before {
background: var(--accent2);
border-color: var(--accent2)
}
#stylelist li.active a:after {
opacity: 1;
}
#stylelist li.active a {
font-weight: 500 !important;
}
#stylelist li.active a {
font-weight: 500 !important;
}