:root{
    --color-btn: #004288;
    --color-secondary: #004288;
    --color-lg-gray: #f4f4f4;
    --color-gray: #e0e0e0;
    --color-dark: #212121;
}

select, input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-wrapper{
    position: relative;
}
.select-wrapper::after{
    cursor: pointer;
    position: absolute;
    content: '';
    background-image: url(/images/arrow-down.svg);
    width: 15px;
    height: 15px;
    right: 15px;
    bottom: 10px;
}

select{
    position: relative;
    background-color: #fff;
}

select::after{
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    background-color: red;
    z-index: 999;
}

.bold{
    font-weight: 600 !important;
}

.m-t-15{
    margin-top: 15px !important;
}

.red{
    color: var(--color-secondary);
}
/* ======== desktop ==========*/
/* ========================== */
#wrapper{
    overflow-x: hidden;
}
#main {
	background-image: url("../images/2022/bg.webp");
	background-image: -webkit-image-set(
		url("../images/2022/bg.webp") 1x,
		url("../images/2022/bg@2x.webp") 2x,
		url("../images/2022/bg@3x.webp") 3x
	);
	background-image: image-set(
		url("../images/2022/bg.webp") 1x,
		url("../images/2022/bg@2x.webp") 2x,
		url("../images/2022/bg@3x.webp") 3x
	);
    padding: 0;
}

.button{
    font-size: 16px;
}

#gameList .button, #welcome .button{
    text-transform: none !important;
}

#labels ul.menu li a{
    text-transform: uppercase;
}

#welcome{
    background-color: #ffffff !important;
    max-width: 400px;
    box-sizing: border-box;
    padding: 15px 10px !important;
    display: flex;
    flex-flow: column;
    align-items: center;
}

#welcome_text{
    font-size: 22px;
    text-align: center;
}

#welcome_text a{
    text-decoration: none !important;
}

#welcome_text a:hover{
    text-decoration: underline !important;
}

#welcome .name{
    margin-bottom: 0;
}

#welcome h3{
    color: #004288;
    font-size: 30px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#welcome .text1{
    margin: 0;
}

@media (min-width: 1440px) {

    #main{
        width: 1440px;
    }
}

@media (min-width: 1024px) {
    #main {
		background-image: url("../images/2022/bg.webp");
		background-image: -webkit-image-set(
			url("../images/2022/bg.webp") 1x,
			url("../images/2022/bg@2x.webp") 2x,
			url("../images/2022/bg@3x.webp") 3x
		);
		background-image: image-set(
			url("../images/2022/bg.webp") 1x,
			url("../images/2022/bg@2x.webp") 2x,
			url("../images/2022/bg@3x.webp") 3x
		);
	}
}

#loginForm{
    border-radius: 0;
    background-image: linear-gradient(138deg, #fff 10%, #eaeaea 93%);
}

#loginForm h2 {
	font-family: "Dosis" !important;
	font-weight: 600 !important;
	color: #212121 !important;
	font-size: 26px !important;
	line-height: 1.19 !important;
	letter-spacing: normal;
}

header h1 a.logo span.typ{
    font-family: Dosis;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.26;
    letter-spacing: normal;
    color: #fff;
}  

#regForm ul li select {
    width: 100%;
}

#logo{
    margin-top: 0;
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc( 50vw - 450px);
}

#logo img {
    max-height: unset;
}

#wrapper{
    background-color: #f4f4f4;
    background-image: none;
}

.awards2022 > h3 > span{
    color: #004288;
    font-weight: 600;
}

#awards2021{
    display: flex;
    justify-content: center;
}

#awards2021 img{
    max-width: 642px;
    margin-right: 20px;
    margin-top: 20px;
    width: 645px;
    height: 257px;
}

#awards2021 h3{
    margin-top: 0;
    top: 0;
    margin-left: 20px;
    max-width: 260px;
    font-family: Dosis;
    font-size: 42px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: left;
    color: #212121;
}

header section{
    margin-top: 150px;
}

header h1 a.logo span{
    text-shadow: none;
}

.banner > span{
    display: flex;
    margin-left: 20px;
    margin-top: 32px;
}

.banner h3{
    font-size: 30px;
    padding: 0;
    margin: 0 0 0 12px;
    font-weight: 600;
    color: #004288;
    text-transform: uppercase;
}

.banner-number{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.baner{
    display: flex;
    justify-content: center;
}

.banner-text{
    font-size: 22px;
    margin-left: 20px;
    margin-right: 50px;
}

.banner:nth-child(3) .banner-text{
    margin-right: 80px;
}

.banner-bold{
    font-weight: 600;
}

.banner-color a:hover{
    text-decoration: underline;
}

.banner-text{
    margin-top: 32px;
}

.top-bar__wrapper{
    min-height: 60px;
    max-width: 1440px;
    margin: auto;
}

.top-bar{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 270px;
}

.top-bar__lang-btn{
    cursor: pointer;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    background-image: url('../images/2022/lang.svg');
}

.top-bar span{
    width: 1px;
    height: 20px;
    margin: 0 16.5px;
    background-color: #000;
}

.log-bar{
    padding-top: 20px;
}

.top-bar__log-out img{
    display: none;
}

.top-bar__log-out a{
    font-family: Dosis;
    cursor: pointer;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.81;
    letter-spacing: -0.56px;
    color: #000;
    text-decoration: none;
}

.top-bar__log-out a:hover p{
    text-decoration: underline;
}

#table-1 .data{
    display: none;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    background-color: #ffffff;
    padding: 3px 0 10px 15px !important;
}

