/* ТЕЛО
здесь "margin: 190px" означает отступ на 190 пикселей от самого верха форума
-------------------------------------------------------------*/
#pun {position: relative;
    width: 1028px;
    margin: 255px auto 100px auto;
    padding-top: 50px;
    background: repeat transparent url(https://i.imgur.com/zuEPWS7.png);
}

/* РАЗМЕЩЕНИЕ КОНТЕНТА ВНУТРИ ТЕЛА
-------------------------------------------------------------*/
.punbb {
    height: auto;
    width: 1028px;
    padding: 0px 20px;
    box-sizing: border-box;
}

.multipage {  margin-top: 90px!important; }
#pun-main {    margin-top: 50px!important;}

.adminmain {
    padding-left: 155px;
    margin-bottom: 6px;
    margin-top: 50px;
}

/* ЗАДНИЙ ФОН
-------------------------------------------------------------*/
body {
background: url(https://i.imgur.com/K9i9cis.png) fixed top center;
background-size: auto;
background-color: #131313;
overflow-x: hidden; }

/* ШАПКА
-------------------------------------------------------------*/
#pun-title {        background: url(https://i.imgur.com/h8GQwqk.png);
    width: 1028px;
    height: 350px;
    margin-left: -20px;
    margin-top: -295px;
}

/* ФУТЕР
-------------------------------------------------------------*/
#pun-about  {
}

#pun-about .container {background: url(https://i.imgur.com/QVzKo3W.png);
    width: 1028px;
    height: 100px;
    margin-top: 20px;
    margin-left: -20px;
    margin-bottom: -70px;}

/* реклама русфф в футере */
#pun-about .container .item1 {     position: absolute;
    font-size: 7px;
    text-align: center;
    text-transform: lowercase;
    bottom: 7px;
    width: 1028px;
}

#pun-about .container .item1 a {    font-weight: normal!important; }

/* КАТЕГОРИИ
-------------------------------------------------------------*/

/* оформление всей категории */
#pun-index .category .container {
    position: relative;
    padding: 15px;
}

/* оформление всего подфорума */
#pun-index .hasicon tr {
    z-index: 1;
    width: 955px;
    position: relative;
    display: table;
    background: var(--forcol);
    border: var(--bord);
    margin-bottom: 10px;;
} 

/* оформление всех категорий */

#pun-index .category h2, #pun-stats h2 {       text-align: center;
    color: var(--doptext);
    text-transform: uppercase;
    background: url(https://i.imgur.com/NhVxF3c.png);
    width: 1028px;
    height: 100px;
    margin-left: -20px;
    box-sizing: border-box;
    padding-top: 55px;
    margin-bottom: -40px;
    margin-top: -40px;
    font-weight: bolder;
    text-shadow: 1px 1px black;
    font-size: 0px;}

/* индивидуальное оформление каждой категории  */

/* ОТКЛЮЧИТЬ если не нужен доп текст через display none  */
#pun-main div.catleft, #pun-main div.catright {}
.section h2 {}

/* первая */
#pun-category1 h2 { }
div#pun-category1 .catright::after {    content: ""; }

/* вторая*/
#pun-category2 h2 { }
div#pun-category2 .catright::after {    content: ""; }

/* третья */
#pun-category3 h2 { }
div#pun-category3 .catright::after {    content: ""; }

/* четвертая */
#pun-category4 h2 {  }
div#pun-category4 .catright::after {    content: ""; }

/* пятая */
#pun-category5 h2 { }
div#pun-category5 .catright::after {    content: ""; }

/* шестая*/
#pun-category6 h2 {  }
div#pun-category6 .catright::after {    content: ""; }

/* СТАТИСТИКА
-------------------------------------------------------------*/
#pun-stats h2 {}

#pun-statistic .tc3 {width:15%;}
#pun-statistic .tc-username {width:unset;text-align:left;}
#pun-statistic .tc-title {width:25%;text-align:left;}
#pun-statistic .tc-registered {width:20%;}
#pun-statistic .tc-topic {width:50%;}

/* оформление статистики */
#pun-stats {    }

/* оформление текста в статистике */
#pun-stats .container {    letter-spacing: 0.5px;
    position: relative;
    padding: 20px;
    background: var(--forcol);
    width: 955px;
    box-sizing: border-box;
    margin-left: 15px;
    border: var(--bord);
    margin-top: 25px!important;}

