/* Chrome, Opera, Safari */
details summary::-webkit-details-marker {
display: none;
}
/* Firefox */
details, summary {
display: block;
}
details summary:before {
content: "  ";
}
details[open] summary:before {
content: "  ";
}

.category .container thead {display: none;}

.punbb .category tr .bottom a{
    opacity: 1;
    font-size: 14px;
    font-weight: bolder;
    font-family: arial;
    font-variant: small-caps;
}
.punbb .category tr .bottom a:hover{
  opacity:0.7;
}

.opisanie {    padding-right: 12px; */
    padding-top: 5px;
    /* padding-bottom: 5px; */
    /* margin-left: -10px; */
    /* letter-spacing: 1px; */
    padding-bottom: 10px;
    height: 30px !important;
    /* overflow-y: auto; */
    font-family: arial;
    font-size: 12px !important;
    /* line-height: 10px; */
    font-style: normal;
    text-align: justify;
}

#main-reply {
    width: 104.5%!important;
    margin-left: -28px;
    margin-top: 5px;
}

.pa-fld1, .pa-fld2, .pa-fld4, .pa-fld5, {
    display: inline-block;
    margin-left: 1px !important;
    width: 53px;
    line-height: 10px;
    margin-top: 7px!important;
    font-size: 14px;
    color: #6d7f94;
    padding: 2px! important;
}

.pa-fld3 {
    display: inline-block;
    margin-left: 1px !important;
    line-height: 1;
    margin-top: -20px!important;
    font-size: 12px;
    color: #6d7f94;
    padding: 2px! important;
    overflow: hidden;
}

.pa-respect, .pa-posts, .pa-gifts, .pa-awards {
    display: inline-block;
    margin-left: 1px !important;
    width: 53px;
    line-height: 10px;
    margin-top: 0px!important;
    font-size: 11px;
    color: #6d7f94;
    padding: 2px! important;
}

.pa-posts, .pa-respect, .pa-gifts, .pa-awards {
 width: auto;
font-size: 8px;
font-family: Roboto Slab;
}


/* CS1 Background and text colours
-------------------------------------------------------------*/

/* шапка */
#pun-title table {
background-image: url(https://i.ibb.co/TKhxqPd/head4.png);
    background-repeat: no-repeat;
    background-position: top center;
    border: none;
    margin-left: -60px;
    width: 980px;
    height: 335px;
}

/* фон */
body { background-position: top center;
background-repeat: repeat;
background-attachment: fixed;
background-image : url(https://i.ibb.co/LtrC4SH/TILE-BACKGROUND.png);
}

/* фон контента */
#pun {background-image: url(https://i.ibb.co/9qCNy3Y/content.png);
background-repeat: repeat;
background-position : center;
margin-bottom: 50px;
}

/* блок формы ответа и кнопки*/
  .punbb textarea, .punbb select, .punbb input{
  background-color: #a0abb3;
  color: #341400;
background-image: url(https://i.ibb.co/BwGNNzq/TILE-BACKGROUND3.png);
border-top:1px solid #373e4f;
border-right:1px  solid #373e4f;
border-bottom: 1px  solid #373e4f;
border-left:1px solid #373e4f;
border-radius: 10px;
}

/* картинка в самый низ */
@media all and (-webkit-min-device-pixel-ratio:0) {
#pun-about p.container {
    margin-left: -61px !important;
} }
#pun-about p.container {
  background-image: url(https://i.ibb.co/9qCNy3Y/content.png);
  background-repeat : no-repeat;
  height: 180px;
  width: 1200px;
  margin-bottom: -160px;
  margin-left: -61px!important;
}

/* блок цитат и кодов*/
.punbb .quote-box, .punbb .code-box {
  background-color: #91989d;
  color: #25192d;
background-image : url("https://i.ibb.co/BwGNNzq/TILE-BACKGROUND3.png");
border-top:1px solid #373e4f;
border-right:1px  solid #373e4f;
border-bottom: 1px  solid #373e4f;
border-left:1px solid #373e4f;
    border-radius:1px;
  }

