.#{$cssplayer}-dashboard {
    @include absolute-align-full-bottom;
    @include transition1(opacity, $dashboard_transition, ease-in-out);
}

.#{$css}-progressbar {
    @include clickable;
    @include transition1(height, $progressbar_transition, ease-in-out);
    height: $progressbar_height;
    background-color: $progressbar_bgcolor;
}

.#{$css}-progressbar-chapters {
    .#{$css}-chapters-list-container {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        width:100%;
    }

    .#{$css}-chapters-list-item {
        background: $chapter_item_background;
        cursor: pointer;
        height: $progressbar_height + 1;
        position: absolute;
        top: -0.5px;
        width: $chapter_item_width;
        z-index: 10;
    }

    .#{$css}-chapters-item-text {
        background: $chapter_text_container_background;
        bottom: $chapter_text_container_bottom;
        font-size: 11px;
        left: - ($chapter_text_container_min_width / 2);
        min-width: $chapter_text_container_min_width;
        opacity: 0.7;
        padding: $chapter_text_container_padding;
        position: absolute;
        text-align: center;
    }
}

.#{$csstheme}-progressbar.#{$cssplayer}-disabled {
    &, & .#{$csstheme}-progressbar-cache,
    & .#{$csstheme}-progressbar-inner,
    & .#{$csstheme}-progressbar-position {
        cursor: not-allowed
    }
}

.#{$css}-progressbar-small {
    height: $progressbar_height_small;
    .#{$css}-progressbar-chapters {
        .#{$css}-chapters-list-item {
            height: $progressbar_height_small + 0.5;
            top: -0.25px;
        }
    }
}

.#{$css}-progressbar-position {
    @include transition1(height, $progressbar_transition, ease-in-out);
    position: absolute;
    background-color: $progressbar_position_bgcolor;
    height: $progressbar_height;
}

.#{$css}-progressbar-small .#{$css}-progressbar-position {
    height: $progressbar_height_small;
    left: -7px;
}

.#{$css}-progressbar-cache {
    @include absolute-align-left;
    @include transition1(height, $progressbar_transition, ease-in-out);
    background-color: $progressbar_cache_bgcolor;
    height: $progressbar_height;
}

.#{$css}-progressbar-small .#{$css}-progressbar-cache {
    height: $progressbar_height_small;
}

.#{$css}-progressbar-button {
    $radius: floor(($progressbar_height + 2 * $progressbar_button_overflow)/2);
    @include border-radius($radius);
    background-color: $progressbar_button_bgcolor;
    box-sizing: content-box;
    border: $progressbar_button_border solid $progressbar_button_bordercolor;
    position: absolute;
    right: -$radius;
    top: -($progressbar_button_border + $progressbar_button_overflow);
    width: $progressbar_height + 2 * $progressbar_button_overflow;
    height: $progressbar_height + 2 * $progressbar_button_overflow;
    z-index: 20;
}

.#{$css}-progressbar-marker {
    background-color: $progressbar_button_bgcolor;
    border: 1px solid $progressbar_bgcolor;
    box-sizing: content-box;
    position: absolute;
    width: $progressbar_height * 0.75;
    top: -4px;
    height: $progressbar_height + 8;
}

.#{$css}-progressbar-small .#{$css}-progressbar-button {
    display: none;
}

.#{$css}-backbar {
    @include absolute-align-full-bottom;
    height: $controlbar_height;
    background-color: $controlbar_bgcolor;
    opacity: $controlbar_opacity;
}

.#{$css}-controlbar {
    @include relative-align-full-bottom;
    height: $controlbar_height;
    overflow: hidden;
}

.#{$css}-leftbutton-container {
    @include float-width-height(left, $button_width, 100%);
    @include clickable;
}

.#{$css}-rightbutton-container {
    @include clickable;
    padding: 0 8px;
}

.#{$cssnoie8} .#{$css}-rightbutton-container {
    @include float-width-height(right, auto, 100%);
}

.#{$cssie8} .#{$css}-rightbutton-container {
    // NOTE: fix IE8, don't set height argument to 0, will
    @include float-width-height(right, auto, 1px);
}

.#{$cssnoie8} .#{$css}-cast-button-container {
    line-height: 40px;
    width: auto;
}

.#{$css}-cast-button-container button {
    //--connected-color: #00cc00;
    //--disconnected-color: #cecece;
    @include transparent(0.7);
    background: transparent;
    border: none;
    cursor: pointer;
    //outline: none;
    width: 32px;
}

