@font-face {
    font-family: 'SourceSans';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/sourcesanspro.eot');
    src: local('☺'), url('../fonts/sourcesanspro.woff') format('woff'), url('../fonts/sourcesanspro.ttf') format('truetype'), url('../fonts/sourcesanspro.svg') format('svg');
}

@font-face {
    font-family: 'SourceSansBold';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/sourcesansprobold.eot');
    src: local('☺'), url('../fonts/sourcesansprobold.woff') format('woff'), url('../fonts/sourcesansprobold.ttf') format('truetype'), url('../fonts/sourcesansprobold.svg') format('svg');
}

@font-face {
    font-family: 'SourceSansSemiBold';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/sourcesansprosemibold.eot');
    src: local('☺'), url('../fonts/sourcesansprosemibold.woff') format('woff'), url('../fonts/sourcesansprosemibold.ttf') format('truetype'), url('../fonts/sourcesansprosemibold.svg') format('svg');
}

@font-face {
    font-family: 'Glyphter';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/Glyphter1.eot');
    src: url('../fonts/Glyphter1.eot?#iefix') format('embedded-opentype'), url('../fonts/Glyphter1.woff') format('woff'), url('../fonts/Glyphter1.ttf') format('truetype'), url('../fonts/Glyphter1.svg#Glyphter') format('svg');
}

span[class*='icon-'] {
    font-family: 'Glyphter';
    font-weight: normal;
    font-style: normal;
    line-height: 24px;
    font-size: 14px;
    color: #fff;
    position: relative;
}
.serv-stat-modal span[class*='icon-']:before {
    position: absolute;
    left: 50%;
    margin-left: -7px;
}
span.icon-arena:before {
    content: '\0041';
}

span.icon-black-hole:before {
    content: '\0042';
}

span.icon-car:before {
    content: '\0043';
}

span.icon-death:before {
    content: '\0044';
}

span.icon-experimental:before {
    content: '\0045';
}

span.icon-fastfood:before {
    content: '\0046';
}

span.icon-fatboy:before {
    content: '\0047';
}

span.icon-ffa:before {
    content: '\0048';
}

span.icon-hardcore:before {
    content: '\0049';
}

span.icon-kraken:before {
    content: '\004a';
}

span.icon-lock:before {
    content: '\004b';
}

span.icon-megasplit:before {
    content: '\004c';
}

span.icon-oneshot:before {
    content: '\004d';
}

span.icon-snake:before {
    content: '\004e';
}

span.icon-space:before {
    content: '\004f';
}

span.icon-team:before {
    content: '\0050';
}

span.icon-virus:before {
    content: '\0051';
}

span.icon-zombie:before {
    content: '\0052';
}

span.icon-special:before {
    content: '\0053';
}

span.icon-ms5k:before {
    content: '\0054';
}

span.icon-dual:before{content:'\0055';}
span.icon-exclusive:before{content:'\0056';}

/**:hover {
    transition: .2s;
}*/
li.cent>p {
    text-align: center;
}
html,
body {
    font-family: 'SourceSans';
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    padding: 0;
    background: #eef9ff;
}

.fill {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    margin: 0 auto 0 auto;
    padding-top: 40px;
    /*background: url(../img/game.gif);*/
    background-size: cover;
}

* {
    line-height: 1;
}


/*UI*/

h1 {
    font-family: 'SourceSansBold';
    font-size: 36px;
    margin: 0;
    color: #333;
}

h2 {
    font-family: 'SourceSansBold';
    font-size: 24px;
    margin: 0;
    color: #333;
}

h3 {
    font-family: 'SourceSansSemiBold';
    font-size: 18px;
    margin: 0;
    color: #333;
}

p {
    font-family: 'SourceSans';
    font-size: 16px;
    color: #333;
}

i {
    font-style: normal !important;
}

p.online {
    text-align: center;
}

p.online span {
    font-family: 'SourceSansSemiBold';
    margin-left: 10px;
    padding: 2px 7px;
    color: #fff;
    border-radius: 15px;
    background: #266fff;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover,
a:focus {
    cursor: pointer;
}

strong {
    font-family: 'SourceSansSemiBold';
}

span {
    font-family: 'SourceSans';
}

hr {
    margin: 20px 0 10px;
    border: solid 1px rgba(0, 0, 0, .1);
}

span.blue {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 15px;
    background: rgba(38, 111, 255, .10);
}

span.green {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 15px;
    background: rgba(57, 190, 52, .20);
}

span.purple {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 15px;
    background: rgba(255, 38, 141, .20);
}

span.orange {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 15px;
    background: rgba(255, 38, 141, .20);
}

span.red {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 15px;
    background: rgba(235, 49, 49, .20);
}

span.blue i:first-child {
    margin: auto;
    color: #266fff;
}

span.green i:first-child {
    margin: auto;
    color: #39be34;
}

span.purple i:first-child {
    margin: auto;
    color: #ff268d;
}

span.red i:first-child {
    margin: auto;
    color: #eb3131;
}

.row {
    display: inline-block;
}


/*FLAGS and LABELS*/

.flag {
    background-size: cover;
}

.flag.canada,
.flag.Canada {
    background: url(../img/flags/can.svg);
}

.flag.europa,
.flag.Europe {
    background: url(../img/flags/eu.svg);
}

.flag.france,
.flag.France {
    background: url(../img/flags/france.svg);
}

.flag.netherland {
    background: url(../img/flags/nether.svg);
}

.flag.china {
    background: url(../img/flags/china.svg);
}

.flag.russia,
.flag.Russia {
    background: url(../img/flags/rus.svg);
}

.flag.unitedk {
    background: url(../img/flags/uk.svg);
}

.flag.usasosi,
.flag.USA {
    background: url(../img/flags/usa.svg);
}

.flag.germany,
.flag.Germany {
    background: url(../img/flags/germany.svg);
}

.flag.belorussia,
.flag.Belorussia {
    background: url(../img/flags/belarus.svg);
}

.flag.ukraine,
.flag.Ukraine {
    background: url(../img/flags/ukraine.svg);
}

.flag.asia,
.flag.ASIA {
    background: url(../img/flags/china.svg);
}

.complexity {
    background-size: cover;
}

.complexity.l {
    background: url(../img/filter/low.svg);
}

.complexity.n {
    background: url(../img/filter/normal.svg);
}

.complexity.h {
    background: url(../img/filter/hard.svg);
}

.physics {
    background-size: cover;
}

.physics.p {
    background: url(../img/filter/petri.svg);
}

.physics.a {
    background: url(../img/filter/agario.svg);
}


/*END FLAGS and LABELS*/


/*DROPDOWN*/

.popup {
    font-size: 14px;
    display: none;
}

.popup p {
    font-size: 14px;
}

.dd-center,
.dd-left,
.dd-right {
    position: absolute;
    z-index: 5;
    padding: 15px 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .10);
}

.dd-center:after,
.dd-center:before,
.dd-left:after,
.dd-left:before,
.dd-right:after,
.dd-right:before {
    position: absolute;
    top: -27px;
    left: 50%;
    margin-left: -12px;
    content: '';
    border: solid transparent;
}

.dd-left:after,
.dd-left:before {
    left: 25px;
}

.dd-right:after,
.dd-right:before {
    left: 90%;
}

.dd-center:before,
.dd-left:before,
.dd-right:before {
    margin-top: 4px;
    border-width: 12px;
    border-bottom-color: rgba(0, 0, 0, .10);
}

.dd-center:after,
.dd-left:after,
.dd-right:after {
    margin-top: 5px;
    margin-left: -12px;
    border-width: 12px;
    border-bottom-color: rgb(255, 255, 255);
}

.dd-center p,
.dd-center p {
    margin-bottom: 15px;
}

.dd-center .or {
    font-size: 14px;
    display: block;
    overflow: hidden;
    margin-bottom: 15px;
}

.dd-center .or:before,
.dd-center .or:after {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 1px;
    content: '';
    vertical-align: middle;
    border: solid #fff;
    border-width: 0 10px;
    background: #ccc;
}

.dd-center .or:before {
    margin-left: -100%;
}

.dd-center .or:after {
    margin-right: -100%;
}

.skin-content, .payment-content {
    top: 70px;
    width: 280px;
    padding: 10px 20px;
}

.auth-content {
    top: 70px;
    width: 280px;
    padding: 20px 20px;
    text-align: center;
}

.auth-content.auth,
.friend-item-content {
    z-index: 10;
    width: 220px;
    padding: 15px 10px;
}

.auth-content .button.blue.max {
    width: 50%;
    margin: 0 0 0 0;
}

.auth-content label.autologin {
    display: flex;
    float: left;
    width: 50%;
    height: 40px;
}

.auth-content label.autologin > * {
    margin: auto 0;
}

.auth-content label.autologin input {
    border-color: rgba(0, 0, 0, .15);
}

.auth-content label.autologin span {
    margin-left: 7px;
}

.auth-content .loginerror {
    color: #eb3131;
}

.friend-item-content {
    left: 15px;
}

.auth-content strong,
.auth-content .social-auth {
    font-size: 14px;
    margin-bottom: 15px;
}

.social-auth {
    display: flex;
    padding: 0;
    justify-content: space-between;
}

.social-auth li {
    width: 40px;
    height: 40px;
    list-style: none;
}

#uLogin {
    margin: 15px auto;
}

.social-auth li a:hover,
.social-auth li a:focus {
    cursor: pointer;
    color: #fff;
    background: #266fff;
}

.auth-content input[type='text'] {
    border-right: solid 1px rgba(0, 0, 0, .10);
}

.social-auth li a {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgba(38, 111, 255, .10);
}

.social-auth li a i:first-child {
    margin: auto;
}

.auth-action,
.friend-action {
    margin: 0;
    padding: 0;
}

.auth-action li,
.friend-action li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.auth-action li:hover,
.auth-action li:focus,
.friend-action li:hover,
.friend-action li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.auth-action li span,
.friend-action li span {
    margin: auto 10px auto 0;
}

.auth-action li a,
.friend-action li a {
    display: flex;
    margin: auto 0;
}

.button.lang .subs-flag {
    display: flex;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 12px;
    background: #fff;
}