.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span,  .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {background-color: transparent;color: #00091a;}

#pun-status .container, #pun-crumbs1 .container
{color: #000;}

#pun-navlinks .container, #pun-ulinks .container {
background-color: transparent;
color: #0f031b;
text-align: center;}

.offline li.pa-online strong {
color: #245794;
font-weight: normal;
}

.punbb textarea, .punbb select, .punbb input {
background-color: transparent;
color: #000;}


/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: transparent;
  color: #00091a;
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: transparent;
  }

/* CS2.3 */
#pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: transparent;
color: #dee8cf;
  font-weight: bold;
font-style: normal;
  }

/* CS2.33 */
#pun-stats h2, .punbb .main h2 {
border-color: transparent;
background-color: #373e4f;
color: #ccc3b9;
font-family: Prata;
font-size: 18px;
height: 20px;
font-style: normal;
text-align: center;
text-transform: uppercase;   
}

.punbb .main h1 {
border-color: transparent;
background-color: #373e4f;
color: #ccc3b9;
font-family: Prata;
font-size: 18px;
height: 55px;
font-style: normal;
text-align: center;
text-transform: uppercase;   
margin-left: -39px;
width: 937px;
}

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: transparent;
  }

/* CS2.5 */
.punbb th {
  border-color: transparent;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: transparent;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: transparent
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: transparent
  }

.punbb .divider {
  border-color: transparent
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid transparent
  }

li.pa-online {
  border-left-color: transparent;
  }

.punbb .post-sig dt {
  content: url(http://funkyimg.com/i/2HnBH.png) ;
  width: auto;
  height: 0;
border-color:#231810;
  }

/* CS3 Ссылки
-------------------------------------------------------------*/

/* CS3.1 ссылка до нажатия*/
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #506c8f;
  text-decoration: none;
  font-weight: bold;
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #000;
  }

/* CS3.2 активная ссылка*/
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #59849a;
  border-bottom: 0px none #59849a;
  text-decoration: none;
  font-weight: bold;
  }

/* CS3.3 */
#pun-navlinks a {
color: #373e4f;
    display: inline-block;
    font-family: Prata;
    font-size: 14px;
    height: 38px;
    line-height: 50px;
    /* min-width: 50px; */
    text-transform: uppercase;
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: #59849a;
    display: inline-block;
    font-family: Prata;
    font-size: 14px;
    height: 38px;
    line-height: 50px;
    /* min-width: 50px; */
    text-transform: uppercase;
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #634f3d;
  color: #775845;
  }

#pun-index .tcl h3 a {
    color: #91989d;
}

/* CS3 Иконки старых, новых, важных, закрытых тем */

