/******************** Matches HP Clip ********************/
.matchesHp { display: inline-block; width: 100%; float: right; margin-bottom: 10px;position:relative;z-index:1 ;}
.matchesHp .matchesHpCntnr { display: inline-block; width: 100%; float: right; padding: 0 28px; height: 110px; overflow: hidden; margin: 6px 0 0; border-radius: 6px; }
.matchesHp .matchesHpCntnr .matchesSlider { display: inline-block; width: 100%; height: 100px; float: right; background: #fff }
.matchesHp .matchesSliderLi { display: inline-block; float: right; width: calc(100% / 5); height: 100px; background: #fff; border-left: 2px solid #f2f2f2; padding: 6px 12px; margin-bottom: 10px; 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 .matchesSliderLi:first-of-type { border-right: 2px solid #f2f2f2 }
.matchesHp .matchesSliderLi:hover { background: #fafafa }
.matchesHp .matchesSliderLi .tourName { font-size: 11px;   color: #000; text-align: center; width: 100%; display: inline-block; line-height: 1.4; float: right; margin-bottom: 4px; }
.matchesHp .matchesSliderLi .teamA, .matchesHp .matchesSliderLi .teamB { float: right; width: calc((100% - 66px) / 2); height: 64px; text-align: center }
.matchesHp .matchesSliderLi .teamA { padding-left: 12px }
.matchesHp .matchesSliderLi .teamB { padding-right: 12px }
.matchesHp .matchesSliderLi .teamA img, .matchesHp .matchesSliderLi .teamB img { height: 26px; width: auto; border: none; display: inline-block }
.matchesHp .matchesSliderLi .teamA p, .matchesHp .matchesSliderLi .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 .matchesSliderLi .resultDiv { float: right; width: 66px; margin-top: 6px; }
.matchesHp .matchesSliderLi .resultDiv .result { color: #000; font-size: 16px; font-family: ykLight,arial; font-weight: bold; display: inline-block; }
.matchesHp .matchesSliderLi .resultDiv .result:first-of-type { float: right }
.matchesHp .matchesSliderLi .resultDiv .result:last-of-type { float: left }
.matchesHp .matchesSliderLi .resultDiv .matchStatus { display: inline-block; width: 100%; }
.matchesHp .matchesSliderLi .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 .matchesSliderLi .penaltyRes { bottom: 3px }
.matchesHp .matchesSliderLi .penaltyRes span { font-size: 12px }
.euroInner .matchesHp .matchesSliderLi .resultDiv .matchStatus .status {
    border-radius: 4px;
    background-color: transparent;
    position: relative;
}
/** Soon **/
.matchesHp .matchesSliderLi.soon .resultDiv .matchStatus .status { border: 1px solid #45B3EB; color: #45B3EB }
.matchesHp .matchesSliderLi.soon .resultDiv .matchStatus .status:before { content: "لم تبدأ"; }
/** Live **/
.matchesHp .matchesSliderLi.live .resultDiv .matchStatus .status { border: 1px solid #277635; color: #277635 }
.matchesHp .matchesSliderLi.live .resultDiv .matchStatus .status:before { content: "مباشر"; }
/** Done **/
.matchesHp .matchesSliderLi.done .resultDiv .matchStatus .status { border: 1px solid #464646; color: #464646 }
.matchesHp .matchesSliderLi.done .resultDiv .matchStatus .status:before { content: "إنتهت"; }
.matchesHp .matchesSliderLi .resultDiv .matchStatus .time { width: 100%; display: inline-block; color: #6F6F6F; font-family: ykLight,arial; font-size: 13px; text-align: center ;float:right}
/** Postponed **/
.matchesHp .matchesSliderLi.postponed .resultDiv .matchStatus .status { border:1px solid #ff832b;color:#ff832b }
.matchesHp .matchesSliderLi.postponed .resultDiv .matchStatus .status:before { content: "مؤجل"; }
.matchesHp .matchesSliderLi.postponed .resultDiv .matchStatus .time { display: none }
.matchesHp .matchesSliderLi.postponed .resultDiv .matchTime { display: none }
.matchesHp .matchesSliderLi.postponed .resultDiv .moreDtls { display: none }
/** Live **/
.matchesHp .matchesSliderLi.cancel .resultDiv .matchStatus .status { border: 1px solid #ff1a3b; color: #ff1a3b }
.matchesHp .matchesSliderLi.cancel .resultDiv .matchStatus .status:before { content: "ملغاه"; }


.matchesHp .ttl { border: none; padding-right: 0; background: none; height: 32px; position: relative; margin-bottom: 0 }
.matchesHp .ttl .matchesTtl { display: inline-block; float: right; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) }
.matchesHp .ttl .matchesTtl h4 { background: #fff; color: #000; width: 130px; font-size: 13px; text-align: center; padding: 0; height: 32px; line-height: 2.4; border-radius: 4px }
.matchesHp .allMatchesBtn { display: inline-block; float: left;   font-size: 12px; background: #0277bd; color: #fff; padding: 4px 10px; border-radius: 4px }
.matchesHp .allMatchesBtn:hover { background: #01649e }
.matchesHp .allMatchesBtn .icon-arrow:before { content: "j"; 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: #0277bd;   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: #0277bd }
.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: #0277bd; color: #fff; overflow: hidden; text-align: center; border-radius: 0; border: none; margin-top: 0; opacity: 1; z-index: 1 }
.matchesHp .flickity-button:hover { background: #01649e }
.matchesHp .flickity-button.previous { right: -28px; left: auto; border: 0 !important }
.matchesHp .flickity-button.previous:before { color: #fff !important; content: "i"; 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: "j"; font-size: 26px; line-height: 4; color: inherit }
.matchesHp .flickity-button:disabled { opacity: 1; background: #c2d9e7; color: #f5f5f5; border: 0 !important }
.imageCntnr { overflow: hidden }
.matchesHp .noStatsDiv:hover { background: transparent }
.matchesHp .matchesSliderLi .noStats { display: inline-block; width: 100%; float: right; position: relative; height: 88px }
.matchesHp .matchesSliderLi .noStats p { position: absolute; top: 50%; transform: translateY(-50%);   font-size: 14px; 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-size: 10px; text-align: center; background: #000; }
.matchesHp .resultPredBtn .resultDiv .matchStatus .status { background: transparent !important; color: transparent }
.matchesHp .flickity-viewport { overflow: visible }
.matchesCenter img.lazy:after{animation:lazyPosition 0s ease-in-out infinite}

.euroInner section{overflow: hidden;border-radius:6px}
.euroInner .matchesHp {
    border-radius: 0;margin-bottom: 0;}
/*************** Match Items ***************/
.matchResult { position: relative; width: 100%; display: inline-block; float: right }
.penaltyRes { display: inline-block; float: right; position: absolute; bottom: -12px; width: 100%; left: 0 }
.penaltyRes span { font-family: arial; font-size: 16px; color: #888; text-align: center; display: inline-block; float: right; width: 100% }

@media screen and (min-width:1680px) and (max-width:1919px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 4) }
}
@media screen and (min-width:1600px) and (max-width:1679px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 4) }
}
@media screen and (min-width:1536px) and (max-width:1599px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 4) }
}
@media screen and (min-width:1440px) and (max-width:1535px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 4) }
}
@media screen and (min-width:1360px) and (max-width:1439px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 3) }
}
@media screen and (min-width:1280px) and (max-width:1359px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 3) }
}
@media screen and (min-width:1152px) and (max-width:1279px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 3) }
}
@media screen and (min-width:1024px) and (max-width:1151px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 2) }
}
@media only screen and (max-width: 1023px) {
    .matchesHp .matchesSliderLi { width: calc(100% / 3) }
}
@media screen and (min-width: 320px) and (max-width: 767px) {

    .matchesHp .ttl .matchesTtl { left: 0; right: 0; width: 100%; transform: none; position: relative }
    .matchesHp .gotoDay,
    .matchesHp .ttl .matchesTtl h4 { padding: 0; width: calc(100% / 4) }
    .matchesHp .gotoDay { font-size: 11px; line-height: 3 ;background: #fff;color: #000;margin:0!important;border-left: 1px solid #F2F2F2;}
    .matchesHp .gotoDay:first-child{border-radius:0 6px 0 0}
    .matchesHp .gotoDay:last-child{border-radius:6px 0 0 0;border-left:0;font-size:10px}

    .matchesHp .gotoDay.today{pointer-events:none;color:#0277BD}
    .matchesHp .ttl .matchesTtl h4 { font-size: 12px; line-height: 2.6; width: 110px;color:#0277BD }
    .matchesHp .allMatchesBtn.gotoDay { background:#0277BD;color:#fff}
    .matchesHp .matchesSliderLi { width: 100% }
    .matchesHp .matchesHpCntnr { height: 100px;    margin: 1px 0 0;border-radius:0 }
        .euroInner .matchesHp{margin-bottom:10px}
        .matchesHp .flickity-button.previous{border-radius:0 0 6px 0}
                .matchesHp .flickity-button.next{border-radius:0 0 0 6px}
.matchesHp .allMatchesBtn .icon-arrow{display:none}
}

@media screen and (min-width: 320px) and (max-width: 360px) {
    .matchesHp .gotoDay { font-size: 10px; }
}
.proPlayer.LatestNews .matchesHp .ttl{display:inline-block}
.proPlayer.LatestNews .matchesHp .ttl:after{display:none}