#table-1 .final-prediction .data{
    width: 15% !important;
}
#table-1 .table-gotype .date{
    width: 17% !important;
}
#table-1 .final-prediction .game,
#table-1 .table-gotype .game{
    width: 36% !important;
}
#table-1 .final-prediction .input,
#table-1 .table-gotype .input{
    width: 17% !important;
}
#table-1 .final-prediction .penalty,
#table-1 .table-gotype .penalty{
    width: 32% !important;
}

.new-footer .footer-content{
    display: flex;
    font-family: Dosis;
    font-size: 16px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
}

.new-footer .footer-content .question-wrapper{
    background-color: #c1c1c1;
    width: 50%;
    padding: 30px 0;
}

.new-footer .footer-content .question{
    margin-right: 87px;
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    align-items: center;
}

.new-footer .footer-content .question img{
    width: 33px;
    margin-right: 10px;
}

.new-footer .footer-content .phone-wrapper{
    background-color: #e6e6e6;
    width: 50%;
    padding: 30px 0;
}

.new-footer .footer-content .phone{
    margin-left: 120px;
    display: flex;
    gap: 3px;
    align-items: center;
}

.new-footer .footer-content .phone a,
.new-footer .footer-content .question a{
    text-decoration: none;
    color: #000;
}

.new-footer .footer-content .phone a:hover,
.new-footer .footer-content .question a:hover{
    text-decoration: underline;
}

.new-footer .footer-content .phone img{
    width: 27px;
    margin-right: 10px;
}

.top-bar__lang{
    position: relative;
}

.top-bar__lang a{
    position: absolute;
    font-family: "Dosis";
    color: #000;
    font-weight: 400;
    text-decoration: none;
    left: -10px;
    padding: 10px;
    background-color: #f4f4f4;
    top: 0px;
    opacity: 0;
    transition: top 0.4s ease-in-out, opacity 0.2s ease-in-out .1s; 
    z-index: -1;
    display: block;
    width: 20px;
    text-align: center;
}

.top-bar__lang a.active{
    color: var(--color-secondary);
}

.top-bar__lang a.show:first-child{
    opacity: 1;
    top: 30px;
    z-index: 1;
}

.top-bar__lang a.show:nth-child(2){
    opacity: 1;
    top: 60px;
    z-index: 1;
}
.top-bar__lang a.show:nth-child(3){
    opacity: 1;
    top: 90px;
    z-index: 1;
}

#loginForm ul li input.error {
	border: 1px solid #004288 !important;
}

.login-error{
    font-family: Dosis;
    font-size: 12px;
    color: #004288;
    margin: 0 0 16px 8px;
}
.passwd-error{
    font-family: Dosis;
    font-size: 12px;
    color: #004288;
    margin: 4px 0 0 8px;
}

#gameList{
    border-radius: 0;
    padding: 0;
    background-image: none;
}

.column-50{
    padding: 0;
}

.card{
    margin: 0;
}
#regForm{
    padding: 10px;
}

#main{
    min-height: unset;
}

#gameList.registerList{
    background-image: linear-gradient(163deg, #fff 2%, #eaeaea 98%);
    padding: 20px;
}
#gameList.registerList h2{
    font-size: 26px;
}

.futureMatches{
    display: flex;
    background-color: #fff;
    gap: 1px;
}

.futureMatches__single{
    border: 1px solid #d3d3d3;
    width: calc(100% / 3);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.futureMatches__flags{
    display: grid;
    padding-top: 30px;
    grid-template-columns: 1fr 1fr;
    font-size: 16px;
    text-transform: uppercase;
}

.futureMatches__flags::after{
    content: '-';
    position: absolute;
    left: 49%;
    bottom: 43%;

}

.futureMatches.long-name .futureMatches__flags::after{
    bottom: 50%;
}

.futureMatches__flags div{
    width: fit-content;
    text-align: center;
    max-width: 80px;
}

.futureMatches__flags img{
    margin: auto;
}

.futureMatches__flags div:first-child{
    margin-left: auto;
    margin-right: 10px;
}
.futureMatches__flags div:nth-child(2){
    margin-right: auto;
    margin-left: 10px;
}

.futureMatches__date{
    font-size: 25px;
    color: #212121;
    text-align: center;
}

.futureMatches__day{
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    padding-bottom: 10px;
}

.table-flag{
    display: grid;
    grid-template-columns: 1fr 15px 1fr;
    width: 100% !important;
}

.table-flag span img{
    float: left;
}
.table-flag span{
    display: flex;
    align-items: center;
}

.mainTab > tbody > tr > td{
    line-height: 1;
}

#gameList table td, #gameList table th{
    padding: 15px 10px;
}

.tb-flags{
    width: 35% !important;
}

.footer-copyright{
    display: flex;
    color: #fff;
    padding: 28px 10px 32px;
    margin: auto;
    justify-content: space-between;
    max-width: 940px;
    font-weight: 600;
}
.footer-copyright a{
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.footer-copyright a:hover, .footer-content a {
    text-decoration: underline !important;
}

.footer-copyright .nav ul{
    display: flex;
}

.troe-finished img{
    max-width: 125.5px;
}

#gameList p.username{
    font-size: 30px;
    font-weight: 600;
}

#gameList .card-content .user-poinst{
    font-size: 40px;
    color: #0b0101;
    margin-top: 15px;
    margin-bottom: 20px;
    font-weight: normal;
}
#gameList .card-content .user-last-points{
    font-weight: normal;
    font-size: 18px;
    color: #000;
    margin-bottom: 28px;
}

#gameList  .btn-transparent{
    background-color: transparent !important;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

#gameList  .btn-transparent:hover{
    box-shadow: none;
    background-color: var(--color-secondary) !important;
    color: #fff;
}

#gameList h2{
    font-size: 24px;
    text-transform: uppercase;
}