#pun-stats .container span {      font: var(--body-font);     font-weight: bolder; }
#pun-stats .container span a {    text-transform: lowercase;  }
#pun-stats .container strong {     font: var(--body-font);  }
#pun-stats .container strong a { text-transform: lowercase; }

/* вся инфа в 1 строчке */
#pun-stats li.item1, #pun-stats li.item2, #pun-stats li.item3, #pun-stats li.item4 {
color: var(--t-body);
    text-align: center;
    padding: 3px 15px 3px 15px;
    margin-right: 10px;
    display: inline-block;
    text-transform: lowercase;
    border-radius: 2px;
    background: var(--forcol);
    position: relative;
    left: 65px;
    margin-bottom: 10px;
}

/* активные пользователи */
li#onlinelist {
margin-top: 10px;
    float: left;
    width: 100%;
    font: var(--body-font);
  }

li#onlinelist a {font-weight: bolder;  }

/* ПОДФОРУМ
-------------------------------------------------------------*/

/* расположение и оформление */
#pun-index .tclcon {
    min-height: 50px;
    margin-left: 10px;
    text-align: justify;
    padding: 15px;
    width: 530px;
    color: var(--t-body);
    font: var(--body-font);
    font-size: 9px;
    box-sizing: border-box;
    margin-right: -50px;
   line-height: 150%;
}

#pun-index .tclcon h3 { display: block;
    position: relative;
    width: 500px;
    height: 18px;
    margin: -5px 0px 5px;
    background: var(--forcol);
    line-height: 18px;
    padding-left: 30px;
    box-sizing: border-box;
}

/* название подфорума - ссылка */
#pun-index .tclcon h3 a {
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    color: var(--link);
    font: var(--h1-font);
    font-weight: bolder;
}

.Tems_And_messages {
    display: inline-block;
    font: var(--body-font);
    color: var(--t-body);
    font-size: 8px; }

.main table .Add {    display: block;
    padding: 0px;
    width: auto;
    position: absolute;
    top: 19px;
    right: 400px;
}

/* ссылки  подфорумах */
#pun-index .tclcon a {       color: var(--link);}

#pun-index .tclcon a:hover {  color: var(--hovlink);     transition: all 0.5s linear 0s;}

/* дополнительные контейнеры ссылок в подфоруме*/

/* описание подфорумов и ссылки by вещий дух */
.f_desc_wrap {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-direction: column-reverse;
    color: var(--t-body);
}

.f_desc_wrap span {
font: var(--h1-font);
    font-weight: bolder;
    padding-left: 31px;
}

.f_desc {
  flex: 0 0 1;
  width: auto /*ширина блока с текстом*/
}

.f_links {
  flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2px;
    width: 100% /*ширина блока ссылок*/;
}

.f_links a {
background: var(--forcol);
    padding: 2px 10px;
    flex: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all .3s!important;
    line-height: 13px!important;
    border-radius: 2px;
    color: var(--link)!important;
    font: var(--body-font);
    font-size: 9px;
}

.f_links a:hover {
  background: transparent;
}

/* ИКОНКА СООБЩЕНИЙ НА ГЛАВНОЙ СТРАНИЦЕ
-------------------------------------------------------------*/
/* старые  */
#pun-index table Div.icon {     display: block;
    height: 30px;
    margin-top: 3px;
    width: 28px;
    z-index: 1;
    float: left;
    margin-left: 5px!important;
    background: url(https://forumstatic.ru/files/001b/11/27/39362.png);
    opacity: 0.8;
}

/* новые */
#pun-index TR.inew Div.icon {
    display: block;
    height: 30px;
    margin-top: 2px;
    width: 28px;
    z-index: 1;
    float: right;
    margin-right: -4px!important;
    background: url(https://forumstatic.ru/files/001b/11/27/41762.png);
    opacity: 1;
}

/* ИКОНКА  ВНУТРИ ПОДФОРУМА
-------------------------------------------------------------*/
/* старые  */
#pun-viewforum table Div.icon, #pun-messages table Div.icon, #pun-searchtopics table Div.icon {
float: left;
    display: block;
    position: relative;
    margin: 3px 8px;
    width: 10px;
    height: 10px;
    background: #7d6745;
    opacity: 0.5;
    border-radius: 50%;
}

/* новые */
#pun-viewforum TR.inew Div.icon, #pun-messages TR.inew Div.icon, #pun-searchtopics TR.inew Div.icon {
    background: #7d6745;    opacity: 0.8;
}