.button.lang .flag {
    display: block;
    width: 24px;
    height: 24px;
    margin: auto;
}

.lang-group {
    position: relative;
}

.lang-content {
    top: 55px;
    width: 200px;
}

.lang-content ul {
    margin: 0;
    padding: 0;
}

.lang-content ul li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.lang-content ul li:hover,
.lang-content ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.lang-content ul li.active {
    background: rgba(38, 111, 255, .10);
}

.lang-content ul li.active .subs-flag {
    background: none;
}

.lang-content ul li * {
    margin: auto 0;
}

.lang-content ul li label {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.lang-content ul li label:hover,
.lang-content ul li label:focus {
    cursor: pointer;
}

.lang-content ul li label > span {
    display: flex;
}

.lang-content .subs-flag {
    display: flex;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 12px;
    background: rgba(38, 111, 255, .10);
}

.lang-content .flag {
    display: block;
    width: 16px;
    height: 16px;
    margin: auto;
}

.lang-content label input[type='radio'] {
    display: none;
}

.lang-content label input[type='radio']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}

.ava-content {
    position: absolute;
    top: 60px;
    display: flex;
    flex-direction: row;
    width: 400px;
}

.ava-content > div {
    float: left;
    width: 180px;
    margin: 0 10px;
}

.ava-content strong {
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ava-content ul {
    overflow-y: auto;
    max-height: 150px;
    margin: 0;
    padding: 0;
}

.ava-content ul li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.ava-content ul li:hover,
.ava-content ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.ava-content ul li.active {
    background: rgba(38, 111, 255, .10);
}

.ava-content ul li.active .subs-flag {
    background: none;
}

.ava-content ul li * {
    margin: auto 0;
}

.ava-content ul li label {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.ava-content ul li label:hover,
.ava-content ul li label:focus {
    cursor: pointer;
}

.ava-content ul li label > span {
    display: flex;
}

.ava-content ul li label > span > span {
    margin-left: 10px;
}

.ava-content img {
    display: block;
    width: 24px;
    height: 24px;
    margin: auto;
    border-radius: 15px;
}

.ava-content label input[type='radio'] {
    display: none;
}

.ava-content label input[type='radio']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}

.ava-content .savedremove {
    font-size: 14px;
    margin-right: 10px;
    color: rgba(0, 0, 0, .4);
}

.ava-content .savedremove:hover,
.ava-content .savedremove:focus {
    color: rgba(235, 49, 49, .4);
}

.liked-content {
    top: 60px;
    left: 5px;
    width: 300px;
    padding: 15px 20px;
}

.liked-content .social-auth {
    margin: auto 0;
}

.filtr-content {
    top: 50px;
    flex-direction: row;
    width: 400px;
    padding-top: 20px;
    padding-bottom: 5px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.filtr-content-block {
    display: flex;
    float: left;
    width: 50%;
    flex-grow: 0;
}

.filtr-content-block figure {
    font-size: 12px;
    display: block;
    margin: 0;
    margin-bottom: 10px;
}

.filtr-content-block figure strong {
    line-height: 2;
    display: flex;
    width: 100%;
    margin-left: 10px;
    justify-content: space-between;
}

.filtr-content-block figure strong i:first-child {
    float: right;
    margin-right: 20px;
    color: #ccc;
}

.filtr-content-block figure strong i:hover,
.filtr-content-block figure strong i:focus {
    cursor: pointer;
    color: #999;
}

.filtr-content-block figure figcaption {
    margin-top: 5px;
}

.filtr-content-block figure div {
    display: flex;
}

.filtr-content-block figure .flag,
.filtr-content-block figure .complexity,
.filtr-content-block figure .physics {
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.filtr-content-block figure ul {
    margin: 0;
    padding: 0;
}

.filtr-content-block figure ul li {
    font-family: 'SourceSans';
    font-size: 14px;
    display: flex;
    width: 160px;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 10px;
    list-style: none;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 18px;
}

.filtr-content-block figure ul li:hover,
.filtr-content-block figure ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.filtr-content-block figure ul li label {
    display: flex;
    flex-direction: row;
    margin: auto 0;
    padding: 8px 0;
    justify-content: space-between;
    flex-grow: 1;
}

.filtr-content-block figure ul li label:hover,
.filtr-content-block figure ul li label:focus {
    cursor: pointer;
}

.filtr-content-block figure ul li label input[type='checkbox'] {
    display: none;
}

.filtr-content-block figure ul li label input[type='checkbox']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}

.filtr-content-block .filtr-item.active {
    background: rgba(38, 111, 255, .10);
}

.gameover-ava-content-auth {
    position: absolute;
    top: 60px;
    width: 200px;
}

.gameover-ava-content-auth ul {
    overflow-y: auto;
    max-height: 150px;
    margin: 0;
    padding: 0;
}

.gameover-ava-content-auth ul li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.gameover-ava-content-auth ul li:hover,
.gameover-ava-content-auth ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.gameover-ava-content-auth ul li.active {
    background: rgba(38, 111, 255, .10);
}

.gameover-ava-content-auth ul li.active .subs-flag {
    background: none;
}

.gameover-ava-content-auth ul li * {
    margin: auto 0;
}

.gameover-ava-content-auth ul li label {
    display: flex;
    width: 100%;
    padding: 5px 0;
    justify-content: space-between;
}

.gameover-ava-content-auth ul li label:hover,
.gameover-ava-content-auth ul li label:focus {
    cursor: pointer;
}

.gameover-ava-content-auth ul li label > span {
    display: flex;
}

.gameover-ava-content-auth ul li label > span > span {
    margin-left: 10px;
}

.gameover-ava-content-auth img {
    display: block;
    width: 24px;
    height: 24px;
    margin: auto;
    border-radius: 15px;
}

.gameover-ava-content-auth label input[type='radio'] {
    display: none;
}

.gameover-ava-content-auth label input[type='radio']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}


.color-team-variants {
    width: 220px;
}

.color-team-variants ul {
    margin: 0;
    padding: 0;
}

.color-team-variants ul li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.color-team-variants ul li:hover,
.color-team-variants ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.color-team-variants ul li.active {
    background: rgba(38, 111, 255, .10);
}

.color-team-variants ul li.active .colors {
    background: none;
}

.color-team-variants ul li * {
    margin: auto 0;
}

.color-team-variants ul li label {
    display: flex;
    width: 100%;
    padding: 3px 0;
    justify-content: space-between;
}

.color-team-variants ul li label:hover,
.color-team-variants ul li label:focus {
    cursor: pointer;
}

.color-team-variants ul li label > span {
    display: flex;
}

.color-team-variants .colors {
    display: flex;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 12px;
}

.color-team-variants .round {
    display: block;
    width: 16px;
    height: 16px;
    margin: auto;
}

.color-team-variants label input[type='radio'] {
    display: none;
}

.color-team-variants label input[type='radio']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}


/*FORM*/

input[type='text'],
input[type='password'] {
    font-family: 'SourceSans';
    font-size: 14px;
    float: left;
    box-sizing: border-box;
    width: 50%;
    height: 40px;
    margin: 10px 0;
    padding: 0 15px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-right: none;
}

input[type='text'] {
    border-right: 1px solid rgba(0, 0, 0, .10);
}

input[type='text']:hover,
input[type='password']:hover,
input[type='text']:focus,
input[type='password']:focus {
    outline: none;
}

input[type='text'].left {
    border-right: none;
    border-radius: 20px 0 0 20px;
}

input[type='password'].right {
    border-radius: 0 20px 20px 0;
}

input[type='text'].right {
    border-radius: 0 20px 20px 0;
}


/*END FORM*/


/*END DROPDOWN*/


/*BUTTONS*/

.button,
input[type='button'] {
    font-family: 'SourceSansSemiBold';
    font-size: 14px;
    font-size: 14px;
    display: flex;
    float: left;
    flex-direction: row;
    height: 40px;
    margin: 0 10px;
    padding: 0 15px;
    text-align: center;
    color: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .10);
    flex-wrap: nowrap;
}

.button:first-child {
    margin-left: 0;
}

.button:last-child {
    margin-right: 0;
}

.wrapper .button {
    box-shadow: none;
}

.button i:first-child {
    margin-right: 15px;
}

.button img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border: solid 3px rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.button:hover img,
.button:focus img {
    border: solid 3px #fff;
}

.button.active img {
    border: solid 3px #fff;
}

.button.max {
    display: block;
    width: 100%;
    margin-left: 0;
}

.button.round i:first-child {
    margin: auto;
}

.button * {
    margin: auto;
}

.button.big span {
    margin: auto 15px auto 10px;
}

.button.white {
    color: #000;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #fff;
}

.button.blue {
    background: #266fff;
}

.button.blue:hover,
.button.blue:focus {
    cursor: pointer;
    background: #1e58cc;
}

.button.purple {
    background: #ff268d;
    box-shadow: 0 5px 30px 0 rgba(255, 38, 140, .40);
}

.button.purple.skin {
    /*padding-right: 30px;*/
    z-index: 1;
}

.button.purple.skin i {
    margin: auto;
}

.button.green {
    background: #39be34;
}

.button.orange {
    background: #ff6c00;
}

.button.orange:hover,
.button.orange:focus {
    cursor: pointer;
    color: #000;
    background: #fff;
}

.button.outline {
    color: #000;
    border: 1px solid #266fff;
    border-radius: 25px;
    background: none;
}

.button.outline.blue {
    color: #266fff;
    border-color: #266fff;
}

.button.outline.blue:hover,
.button.outline.blue:focus {
    color: #fff;
    background: #266fff;
}

.button.outline.purple {
    font-family: 'SourceSansSemiBold';
    border-color: #ff268d;
}

.button.round {
    width: 40px;
    height: 40px;
    padding: 0;
    color: #266fff;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #fff;
}

.button.round.active {
    color: #fff;
    background: #266fff;
}

.button:hover,
.button:focus {
    cursor: pointer;
}

.button.white:hover,
.button.white:focus,
.button.white.active {
    color: #fff;
    background: #266fff;
}

.button.purple:hover,
.button.purple:focus,
.button.purple.active {
    background: #cc1f70;
}

.button.round:hover,
.button.round:focus {
    color: #fff;
    background: #266fff;
}