#gameList .column-50 .card{
    justify-content: space-between;
}
#gameList .column-50 .card.troe{
    justify-content: center;
}

#awards2021.awards-mobile{
    display: none;
}

.mainTab > thead > tr > th {
    border: none;
    background-color: #e2e2e2;
    font-weight: 600;
    letter-spacing: normal;
}
.mainTab tbody tr td{
    border: none;
    background-color: #f4f4f4;
}
.mainTab tbody tr:nth-child(2n){
    background-color:  #fff;
}
.mainTab tbody tr:nth-child(2n) td{
	border: none;
    background-color:  #fff;
}

.mainTab tbody tr:last-child{
    border-bottom: 1px solid #bcbcbc;
}

/* .mainTab tr td:nth-child(1){
    width: 22%;
} */

.mainTab tr td:nth-child(2){
    width: 32%;
}

.dashboard-table .mainTab tr td:nth-child(3),
.dashboard-table .mainTab tr th:nth-child(3){
    padding-left: 80px !important;
}

.dashboard-table .mainTab tr td:nth-child(4),
.dashboard-table .mainTab tr th:nth-child(4){
    padding-right: 80px !important;
}

.mainTab tr td:nth-child(3),
.mainTab tr td:nth-child(4){
    width: 11%;
}

.mainTab tr td:nth-child(5){
    width: 21px;
}

.final-prediction p.type-info{
    margin-bottom: 16px;
}

.final-prediction .gotype td{
    background-color: #fff;
}

#gameList #labels + h2 {
padding-left: 10px;
margin-top: 0;
}

#gameList #labels + h2 a{
    font-size: 18px;
    margin-right: 30px;
    color: #212121;
    display: inline-block;
}
#gameList #labels + h2 a.active,
#gameList #labels + h2 a:hover{
    color: var(--color-secondary);
}

.mainTab.table-gotype tbody tr td{
    border: none;
    background-color: #fff;
}
.mainTab.table-gotype tbody tr:nth-child(1) td,
.mainTab.table-gotype tbody tr:nth-child(2) td,
.mainTab.table-gotype tbody tr:nth-child(5) td,
.mainTab.table-gotype tbody tr:nth-child(6) td,
.mainTab.table-gotype tbody tr:nth-child(9) td,
.mainTab.table-gotype tbody tr:nth-child(10) td,
.mainTab.table-gotype tbody tr:nth-child(13) td,
.mainTab.table-gotype tbody tr:nth-child(14) td,
.mainTab.table-gotype tbody tr:nth-child(17) td,
.mainTab.table-gotype tbody tr:nth-child(18) td,
.mainTab.table-gotype tbody tr:nth-child(21) td,
.mainTab.table-gotype tbody tr:nth-child(22) td,
.mainTab.table-gotype tbody tr:nth-child(25) td,
.mainTab.table-gotype tbody tr:nth-child(26) td,
.mainTab.table-gotype tbody tr:nth-child(29) td,
.mainTab.table-gotype tbody tr:nth-child(30) td,
.mainTab.table-gotype tbody tr:nth-child(33) td,
.mainTab.table-gotype tbody tr:nth-child(34) td,
.mainTab.table-gotype tbody tr:nth-child(37) td,
.mainTab.table-gotype tbody tr:nth-child(38) td,
.mainTab.table-gotype tbody tr:nth-child(41) td,
.mainTab.table-gotype tbody tr:nth-child(42) td,
.mainTab.table-gotype tbody tr:nth-child(45) td,
.mainTab.table-gotype tbody tr:nth-child(46) td{
    border: none;
    background-color:  #f4f4f4;
}

.mainTab tr td input,
.final-prediction select, input{
    width: 44px;
    padding: 7px 3px;
    border-radius: 4px;
    border: solid 1px #aaa;
    background-color: #fff;
}
.mainTab tr td input,
.final-prediction input{
    padding: 5px 3px;
    max-width: 36px;
}

.final-prediction .date{
    width: 17% !important;
}

.table-gotype .date-mobile{
    display: none;

}

.gameVote{
    width: 200px;
}

.gameVote__item{
    display: inline-block;
    text-align: center;
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: -0.25px;
}

.mainTab > tbody > tr > td.dashboard-table__date,
.mainTab > tbody > tr > td.table-date{
    font-weight: normal !important;
}

form[name="gtp"]{
    margin-bottom: 15px;
}

#gameList .btn-gotype.button{
    margin-top: 15px;
}

.table-2-gotype-mobile{
    display: none;
}

#table-2 .table-2-gotype-desktop tr:nth-child(n) td,
#table-2 .table-2-gotype-desktop tr:nth-child(n) th{
    padding: 10px !important;
}
#table-2 .table-2-gotype-desktop tr td:nth-child(n + 3),
#table-2 .table-2-gotype-desktop tr th:nth-child(n + 3){
    text-align: center;
}

.table-flag__separator{
    padding-bottom: 10px;
    justify-content: flex-end;
}

#table-2 .table-2-gotype-desktop,
.table-2-gotype-mobile-1,
.table-2-gotype-mobile-2{
    border-bottom: 1px solid #c3c3c3;
}

#table-2 .table-2-gotype-desktop tr td:nth-child(1),
#table-2 .table-2-gotype-desktop tr th:nth-child(1){
    width: 15%;
}

#table-2 .table-2-gotype-desktop tr td:nth-child(2),
#table-2 .table-2-gotype-desktop tr th:nth-child(2){
    width: 25%;
}

#table-2 .table-2-gotype-desktop tr td:nth-child(3),
#table-2 .table-2-gotype-desktop tr th:nth-child(3){
    width: 10%;
}