/*важные */
#pun-viewforum TR.isticky Div.icon, #pun-messages TR.isticky Div.icon, #pun-searchtopics TR.isticky Div.icon {
    opacity: 1;
    background: #7d6745;
}

/* закрытые */
#pun-viewforum TR.iclosed Div.icon, #pun-messages TR.iclosed Div.icon, #pun-searchtopics TR.iclosed Div.icon {
    background: #757069;   opacity: 0.5;
}

/* КНОПКИ ВВЕРХ ВНИЗ
-------------------------------------------------------------*/
.go-up, .go-down {
    cursor: pointer;
    display: none;
    height: 70px;
    margin-bottom: 160px;
    opacity: 1;
    position: fixed;
    width: 70px;
    z-index: 9999;
}

/* прозрачность */
.go-down:hover, .go-up:hover {
    opacity: 0.7;}

/* расположение */
.go-up {
    bottom: 50%;
    margin-left: 1050px !important;
}

.go-down {
    bottom: 40%;
    margin-left: 1050px !important;
}
/* при наведении */
.go-down:hover, .go-up:hover {
    opacity: 1;
}

/* профиль
-------------------------------------------------------------*/
.post-author {    width: 265px;
    padding-bottom: 5px!important;
    margin-bottom: 15px!important;
    margin-left: -40px;
    background: url(https://i.imgur.com/rO2WHKX.png) top no-repeat, url(https://i.imgur.com/VYlBPXI.png) bottom no-repeat, url(https://i.imgur.com/9q51ooY.png) repeat-y;
    margin-top: -7px;
}

/* пространство в профиле */
.post-author ul {
margin-top: 0px;
    width: 258px;
    padding: 0px !important;
    padding: 44px 0 20px 0 !important;
    box-sizing: border-box;
    text-align: center;}

/* ник автора */
.pa-author {   
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font: var(--h1-font);
    font-weight: bold;
    margin-bottom: 0px;
}

/* ссылка ника */
.pa-author a {    color: ffffff5c!important;
text-shadow: 1px 1px black;}
.pa-author a:hover { color: var(--headhov)!important; }

/* статус */
.pa-title {
text-transform: lowercase;
    text-align: center;
    font: var(--body-font);
    letter-spacing: 0.5px;
    color: var(--proftext);
    font-size: 9px;
font-weight: bold;
    margin-bottom: 30px;
}

/* аватар */
.pa-avatar {
margin-top: 10px !important;
    margin-bottom: 5px !important;
    text-align: center;
}

/* рамка аватара */
.pa-avatar img {
    max-width: 180px;
    max-height: 180px;
    border: 1px solid #151515!important;
}

/* айпи */
.pa-ip {
    clear: both;
    color: #51514e !important;
    font-size: 7px;
   width: 233px;
}
.pa-ip a {
    clear: both;
    color: #4d4d54!important;
    font-size: 7px;
}

/* активен */
.pa-online {
   height: 10px;
    margin: 30px 0px !important;
    display: block;
    text-transform: lowercase;
    font-size: 8px;
    color: var(--proftext);
}

/* последний визит */
.pa-last-visit {
    font-size: 9px!important;
    text-transform: lowercase;
    text-align: center;
    letter-spacing: 0.5px;
    color: var(--proftext);
    margin-top: 5px;
}

/* отображение при ответить */
#pun-post .pa-author {
    padding: 0;
    margin-top: 24px;
    text-align: center;
}

/* ПОЛЯ ПРОФИЛЯ
-------------------------------------------------------------*/
/* плашка */
.pa-fld1 {            margin-top: 5px!important; }

#pl0 {
    width: 239px;
    height: 57px;
    position: relative;
    background: url(https://forumstatic.ru/files/001b/11/27/72869.png?v=1);
    margin-left: 2px!important;
}

#pl0 img { max-width: 55px;
    float: left;
    left: 17px;
    position: relative;
    filter: grayscale(1) brightness(0.5);
}

#pl1 {   
    font: var(--body-font);
    color: var(--proftext);
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    position: relative;
    padding-top: 15px;
    text-shadow: 1px 1px black;
    font-size: 10px;
    padding-left: 80px;
}

#pl2 {   text-align: left;
    text-transform: lowercase;
    text-shadow: 1px 1px black;
    font: var(--body-font);
    color: var(--proftext);
    font-size: 9px;
    padding-top: 3px;
    padding-left: 80px;
font-weight: bold;
}

