/**
* All of the common css rules for the entire template.
*/

* {
    box-sizing: Border-box
    }

html, body {
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}

body {
    position : absolute;
    padding  : 0;
    margin   : 0;
    font-size: $font-base-size;
    font-family : $font-family-light;
    background: $color-app-base-bg $img-app-background no-repeat left top;
    background-size : 100% 100%;
}

div {
  @include box-sizing(border-box);
}

//
//Application Styles
//
.app-main-container {
    position : relative;
    width    : inherit;
    height   : inherit;
    overflow : hidden;
}

.app-top-bar {
    position : absolute;
    width    : 100%;
    height   : 240px;
    background-color : $color-app-header-bg;
}

.app-logo {
    position : absolute;
    bottom   : -7px;
    right    : 150px;
}

//
// Left Nav Styles
//
.leftnav-main-container {
    position : absolute;
    top    : 0;
    left   : 0;
    height : 100%;
    width  : 44%;
    margin : 0;
}

.leftnav-menu-list {
    position : absolute;
    width    : 100%;
    height   : 100%;
    padding  : 0px;
    overflow : hidden;
    background-color : $color-menu-base-bg;
}

.leftnav-menulist-expanded {
    @extend .leftnav-menu-list;
    height : 100%;
    top    : 0;
    z-index: 100;
}

.leftnav-menulist-collapsed {
    @extend .leftnav-menu-list;
    top    : $pos-top-leftnav-content;
    height : $size-leftnav-collapsed-height;
    z-index: 10;
}

.leftnav-collapsed-highlight {
    @include box-shadow(0px 10px 18px 3px rgba(0,0,0,0.44));
    border: solid;
    border-width: 1px;
    border-color: $color-app-dialog-head-border;
}

.leftnav-menulist-collapsed .leftnav-menu-scrolling-list {
    margin-top : -$pos-top-leftnav-content;
}

.leftnav-menu-scrolling-list {
    color : $color-menu-item-text;
}

.leftnav-list-item-static.leftnav-list-item-chosen.subcat-header {
    position: absolute;
    top: 148px;
    width: 40%;
    background: none;
    border: none;
}

.leftnav-list-item-static {
    word-wrap    : break-word;
    line-height  : $size-leftnav-line-height;
    font-weight: lighter;
    font-size: 1.7em;
    min-height : 90px;
    padding      : 0 50px 0 $pos-left-content-position;
    overflow     : hidden;
    margin-bottom    : 2px;
    background-color : $color-menu-item-bg;
    @include transition-property(opacity);
    @include transition-duration($ani-duration-leftnav-item);
    @include display-box;
    @include box-orient(vertical);
    @include line-clamp(1);
}

.leftnav-list-item-container:first-child {
    margin-top : $pos-top-leftnav-content;
}

.leftnav-list-item-highlighted {
    color     : $color-menu-item-highlight-text;
    border-width: 1px 1px 1px 0px;
    background: $color-menu-item-highlight-bg $img-icon-leftnav no-repeat $pos-right-leftnav-arrow-icon center;
    @include filter(brightness(200%));
}

.leftnav-list-item-container .leftnav-list-item-selected {
    color     : $color-menu-item-selected-text;
    background: $color-menu-item-selected-bg $img-icon-leftnav no-repeat $pos-right-leftnav-arrow-icon center;
}

.leftnav-list-item-chosen {
    border-color : $color-menu-item-chosen-bg;
    border-style : solid;
    border-width : 1px 1px 1px 0px;
    color      : $color-menu-item-chosen-text;
    background : $color-menu-item-chosen-bg $img-icon-leftnav no-repeat $pos-right-leftnav-arrow-icon center;
}

.search-icon {
    height : 50px;
    width  : 50px;
}

.leftnav-search-box {
    border : none;
    width  : 100%;
    color  : $color-menu-search-text;
    padding-left : 140px;
    background-image    : $img-icon-search;
    background-position : 85px 30px;
    background-size     : 40px 40px;
    background-repeat   : no-repeat;
    background-origin   : initial;
    background-clip     : initial;
    background-attachment : initial;
    outline-width: 0;
}

.leftnav-search-box.leftnav-list-item-highlighted {
    color     : $color-menu-item-highlight-text;
    border-color: $color-menu-item-highlight-text;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    background: $color-menu-item-highlight-bg $img-icon-leftnav no-repeat $pos-right-leftnav-arrow-icon center;
}


//
// Full Row View
//
.one-d-no-items-container {
    position : absolute;
    display  : none;
    top      : 300px;
    left     : 200px;
    color    : $color-title-text;
    font-size: 3em;
}

.one-D-details-container {
    position : absolute;
    top    : 0;
    left   : 0;
    width  : 100%;
    height : 100%;
    @include transition-property(visibility);
    @include transition-duration($ani-duration-maincontent-opacity);
    @include transition-timing-function(linear);
}

.subcategory-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    @include transition-property(opacity);
    @include transition-duration($ani-duration-maincontent-opacity);
    @include transition-timing-function(linear);
}