#table-2 .table-2-gotype-desktop tr td:nth-child(4),
#table-2 .table-2-gotype-desktop tr th:nth-child(4){
    width: 10%;
}

#table-2 .table-2-gotype-desktop tr td:nth-child(5),
#table-2 .table-2-gotype-desktop tr th:nth-child(5){
    width: 10%;
}
#table-2 .table-2-gotype-desktop tr td:nth-child(6),
#table-2 .table-2-gotype-desktop tr th:nth-child(6){
    width: 20%;
}

.desktop-tr .date{
    width: 10% !important;
}

.table-flag.game{
    width: auto !important;
    font-weight: normal !important;
}

.desktop-tr .type{
    width: 10% !important;
}

.table-2-gotype-desktop tr:nth-child(4n - 1) td{
    background-color: #fff;
}

.result-table .place{
    width: 10%;
}
.resultList .mainTab.result-table td.place{
    font-weight: normal !important;
}

.result-table .gamer{
    width: 15%;
}

.result-table td.gamer{
    font-weight: normal !important;
}

.result-table .points{
    width: 12%;
}

.result-table .trend{
    width: 12%;
}

.result-table .trend img{
    max-width: 30px;
    max-height: 30px;
}

.mainTab > tbody > tr > td.table-flag .winner{
    font-weight: 600 !important;
    color: #212121;
}

table.mainTab .table-flag{
    font-weight: normal !important;
}

.expand-table{
    min-height: 204px;
    overflow: hidden;
    border-bottom: solid 1px #c3c3c3;
}

.expand-table tbody tr:nth-child(n + 4){
    display: none;
}

.expand-table.active tbody tr:nth-child(n + 4){
    display: table-row;
}


.expand{
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-left: auto;
}

.expand:hover{
    text-decoration: underline;
}

.company .column-50.left{
    padding-right: 20px;
}
.company .column-50.right{
    padding-left: 20px;
}

#gameList{
    position: relative;
}

.lev-2-menu #table-1-switch.active, #table-2-switch.active{
    color: #004288;
}

.gameVote__item img,
.table-2-gotype-desktop img,
.mobile-vote img{
    margin-right: 6px;
    margin-left: 6px;
}

.table-2-gotype-desktop .votes-number,
.mobile-vote span{
    font-size: 10px;
    margin-top: 3px;
}

.table-gotype_mobile-date{
    display: none;
}

select{
    cursor: pointer;
}
select:focus{
    outline: none !important;
}

#gameList select[name="final[home]"],
#gameList select[name="final[away]"],
#gameList select.select{
    width: 130px;
    background: transparent;
    border: none;
    background-image: url('images/arrow-down.svg');
    background-repeat: no-repeat;
    background-position:  95% 60%;
    -webkit-appearance: none !important;
    white-space: break-spaces;
    background-size: 13px;
    font-family: 'Dosis';
    font-size: 16px;
}
.final-prediction-separator{
    position: relative;
    align-self: center;
}
.final-prediction-separator::after{
    position: absolute;
    content: "";
    width: 3px;
    height: 1px;
    background-color: #000000;
}

.table-gotype-separator{
    position: relative;
    align-self: center;
}
.table-gotype-separator::after{
    position: absolute;
    content: "";
    width: 3px;
    height: 1px;
    background-color: #000000;
}

.final-wrapper-select{
    display: flex;
    padding-right: 30px;
    justify-content: space-between;
}

.final-prediction .game,
.table-gotype .game{
    width: 6% !important;
}
.table-gotype .table-flag{
    max-width: 260px;
} 

.penalty {
    padding-right: 100px !important;
}
.penalty select{
    width: 130px !important;
}

.table-gotype th.penalty{
    min-width: 142px;
}

.table-gotype th.penalty.has{
    min-width: unset
}


.table-gotype tbody tr:nth-child(4n + 3){
    background-color: #fff;
}

canvas#type-chart{
    max-width: 300px;
    margin: auto;
}

canvas#time-chart{
    max-width: 450px;
    max-height: 370px;
    margin: auto;
}

.campany-table-1 .pos{
    width: 15%;
}
.campany-table-1 td.pos{
    font-weight: normal;
}

.campany-table-1 .memb{
    width: 60%;
}

.campany-table-1 td.memb{
    font-weight: normal;
}

.campany-table-1 .point{
    width: 25%;
}

.mainTab.campany-table-2 td{
    font-weight: normal;
}

.campany-table-2 .lp{
    width: 10%;
}

.campany-table-2 .nick{
    width: 40%;
}

#gameList.company h2{
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
}

#gameList.company h2.line{
    border-bottom: solid 1px #c3c3c3;
}

.mainTab.campany-table-2 tbody tr:last-child{
    border-bottom: none;
}

/* user */

.users-table thead tr th a:hover,
.users-table .details a:hover,
.mainTab a:hover{
    text-decoration: underline;
}

.resultList .users-table tbody tr:nth-child(4n - 1 ) td{
    background-color: #fff;

}

#gameList h2.user-info,
#gameList h2{
    font-size: 18px;
}

.user-info-table-1,
.user-info-table-2{
    border-bottom: solid 1px #c3c3c3;
}

.mainTab.user-info-table-1 tbody tr td{
background-color: #f4f4f4;
}

.mainTab.user-info-table-2 tr:nth-child(4n - 1) td{
    background-color: #fff;
}

.mainTab.user-info-table-2 tr:nth-child(4n + 2) td{
    background-color: #f4f4f4;;
}

.mainTab.user-info-table-2 .date{
    padding-left: 10px !important;
    padding-top: 0px !important;
    font-weight: normal;
    text-transform: none;
}

.mainTab.user-info-table-2 .date span{
    font-weight: 600;
}