#gif {
    width: 226px;
    height: 40px;
    position: relative;
    margin-left: 8px!important;
    text-align: center;
    outline: 1px solid #7b6543;
    margin-bottom: 10px;
}

#gif img {
    width: 226px;
    height: 40px;
    filter: grayscale(1) brightness(0.3) contrast(0.9);
    position: relative;
}

#gif1 {
        font: var(--body-font);
        color: #9b9b9b;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        position: relative;
        text-shadow: 1px 1px black;
        font-size: 10px;
        margin-top: -36px;
}

#gif2 {
    text-align: center;
    text-transform: lowercase;
    text-shadow: 1px 1px black;
    font: var(--body-font);
    color: #9b9b9b;
    font-size: 9px;
    padding-top: 3px;
    position: relative;
font-weight: bold;
}

/* лз */

.pa-fld2 { margin-bottom: 10px!important;}

.lzname {
    text-align: center;
    font: var(--h1-font);
    font-size: 10px;
    font-weight: bolder;
    text-shadow: 1px 1px black;
    margin-top: 10px!important;
}

.lzname a {  color: var(--doplink)!important; }

.lztext {
font-size: 9px!important;
    font: var(--body-font);
    color: var(--proftext);
    text-align: justify;
    padding: 7px !important;
    background-color: #00000052;
    width: 185px;
    border: 1px solid #252525;
    outline: 1px solid #0c0c0c;
    margin-left: 21px!important;
    margin-top: 10px!important;
    position: relative;
    line-height: 11px;
    text-shadow: 1px 1px black;
    border-radius: 2px;
font-weight: bold;
}

.lztext a { color: #786240!important; }

.pa-fld2 a:hover {color: var(--headhov)!important; }
.lztext a:hover {color: var(--headhov)!important; }

/* деньги */
.pa-fld3 {
        width: 90px;
    height: 10px;
    text-align: center;
    padding: 3px 5px 3px 5px !important;
    margin: 0px 0px 3px 21px !important;
    color: var(--proftext);
    font: var(--body-font);
    text-transform: lowercase;
    text-shadow: 1px 1px black;
    background-color: #00000052;
    border: 1px solid #252525;
    outline: 1px solid #0c0c0c;
font-weight: bold;}

/*посты */

li.pa-fld4 {
    width: 90px;
    font: var(--h1-font);
    position: absolute;
    height: 58px;
    text-align: center;
    margin-left: 129px!important;
    margin-top: -63px!important;
    font-size: 36px;
    color: var(--proftext);
    font-weight: bolder;
    background-color: #00000052;
    border: 1px solid #252525;
    outline: 1px solid #0c0c0c;
    border-radius: 2px;
    line-height: 58px;
}

/* ПОСТЫ, РЕПУТАЦИЯ
-------------------------------------------------------------*/
.pa-posts, .pa-respect  {
    width: 90px;
    height: 10px;
    text-align: center;
    padding: 3px 5px 3px 5px !important;
    margin: 0px 0px 5px 5px !important;
    color: var(--proftext);
    font: var(--body-font);
    text-transform: lowercase;
    text-shadow: 1px 1px black;
    border-radius: 2px;
font-weight: bold;
display: inline-block;
}

.pa-respect img {           filter: hue-rotate(321deg) brightness(0.4);
    width: 8px;}

/* перекрасить слово репутация */
.pa-respect a {   color: var(--proftext)!important; }

/* ОБЪЯВЛЕНИЕ
-------------------------------------------------------------*/
/* форма объявления */
#pun-announcement {
margin-top: 40px;
    width: 950px;
    height: auto;
    text-align: center;
}

#pun-announcement .container::-webkit-scrollbar {    width: 6px;    height: 6px;}

.plashka {
display: inline-block;
    transition-duration: 1s;
    padding: 6px 30px;
    margin-right: 10px!important;
    color: var(--link);
    width: auto;
    font-size: 8px;
    background: var(--forcol);
    height: auto;
    line-height: 10px;
    border: var(--bord);
    text-align: center;
    text-transform: uppercase;
}

.plashka a {         
text-transform: uppercase;
    font: var(--body-font);
    font-weight: bolder;
font-size: 10px;}

.plashka:hover {      background: transparent;}

/* Таблица
**************************************************************/
/* активисты */
.act {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    column-gap: 5px;
    left: 105px;
    top: -204px;
    z-index: 100;
    transition: 0.3s ease-in-out!important;

}
.act img {opacity: 0.7;}
.act img:hover {opacity: 1;}

