/* Matchs Table Css */
ul.nav-tabs{display:grid;gap:var(--Main-Gap);grid-template-columns:1fr 1fr 1fr;float:var(--EndSide);}
ul.nav-tabs li a{display:block;position:relative;background-color:var(--Gray-Color);color:var(--White-Color);font-size:var(--Font-Size-2);padding:0 var(--Padding-3);border-radius:var(--Main-Border-Radius);text-align:center;overflow:hidden;}
ul.nav-tabs li.Yes a{background-color:var(--Blue-Color);}
ul.nav-tabs li.Tod a{background-color:var(--Red-Color);}
ul.nav-tabs li.Tom a{background-color:var(--Yellow-Color);}
.matchflex{position:relative;display:grid;grid-gap:var(--Main-Gap);grid-template-columns:repeat(1,1fr);padding:var(--Main-Padding);}
.match-container{background-color:var(--Main-BG);border-radius:var(--Main-Border-Radius);border:var(--Main-Border);font-size:var(--Font-Size-2);position:relative;text-align:center;overflow:hidden;}
.match-container.mw-live{order:1;}
.match-container.mw-soon{order:2;}
.match-container.mw-not-start{order:3;}
.match-container.mw-end{order:4;}
.match-container.live #match-time,.match-container.gools #match-time,.match-container.finshed #match-time,.match-container.soon div#result{display:none;}
.match-container.comming #result,.match-container.soon #result{display:none;}
.right-team,.left-team,.match-center{width:33.3333%;float:var(--StartSide);}
.right-team{display:flex;flex-direction:row;align-items:center;justify-content:center;}
.left-team{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;}
.team-logo,.team-name{position:relative;width:var(--Half-width);overflow:hidden;}
.team-logo img{display:block;margin:22px auto;width:var(--Full-width);height:auto;max-width:60px;max-height:60px;}
.match-center{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.match-timing{margin:var(--Main-Margin) auto;}
#result{font-size:var(--Font-Size-4);letter-spacing:1.5px;margin-bottom:var(--Margin-2);align-items:center;justify-content:center;}
#match-time{margin-bottom:var(--Margin-2);}
.match-timing .date,.date.live:before{display:block;position:relative;background-color:var(--Gray-Color);border-radius:var(--Main-Border-Radius);font-size:var(--Font-Size-1);width:80px;line-height:30px;padding:0 var(--Padding-2);color:var(--White-Color);}
.date.live:after,.date.live:before{content:"";position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:75px;height:28px;display:block;}
.date.live:before{z-index:0;background-color:var(--Red-Color);animation:pulse-border 1s ease-out infinite;border-radius:var(--Main-Border-Radius);}
.date.live:after{z-index:1;border-radius:var(--Main-Border-Radius);transition:var(--Tran-1);}
@keyframes pulse-border{0%{transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);opacity:1;}100%{transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);opacity:0;}}
.date.live{background-color:var(--Red-Color);}
.date.soon{background-color:var(--Green-Color);}
.date.not-start{background-color:var(--Blue-Color);}
.match-info{width:var(--Full-width);border-top:var(--Main-Border);overflow:hidden;}
.match-info ul li{display:inline-block;float:var(--StartSide);width:33.3333%;text-align:center;margin:0 auto;overflow:hidden;}
.overlay-match{cursor:pointer;position:absolute;top:0;bottom:0;left:0;right:0;background-color:var(--Main-RGB-BG);transition:var(--Tran-1);z-index:8;opacity:0;}
.match-container:hover .overlay-match{opacity:1;}
.text-match{position:absolute;bottom:0;right:0;height:45px;margin:auto;left:0;top:0;width:45px;background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' %3E%3Cpath fill='%23fff' d='M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M344.48,269.57l-128,80  c-2.59,1.617-5.535,2.43-8.48,2.43c-2.668,0-5.34-0.664-7.758-2.008C195.156,347.172,192,341.82,192,336V176 c0-5.82,3.156-11.172,8.242-13.992c5.086-2.836,11.305-2.664,16.238,0.422l128,80c4.676,2.93,7.52,8.055,7.52,13.57 S349.156,266.641,344.48,269.57z' class=''%3E%3C/path%3E%3C/svg%3E");}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

@media screen and (max-width:750px){
ul.nav-tabs{display:flex;width:var(--Full-width);flex-direction:row;justify-content:center;align-items:center;margin-top:var(--Margin-4)}
ul.nav-tabs li{width:33.333%}
}
@media screen and (max-width:500px){
ul.nav-tabs li a{font-size:var(--Font-Size-1)}
.right-team,.left-team{flex-direction:column}
.team-logo{width:var(--Full-width);height:80px}
.team-logo img{max-width:50px!important;max-height:50px;margin:var(--Main-Margin) auto}
.team-name{width:var(--Full-width)}
.match-info ul li{float:none;width:var(--Full-width)}
.match-info ul li:not(:nth-child(3)){display:none!important}
}