.main-match-liga-container{background: var(--color-liga-gradation); position: relative;}

.base-ml-menu-wg{width: 100%; display: flex; justify-content: center;}
.widget-ml-menu-container{width: 300px; border-radius: var(--size-3); overflow: hidden;}
.widget-ml-menu-head{position: relative; width: 100%; height: 55px; display: flex; align-items: center; padding: 4px 21px;}
.thumb-ml-menu-bg{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.thumb-ml-menu-bg img{width: 100%; height: 100%;}
.widget-ml-menu-head h3{position: relative; z-index: 3; color: #FFFFFF; font-size: var(--size-4); font-weight: 700;}

.widget-ml-menu-body{background: #F7F7F7; padding: 13px 21px;}
.widget-ml-menu-content{display: grid; gap: var(--size-3);}
.btn-ml-menu{background: none; color: #575757; text-transform: capitalize; font-weight: 500; font-size: 16px;}
.btn-ml-menu span{color: var(--color-liga-primary); font-weight: 700;}
.btn-ml-menu:hover{background: var(--color-liga-primary) !important;}
.btn-ml-menu:hover *{color: #FFFFFF;}
.match-video-container{margin-top: var(--size-4);}
.match-video-container *{color: #FFFFFF !important;}
.match-video-list{display: grid; gap: var(--size-4); margin-top: var(--size-5);}
.match-video-list-thumb{position: relative; border-radius: var(--size-3); overflow: hidden;}
.match-video-list-thumb::before{display: block; content: ""; padding-top: 56.25%;}
.match-video-list-thumb img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2;}
.match-duration{position: absolute; z-index: 3; bottom: 30px; right: var(--size-3); font-size: 16px; padding: 5px 7px; background-color: rgba(0, 0, 0, 0.75); color: #FFFFFF;}

.wrapper-top-ml-statistik{display: grid; justify-content: center;}
.ml-statistik-wrapper{background: #FFFFFF; padding:var(--size-4) var(--size-3); border-radius: 21px;}
.ml-statistik-info{display: grid; row-gap: var(--size-2);}
.ml-statistik-row{display: grid; grid-template-columns: 20px 1fr; gap: var(--size-3); align-items: center; justify-content: center;}
.ml-statistik-row p{font-size: 10px; color: #363636; justify-items: left;}
.top-info-ml-statistik{border-width: 1px 1px 0px 1px; border-style: solid; border-color: #DADADA; border-radius: var(--size-3) var(--size-3) 0 0; padding: var(--size-3);}
.icon-ml-statistik{display: flex; justify-content: center;}

.time-score-ml-container{position: relative; --maxheight-ml-score:46px; display: grid; grid-template-columns: 1fr 91px 1fr; width: 100%; justify-content: space-between; max-height: var(--maxheight-ml-score);}
.ml-score-time-club > .widget-pl-klub{position: relative;}
.ml-score-time-club > .widget-pl-klub *{position: relative;}
.ml-score-time-club > .widget-pl-klub > .thumb-bg-ml-score{position: absolute; width: 90%;}
.ml-score-time-club > .widget-pl-klub > .thumb-bg-ml-score.frame-left{border-radius: 21px 0 0 21px; overflow: hidden; right: 0;}
.ml-score-time-club > .widget-pl-klub > .thumb-bg-ml-score.frame-right{border-radius: 0 21px 21px 0; overflow: hidden; left: 0;}
.thumb-bg-ml-score img{height: var(--maxheight-ml-score); width: 100%;}
.ml-score-time-club > .widget-pl-klub > .frame-logo-club{--thumb-klub-pl: var(--maxheight-ml-score);}
.time-score-ml-container .ml-score-time{background: var(--color-liga-primary); text-align: center; color: #FFFFFF; font-weight: 700; font-size: 24px; padding: var(--size-3); border-radius: 0 0 var(--size-3) var(--size-3); height: 56px;}
.ml-score-time-club > .widget-pl-klub > .club-name{color: #FFFFFF; font-size: 18px;}
.pl-klub-right{justify-content: end;}

.content-ml-statistik{margin-top: calc(var(--size-4) + var(--size-3));}
.title-countdown-container, .title-hasil-statistik-container{display: grid; justify-items: center; row-gap: var(--size-2);}
.title-countdown-container .title, .title-hasil-statistik-container .title{color: var(--color-liga-primary); font-weight: 700; font-size: 16px;}
.title-countdown-container .subtitle, .title-hasil-statistik-container .subtitle{background: #474747; padding: var(--size-2) var(--size-4); border-radius: var(--size-2); color: #FFFFFF; font-weight: 700; font-size: 16px;}
.countdown-liga{margin-top: var(--size-3); display: flex; width: 100%; justify-content: center; gap: var(--size-4);}
.time-count, .dotwrap-time{color: var(--color-liga-primary); font-weight: 800; font-size: 24px;}
.timewrap{display: grid; justify-items: center;}
.timewrap .time-title{color: #363636;}

.card-hasil-liga-menu .card-jadwal-menu-link{background: none !important; color: #363636 !important; font-size: 14px;}
.card-hasil-liga-menu .card-jadwal-menu-item .card-jadwal-menu-link.curr{background: var(--color-liga-primary) !important; color: #FFFFFF !important;}
.hasil-statistik-action-swipper{background: var(--color-liga-primary);}
.hasil-statistik-action-swipper .svgicon path{stroke: #FFFFFF;}
.main-hasil-liga-container{margin-top: var(--size-3); display: grid; row-gap: var(--size-4);}
.hs-peristiwa-content{margin-top: var(--size-4); display: grid; gap: var(--size-3);}
.hs-peristiwa-list:nth-child(odd){background: linear-gradient(90deg, #FEFEFE 0%, #F8F8F8 50%, #FEFEFE 100%);}
.hs-peristiwa-list:nth-child(odd) .right-player{visibility: hidden;}
.hs-peristiwa-list:nth-child(even) .left-player{visibility: hidden;}
.hs-peristiwa-list{display: flex; gap: var(--size-4); justify-content: center; padding: var(--size-2) 0;}
.hs-peristiwa-list .hs-player{display: grid;}
.hs-peristiwa-list .left-player{justify-items: end;}
.hs-player .info-player{display: flex; gap: var(--size-2); align-items: center; color: #575757; font-weight: 700;}
.hs-player .name-player{color: #575757; font-size: 14px;}
.hs-player .name-player span{color: var(--color-liga-primary); font-weight: 700;}
.hs-player .second-player{font-size: 10px; color: var(--color-liga-primary);}

.hs-statistik-container{margin-top: var(--size-3); padding: 0 var(--size-4); display: grid; row-gap: var(--size-4);}
.hs-statistik-list{display: grid; row-gap: var(--size-2);}
.hs-statistik-info{display: grid; grid-template-columns: 30px 1fr 20px;}
.hs-statistik-info .sv-club,
.hs-statistik-info .sv-club-info{display: flex; justify-content: center;}
.hs-statistik-info *{color: #323232; font-size: 14px; font-weight: 700;}
.hs-statistik-info-bar{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-4);}
.sv-club-bar{--sv-bar-height:13px; height: var(--sv-bar-height); width: 100%; background: #F1F1F1; display: flex;}
.sv-club-bar-left{justify-content: end;}
.sv-club-bar-right{justify-content: start;}
.sv-club-bar-val{height: var(--sv-bar-height);}
.sv-club-green{background: #40A052;}
.sv-club-blue{background: var(--color-liga-primary);}

.info-formasi-container, .info-formasi-club{display: flex;}
.info-formasi-container{justify-content: center; gap: var(--size-5);}
.info-formasi-club{border-radius: var(--size-2); padding: var(--size-2) var(--size-3); width: 100px; display: flex; justify-content: center;}
.info-formasi-club span{font-size: 20px; font-weight: 700;}
.info-formasi-club.formasi-right{background: var(--color-liga-primary); color: #FFFFFF;}
.info-formasi-club.formasi-left{border: 1px solid var(--color-liga-primary); color: var(--color-liga-primary);}
.wrapper-formasi-statistik{position: relative;}
.thumb-wrapper-lp{position: relative;}
.wrapper-fs-mobile .thumb-wrapper-lp::before{display: block; content: ""; padding-top: calc(997/600*100%);}
.wrapper-fs-mobile .thumb-wrapper-lp img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.player-match-tim-formation{display: grid; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.club-formation-top-container, .club-formation-bottom-container{display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr);}
.club-formation-top-container .number-player,
.club-formation-bottom-container .number-player,
.club-formation-left-container .number-player,
.club-formation-right-container .number-player{--player-numsize:25px; width: var(--player-numsize); height: var(--player-numsize); display: flex; align-items: center; justify-content: center;}
.club-formation-top-container .number-player, 
.club-formation-left-container .number-player{background: #FFFFFF; border: 1px solid var(--color-liga-primary); border-radius: 50%; color: var(--color-liga-primary);}
.club-formation-bottom-container .number-player,
.club-formation-right-container .number-player{background: var(--color-liga-primary); border: 1px solid #FFFFFF; border-radius: 50%; color: #FFFFFF;}
.player-name-pin{display: grid; justify-items: center;}
.player-name-pin .name-player{color: #FFFFFF; font-size: 14px; font-weight: 500;}
.player-mobile-tap{display: flex; gap: 5%; justify-content: center; align-items: center;}

@media screen and (min-width:0px) and (max-width:1023px){
    .container-matchliga-overlay{position: relative; top: -100px;}
    .container-matchliga-overlay .base-pekanliga-wg{margin: 0;}
    .main-match-liga-container{min-height: 100vh;}
    .site-liga-match-top{padding-bottom: 100px;}

    .player-match-tim-formation{grid-template-columns: 1fr; grid-template-rows: 50% 50%;}
}

@media screen and (min-width:430px){
    .player-mobile-tap{gap: 10%;}
}

@media screen and (min-width:1024px){
    /* .main-match-liga-container{z-index: 91;} */
    .sidebar-match-liga, .match-liga-container{position: relative; z-index: 92;}
    .time-score-ml-container{--maxheight-ml-score:55px; grid-template-columns: 1fr 141px 1fr;}
    .time-score-ml-container .ml-score-time{height: 69px; display: flex; justify-content: center; align-items: center;}
    .match-video-list{grid-template-columns: repeat(2, 1fr);}
    .ml-statistik-info{display: flex; justify-content: center; gap: var(--size-2);}
    .ml-statistik-row{gap: var(--size-1);}
    .ml-statistik-row p{font-size: 9px;}
    .icon-ml-statistik svg{width: 14px; height: auto;}
    .ml-score-time-club > .widget-pl-klub > .thumb-bg-ml-score{width: 90%;}
    .ml-score-time-club > .widget-pl-klub > .club-name{font-size: 14px;}
    .time-count, .dotwrap-time{font-size: 36px;}
    

    .menu-hasil-statistik-row{display: flex; justify-content: center;}
    a.btn-menu-hasil-statistik{background: none !important; color: var(--color-liga-primary); font-size: 12px; padding: var(--size-2); border: 1px solid var(--color-liga-primary);}
    .btn-menu-hasil-statistik.menu-left{border-radius: 13px 0 0 13px !important;}
    .btn-menu-hasil-statistik.menu-center{border-radius: 0 !important; border-left: none; border-right: none;}
    .btn-menu-hasil-statistik.menu-right{border-radius: 0 13px 13px 0 !important;}
    a.btn-menu-hasil-statistik:hover,
    a.btn-menu-hasil-statistik.curr{background: var(--color-liga-primary) !important; color: #FFFFFF;}

    .wrapper-fs-desktop .thumb-wrapper-lp::before{display: block; content: ""; padding-top: calc(600/997*100%);}
    .wrapper-fs-desktop .thumb-wrapper-lp img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

    .player-match-tim-formation{grid-template-rows: 1fr; grid-template-columns: 50% 50%;}
    .player-name-pin .name-player{font-size: 12px;}
    .player-name-pin .number-player{font-size: 11px;}
    .club-formation-left-container, .club-formation-right-container{display: grid; gap: var(--size-2); grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr;}
    .player-desktop-tap{display: grid; gap: var(--size-5); justify-items: center; align-content: center; padding: var(--size-4) 0;}
}