.button i:last-child {
    margin-left: 5px;
}

.button.opacity {
    background: rgba(255, 255, 255, .3);
    box-shadow: none;
}

.button.white.no-hover:hover,
.button.white.no-hover:focus {
    cursor: default;
    color: inherit;
    background: rgba(255, 255, 255, .3);
}

.button.round.no-hover:hover,
.button.round.no-hover:focus {
    cursor: pointer;
    color: #266fff;
    background: rgba(255, 255, 255, .3);
}

.button.no-hover.select:hover,
.button.no-hover.select:focus,
.button.no-hover.auth:hover,
.button.no-hover.auth:focus {
    cursor: pointer;
}


/*END BUTTONS*/

::-webkit-scrollbar-button {
    width: 5px;
    height: 0;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0, 0, 0, .05);
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0, 0, 0, .10);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .15);
}

::-webkit-resizer {
    width: 4px;
    height: 0;
    background-image: url('');
    background-repeat: no-repeat;
}

::-webkit-scrollbar {
    width: 4px;
}

span.round {
    display: block;
    width: 16px;
    height: 16px;
    margin: auto 0;
    border-radius: 10px;
}

span.round.blue {
    background: #266fff;
}

span.round.red {
    background: #eb3131;
}

span.round.green {
    background: #39be34;
}


/*END UI*/


/*HEADER AND NAVIGATION*/

header {
    position: inherit;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 70px;
    margin: 0 10px 0 100px;
    flex-shrink: 1;
    flex-wrap: nowrap;
    justify-content: space-between;
}

header > div {
    margin: auto 0;
}

header .first {
    z-index: 3;
    float: left;
    flex-grow: 1;
}

header .first svg:last-child {
    font-size: 20px;
    width: 155px;
    height: 50px;
}

header .second {
    flex-grow: .5;
}

header .second p {
    font-size: 14px;
}

header .second span {
    font-size: 12px;
}

header .third {
    display: flex;
    float: right;
    flex-grow: 1;
    justify-content: flex-end;
}

header .third > * {
    margin: 0 0;
}

header .third > .button {
    margin-right: 10px;
}

.button.white.auth > span.login,
.button.white.lang > span {
    display: none;
}


/*NAVIGATION*/

.nav {
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    /*width: 333px;*/
    width: 34px;
    height: 100vh;
    padding: 15px 18px;
    border-radius: 20px 0 0 20px;
    background: #266fff;
}

#nav-button {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.nav-open {
    color: #266fff;
    background: #fff;
}

.nav-close {
    color: #fff;
    background: rgba(0, 0, 0, .15);
}

.nav-open *,
.nav-close * {
    margin: auto;
}

.nav-open:hover,
.nav-open:focus {
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, .15);
}

.nav-close:hover,
.nav-close:focus {
    cursor: pointer;
    background: rgba(0, 0, 0, .3);
}

.nav-container {
    display: flex;
    flex-direction: column;
    /*max-width: 235px;*/
    height: 500px;
    margin-top: 40px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.nav strong {
    font-family: 'SourceSansBold';
    font-size: 12px;
    display: block;
    overflow: hidden;
    height: 15px !important;
    padding-left: 5px;
    opacity: 0;
    color: #fff;
}

.nav ul {
    margin-top: 13px;
    padding: 0;
}

.nav ul li {
    line-height: 24px;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    padding: 5px;
    list-style: none;
}

.nav ul li a {
    font-family: 'SourceSans';
    font-size: 14px;
    display: block;
    overflow: hidden;
    max-height: 24px;
    text-decoration: none;
    color: #fff;
}

.nav .icon {
    font-size: 14px;
    display: flex;
    float: left;
    width: 24px;
    height: 24px;
    color: #fff;
    border-radius: 15px;
    background: rgba(0, 0, 0, .15);
}

.nav .text {
    line-height: 1.6;
    padding-left: 10px;
    opacity: 0;
}

.nav .icon * {
    margin: auto;
}

.nav ul li:hover,
.nav ul li:focus {
    border-radius: 20px;
    background: rgba(0, 0, 0, .15);
}

.nav ul li:hover a,
.nav ul li:focus a {
    color: #fff;
}

.nav ul li.active {
    border-radius: 20px;
    background: #fff;
}

.nav ul li.active .icon {
    background: #266fff;
}

.nav ul li.active a {
    font-family: 'SourceSansSemiBold';
    color: #000;
}


/*END HEADER AND NAVIGATION*/


/*WRAPPER*/

.wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    width: 1270px;
    height: 100vh;
    margin: 0 auto 0 auto;
    border-radius: 20px 20px 20px 20px;
    background: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .10);
    flex-wrap: wrap;
    justify-content: space-between;
    flex-shrink: 0;
}

.layout {
    display: flex;
    flex-direction: row;
    padding-left: 70px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.wrapper .mode {
    position: relative;
    width: 385px;
    border-top: 1px solid rgba(0, 0, 0, .10);
    flex-shrink: 0;
}

.wrapper .mode-header {
    display: flex;
    height: 58px;
    padding: 0 15px;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
}

.wrapper .mode-header .liked,
.wrapper .mode-header .back {
    display: flex;
    width: 34px;
    height: 34px;
    margin: auto 0;
    color: #f4e015;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 20px;
}

.wrapper .mode-header .liked *,
.wrapper .mode-header .back * {
    margin: auto;
}

.wrapper .mode-header .back {
    display: none;
    color: #000;
}

.wrapper .mode-header .liked:hover,
.wrapper .mode-header .liked:focus {
    cursor: pointer;
    color: #fff;
    border-color: #f4e015;
    background: #f4e015;
}

.wrapper .mode-header .liked.active {
    color: #fff;
    background: #f4e015;
}

.wrapper .mode-header .back:hover,
.wrapper .mode-header .back:focus {
    cursor: pointer;
    background: rgba(0, 0, 0, .10);
}

.wrapper .mode-header strong {
    font-family: 'SourceSansSemiBold';
    font-size: 18px;
    margin: auto 0;
    padding-left: 15px;
}

.mode-icon,
.info-mode-icon {
    font-size: 24px;
}
.info-select-mode .info-mode-icon span {
    font-size: 36px;
}

/*MODE*/
.mode-icon span {
    color: inherit;
}
#SPECIAL .mode-icon {
    color: rgba(255, 38, 141, 1);
    background: rgba(255, 38, 141, .2);
}

#SPECIAL.active {
    background: rgba(255, 38, 141, .2);
}

#SPECIAL.active .mode-icon,
.info-mode-icon {
    background: rgba(255, 38, 141, 1);
}

#FFA .mode-icon {
    color: rgba(57, 190, 52, 1);
    background: rgba(57, 190, 52, .2);
}

#FFA.active {
    background: rgba(57, 190, 52, .2);
}

#FFA.active .mode-icon,
.info-mode-icon {
    background: rgba(57, 190, 52, 1);
}

#FF-FFA .mode-icon {
    color: rgba(57, 190, 52, 1);
    background: rgba(57, 190, 52, .2);
}

#FF-FFA.active {
    background: rgba(57, 190, 52, .2);
}

#FF-FFA.active .mode-icon,
.info-mode-icon {
    background: rgba(57, 190, 52, 1);
}

#HC-FFA .mode-icon {
    color: rgba(255, 108, 0, 1);
    background: rgba(255, 108, 0, .2);
}

#HC-FFA.active {
    background: rgba(255, 108, 0, .2);
}

#HC-FFA.active .mode-icon,
.info-mode-icon {
    background: rgba(255, 108, 0, 1);
}

#MS-FFA .mode-icon {
    color: rgba(235, 49, 49, 1);
    background: rgba(235, 49, 49, .2);
}

#MS-FFA.active {
    background: rgba(235, 49, 49, .2);
}

#MS-FFA.active .mode-icon,
.info-mode-icon {
    background: rgba(235, 49, 49, 1);
}

#TEAM .mode-icon {
    color: rgba(38, 111, 255, 1);
    background: rgba(38, 111, 255, .2);
}

#TEAM.active {
    background: rgba(38, 111, 255, .2);
}

#TEAM.active .mode-icon,
.info-mode-icon {
    background: rgba(38, 111, 255, 1);
}

#CRSPL .mode-icon {
    color: rgba(255, 38, 141, 1);
    background: rgba(255, 38, 141, .2);
}

#CRSPL.active {
    background: rgba(255, 38, 141, .2);
}

#CRSPL.active .mode-icon,
.info-mode-icon {
    background: rgba(255, 38, 141, 1);
}

#EXPERIM .mode-icon {
    color: rgba(38, 111, 255, 1);
    background: rgba(38, 111, 255, .2);
}

#EXPERIM.active {
    background: rgba(38, 111, 255, .2);
}

#EXPERIM.active .mode-icon,
.info-mode-icon {
    background: rgba(38, 111, 255, 1);
}

#HC-EXP .mode-icon {
    color: rgba(235, 49, 49, 1);
    background: rgba(235, 49, 49, .2);
}

#HC-EXP.active {
    background: rgba(235, 49, 49, .2);
}

#HC-EXP.active .mode-icon,
.info-mode-icon {
    background: rgba(235, 49, 49, 1);
}

#ARENA .mode-icon {
    color: rgba(255, 108, 0, 1);
    background: rgba(255, 108, 0, .2);
}

#ARENA.active {
    background: rgba(255, 108, 0, .2);
}

#ARENA.active .mode-icon,
.info-mode-icon {
    background: rgba(255, 108, 0, 1);
}

#FB-ARENA .mode-icon {
    color: rgba(57, 190, 52, 1);
    background: rgba(57, 190, 52, .2);
}

#FB-ARENA.active {
    background: rgba(57, 190, 52, .2);
}

#FB-ARENA.active .mode-icon,
.info-mode-icon {
    background: rgba(57, 190, 52, 1);
}

#SDISH .mode-icon {
    color: rgba(38, 111, 255, 1);
    background: rgba(38, 111, 255, .2);
}

#SDISH.active {
    background: rgba(38, 111, 255, .2);
}

#SDISH.active .mode-icon,
.info-mode-icon {
    background: rgba(38, 111, 255, 1);
}