.punbb table Div.icon {float: left;
display: block;
border-style: none none none none;
margin-left: -10px;
margin-top: -8px;
margin-right: -11px;
width: 80px;
height: 60px;
background-image : url(https://i.ibb.co/sjJtWZg/icons-old.png);
background-repeat: no-repeat;}

TR.inew Div.icon {
background-image : url(https://i.ibb.co/XCcZnMP/icons-new.png);
background-repeat: no-repeat;
width: 80px;
height: 60px;}

TR.isticky Div.icon {
background-image : url(https://i.ibb.co/tJCHpVW/icons-important.png);
background-repeat: no-repeat;
width: 80px;
height: 60px;}

TR.iclosed Div.icon {
background-image : url(https://i.ibb.co/p6TZgwC/icons-closed.png);
background-repeat: no-repeat;
width: 80px;
height: 60px;}


/* CS4 Другое
-------------------------------------------------------------*/
div#html-footer {
margin-bottom: 20px;
margin-left: 30px;

}

div#pun-ulinks {
  position: absolute;
  width: 100%;
  margin-left: -60px;
  top: 350px;

}

div#pun-navlinks {
  position: absolute;
  width: 100%;
  left: 5px;
top: 315px;
}

#pun-main .post-author ul {text-align: center;}

/* ползунок */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;}
::-webkit-scrollbar-track {
    background: #939a9e !important;}
::-webkit-scrollbar-thumb {
    background: #000!important;}
::-webkit-scrollbar-thumb:active {
background: #939a9e;}

.tip {
padding: 5px; /* расстояние текста от края окна */
color: #2d1a09; /* цвет шрифта */
background-color: #ccbba7; /* фоновый цвет окна */
display: none;
position: absolute;
z-index: 1000;
        width: 150px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;

background: #704c36;
width: 70px;
border-top: 3px solid #5e3924;
font-size: 12px;
text-decoration: none;
font-style: italic;
color: #cdc3a9;
border-bottom: 3px solid #271407;
display:block;
text-align:center;
}
a.menu:hover {
background: #704c36;
border-top: 100px solid #;
border-bottom: 3px solid #a58a74; }

/* разделитель между постов */
#pun {
background-repeat: repeat-y;
background-position : top center;
}
#pun-viewtopic .post h3 {
    background: rgba(0, 0, 0, 0) url("https://i.ibb.co/TbcvMC7/Post-border.png") no-repeat scroll center top;
    color: #91989d !important;
    font-family: Verdana;
    font-size: 13px;
    height: 60px;
    margin-bottom: -42px;
    margin-left: -39px;
    margin-top: 0px;
    padding-top: 15px !important;
    width: 936px;
}
#pun-viewtopic .post h3 span {
    color: #91989d;
    margin-left: 10px;
    margin-top: -9px;
}
#pun-viewtopic .post h3 span a {
    color: #ccc3b9;
    text-shadow:none;
}
#pun-viewtopic .post h3 span a:hover {
    color: #59849a;
    text-shadow: none;
}
#pun-viewtopic div.post h3 strong::before {
    content: "Ответ # ";
    font-weight: normal;
margin-left: 450px;
}
#pun-viewtopic .post h3 strong {
    font-weight: bold;
    margin-left: 320px;
    position: absolute;
    width: auto;
}

.topic a.sharelink {
    display: none;
}

#pun-index .tcr {

}

/* баннеры */

.part {
float: left;
margin-left: 10px
}

.part img {

text-align: center;
opacity: 0.5;
-moz-opacity: 0.2;
filter: alpha(opacity=20) black;
-khtml-opacity: 0.2;
background-color:#000;
}

.part img:hover {
opacity:1;
-moz-opacity:1;
filter: alpha(opacity=100) black;
-khtml-opacity: 1;
background-color:#000;
}

.pa-avatar img {
    max-width: 200px;
    height: 200px;
}

.punbb .move_posts_form .container {
  background:#CCC0B1;
}

/* для таблицы */

.tooltip {
position: relative;
}
.tooltip em {
display: none;
position: absolute;
}
.tooltip:hover em {
font-style: normal;
display: block;
position: absolute;
background: #6c7d92;
color: #07070a;
padding: 2px 2px;
bottom: -170px;
right: 10px;
border-radius: 6px 6px 6px 6px;
background: #6c7d92repeat;
color: #07070a;
border-top: 1px solid #343f48!important;
border-bottom: 1px solid #343f48!important;
border-left: 2px solid #343f48!important;
border-right: 2px solid #343f48!important;
-webkit-box-shadow: 0px 1px 1px #343f48inset;
-moz-box-shadow: 0px 1px 1px #343f48inset;
box-shadow: 0px 1px 1px #343f48inset;

}
.tooltip:hover em i {
position: absolute;
bottom: -5px;
right: -5px;
border-top: 1px solid #000;
border-left: 1px solid transparent;
display: block;
}

element.style {
    height: 55px;
    width: 924px;
    top: 340px;
    margin-left: -17px;
    position: absolute;
    z-index: 200;
    text-align: center;
    padding-top: 3px;
    color: #00000e;
    overflow: hidden;
    /* border: 1px solid #708299; */
}

----------Anketa---------------

