.#{$csstheme}-dashboard {
    font-family: $font_family;
    .#{$cssplayer}-airplay-container {
        box-sizing: content-box;
        padding: 12px 0 0 6px;
    }
}

.#{$csstheme}-title-container {
    @include absolute-align-full-top();
    @include background-rgba(0, 0, 0, 0.2, #cecece);
    @include transition1(opacity, $dashboard_transition, ease-in-out);
    box-sizing: border-box;
    font-size: 0.65rem;
    font-weight: 300;
    height: $controlbar_header_height;
    letter-spacing: .05rem;
    line-height: $controlbar_header_height;
    padding: 0 12px;
    text-align: center;
}

.#{$cssie8} .#{$csstheme}-title-container {
    .#{$csstheme}-button-inner {
        margin-top: 0;
    };
}

.#{$csstheme}-controlbar-footer {
    @include absolute-align-full-bottom;
    @include background-rgba(0, 0, 0, 0.4, #cecece);
    @include transition1(opacity, $dashboard_transition, ease-in-out);
    box-sizing: content-box;
    height: $controlbar_footer_height;
    padding: 0 0 0 5px;
}

.#{$cssie8} .#{$csstheme}-title-container, .#{$cssie8} .#{$csstheme}-controlbar-footer {
    opacity: .8;
}

.#{$cssnoie8} .#{$csstheme}-title-container .#{css}-rightbutton-container {
    width: 21px;
}

.#{$csstheme}-title-container-background {
    position: relative;
    height: 40px;
}

.#{$csstheme}-title {
    float: left;
    color: $text_color;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    & > div {
        flex-grow: 1;
        cursor: pointer;
        padding-left: 5px;
        padding-right: 5px;
    }

    & > p {
        flex-grow: 200;
        margin: 0;
        font-size: $controlbar_title_font_size;
    }
}

.#{$cssnoie8} .#{$csstheme}-title-container .#{$csstheme}-button-inner {
    @include transform-translate-y(0);
}

.#{$csstheme}-leftbutton-container {
    @include float-width-height(left, $button_width, 100%);
    @include clickable;
	box-sizing: content-box;
    border: none;
    margin-right: 10px;
}

.#{$cssnoie8} .#{$csstheme}-rightbutton-container {
    @include float-width-height(right, auto, 100%);
    @include clickable;
	box-sizing: content-box;
    border: none;
}

.#{$cssie8} .#{$csstheme}-rightbutton-container {
    @include float-width-height(right, auto, 50%);
    @include clickable;
	box-sizing: content-box;
    border: none;
}

.#{$csstheme}-rightbutton-container {
    margin: 0 5px;
}

.#{$csstheme}-right-time-container{
    padding-right: 10px;
}

.#{$csstheme}-button-inner {
    @include clickable;
    color: $button_color;
    font-size: $button_fontsize;
    border-radius: 3px;
}

.#{$cssnoie8} .#{$csstheme}-controlbar-footer .#{$csstheme}-button-inner {
    @include relative-center-center;
}

.#{$cssie8} .#{$csstheme}-button-inner {
    height: auto;
    margin-top: $ie8_margintop + 8;
    margin-left: 3px;
    text-align: center;
}


.#{$csstheme}-time-container {
    @include float-width-height(left, $time_value_width, 100%);
    text-align: center;
    font-family: $text_fontfamily;
    font-size: $text_fontsize;
    color: $text_color;
	box-sizing: content-box;
    border: none;
}

.#{$cssie8} .#{$csstheme}-time-container {
    height: auto;
    margin-top: $ie8_margintop + 9;
}

.#{$csstheme}-time-value {
    @include relative-center-center;
    float: left;
    width: $time_value_width;
    font-size: 10px;
}

.#{$cssnoie8} .#{$csstheme}-volumebar {
    @include float-width-height(right, $volume_width, 100%);
}

.#{$cssie8} .#{$csstheme}-volumebar {
    @include float-width-height(right, $volume_width, 50%);
    margin-top: $ie8_margintop + 8;
    margin-right: $volume_height * 2;
}

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

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

.#{$cssnoie8} .#{$csstheme}-progressbar {
    overflow: hidden;
    height: 100%;
    padding-left: $volume_height;
    padding-right: $volume_height;
}

.#{$cssie8} .#{$csstheme}-progressbar {
    overflow: hidden;
    height: 50%;
    padding-left: $volume_height * 2;
    padding-right: $volume_height * 2;
    margin-right: $button_width;
    margin-top: $ie8_margintop + 4;
}

.#{$csstheme}-progressbar-cache {
    @include absolute-align-left;
    @include border-round-edges($volume_height / 2);
    @include clickable;
    background-color: $progressbar_inner_bg;
    height: $progressbar_height;
}

.#{$csstheme}-progressbar-inner {
    @include relative-center-center;
    @include border-round-edges($volume_height / 2);
    @include clickable;
    background-color: $stream_label_bg_color;
    height: $progressbar_height;
}

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

.#{$csstheme}-progressbar-position {
    @include border-round-edges($volume_height / 2);
    background-color: $progressbar_button_overflow;
    position: absolute;
    height: $progressbar_height;
}


.#{$csstheme}-progressbar-button {
    @include border-radius(50%);
    background-color: $progressbar_button_overflow;
    box-sizing: content-box;
    border: none;
    position: absolute;
    top: -2px;
    z-index: 1;
    width: 10px;
    height: 10px;
}

.#{$csstheme}-progressbar-marker {
    position: absolute;
    background-color: black;
    top: -6px;
    height: 12px;
    width: 5px;
    border: 2px solid #666666;
}

.#{$csstheme}-button-text {
	font-family: Arial;
    font-weight: normal;
    font-size: 10px;
}

.#{$csstheme}-time-container{
    font-size: 0.7rem;
    width: 50px;
}

.#{$csstheme}-time-value{
    font-weight: 300;
    letter-spacing: 0.2em;
    width: 50px;
}

.#{$cssplayer}-size-small .#{$csstheme}-time-container {
	display: none;
}

.#{$cssplayer}-size-small .#{$csstheme}-volumebar {
	display: none;
}

.#{$csstheme}-stream-label-container {
    background-color: $stream_label_bg_color;
    box-sizing: border-box;
    padding: 2px 4px;
    .#{$csstheme}-stream-label {
        line-height: 16px;
        background-color: $stream_label_bg_color;
    }
}

.#{$cssnoie8} .#{$csstheme}-full-screen-btn-inner {
    text-align: left;
    padding-left: 4px;
}

.#{$cssnoie8} .#{$csstheme}-cast-button-container {
    margin: 0;
    button {
        //--connected-color: #00cc00;
        //--disconnected-color: #cecece;
        @include transparent(0.7);
        background: transparent;
        border: none;
        cursor: pointer;
        //outline: none;
        box-sizing: border-box;
        padding: 11px 2px 0 10px;
        width: 32px;
    }
}

.#{$csstheme}-cc-button-container, .#{$csstheme}-settings-button-container {
    padding: 0 10px;
    margin: 0;
}

.ba-settings-overlay-inner {
    bottom: 40px;
}

.#{$csstheme}-primary-button {
    background-color: white;
    color: $main_color;
    padding: 5px;
}