#C-FFA .mode-icon {
    color: rgba(23, 238, 15, 1);
    background: rgba(23, 238, 15, .2);
}

#C-FFA.active {
    background: rgba(23, 238, 15, .2);
}

#C-FFA.active .mode-icon,
.info-mode-icon {
    background: rgba(23, 238, 15, 1);
}

#OSHOT .mode-icon {
    color: rgba(235, 49, 49, 1);
    background: rgba(235, 49, 49, .2);
}

#OSHOT.active {
    background: rgba(235, 49, 49, .2);
}

#OSHOT.active .mode-icon,
.info-mode-icon {
    background: rgba(235, 49, 49, 1);
}

#DMATCH .mode-icon {
    color: rgba(255, 38, 141, 1);
    background: rgba(255, 38, 141, .2);
}

#DMATCH.active {
    background: rgba(255, 38, 141, .2);
}

#DMATCH.active .mode-icon,
.info-mode-icon {
    background: rgba(255, 38, 141, 1);
}

#S-INVA .mode-icon {
    color: rgba(0, 0, 0, 1);
    background: rgba(0, 0, 0, .2);
}

#S-INVA.active {
    background: rgba(0, 0, 0, .2);
}

#S-INVA.active .mode-icon,
.info-mode-icon {
    background: rgba(0, 0, 0, 1);
}

#ZOMBIE .mode-icon {
    color: rgba(57, 190, 52, 1);
    background: rgba(57, 190, 52, .2);
}

#ZOMBIE.active {
    background: rgba(57, 190, 52, .2);
}

#ZOMBIE.active .mode-icon,
.info-mode-icon {
    background: rgba(57, 190, 52, 1);
}

#VW-FFA .mode-icon {
    color: rgba(23, 238, 15, 1);
    background: rgba(23, 238, 15, .2);
}

#VW-FFA.active {
    background: rgba(23, 238, 15, .2);
}

#VW-FFA.active .mode-icon,
.info-mode-icon {
    background: rgba(23, 238, 15, 1);
}

#KRAKEN .mode-icon {
    color: rgba(38, 111, 255, 1);
    background: rgba(38, 111, 255, .2);
}

#KRAKEN.active {
    background: rgba(38, 111, 255, .2);
}

#KRAKEN.active .mode-icon,
.info-mode-icon {
    background: rgba(38, 111, 255, 1);
}

#B-HOLE .mode-icon {
    color: rgba(0, 0, 0, 1);
    background: rgba(0, 0, 0, .2);
}

#B-HOLE.active {
    background: rgba(0, 0, 0, .2);
}

#B-HOLE.active .mode-icon,
.info-mode-icon {
    background: rgba(0, 0, 0, 1);
}

#E-F-SPED .mode-icon {
    color: rgba(255, 108, 0, 1);
    background: rgba(255, 108, 0, .2);
}

#E-F-SPED.active {
    background: rgba(255, 108, 0, .2);
}

#E-F-SPED.active .mode-icon,
.info-mode-icon {
    background: rgba(255, 108, 0, 1);
}

#CLAN-H .mode-icon {
    color: rgba(235, 49, 49, 1);
    background: rgba(235, 49, 49, .2);
}

#CLAN-H.active {
    background: rgba(235, 49, 49, .2);
}

#CLAN-H.active .mode-icon,
.info-mode-icon {
    background: rgba(235, 49, 49, 1);
}
#MS5K.active {
    background: rgba(255, 108, 0, .2)
}

#MS5K.active .mode-icon,
.info-mode-icon {
    background: rgba(255, 108, 0, 1);
}
.mode-wrapper {
    position: relative;
    height: 100%;
    padding: 0 15px;
}

.mode-wrapper ul {
    padding: 0;
}

.mode-list {
    float: left;
    overflow-x: hidden;
    width: 100%;
}

.mode-item {
    font-family: 'SourceSans';
    font-size: 14px;
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
    padding: 5px;
    list-style: none;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 18px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.mode-item * {
    margin: auto 0;
}

.mode-item:hover,
.mode-item:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .15);
}

.mode-item.active {
    border-radius: 18px;
}

.mode-item .mode-icon {
    font-size: 14px;
    display: flex;
    width: 24px;
    height: 24px;
    color: #ff6c00;
    border-radius: 12px;
    background: rgba(255, 108, 0, .20);
}

.mode-item.active .mode-icon {
    color: #fff !important;
    ;
}

.mode-item .mode-icon * {
    margin: auto;
}

.mode-item .mode-text {
    padding-left: 10px;
}


/*SERVER*/

#server-wrapper {
    position: absolute;
    z-index: 4;
    top: 58px;
    right: 0;
    display: none;
    width: 0;
    height: 100%;
    border-left: solid 1px rgba(0, 0, 0, .1);
}


/*FILTR*/

.server-filtr {
    display: flex;
    box-sizing: border-box;
    height: 39px;
    padding: 0 20px;
    border-top: solid 1px rgba(0, 0, 0, .1);
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    justify-content: space-between;
}

.server-filtr:hover,
.server-filtr:focus,
.server-filtr.active {
    cursor: pointer;
    background: #f4f8ff;
}

.server-filtr * {
    margin: auto 0;
}

.server-filtr strong {
    font-size: 12px;
}

.filtr-items {
    display: flex;
    flex-wrap: nowrap;
}

.filtr-items > div {
    margin: auto 5px;
}

.filtr-items > div > div {
    margin: auto 2.5px;
}

.filtr-items .country,
.filtr-items .comp,
.filtr-items .phys {
    display: flex;
}

.filtr-items .flag,
.filtr-items .complexity,
.filtr-items .physics {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 10px;
}

.filtr-items > i:last-child {
    margin-left: 15px;
}


/*END FILTR*/

.server-list {
    overflow-y: auto;
    padding: 0 15px 0 10px;
}

.server-item {
    font-family: 'SourceSans';
    font-size: 14px;
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 10px;
    list-style: none;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 18px;
}

.server-item * {
    margin: auto 0;
}

.server-item:hover,
.server-item:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .20);
}

.server-item label:hover,
.server-item label:focus {
    cursor: pointer;
}

.server-item.active {
    font-family: 'SourceSansSemiBold';
    font-size: 14px;
    color: #333;
    border-radius: 18px;
    background: rgba(38, 111, 255, .10);
}

.server-item label {
    display: flex;
    width: 100%;
    padding: 8px 0;
    justify-content: space-between;
}
.server-item label>div {
	display: flex;
}
.server-item label .flag {
    display: inline-block;
    float: left;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background-size: cover;
}

.server-item label .server-name {
    display: block;
    overflow: hidden;
    width: 125px;
    height: 16px;
    margin: auto 0 auto 15px;
    line-height: 1.3;
}

.server-item label input[type='radio'] {
    display: none;
}

.server-item label input[type='radio']:checked + div > .flag {
    background: url(../img/check.svg);
}

.server-item label .players {
    font-family: 'SourceSans';
    font-size: 14px;
    display: flex;
    color: #333;
}

.server-item label .players i:first-child {
    margin-right: 7px;
    color: rgba(0, 0, 0, .4);
}

.server-item label .players .like {
    margin-left: 15px;
}

.server-item label .players .like:hover,
.server-item label .players .like:focus {
    cursor: pointer;
}

.server-item.liked {
    background: rgba(243, 224, 21, .20);
}

.server-item.liked label .players .like i:first-child {
    color: #f4e015;
}


/*END SERVER*/


/*LIKED*/

.liked-list {
    overflow-y: auto;
    padding: 0 15px 0 10px;
}

.liked-item {
    font-family: 'SourceSans';
    font-size: 14px;
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 10px;
    list-style: none;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 18px;
}

.liked-item * {
    margin: auto 0;
}

.liked-item:hover,
.liked-item:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .20);
}

.liked-item label:hover,
.liked-item label:focus {
    cursor: pointer;
}

.liked-item.active {
    font-family: 'SourceSansSemiBold';
    font-size: 14px;
    color: #333;
    border-radius: 18px;
    background: rgba(38, 111, 255, .10);
}

.liked-item label {
    position: relative;
    display: flex;
    width: 100%;
    padding: 2px 0;
    justify-content: space-between;
}

.liked-item label .mode {
    z-index: 2;
    display: flex;
    float: left;
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 15px;
}

.liked-item label .mode i:first-child {
    margin: auto;
    color: #fff;
}

.liked-item label .flag {
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 15px;
    background-size: cover;
}

.liked-item label .liked-name {
    line-height: 2;
    display: block;
    overflow: hidden;
    width: 125px;
    max-height: 20px;
    margin-left: 45px;
}

.liked-item label input[type='radio'] {
    display: none;
}


/*.liked-item label input[type="radio"]:checked + div>.flag {
	background: url(../img/check.svg);
}*/

.liked-item label .players {
    font-family: 'SourceSans';
    font-size: 14px;
    display: flex;
    color: #333;
}

.liked-item label .players i:first-child {
    margin-right: 7px;
    color: rgba(0, 0, 0, .4);
}

.liked-item label .players .trash {
    margin-left: 15px;
}

.liked-item label .players .trash:hover,
.liked-item label .players .trash:focus {
    cursor: pointer;
}

.liked-item.liked {
    background: rgba(243, 224, 21, .20);
}

.liked-item.liked label .players .trash i:first-child {
    color: #f4e015;
}


/*END LIKED*/


/*END MODE*/

.wrapper .info {
    box-sizing: content-box;
    width: 455px;
    border-top: 1px solid rgba(0, 0, 0, .10);
    border-right: solid 1px rgba(0, 0, 0, .1);
    border-left: solid 1px rgba(0, 0, 0, .1);
    overflow: auto;
}


/*INFO*/

.info-select-mode {
    display: none;
    padding: 20px;
}

.info-landing {
    overflow-y: auto;
    padding: 20px 20px 0;
    background: url(../img/main-bg.png);
    background-repeat: no-repeat;
}

.info-landing .button {
    padding: 0 30px;
}

.info-landing h2 {
    display: block;
    margin: 20px 0 10px;
}

.info-landing h2:last-child {
    margin-bottom: 20px !important;
}

.info-landing h3 {
    margin-bottom: 5px;
}