.anketaimg {
            position: relavite;
            text-align: center;
        }

        .anketaheader1, .anketaheader2 {
            text-align: center;
            font-family: Prata;
            font-weight: bold;
            font-size: 18px;
            color: #373e4f;
        }
        
        .anketaheader1 {
            padding-top: 15px!important;
            padding-bottom: 9px!important;
        }
        
        .anketaheader2 {
            padding-top: 15px!important;
            padding-bottom: 0px!important; 
            margin-bottom: -15px!important;
        }

        .anketaheader3 {
            text-align: center;
            font-family: Prata;
            font-weight: bold;
            font-size: 14px;
            color: #373e4f;
        }

        .anketapar {
            font-size: 11px;
            padding-top: 0px!important;
        }

        .anketainfo1 {
            display: inline-block;
            width: auto;
            padding-left: 10px;
        }

        .anketacolumns {
            text-align: center;
            font-family: Prata;
            font-size: 15px;
            font-weight: bold;
        }

        .anketacol1 {
            display: block;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .anketacol2 {
            display: inline-block;
            margin: 1em;
            width: 300px;
            padding-top: 10px;
            vertical-align: text-top;
        }

        .anketaanswerjustify,
        .anketaanswercenter {
            display: block;
            padding-top: 10px;
            font-family: Roboto Slab;
            font-size: 12px;
            font-weight: normal;
        }

        .anketaanswerjustify {
            text-align: justify;
            padding-top:0px;
            padding-bottom:5px;
        }

        .anketaanswercenter {
            text-align: center;
        }

        #anketaname {
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translate(-50%, 0px);
            padding: 10px 0px 0px 0px;
            font-family: "bernard-mt-condensed-regular", Prata!important;
            color: #383d4e;
            font-size: 22pt!important;
            text-align: center;
        }


        #anketabirth {
            position: absolute;
            top: 52px;
            left: 49.8%;
            transform: translate(-50%, 0px);
            text-align: center;
            padding: 5px 0px 0px 0px;
            font-family: Prata!important;
            font-size: 10pt!important;
        }


        #anketarace {
            position: absolute;
            top: 43px;
            left: 15%;
            transform: translate(-15%, 0px);
            font-family: Prata;
            font-size: 14pt;
        }

        #anketaclass {
            position: absolute;
            top: 43px;
            left: 85%;
            transform: translate(-85%, 0px);
            font-family: Prata;
            font-size: 14pt;
        }

        #anketalocation {
            position: absolute;
            top: 92px;
            left: 50%;
            transform: translate(-50%, 0px);
            text-align: center;
            font-family: Prata;
            font-size: 11pt;
            width: 610px;
        }

        #anketainfo {
            display: block;
            font-family: Roboto Slab;
            font-size: 9pt;
            margin-top: 5px;
            margin-left: 15px;
            text-align: center;
        }

        #anketaobraz {
            position: absolute;
            top: 175px;
            left: 50%;
            transform: translate(-50%, 0px);
        }

        #anketaabil {
            position: relative;
            top:-22px;
        }