.act a:hover {}

/* лучший пост */
.bestpost {
     width: 315px;
    position: absolute;
    top: -125px;
    left: 37px;
    z-index: 100;
    text-align: justify;
    text-shadow: rgb(0, 0, 0) 1px 1px 0px;
    height: 60px;
    color: var(--posttext);
    overflow: auto;
    padding: 5px 15px 5px 10px;
    font: var(--body-font);
    font-weight: bold;
}

.bestpostname {
    width: 315px;
    top: -143px;
    left: 50px;
    position: absolute;
    color: var(--headtext);
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #000000;
    text-align: center;
    font-weight: bolder!important;
    font: var(--h1-font);
    font-size: 9px;
}
.bestpostname a {    color: var(--headlink)!important; }
.bestpostname a:hover { color: var(--headhov)!important; }

.bestpost a { color: var(--headlink)!important; }
.bestpost a:hover {color: var(--headhov)!important; }

/* нужные */
.need{
     position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    column-gap: 5px;
    left: 660px;
    top: -204px;
    z-index: 100;
    transition: 0.3s ease-in-out!important;
}

.need img {opacity: 0.7;}
.need img:hover {opacity: 1;}

.heed a:hover {}

/* лучший эпизод*/
.bestep {
    width: 315px;
    overflow: auto;
    position: absolute;
    top: -116px;
    left: 604px;
    z-index: 100;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #000000;
    font: var(--h1-font);
    color: var(--haedlink);
    font-weight: bolder;
}

.bestep a { color: var(--headlink)!important; }
.bestep a:hover  { color: var(--headhov)!important;}

/*администрация */
.ams {
    height: 20px;
    width: 255px;
    position: absolute;
    border-radius: 0px;
    top: -30px;
    left: 89px;
    z-index: 100;
    font-size: 10px!important;
    color: var(--headtext);
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px black;
    font: var(--h1-font);
    font-weight: bolder;
}

.ams a {color: var(--headtext)!important; }
.ams a:hover { color: var(--headhov)!important; }

/* инфо */
.about {
        width: 303px;
    overflow: auto;
    position: absolute;
    top: -83px;
    left: 604px;
    z-index: 100;
    padding: 5px 15px 5px 10px;
    text-align: center;
    height: 10px;
    font: var(--body-font);
    color: var(--posttext);
font-weight: bold;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

/* КОД ССЫЛОК НАВИГАЦИИ ОТ ВЕЩЕГО ДУХА */
/* настройка кнопки, может быть текстом */

/* настройка позиции выпадающего по клику окна и его ширина */
#navigblock {
    width: 180px;
    left: 666px;
    position: absolute;
    top: -10px;
    z-index: 999;
}

/* настройка блока ссылок, цвет фона, тени, прозрачность, отступы */
.sslka {
    display: block;
    background: #222221;
    padding: 3px 0 3px 0;
    border: 1px solid #77603f;
}

/* настройка вида самой ссылки, ширина, цвет, фон, шрифты и так далее */
#pun .sslka a {
    background: linear-gradient(180deg, #222221, #101010);
    white-space: nowrap;
    margin: 3px auto;
    text-align: center;
    display: block;
    padding: 2px 3px 3px 3px;
    border: 1px solid #6f6f6f7a;
    text-shadow: 1px 1px #000000;
    text-transform: lowercase;
    width: 140px;
    color: var(--headtext);
    transition: all 0.3s linear 0s;
    box-shadow: 0px 0px 9px #0000005c inset;
    font: var(--body-font);
    letter-spacing: 0.5px;
}

/* ссылка при наведении */
#pun .sslka a:hover {
   background: linear-gradient(180deg, #101010, #222221);
    white-space: nowrap;
    margin: 4px auto;
    text-align: center;
    display: block;
    padding: 2px 0 3px 0;
    border: 1px solid #6f6f6f7a;
    text-shadow: 1px 1px #000000;
    text-transform: lowercase;
    width: 130px;
    color: var(--headtext);
    font: var(--body-font);
    letter-spacing: 0.5px;
    transition: all 0.3s linear 0s;
    box-shadow: 0px 0px 9px #0000005c inset;
}

.spirit-navigation {
    height: 15px;
    width: 312px;
    top: -30px;
    left: 600px;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    font-size: 10px!important;
    color: var(--headtext);
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px black;
    font: var(--h1-font);
    font-weight: bolder;
}

