*::-webkit-input-placeholder {
    color: #666;
    opacity: 1;
}
*:-moz-placeholder {
    color: #666;
    opacity: 1;
}
*::-moz-placeholder {
    color: #666;
    opacity: 1;
}
*:-ms-input-placeholder {
    color: #666;
    opacity: 1;
}
.contentMatchPage{
    line-height: initial;
    margin: 100px auto 10px;
    padding: 0 10px;
    max-width: 1200px;
    display: table;
    font-family: WarfaceRegularRussian;
    height: 100%;
}
body{
    background-color: #232323;
    height: 100%;
}


.tab{
    background-color: #2b2b2b;
    position: relative;
    top: -150px;
    left: -3px;
    font-size: 1.1em;
}
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    border: solid 2px #ffffff00;
    font-family: WarfaceRegularRussian;
    margin: 0 0 0 3px;
    transition: 0.3s;
    font-size: 1em;
    color: white;
}

.tab button:hover {
    background-color: #262626;
}
.tab button.active {
    border-style: solid;
    border-image: linear-gradient(to top,#f40,rgba(0, 0, 0, 0)) 1 1%
}
.tab button.active {
    background-color: #262626;
}
.block-info-ban{
    height: 265px;
    width: 900px;
    border: dashed #d33d3e 4px;
    top: -110px;
    margin: 40px auto auto auto;
    position: relative;
    background: rgb(0,255,55);
    background: -moz-radial-gradient(circle, rgba(0,255,55,0) 46%, rgba(211,61,62,0.14329481792717091) 100%);
    background: -webkit-radial-gradient(circle, rgba(0,255,55,0) 46%, rgba(211,61,62,0.14329481792717091) 100%);
    background: radial-gradient(circle, rgba(0,255,55,0) 46%, rgba(211,61,62,0.14329481792717091) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff37",endColorstr="#d33d3e",GradientType=1);
}
.leave{
    color: white;
    font-size: 1em;
    margin: 10px 0 10px 0;
    text-transform: uppercase;
}
.block-info-test{
    height: 150px;
    width: 900px;
    border: inset #60707e 4px;
    top: -110px;
    margin: 40px auto auto auto;
    position: relative;
    background: rgb(0,255,55);
    background: -moz-radial-gradient(circle, rgba(0,255,55,0) 46%, rgba(0,136,254,0.11528361344537819) 100%);
    background: -webkit-radial-gradient(circle, rgba(0,255,55,0) 46%, rgba(0,136,254,0.11528361344537819) 100%);
    background: radial-gradient(circle, rgba(0,255,55,0) 46%, rgba(0,136,254,0.11528361344537819) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff37",endColorstr="#0088fe",GradientType=1);
}
.block-info-test-title{
    color: #c6d6e4;
    font-size: 1.5em;
    margin: 10px 0 0 0;
    text-align: center;
}
.block-info-test-text{
    color: #acb9c4;
    font-size: 1.15em;
    display: inline-block;
    padding: 20px 30px 30px 30px;
}
.block-info-ban-title{
    color: #d33d3e;
    font-size: 1.5em;
    margin: 10px 0 0 0;
    text-align: center;
}
.block-info-ban-text{
    color: #d33d3e;
    font-size: 1.15em;
    display: inline-block;
    padding: 20px 30px 30px 30px;
}
.error{
    height: 32px;
    width: 32px;
    margin: 0 10px 0 10px;
}

.hmatch-info{
    height: 250px;
    width:  1016px;
    display: inline-block;
}
.hmatch-info-map-title{
    height: 150px;
    width: 1016px;
    position: relative;
    display: block;
    text-align: center;
    z-index: 3;
}
.hmatch-info-map{
    height: 150px;
    width: 100%;
    image-rendering: pixelated;
    background-position: center;
    background-size: cover;
    display: block;
    text-align: center;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);;
    z-index: 1;
    position: relative;
    top: -150px;
}
.hmatch-info-map-name{
    color: white;
    font-size: 3em;
    display: block;
    padding: 18px 0 0 0;
}
.hmatch-info-map-mode{
    color: white;
    font-size: 0.7em;
    position: relative;
    top: -20px;
}
.hmatch-info-map-date{
    font-size: 1em;
    display: block;
    position: relative;
    float: left;
    top: -40px;
    left: 10px;
    color: black;
}
.hmatch-info-map-bonus{
    color: gold;
    float: right;
    font-size: 1em;
    display: block;
    position: relative;
    right: 10px;
    top: -40px;
}
.hmatch-info-map-info{
    height: 80px;
    width: 100%;
    background-color: #2c2c2c;
    position: relative;
    top: -150px;
}
.hmatch-i-m-i-number{
    color: white;
    font-size: 1.5em;
    margin: 1em;
    display: inline-block;
}
.hmatch-info-map-info-full{
    /* width: 460px;*/
    float: right;
    height: 100%;
}
.hm-i-m-f_def{
    margin: 20px 10px 0 0;
    float: left;
}
.hm-i-m-f_def_up {
    font-size: 1.2em;
    color: white;
    margin: 20px 0 0 0;
}
.hm-i-m-f_def_down {
    font-size: 0.9em;
    color: #ababab;
    text-transform: uppercase;
    padding: 14px 0 0 0;
    position: relative;
    top: -5px;
}
.hmatch-statistics{
    width: 1016px;
    margin: 50px 0 0 0;
    position: relative;
    top: -100px;
}
.hmatch-statistics-title_team_win{
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5em;
}

.hmatch-statistics-team_first-info{
    height: 30px;
    width: 100%;
    display: inline-block;
    margin: 50px 0 0 0 ;
}
.hmatch-statistics-team_second-info{
    height: 30px;
    width: 100%;
    display: inline-block;
    margin: 50px 0 0 0 ;
}
.hmatch-statistics-team_first-title{
    width: 403px;
    float: left;
    height: 100%;
}

.hm-s-t_f-t-p_def{
    width: 30px;
    height: 100%;
    float: left;
    text-align: center;
    margin: 0 0 0 5px;
}
.chm-s-t_f-t-p_def {
    color: white;
    font-size: 0.9em;
    margin: 10px 0 0 0;
    display: inline-block;
    width: 30px;
}
.chm-s-t_f-t-p_def1 {
    color: white;
    font-size: 0.65em;
    margin: 12px 0 0 0;
    display: inline-block;
}
.hm-s-t_f-t-p_skill{
    width: 65px;
    height: 100%;
    float: left;
    text-align: center;
    margin: 0 0 0 5px;
}
.chm-s-t_f-t-p_skill {
    color: white;
    font-size: 0.9em;
    margin: 10px 0 0 0;
    display: inline-block;
    width: 65px;
}
.hm-s-t_f-t-p_exp{
    width: 45px;
    height: 100%;
    float: left;
    text-align: center;
    margin: 0 0 0 5px;
}
.chm-s-t_f-t-p_exp {
    font-size: 0.9em;
    margin: 10px 0 0 0;
    display: inline-block;
    width: 45px;
}
.touch{

    width: 100%;
    position: relative;
    margin: -28px 0 0 0;
    display: block;

}
.touch:hover{
    background-color: #fafffa30;
}
.hmatch-statistics-team_first-title-tn{
    font-size: 1.5em;
}

.hmatch-statistics-team_first-title-ts{
    font-size: 0.8em;
    text-transform: uppercase;
    color: white;
    margin: 0 0 0 5px;
    display: inline-block;
}

.hmatch-statistics-team_first,.hmatch-statistics-team_second{
    display: inline-block;
    background-color: #2a2a2a;
    width: 100%;
    /* min-height: 270px; */
    padding:   10px 10px 10px 10px;
}

.hm-team_first-player{
    width: 100%;
    height: 50px;
    margin: 0 0 1px 0;
}
.hm-tf-group{
    display: inline-block;
    height: 100%;
    width: 5px;
    float: left;
}
.hm-tf-rank{
    width: 32px;
    height: 32px;
    background-size: cover;
    display: inline-block;
    margin: 9px 0 0 10px;
    float: left;
}
.hm-tf-name{
    display: inline-block;
    width: 140px;
    margin: 0 0 0 10px;
    height: 100%;
    float: left;
    overflow: hidden;
}
.chm-tf-name{
    font-size: 0.9em;
    color: white;
    display: inline-block;
    text-align: left;
    margin: 1.1em 0 1.1em 0;
}
.hm-tf-clanname{
    display: inline-block;
    width: 145px;
    height: 100%;
    float: left;
    overflow: hidden;
    margin: 0 0 0 5px;
}
.chm-tf-clanname{
    font-size: 0.9em;
    color: white;
    display: inline-block;
    text-align: left;
    margin: 1.1em 0 1.1em 0;
}
.hm-tf-class{
    width: 32px;
    height: 32px;
    background-size: cover;
    display: inline-block;
    float: left;
    margin: 9px 0 0 10px;
}
.hm-tf-p_def1{
    float: left;
    display: inline-block;
    margin: 0 0 0 10px;
    height: 100%;
    width: 30px;
    text-align: center;
}
.chm-tf-p_def{
    font-size: 0.9em;
    color: white;
    display: inline-block;
    margin: 1.1em 0 1.1em 0;
}
.mh-referer-player{
    background-color: #b1ff643d !important;
}
.hm-tf-p_def{
    float: left;
    display: inline-block;
    margin: 0 0 0 5px;
    height: 100%;
    width: 30px;
    text-align: center;
}
.hm-tf-p_skill{
    float: left;
    display: inline-block;
    margin: 0 0 0 5px;
    height: 100%;
    width: 65px;
    text-align: center;

}
.hm-tf-p_exp{
    float: left;
    display: inline-block;
    margin: 0 0 0 5px;
    height: 100%;
    width: 45px;
    text-align: center;
}

.blackwood{
    color: #de0505;
}
.warface{
    color: #1fa7f2;
}
.group-color{
    background-color: #3fe005;
}
.wb{
    color: #3bbc34;
}
.exp{
    color: #efc851;
}
.expp{
    color: #5db3e4;
}
.expk{
    color: #c44949;
}
.bgblackwood1{
    background-color: #de05053d;
}
.bgblackwood2{
    background-color: #de050512;
}
.bgwarface1{
    background-color: #283a45;
}
.bgwarface2{
    background-color: #283a455c;
}
.bgleaver1{
    background-color: #212121;
}
.bgleaver2{
    background-color: rgba(75, 77, 79, 0.36);
}




{
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}








[tooltip] {
    position: relative;
}


[tooltip]::before,
[tooltip]::after {
    text-transform: none;
    font-size: .9em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}
[tooltip]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1001;
}
[tooltip]::after {
    content: attr(tooltip);

    font-family: WarfaceRegularRussian, sans-serif;
    text-align: center;

    min-width: 3em;
    max-width: 21em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    background: #212121;
    color: #fff;
    z-index: 1000;
    border: solid #4c4c4c 2px;
}


[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}


[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}


/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(50% + 5px);
    transform: translate(.5em, -50%);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}