.info-landing p {
    font-size: 14px;
    line-height: 22px;
    display: block;
    margin: 0 0 10px;
}

.info-landing a {
    color: #266fff;
}

.info-landig-about {
    display: block;
    margin-top: 120px;
}

.info-landing .item {
    display: flex;
    margin: 10px 0;
}

.info-landing .item-icon {
    display: flex;
    width: 48px;
    height: 48px;
    margin-right: 20px;
    padding: 0 15px;
    border-radius: 25px;
    background: #e9f0ff;
}

.info-landing .item-icon i {
    font-size: 18px;
    margin: auto;
    color: #266fff;
}

.go-game {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: -20px;
    padding: 30px 20px;
    background: #266fff;
}

.go-game p {
    font-size: 18px;
    color: #fff;
}

.go-game .button {
    font-size: 14px;
    margin: auto;
    padding: 0 30px;
}

.info-landing .set {
    display: flex;
    margin-bottom: 10px;
}

.info-landing .set p {
    margin: auto 0;
}

.info-landing .hot-space,
.info-landing .hot-latter,
.info-landing .hot-add {
    display: flex;
    width: 30px;
    height: 30px;
    margin: auto 10px auto 0;
    border-radius: 4px;
    background: #e9f0ff;
}

.info-landing .hot-space span,
.info-landing .hot-latter span,
.info-landing .hot-add span {
    font-family: 'SourceSansSemiBold';
    font-size: 14px;
    margin: auto;
    color: #000;
}

.info-landing .hot-space {
    width: 150px;
}

.info-landing .hot-add {
    height: 24px;
}

.info-wrapper .info-mode-icon {
    display: flex;
    width: 85px;
    height: 85px;
    margin-bottom: 15px;
    border-radius: 45px;
}

.info-wrapper .info-mode-icon * {
    margin: auto;
}

.info-wrapper .info-mode-icon i:first-child {
    font-size: 36px;
}

.info-wrapper .options {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.info-wrapper .options > div {
    width: 100px;
    margin-right: 10px;
}

.info-wrapper .options > div:last-child {
    width: 130px;
    margin-right: 0;
}

.info-wrapper .option-title {
    display: flex;
    margin-top: 5px;
}

.info-wrapper .option-title * {
    margin: auto 0;
}

.info-wrapper strong {
    font-size: 10px;
}

.info-wrapper .options > div {
    margin-right: 40px;
}

.info-wrapper .options span {
    font-size: 14px;
}

.info-wrapper .title {
    display: flex;
    margin-bottom: 10px;
}

.info-wrapper h1 {
    margin: auto 0;
    flex-shrink: 1;
}

.info-wrapper .title i {
    position: relative;
    width: 15px;
    height: 15px;
    margin: auto 0 auto 15px;
    color: rgba(0, 0, 0, .4);
}

.info-wrapper .title i:hover {
    cursor: pointer;
    color: rgba(0, 0, 0, .6);
}

.info-wrapper .title i span {
    font-family: 'SourceSansSemiBold';
    font-size: 12px;
    font-weight: normal !important;
    line-height: normal;
    position: absolute;
    z-index: 5;
    right: -20em;
    /* = max-width */
    bottom: 100%;
    left: -20em;
    /* = max-width */
    display: block;
    visibility: hidden;
    overflow: auto;
    max-width: 250px;
    max-height: 80vh;
    margin: 0 auto .4em;
    padding: 15px 20px;
    cursor: auto;
    color: #fff;
    border-radius: 10px;
    background: rgba(0, 0, 0, .8);
}

.info-wrapper .title i:after {
    position: absolute;
    top: -.35em;
    left: 50%;
    visibility: hidden;
    margin: 0 0 0 -.4em;
    content: '';
    cursor: auto;
    border: .4em solid;
    border-color: rgba(0, 0, 0, .6) transparent transparent transparent;
}


/*.info-wrapper .title i:before {
  position: absolute;
  top: -.4em;
  left: 0;
  right: 0;
  height: .4em;
  visibility: hidden;
 }*/

.info-wrapper .title i:hover > span,
.info-wrapper .title i:hover:before,
.info-wrapper .title i:hover:after,
.info-wrapper .title i:focus > span,
.info-wrapper .title i:focus:before,
.info-wrapper .title i:focus:after {
    visibility: visible;
    transition: 0s .4s;
}

.info-wrapper .discription {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 17px;
}

.info-wrapper .options .option-title {
    margin-bottom: 10px;
}

.info-wrapper .options .option-title .complexity,
.info-wrapper .options .option-title .flag,
.info-wrapper .options .option-title .physics {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.info-wrapper .info-nickname {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.info-wrapper .info-nickname input {
    width: 100px;
    flex-grow: 1;
}

.info-wrapper .avatar.left {
    display: flex;
    float: left;
    width: 40px;
    height: 38px;
    margin: 10px 0;
    padding: 0 15px;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 20px 0 0 20px;
}

.info-wrapper .avatar.left:hover,
.info-wrapper .avatar.left:focus,
.info-wrapper .avatar.left.active {
    cursor: pointer;
    background: #f4f8ff;
}

.info-wrapper .avatar.left * {
    margin: auto 0;
}

.info-wrapper .avatar.left img {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #266fff;
}

.info-wrapper .color.right {
    display: flex;
    float: left;
    width: 40px;
    height: 38px;
    margin: 10px 0;
    padding: 0 15px;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 0 20px 20px 0;
}

.info-wrapper .color.right:hover,
.info-wrapper .color.right:focus,
.info-wrapper .color.right.active {
    cursor: pointer;
    background: #f4f8ff;
}

.info-wrapper .color.right * {
    margin: auto 0;
}

.info-wrapper .color.right .color-raund {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background: #266fff;
}

.info-wrapper .color.right i:last-child,
.info-wrapper .avatar.left i:last-child {
    margin-left: 5px;
}

.info-wrapper .button {
    margin: 0 10px 0 0;
}


/*END INFO*/


/*TOP*/

.top,
.option,
.friend,
.top-serv {
    position: absolute;
    z-index: 2;
    right: 0;
    display: none;
    width: 360px;
    border-top: 1px solid rgba(0, 0, 0, .10);
    border-left: 1px solid rgba(0, 0, 0, .10);
    background: #fff;
}

.top-header,
.option-header,
.friend-header,
.top-serv-header {
    display: flex;
    height: 58px;
    padding: 0 20px;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    justify-content: space-between;
}

.top-header strong,
.option-header strong,
.friend-header strong,
.top-serv-header strong {
    font-size: 18px;
    margin: auto 0;
}

.top-close,
.option-close,
.friend-close {
    display: flex;
    width: 34px;
    height: 34px;
    margin: auto 0;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 20px;
}

.top-close:hover,
.top-close:focus,
.option-close:hover,
.option-close:focus,
.friend-close:hover,
.friend-close:focus {
    cursor: pointer;
    background: rgba(0, 0, 0, .10);
}

.top-close *,
.option-close *,
.friend-close * {
    margin: auto;
}

.top-content,
.option-content,
.friend-content,
.top-serv-content {
    height: 100%;
}

.top-content-header,
.option-content-header,
.friend-content-header,
.top-serv-content-header {
    display: flex;
    height: 45px;
    padding: 0 20px;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    background: #f4f8ff;
}

.top-content-header ul,
.option-content-header ul,
.friend-content-header ul,
.top-serv-content-header ul {
    display: flex;
    flex-direction: row;
    margin: auto 0;
    padding: 0;
}

.top-content-header ul li,
.option-content-header ul li,
.friend-content-header ul li,
.top-serv-content-header ul li {
    display: block;
    float: left;
    box-sizing: border-box;
    margin-right: 20px;
    list-style: none;
}

.top-content-header ul li a,
.option-content-header ul li a,
.friend-content-header ul li a,
.top-serv-content-header ul li a {
    font-family: 'SourceSansBold';
    font-size: 12px;
    padding: 6px 0 10px 0;
    text-decoration: none;
    text-transform: uppercase;
    color: #333;
}


/* От РУ*/

.top-serv-content tr {
    display: none;
}

.top-serv-content tr.top {
    display: table-row;
}

.friend-content-header ul li span {
    font-family: 'SourceSansBold';
    font-size: 12px;
    margin-left: 5px;
    color: #ff268d;
}

.top-content-header ul li a:hover,
.top-content-header ul li a:focus,
.option-content-header ul li a:hover,
.option-content-header ul li a:focus,
.friend-content-header ul li a:hover,
.friend-content-header ul li a:focus,
.top-serv-content-header ul li a:hover,
.top-serv-content-header ul li a:focus {
    outline: none;
}

.friend-content-header ul li.ui-tabs-active span {
    color: #266fff;
}

.top-content-header ul li.ui-tabs-active a,
.option-content-header ul li.ui-tabs-active a,
.friend-content-header ul li.ui-tabs-active a,
.top-serv-content-header ul li.ui-tabs-active a {
    color: #266fff;
    border-bottom: 4px solid #266fff;
}

.top-content > div:not(.top-content-header),
.option-content > div:not(.option-content-header),
.friend-content > div:not(.friend-content-header) {
    display: flex;
    overflow-y: auto;
    flex-direction: column;
}

.top-content > div:not(.top-content-header) ul,
.option-content > div:not(.option-content-header) ul,
.friend-content > div:not(.friend-content-header) ul {
    flex-grow: 1;
}

#player,
#clan {
    padding: 10px 15px;
}

#player ul {
    padding: 0;
}

#player ul li {
    display: flex;
    margin-bottom: 14px;
    list-style: none;
    align-items: flex-start;
    justify-content: flex-start;
}

#player ul li .player-icon {
    display: flex;
    margin: auto 10px auto 0;
}

#player ul li .player-icon img {
    width: 24px;
    height: 24px;
    margin: auto 0;
    border-radius: 15px;
}

#player ul li .player-name {
    font-family: 'SourceSans';
    font-size: 14px;
    margin: auto 0;
    color: #333;
    flex-grow: 1;
}

#player ul li .rate {
    font-family: 'SourceSansBold';
    font-size: 12px;
    display: block;
    margin: auto 0;
    padding: 1px 7px;
    color: #333;
    border-radius: 10px;
    align-self: flex-end;
}