---------- Announcement ----------------

        .announcemembers {
            margin-top: 10px;
        }


        .announcecol1,
        .announcecol2,
        .announcecol3 {
            width: 33%;
            float: left;
            text-align: center;
    position: absolute;
    margin-top: 222px!important;
    margin-left: 310px!important;
        }

        .announcecol4 {
width: auto;
    float: left;
    text-align: center;
    position: absolute;
    margin-left: 115px!important;
        }

        .announcecol5 {
width: auto;
    float: left;
    text-align: center;
    position: absolute;
    margin-left: -17px!important;
        }

        .announcememcol1 {
width: 0px;
    float: left;
    text-align: center;
    margin-top: 74px!important;
    margin-left: 66px!important;
}

        .announcememcol2 {
    width: 0px;
    float: left;
    text-align: center;
    padding-left: 48px;
    margin-top: 74px!important;
}

        .announcememcol3 {
width: 0px;
    float: left;
    text-align: center;
    margin-top: 74px!important;
    margin-left: 68px!important;
}

        .announcememcol4 {
    width: 0px;
    float: left;
    text-align: center;
    padding-left: 48px;
    margin-top: 74px!important;
}

        }

        .announcemem2col1,
        .announcemem2col2,
        .announcemem2col3 {
            width: 30px;
            float: left;
            text-align: center;
            padding-left: 55px;
        }

        .anncol1,
        .anncol2,
        .anncol3 {
position: absolute;
        }

        .annsquare {
            width: 40px;
            height: 40px;
border: 2px solid rgb(55 62 79 / 50%);
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        .announce2 {
            position: relative;
            z-index: 10;
            padding-top: 80px;
    width: 109%;
    margin-left: -38px!important;
        }

        .annticket1,
        .annticket2,
        .annticket3,
        .annticket4,
        .annticket5 {
     color: rgb(225 222 218 / 80%);
    font-family: Prata;
    font-size: 8px;
    padding-top: 11px;
    position: absolute;
        }

        .annticket1 {
    left: 694px;
}
        .annticket2 {
    left: 123px;
    top: 212px;
    width: 100px;
}

        .annticket3 {
    left: 127px;
    top: 126px!important;
    width: 100px!important;
}
        .annticket4 {
color: rgb(225 222 218 / 100%)!important;
    left: 115px;
    top: 50px!important;
    width: 100px!important;
text-shadow: #000 0px 0 2px;
}
        .annticket5 {
color: rgb(225 222 218 / 100%)!important;
left: 257px;
    top: 50px!important;
    width: 100px!important;
text-shadow: #000 0px 0 2px;
}


        
        .annline4 {
            position: relative;
            top:-165px;
            left: 40px;
            width: 200px;
            height: 1px;
            background: radial-gradient(orange, #373e4f);
            text-align: center;
        }

        .annscroll1 {
position: absolute;
    top: 65px;
    left: 591px;
    width: 250px;
    height: 67px;
            display: block;
            overflow-y: scroll;
            color: #bbb1a7;
            font-family: Roboto Slab;
            font-size: 7pt;
            text-align: justify;
        }

        .annscroll2 {
position: absolute;
    top: 239px;
    left: 90px;
    width: 140px;
    display: block;
    color: #bbb1a7;
    font-family: Roboto Slab;
    font-size: 5pt;
    text-align: center;
        }

        .annscroll3 {
position: absolute;
    top: 154px;
    left: 40px;
    width: 251px;
    height: 66px;
    display: block;
    color: rgb(203,195,186, 0.5);
    font-family: Montserrat;
    font-size: 7pt;
    text-align: justify;
    line-height: 9px;
        }

.annhrefcenter {
text-align: center;
font-size: 6pt!important;
}

        .aanscrlpad {
            padding-right: 10px;
        }

        .annavatar {
            position: relative;
            z-index: 20;
            width: 36px;
            height: 36px;
        }

        #annline {
            width: 100%;
            height: 20px;
            background: #373e4f;
            text-align: center;
            color: #ccc3ba;
            font-family: Prata;
            font-size: 14px;
            margin-bottom: 10px;
        }

        #annline2 {
            position: relative;
            top: 50px;
            width: 938px;
            height: 2px;
            margin-left: -51px;
            background: #373e4f;
            text-align: center;
            color: #ccc3ba;
        }

        #annline3 {
            position: relative;
            top: 29px;
            width: 938px;
            margin-left: -51px;
            height: 20px;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 90%)
        }




.themetext {
position: relative;
width: 370px;
left: -11px;
font-family: Roboto Slab;
font-size: 9pt;
text-align: justify;
}

.themeimg {
height: 85px;
}

.announcehref {
color: rgb(255 175 29 / 75%)!important;
}

.announcehref:hover {
color: #ffc65f!important;
  border-bottom: 0px none #59849a;
  text-decoration: none;
  font-weight: bold;
}

.banners {
filter: grayscale(100%) opacity(30%);
    position: relative;
    display: block;
    overflow-y: scroll;
    height: 64px;
}

.flaticonlink {
font-size: 4pt;
color: grey;
}


progress {
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    block-size: 1em;
    inline-size: 10em;
    vertical-align: -0.2em;
    writing-mode: horizontal-tb !important;
}

.health {
  background-color: #b90a0a;
    inline-size: 25em!important;
}

.health::-webkit-progress-value {
  background-color: #b90a0a;
}

.shield {
  background-color: #aaaaaa;
    inline-size: 25em!important;
}

.shield::-webkit-progress-value {
  background-color: #aaaaaa;
}