.user-info-table-2__flag{
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
}
.user-info-table-2__flag span{
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
}
.user-info-table-2 .separator{
    margin-left: 15px;
}

.user-info-table-2__date{
    width: 20% !important;
}
.user-info-table-2__game{
    width: initial !important;
}
.user-info-table-2__game span{
    max-width: 100px;
}
.user-info-table-2__type{
    width: 15% !important;
}
.user-info-table-2__result{
    width: 30% !important;
}
.mainTab tr th a{
    text-decoration: none;
}

.users-table tr:nth-child(4n - 2).user-details td{
    background-color: #f4f4f4 !important;
}

.users-table tr.user-details table td{
    padding: 10px !important;
}

#gameList .new-member h2,
#gameList .set-department h2{
    font-size: 26px;
}

.departments .place,
.departments .name{
    font-weight: normal;
}

#gameList .new-member,
#gameList .set-department,
#gameList .matches-edit{
    width: auto;
    margin: 40px auto;
    max-width: 460px;
    width: 90%;
    padding: 20px;
    background-image: linear-gradient(163deg, #fff 2%, #eaeaea 98%);
}

#regForm.registration input{
    width: 85% !important;
}

#regForm .matches-edit__h2{
    font-size: 26px;
}

.departments .points{
    max-width: 20%;
}

.departments .place td{
    font-weight: normal;
}

/* matches */

.matches .matches__flag span{
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
}

.matches.mainTab > thead > tr > th,
.matches.mainTab > tbody > tr > td{
    width: initial !important;
}

.matches.mainTab > tbody > tr td.aresult,
.matches.mainTab > tbody > tr td.hresult{
    width: 8% !important;
    font-weight: 600 !important;
}

.matches.mainTab > tbody > tr:nth-child(4n - 1) td{
    background-color: #fff;
}



.matches__flag-mobile span{
    display: grid;
    font-weight: normal;
    grid-template-columns: 40px 1fr;
    align-items: center;
    max-width: 110px;
}

.matches__options a{
    margin-right: 5px;
}

.matches__teams{
    padding-left: 20px !important;
}

.mainTab.matches tr:nth-child(4n + 2) tbody tr td,
.mainTab.matches tr:nth-child(4n + 2) .bg{
    background-color: #f4f4f4;;
}

.matches-table-mobile tr td:first-child{
    width: 50%;
    padding-left: 10px !important;
}

/*  partial_rankings  */

#regForm form input{
    border-radius: 0 !important;
}

.partial-rankings-pos{
    font-weight: normal;
}

#gameList .partial-rankings tbody tr:last-child{
    border-bottom: none;
}
#gameList .partial-rankings tbody tr:last-child td{
    background-color: #f4f4f4;
}

#gameList .partial-rankings tbody tr:nth-last-child(2){
    border-bottom: 1px solid #c3c3c3;
}

#gameList .partial-rankings tbody tr td:first-child,
#gameList .partial-rankings thead tr th:first-child{
    padding-left: 20px;
}

#gameList .partial-rankings tbody tr.partial-rankings-input td{
    padding: 0;
    padding-top: 20px;
}

#gameList .partial-rankings tbody tr.partial-rankings-input td input{
    width: calc(100% - 10px);
    max-width: unset;
    min-height: 25px;
    border-radius: 0;
}

.mainTab.campany-table-1 tbody tr:last-child{
    border: none;
}

.success_info{
    font-size: 26px;
}

/* flip-colock */

.time-counter-wrap{
    position: absolute !important;
    z-index: 1;
    top: 98px;
    right: 40px;
    transform: translateX(110%);
    background-image: linear-gradient(180deg, #fff, #d1d1d1);
    border-right: 1px solid #d3d3d3;
    max-height: 112px;
    width: 300px;
}
.time-counter-btn{
    position: absolute !important;
    z-index: 2;
    width: 112px;
    height: 20px;
    padding: 10px 0;
    text-align: center;
    transform: translate( 36px, 36px) rotate(-0.25turn);
    top: 98px;
    right: 0;
    cursor: pointer;
    background-image: linear-gradient(270deg, #fff, #d1d1d1);
    font-family: Dosis;
    font-size: 14px;
    letter-spacing: normal;
}

.time-counter-btn::after{
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    right: 10px;
    background-image: url('/images/2022/arrow-up.svg');
}

.time-counter-btn.active::after{
    transform: rotateX(180deg);
}

.time-counter-btn::before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    background-size: contain;
    background-image: url('/images/2022/clock.svg');
}
.time-counter-wrap.active{
    transform: translateX(0);
}

.time-counter-wrap h3{
    padding: 0;
    padding-left: 43px;
    text-align: left;
    margin: 9px 0;
    font-size: 14px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}

.time-counter-wrap h3::after{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 15px;
    background-size: cover;
    background-image: url('/images/2022/clock.svg');
}

.flip-clock-wrapper ul,
.flip-clock-wrapper ul li a div div.inn {
    height: 37px;
    width: 28px;
    line-height: 37px;
    text-shadow: none;
    font-weight: 600;
    border-radius: 0;
}

.flip-clock-wrapper ul li a div div.inn, 
.flip-clock-wrapper ul{
background-color: #fff;
}

.flip-clock-divider .flip-clock-label{
    top: 44px;
    width: 72px;
}

.flip-clock-divider{
    width: 7px;
}

.flip-clock-wrapper ul li a div.down{
    border-top: 1px solid rgb(138, 138, 138, .4);
}

.flip-clock-divider.days .flip-clock-label{
    left: -5px;
}

/* FAQ */

#gameList.faq #labels + h2,
#gameList.faq h2{
    font-size: 24px;
    font-weight: 600;
    color: #212121;
    padding-left: 20px;
    
}

