/*
* Kablo Web Site
* Yayin Akisi
*/

/* #CONTENT AREA
================================================== */
.breadcrumb { padding-top: 10px; }
.content { padding-top: 20px; }

mark, .mark { background-color: #DEDEDE; color: #2e58a4; padding: 0; }
.marked { background: #ff0; color: #1A1A1A; }
.search-box { position: relative; max-width: 320px; margin: 0 0 15px 0; float: right; clear: both; }
.search-box input { /*border-radius: 3px;*/ background: #FFF; border: 1px solid rgba(1,1,1,0.07); box-shadow: 0px 0px 10px 0px rgba(183,183,183,0.36); height: 44px; padding: 0 10px; outline: none; margin: 0; display: block; width: 100%; font-family: 'pnregular', Helvetica, Arial, sans-serif; line-height: 1; overflow: hidden; }
.sb-btn-cont { position: absolute; top: 12px; right: 7px; }
.search-box button { background: transparent; border: 0; font-size: 16px; color: #BABABA; display: block; float: left; line-height: 1; }
.search-box button.clear-ico { display: none; }
.search-box button.prev-ico { display: none; }
.search-box button.next-ico { display: none; }
.sb-title { display: none; }

.ya-loader { position: absolute; top: 0; bottom: -50px; left: 0; right: 0; background: url('../images/loader.gif') no-repeat center center #FFF; z-index: 99; }
.ya-cont { position: relative; }
/*.ya-cont:before { position: absolute; content: ''; top: 64px; bottom: 0; width: 10px; left: -9px; background-image: linear-gradient(-270deg, #FFFFFF 0%, #F3F3F3 100%); }
.ya-cont:after { position: absolute; content: ''; top: 64px; bottom: 0; width: 10px; right: -10px; background-image: linear-gradient(-90deg, #FFFFFF 0%, #F3F3F3 100%); }*/

.ya-baslik { height: 64px; /*border-radius: 12px;*/ background: #263171; /*border-bottom-left-radius: 0; border-bottom-right-radius: 0;*/ color: #FFF; line-height: 68px; overflow: hidden; padding: 0 20px; font-family: 'pnsemibold', serif; position: relative; }
.ya-baslik p { display: block; font-size: 18px; margin: 0; padding: 0; line-height: 68px; }
.ya-baslik a, .ya-baslik a:visited { display: none; }

.ya-v-btn { width: 101px; height: 50px; position: absolute; background: #FFF; border: 1px solid #E1E1E1; transition: .3s all ease; cursor: pointer; text-align: center; }
.ya-v-btn img { -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; margin: 19px auto; }
.ya-yukari { top: 64px; }
.ya-asagi { bottom: -49px; }
.ya-h-btn { position: absolute; z-index: 99; top: 64px; width: 50px; height: 50px; transition: .3s all ease; cursor: pointer; text-align: center; display: none; }
.ya-h-btn img { -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; margin: 16px auto; }
.ya-sol { left: 130px; }
.ya-sag { right: 10px; }
#viewport { position: relative; overflow: hidden; height: 450px; max-height: 450px; width: 100%; border: 1px solid #E1E1E1; }
.kanal { width: 100px; position: absolute; padding: 0; top: 50px; }
.kanal-inner { position: relative; height: 400px; width: 100%; }
.kanal-info { height: 40px; line-height: 40px; text-align: center; font-family: 'pnsemibold', Helvetica, Arial, sans-serif; font-size: 15px; color: #2e58a4; border-bottom: 1px solid #E1E1E1; border-right: 1px solid #E1E1E1; white-space: nowrap; overflow: hidden; padding-left: 5px; }
.kanal-info:last-child { border-bottom: 0; }
.programlar { margin-left: 100px; position: relative; overflow-x: scroll; }
.programlar-inner { position: relative; width: 5760px; margin-top: 50px; }
.program-info { height: 40px; border-bottom: 1px solid #E1E1E1; }
.program-info:last-child { border-bottom: 0; }
.program-info .new { float: left; max-height: 40px; height: 40px; margin: 0; padding: 0; width: auto; font-size: 13px; line-height: 1.25em; clear: none; white-space: nowrap; transition: .2s all ease; position: relative; letter-spacing: 0 !important; }
.program-info .new div { padding: 5px 12px 0 10px; background: #FFF; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; height: 40px; position: relative; overflow: hidden; }
.program-info .new:last-child div { border-right: 0; }
.program-info div span { color: #2e58a4; display: block; font-family: 'pnregular', Helvetica, Arial, sans-serif; }
.time-bar { height: 50px; width: 5760px; position: absolute; top: 0; background-image: linear-gradient(-180deg, #F9FBFA 0%, #E9E9E9 100%); z-index: 9; }
.time-bar ul { margin: 0; padding: 0; height: 50px; width: 100%; }
.time-bar ul li { position: relative; float: left; width: 120px; height: 50px; font-size: 15px; text-align: left; display: block; margin: 0; padding: 0; line-height: 50px; font-family: 'pnsemibold', Helvetica, Arial, sans-serif; color: #404040; }
.saat-kac { position: absolute; height: 100%; left: 0; border-right: 1px solid #3F487F; background-color: rgba(59,86,218,.08); z-index: 5; pointer-events: none; }

@media screen and (min-width: 478px) {
  .search-box { max-width: 340px; }
  .sb-title { display: block; line-height: 46px; margin-right: 20px; float: right; }
  .search-box input { width: 200px; display: block; float: right; }
  .ya-baslik p { display: inline-block; font-size: 19px; }
  .ya-baslik a, .ya-baslik a:visited { display: inline-block; color: #ABB4D3; font-size: 15px; margin-left: 15px; transition: .3s all ease; }
  .ya-baslik a span { display: none; }
  .ya-baslik a.ya-active { color: #FFF; }
  .ya-baslik a:hover, .ya-baslik a:focus { color: #FFF; text-decoration: none; }
  .ya-v-btn { width: 121px; }
  .ya-h-btn { display: block; }
  .ya-sol { left: 130px; }
  .kanal { width: 120px; }
  .kanal-info { font-size: 15px; }
  .programlar { margin-left: 120px; }
  .program-info .new { font-size: 13px; }
}

@media screen and (min-width: 768px) {
  .search-box { margin-top: -53px; }
  .ya-baslik a, .ya-baslik a:visited { font-size: 16px; margin-left: 30px; }
  .ya-baslik a span { display: inline; }
  .ya-v-btn { width: 161px; }
  .ya-sol { left: 170px; }
  .kanal { width: 160px; }
  .kanal-info { font-size: 16px; }
  .programlar { margin-left: 160px; }
  .program-info .new { font-size: 13px; }
}

@media screen and (min-width: 992px) {
  .ya-baslik a, .ya-baslik a:visited { font-size: 17px; margin-left: 40px; }
  .ya-v-btn { width: 181px; }
  .ya-sol { left: 190px; }
  .kanal { width: 180px;  }
  .kanal-info { font-size: 17px; }
  .programlar { margin-left: 180px; }
  .program-info .new { font-size: 13px;  }
}

@media screen and (min-width: 1200px) {
  .ya-baslik a, .ya-baslik a:visited { margin-left: 50px; }
  .kanal-info { font-size: 16px; }
}