.#{$csstheme} {
  .ba-settings-overlay-inner {bottom: $controlbar_height;}
}

.#{$csstheme}-dashboard {
  @include absolute-align-full-bottom;
  @include transition1(opacity, $dashboard_transition, ease-in-out);
  @include background-rgba(0, 0, 0, 0.6, #4f4f4f);
  //background: $controlbar_background;
  color: $text_color;
  font-size: $text_fontsize;
  height: $controlbar_height;
  opacity: 0.9;
  overflow: hidden;

  .#{$cssplayer}-airplay-container {
    padding-top: 2px;
  }
}

.#{$cssie8} .#{$csstheme}-title-block {
  display: none;
}

.#{$cssnoie8} .#{$csstheme}-title-block {
  @include absolute-align-full-top();
  @include background-rgba(0, 0, 0, 0.6, #4f4f4f);
  @include transition1(opacity, $dashboard_transition, ease-in-out);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  & > p{
    flex-grow: 200;
    overflow: hidden;
  }
  & > div {
      flex-grow: 1;
      color: $text_color;
      font-size: $text_fontsize;
      padding: 10px;
  }
  & > .prominent-title-close > span{
      cursor: pointer;
  }
}

.#{$csstheme}-title {
  color: $title_text_color;
  font-family: $font_family;
  font-weight: 300;
  font-size: $title_font_size;
  letter-spacing: $text_letter_spacing;
  margin: 0;
  padding: $title_padding;
}

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

.#{$csstheme}-volumebar {
    float: left;
    width: $volume_width;
    height: $controlbar_height;
    margin-right: 10px;
}

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

.#{$cssie8} .#{$csstheme}-volumebar-inner {
  margin-top: -2px;
}

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

.#{$csstheme}-left-block {
  float: left;
}

.#{$csstheme}-center-block {
  float: left;
}

.#{$csstheme}-right-block {
  float: right;
  .#{$csscommon}-icon-volume-up, .#{$csscommon}-icon-volume-down, .#{$csscommon}-icon-resize-full {
    color: $button_color_secondary;
  }
}

.#{$csstheme}-button-container {
  float: left;
  width: $button-width;
  height: $controlbar_height;
  line-height: $controlbar_line_height;
  text-align: center;
}

.#{$csstheme}-timer-container {
  @include background-rgba(0, 0, 0, 0.35, #b2b2b2);
  //background: $controlbar_background;
  color: $text_color;
  letter-spacing: .1em;
  width: 98px;
  font-weight: 300;
  font-size: .9em;
  & > div:first-child { margin-left: 4px }
  & > div {
    float: left;
    width: $button_width + 5;
  }

  & > p {
    float: left;
    margin: 0;
    width: 4px;
  }
}

.#{$csstheme}-stream-label {
  background-color: $stream_label_bg_color;
  color: $stream_label_color;
  display: inline-block;
  font-weight: 300;
  font-size: 0.8em;
  height: 25px;
  letter-spacing: .1em;
  line-height: 24px;
  padding: 0 3px;
  text-align: center;
  width: auto;
  & > span {
    display: inline-block;
    padding-left: 2px;
    line-height: 25px;
  }
}

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

.#{$cssie8} .#{$csstheme}-progressbar {
  overflow: hidden;
}

.#{$csstheme}-progressbar-cache {
  @include absolute-align-left;
  @include clickable;
  background-color: transparent;
  height: $progressbar_height;
}

.#{$csstheme}-progressbar-inner {
  @include relative-center-center;
  @include clickable;
  background-color: transparent;
  height: $progressbar_height;
}

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

.#{$csstheme}-progressbar-position {
  background-color: $progressbar_button_overflow;
  position: absolute;
  height: 100%;
}

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

.#{$csstheme}-progressbar-marker {
  position: absolute;
  height: $progressbar_height;
  width: $progressbar_height / 4;
  background-color: black;
  border: 2px solid #666666;
}

.#{$csstheme}-cast-button-container 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 6px 0 5px;
    width: 32px;
}

.#{$csstheme}-primary-button {
  color: $button_color;
  background-color: $button_color_secondary;
}

.#{$cssplayer}-size-small {
  .#{$csstheme}-button-container {
    width: $button-width_mobile;
  }
}

// Don't change place with small, it more higher priority selectors
.#{$cssplayer}-device-type-mobile {
  .#{$csstheme}-timer-container {
    width: $time_indicator-width_mobile;
  }
  .#{$csstheme}-volumebar {
    width: $volume_width_mobile;
  }
}