#gameList.faq #labels{
    display: none;
}

#gameList.faq dl{
    background-color: #ffffff;
}

#gameList.faq dt{
    font-size: 16px;
    color: #212121;
    font-weight: 600;
    padding: 15px 40px 15px 20px;
    position: relative;
    cursor: pointer;
    letter-spacing: normal;
    text-transform: uppercase;
}

#gameList.faq dt::after{
    position: absolute;
    right: 20px;
    top: 23px;
    content: '';
    width: 12px;
    height: 7px;
    background-image: url("../images/2022/arrow-faq.webp");
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .2s ease-in-out;
}

#gameList.faq dt.active::after{
    transform: rotateZ(180deg);
}

#gameList.faq dd{
    font-size: 16px;
    color: #212121;
    margin-left: 0;
    padding-left: 20px;
    padding-right: 30px;
    border-bottom: 1px solid #f4f4f4;
    overflow: hidden;
    max-height: 0;
    transition: all .2s ease-in-out;
    letter-spacing: normal;
}

#gameList.faq dd.active{
    padding-bottom: 11px;
    max-height: 40px;
}

#gameList.faq dd a{
    text-decoration: none;
    color: #212121;
}

#gameList.faq dd a:hover{
    text-decoration: underline;
}

#gameList.faq dd:last-child{
    border: none;
}

#gameList.messages{
    background-color: #ffffff;
    background-image: none;
    padding: 12px 9px;
    box-sizing: border-box;
    max-width: 400px;
    border-radius: 15px;
    text-align: center;
}
#gameList.messages.registration-form{
    min-height: auto;
}

#gameList.messages .info{
    font-size: 22px;
}

#gameList.messages .info h3{
    font-size: 30px;
    text-transform: uppercase;
    color: #004288;
    font-weight: 600;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

#gameList.messages .info p{
    margin: 0;
    padding: 0;
}

#gameList.messages a:hover{
    text-decoration: underline;
}
#gameList.messages .info p.margin-top{
    margin-top: 30px;
}

#gameList.messages-comfirm{
    min-height: unset;
    margin-top: 100px;
}

#loginForm.error-msg{
    background-color: #ffffff;
    background-image: none;
    text-align: center;
    height: 345px;
    max-width: 400px;
    box-sizing: border-box;
    border-radius: 15px;
}

#loginForm.error-msg ul{
    padding: 0;
}

#loginForm.error-msg h2{
    font-size: 30px !important;
    color: #004288 !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

#loginForm.error-msg p{
    font-size: 22px;
    margin: 0;
}
.form_error .flex-col{
    display: flex;
    flex-flow: column;
    align-items: center;
}

#gameList.messages a.button:hover{
    text-decoration: none;
}

#loginForm.reminder{
    height: 260px;
    padding: 20px;
}

#loginForm.reminder.no-lang{
    height: 210px;
    padding: 20px;
}

#loginForm.reminder .button{
    text-transform: none !important;
    letter-spacing: normal !important;
    width: fit-content !important;
}

#loginForm.reminder ul{
    display: flex;
    flex-flow: column;
    align-items: center;
}

/* ======== end desktop ==========*/
/* ============================== */

/* ======== media 1440px ==========*/
/* =============================== */

@media (max-width: 1440px){
    .top-bar{
        margin-right: 10vw;
    }
}

/* media 1024 */

@media (max-width: 1024px){

    .banner h3{
        font-size: 20px;
    }

    .banner-number{
        width: 30px;
        height: 30px;
        font-size: 20px;
    }

    .banner-text{
        font-size: 20px;
    }

    #awards2021 img{
        margin: 0;
        height: 180px;
        width: unset;
        max-width: unset;
    }

    #awards2021 h3{
        font-size: 27px;
    }

    .new-footer .footer-content .phone,
    .new-footer .footer-content .question{
        margin: 0 30px;
    }
}



/* ====== end media 1440px ========*/
/* =============================== */

/* ========= media 767px ==========*/
/* =============================== */