#player ul li:nth-child(1) .rate {
    background: #f4e015;
}

#player ul li:nth-child(2) .rate {
    background: #ccc;
}

#player ul li:nth-child(3) .rate {
    background: #dfcaad;
}


/*OPTION*/

.option-content-container {
    padding: 10px 15px;
}

.option-content-container ul {
    padding: 0;
}

.option-content-container ul li {
    display: flex;
    width: 100%;
    margin-bottom: 16px;
    list-style: none;
    justify-content: space-between;
}

.option-content-container ul li.flex > div {
    display: flex;
}

.option-content-container ul li.flex input.jscolor,
.option-content-container ul li.flex input.option-color {
    margin-right: 10px;
    padding: 0 0;
    border: 1px solid rgba(0, 0, 0, .10);
}

.option-content-container ul strong {
    font-size: 12px;
    display: block;
    margin: 30px 0 10px;
}

.option input.jscolor,
.option input.option-color {
    font-size: 14px;
    width: 70px;
    height: 24px;
    text-align: center;
    border-radius: 15px;
}

.option input[type='checkbox'] {
    display: none;
}

.option input[type='checkbox'] + label {
    position: relative;
    padding-right: 50px;
    cursor: pointer;
    margin-top: -5px;
}

.option input[type='checkbox'] + label::after {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0 5px 0 0;
    padding: 0;
    content: '';
    vertical-align: middle;
    border: 1px solid #dadada;
    border-radius: 12px;
    background: #ddd;
}

.option input[type='checkbox'] + label::before {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 2px;
    display: block;
    width: 16px;
    height: 16px;
    content: '';
    border: 1px solid #dadada;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 3px rgba(140, 140, 140, .1);
}

.option input[type='checkbox'] + label::after,
.option input[type='checkbox'] + label::before {
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.option input[type='checkbox']:checked + label::after {
    border-color: #6dd75e;
    background: #6edc5f;
}

.option input[type='checkbox']:checked + label::before {
    left: 24px;
}


/*END OPTION*/


/*FRIEND*/

.friend-list {
    margin: 0;
    padding: 10px 20px 10px 15px;
}

.friend-list li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.friend-list li * {
    margin: auto 0;
}

.friend-list li:hover,
.friend-list li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.friend-list li.active {
    background: rgba(38, 111, 255, .10);
}

.friend-list li .status {
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 10px;
}

.status.online {
    background: #17ee0f;
}

.status.offline {
    background: #ccc;
}

.friend-list li img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 15px;
}

.friend-list li .friend-name {
    font-size: 14px;
    flex-grow: 1;
}

.friend-list li .country {
    font-family: 'SourceSansSemiBold';
    font-size: 12px;
    margin-right: 20px;
    padding: 1px 7px 2px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 9px;
    background: #17ee0f;
}

.friend-list li .country:hover,
.friend-list li .country:focus {
    background: #39be34;
}

.friend-list li i:last-child {
    margin-right: 5px;
}

.friend-action {
    width: 100%;
}


/*END FRIEND*/


/*END TOP*/

.wrapper .add {
    display: flex;
    width: 300px;
    padding: 30px;
    border-top: 1px solid rgba(0, 0, 0, .10);
}

.wrapper .add * {
    margin: 0 auto;
}

.wrapper .hor-add {
    display: flex;
    width: 780px;
    height: 90px;
    padding: 30px 0;
}

.wrapper .hor-add * {
    margin: 0 auto;
}

.fill.gameover {
    display: flex;
    padding-top: 0;
}

.gameover .wrapper {
    width: 1080px;
    height: 590px;
    margin: auto;
    border-radius: 30px;
}

.main-result {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.stat-game {
    width: 780px;
}

.stat-game-header {
    display: flex;
    height: 58px;
    padding: 0 15px;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    justify-content: space-between;
}

.stat-game-header * {
    margin: auto 0;
}

.stat-game-header .button {
    margin-right: 15px;
}

.stat-game-header strong {
    font-size: 18px;
    flex-grow: 1;
}

.stat-game-header .stat-game-serv {
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
}

.stat-game-header .icon-serv {
    z-index: 1;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 15px;
    border: 3px solid #fff;
    border-radius: 15px;
    background: url(../img/1.png);
}
.stat-game-header .icon-serv:before {
    position: absolute;
    left: 50%;
    margin-left: -7.5px;
}
.stat-game-header .icon-serv-country {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: -15px;
    border: 3px solid #fff;
    border-radius: 15px;
}

.stat-game-container {
    width: 520px;

}

.top-serv {
    position: relative;
    display: block;
    border-right: 1px solid rgba(0, 0, 0, .10);
}

.stat-result {
    display: flex;
    flex-direction: row;
    width: 520px;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
    justify-content: space-between;
}

.stat-result > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-grow: 1;
}

.stat-result > div:nth-child(2) {
    border-right: 1px solid rgba(0, 0, 0, .10);
    border-left: 1px solid rgba(0, 0, 0, .10);
}

.stat-result div .data {
    font-family: 'SourceSansSemiBold';
    font-size: 18px;
    margin-bottom: 5px;
    color: #000;
}

.stat-result div .discr {
    font-size: 10px;
    color: #999;
}

.chart-result {
    display: flex;
    height: 150px;
    padding: 10px 20px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.chart-result .legend {
    flex-direction: column;
    width: 210px;
    height: 110px;
    margin: auto 0;
}

.chart-result .legend p {
    font-size: 14px;
    display: flex;
    margin: 0 0 5px;
    justify-content: space-between;
}

.chart-result .legend span {
    margin: auto 0;
}

.chart-result .legend .round {
    width: 10px;
    height: 10px;
    margin: 5px 10px;
}

.chart-result .legend .round.purple {
    background: #ff268d;
}

.chart-result .legend .round.green {
    background: #17ee0f;
}

.chart-result .legend .round.orange {
    background: #ff6c00;
}

.chart-result .legend .round.blue {
    background: #266fff;
}

.chart-result .legend .value {
    flex-grow: 1;
}

.chart-result .legend .mass {
    font-family: 'SourceSansSemiBold';
    font-size: 12px;
}

.share-result {
    display: flex;
    margin-bottom: 20px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
    background: #f4f8ff;
}

.share-result ul {
    margin: auto 0;
    padding: 0;
}

.share-result ul li {
    display: flex;
    float: left;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    list-style: none;
    border-radius: 15px;
    background: #266fff;
}

.share-result ul li a {
    margin: auto;
    color: #fff;
}

.share-result span {
    font-size: 14px;
    line-height: 1;
    margin: auto 0;
}

.game-action {
    margin-bottom: 10px;
    padding: 0 20px 0 20px;
    justify-content: space-between;
}

.game-action .button {
    margin: 0 15px 0 0;
}

.game-action .button i:first-child {
    margin-right: 10px;
}

.game-action .button span {
    margin: auto 5px;
}

.hit-result {
    display: flex;
	height:360px;
    flex-direction: column;
    width: 260px;
    border-right: 1px solid rgba(0, 0, 0, .10);
    justify-content: space-between;
}

.hit-result .hit-result-header {
    font-size: 14px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    justify-content: space-between;
}

.hit-result strong {
    margin: auto 0;
}

.hit-result .victim {
	height:150px;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
    flex-grow: 1;
}

.hit-result .victim .hit-result-header i {
    margin: auto 0;
    color: #17ee0f;
}

.hit-result .heroes {
	height:150px;
    padding: 15px;
    flex-grow: 1;
}

.hit-result .heroes .hit-result-header i {
    margin: auto 0;
    color: #ff268d;
}

.hit-result ul {
    margin: 0;
    padding: 0;
}

.hit-result ul li {
    display: flex;
    margin-bottom: 5px;
    list-style: none;
    justify-content: space-between;
}

.hit-result ul li img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border-radius: 10px;
}

.hit-result ul li span.name {
    font-size: 14px;
    margin-bottom: 5px;
    text-align: left;
    color: #000;
    flex-grow: 1;
}

.hit-result ul li span:last-child {
    font-family: 'SourceSansSemiBold';
    font-size: 12px;
    font-size: 12px;
}

.gameover .top-serv {
    width: 297px;
    border-top: none;
}

.gameover .top-serv .serv-header,
.top .serv-header {
    display: flex;
    height: 58px;
    margin-bottom: 15px;
    padding: 0 20px;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    justify-content: space-between;
}

.gameover .top-serv .serv-header strong,
.top .serv-header strong {
    font-size: 18px;
    margin: auto 0;
}

.gameover .top-serv .serv-header .top-time,
.top .serv-header .top-time {
    display: flex;
    width: 24px;
    height: 24px;
    margin: auto 0;
    border-radius: 15px;
    background: #e9f0ff;
}

.gameover .top-serv .serv-header .top-time i,
.top .serv-header .top-time i {
    margin: auto;
}

.gameover .top-serv .serv-header .top-time:hover,
.gameover .top-serv .serv-header .top-time:focus,
.top .serv-header .top-time:hover,
.top .serv-header .top-time:focus {
    cursor: pointer;
    background: #266fff;
}

.gameover .top-serv .serv-header .top-time:hover i,
.gameover .top-serv .serv-header .top-time:focus i,
.top .serv-header .top-time:hover i,
.top .serv-header .top-time:focus i {
    color: #fff;
}

.gameover .top-serv .top-serv-header,
.top .top-serv-header {
    display: flex;
    flex-direction: row;
    height: 20px;
    border-bottom: none;
    background: #fff;
    justify-content: space-between;
}

.top .top-serv-header {
    height: 40px;
}

.gameover .top-serv .top-serv-header strong,
.top .top-serv-header strong {
    font-size: 12px;
    text-transform: uppercase;
}

.gameover .top-serv .top-serv-header *,
.top .top-serv-header * {
    margin: auto 0;
}

.gameover .top-serv .top-serv-header a,
.top .top-serv-header a {
    font-family: 'SourceSansSemiBold';
    font-size: 12px;
    color: #266fff;
}

.gameover .top-serv .player,
.gameover .top-serv .clan,
.top .player,
.top .clan {
    overflow-y: auto;
    max-height: 190px;
    margin-top: 5px;
    margin-bottom: 24px;
    padding: 10px 15px 0;
}

