﻿/******************** Matches HP Clip ********************/
.matchesHp{display:inline-block;width:100%;float:right;background:none;margin-bottom:15px}
.matchesHp .matchesHpCntnr{display:inline-block;width:100%;float:right;padding:0 28px;height:100px;overflow:hidden;margin:6px 0 0;border-radius: 8px;}
.matchesHp .matchesHpCntnr .matchesSlider{display: inline-block;width: 100%;height: 100px;float:right;background:#fff}
.matchesHp .matchItem{display:inline-block;float:right;width:calc(100% / 5);height:100px;background:#fff;overflow: hidden;border-left: 2px solid #e8e8e8;padding:6px 12px;transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s;-moz-transition:all 0.2s ease-in-out 0s;-ms-transition:all 0.2s ease-in-out 0s;-o-transition:all 0.2s ease-in-out 0s}
.matchesHp .matchItem:first-of-type{border-right:2px solid #f2f2f2}
.matchesHp .matchItem .tourName{font-size: 11px;color:#000;text-align:center;width:100%;display:inline-block;line-height: 1.4;float:right;margin-bottom: 4px;}
.matchesHp .matchItem .teamA, .matchesHp .matchItem .teamB{float:right;width:calc((100% - 66px) / 2);height:64px;text-align:center}
.matchesHp .matchItem .teamA{padding-left:12px}
.matchesHp .matchItem .teamB{padding-right:12px}
.matchesHp .matchItem .teamA img, .matchesHp .matchItem .teamB img{height: 26px;width: auto;border:none;display:inline-block;min-height:unset}
.matchesHp .matchItem .teamA p, .matchesHp .matchItem .teamB p{display:inline-block;width:100%; margin:0; padding-top:5px;color:#000;font-size:11px;line-height:1.2;text-align:center}
.matchesHp .matchItem .resultDiv{ float:right;width:66px;margin-top: 6px;}
.matchesHp .matchItem .resultDiv .result{color:#000; font-size:16px;font-family:CenturyGothicBold;font-weight:bold;display:inline-block;}
.matchesHp .matchItem .resultDiv .result:first-of-type{float:right}
.matchesHp .matchItem .resultDiv .result:last-of-type{float:left}
.matchesHp .matchItem .resultDiv .matchStatus{display:inline-block;width: 100%;}
.matchesHp .matchItem .resultDiv .matchStatus .status{width:100%;height:18px;display:inline-block;font-size:10px;text-align:center;margin:6px 0 4px;line-height:1.8}
.matchesHp .matchItem .penaltyRes{bottom:3px}
.matchesHp .matchItem .penaltyRes span{font-size:12px}
/** Soon **/
.matchesHp .matchItem.soon .resultDiv .matchStatus .status{border:1px solid #45B3EB;color:#45B3EB;background:unset;border-radius:8px}
.matchesHp .matchItem.soon .resultDiv .matchStatus .status:before{content:"لم تبدأ";}
/** Live **/
.matchesHp .matchItem.live .resultDiv .matchStatus .status{border:1px solid #308F40;color:#308F40;}
.matchesHp .matchItem.live .resultDiv .matchStatus .status:before{content:"مباشر";}
/** Done **/
.matchesHp .matchItem.done .resultDiv .matchStatus .status{border:1px solid #666;color:#666;}
.matchesHp .matchItem.done .resultDiv .matchStatus .status:before{content:"إنتهت";}
/** Live **/
.matchesHp .matchItem .resultDiv .matchStatus .status{border:1px solid #308F40;color:#308F40;}
.matchesHp .matchItem .resultDiv .matchStatus .status:before{content:"مباشر";}
.matchesHp .matchItem .resultDiv .matchStatus .time{width:100%;float:right;display:inline-block;color:#666;font-family:arial;font-size:12px;text-align:center}
/** Postponed **/
.matchesHp .matchItem.postponed .resultDiv .matchStatus .status{background:#ff1a3b}
.matchesHp .matchItem.postponed .resultDiv .matchStatus .status:before{content:"مؤجل";}
.matchesHp .matchItem.postponed .resultDiv .matchStatus .time{display:none}
.matchesHp .matchItem.postponed .resultDiv .matchTime{display:none}
.matchesHp .matchItem.postponed .resultDiv .moreDtls{display:none}
.matchesHp .matchItem.postponed .resultDiv .matchResult{display:none}
.matchesHp .ttl{border:none;padding-right:0;background:none;height:32px;position:relative;margin-bottom:0;border-bottom:none!important}
.matchesHp .ttl .matchesTtl{display:inline-block;    width: 390px;display:flex;flex-wrap:wrap;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.matchesHp .ttl .matchesTtl .inTtl{float:right;background:#fff;color:#056818;width:33.33%;font-size:14px;text-align:center;padding:0;height:32px;line-height:32px;border: 1px solid #E8E8E8;
background: #FFF;font-family: AvenirMeduim, Arial}
.matchesHp .allMatchesBtn{display:inline-block;float:left;font-size:12px;border-radius: 8px;background: #056818;color:#fff;padding:4px 10px}
.matchesHp .allMatchesBtn:hover{background:#2c792f}
.matchesHp .allMatchesBtn .icon-arrow:before{content:"q";font-size:10px;line-height:1.8;margin-right:6px}
.matchesHp .allMatchesBtn.mob{display:none}
.matchesHp .gotoDay{display: inline-block;width:33.33%;height:32px;    font-family: AvenirMeduim, Arial;float:right;position: relative;text-align:center;color:#000;font-size:14px;line-height:32px}
.matchesHp .gotoDay.yesterday{border-top: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
background: #FFF;border-radius:0 8px 8px 0}
.matchesHp .gotoDay.tomorrow{border-left: 1px solid #E8E8E8;border-top: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
background: #FFF;border-radius:8px 0 0 8px}
.matchesHp .gotoDay span{position: relative;display: inline-block;}
.matchesHp .gotoDay span.icon-prev:before{float:right;content:"h";margin:10px 0 0 6px;transform:rotate(180deg);line-height:1}
.matchesHp .gotoDay span.icon-next:before{float:left;content:"h";margin:10px 6px 0 0;line-height:1}
.matchesHp .gotoDay:hover{background:#fff;color:#056818}
.matchesHp .gotoDay.euro{display:none}
/*.matchesHp .slide .noMatches {font-size: 20px !important;padding-top: 56px !important;width:100%;color: #1d1d1d!important;line-height: 3.5;}*/
.matchesHp .bx-wrapper .bx-pager{display:none}
.matchesHp .flickity-button{position:absolute;width:28px;height:100px;top:0;background:#056818;color:#fff;overflow:hidden;text-align:center;border-radius:0;border:none;margin-top:0;opacity:1;z-index:1}
.matchesHp .flickity-button.previous{right:-28px;left:auto;border:0!important}
.matchesHp .flickity-button.previous:before{color:#fff!important;content:"r";font-size:26px;line-height:4;color:inherit}
.matchesHp .flickity-button.next{left:-28px;right:auto}
.matchesHp .flickity-button.next:before{color:#fff!important;content:"q";font-size:26px;line-height:4;color:inherit}
.matchesHp .flickity-button svg{display:none}
.matchesHp .flickity-button:active, .matchesHp .flickity-button:hover{background-color:#056818}
.matchesHp .flickity-button:active:before, .matchesHp .flickity-button:hover:before {color:#fff}
.matchesHp .flickity-button:focus{background-color:#056818}
.matchesHp .flickity-button:focus:before{color:#fff}
.matchesHp .flickity-button:disabled{opacity: 0.2;cursor: auto;pointer-events: none;}
.imageCntnr{overflow:hidden}
.matchesHp .noStatsDiv{display: inline-block;width: 100%;float: right;}
.matchesHp .noStatsDiv:hover{background:transparent}
.matchesHp .noStats{display:inline-block;width:100%;float:right;position:relative;height:100px}
.matchesHp .noStats p{position:absolute;top:50%;transform:translateY(-50%);font-size:13px;color:#000;width:100%;text-align:center}
.matchesHp .predResult{position: absolute;width: 68px;height: 18px;background-color: #efefef;top: 56px;left:50%;transform:translateX(-50%);line-height: 2;display: inline-block;color: #fff;font-family: AvenirLight, Arial;font-size: 10px;text-align: center;background: #000;}
.matchesHp .resultPredBtn .resultDiv .matchStatus .status{background:transparent!important;color:transparent}
.matchesHp .flickity-viewport{overflow:visible}

.cwcSection .matchesHp .gotoDay span{color:#232323}
.cwcSection .matchesHp .ttl .matchesTtl .inTtl{color:#FCB507;background:#000}
.cwcSection .matchesHp .allMatchesBtn{background:#FCB507;color:#232323}
.cwcSection .matchesHp .allMatchesBtn .icon-arrow:before{color:#232323}
.cwcSection .matchesHp .matchesHpCntnr .matchesSlider{background:unset}
.cwcSection .matchesHp .matchItem{background:#000;margin-left:12px}
.cwcSection .matchesHp .matchItem:last-child{margin-left:0}
.cwcSection .matchesHp .matchItem .tourName,
.cwcSection .matchesHp .matchItem .teamA p,
.cwcSection .matchesHp .matchItem .teamB p{color:#FFFFFF}
.cwcSection .matchesHp .matchItem .resultDiv .matchStatus .time{color:#FCB507}
.cwcSection .matchesHp .matchItem:first-of-type,
.cwcSection .matchesHp .matchItem{border:0}

.cwcSection .matchesHp .matchItem.done .resultDiv .matchStatus .status{border: 1px solid #A2B9A7;color: #000;background:#A2B9A7;border-radius:2px}
.cwcSection .matchesHp .matchItem.soon .resultDiv .matchStatus .status{border: 1px solid #FFFFFF;color: #000;background:#FFFFFF;border-radius:2px}
.cwcSection .matchesHp .matchItem.live .resultDiv .matchStatus .status{border: 1px solid #FCB507;color: #000;background:#FCB507;border-radius:2px}

.cwcSection .matchesHp .flickity-button{background:#FCB507;display:inline-block}
.cwcSection .matchesHp .flickity-button:before,
.cwcSection .matchesHp .flickity-button.next:before,
.cwcSection .matchesHp .flickity-button.previous:before{color:#232323!important}
.cwcSection .matchesHp .matchItem .resultDiv .result{color:#fff}


.matchesHp .flickity-enabled {position: relative;}
.matchesHp .flickity-enabled:focus { outline: none; }
.matchesHp .flickity-viewport {overflow: hidden;position: relative;height: 100%;width:100%;}
.matchesHp .flickity-slider {position: absolute;width: 100%;height: 100%;}
.matchesHp .flickity-enabled.is-draggable {-webkit-tap-highlight-color: transparent;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.matchesHp .flickity-enabled.is-draggable .flickity-viewport {cursor: move;cursor: -webkit-grab;cursor: grab;}
.matchesHp .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {cursor: -webkit-grabbing;cursor: grabbing;}

@media screen and (min-width:1680px) and (max-width:1919px) {
    .matchesHp .matchItem {width: calc(100% / 5)}
}
@media screen and (min-width:1600px) and (max-width:1679px) {
    .matchesHp .matchItem {width: calc(100% / 4)}
}
@media screen and (min-width:1536px) and (max-width:1599px) {
    .matchesHp .matchItem {width: calc(100% / 4)}
}
@media screen and (min-width:1440px) and (max-width:1535px) {
    .matchesHp .matchItem {width: calc(100% / 4)}
}
@media screen and (min-width:1360px) and (max-width:1439px) {
    .matchesHp .matchItem {width: calc(100% / 3)}
}
@media screen and (min-width:1280px) and (max-width:1359px) {
    .matchesHp .matchItem {width: calc(100% / 3)}
}
@media screen and (min-width:1152px) and (max-width:1279px) {
    .matchesHp .matchItem {width: calc(100% / 3)}
}
@media screen and (min-width:1024px) and (max-width:1151px) {
    .matchesHp .matchItem {width: calc(100% / 2)}
}
@media only screen and (max-width: 1023px) {
    .matchesHp .matchItem {width: calc(100% / 3)}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    .matchesHp{margin-bottom:0;padding:10px}
    .matchesHp .ttl .matchesTtl{left:0;right:0;width:100%;transform:none;position:relative;display: flex;
    flex-wrap: wrap;}
    .matchesHp .gotoDay,
    .matchesHp .ttl .matchesTtl .inTtl{padding:0;width:25%;font-size:11px}
    .matchesHp .allMatchesBtn{width:25%;font-size:11px;border-radius:8px 0 0 8px;line-height: 32px;
        padding: 0 10px;}
    .matchesHp .matchItem {width: 100%}
    .matchesHp .matchesHpCntnr{height:100px}
    
.cwcSection .matchesHp .matchItem{margin-left:0}
.matchesHp  .allMatchesBtn .icon-arrow{display:none}
.matchesHp .gotoDay.tomorrow{border-radius:0}

/*.cwcSection .matchesHp .allMatchesBtn.mob{width:112px;}*/

}