.spirit-navigation:hover {
    letter-spacing: 0.5px;
transition: all 0.5s linear 0s;
}

/* ФУТЕР
**************************************************************/

/*---------- баннеры -------------*/
.ban {
    position: absolute;
    height: 44px;
    width: 910px;
    left: 25px;
    bottom: -59px;
    text-align: center;
    overflow: auto;
    overflow-x: hidden;
    padding: 0 10px 0px 0px;
}

.ban img {opacity: 0.3; filter: grayscale(1); transition: 0.3s ease-in-out!important;}
.ban img:hover {opacity: 1; filter: grayscale(0); transition: 0.3s ease-in-out!important;}

.cop a { position: absolute;
    margin: 60px 0px 0px 415px!important;
    letter-spacing: 1px;
    color: var(--proftext)!important;
    font: var(--body-font);
    font-size: 9px;
    font-weight: bolder;
}

.cop:hover a {color: var(--headhov);}

/* ДРУГОЕ
**************************************************************/
/* кнопка реакции  */
.reactions-root button, .reactions-root [type=button], .reactions-root [type=reset], .reactions-root [type=submit] {
    -webkit-appearance: button;
    display: none;
}

/* рейтинг поста   */
div.post-rating p {float:right !important; border:0 !important; padding:3px !important}
div.post-vote p {float:right !important; border:0 !important; padding:3px 13px !important; margin-right:5px !important}
div.post-vote p .negative {margin-left:13px;}
div.post-rating a, div.post-vote a {
    font-size: 13px !important;
    text-decoration: none !important;
}
div.post-rating a {
    cursor: pointer !important;
    margin-right: 20px!important;
}

/* перекрасить количество уведомлений и сообщений */
.icon[data-new-topics]:before, .subforums span[data-new-topics]:before {
    background: #ab9e9a!important;
    border-radius: 8px;
    color: #fff;
    content: attr(data-new-topics);
    display: inline-block;
    font-size: .8em;
    font-weight: 700;
    height: 12px;
    line-height: 12px;
    margin: -6px;
    min-width: 12px;
    padding: 2px;
    position: absolute;
    text-align: center;
}

.notify-parent {position: relative;}
.notify-bubble {
    background: lightblue;
    border-radius: 3px;
    color: black;
    font: bolder 12px/1.2 Tahoma;
    margin: 0;
    min-width: 14px;
    padding: 0 1px;
    position: absolute;
    text-align: center;
}

.notify-bubble:after {
    border-color: lightblue transparent;
    border-style: solid;
    border-width: 3px 3px 0;
    content: "";
    display: block;
    left: 5px;
    position: absolute;
    width: 0;
}

.bubble { background: #857a75!important;
    border: 0 none;
    border-radius: 3px;
    color: #d4d2ce!important;
    display: inline-block;
    font: bolder 9px Roboto!important;
    margin: 0;
    min-width: 12px;
    padding: 0 1px;
    position: absolute;
    right: 2px!important;
    text-align: center;
    top: -9px!important;
}

.bubble:after {
    border-color: #857a75!important;
    border-style: solid;
    border-width: 2px 2px 0!important;
    content: "";
    display: block;
    left: 5px;
    position: absolute;
    width: 0;
}

span.num_msg {
    position: absolute;
    margin-top: -15px;
    margin-left: -8px;
    font-size: 11px;
    font-weight: 700;
    background: #685942!important;
    padding: 1px 4px;
    border-radius: 2px;
    height: 14px;
    color: #fff;
    cursor: pointer;
}

span.num_msg:before {
    content: " ";
    display: inline-block;
    position: absolute;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    top: 14px;
    background: #685942!important;
    margin-left: 1px;
}

/* вкладка стикеров  */
.hvStickerPackModal {
    padding: 16px 16px 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px #6b634e;
    border-radius: 4px;
    background: #cecfc4;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    z-index: 100;
}

/* подложка маски  */
#mask_dialog .inner {
    cursor: default;
    margin: 0;
    width: 760px;
    max-width: 99%;
    max-height: 90%;
    overflow-x: auto;
    z-index: 100;
    box-shadow: 0 0 40px #222;
    padding: 8px;
    border: solid 1px #6b634e;
    border-radius: 4px;
    background: var(--backcol);
}

/* гифка при наведении  */
.gifshapka{opacity: 0;
    transition: 0.5s ease-in-out!important;}
.gifshapka:hover{opacity: 0.5;
transition: 0.5s ease-in-out!important;}