@media (max-width: 767px){
    .baner-login{
        display: none;
    }

    #loginForm{
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        max-width: unset;
        width: unset
    }

    #baner{
        width: unset;
        margin-left: 10px;
        margin-right: 10px;
    }

    #main{
        /* background-image: url("../images/2022/bg-mobile.webp"); */
        background-position: 50% 0;
        background-size: auto 600px;
    }

    #header{
        position: relative;
    }

    #logo{
        position: absolute;
        left: calc(50vw - 300px);
        top: -24px;
        scale: 0.6;
    }

    header h1 {
        max-width: 250px;
        margin: auto;
    }

    header h1 a.logo span.typ{
        font-size: 35px;
    }
    header section{
        margin-top: 110px;
    }
    #loginForm{
        margin-top: 110px;
    }

    #awards2021{
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #awards2021 img{
        max-width: calc( 100vw - 40px );
        margin: auto;
        width: unset;
        height: unset;
    }
    #awards2021 h3{
        max-width: 170px;
        padding: 0 20px;
    }

    .new-footer .footer-content .phone,
    .new-footer .footer-content .question{
        margin: 0 10px;
    }

    .home-register-buttons {
        margin-top: 180px;
        margin-bottom: 40px;
    }

    .banner h3{
        font-size: 30px;
    }

    .banner-number{
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .banner-text{
        font-size: 22px;
    }

    .top-bar__lang-btn{
        width: 30px;
        height: 30px;
        margin: 10px 15px 10px 0;
        background-image: url('../images/2022/lang-mobile.svg');
    }

    .top-bar__log-out img{
        display: block;
    }

    .top-bar span{
        display: none;
    }
    .top-bar__log-out p{
        display: none;
    }

    .top-bar__lang a{
        top: 14px
    }

    #gameList{
        margin: 110px 10px 0;
        
    }

    #gameList.registerList{
        max-width: unset;
    }

    #gameList h2{
        font-size: 26px;
    }

    #loginForm ul li h2{
        text-align: center;
    }

    .footer-copyright{
        flex-wrap: wrap;
        justify-content: center;
        line-height: 1.5;
        text-align: center;
    }

    .footer-copyright > div{
        width: 100%;
    }

    .footer-copyright > div ul{
        justify-content: center;
    }

    .footer-copyright > div:nth-child(2){
        width: fit-content;
        max-width: auto;
    }

    .log-bar{
        padding-top: 4px;
    }

    .top-bar{
        margin-right: 15px;
    }

    .dashboard-table{
        display: none;
    }

    .futureMatches{
        flex-wrap: wrap;
    }
    .futureMatches__single{
        width: 100%;
    }

    #gameList .column-50 .card.troe{
        padding: 0;
    }

    .futureMatches__wrapper h2{
        text-align: center;
        text-transform: uppercase;
    }

    .futureMatches{
        gap: 4px
    }

    #gameList .column-50{
        margin-bottom: 20px;
    }
    #gameList .column-50 .card{
        margin-bottom: 20px;
    }

    #gameList.company .column-50{
        padding-left: 0;
        padding-right: 10px;
    }

    #gameList.dashboard{
        margin-top: 15px;
    }
    #awards2021.awards-mobile{
        display: flex;
        margin-top: 30px;
    }

    .final-prediction-separator{
        display: none;
    }

    .noDisplayMobile{
        display: none;
    }

    .gameList-nav__wrapper {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-template-rows: 1fr;
    }

    .gameList-nav__wrapper section{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        margin-top: 10px;
    }

    .gameList-nav__wrapper h2{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    #gameList{
        margin-top: 20px;
    }

    .table-flag span:nth-child(2){
        /*display: none;*/
    }

    .table-flag .dash {
        display: none !important;
    }

    .table-flag{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .table-gotype tbody tr{
        padding-bottom: 10px;
    }
    .table-gotype .date-mobile{
        text-transform: none;
        font-weight: normal !important;
        width: 100% !important;
        font-size: 14px;
        bottom: 0;
    }
    .table-gotype .date-mobile span{
        font-weight: 600 !important;
    }

    .table-gotype .date-mobile{
        display: inline-block;
    }

    .table-2-gotype-desktop{
        display: none !important;
    }

    .table-2-gotype-mobile-2__wrapper{
        overflow-x: auto;
        
    }
    .table-2-gotype-mobile{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        position: relative;
    }

    .table-2-gotype-mobile::after{
        position: absolute;
        content: '';
        right: 0%;
        height: 100%;
        width: 40px;
        background: linear-gradient(91deg, transparent, #eaeaea);
        pointer-events: none;
        mix-blend-mode: lighten;
    }

    .table-2-gotype-mobile-1{
        position: relative;
        border-collapse: collapse;
    }
    .table-2-gotype-mobile-1.active::after{
        content: '';
        position: absolute;
        width: 4px;
        height: 100%;
        background: linear-gradient(90deg, rgba(168,167,167,1) 0%, rgba(255,255,255,0.3) 100%);
        top: 0;
        right: 0;
    }

    .table-2-gotype-mobile-1 .winner{
        font-weight: 600;
        color: #212121;
    }
    .table-2-gotype-mobile-1__wrapper{
        display: grid;
        grid-template-rows: 1fr 1fr;
        text-align: left;
        font-size: 14px;
        
    }
    .table-2-gotype-mobile-1__wrapper > span{
        align-self: end;
    }
    .table-2-gotype-mobile-1 .country{
        display: flex;
        align-items: center;
        width: min-content;
        text-transform: uppercase;
    }

    .table-2-gotype-mobile-1 tbody tr:nth-child(2n -1){
        background-color: #fff;
    }
    .table-2-gotype-mobile-2{
        font-weight: 600;
    }
    .table-2-gotype-mobile-2{
        border-collapse: collapse;
    }
    .table-2-gotype-mobile-2 td{
        min-width: 48px;
        text-align: center;
    }

    .table-2-gotype-mobile-1,
    .table-2-gotype-mobile-2{
        text-align: center;
        font-size: 16px;
    }

    .table-2-gotype-mobile-1 th,
    .table-2-gotype-mobile-2 th{
        background-color: #e2e2e2;
        font-weight: 600;
        height: 50px;
    }

    .table-2-gotype-mobile-1 td,
    .table-2-gotype-mobile-2 td{
        height: 52px;
    }

    .table-2-gotype-mobile-1 tr:nth-child(2n - 1) td,
    .table-2-gotype-mobile-2 tr:nth-child(2n) td{
        background-color: #fff;
    }

    .result-table .place{
        width: 10%;
    }
    
    .result-table .gamer{
        width: 70%;
    }
    
    .result-table .points{
        width: 10%;
    }
    
    .result-table .trend{
        width: 10%;
    }

    .result-table .gap{
        width: 5%;
    }

    .resultList .mainTab.result-table td.place{
        text-align: center;
    }

    .new-footer .footer-content .question,
    .new-footer .footer-content .phone{
        align-items: flex-start;
    }

    .lev-2-menu{
        width: 100%;
    }

    .lev-2-menu__overflow{
        overflow-x : scroll;
        display: flex;
        flex-wrap: nowrap;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .lev-2-menu__overflow::-webkit-scrollbar{
        display: none;
    }

    .lev-2-menu a {
        white-space: nowrap;
    }
    #labels ul{
        margin-bottom: 20px;
    }
    #labels ul li a {
        padding: 0;
        letter-spacing: normal;
        height: 45px;
        text-align: right;
    }
    #gameList #labels + h2 a{
        margin-right: 20px;
    }
    
    .table-gotype_mobile-date{
        display: table-cell;
        font-weight: normal;
        font-size: 14px !important;
        text-transform: none !important;
        padding-top: 0 !important;
        padding-left: 20px !important;
    }

    .table-gotype_mobile-date span{
        font-weight: 600;
    }

    .final-prediction .game,
    .table-gotype .game{
        min-width: 100px
    }

    .table-gotype .table-flag{
        max-width: 100px;
    }

    .text-mobile-center.game select{
        max-width: 85px;
        margin-right: 15px;
        padding: 4px;
    }

    .final-prediction select,
    .table-gotype select{
        white-space: break-spaces;
    }

    .penalty select{
        width: 100px;
        max-width: 80px !important;
    }

    .expand-table{
        min-height: unset;
    }

    .departments .points{
        max-width: 10%;
        width: 0% !important;
    }

    .departments .place{
        max-width: 50px;
        width: 0% !important;
    }

    /* matches */
    .matches__flag-mobile{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    /* partial_rankings */
    #gameList .partial-rankings tbody tr td:first-child,
    #gameList .partial-rankings thead tr th:first-child{
        width: 10%;
    }

    .user-info-table-2 .separator{
        display: none;
    }

    .user-info-table-2__flag{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .user-info-table-2__type{
        width: 10% !important;
    }
    .user-info-table-2__result{
        width: 10% !important;
    }

    .user-info-table-2 th:last-child{
        width: 10%;
    }

    /* flip-clock */
    .time-counter-wrap,
    .time-counter-btn{
        top: 270px;
    }
    .time-counter-wrap{
        height: 112px;
        padding: 0;
    }

    .time-counter-btn{
        transform: translate( 36px, 51px) rotate(-0.25turn);
    }
    .flip-clock-wrapper{
        display: block;
    }

    #gameList.registration-form{
        margin-top: 110px;
    }

    .futureMatches.long-name .futureMatches__flags:not(.long-name)::after{
        bottom: 43%;
    }

    #table-1 .data{
        display: table-cell;
    }

    .table-gotype th.penalty{
        min-width: 90px;
    }

    #gameList #table-1 table td{
        padding-top: 10px;
    }

    .table-gotype th.penalty.has{
        min-width: unset
    }

    #table-1 .final-prediction .game,
    #table-1 .table-gotype .game{
        width: 100% !important;
    }
    #table-1 .final-prediction .input,
    #table-1 .table-gotype .input{
        width: 25% !important;
    }
    #table-1 .final-prediction .penalty,
    #table-1 .table-gotype .penalty{
        width: 25% !important;
    }

    #table-1 .final-prediction td.game,
    #table-1 .table-gotype td.game{
        padding-bottom: 5px !important;
    }
    #table-1 .final-prediction td.input,
    #table-1 .table-gotype td.input{
        padding-bottom: 5px !important;
    }
    #table-1 .final-prediction td.penalty,
    #table-1 .table-gotype td.penalty{
        padding-bottom: 5px !important;
    }
    #table-1 .table-gotype td.table-flag{
        padding-bottom: 5px;
        padding-left: 3px;
    }

    #gameList .table-gotype_mobile-date{
        padding-left: 12px !important;
    }

    .final-wrapper-select{
        padding-right: 0;
        flex-wrap: wrap;
    }

    #gameList .btn-gotype.button{
        margin-top: 0;
    }

    .table-flag span:first-child{
        margin-bottom: -2px;
    }

    .table-flag span:last-child{
        margin-top: -2px;
    }

    #time-counter-btn,
    .time-counter-wrap{
        display: none;
    }

    #gameList.faq #labels{
        display: block;
    }

    #gameList.faq dt{
        padding-left: 10px;
    }

    #gameList.faq dd{
        padding-left: 10px;
    }

    #gameList.faq dt::after{
        right: 10px
    }

    #gameList.faq dd.active{
        max-height: 150px;
    }
    
    #gameList.faq #labels + h2{
        position: absolute;
        top: 0;
        padding-left: 10px;
        font-size: 18px;
    }

    #gameList.faq h2{
        padding-left: 10px;
        font-size: 18px;
    }

    #gameList.messages{
        max-width: 340px;
        padding: 12px 15px;
        margin-left: auto;
        margin-right: auto;
    }

    #loginForm.error-msg{
        max-width: 340px;
        height: 370px;
        margin-left: auto;
        margin-right: auto;
    }

    #loginForm.reminder{
        height: 260px;
    }

    #loginForm.reminder.no-lang{
        height: 210px;
    }

    .top-bar__lang a.show:first-child{
        opacity: 1;
        top: 45px;
        z-index: 1;
    }
    
    .top-bar__lang a.show:nth-child(2){
        opacity: 1;
        top: 75px;
        z-index: 1;
    }
    .top-bar__lang a.show:nth-child(3){
        opacity: 1;
        top: 105px;
        z-index: 1;
    }

}

/* ======= end media 767px ========*/
/* =============================== */

@media (max-width: 420px){
    #logo{
        position: absolute;
        left: calc(50vw - 300px);
        top: -24px;
        scale: 0.5;
    }
}

.voteSelected {
    filter: invert(15%) sepia(93%) saturate(7022%) hue-rotate(231deg) brightness(82%) contrast(100%);
}

@media (max-width: 550px){
    .footer-copyright{
        max-width: 230px;
    }
}

@media (min-width: 400px){
    
    #table-1 .final-prediction .input, #table-1 .table-gotype .input{
        min-width: 130px;
    }
}

.banner a {
    text-decoration: underline !important;
}