.one-D-details-summary-text {
    position : absolute;
    top      : 690px;
    width    : 80%;
    left     : $pos-left-content-position;
    color    : $color-title-text;
    .one-D-summary-title {
        line-height: 1.4;
        color       : $color-title-text;
        font-size   : 1.8em;
        font-family : $font-family-medium;
        height      : 62px;
        overflow    : hidden;
        margin-top  : 10px;
        @include display-box;
        @include box-orient(vertical);
        @include line-clamp(1);
    }
    .one-D-summary-pubdate {
        font-weight: 200;
        height : 30px;
        font-size: 1em;
        color : $color-meta-secondary-text;
        .time-now-live {
            color: $color-time-live-text;
        }
        .time-upcoming {
            color: $color-time-upcoming-text;
        }
    }
    .one-D-summary-description {
        color       : $color-description-text;
        font-style  : italic;
        font-size   : 1.1em;
        overflow    : hidden;
        align-items : center;
        @include display-box;
        @include box-orient(vertical);
        @include line-clamp(2);
    }
    .one-D-live-icon {
        background-image: url(assets/live.png);
        height: 44px;
        width: 93px;
        background-position-y: 5px;
        margin-right: 15px;
        background-repeat: no-repeat;
    }
}

.detail-row-container-buttons {
    height : 75px;
    margin : 20px 0;
}

.detail-item-button {
    position : relative;
    width    : 315px;
    height   : 73px;
    padding  : 15px;
    float    : left;
    font-size    : 1.4em;
    margin-right : 20px;
    text-align   : center;
    border       : 1px solid transparent;
}

.detail-item-button-selected {
    @extend .detail-item-button;
    overflow   : hidden;
    margin-top : 0px;
    color            : $color-btn-selected-text;
    background-color : $color-btn-selected-bg;
    border: solid;
    border-color: $color-app-dialog-head-border;
    border-width: 1px;
    @include box-shadow(0px 10px 18px 3px $color-box-shadow);
}

.detail-item-button-static{
    @extend .detail-item-button;
    color      : $color-btn-text;
    background-color : $color-btn-bg;
      line-height: 45px;
}

#one-D-shoveler-container {
    position : absolute;
    top      : 290px;
    left     : 0px;
    width    : 100%;
    height   : 380px;
    z-index  : 20;
    @include transform(translateZ(0));
    @include transition-property-transform-plus(opacity);
    @include transition-property-transform-plus(visibility);
    @include transition-duration(1s);
    @include transition-timing-function(linear);
}

//
// Shoveler View
//
.shoveler-dynamic-row-container {
    position : absolute;
    width    : 1000%;
    height   : 100%;
    left     : 200px;
    overflow : hidden;
    @include transition-property-transform;
    @include transition-duration(1s);
    @include transform(translateX(0));
    @include transition-timing-function(linear);
}

.shoveler-row-container {
    width  : 100%;
    height : 100%;
    @include transform-style(preserve-3d);
}

.shoveler-rowitem-static {
    position : absolute;
    left     : $pos-left-content-position;
    height   : 100%;
    @include transition-property-transform-plus(opacity);
    @include transition-duration(0.25s);
    @include transition-timing-function(linear);
    @include transform-origin(left center);
    img {
        height  : 100% !important;
        display : inline-block;
    }
}

//selected elements in the shoveler view
.shoveler-rowitem-selected {
    @include box-shadow(0px 10px 18px 3px rgba(0,0,0,0.44));
    img {
        background-blend-mode : overlay;
        display : inline-block;
    }
}

.shoveler-subcat-bg {
    width: 91px;
    height: 100%;
    margin-left: -10px;
    display: inline-block;
    background-image: $img-subcat-bg;
}

//
// Player View
//
.player-main-container {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

.player-content-video {
    position : absolute;
    width    : 100%;
    height   : 100%;
    background: black;
}

.player-controls-container {
    position : absolute;
    width    : 100%;
    height   : 30%;
    padding  : 0 8%;
    bottom   : 0;
    opacity  : 0;
    background-color : $color-player-controls-bg;
    @include transition(0.5s);
    z-index: 100;
}

.player-controls-timeline-container {
    position   : relative;
    height     : 10px;
    margin-top : 20px;
}

.player-controls-timeline {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    border           : 1px solid $color-timeline-border;
    border-radius    : 6px;
    background-color : $color-timeline-bg;
}

.player-controls-timeline-playhead {
    position : absolute;
    width  : 0%;
    height : 10px;
    border : 1px solid $color-playhead-border;
    margin-top       : -1px;
    border-radius    : 6px;
    background-color : $color-playhead-bg;
}

.player-controls-skip-indicator {
    position : absolute;
    height   : 100px;
    top      : -100px;
    left     : 60px;
    font-size      : 1.8em;
    color          : $color-meta-primary-text;
    display        : flex;
    background-size : 100% 100%;
    background-image: $img-skip-indicator;
    min-width: 200px;
    margin-left: -20px;
    transition: 0.05s;


    img {
        height : 22px;
        width  : 30px;
        margin-left : 25px;
        margin-top  : 30px;
    }

    .player-controls-skip-symbol {
        margin-left : 15px;
        margin-top  : 15px;
    }

    .player-controls-skip-number {
        margin-top  : 15px;
        font-weight : bold;
    }

    .player-controls-skip-text {
        margin-top  : 16px;
        margin-left : 5px;
        margin-right: 20px;
        font-weight : lighter;
    }
}

#forward-indicator {
    display : none;
}