#gameover-auth-skin .my-skin,
.local-skin {
    float: left;
    width: 200px;
}

#ingameskinlist {
    width: 660px;
}

#gameover-auth-skin {
    width: 400px;
}
#dead-top-time-content {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 200px;
    z-index: 1;
}

#dead-top-time-content ul {
    max-height: 190px;
    margin: 0;
    padding: 0;
}

#dead-top-time-content ul li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

#dead-top-time-content ul li:hover,
#dead-top-time-content ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

#dead-top-time-content ul li.active {
    background: rgba(38, 111, 255, .10);
}

#dead-top-time-content ul li.active .subs-flag {
    background: none;
}

#dead-top-time-content ul li * {
    margin: auto 0;
}

#dead-top-time-content ul li label {
    display: flex;
    width: 100%;
    padding: 9px 0;
    justify-content: space-between;
}

#dead-top-time-content ul li label > span {
    margin-left: 10px;
}

#dead-top-time-content ul li label:hover,
#dead-top-time-content ul li label:focus {
    cursor: pointer;
}

#dead-top-time-content label input[type='radio'] {
    display: none;
}

#dead-top-time-content label input[type='radio']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}
#toppers {
    overflow-y: auto;
    width: 270px;
    height: 185px;
    margin-left: 10px;
}

#toppers .top {
    position: inherit;
    height: 34px;
    vertical-align: top;
}

#toppers .number {
    font-size: 12px;
    font-weight: 600;
    width: 15px;
    margin: auto 15px auto 0;
}

#toppers .player-name {
    font-family: 'SourceSans';
    font-size: 14px;
    margin: auto 0;
    color: #333;
}

#toppers .rate {
    font-family: 'SourceSansBold';
    font-size: 12px;
    display: table-caption;
    float: right;
    margin: auto 0;
    padding: 1px 7px;
    padding: 3px 5px;
    color: #333;
    border-radius: 10px;
    align-self: flex-end;
}

#toppers tr:nth-child(1) .rate {
    background: #f4e015;
}

#toppers tr:nth-child(2) .rate {
    background: #ccc;
}

#toppers tr:nth-child(3) .rate {
    background: #dfcaad;
}

#topclans {
    overflow-y: auto;
    width: 270px;
    height: 185px;
    margin-left: 10px;
}

#topclans .top {
    position: inherit;
    height: 34px;
    vertical-align: top;
}

#topclans .number {
    font-size: 12px;
    font-weight: 600;
    width: 15px;
    margin: auto 15px auto 0;
}

#topclans .player-name {
    font-family: 'SourceSans';
    font-size: 14px;
    margin: auto 0;
    color: #333;
}

#topclans .rate {
    font-family: 'SourceSansBold';
    font-size: 12px;
    display: table-caption;
    float: right;
    margin: auto 0;
    padding: 1px 7px;
    padding: 3px 5px;
    color: #333;
    border-radius: 10px;
    align-self: flex-end;
}

#topclans tr:nth-child(1) .rate {
    background: #f4e015;
}

#topclans tr:nth-child(2) .rate {
    background: #ccc;
}

#topclans tr:nth-child(3) .rate {
    background: #dfcaad;
}

.gameover .top-serv ol {
    margin: 5px 0 10px;
    padding: 0;
    list-style-type: decimal;
}

.gameover .top-serv ol li {
    display: flex;
    margin-bottom: 14px;
    list-style: square;
    align-items: flex-start;
    justify-content: flex-start;
}

.gameover .top-serv ol li:last-child {
    margin-bottom: 0;
}

.gameover .top-serv ol li .number {
    line-height: 1;
}

.gameover .top-serv ol li .player-name {
    font-family: 'SourceSans';
    font-size: 14px;
    margin: auto 0;
    color: #333;
    flex-grow: 1;
}

.gameover .top-serv ol li .rate {
    font-family: 'SourceSansBold';
    font-size: 12px;
    display: block;
    margin: auto 0;
    padding: 1px 7px;
    color: #333;
    border-radius: 10px;
    align-self: flex-end;
}


/*END WRAPPER*/


/*


GAME


*/

#home {
    position: absolute;
    top: 10px;
    left: 10px;
}
.serv-stat-modal {
    position: absolute;
    top: 10px;
    left: 60px;
}
#serv-stat {
    display: flex;
}
#serv-stat:hover,
#serv-stat:focus {
    cursor: pointer;
}
.serv-mode {
    width: 24px;
    height: 24px;
    border-radius: 15px;
    background: #000;
    display: flex;
    z-index: 1;
    border: solid 2px #fff;
}
.serv-mode i {
    margin: auto;
    font-size: 14px;
    color: #fff;
}
.serv-count {
    width: 24px;
    height: 24px;
    border-radius: 15px;
    margin-left: -15px;
    border: solid 2px #fff;
}
.serv-name {
    flex-grow: 1;
    margin: auto 0 auto 10px;
}
.serv-stat-content {
    top: 50px;
    left: 0px;
    width: 600px;
    height: 300px;
    padding: 0;
}
.serv-stat-header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 0 20px;
    box-sizing: border-box;
}
.serv-stat-header * {
    margin: auto 0;
}
.serv-stat-header .top-time {
    height: 25px;
    background: #E8F0FF;
    border-radius: 15px;
    display: flex;
    padding: 0 10px 0 15px;
}
.serv-stat-header .top-time:hover,
.serv-stat-header .top-time:focus {
    cursor: pointer;
}
#top-time-content {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 200px;
    z-index: 1;
}

#top-time-content ul {
    max-height: 190px;
    margin: 0;
    padding: 0;
}

#top-time-content ul li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

#top-time-content ul li:hover,
#top-time-content ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

#top-time-content ul li.active {
    background: rgba(38, 111, 255, .10);
}

#top-time-content ul li.active .subs-flag {
    background: none;
}

#top-time-content ul li * {
    margin: auto 0;
}

#top-time-content ul li label {
    display: flex;
    width: 100%;
    padding: 9px 0;
    justify-content: space-between;
}

#top-time-content ul li label > span {
    margin-left: 10px;
}

#top-time-content ul li label:hover,
#top-time-content ul li label:focus {
    cursor: pointer;
}

#top-time-content label input[type='radio'] {
    display: none;
}

#top-time-content label input[type='radio']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}
.serv-stat-content .block {
    width: 299.5px;
    float: left;
    padding-bottom: 20px;
}
.serv-stat-content .block:first-child {
    border-right: 1px solid #eee;
}
.serv-stat-content .block .top-serv-header {
    height: 34px;
    display: flex;
    justify-content: space-between;
    border: none;
    margin-bottom: 10px;
}
.serv-stat-content .block .top-serv-header strong {
    font-size: 12px;
    text-transform: uppercase;
}
.serv-stat-content .block .top-serv-header a {
    color: #266FFF;
    text-transform: uppercase;
    font-size: 12px;
    margin: auto 0;
}
.serv-stat-content .block .player,
.serv-stat-content .block .clan {
    max-height: 185px;
    overflow: auto;
}
.serv-stat-content .block .player-name {
    text-align: left;
}
#chat {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 250px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 25px;
    background: rgba(255, 255, 255, .3);
}

.chat-header {
    display: flex;
    flex-direction: row;
    height: 50px;
    padding: 0 20px;
    justify-content: space-between;
}

.chat-header * {
    margin: auto 0;
}

.chat-header ul {
    padding: 0;
}

.chat-header ul li {
    float: left;
    margin-right: 5px;
    list-style: none;
}

.chat-header ul li span {
    display: block;
    width: 16px;
    height: 16px;
    opacity: .5;
}

.chat-header ul li input[type='checkbox'] {
    display: none;
}

.chat-header ul li input[type='checkbox']:checked + span {
    opacity: 1;
}

.chat-header .chat-open:hover,
.chat-header .chat-open:focus {
    cursor: pointer;
}

.chat-header .mdi-equal {
    color: rgba(0, 0, 0, .30);
}

.chat-container {
    font-size: 14px;
    height: 100%;
    padding: 10px 10px 60px 10px;
    ;
}

.chat-container .my-chat {
    overflow-x: hidden;
    overflow-y: auto;
    height: 220px;
}

.chat-container .chat-text > div {
    font-size: 14px;
    margin-bottom: 5px;
}

.chat-container .my-chat > div {
    margin-bottom: 5px;
}

.chat-container .my-chat .verified {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: url(../img/verifed.svg);
    background-size: cover;
}

.chat-container .my-chat .admin {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: url(../img/admin1.png);
    background-size: cover;
}

.chat-container .my-chat .moderator {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    background: url(../img/moder1.png);
    background-size: cover;
}

#chat .chatnick {
    font-family: 'SourceSansSemiBold';
}

#chat .chatnick:hover,
#chat .chatnick:focus {
    cursor: pointer;
    color: #fff;
    background: red;
}

#chat .coords {
    font-family: 'SourceSansSemiBold';
}

#chat .coords:hover,
#chat .coords:focus {
    cursor: pointer;
    color: #fff;
    background: #266fff;
}

.chat-container .my-message {
    position: absolute;
    bottom: 0;
    display: flex;
}

.chat-container .my-message input {
    display: inline-flex;
    width: 184px;
    height: 30px;
    border-left: none;
    flex-grow: 1;
}

.chat-container .coords.left {
    display: flex;
    float: left;
    width: 30px;
    height: 28px;
    margin: 10px 0;
    padding: 0 5px;
    color: #266fff;
    border: solid 1px rgba(0, 0, 0, .1);
    border-radius: 20px 0 0 20px;
    background: #fff;
}

.chat-container .coords.left:hover,
.chat-container .coords.left:focus {
    cursor: pointer;
    background: #f4f8ff;
}

.chat-container .coords.left * {
    margin: auto;
}

#map {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 170px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 25px;
    background: rgba(255, 255, 255, .3);
}

.map-header {
    display: flex;
    flex-direction: row;
    height: 50px;
    padding: 0 20px;
    justify-content: space-between;
}

.map-header * {
    margin: auto 0;
}

.map-header .map-open:hover,
.map-header .map-open:focus {
    cursor: pointer;
}