.#{$css}-button-inner, .#{$cssplayer}-airplay-container {
    @include relative-center-center;
    @include clickable;
    color: $text_color;
    font-size: $button_fontsize;
}

.#{$css}-button-text {
	font-family: Arial;
    font-weight: bold;
}

.#{$cssie8} .#{$css}-button-inner {
    margin-top: $ie8_margintop;
}

.#{$cssnoie8} .#{$css}-time-container {
    @include float-width-height(left, 2 * $time_value_width + $time_sep_width, 100%);
    text-align: center;
    font-family: $text_fontfamily;
    font-size: $text_fontsize;
    color: $text_color;
}

.#{$cssie8} .#{$css}-time-container {
    @include float-width-height(left, 2 * $time_value_width + $time_sep_width, 50%);
    text-align: center;
    font-family: $text_fontfamily;
    font-size: $text_fontsize;
    color: $text_color;
    margin-top: $ie8_margintop;
}

.#{$css}-time-value {
    @include relative-center-center;
    float: left;
    width: $time_value_width;
}

.#{$css}-time-sep {
    @include relative-center-center;
    float: left;
    width: $time_sep_width;
}

.#{$cssnoie8} .#{$css}-volumebar {
    @include float-width-height(right, $volume_width, 100%);
    margin-left: $volume_height;
    margin-right: $volume_height + 5;
}

//.#{$cssnoie8} .#{$css}-volumebar {
//}

.#{$cssie8} .#{$css}-volumebar {
    @include float-width-height(right, $volume_width, 50%);
    margin-top: $ie8_margintop+4;
    margin-right: 15px;
}

.#{$css}-volumebar-inner {
    @include relative-center-center;
    @include border-round-edges($volume_height / 2);
    @include clickable;
    background-color: $progressbar_bgcolor;
    height: $volume_height;
}

.#{$css}-volumebar-position {
    @include border-round-edges($volume_height / 2);
    @include absolute-align-left();
    background-color: $progressbar_position_bgcolor;
    height: 100%;
}

.#{$css}-volumebar-button {
    $radius: $volume_height - 2 * $progressbar_button_overflow;
    @include border-radius($radius);
    @include clickable;
    background-color: $progressbar_button_bgcolor;
    box-sizing: content-box;
    border: $progressbar_button_border solid $progressbar_button_bordercolor;
    position: absolute;
    right: -$radius;
    top: -($progressbar_button_border + $progressbar_button_overflow);
    z-index: 1;
    width: $progressbar_height + 2 * $progressbar_button_overflow;
    height: $progressbar_height + 2 * $progressbar_button_overflow;
}

.#{$css}-title {
    color: $video_title_font_color;
    font-family: $video_title_font_family;
    font-weight: $video_title_font_weight;
    font-size: $video_title_font_size;
    float: left;
    letter-spacing: $video_title_letter_spacing;
    line-height: 30px;
    margin: $video_title_margin;
    & > span {
        cursor: pointer;
    }
}

.#{$css}-seeking-thumb-container {
    position: absolute;
    padding: 3px 4px;
    background-color: #ffffff;
    bottom: 45px;
    left: 5px;
    text-align: center;
    & > span {
        font-size: 0.6em;
        color: #2c2c2c;
    }
}

// Apply for mobile no need ie8 selectors
.#{$cssplayer}-device-type-mobile {
    .#{$csstheme}-leftbutton-container {
        @include float-width-height(left, $mobile_leftbutton-container_width, 100%);
    }
}
.#{$cssplayer}-size-medium {
    .#{$csstheme}-time-sep {
        width: $mobile_time-sep_width;
    }
    &.#{$cssnoie8} .#{$csstheme}-time-container {
        @include float-width-height(left, $mobile_time-container_width, 100%);
    }
    &.#{$cssnoie8} .#{$csstheme}-volumebar {
        @include float-width-height(right, $mobile_volumebar_width, 100%);
    }
}

.#{$cssplayer}-size-small {
    &.#{$cssnoie8} .#{$csstheme}-time-container {
        @include float-width-height(left, $time_value_width, 100%);
    }
    .#{$csstheme}-time-total-duration, .#{$csstheme}-time-sep {
        display: none;
    }
    &.#{$cssnoie8} .#{$csstheme}-volumebar {
        @include float-width-height(right, $mobile_small_volumebar_width, 100%);
    }
}