--------------------
/******************************************************************
  Cтиль к скрипту: 
 "Всплываюшая таблица с вкладками, в топике, с инфой о персонаже"
******************************************************************/
/*Стиль иконки в мини-профиле*/
img.a-info{
  padding:2px;
  display:block!important;
  cursor:pointer;
  /*border-radius:50%;*/
  position:absolute;
  text-align:left!important;
}
/* Затемняющий фон */
#pre-wrap {
 margin:0;
 top:0;bottom:0;
 left:0;right:0;
 width:100%;
 height:100%;
 position:fixed;
 z-index:20000;
 background: rgba(0,0,0,.65);
}
/*Подвижка иконки закрытия таблички*/
.my-tabs > img.close {
 float:right;
 margin:0 -35px 0 0!important;
 width:27px;
}
/* Корневой таб(UL) */
.my-tabs{
 display:block;
 z-index:30000;
 position:absolute;
 max-height:700px;  /*максимальная высота таблички*/
}
/* Стиль "Ушка" вкладок */
.my-tabs>span{
 opacity:0.78;
 color:#626436;
 cursor:pointer;
 display:block!important;
 position:relative; z-index:12;
 padding:4px;
 height: 17px!important;
 margin-right: 2px;
 margin-left: -1px;
 margin-bottom:-4px!important;
 text-align:left;
 padding-right:6px;
 text-shadow: 1px 1px 2px rgba(0,0,0,.4);
 font: italic normal 400 13px/16.5px "Comic Sans Ms";
 float:left;
}
/* Cдвиг самого первого "Уха" */
.my-tabs>span:first-child{
 margin-left: 8px;
}
/* Активное "Ушко" */
.my-tabs>span.selected{
 opacity:1;
 border-bottom-color:transparent!important;
display: none!important;
}
/* Стиль вкладки(LI)*/
.my-tabs>.tab-a{
 width:100%;
 height:100%;
 position:relative;z-index:1;
 display:none;  
 text-align:center;
 vertical-align:middle;
 padding:4px 12px!important;
}

/*Отступ контента вкладки сверху*/
.tab-a .post-content{
 margin-top:1.4em;
 text-align:left;
 display:inline-block;
}




.popup-name {
    position: absolute!important;
     left: 49%!important;
     top: 20px!important;
     -webkit-transform: translate(-50%, -50%)!important;
  -moz-transform: translate(-50%, -50%)!important;
  -ms-transform: translate(-50%, -50%)!important;
  -o-transform: translate(-50%, -50%)!important;
  transform: translate(-50%, -50%)!important;
  font-family: Prata;
  color: #282e3c;
}

.popup-name-text {
  font-family: Prata;
  font-size: 14px!important;
  color: #282e3c;
  font-weight: 1000;
  text-shadow: 0px 0px 3px rgba(0,0,0,0.2);
border-bottom: 1px dotted #282e3c;
    padding: 0px 10px 0px 10px;
}

.popup-quote {
position: absolute!important;
    left: 15px!important;
    top: 35px!important;
    width: 615px!important;
    max-height: 35px!important;
    text-align: center;
}


.popup-quote-text {
  font-family: Prata;
  font-style: italic;
  font-size: 10px!important;
  color: #282e3c;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}

#popup-infobut, #popup-awards {
    display: none;
}

/* Style the tab */
.tab {
  overflow: hidden;
}

/* Style the buttons inside the tab */
.tab button {
    margin-top: 72px!important;
    margin-left: 137px!important;
    cursor: pointer;
    transition: 0.3s;
    font-family: Prata;
    font-size: 12px!important;
    color: #282e3c;
    background-color: rgba(100,96,91,0.8);
    border: 1px solid #282e3c;
    border-radius: 15px;
    padding: 1px 40px 1px 40px!important;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgba(177,169,160,0.8);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgba(177,169,160,0.8);
}

/* Style the tab content */
.tabcontent {
  display: none;
    height: 300px;
    width: 622px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
}


.popup-charinfo {
position: absolute;
    top: 120px;
    left: 30px;
    width: 400px;
    height: 104px;
    border: 1px dotted #282e3c;
    border-radius: 10px;
}

