@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

*, *:after, *:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
 }

html {
    background: hsl(0deg 0% 6%);
}

body {
    background-color: #141414;
    color: hsl(63deg 32% 85%);
    text-shadow: hsl(0deg 0% 28%) 0 -1px 1px;
    font-size: 14px;
    max-width: 400px;
    min-height: 100vh;
    padding: 0 10px;
    margin: 0 auto;
    line-height: 1.4;
    font-family: 'PT Sans', sans-serif;
    -webkit-box-shadow: 0px 0px 55px -6px rgb(0 0 0 / 31%) inset;
    -moz-box-shadow: 0px 0px 55px -6px rgba(0, 0, 0, 0.31) inset;
    box-shadow: 0px 0px 55px -6px rgb(0 0 0 / 31%) inset;
}
.top-nav {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    margin: 0 -2px
}
.top-nav > a {
    flex: 1;
    display: inline-flex;
    text-align: center;
    background-color: rgb(19, 18, 11);
    padding: 5px;
    border-top: 0!important;
    border-bottom: 0!important;
    height: 30px;
    line-height: 20px;
    justify-content: space-evenly;
}
.top-nav > a.active {
    background-color: rgb(46, 39, 0);
    border: 1px groove rgb(66, 57, 0);
}
.top-nav > a + a {
    border-left: 0;
}
.top-nav > a:first-child {
    border-top-left-radius: 5px;
}
.top-nav > a:last-child {
    border-top-right-radius: 5px;
}


/**/
.putana-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.putana-flex > .putana-inline {
    width: 100%;
    margin: 5px;
}
.putana-flex > .putana-inline > #--name,
.putana-flex > .putana-inline > #--image {
    text-align: center!important;
}
.putana-flex > .putana-inline + .putana-inline {
    margin-left: 80px;
}
.putana-flex > .putana-parameters {
    position: relative;
    width: 360px;
    height: 76px;
}
.putana-flex > .putana-parameters > .pp_absolute {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 25px);
}
.putana-flex > .putana-parameters > .pp_absolute > #--data {
    display: flex;
    justify-content: space-evenly;
    position: relative;
}
.putana-flex > .putana-parameters > .pp_absolute > #--data > span > img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
[class*="putana-button__"] #--text {
    position: relative;
    z-index: 2;
}
.putana-button__red {
    display: block;
    text-align: center;
    padding: 6px 10px;
    color: rgb(255, 255, 255);
    background: linear-gradient(to bottom, rgb(204, 0, 0), rgb(63, 0, 0));
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.putana-button__gray {
    display: block;
    text-align: center;
    padding: 6px 10px;
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to top, rgb(10, 10, 10), rgb(50, 50, 50));
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
/*
.putana-button__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to bottom, rgb(126, 0, 0), rgb(38, 0, 0));
    animation: fillAnimation 3s linear forwards;
    transform-origin: left;
}
 */
@keyframes fillAnimation {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
.putana-buttons {
    display: flex;
    justify-content: space-around;
    margin: -3px;
}
.putana-buttons > #--button {
    display: block;
    border: 1px solid rgb(72, 72, 72);
    background: linear-gradient(to top, rgb(10, 10, 10), rgb(50, 50, 50));
    width: 100%;
    margin: 3px;
    padding: 5px;
    text-align: center;
}
.putana-buttons > #--button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.putana-buttons > #--button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.putana-buttons > #--button + #--button {
    margin-left: -1px;
}
* {
    outline: none;
}

/*
progress {
  background: black;
  border: 0px;
  height: 6px;
  width: 100%;
  margin: 5px 0 0 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 12px -3px #950000; 950000
}
*/
progress {
    display: block;
    background: black;
    border: 0px;
    height: 5px;
    width: 100%;
    margin-top: 0!important;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 12px -3px #950000;
}

progress::-webkit-progress-value {
  background: #32cd32 ;
  border: 3px #32cd32; /*9b0a0a*/
  filter: blur(1px);
  box-shadow: 0 0 1rem 0.5rem #280e0b;
}

progress::-webkit-progress-bar {
  background: #27292a;
  border: 1px ridge #686868;
  border-radius: 2px;
}

