﻿/********** Dugout **********/
.dugoutVideo { padding: 0; background: #000; position: relative; margin-bottom: 30px }
.dugoutVideo .cntnr { display: inline-block; width: 100%; float: right; padding-bottom: 56.30%; position: absolute; left: 0; top: 50%; transform: translateY(-50%) }
.dugoutVideo .cntnr iframe { width: 100%; height: 100%; min-width: 100%; position: absolute; top: 0; left: 0; overflow: hidden }
/* tabs CSS */
.tabs-nav { list-style: none; margin: 0; display: inline-block; float: right; width: 100% }
.tabs-nav:after { display: block; clear: both; content: " "; }
.tabs-nav > li { position: relative; float: right; font-size: 12px; }
.tabs-nav > li > a { display: block; color: #8a8a8a; position: relative; text-align: center; height: 26px; line-height: 2; white-space: nowrap; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
.tabs-nav .tabs-selected > a { font-size: 12px; line-height: 1.5; background-color: #168039; color: #fff }
.tabs-nav > li > a:hover, .tabs-nav > li > a:focus, .tabs-nav > li > a:active { background-color: #168039; color: #fff; outline: 0; }
.tabs-nav > li:hover > a, .tabs-nav > li:focus > a, .tabs-nav > li:active > a { background-color: #168039; color: #fff; outline: 0; }
.tabs-nav .tabs-selected > a:link, .tabs-nav .tabs-selected > a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; }
.tabs-nav > li > a:hover, .tabs-nav > li > a:focus, .tabs-nav > li > a:active { cursor: pointer; }
.tabs-loading em { padding: 0 0 0 20px; background: url(loading.gif) no-repeat 0 50%; }
.tabs-hide { display: none; }
.sportsContainer { background: none; box-shadow: none; margin-bottom: 0 }

/********** Matches Tabs **********/
.matchesTabs { background: none; box-shadow: none }
.matchesTabs .allMatches { display: inline-block; float: right; width: 100% }
.matchesTabs .allMatches #matchesTableTabs { display: inline-block; float: right; width: 100% }
.matchesTabs .allMatches #matchesTableTabs #divcontainer { display: inline-block; float: right; width: 100%; margin-top: -1px; background: #fff; border: 1px solid #e8e8e8 }
.matchesTable { padding: 10px 15px; min-height: 142px; display: inline-block; width: 270px; }
.matchesTable .tabs-container .slide .noMatches { text-align: center; font-size: 14px; padding-top: 0; line-height: 8 }
/* Tab Menu */
.allMatches .tabs-nav li { width: 80px; height: 30px; margin-left: 2px; }
.allMatches .tabs-nav li > a { height: 30px; line-height: 2.4; border: 0; box-shadow: none; font-size: 13px; background-color: #ddd; color: #1d1d1d; }
.allMatches .tabs-nav .tabs-selected > a { background-color: #fff; color: #1d1d1d; border: 1px solid #e8e8e8; border-bottom: none; }
.allMatches .tabs-nav > li > a { border-right: none; box-shadow: none }
/* Tab Content */
.allMatches #tab-content { border: 1px solid #d7d7d7; background-color: #eeeeee; height: 100%; margin: 0; clear: both; padding: 0px; display: block }
.allMatches #tab-01 { width: 100% }
.allMatches #tab-02 { width: 100% }
.allMatches #tab-03 { width: 100% }
.allMatches .tabs-container .slide p { text-align: center;  font-size: 13px; padding-top: 10px; color: #fff }
.allMatches .tabs-container { overflow: auto; direction: rtl; display: inline-block; float: right; width: 100%; }
.allMatches .slide { display: inline-block; width: 100%; height: 162px; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; float: right; }
.allMatches .item { color: #1d1d1d; font-size: 12px; text-align: center; padding: 18px; position: relative; width: calc((100% /3) - 0.1px); float: right; white-space: normal; }
.allMatches .item:after { content: ""; position: absolute; top: 74px; left: -1px; height: 86px; width: 1px; background: #ddd }
.allMatches .item:nth-child(3n):after { display: none }
.allMatches .item .tourName { font-size: 13px; color: #1d1d1d; padding-bottom: 5px; float: right; margin-bottom: 24px; cursor: auto; text-align: center; width: 100%; display: inline-block; border-bottom: 1px solid #056818 }
.allMatches .item .teamA { float: right; width: 110px; height: 66px }
.allMatches .item .teamA img, .allMatches .item .teamB img { height: 40px; width: auto; border: none; overflow: hidden; background: none; min-height: unset; }
.allMatches .item .teamA p, .allMatches .item .teamB p { display: block; margin: 0; padding-top: 10px; color: #1d1d1d;  font-size: 12px; line-height: 1.4 }
.allMatches .item .result { float: right; width: calc(100% - 220px); padding-top: 0 }
.allMatches .item .result.yesterday { padding-top: 12px; font-family: arial }
.allMatches .item .teamB { float: right; width: 110px; height: 66px }
.allMatches .item .result { font-size: 42px }
.allMatches .item .result .matchResult span { color: #1d1d1d; font-size: 14px !important; text-align: center; margin: 0 10px }
.allMatches .item .status a { background: #666; color: #fff; font-size: 12px; display: block }
.allMatches .status { position: relative; margin: 0 auto; width: 100%; font-family: arial }
.allMatches .item .result .status span { background: none; color: #1d1d1d !important; line-height: 1; display: block; margin-top: 14px !important; font-size: 16px !important }
.allMatches .item .result span.now { width: 60px; height: 20px; background: #056818; color: #fff !important; text-align: center; font-size: 11px !important; line-height: 1.8; margin: 10px auto 0 !important; border-radius: 0 !important }
.allMatches .matchResult { font-family: Arial; font-size: 30px; line-height: 1.4; margin-top: 0 }
.matchesTabs .more { color: #fff; width: 100%; height: 36px; font-size: 14px; text-align: center; background: #056818; display: inline-block; float: right; padding: 3px 0; line-height: 2.2; transition: background-color 0.4s ease 0s; }
.matchesTabs .more:hover { background-color: #2e8432 }
.matchesTabs .slide .noMatches { font-size: 20px !important; padding-top: 56px !important; width: 100%; color: #1d1d1d !important; line-height: 3.5; }
/******************** 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}
.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}
.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;float:right;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.matchesHp .ttl .matchesTtl .inTtl{float:right;background:#fff;color:#000;width:130px;font-size:13px;text-align:center;padding:0;height:32px;line-height:2.4}
.matchesHp .allMatchesBtn{display:inline-block;float:left;font-size:12px;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;padding:0 20px;height:32px;float:right;position: relative;text-align:center;color:#056818;font-size:12px;line-height:2.6}
.matchesHp .gotoDay.yesterday{margin-left:2px}
.matchesHp .gotoDay.tomorrow{margin-right:2px}
.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: DroidKufiLight, 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}

@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}
    .matchesHp .gotoDay,
    .matchesHp .ttl .matchesTtl .inTtl{padding:0;width:calc((100% - 114px) / 2)}
    .matchesHp .gotoDay{font-size:11px;line-height:3}
    .matchesHp .ttl .matchesTtl .inTtl{font-size:12px;line-height:2.6;width:110px}
    .matchesHp .allMatchesBtn{display:none}
    .matchesHp .allMatchesBtn.mob{display:inline-block;width:100%;margin-top:-12px}
    .matchesHp .matchItem {width: 100%}
    .matchesHp .matchesHpCntnr{height:120px}
    
.cwcSection .matchesHp .matchItem{margin-left:0}
/*.cwcSection .matchesHp .allMatchesBtn.mob{width:112px;}*/

}
.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 only screen and (max-width: 1023px) {
      .allMatches .item .tourName { font-size: 14px }
    .allMatches .matchResult { font-size: 32px }
    .allMatches .item .result .matchResult span { margin: 0 6px }
    .sportsContainer .allMatches .slide { width: 140%; }
    .sportsContainer .allMatches .item { width: calc(100% / 3); min-width: 400px; }
}


@media screen and (min-width:320px) and (max-width:767px) {
     .sportsContainer .allMatches .slide { width: 902px; height: 140px }
    .sportsContainer .allMatches .item { width: 300px; min-width: unset; max-width: unset; padding: 12px }
    .sportsContainer .allMatches .item .teamA { width: 75px; height: 70px }
    .sportsContainer .allMatches .item .teamA img, .sportsContainer .allMatches .item .teamB img { height: 36px; }
    .sportsContainer .allMatches .item .teamA p, .sportsContainer .allMatches .item .teamB p { padding-top: 10px; font-size: 11px }
    .sportsContainer .allMatches .item .result { width: calc(100% - 150px) }
    .sportsContainer .allMatches .item .result.yesterday { padding-top: 12px; }
    .sportsContainer .allMatches .item .teamB { float: right; width: 75px; height: 70px }
    .sportsContainer .allMatches .item .result { font-size: 32px; margin-top: 3px }
    .sportsContainer .allMatches .item .result span { font-size: 16px !important; }
    .sportsContainer .allMatches .item .result span.now { font-size: 14px !important; line-height: 1.6 }
    .sportsContainer .allMatches .item .status a { font-size: 12px }
    .sportsContainer .allMatches .status span { margin-top: 26px }
    .sportsContainer .allMatches .matchResult { font-size: 26px; margin-top: 0 }
}

@media screen and (max-width:767px) and (orientation:portrait) {
    .sportsContainer .allMatches .slide { width: 272% }
    .sportsContainer .allMatches .slide .noMatches { width: calc((100% / 3) + 36px) }

}