#rewind-indicator {
    display : none;
}

.player-controls-timestamp {
    margin-top  : 10px;
    font-size        : 1.6em;
}

.player-controls-timestamp-curtime {
    @extend .player-controls-timestamp;
    color   : $color-meta-primary-text;
    display : inline-block;
    float   : left;
}

.player-controls-timestamp-totaltime {
    @extend .player-controls-timestamp;
    color   : $color-meta-secondary-text;
    display : inline-block;
    float   : right;
}

.player-controls-content-title {
    position    : absolute;
    top         : 80px;
    height      : 59px;
    color       : $color-title-text;
    font-size       : 1.8em;
    font-family   : $font-family-medium;
    margin-top  : 20px;
    overflow    : hidden;
    @include display-box;
    @include box-orient(vertical);
    @include line-clamp(1);
}

.player-controls-button-back {
    display : none;
}

.player-controls-content-subtitle {
    position : absolute;
    top      : 170px;
    width    : 60%;
    height   : 72px;
    color    : $color-description-text;
    font-style: italic;
    font-size: 1.1em;
    @include display-box;
    @include box-orient(vertical);
    @include line-clamp(2);
}

.player-pause-button {
    position   : absolute;
    top        : 250px;
    left       : 870px;
    height     : 200px;
    width      : 200px;
    opacity    : 0;
}

//
// Next Video View
//
.next-video-main-container {
    position : absolute;
    height   : 100%;
    width    : 30%;
    right    : 0;
    display  : flex;
    color    : $color-meta-secondary-text;
    background-color : $color-player-controls-bg;
    flex-direction : column;
}

.next-video-text {
    margin-top : 60px;
    margin-left: 50px;
    font-weight: bold;
    font-size: 1.1em;
    color: $color-meta-primary-text;
}

.next-video-thumbnail {
    height: 250px;
    max-width: 425px;
    margin-left: 50px;
    margin-top: 30px;
    width: auto;
    img {
        width : 100%;
        height: 100%;
        border: solid 1px $color-thumbnail-border;
    }
}

.next-video-thumbnail:after {
    position : relative;
    top      : -250px;
    height   : 100%;
    width    : 100%;
    z-index  : 90;
    content  : " ";
    display  : block;
    background-position : center;
    background-repeat   : no-repeat;
    background-image    : $img-nextvideo-preview-play;
}

.next-video-playingtext {
    margin-left : 50px;
    margin-top  : 15px;
}

.next-video-title {
    margin-left : 50px;
    margin-top  : 30px;
    color       : $color-title-text;
    font-weight : lighter;
    font-size       : 2.5em;
    line-height: 1;
}

.next-video-description {
    margin-top  : 30px;
    margin-left : 50px;
    overflow    : hidden;
    font-size   :  1.1em;
    color: $color-description-text;
    text-overflow : ellipsis;
    display       : -webkit-box;
    @include line-clamp(5);
    @include box-orient(vertical)
}

//
// Overlay and Spinner
//
 .app-overlay-container {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 500;
    background-color : $color-overlay-bg;
}

.app-overlay-message {
    color      : $color-overlay-text;
    text-align : center;
    margin-top : 25%;
}

.content-load-spinner {
  margin: 6em auto;
  font-size: 10px;
  position: absolute;
  top: 400px;
  left: 900px;
  z-index: 600;
  text-indent: -9999em;
  border-top: 1.2em solid rgba(255, 255, 255, 0.2);
  border-right: 1.2em solid #ffffff;
  border-bottom: 1.2em solid #ffffff;
  border-left: 1.2em solid #ffffff;
  @include animation(spin 1.3s infinite linear);
}

.content-load-spinner,
.content-load-spinner:after {
  border-radius: 50%;
  width: 15em;
  height: 15em;
}

.modal-dialog {
  z-index: 650;
  background-color: $color-app-dialog-bg;
  color: $color-app-dialog-btn-text;
  position: absolute;
  left: 515px;
  top: 30%;
  width: 890px;
  min-height: 500px;
  padding: 60px;
    .dialog-title {
        margin-bottom: 30px;
        font-size   : 48pt;
        font-family : $font-family-medium;
    }
    .dialog-message {
        margin-bottom: 60px;
        font-size   : 36pt;
    }
    .dialog-buttons-container {
        justify-content: center;
        display: flex;
    }
}

@-webkit-keyframes spin {
  0% {
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(360deg));
  }
}

@keyframes spin {
  0% {
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(360deg));
  }
}

//Media queries for tablets
//
@media (-webkit-min-device-pixel-ratio: 1.5) {
    .player-controls-button-back {
        position: absolute;
        display : block;
        float   : left;
        top     : 10px;
        left    : 30px;
    }

    .detail-row-container-buttons {
        bottom : 10px;
    }
}