.button_smallOur a {
    background: linear-gradient(180deg, #2e5e21 0%, #1d3615 50%, #213e18 51%, #175c0a 100%);
    display: block;
    color: #dcca8f;
    padding: 4px 11px;
    font-size: 13px;
    border: groove #636363;
    border-width: 0 0 1px 0;
    margin-top: 4px;
    margin-bottom: 4px;
}

.button_blueB a {
background: linear-gradient(180deg, hsl(224deg 68% 18%) 0%, hsl(225deg 58% 21%) 50%, hsl(230deg 63% 15%) 51%, hsl(220deg 55% 13%) 100%);
display: block;
    color: hsl(46deg 52% 71%);
    padding: 4px 11px;
    font-size: 13px;
    border: groove hsl(0deg 0% 39%);
    border-width: 0 0 1px 0;
    border-radius: 2px;
        margin-top: 4px;
    margin-bottom: 4px;

}

.button_redR a {
    background: linear-gradient(180deg, hsl(0deg 68% 10%) 0%, hsl(0deg 55% 18%) 50%, hsl(0deg 59% 10%) 51%, hsl(0deg 55% 13%) 100%);
    display: block;
    color: hsl(46deg 52% 71%);
    padding: 4px 11px;
    font-size: 13px;
    border: groove hsl(0deg 0% 39%);
    border-width: 0 0 1px 0;
    border-radius: 2px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.ot {
margin: 6px;
}

.ot2 {
margin-top: 10px;
}

img {
    vertical-align: middle;
    position: relative;
    top: -2px;
}

a {
    color: hsl(48deg 15% 52%);
    text-decoration: none;
}

.bflex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bflex2 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.form_radio {
    margin-bottom: 5px;
}
.form_radio input[type=radio] {
    display: none;
}
.form_radio label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 0;
    line-height: 18px;
    user-select: none;
}
/* Блоки относящиеся к шапке страницы */

.header {
    border: 1px solid hsl(0deg 0% 9%);
    border-top: 0;
    padding: 0 0 5px 0;
    margin: 0 -10px;
}
.header .block_city {
    width: calc(100% - 28%);
    text-align: center;
    padding: 5px 0 0 0;
    font-size: 12px;
    color: hsl(52deg 22% 44%);
}
.block_city .city_color_one {
    color: hsl(64deg 34% 54%);
}
.block_city .city_color_two {
    color: hsl(187deg 34% 54%);
}
.block_city .city_color_three {
    color: hsl(0deg 80% 69%);
}
.block_city .city_color_fo {
    color: hsl(0deg 80% 69%);
}
/*
.poster_city_one, .poster_city_two, .poster_city_three, .poster_city_fo {
    background-image: url(/css/img/city_one.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 220px;
    width: auto;
    margin: 0 -10px -108px -10px;
    border: 1px solid #222222;
}*/
.poster_city_one, .poster_city_two, .poster_city_three, .poster_city_fo, .poster_c1, .poster_c2, .poster_c3, .poster_c4, .poster_c5, .poster_c6, .poster_c7, .poster_c8, .poster_c9, .poster_c10, .poster_c11 {
    background-image: url(/css/img/city_one.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 220px;
    width: auto;
    margin: 0 -10px -150px -10px;
    border: 2px solid #222222;
}
.poster_city_two {
    background-image: url(/css/img/city_two.png);
}
.poster_city_three {
    background-image: url(/css/img/city_three.png);
}
.poster_city_fo {
    background-image: url(/css/img/city_4.png);
}
.poster_c1 {
    background-image: url(/css/img/fortress/1.jpg);
}
.poster_c2 {
    background-image: url(/css/img/fortress/2.jpg);
}
.poster_c3 {
    background-image: url(/css/img/fortress/3.jpg);
}
.poster_c4 {
    background-image: url(/css/img/fortress/4.jpg);
}.poster_c5 {
    background-image: url(/css/img/fortress/5.jpg);
}
.poster_c6 {
    background-image: url(/css/img/fortress/6.jpg);
}
.poster_c7 {
    background-image: url(/css/img/fortress/7.jpg);
}
.poster_c8 {
    background-image: url(/css/img/fortress/8.jpg);
}
.poster_c9 {
    background-image: url(/css/img/fortress/9.jpg);
}
.poster_c10 {
    background-image: url(/css/img/fortress/10.jpg);
}
.poster_c11 {
    background-image: url(/css/img/fortress/11.jpg);
}

.header .block_notifications, .header .block_mail {
    background: url(/css/img/mail.png) no-repeat center 3px;
    width: 14%;
    height: 30px;
    padding: 5px 8px;
    text-align: center;
    display: inline-block;
    margin: 5px 0 0 0;
}
.header .block_notifications {
    background: url(/css/img/notifications.png) no-repeat center 3px;
}
.header .mail_o, .header .notifications_o {
    background: url(/css/img/mail_o.png) no-repeat center 3px;
    display: block;
    width: 100%;
    height: inherit;
    position: relative;
    top: -9px;
    animation-name: flash;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.header .notifications_o {
    background: url(/css/img/notifications_o.png) no-repeat center 3px;
}
.header .flash {
    -webkit-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    }
    @-webkit-keyframes flash {
    0%, 50%, 100% {
    opacity: 1;
    }
    
    25%, 75% {
    opacity: 0;
    }
    }
    
    @keyframes flash {
    0%, 50%, 100% {
    opacity: 1;
    }
    
    25%, 75% {
    opacity: 0;
    }
    } 

    
    
.block_information {
    width: auto;
    text-align: center;
    margin: 0 -10px;
}
.block_information .wrapper_progress {
    background-image: url(/css/img/line_up.png);
    background-color: rgb(34 35 36);
    background-position: center;
    border: 1px groove #333333;
    display: block;
    overflow: hidden;
    position: relative;
    height: 14px;
}
.block_information .progress {
    position: absolute;
    background-image: url(/css/img/line_up_xp.png);
    filter: hue-rotate(84deg);
    background-color: hsl(5deg 78% 49%);
    background-position: center;
    height: 100%;
    top: 0;
    left: 0;
}
.block_information .text {
    position: absolute;
    font-size: 9px;
    line-height: 0;
    z-index: 2;
    top: 6px;
    left: 47%;
    color: hsl(0deg 4% 89%);
}

/* Основной контен и его стили */

.oh{ 
float:left; 
padding:6px; 
margin-top:1.5px;
}

.links {
    margin: 11px 0;
    border: 1px groove hsl(53deg 55% 11%);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}



.clear_header_line {
    position: relative;
    width: auto;
    margin: 0 -11px;
}

.clear_header_line .header_line_ogranka {
    background: url(/css/img/obvo.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 33px;
    width: 101%;
    position: absolute;
    top: -1.5px;
    left: -1px;
}

.links a, .links a:nth-child(2n) {
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 10%) 50%, hsl(0deg 0% 7%) 51%, hsl(0deg 0% 9%) 100%);
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 10%) 50%, hsl(0deg 0% 7%) 51%, hsl(0deg 0% 9%) 100%);
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 10%) 50%, hsl(0deg 0% 7%) 51%, hsl(0deg 0% 9%) 100%);
    display: block;
    color: hsl(46deg 52% 71%);
    padding: 7px 10px;
    font-size: 14px;
    border: groove hsl(0deg 0% 39%);
    border-width: 0 0 0px 0;
}