#popup-charinfo-header {
    position: absolute;
    top: 100px;
    left: 45px;
  font-family: Prata;
  font-size: 10px!important;
  color: #282e3c;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}

.p-chinfo {
padding: 5px 10px 5px 10px!important;
    text-align: justify;
    height: 92px;
    overflow-y: scroll;
    width: 384px;
    color: #282e3c;
    font-size: 9pt;
    line-height: 12px;
}

.popup-relations {
    position: absolute;
    top: 250px;
    left: 30px;
    width: 400px;
    height: 50px;
border: 1px dotted #282e3c;
    border-radius: 10px;
}

#popup-relations-header {
    position: absolute;
    left: 45px;
    top: 232px;
  font-family: Prata;
  font-size: 10px!important;
  color: #282e3c;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}

.popup-magic {
position: absolute;
    left: 450px;
    top: 120px;
    width: 160px;
    height: 180px;
    border: 1px dotted #282e3c;
    border-radius: 10px;
}

#popup-magic-header {
    position: absolute;
    top: 100px;
    left: 510px;
  font-family: Prata;
  font-size: 10px!important;
  color: #282e3c;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}

.p-mag{
padding: 5px 10px 5px 10px!important;
    text-align: justify;
    height: 164px;
    overflow-y: scroll;
    width: 145px;
color: #282e3c;
font-size: 9pt;
    line-height: 12px;
}

.p-mag-prata {
font-family: Prata;
    font-weight: 800;
    font-size: 7pt;
}

.popup-artef{
    position: absolute;
    left: 30px;
    top: 336px;
    width: 579px;
    height: 50px;
    border: 1px dotted #282e3c;
    border-radius: 10px;
}

#popup-artef-header {
    position: absolute;
    top: 316px;
left: 234px;
  font-family: Prata;
  font-size: 10px!important;
  color: #282e3c;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}

.popup-avatars-block {
    display: inline-block;
    padding: 4px;
    text-align: center;
    max-width: 391px;
    height: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.popup-avatars {
    max-width: 35px;
    height: 35px;
    border: 1px dotted!important;
    border-radius: 10px!important;
    padding: 2px;
}

.popup-avatars-block {
    display: inline-block;
    padding: 4px;
    text-align: center;
    width: 391px;
    height: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.popup-avatars {
    width: 35px;
    height: 35px;
    border: 1px dotted!important;
    border-radius: 10px!important;
    padding: 2px;
}

.popup-artef-block {
    display: inline-block;
    padding: 4px;
    text-align: center;
    width: 570px;
    height: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.popup-artef-scr{
    max-width: 35px;
    height: 35px;
    border: 1px dotted!important;
    border-radius: 10px!important;
    padding: 2px;
}

#popup-baseawards-header {
position: absolute;
    top: 100px;
    left: 258px;
    font-family: Prata;
    font-size: 10px!important;
    color: #282e3c;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}

#popup-specialawards-header {
    position: absolute;
    top: 247px;
    left: 263px;
    font-family: Prata;
    font-size: 10px!important;
    color: #282e3c;
    text-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}

.popup-baseawards {
position: absolute;
    top: 120px;
    left: 30px;
    width: 579px;
    height: 116px;
    border: 1px dotted #282e3c;
    border-radius: 10px;
}

.popup-specialawards {
    position: absolute;
    top: 266px;
    left: 30px;
    width: 579px;
    height: 116px;
    border: 1px dotted #282e3c;
    border-radius: 10px;
}

.popup-baseawards-img-block {
display: inline-block;
    padding: 4px;
    text-align: center;
    width: 575px;
    height: 108px;
    overflow-y: scroll;
}

.popup-specialawards-img-block {
    display: inline-block;
    padding: 4px;
    text-align: center;
    width: 575px;
    height: 108px;
    overflow-y: scroll;
}

.popup-baseawards-img, .popup-specialawards-img {
    width: 40px;
    height: 40px;
    border: 1px dotted!important;
    border-radius: 10px!important;
    padding: 2px;
    margin: 5px!important;
}