.map-header strong {
    font-size: 12px;
    color: #266fff;
}

.map-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 10px 10px;
}

.map-container > div {
    display: flex;
    float: left;
    width: 30px;
    height: 30px;
}

.map-container > div span {
    font-size: 12px;
    margin: auto;
    color: rgba(0, 0, 0, .3);
}

.map-container .round.blue {
    position: absolute;
    top: 34%;
    left: 68%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 5px;
    background: #266fff;
}

.action-button {
    position: absolute;
    bottom: 40%;
    right: 10px;
    display: flex;
    flex-direction: column;
    width: 40px;
    height: 250px;
    justify-content: space-between;
}

.action-button * {
    margin: 0 auto;
}

#how {
    /*z-index: 6;*/
}

#top-game {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 200px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 25px;
    background: rgba(255, 255, 255, .3);
}

.top-game-header {
    display: flex;
    flex-direction: row;
    height: 50px;
    padding: 0 20px;
    justify-content: space-between;
}

.top-game-header * {
    margin: auto 0;
}

.top-game-header .top-game-open:hover,
.top-game-header .top-game-open:focus {
    cursor: pointer;
}

.top-game-container {
    min-width: 150px;
    margin: 0 10px 10px;
}

.top-game-container ul {
    margin: 0;
    padding: 0;
}

.top-game-container ul li {
    display: flex;
    width: 100%;
    padding: 5px 10px;
    list-style: none;
    border-radius: 10px;
}
.top-game-container ul li.cent,
.top-game-container ul li.cent p {
    text-align: center !important;
}

.top-game-container ul li:last-child {
    margin-bottom: 5px;
}

.top-game-container ul li.me {
    background: rgba(255, 38, 141, .1);
}

.top-game-container ul li.me span,
.top-game-container ul li.me p {
    font-family: 'SourceSansSemiBold';
    color: #ff268d;
}

.top-game-container ul li span {
    font-size: 14px;
    margin: auto 10px auto 0;
}

.top-game-container ul li p {
    font-size: 14px;
    margin: auto 0;
}

.game-stat {
    position: absolute;
    top: 10px;
    left: 50%;
    display: flex;
    margin-left: -170px;
    flex-wrap: nowrap;
    justify-content: center;
}

.game-stat .auth {
    margin: auto 0;
}

.game-stat .auth-group {
    margin: 0 20px;
}

.game-stat .auth-content {
    top: 55px;
}

.game-stat .max-mass {
    margin: auto 0;
    padding: 0 15px;
}

.game-stat .max-mass strong {
    font-family: 'SourceSansSemiBold';
    font-size: 18px;
    margin-right: 5px;
    color: #ff268d;
}

.game-stat .max-mass span {
    font-family: 'SourceSansSemiBold';
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .8);
}

.game-stat .now-mass {
    margin: auto 0;
}

.game-stat .now-mass strong {
    font-family: 'SourceSansSemiBold';
    font-size: 18px;
    margin-right: 5px;
}

.game-stat .now-mass span {
    font-family: 'SourceSansSemiBold';
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .8);
    line-height: 1.3;
}

.game-stat .now-mass .part {
    position: absolute;
    top: 10px;
    right: -20px;
    display: block;
    padding: 3px 10px;
    color: #fff;
    border-radius: 10px;
    background: #266fff;
}

.button.white.opacity.select {
    margin-right: 0;
}

.button.white.opacity.select i {
    margin-left: 0;
}

.select .skin img,
.select .sticks img {
    border: 3px solid #fff;
}

.select .skin {
    z-index: 2;
}

.select .sticks {
    margin-left: -25px;
}

.select-content {
    top: 60px;
    width: 440px;
    padding: 20px 15px;
}

.select-content strong {
    text-transform: uppercase;
}

.select-content .my-skin {
    float: left;
    width: 200px;
    margin-right: 40px;
}

.select-content .my-sticks {
    float: left;
    width: 200px;
}

.select-content ul {
    overflow-y: auto;
    max-height: 150px;
    margin: 15px 0 0 0;
    padding: 0;
}

.select-content ul li {
    display: flex;
    height: 34px;
    margin-bottom: 4px;
    padding: 0 5px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
}

.select-content ul li:hover,
.select-content ul li:focus {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .10);
}

.select-content ul li.active {
    background: rgba(38, 111, 255, .10);
}

.select-content ul li.active .subs-flag {
    background: none;
}

.select-content ul li * {
    margin: auto 0;
}

.select-content ul li label {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.select-content ul li label:hover,
.select-content ul li label:focus {
    cursor: pointer;
}

.select-content ul li label > span {
    display: flex;
}

.select-content ul li label > span > span {
    margin-left: 10px;
}

.select-content img {
    display: block;
    width: 24x;
    height: 24px;
    margin: auto;
    border-radius: 15px;
}

.select-content label input[type='radio'] {
    display: none;
}

.select-content label input[type='radio']:checked + .checked {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/check.svg);
}

.serv-stat-info {
    font-size: 10px;
    position: absolute;
    bottom: 5px;
    width: 100%;
    margin-bottom: 0;
    text-align: center;
    color: rgba(0, 0, 0, .6);
}

.overflow {
    position: fixed;
    z-index: 5;
    display: none;
    width: 100vw;
    height: 100vh;
    margin-top: -40px;
    padding-top: 150px;
    background: rgba(0, 0, 0, .8);
}

.overflow .info-key {
    display: flex;
    flex-direction: column;
    width: 420px;
    height: 450px;
    margin: auto;
    justify-content: space-between;
}

.overflow h1 {
    color: #fff;
}

.overflow p {
    color: #fff;
}

.overflow .set {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.overflow .set * {
    margin: auto 0;
}

.overflow .set p {
    font-size: 16px;
    color: #fff;
}

.overflow .set-group {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 230px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.overflow .hot-space,
.overflow .hot-latter,
.overflow .hot-add {
    display: flex;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border: solid 3px #fff;
    border-radius: 4px;
}

.overflow .hot-space span,
.overflow .hot-latter span,
.overflow .hot-add span {
    font-family: 'SourceSansSemiBold';
    font-size: 14px;
    margin: auto;
    color: #fff;
}

.overflow .hot-space {
    width: 150px;
}

.overflow .hot-add {
    height: 24px;
}


/*


GAME OVER


*/

@media only screen and (max-width: 1000px) {
    html,
    body {
        overflow: auto;
    }
}

@media only screen and (max-width: 1140px) {
    .gameover .top-serv {
        display: none;
    }
    .gameover .wrapper {
        width: 780px;
    }
}

@media only screen and (max-width: 1280px) {
    .second {
        display: none;
    }
    .wrapper {
        width: 910px;
    }
    .wrapper .add {
        display: none;
    }
    .action-button {
        position: absolute;
        bottom: 40%;
        right: 10px;
        display: flex;
        flex-direction: row;
        width: 220px;
        height: 40px;
        justify-content: space-between;
    }
}

@media only screen and (max-width: 1366px) {
    .action-button {
        position: absolute;
        bottom: 40%;
        right: 10px;
        display: flex;
        flex-direction: row;
        width: 220px;
        height: 40px;
        margin-top: 0;
        justify-content: space-between;
    }
}

@media only screen and (min-width: 1440px) {
    .action-button {
        position: absolute;
        bottom: 40%;
        right: 10px;
        display: flex;
        flex-direction: row;
        width: 220px;
        height: 40px;
        justify-content: space-between;
    }
}

@media only screen and (min-width: 1600px) {
    .action-button {
        position: absolute;
        bottom: 40%;
        right: 10px;
        display: flex;
        flex-direction: column;
        width: 40px;
        height: 220px;
        justify-content: space-between;
    }
}

@media only screen and (min-width: 1920px) {
    header {
        margin: 0 10px 0 100px;
    }
    .button.white.auth > span.login,
    .button.white.lang > span {
        display: inline-block;
    }
    .wrapper {
        width: 1270px;
    }
}

@media only screen and (min-width: 2560px) {
    .button.round.call-top {
        display: none;
    }
    .wrapper {
        width: 1868px;
    }
    .top {
        position: inherit;
        display: block;
        border-right: 1px solid rgba(0, 0, 0, .1);
        border-left: none;
    }
}


/*NIGHT MODE*/

.night .gameoverlay h1,
.night .gameoverlay h2,
.night .gameoverlay h3,
.night .gameoverlay h4,
.night .gameoverlay h5,
.night .gameoverlay a,
.night .gameoverlay p,
.night .gameoverlay span,
.night .gameoverlay strong,
.night .gameoverlay i {
    color: #fff;
}

.night .popup h1,
.night .popup h2,
.night .popup h3,
.night .popup h4,
.night .popup h5,
.night .popup a,
.night .popup p,
.night .popup span,
.night .popup strong,
.night .popup i {
    color: #000;
}

.night .gameoverlay .button.white {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, .3);
}

.night .gameoverlay .button.no-hover.round.opacity {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, .3);
}

.night .gameoverlay .button.no-hover.opacity:hover,
.night .gameoverlay .button.no-hover.opacity:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, .3);
}

.night .gameoverlay .game-stat .max-mass span,
.night .gameoverlay .game-stat .now-mass span {
    color: rgb(255, 255, 255);
}

.night .gameoverlay #chat {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, .3);
}

.night .gameoverlay #chat .my-message .coords.left {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, 0);
}

.night .gameoverlay #chat .my-message input {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, 0);
}

.night .gameoverlay #chat .my-message input:placehoder {
    color: #fff;
}
.night .gameoverlay #chat .chat-resize:hover,
.night .gameoverlay #chat .chat-resize:focus {
    cursor: n-resize;
}
.night .gameoverlay #chat .chat-resize i {
    color: rgba(255, 255, 255, .5);
}

.night .gameoverlay #map {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(0, 0, 0, .3);
}

.night .gameoverlay #map span {
    color: #fff;
}

.night .gameoverlay #top-game {
    border-color: rgba(255, 255, 255, .15) !important;
    background: rgba(0, 0, 0, .3);
}


/*SCROLLL*/

.scrollBar {
    width: 3px;
    transition: opacity .3s linear;
    border-radius: 5px;
    background-color: #ccc;
}