﻿
/********** Sticky Series **********/
.stickySeries { width: 800px; height: 100px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 9999; visibility: visible; opacity: 1; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; background: #282956; text-align: center; overflow: hidden; transition: all 0.3s ease-in 0s; }
.stickySeries .cnts { width: 100%; display: inline-block; height: 100%; position: relative; position:absolute;left:50%;top:50%;transform:translate(-50% , -50%) }
.stickySeries .slider { opacity: 0; float: right; position: absolute; right: 0;width:100%}
.stickySeries .currentTime.show { opacity: 1 }
.stickySeries .nextTime.show { opacity: 1 }
.stickySeries .bx-wrapper { z-index: 1 }
.stickySeries .currentSeriesSlider { display: inline-block; width: 100%!important; float: right; }
.stickySeries .nextSeriesSlider { display: inline-block; width: auto; float: right; }
.stickySeries li { display: inline-block; width: 100%!important; height: 100px; float: right !important; overflow: hidden }
.stickySeries .seriesImg { display: inline-block; float: right; width: 178px; height: 100px; overflow: hidden; position: relative; z-index: 1 }
.stickySeries .seriesImg img { position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; max-width: unset; }
.stickySeries .seriesImg .now { position: absolute; right: -40px; top: -26px; width: 90px; height: 70px; text-align: center; line-height: 106px; background: #F8AB25; font-family: DroidKufiBold,Arial; color: #fff; font-size: 16px; z-index: 1; transform: rotate(45deg); box-shadow: 0px 0px 4px rgba(0,0,0,0.4) }
.stickySeries .seriesData { float: right; display: inline-block; width: calc(100% - 360px); padding-right: 20px }
.stickySeries p { cursor: auto }
.stickySeries .seriesData .time { display: inline-block; float: right; color: #fff; font-size: 14px; text-align: right; direction: rtl; line-height: 30px }
.stickySeries .seriesData .icon-time:before { content: "e"; float: right; display: inline-block; margin-left: 6px; color: #fff; font-size: 15px; line-height: 30px }
.stickySeries .seriesData .time span { display: inline-block; float: right; margin: 0 4px; font-size: 16px }
.stickySeries .seriesData .time span:first-child { margin-right: 0 }
.stickySeries .seriesData .time span.repeat { color: #bebebe; font-size: 13px; font-weight: normal; line-height: 32px }
.stickySeries .allTickerBtn { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100% }
.stickySeries .seriesName { width: 100%; color: #F8AB25; font-size: 20px; font-family: DroidKufiBold, Arial; line-height: 1.4; margin: 6px 0; float: right; display: inline-block; position: relative; z-index: 1 }
.stickySeries .seriesData .show { display: inline-block; float: right; color: #fff; font-size: 14px; text-align: right; direction: rtl; line-height: 30px }
.stickySeries .seriesData .icon-tv:before { content: "\5c"; float: right; display: inline-block; margin-left: 6px; color: #fff; font-size: 18px; line-height: 30px;}
.stickySeries .seriesData .show span { display: inline-block; float: right; color: #fff; font-size: 16px }
.stickySeries .seriesData .show span.hasry { display: inline-block; float: right; margin: 5px 6px 0 0; width: 50px; height: 18px; text-align: center;  font-size: 12px; color: #fff; background: #E03322; line-height: 1.3; font-weight: normal }
.stickySeries .Serieschannel { display: inline-block; float: right; height: 100%; position: relative; margin-left: 45px; }
.stickySeries .Serieschannel { height: 40px; width: auto; margin: 5px 0; position: relative; display: inline-block; float: right; margin-left: 45px; max-width: 60px }
.stickySeries .Serieschannel img { position: relative; width: auto; height: 40px; }
.stickySeries .info { position: absolute; right: 0; top: -36px; width: 90px; height: 26px; text-align: center;  font-size: 13px; color: #fff; background: #E03322; line-height: 1.8 }
.stickySeries .seriesBtn { display: inline-block; float: right;text-align:center; width: 100px; height: 30px;  font-size: 13px; color: #fff; line-height: 2.3; position: absolute; left: 50px; bottom: 12px; z-index: 2; background: linear-gradient(270deg,#7374ad,#56578e); background: -webkit-linear-gradient(270deg,#7374ad,#56578e); background: -o-linear-gradient(270deg,#7374ad,#56578e); background: -moz-linear-gradient(270deg,#7374ad,#56578e); background: -ms-linear-gradient(270deg,#7374ad,#56578e); }
.stickySeries .closeSeries { position: absolute; width: 30px; height: 30px; top: 0; left: 0; z-index: 1; display: inline-block }
.stickySeries .closeSeries:before { content: "O"; color: #7f81bd; font-size: 20px; line-height: 30px; width: 100%; }
.stickySeries .hasry { position: relative; display: inline-block; float: right; text-align: center; margin-top: 10px; width: 60px; height: 30px; color: #fff; background-color: red;  font-size: 15px; margin-left: 25px }
.stickySeries .repetition { position: relative; display: inline-block; float: right; color: #fff;  font-size: 15px; line-height: 3.2 }
.stickySeries .repetition.mob, .stickySeries .hasry.mob { display: none }
.stickySeries .bx-controls, .stickySeries .bx-wrapper .bx-pager { display: none }
.stickySeries .nextMob { display: none }

.stickySeries .tickerSponser{display: inline-block;position: absolute;bottom: 0;left: 0;background-color: #fff;width: 60px;height: 30px;text-align:center}
.stickySeries .tickerSponser img{width:52px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}


.seriesLogo{display:inline-block;position:absolute;bottom:8px;left:8px}
.logoBy{display:inline-block;width:100%;float:right;font-size:12px;color:#fff}
.seriesLogo img{display:inline-block;float:right;margin-top:8px;width:85px;height:auto}
.removeStickySeries .stickySeries { visibility: hidden; opacity: 0 }

@media only screen and (max-width: 1023px) {

    .stickySeries{ width: 100% }
        .stickySeries { width: 100%; text-align: right; }
 .hideSeriesTicker .stickySeries{bottom:-90px}
    }

@media screen and (min-width:320px) and (max-width:767px) {
     .stickySeries { height: 90px }
    .stickySeries li { height: 90px }
    .seriesLogo{left:-20px}
    .seriesLogo img{width:70px}
    .stickySeries .seriesImg { width: 100px; height: 90px }
    .stickySeries .seriesImg img { width: auto; height: 100% }
    .stickySeries .seriesData { width: calc(100% - 100px); padding-right: 10px; }
    .stickySeries .seriesData .time { float: right; font-size: 12px; line-height: 20px; width: 100% }
    .stickySeries .seriesData .icon-time:before { line-height: 20px; font-size: 12px }
    .stickySeries .seriesData .time span { margin: 0 3px; font-size: 12px; }
    .stickySeries .seriesName { font-size: 15px; margin: 10px 0; }
    .stickySeries .seriesData .time span.repeat { font-size: 11px; line-height: 22px }
    .stickySeries .seriesData .show { font-size: 12px; line-height: 20px; width: 100%; margin-bottom: 2px }
    .stickySeries .seriesData .show span { font-size: 13px; }
    .stickySeries .seriesData .icon-tv:before { font-size: 14px; line-height: 20px }
    .stickySeries .seriesData .show span.repeat { font-size: 12px }
    .stickySeries .seriesData .show span.hasry { font-size: 11px; height: 16px; width: 40px; margin: 2px 6px 0 0; }
    .stickySeries .seriesBtn { display: none }
    .stickySeries .closeSeries { background-color: transparent; width: 20px; height: 20px; left: 6px; top: 6px }
    .stickySeries .closeSeries:before { font-size: 16px; line-height: 20px }

     .showOTP .stickySeries { display: none !important }
    .hideOTP .stickySeries { display: block !important }

     .showOTPBB .stickySeries { display: none !important }
    .hideOTPBB .stickySeries { display: block !important }
}