﻿
/* tabs CSS */
.tabs-nav { list-style: none; margin: 0; font-family: DroidKufiLight,arial; 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 }

/** Dropdown List **/
.dropDownDiv { display: inline-block; width: 100%; margin-bottom: 40px; padding: 24px; background: #e8e8e8 }
.wrapperDropdown { position: relative; width: 100%; background: #fff; cursor: pointer; padding: 12px; border: 1px solid #e8e8e8; z-index: 1; text-align: right; direction: rtl; font-family: DroidKufiLight, Arial; font-size: 14px; color: #aaa; outline: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.wrapperDropdown:after { content: ""; width: 0; height: 0; position: absolute; top: 50%; left: 12px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #aaa transparent; }
.wrapperDropdown .dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0 0 5px 5px; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; max-height: 0; overflow: hidden; }
.wrapperDropdown .dropdown li { padding: 0 10px; }
.wrapperDropdown .dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; }
.wrapperDropdown .dropdown li:last-of-type a { border: none; }
.wrapperDropdown .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; }
.wrapperDropdown .dropdown li:hover a { color: #E03322; }
.wrapperDropdown.active { border-radius: 5px 5px 0 0; background: #aaa; box-shadow: none; border-bottom: none; color: white; }
.wrapperDropdown.active:after { border-color: #ccc transparent; }
.wrapperDropdown.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 400px; }

/********** 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-family: DroidKufiLight,arial; 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-family: DroidKufiLight, Arial; 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; font-family: DroidKufiLight,arial; color: #1d1d1d; padding-bottom: 5px; float: right; margin-bottom: 24px; cursor: auto; text-align: center; width: 100%; display: inline-block; border-bottom: 1px solid #43a047 }
.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-family: DroidKufiLight, Arial; 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: #aaaaaa; 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: #43a047; color: #fff !important; text-align: center; font-family: DroidKufiLight,arial; 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: #43a047; display: inline-block; float: right; font-family: DroidKufiLight,arial; 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 Schedule Page **********/
.matchesSchedule .schedule { width: calc(100% - 320px); margin-left: 20px; padding: 0; background: none; box-shadow: none; margin-bottom: 0 }
.matchesSchedule .schedule .cd-gallery li { display: inline-block; }
.matchesSchedule .allMatches .icon-downArrow:before { content: "q"; position: absolute; left: 12px; line-height: 2.2; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) }
.matchesSchedule .allMatches .wrapperDropdown:after { display: none }
.matchesSchedule .allMatches .wrapperDropdown .dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; max-height: 0; overflow: hidden; }
.matchesSchedule .allMatches .wrapperDropdown .dropdown li { padding: 0 10px; }
.matchesSchedule .allMatches .wrapperDropdown .dropdown li a { display: block; text-decoration: none; color: #b0b0b0; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; }
.matchesSchedule .allMatches .wrapperDropdown .dropdown li:last-of-type a { border: none; }
.matchesSchedule .allMatches .wrapperDropdown .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; }
.matchesSchedule .allMatches .wrapperDropdown .dropdown li:hover a { color: #1d1d1d; }
.matchesSchedule .allMatches .wrapperDropdown.active { border-radius: 0; background: #eee; box-shadow: none; border-bottom: none; color: #1d1d1d }
.matchesSchedule .allMatches .wrapperDropdown.active:after { border-color: #aaa transparent; }
.matchesSchedule .allMatches .wrapperDropdown.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 400px; overflow: auto; }
.matchesSchedule .table { background: none; padding: 0 }
.matchesSchedule .ttl h1 { background: #43a047 }
.matchesSchedule .table .allMatches { display: inline-block; width: 100%; margin: 24px 0 0 }
.matchesSchedule .table .allMatches .tabs-nav { position: static; top: 0; left: 0; background-color: #ffffff; border: 1px solid #e8e8e8; margin-bottom: 0 }
.matchesSchedule .table .allMatches .tabs-nav li { display: inline-block; width: calc(100% / 5); height: 50px; margin-left: 0; border-left: 1px solid #e8e8e8 }
.matchesSchedule .table .allMatches .tabs-nav li:last-of-type { border-left: none }
.matchesSchedule .table .allMatches .tabs-nav li > a { display: inline-block; height: 50px; width: 100%; line-height: 50px; font-family: DroidKufiLight, arial; font-size: 14px; color: #1d1d1d; background: none; }
.matchesSchedule .table .allMatches .tabs-nav li .icon-date:before { content: "c"; font-size: 22px; line-height: 2.5 }
.matchesSchedule .table .allMatches .tabs-nav li.tabs-selected > a { background: #e8e8e8; color: #1d1d1d; /*box-shadow: inset 0 -2px 0 #1d1d1d*/; border: none }
.matchesSchedule .table .allMatches .tabs-nav li > a:hover { color: #1d1d1d }
.matchesSchedule .table .allMatches .tabs-nav li a.date { position: relative }
.matchesSchedule .table .allMatches .tabs-nav li a.date .calendarDiv { position: absolute }
.matchesSchedule .allMatches .dropDownDiv { margin-bottom: 0; padding: 20px }
.matchesSchedule .allMatches #matchesTableTabs #divcontainer { padding: 0 20px 20px; background: #e8e8e8 }
.matchesSchedule .allMatches h2 { display: inline-block; width: 100%; font-family: DroidKufiLight, Arial; color: #1d1d1d; font-size: 18px; text-align: right; direction: rtl; margin-bottom: 24px }
.matchesSchedule .allMatches h2 span { color: #b0b0b0; margin-right: 5px }
/** Datepicker **/
.matchesSchedule .showCal .ui-datepicker { position: absolute; z-index: 2; max-height: 0; opacity: 0; visibility: hidden; 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; }
.matchesSchedule .showCal.show .ui-datepicker { max-height: 250px; opacity: 1; visibility: visible }
.matchesSchedule .table .allMatches .slide { height: auto; background: none; border: none; }
.matchesSchedule .table .allMatches .item { width: 100%; padding: 0; display: inline-block; margin-bottom: 24px }
.matchesSchedule .table .allMatches .item:last-child { margin-bottom: 0 }
.matchesSchedule .table .allMatches .item .tourName { padding-bottom: 0; height: 46px; text-align: right; border-bottom: none; background: #474747; padding-right: 12px; margin-bottom: 0; color: #fff; line-height: 46px; font-size: 15px; }
.matchesSchedule .table .allMatches .item .match { display: inline-block; width: 100%; margin-bottom: 2px; background: #fff; height: 70px; overflow: hidden; padding: 12px; float: right; }
.matchesSchedule .table .allMatches .item .match:last-child { margin-bottom: 0 }
.matchesSchedule .table .allMatches .item .time { float: right; width: 50px; font-family: Arial; font-size: 18px; color: #1d1d1d; line-height: 2.8; text-align: center; margin-left: 10px }
.matchesSchedule .table .allMatches .item .time span { margin-top: 15px; }
.matchesSchedule .table .allMatches .item .time span.now { display: inline-block; float: right; width: 50px; height: 26px; background: #43a047; color: #fff !important; text-align: center; padding: 0 6px; font-family: DroidKufiLight,arial; font-size: 12px !important; line-height: 26px; margin: 10px auto 0 !important; border-radius: 0 !important; }
.matchesSchedule .table .allMatches .item .teamA, .matchesSchedule .table .allMatches .item .teamB { float: right; width: calc((100% - 290px) / 2); height: 46px; }
.matchesSchedule .table .allMatches .item .teamA img { float: left; margin-right: 12px; height: 46px; width: auto }
.matchesSchedule .table .allMatches .item .teamB img { float: right; margin-left: 12px; height: 46px; width: auto }
.matchesSchedule .table .allMatches .item .teamA p,
.matchesSchedule .table .allMatches .item .teamB p { display: inline-block; width: calc(100% - 58px); }
.matchesSchedule .table .allMatches .item .teamA p { float: left; padding-top: 0; text-align: left; line-height: 46px; }
.matchesSchedule .table .allMatches .item .teamB p { float: right; padding-top: 0; text-align: right; line-height: 46px; }
.matchesSchedule .table .allMatches .item .result { width: 120px }
.matchesSchedule .table .allMatches .matchResult { margin-top: 2px }
.matchesSchedule .table .allMatches .item .channel { float: right; width: 110px; font-family: DroidKufiLight, arial; font-size: 14px; color: #1d1d1d; line-height: 3.3; direction: rtl; text-align: center }
.matchesSchedule .listing { width: 100%; margin-bottom: 0 }
.matchesSchedule .filterMainContent h3 { display: none }


@media screen and (min-width:1360px) and (max-width:1439px) {
    .matchesTabs .allMatches .matchResult { font-size: 29px }
}

@media screen and (min-width:1024px) and (max-width:1279px) {
      .matchesSchedule .table .allMatches .tabs-nav li a { padding: 0 30px }
    .matchesSchedule .table .allMatches .item .time { line-height: 5; font-size: 16px }
    .matchesSchedule .table .allMatches .item .time span { margin-top: 28px; }
    .matchesSchedule .table .allMatches .item .time span.now { margin: 22px auto 0 !important; }
    .matchesSchedule .table .allMatches .item .teamA, .matchesSchedule .table .allMatches .item .teamB { text-align: center; width: calc((100% - 220px) / 2); height: auto }
    .matchesSchedule .table .allMatches .item .teamA img { float: none; margin-right: 0 }
    .matchesSchedule .table .allMatches .item .teamB img { float: none; margin-left: 0 }
    .matchesSchedule .table .allMatches .item .teamA p, .matchesSchedule .table .allMatches .item .teamB p { float: none; text-align: center; line-height: 1.6; margin-top: 5px; width: 100%; }
    .matchesSchedule .table .allMatches .item .match { height: auto }
    .matchesSchedule .table .allMatches .item .result { width: 100px; margin-top: 20px }
    .matchesSchedule .table .allMatches .item .result .matchResult { margin-top: 0 }
    .matchesSchedule .table .allMatches .item .channel { font-size: 12px; line-height: 1.8; width: 70px; margin-top: 18px; }

}

@media only screen and (max-width: 1023px) {
    .sportsPadding .matchesTabs { padding-top: 10px }
    .matchesSchedule .schedule { width: 100%; margin-left: 0 }
}

@media screen and (min-width:320px) and (max-width:767px) {
     .allMatches .tabs-nav li > a { font-size: 13px }
    .allMatches .item .tourName { margin-bottom: 16px; font-size: 13px }
    .matchesTabs .more { font-size: 13px; line-height: 2.4 }
     .matchesTabs { width: calc(100% - 20px); margin: 0 10px 40px }
    .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 }

    .matchesSchedule .table .allMatches { margin: 16px 0 0 }
    .matchesSchedule .allMatches h2 { font-size: 16px; margin-bottom: 16px }
    .matchesSchedule .allMatches .dropDownDiv { padding: 12px }
    .wrapperDropdown { padding: 8px 12px; font-size: 13px }
    .matchesSchedule .table .allMatches .tabs-nav li > a { padding: 0 10px; font-size: 12px; }
    .matchesSchedule .table .allMatches .tabs-nav li a.date { padding: 0 10px }
    .matchesSchedule .table .allMatches .item .time { line-height: 1; width: 100%; margin-left: 0; font-size: 15px; font-weight: bold; text-align: center; position: relative; display: inline-block; margin-bottom: 10px }
    .matchesSchedule .table .allMatches .item .time span.now { font-size: 11px !important; line-height: 24px; height: 24px; display: inline-block; margin: 0 calc((100% - 50px) / 2) !important; font-weight: normal }
    .matchesSchedule .table .allMatches .item .teamA, .matchesSchedule .table .allMatches .item .teamB { text-align: center; width: calc((100% - 60px) / 2); height: auto }
    .matchesSchedule .table .allMatches .item .teamA img { float: none; margin-right: 0 }
    .matchesSchedule .table .allMatches .item .teamB img { float: none; margin-left: 0 }
    .matchesSchedule .table .allMatches .item .teamA p, .matchesSchedule .table .allMatches .item .teamB p { float: none; text-align: center; line-height: 1.6; margin-top: 5px; height: auto; overflow: hidden; width: 100% }
    .matchesSchedule .table .allMatches .item .match { height: auto }
    .matchesSchedule .table .allMatches .item .result { width: 60px; margin-top: 20px }
    .matchesSchedule .table .allMatches .item .result .matchResult { margin-top: 0; font-size: 26px }
    .matchesSchedule .table .allMatches .item .channel { display: none }
    .matchesSchedule .allMatches .item { width: 100% }
    .matchesSchedule .allMatches .item .tourName { margin-bottom: 24px }
    .matchesSchedule .allMatches .item .teamA { width: 80px; height: 70px }
    .matchesSchedule .table .allMatches .item .teamA img, .matchesSchedule .table .allMatches .item .teamB img { height: 30px; }
    .matchesSchedule .allMatches .item .teamA img, .matchesSchedule .allMatches .item .teamB img { height: 30px; }
    .matchesSchedule .allMatches .item .teamA p, .matchesSchedule .allMatches .item .teamB p { padding-top: 10px; font-size: 12px }
    .matchesSchedule .allMatches .item .result { width: calc(100% - 160px) }
    .matchesSchedule .allMatches .item .result.yesterday { padding-top: 12px; }
    .matchesSchedule .allMatches .item .teamB { float: right; width: 80px; height: 70px }
    .matchesSchedule .allMatches .item .result { font-size: 32px }
    .matchesSchedule .allMatches .item .result span { font-size: 14px !important; margin: 0 }
    .matchesSchedule .allMatches .item .status a { font-size: 12px }
    .matchesSchedule .allMatches .status span { margin-top: 26px }
    .matchesSchedule .allMatches .matchResult { font-size: 32px; margin-top: 0 }
    .matchesSchedule .listing { padding: 24px 10px }
    .matchesSchedule.sports { padding: 16px 0 0 }
    .matchesSchedule .allMatches #matchesTableTabs #divcontainer { padding: 0 10px 10px }
    .matchesSchedule .table .allMatches .item .tourName { font-size: 14px }
}


@media screen and (max-width:767px) and (orientation:portrait) {
     .table .allMatches .tabs-nav li > a { padding: 0 16px; }
}