.links a:nth-child(2n) {
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(51deg 56% 8%) 50%, hsl(51deg 52% 6%) 51%, hsl(55deg 29% 8%) 100%);
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(51deg 56% 8%) 50%, hsl(51deg 52% 6%) 51%, hsl(55deg 29% 8%) 100%);
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(51deg 56% 8%) 50%, hsl(51deg 52% 6%) 51%, hsl(55deg 29% 8%) 100%);    color: hsl(46deg 52% 71%);
    border: groove hsl(55deg 53% 27%);
    border-width: 0 0 0px 0;
}

.links a:last-child {
    border-bottom: none;
}
.links a:hover {
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 13%) 50%, hsl(0deg 0% 9%) 51%, hsl(0deg 0% 8%) 100%);
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 13%) 50%, hsl(0deg 0% 9%) 51%, hsl(0deg 0% 8%) 100%);
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 13%) 50%, hsl(0deg 0% 9%) 51%, hsl(0deg 0% 8%) 100%);}
.links a:nth-child(2n):hover {
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(49deg 10% 14%) 50%, hsl(54deg 16% 10%) 51%, hsl(55deg 29% 8%) 100%);
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(49deg 10% 14%) 50%, hsl(54deg 16% 10%) 51%, hsl(55deg 29% 8%) 100%);
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(49deg 10% 14%) 50%, hsl(54deg 16% 10%) 51%, hsl(55deg 29% 8%) 100%);
}

    .horizontal a {
    width: calc(100% / 3);
    border-right: 0;
}
.links .plus_text, .links a:nth-child(2n).plus_text {
    color: hsl(38deg 100% 63%);
    text-shadow: hsl(46deg 100% 18%) 0 -1px 1px;
}
.links .plus {
    color: hsl(46deg 100% 62%);
    display: inline-block;
    -webkit-animation: pulsate 3.5s linear infinite;
    animation: pulsate 3.5s linear infinite;
    margin: -1px 0 0 3px;
    font-size: 17px;
    line-height: 17px;
    vertical-align: middle;
}
.links .annotations {
    font-size: 12px;
    display: block;
    margin: 2px 0 0 0;
    color: hsl(52deg 12% 64%);
}
.line {
    background: url(/css/img/line.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 7px;
    display: block;
    width: auto;
    margin: 7px;
}
@-webkit-keyframes pulsate {
    50% { text-shadow: 0 -1px hsl(57deg 100% 50% / 30%), 0 0 5px hsl(60deg 100% 50%), 0 0 8px hsl(24deg 100% 50%); }
   }
   @keyframes pulsate {
    50% { text-shadow: 0 -1px hsl(57deg 100% 50% / 30%), 0 0 5px hsl(60deg 100% 50%), 0 0 8px hsl(24deg 100% 50%); }
   }

/* Блоки относящиеся к ногам сайтам */

.footer {
    text-align: center;
    padding: 0 0 15px 0;
}
.footer .block_character {
    background: hsl(54deg 3% 10%);
    -webkit-box-shadow: 1px 7px 20px 7px hsl(0deg 0% 8% / 90%) inset;
    -moz-box-shadow: 1px 7px 20px 7px hsl(0deg 0% 8% / 90%) inset;
    box-shadow: 0px 0px 20px 0px hsl(54deg 89% 10%) inset;
    border: groove hsl(48deg 28% 41%);
    margin: 0 -10px;
    border-width: 0px 0 0px 0;
    padding: 3px;
}
.footer .block_nickname, .footer .block_money {
    width: calc(100% / 2);
    padding: 8px 10px;
    text-align: start;
    font-size: 13px;
}
.footer .block_money {
    text-align: end;
}
.footer .block_money span:nth-child(1) {
    color: hsl(49deg 85% 38%);
}
.footer .block_money span:nth-child(2) {
    color: hsl(0deg 0% 67%);
}
.footer .block_money span:nth-child(3) {
    color: hsl(69deg 11% 50%);
}
.footer .block_stat {
    width: 100%;
    padding: 0 8px 8px 8px;
    font-size: 13px;
}
.footer .block_stat span:nth-child(3) {
    color: hsl(0deg 29% 71%);
}
.footer .block_stat span:nth-child(2) {
    color: hsl(38deg 42% 68%);
}
.footer .block_stat span:nth-child(1) {
    color: hsl(201deg 93% 85%);
}
.footer .links_small {
    padding: 10px 8px 0 8px;
    font-size: 13px;
}
.footer .links_small a {
    color: hsl(45deg 40% 68%);
    padding: 0 7px;
    border-left: 1px solid hsl(62deg 9% 20%);
}
.footer .links_little {
    font-size: 12px;
}
.footer .links_little a {
    color: hsl(46deg 20% 66%);
    padding: 0 7px;
    border-left: 1px solid hsl(67deg 9% 19%);
}

.footer .links_small a:first-child, .footer .links_little a:first-child {
    border: none;
}

.footer .text {
    padding: 5px 10px;
    font-size: 13px;
}

.footer .text a {
    color: hsl(38deg 27% 59%);
}

.footer .links_menu_user {
    margin: 15px 0;
}

.footer .links_menu_user a {
    color: hsl(41deg 100% 74%);
    font-size: 13px;
}

.footer .icons_big {
    height: 59px;
    width: 65px;
    object-fit: contain;
}

.footer .links_menu_user span {
    display: block;
}

/* Акции */

hr.trip_line {
    border: 0;
    height: 1px;
    margin: 0 -10px;
    background-image: -webkit-linear-gradient(left, hsl(290deg 16% 3% / 0%), hsl(314deg 100% 50%), hsl(290deg 16% 3% / 0%));
    background-image: -moz-linear-gradient(left, hsl(290deg 16% 3%), hsl(314deg 100% 50%), hsl(290deg 16% 3%));
    background-image: -ms-linear-gradient(left, hsl(290deg 16% 3%), hsl(314deg 100% 50%), hsl(290deg 16% 3%));
    background-image: -o-linear-gradient(left, hsl(290deg 16% 3%), hsl(314deg 100% 50%), hsl(290deg 16% 3%));
    box-shadow: -2px 4px 10px 0 hsl(341deg 100% 50%), 0px 0px 6px 0 hsl(306deg 100% 50%), 0px -6px 17px 0 hsl(316deg 100% 50%);
}

.event_go {
    background: hsl(315deg 57% 10%) url(/css/img/gold_event.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 15px;
    text-align: end;
    margin: 0 -10px;
    font-size: 16px;
    color: hsl(45deg 100% 82%);
    text-shadow: 2px 2px 4px hsl(0deg 0% 0%), -2px -1px 13px hsl(49deg 100% 50%), 2px 0px 14px hsl(327deg 100% 50%);
}

.event_go span {
    display: block;
    font-size: 13px;
    color: hsl(0deg 0% 76%);
}

.splash_login {
    background: url(/css/img/splash.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -60px;
    margin: 0 -10px -270px -10px;
    width: auto;
    height: 440px;
}

.block_login, .block_text {
    background: hsl(52deg 29% 4%);
    padding: 5px 10px;
    margin: 11px 0;
    border: .1rem groove hsl(53deg 88.93% 16.67% / 55%);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    -webkit-box-shadow: 0px 1px 31px 2px hsl(50deg 79% 4%) inset;
    -moz-box-shadow: 0px 1px 31px 2px hsl(50deg 79% 4%) inset;
    box-shadow: 0px 1px 31px 2px hsl(50deg 79% 4%) inset;
}

.text_go {
    text-align: center;
    color: hsl(49deg 58% 51%);
    margin: 6px 0 15px 0;
    font-size: 13px;
}

.start_game {
    margin: 15px auto;
    display: block;
    text-align: center;
    padding: 9px;
    border: 0;
    color: #2a2714;
    background: #a89853;
    border-radius: 4px;
}

.logo {
    background: url(/css/img/logo.png);
    background-repeat: no-repeat;
    background-size: 140px;
    background-position: center;
    height: 55px;
    width: 100%;
    position: relative;
    margin: 0 0 -55px 0;
}

.start_game {
    position: relative;
    margin: 20px auto 25px auto;
    display: block;
    text-align: center;
    padding: 9px 15px;
    border: 2px groove hsl(108deg 44% 29%);
    color: hsl(0deg 0% 100%);
    text-shadow: hsl(94deg 67% 9%) -2px -1px 2px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    line-height: 15px;
    background: hsl(96deg 68% 28%);
    background: -moz-linear-gradient(13deg, rgb(64 156 1) 0%, rgb(0 71 11) 47%, rgb(49 79 28) 100%);
    background: -webkit-linear-gradient(13deg, rgb(64 156 1) 0%, rgb(0 71 11) 47%, rgb(49 79 28) 100%);
    background: linear-gradient(13deg, rgb(64 156 1) 0%, rgb(0 71 11) 47%, rgb(49 79 28) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#82ff2e",endColorstr="#499715",GradientType=1);
    border-radius: 4px;
    -moz-box-shadow: 0px 0px 7px 2px rgb(131 166 24 / 68%) inset, 0px 0px 13px 4px rgb(72 153 41 / 68%);
    box-shadow: 0px 0px 7px 2px rgb(131 166 24 / 68%) inset, 0px 0px 13px 4px rgb(72 153 41 / 68%);
    font-family: 'PT Sans', sans-serif;
    cursor: pointer;
    transition: .5s;
}

.start_game:hover {
    border: 2px groove hsl(108deg 74% 33%);
    text-shadow: hsl(94deg 67% 9%) -2px -1px 2px;
    -webkit-box-shadow: 0px 0px 7px 2px rgb(114 182 55 / 68%) inset, 0px 0px 13px 4px rgb(80 180 41 / 86%);
    -moz-box-shadow: 0px 0px 7px 2px rgb(114 182 55 / 68%) inset, 0px 0px 13px 4px rgb(80 180 41 / 86%);
    box-shadow: 0px 0px 7px 2px rgb(114 182 55 / 68%) inset, 0px 0px 13px 4px rgb(80 180 41 / 86%);
}

select {
    width: 100%; /* Меняем ширину select или автоматическм применияем к ширине родителя */
}

input, textarea, select {
    padding: 4px 10px;
    border-radius: 4px;
    display: block;
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 14px;
    background: hsl(50deg 13% 17%);
    border: 2px groove hsl(49deg 32% 26%);
    -webkit-box-shadow: 0px 1px 10px 0px hsl(50deg 30% 4%) inset;
    -moz-box-shadow: 0px 1px 10px 0px hsl(50deg 30% 4%) inset;
    box-shadow: 0px 1px 10px 0px hsl(50deg 30% 4%) inset;
    color: hsl(49deg 14% 46%);
    font-family: 'PT Sans', sans-serif;
    outline: none;
}

textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 75px;
    margin: 6px 0 12px 0;
}

input[type="submit"] {
    background: hsl(40deg 58% 26%);
    color: hsl(40deg 84% 79%);
    -webkit-box-shadow: 0px 1px 10px 0px hsl(50deg 43% 2%) inset;
    -moz-box-shadow: 0px 1px 10px 0px hsl(50deg 43% 2%) inset;
    box-shadow: 0px 1px 10px 0px hsl(50deg 43% 2%) inset;
    padding: 6px 14px;
    cursor: pointer;
    transition: .5s;
}

.vf {
    display: inline-block;
}


input[type="submit"]:hover {
    background: hsl(40deg 69% 29%);
    color: hsl(40deg 59% 87%);
    -webkit-box-shadow: 0px 1px 10px 0px hsl(50deg 77% 8%) inset;
    -moz-box-shadow: 0px 1px 10px 0px hsl(50deg 77% 8%) inset;
    box-shadow: 0px 1px 10px 0px hsl(50deg 77% 8%) inset;
}

.login_form {
    text-align: -moz-center;
    text-align: -webkit-center;
}

.login_form .login_repass {
    display: inline-block;
    margin: 0 0 5px 0;
    font-size: 13px;
}

.title_login {
    display: block;
    margin: -8px 0 14px 0;
    text-align: center;
    color: hsl(40deg 13% 57%);
    position: relative;
}

.title_login:after {
    content: "";
    background: rgb(210,162,65);
    background: linear-gradient(90deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    background: linear-gradient(90deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    background: linear-gradient(90deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d2a241",endColorstr="#971515",GradientType=1);
    height: 2px;
    width: 32px;
    position: absolute;
    margin: 9px 0 0 8px;
}

.title_login:before {
    content: "";
    background: rgb(210,162,65);
    background: linear-gradient(270deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    background: linear-gradient(270deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    background: linear-gradient(270deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d2a241",endColorstr="#971515",GradientType=1);
    height: 2px;
    width: 32px;
    position: absolute;
    top: 9px;
    margin: 0 0 0 -40px;
}

.users_character {
    position: relative;
    text-align: center;
    height: 160px;
    top: -60px;
}

.avatars {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px groove hsl(0deg 0% 54%);
    margin: 17px 0 0 0;
}

.items {
    width: 45px;
    height: 45px;
    background: hsl(0deg 0% 6%);
    -webkit-box-shadow: 0px 0px 20px 0px hsl(0deg 0% 0%) inset;
    -moz-box-shadow: 0px 0px 20px 0px hsl(0deg 0% 0%) inset;
    box-shadow: 0px 0px 20px 0px hsl(0deg 0% 0%) inset;
    border-radius: 4px;
    border: 1px groove hsl(43deg 9% 15%);
    display: inline-block;
    margin: 2px;
    position: relative;
}

.foot_items .items {
    width: 45px;
    height: 45px;
    background: hsl(0deg 0% 6%);
    -webkit-box-shadow: 0px 0px 20px 0px hsl(0deg 0% 0%) inset;
    -moz-box-shadow: 0px 0px 20px 0px hsl(0deg 0% 0%) inset;
    box-shadow: 0px 0px 20px 0px hsl(0deg 0% 0%) inset;
    border-radius: 4px;
    border: 1px groove hsl(43deg 9% 15%);
    display: inline-block;
    margin: -1px 2px;
    position: relative;
}

.red_1 {
    border: 1px groove hsl(43deg 49% 42%)!important;
}

.red_2 {
    border: 1px groove hsl(86deg 49% 42%)!important;
}

.red_3 {
    border: 1px groove hsl(202deg 49% 42%)!important;
}

.red_4 {
    border: 1px groove hsl(326deg 49% 47%)!important;
}

.red_5 {
    border: 1px groove hsl(0deg 71% 52%)!important;
}

.red_6 {
    border: 1px groove hsl(0deg 100% 94%)!important;
}

.items img {
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: contain;
}

.foot_items .items img {
    width: 100%;
    height: 100%;
    top: 0;
    object-fit: contain;
    vertical-align: revert;
}

.items span {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.left_items {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 18px;
    top: 2px;
}

.right_items {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 18px;
    top: 2px;
}

.foot_items {
    position: absolute;
    bottom: -50px;
    width: 100%;
}

.infonel_user {
    position: absolute;
    top: -42px;
    left: 25%;
    right: 25%;
    text-align: center;
    font-size: 16px;
    text-shadow: 1px 0px 4px black, 1px 0px 2px black, 1px 0px 12px black, -2px 0px 12px black;
}

.infonel_user span {
    display: block;
    font-size: 14px;
    color: hsl(38deg 64% 67%);
    margin: 1px 0 0 0;
}

.title_login.margin_top {
    margin: 10px 0 0 0;
}

.block_text span {
    color: hsl(44deg 97% 69%);
}

.user_city1o, .user_city2o, .user_city3o, .user_city4o {
    background: url(/css/img/user_city1o.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -60px;
    margin: 0 -10px -325px -10px;
    width: auto;
    height: 440px;
    opacity: .2;
}

.user_city2o {
    background: url(/css/img/user_city2o.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -60px;
    opacity: .1;
}

.user_city3o {
    background: url(/css/img/user_city3o.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -60px;
    opacity: .15;
}

.user_city4o {
    background: url(/css/img/user_city4o.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -60px;
    opacity: .15;
}

.cashe_box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cashe {
    width: 40px;
    height: 40px;
    margin: 5px 5px 5px 5px;
}

.cashe img {
    width: 100%;
    object-fit: contain;
}

.links.margin_top {
    margin: -14px 0 11px 0;
}

.go_cashe_box {
    margin: 5px 0;
    color: hsl(54deg 100% 89%);
}

.head_users_text .otv_chat {
    font-size: 13px;
    background: hsl(52deg 39% 8%);
    border-radius: 4px;
    line-height: 13px;
    padding: 2px 5px 4px 5px;
    display: inline-block;
    float: right;
}

.head_users_text {
    margin: 0 0 2px 0;
}

.block_text .me {
    color: hsl(44deg 97% 69%);
}

.p0 {
    padding: 0;
}

.block_text_go {
    word-wrap: break-word;
    margin: 0 -10px;
    padding: 10px 20px;
    border-bottom: 1px solid hsl(52deg 16% 14%);
}

.smile {
    display: inline-block;
    margin: 0 0 0 5px;
}

.small_flex {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.small_flex .smile {
    width: calc(100% / 10 - 5px);
    box-sizing: border-box;
    margin: 5px 0 0 5px;
}

.pagin {
    padding: 0 0 10px 0;
    text-align: center;
}

.pagin a {
    display: inline-block;
    padding: 2px 8px;
    background: hsl(50deg 26% 6%);
    border: 1px groove hsl(49deg 83% 10%);
    border-radius: 4px;
    color: hsl(52deg 29% 45%);
    margin: 2px;
}

.pagin .yes {
    background: hsl(52deg 100% 11%);
    border-color: hsl(52deg 87% 16%);
}

.us_ff {
    width: 100%;
    text-align: center;
}

.block_text_go:nth-child(2n) {
    background: hsl(52deg 41% 6%);
}

span.time {
    display: inline-block;
    font-size: 11px;
    position: relative;
    left: 5px;
    color: hsl(44deg 10% 40%);
}

.time.new {
    color: hsl(102deg 32% 57%);
}

.block_text.center {
    text-align: center;
}

.title_cashe_mail {
    display: block;
    margin: 3px 0 5px 0;
}

.fcs {
    display: inline-block;
    width: calc(100% / 3 - 8px);
    background: hsl(51deg 48% 8%);
    border: 1px groove #262108;
    padding: 0 4px 3px 4px;
    border-radius: 4px;
    margin: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

.horizontal_two a {
    width: 50%;
    text-align: center;
    cursor: pointer;
}

.sme {
    margin: 0px 0 15px 0;
}

.clear_header_line.margin_title {
    margin-top: 5px;
    margin-bottom: 16px;
}

a.zakrep {
    color: hsl(30deg 100% 60%)!important;
    font-weight: 600;
}

.red_block {
    display: block;
    width: calc(100% / 6 - 10px);
    margin: 5px;
    background: hsl(53deg 49% 10%);
    border: 1px groove hsl(53deg 57% 15%);
    border-radius: 3px;
    text-align: center;
    padding: 3px 2px 0 0;
    cursor: pointer;
}

.box_items_s {
    width: calc(100% / 3 - 10px);
    margin: 5px;
    text-align: center;
    background: hsl(0deg 0% 10%);
    border-radius: 4px;
    border: 1px groove hsl(0deg 0% 17%);
    font-size: 13px;
    padding: 9px;
}

.bflex.items_shop {
    margin: 0 -6px 7px -3px;
}

.name_items_s {
    display: block;
    margin: 5px 0 0 0;
    font-size: 13px;
    color: hsl(0deg 0% 76%);
}

.box_items_f {
    width: 100%;
    margin: 0 0 5px 0;
    text-align: start;
    background: hsl(0deg 0% 10%);
    border-radius: 4px;
    border: 1px groove hsl(0deg 0% 17%);
    font-size: 13px;
    padding: 9px;
}

.rm {
    border: 1px solid #131313;
}

.block_info_red .name_items_s {
    font-size: 14px;
    color: hsl(48deg 49% 63%);
    margin: 0 0 3px 0;
}

.cl_red .red_1, .cl_red .red_2, .cl_red .red_3, .cl_red .red_4, .cl_red .red_5, .cl_red .red_6 {
    border: none!important;
    color: hsl(51deg 14% 42%);
    box-shadow: 0 0!important;
}

.cl_red .red_2 {
    color: hsl(94deg 69% 41%);
}

.cl_red .red_3 {
    color: hsl(201deg 65% 62%);
}

.cl_red .red_4 {
    color: hsl(320deg 67% 66%);
}

.cl_red .red_5 {
    color: hsl(0deg 100% 71%);
}

.cl_red .red_6 {
    color: hsl(0deg 0% 63%);
    text-shadow: 0px 0px 9px hsl(0deg 100% 50%);
}

.block_info_red {
    width: calc(100% - 55px); /*thrtrt*/
  margin: 0 0 0 5px;
}
span.count_f {
    position: absolute;
    left: -9px;
    top: 31px;
    color: hsl(38deg 48% 76%);
    text-shadow: 1px 1px 5px hsl(35deg 53% 47%);
}

.box_items_z {
    width: calc(100% / 3);
    text-align: center;
    margin: 0 0 10px -15px;
}

.items_z {
    margin: 15px 0 10px 0;
}

.craf_zone {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.box_items_zc {
    width: calc(100% / 3);
}

.go_craft {
    margin: 0 -12px;
}

.go_craft img {
    width: 30px;
}

a.items.zoll {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    border: 1px groove hsl(50deg 65% 44%);
}

.box_items_fm {
    width: 100%;
    margin: 10px 0;
    text-align: start;
    background: hsl(0deg 4% 10%);
    border-radius: 4px;
    border: 1px groove hsl(0deg 2% 15%);
    font-size: 13px;
    padding: 9px;
}

.box_items_fm .links {
    width: 100%;
    text-align: center;
}

.box_items_fm .links a {
    background: linear-gradient(180deg, hsl(54deg 71% 22%) 0%, hsl(54deg 41% 11%) 50%, hsl(53deg 41% 9%) 51%, hsl(51deg 81% 12%) 100%);
    background: linear-gradient(180deg, hsl(54deg 71% 22%) 0%, hsl(54deg 41% 11%) 50%, hsl(53deg 41% 9%) 51%, hsl(51deg 81% 12%) 100%);
    background: linear-gradient(180deg, hsl(54deg 71% 22%) 0%, hsl(54deg 41% 11%) 50%, hsl(53deg 41% 9%) 51%, hsl(51deg 81% 12%) 100%);
    color: hsl(52deg 87% 77%);
    border: 1px groove hsl(53deg 81% 34%);
}


.notifi .err_n {
    display: block;
    background: hsl(0deg 57% 30%);
    padding: 7px;
    color: hsl(0deg 100% 93%);
    -webkit-box-shadow: 0px 0px 14px 5px rgb(54 8 8 / 60%) inset;
    -moz-box-shadow: 0px 0px 14px 5px rgb(54 8 8 / 60%) inset;
    box-shadow: 0px 0px 14px 5px rgb(54 8 8 / 60%) inset;
    border: 1px groove hsl(0deg 40% 50%);
}

.notifi .suc_n {
    display: block;
    background: hsl(102deg 41% 27%);
    padding: 7px;
    color: hsl(126deg 100% 93%);
    -webkit-box-shadow: 0px 0px 14px 5px rgb(26 56 13) inset;
    -moz-box-shadow: 0px 0px 14px 5px rgb(26 56 13) inset;
    box-shadow: 0px 0px 14px 5px rgb(26 56 13) inset;
    border: 1px groove hsl(102deg 32% 47%);
}

.notifi .sucerr_n {
    display: block;
    background: hsl(102deg 5% 18%);
    padding: 7px;
    color: hsl(0deg 0% 46%);
    -webkit-box-shadow: 0px 0px 14px 5px rgb(27 31 26) inset;
    -moz-box-shadow: 0px 0px 14px 5px rgb(27 31 26) inset;
    box-shadow: 0px 0px 14px 5px rgb(27 31 26) inset;
    border: 1px groove hsl(0deg 0% 51%);
}

.notifi .new_n {
    display: block;
    background: hsl(38deg 60% 40%);
    padding: 7px;
    color: hsl(38deg 100% 84%);
    -webkit-box-shadow: 0px 0px 14px 5px rgb(70 50 17) inset;
    -moz-box-shadow: 0px 0px 14px 5px rgb(70 50 17) inset;
    box-shadow: 0px 0px 14px 5px rgb(70 50 17) inset;
    border: 1px groove hsl(38deg 18% 55%);
}

.notifi {
    margin: 0 -10px;
}

.pad {
    padding: 0px 3% 2px;;
}
.skill-container {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}
.skill-container > .item {
    flex: 0 0 25%;
    max-width: 25%;
}
@media screen and (max-width: 480px){
body {
    max-width: 96%;
}
}