/***********************************
VEGAS _ MAIN
LANDSCAPE MODE
***********************************/

body.isQT.isMac *::-webkit-scrollbar {
    background: transparent;
    width: 14px;
}

body.isQT.isMac *::-webkit-scrollbar-track {
    background: transparent;
}

body.isQT.isMac *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .5);
    border-radius: 7px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    min-height: 50px;
}

body.isQT.isMac *::-webkit-scrollbar-thumb:vertical {
    min-height: 7rem;
}

body.isQT .page_body {
    min-height: 100%;
}

#main_play {
    -webkit-transform: translateY(100%) translateY(-7.9rem);
    transform: translateY(100%) translateY(-7.9rem);
    width: 100%;
    height: 100%;
    color: #000;
    background-color: #000;
    padding: 4rem 0;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.25) 0px -1px 5px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px -1px 5px 0px;
}

#viewport.main_play #main_play {
    -webkit-transform: translate(0, 0);
}

#main_vol {
    width: 100%;
    position: relative;
    height: 100%;
    z-index: 30;
    background-color: #fff;
    border-top: solid #ddd 1px;
    display: -webkit-flex;
    -webkit-align-items: center;
}

#main_vol .vol_row {
    border-bottom: none;
    -webkit-flex-grow: 1;
}

#main_vol .vol_row .title {
    display: none;
}

.main_vol_cont {
    position: fixed;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 4rem;
    /* matches .master_header styles */
    z-index: 30;
}

#main_settings {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 100;
}

#main_tray {
    width: 100%;
    height: 100%;
    -webkit-transform: translate(0, -webkit-calc(100% - 8rem));
    transform: translate(0, calc(100% - 8rem));
    min-height: 4rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 4rem;
    z-index: 25;
    background: transparent;
}

.swiper-container-horizontal>.swiper-pagination {
    bottom: auto;
}

.device_tray #main_tray {
    -webkit-transform: translate(0, 0) !important;
}

#tray_hold {
    color: #000;
    height: 100vh !important;
}

.device_tray #tray_hold {
    display: block;
}

.tray_min_icon {
    font-family: bose;
    font-weight: normal;
}

.controlls {
    height: initial;
    display: -webkit-flex;
}

.tray_min_txt,
.tray_min_plus {
    font-weight: bold;
    font-size: 0.875rem;
    margin: 0 0.25rem 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tray_min_plus {
    margin: 0;
}

#tray_min_label {
    padding-left: 1rem;
    position: relative;
    color: #000;
    z-index: 26;
    width: 100%;
    height: 2rem;
    text-align: center;
    display: -webkit-flex;
    font-size: 1em;
    background-color: white;
}

#peek_device_image_circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-top: .9rem;
    background: #f2f2f2 no-repeat;
    background-position: 50% 95%;
    background-size: 1.75rem auto;
    flex-shrink: 0;

}

#peek_device_count {
    font-family: BoseText, sans-serif;
    font-size: .7rem;
    font-weight: bold;
    color: #111;
    display: inline-block;
    margin-top: 0.6rem;
    letter-spacing: -0.1rem;
    width: 2.5rem;
    height: 2.5rem;
}

#volume_shade_open {
    line-height: 4rem;
    font-size: 1.5rem;
    width: 3.5rem;
    font-family: bose;
}

#volume_shade_open .open_volume_icon {
    display: inherit;
}

.landscape #volume_shade_open {
    display: none;
}

.landscape #volume_shade_open.in-zone-mode {
    display: inherit;
}

#volume_shade_open .dots_icon {
    display: none;
}

body.portrait #volume_shade_open .open_volume_icon {
    display: inherit;
}

body.portrait #volume_shade_open .dots_icon {
    display: none;
}

#volume_shade_open.in-zone-mode .open_volume_icon {
    display: none;
}

#volume_shade_open.in-zone-mode .dots_icon {
    display: inherit;
}

body.offline #volume_shade_open,
body.offline .ic_power.ibut_off {
    color: #CCC;
    pointer-events: none;
}

.landscape .zone-mode #volume_shade_open {
    display: inherit;
}

#main_vol_cont {
    max-width: 20rem;
    right: 1.35rem;
}

#viewport.device_tray #main_vol_cont {
    display: none;
}

#viewport.device_tray #secondary_controls,
#viewport.device_tray #art_time,
#viewport.device_tray #play_control,
#viewport.device_tray #play_tag,
#viewport.device_tray #artwork {
    display: none;
}

#viewport.device_tray #now_play_peak_control #play_control {
    display: flex;
    display: -webkit-flex;
}

#main_vol_cont .volume_row {
    height: 100%;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

#volume_shade_open {
    cursor: pointer;
    justify-content: center;
    -webkit-justify-content: center;
}

#tray_min_wrapper {
    flex-shrink: 1;
    text-align: start;
    font-family: BoseText, sans-serif;
    padding: 0 1rem;
    min-width: 8rem;
}

body.landscape #tray_min_wrapper {
    max-width: calc(100% - 24.5rem);
}


body.portrait #tray_min_wrapper.has_zone {
    max-width: calc(100% - 6rem) !important;
}

body.landscape #main_vol_cont:not(.in-zone-mode) {
    width: calc(100% - 13.6rem);
}

body.landscape #main_vol_cont.in-zone-mode {
    max-width: 18rem;
    width: calc(100% - 16rem);
}

#tray_min_txt {
    text-align: start;
    padding-top: 1.5rem;
    font-size: .875rem;
    font-weight: bold;
    font-family: BoseText, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tray_min_label:not(.zone-mode) #peek_device_image_circle {
    background-position: 50% 50%;
}

#tray_min_zone_txt {
    font-size: .625rem;
    color: #777777;
    cursor: pointer;
    margin-top: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.flex_filler {
    flex-grow: 1;
    -webkit-flex-grow: 1;
}

.has_zone #tray_min_txt {
    padding-top: 1rem;
}

#main_trayPlay {
    width: 100%;
    height: 3rem;
    /*opacity: 0;*/
    top: 0;
    z-index: 25;
    background-color: #000;
    overflow: hidden;
    cursor: pointer;
    pointer-events: none;
}

.label_center {
    /* matches .master_header styles */
    width: -webkit-calc(100% - 8.6rem);
    height: 100%;
    position: absolute;
    top: 0;
    left: 4.3rem;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

#tray_device {
    position: fixed;
    overflow: visible;
    cursor: pointer;
    height: 12%;
    right: 0;
    left: 50%;
    text-align: center;
    margin-left: -16.65%;
    -webkit-transform: translateZ(0);
    z-index: 26;
}

#content_source {
    z-index: 35;
    height: 100%;
    transform: translate(-110%, 0);
    -webkit-transform: translate(-110%, 0);
}

#viewport.drawer #content_source {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.backdrop {
    width: 100%;
    height: 100%;
    z-index: 35;
    background-color: rgba(187, 187, 187, 0);
    pointer-events: none;
    top: 0;
    transform: translateZ(0);
}

#viewport.drawer #content_source_backdrop.backdrop {
    background-color: rgba(187, 187, 187, 0.4);
}

#viewport.artwork #artwork_backdrop {
    background-color: #000;
    pointer-events: all;
}

#artwork_preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 36;
    height: auto;
    display: none;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#viewport.artwork #artwork_preview {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

#artwork_preview img {
    width: 100%;
    height: 100%;
    max-width: 100vh;
    max-height: 100vw;
    -o-object-fit: contain;
    object-fit: contain;
    background-color: #fff;
}

#viewport.artwork #main_tray {
    display: none;
}

#viewport.artwork #art_info {
    display: none;
}

#content_browse {
    width: 100%;
    top: 0;
}

.content_panel .but {
    display: block;
    padding: 0;
    text-align: start;
}

.hamburger {
    visibility: collapse;
    color: #fff;
    position: absolute;
    font-family: bose;
    font-weight: normal;
    font-size: 2.2em;
    padding: .1em .4em 0;
    height: 1.8em;
    line-height: 1.8em;
    cursor: pointer;
}

.play_overlay_hold {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.play_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

#play_msg_content {
    height: 100%;
    width: 100%;
    text-align: center;
}

.placeholder_msg_content {
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
    margin: 0 auto;
}


#main_align_right {
    position: relative;
    float: right;
    width: calc(100% - 22rem);
    height: 100%;
}

#main_align_right.fullscreen {
    width: 100%;
}


.swiper_nav {
    width: 50%;
    right: 0;
    position: absolute;
    bottom: 0;
}

/***********************************
VEGAS _ MAIN
ONBOARDING css
***********************************/

#bbd_onboard {
    background-color: #f2f2f2;
}

#onboarding {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #f2f2f2;
}

.onboarding {
    width: 100%;
    height: 100%;
    position: fixed !important;
    top: 0;
    background-color: #d9d9d9;
}

.onboarding_slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: -webkit-flex;
}

#onboarding_swiper_buttons {
    width: 100%;
    position: absolute;
    height: 100%;
    max-width: 30rem;
    left: 0;
    right: 0;
    margin: auto;
}

.onboarding_slide .media {
    /*width: 43vh;*/
    height: 71vh;
    margin: auto;
    margin-top: 2rem;
    position: relative;
    max-height: calc(100% - 13.5rem);
}

.onboarding_slide .details {
    width: 50%;
    height: 100%;
}

.onboarding_slide .header {
    width: 100%;
    height: 20%;
    position: relative;
    font-family: BoseText;
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.7px;
}

.onboarding_slide .header .center_text,
.onboarding_slide .message .center_text {
    position: inherit;
    top: 25%;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

.onboarding_slide .message .center_text {
    margin-left: 20px;
    margin-right: 20px;
}

.onboarding .message {
    width: 100%;
    height: 40%;
    font-family: BoseText;
    font-size: .8em;
    text-align: center;
    letter-spacing: 0.5px;
    position: relative;
    color: #666666;
}

.onboarding .button_holder {
    bottom: 4rem;
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 11;

    padding-right: 2rem;
    padding-left: 2rem;
}

.controlls_holder {
    position: relative;
    min-height: 1rem;
    display: inline-block;
    width: 100%;
}

.onboarding .button {
    padding: 1.2rem;
    display: inline-block;
    border-radius: 7px;
    /*margin-bottom: 1rem;*/
    color: #fff;
    visibility: visible;
    background: #000;
    width: 100%;
    max-width: 25rem;
    opacity: 1;
    -webkit-transition: visibility .3s, opacity .3s ease-in;
    cursor: pointer;
}

.onboarding .first_slide_footer {
    position: relative;
    text-align: center;
    z-index: 11;
    margin-bottom: 1.5rem;
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility .3s, opacity .3s ease-in;
}

.onboarding .swiper-pagination {
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 11;
}

.onboarding_slide .details {
    height: 29%;
    width: 100%;
    margin: auto;
    position: absolute;
    min-height: 13.5rem;
    bottom: 0;
    max-width: 25rem;
    left: 0;
    right: 0;
}

.onboarding_slide {
    display: block;
}

.swiper_nav {
    width: 100%;
}

#onboarding .skip_tour {
    text-align: center;
    margin-bottom: 1rem;
    z-index: 99999;
}

#onboarding .skip_tour span {
    font-family: bose;
}

#onboarding .skip_tour a {
    text-decoration: underline;
    cursor: pointer;
    z-index: 12;
    position: relative;
}

#onboarding .skip_tour a:hover {
    text-decoration: none;

}

.onboarding .swiper-pagination-clickable .swiper-pagination-bullet {
    background: #000;
}



.onboarding .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer !important;
    z-index: 12;
    position: relative;
}

.onboarding .swiper-button-next,
.onboarding .swiper-button-prev {
    -webkit-transition: visibility .3s, opacity .3s ease-in;
    cursor: pointer !important;
    z-index: 13;
    bottom: 0;
    position: absolute;
    display: inline-block;
    top: calc(2rem + 71vh/2);

}

.onboarding .swiper-button-prev {
    float: left;
}

.onboarding .swiper-button-next {
    float: right;
}


.onboarding .button:hover {
    border-radius: 7px;
    border: solid 1.5px #bbbbbb;
    background-color: #222;

}

.onboarding .button:active {
    border-radius: 7px;
    border: solid 1.5px #bbbbbb;
    background-color: #b2b2b2;
    color: #000;
}

.onboarding .button_title {
    font-family: BoseText;
    /*font-weight: bold;*/
    font-size: .8em;
    line-height: 1;
    letter-spacing: 1px;
    display: inline-block;
}

.onboarding_slide .footer {
    width: 100%;
    height: 50%;
    position: relative;
    display: -webkit-flex;
    display: flex;
}

.onboarding .hidden {
    visibility: collapse;
    opacity: 0;
}

.media_content {
    width: 100%;
    height: 100%;
}

.onboarding .first_slide span,
.onboarding .last_slide span {
    font-family: BoseText;
    line-height: 1.1;
    text-align: center;
    color: #111111;
    margin: 0 auto;
    position: absolute;
    max-width: 30rem;
    left: 0;
    right: 0;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}


.onboarding .first_slide span {
    font-size: 3rem;
    top: calc(50% - 1.5rem);

}

.onboarding .last_slide span {
    font-size: 2rem;
    top: calc(50% - 1rem);


}

.onboarding .media_content {
    background-size: contain;
    background-repeat: no-repeat !important;
    position: absolute;
    background-position: center;
}

.onboarding .second_slide {
    background-image: url('../images/bottom_drawer/all about music@3x.png');
}

.onboarding .third_slide {
    background-image: url('../images/bottom_drawer/Speaker control@3x.png');
}

.onboarding .fourth_slide {
    background-image: url('../images/bottom_drawer/Main Menu@3x.png');
}

.onboarding .fifth_slide {
    background-image: url('../images/bottom_drawer/Presets@3x.png');
}

.onboarding .sixth_slide {
    background-image: url('../images/bottom_drawer/Now playing@3x.png');
}

.onboarding .last_slide {}

.dev_tray_speakers_slide {
    text-align: center;
    overflow: hidden;
    /*Double check this....*/
    width: -webkit-calc(100% - 2.625rem);
    padding: 0;
    margin: 0;
    transition: padding 0.3s cubic-bezier(0, .4, .4, 1.0) 0.0s;
    -webkit-transition: padding 0.3s cubic-bezier(0, .4, .4, 1.0) 0.0s;
    height: 100%;
    background: linear-gradient(#fff 50%, #f2f2f2 50%);
    background: -webkit-linear-gradient(#fff 50%, #f2f2f2 50%);
    z-index: 0;
}

.dev_tray_speakers_slide .extended_image {
    background-size: 100%;
}

.noTouch .dev_tray_speakers_slide,
body.isQT .dev_tray_speakers_slide {
    overflow-y: auto;
}

#viewport.device_tray .dev_tray_speakers_slide {
    border-radius: 8px;
    width: -webkit-calc(100% - 2rem) !important;
    margin: 0 0.25rem !important;
}

.cardSpacing {
    width: 100%;
    height: auto;
    background-color: #fff;
    overflow-y: auto;
}

.device_tray .cardSpacing {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.dev_tray_speakers_slide .device_img {
    height: 12.5rem;
    width: 12.5rem;
    margin: auto;
    background-repeat: no-repeat;
    background-color: #f2f2f2;
    border-radius: 50%;
    background-size: 75%;
    background-position: center;


}

.dev_tray_speakers_slide .extended_image {
    background-size: 100%;
}

.dev_tray_speakers_slide.shifted .device_img {
    -webkit-background-size: 100%;
    background-size: 100%;
}

.dev_tray_speakers_slide .slave_count {
    display: none;
}

.dev_tray_speakers_slide.shifted .slave_count {
    position: absolute;
    display: block;
    top: 3rem;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    font-size: 2.5rem;
    font-family: BoseText, sans-serif;
    font-weight: bold;
    text-align: center;
    color: #111111;
}

.dev_tray_speakers_slide .center_text {
    font-size: 1.0625rem;
    color: #111111;
    font-weight: bold;
    line-height: 1.76;
    letter-spacing: .125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 8rem);
}

body.offline #viewport .swiper-container {
    background-color: #fff;
}

body.offline #viewport.device_tray .swiper-container {
    background-color: transparent;
}

.swiper-container {
    background-color: transparent;
}

.swiper-pagination-bullet {
    margin: 5px;
}

.swiper-container {
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    -o-overflow-scrolling: touch;
}

#main_tray .swiper-button-next,
#main_tray .swiper-button-prev {
    width: 3.4375rem;
    height: 6.875rem;
    opacity: 0.85;
    background-color: #333333;
}

#main_tray .swiper-button-next,
#main_tray .swiper-container-rtl .swiper-button-prev {
    right: 0;
    border-radius: 3.4375rem 0 0 3.4375rem;
    background-image: url("../images/icons/chevronR.svg");

    background-position-x: 1.25rem;
}

#main_tray .swiper-button-prev,
#main_tray .swiper-container-rtl .swiper-button-next {
    left: 0;
    border-radius: 0 3.4375rem 3.4375rem 0;
    background-image: url("../images/icons/chevronL.svg");
    background-position-x: 0.4375rem;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    display: none;
}

/***********************************
VEGAS _ MAIN
DEV_TRAY css
***********************************/

div.dev_tray_speakers_slide:not(.swiper-slide-active) {
    display: none;
}

div.device_tray div.dev_tray_speakers_slide {
    display: block;
}

#viewport.device_tray .dev_tray_top {
    opacity: 1;
}

.dev_tray_top {
    overflow: hidden;
    width: 100%;
    height: 3.75rem;
    position: relative;
    user-select: none;
    background-color: #fff;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    opacity: 0;
}

.dev_tray_speakers .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
}

.dev_tray_speakers .swiper-pagination-bullet {
    width: 0.3125rem;
    height: 0.3125rem;
    background: #fff;
    margin: 0.8rem 0.25rem 0.25rem 0.25rem;
    display: inline-block;
    border-radius: 100%;
    opacity: .2;
}

.dev_tray_speakers .swiper-pagination-bullet-active {
    opacity: 1;
}

.dev_tray_speakers .ic_arrow_down,
.dev_tray_speakers .ic_settings,
.dev_tray_speakers .ic_power {
    cursor: pointer;
    font-family: bose;
    color: #000;
    text-transform: none;
}

.ic_settings {
    /* Temp: if bose font relative icon sizes are fixed, font-size should match .master_header_button size */
    font-size: 1.8rem;
}

.ic_arrow_down,
.ic_arrow_up,
.show_vol_control .tray_min_label .ic_arrow_up span {
    /* Temp: if bose font relative icon sizes are fixed, font-size should match .master_header_button size */
    font-size: 1.75rem;
    font-weight: normal;
}

.ic_power {
    font-size: 1.75rem;
}

.dev_tray_speakers .ic_arrow_down,
.dev_tray_speakers .ic_power {
    z-index: 11;
    padding: 0;
    -webkit-transform-origin: 50% 50% 0;
    height: 4rem;
    width: 4rem;
    position: absolute;
    color: #000;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.dev_tray_speakers .ic_arrow_down {
    top: 0;
    left: 0;
}

.dev_tray_speakers .ic_power {
    top: 0;
    right: 0;
}

.dev_tray_speakers .ic_settings {
    z-index: 11;
}

.tray_min_label .ic_power,
.tray_min_label .ic_arrow_up {
    pointer-events: all;
    text-transform: none;
    padding: 0;
    height: 100%;
    font-family: bose;
    color: #000;
    position: absolute;
    left: 1.25rem;
    display: -webkit-inline-flex;
    -webkit-align-items: center;
    cursor: pointer;
}

.tray_min_label .ic_power {
    visibility: hidden;
    opacity: 0;
}

.tray_min_label .ic_arrow_up {
    top: 0.2rem;
    padding-top: .3em;
}

.dev_tray_speakers {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    height: calc(100% - 6rem);
}

.device_tray .dev_tray_speakers {
    visibility: visible;
    opacity: 1;
}

.device_tray #tray_min_label {
    visibility: hidden;
    opacity: 0 !important;
    display: none;
    margin: 0 1.3125rem;
}

.show_vol_control #tray_min_label .ic_power,
.show_vol_control #tray_min_label .ic_arrow_up {
    visibility: visible;
    opacity: 1;
}

body.landscape .show_vol_control #main_vol_cont {
    bottom: auto;
    top: 0;
}

body.landscape #main:not(.device_tray) #main_vol_cont .vol_row {
    padding: 0 0 0 1rem;
}

body.landscape .show_vol_control .label_center {
    width: -webkit-calc(35% - 4rem);
}

.tray_min_label .ic_power {
    /* matches .master_header styles */
    left: auto;
    right: 0;
}

.tray_min_label .ic_arrow_up {
    width: 4rem;
    -webkit-transform-origin: 50% 50% 0;
    padding: 0;
    left: 0;
}

.tray_min_label .ic_arrow_up span {
    font-weight: bold;
    font-size: 0.875rem;
    width: 100%;
}

.dev_tray_speakers .ibut_off,
.tray_min_label .ic_power.ibut_off {
    color: #ccc;
}

.tray_min_label .ic_power {
    width: 4rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

#speaker-sources {
    border-top: 1px solid rgba(204, 204, 204, 0.5);
    border-bottom: 1px solid rgba(204, 204, 204, 0.5);
}

.dev_tray_speakers #speaker-sources {
    width: 100%;
    position: relative;
    background: #fff;
    padding: 0 2rem;
}

#but_updAvail {
    margin: 0.5rem auto;
    margin-bottom: 0;
}

.dev_tray_speakers .update_avail_banner {
    width: 100%;
    font-size: 0.7rem;
    height: 2.5rem;
    position: relative;
    padding: 0 .75rem;
    color: #fff;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-between;
    text-align: center;
    text-transform: none;
    background-color: #999;
}

.dev_tray_speakers .update_avail_banner .but_text_left {
    -webkit-justify-content: left;
}

.dev_tray_speakers .update_avail_banner .but_text_right {
    -webkit-justify-content: right;
}

.icon.tray_min_update_avail {
    font-size: 1.1rem;
    padding-top: 1.5rem;
}

#tray_min_wrapper.has_zone .icon.tray_min_update_avail {
    padding-top: 1rem;
}

.group_mems {
    width: 100%;
    background-color: #fff;
    padding: 0.9375rem 2rem;
}

.dev_tray_speakers_slide:not(.shifted) .group_mems {
    display: none;
}

.group_mems span {
    opacity: 0.6;
    font-family: BoseText, sans-serif;
    font-size: 0.75rem;
    line-height: 1.67;
    text-align: center;
    color: #111111;
}

.speaker_src_holder {
    color: #000;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 1rem 0;
    max-width: 40rem;
    margin: 0 auto;
    overflow-x: auto;
}

#but_dev_settings {
    position: absolute;
    margin-left: 3rem;
    top: .25rem;
    width: 2.75rem;
    height: 2.75rem;
    line-height: 3rem;
    background: #FFF;
    border-radius: 50%;
    padding: 0;
}

#source_string {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    text-align: start;
    font-size: .875rem;
    line-height: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

#but_power {
    position: absolute;
    z-index: 9999;
    padding: 0;
    width: 4rem;
    height: 4rem;
}

.landscape #but_power {
    right: 1rem;
    top: 0;
    padding: 1rem;
}

.portrait #but_power {
    top: 0;
    right: 0;
    padding: 1rem;
}

.speaker_src {
    height: 2.5rem;
    width: 2.5rem;
    line-height: 2.5rem;
    font-family: bose;
    font-size: 1.75rem;
    color: #000;
    border-radius: 50%;
    background: #f2f2f2;
    padding: 0;
    margin-left: 1rem;
    min-width: 2.5rem;
}

#but_speaker_src_st {
    line-height: 2.6rem;
}

.speaker_src:last-child {
    margin-right: 0;
}

.speaker_src.selected {
    color: #FFF;
    background: #000;
    border-radius: 50%;
}

.speaker_src_aux {
    /* Temp: if bose font relative icon sizes are fixed, font-size should match .master_header_button size */
    font-size: 2rem;
}

.speakers_vol_holder {
    width: 100%;
    min-height: 100px;
    margin: 0 auto;
    background-color: #fff;
}

.speakers_vol_holder .controlls {
    position: relative;
    display: -webkit-flex;
    margin-bottom: 1.2rem;
}

.vol_hold {
    position: relative;
    margin: 0 0 0 1em;
    height: inherit;
    width: 100%;
    float: right;
    pointer-events: none;
}

.vol_row {
    padding: 0 1.25rem;
    background: #FFF;
    border-radius: 200rem;
    margin-bottom: .6rem;
}

#tray_details_bottom .vol_row,
#tray_details_top .vol_row.tray_details_member {
    padding: 0;
}

#tray_details_top .vol_row {}

.vol_row .title {
    font-size: .8125rem;
    margin: 0 3rem 0 1rem;
    color: #000;
    padding: 0.84375rem 0;
    text-align: center;
    width: 100%;
}

#tray_details_bottom .vol_row .title {
    color: #999;
}

.tdDevice_name {
    font-size: 0.8em;
}

.handle_scrub {
    position: relative;
    height: 0.625rem;
    width: 0.625rem;
    background: #111;
    margin: auto;
    border-radius: 50%;
}

.volume_hash {
    position: absolute;
    top: -2.5px;
    left: -2.5px;
    height: 7px;
    width: 7px;
    background: black;
    border-radius: 50%;
    display: none;
}

.device_tray .volume_hash {
    display: block;
}

.vol_hold .vol_bar {
    position: absolute;
    height: 0.125rem;
    top: 50%;
    left: 0;
    right: 0;
    background: #ccc;
    margin: -1PX 0.2em 0 0;
    border-radius: 1px;
}

.device_volumes,
.zone_volume,
.tray_details_cont {
    max-width: 40rem;
    margin: 0 auto;
}

#speakers_vol_list {
    background-color: transparent;
}

.speakers_vol_holder .vol_icon,
.ic_vol {
    float: left;
    font-size: 1.5em;
    font-family: bose;
    color: #000;
}

.bar_scrub {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    -webkit-transform-origin: left;
    -webkit-transform: scale3d(1, 1, 1);
}

.vol_handle {
    cursor: pointer;
    position: absolute;
    display: -webkit-flex;
    top: -0.625em;
    left: -1.250em;
    bottom: 0;
    width: 1.5em;
    height: 1.5em;
    pointer-events: auto;
    -webkit-transform: translateZ(0);

    padding: 0.625em;

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

.tray_details_master .tdDevice_vol,
.tray_details_member .tdDevice_vol {
    position: relative;
    width: 100%;
    display: -webkit-flex;
}

#tray_details_top {
    background-color: transparent;
    padding: 1rem 2rem 3rem 2rem;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

#tray_details_bottom {
    background-color: #f2f2f2;
    padding: 1rem 2rem 2rem 2rem;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

.play_all_cont {
    background-color: #f2f2f2;
    border-top: 1px solid rgba(204, 204, 204, 0.5);
}

#or_add_individually {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: .85rem;
}

.play_all_cont .play_all_wrapper {
    width: 100%;
    position: relative;
    display: -webkit-flex;
    height: 100%;
    z-index: 30;
    padding: 0 2rem;
}

.play_all_cont .info_center {
    padding: 0;
    width: 100%;
}

.play_all_cont .but_text {
    max-width: 20rem;
    min-height: 2.5rem;
    margin: 0 auto;
    border: solid 1.5px #000000;
    border-radius: 6.25rem;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.125rem;
    background-color: #111111;
    cursor: pointer;
    -webkit-transform: translateY(-1.25rem);
    -moz-transform: translateY(-1.25rem);
    -ms-transform: translateY(-1.25rem);
    -o-transform: translateY(-1.25rem);
    transform: translateY(-1.25rem);
    z-index: 1000;
}

#tray_details_mid {
    display: none;
    text-align: center;
    padding: 0.2em;
    border-bottom: solid #ddd 1px;
}

#tray_details_singleHelp {
    text-align: center;
    border-bottom: solid #ddd 1px;
}

.add_remove {
    cursor: pointer;
    font-family: bose;
    margin-left: 1rem;
    font-size: 1.25rem;
}

.master_speaker_img_hold {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin-bottom: 0.5rem;
}

.slave_count_holder {
    font-size: 2.5em;
    margin: auto;
    font-weight: bold;
}

.ibut_remove,
.ibut_add {
    cursor: pointer;
}

#tray_details_top .ibut_add,
.tray_details_master .ibut_remove {
    display: none;
}

#tray_details_bottom .controlls {
    display: none;
}


.title_hold {
    display: -webkit-flex;
    -webkit-align-items: center;
    position: relative;
}

.ic_power :hover,
.ic_settings:hover,
.ic_arrow_up:hover {
    color: #000;
}

.ic_power .offline {
    pointer-events: none;
}

.play_all_cont .but_text.but_on,
.but_on {
    background: #000;
    color: #fff;
}

/*not sure why we have two classes, but need to target silent in order to add opacity to button*/
.but_off,
.but_off_silent {
    opacity: .3 !important;
    cursor: default;
}

#trayPlay_tags {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin: auto;
    overflow: hidden;
    pointer-events: none;
}

#tray_min_label {
    height: 4rem;
    flex: 1;
    -webkit-flex: 1;
}

.offline .title_hold,
.offline .controls,
.offline .presets.right {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.offline .title_hold,
.offline .controls {
    opacity: 0.3;
}

.offline .play_all_wrapper {
    pointer-events: none;
    cursor: default;
}

.play_but_off .but_text {
    background-color: #909090;
    border: solid 1.5px #909090;
}

.offline #tray_min_label.multiple_devices {
    opacity: 1;
}

.offline .vol_handle {
    cursor: default;
}

.offline .browse {
    display: none;
}


/**        **/


/** BROWSE **/


/**        **/

#viewport {
    width: 100%;
    height: 100%;
}

h1 {
    margin: 0.5rem 0 1rem 1rem;
    font-weight: normal;
    font-size: 1rem;
    letter-spacing: 1.6px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel_search h1 {
    font-size: 0.813rem;
}

h2 {
    font-weight: normal;
}


/* nav panels */

.browse {
    z-index: 5;
}

.panel_search {
    z-index: 4;
}

.layout h1,
ul>h1 {
    display: -webkit-box;
    margin-bottom: 0.75rem;
    margin-top: .75rem;
    margin-left: 1.25rem;
    /* matches .master_header styles */
    margin-right: 1.25rem;
    /* matches .master_header styles */
}

ul>h1 {
    /* used in Recents */
    margin-bottom: .25rem;
    /* .75rem total - .5rem item padding */
    margin-top: 1rem;
    /* 1.5rem total - .5rem item padding */
}

#content_browse .nav_panel.legacyList .nav_sep .nav_item_text {
    font-weight: bold;
}

#content_browse .nav_panel.legacyList .nav_sep .nav_item_hold,
#content_browse .nav_panel.legacyList .nav_sep .nav_item_hold .nav_item_text {
    min-height: auto;
    padding: 0;
    margin: 0;
}

#content_browse .nav_panel.legacyList .nav_item_wrap.noResults {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding-right: 1.25rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

#content_browse .nav_panel.legacyList .nav_item_wrap.noResults .nav_item_text {
    color: #666;
    font-size: .6875rem;
    white-space: normal;
    padding-right: 0;
}

#content_browse .nav_panel.legacyList .nav_item_wrap.noResults .nav_item_img {
    background-color: transparent;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    margin-left: 0.625rem;
    /* 3.875rem(normal image width) - 2rem(width) - 1.25rem(padding-left)*/
}


/** List/Tracks Layout **/

.list {
    margin-left: 1.25rem;
    /* matches .master_header styles */
    margin-right: 1.25rem;
    /* matches .master_header styles */
}

#content_browse .nav_sep,
.panel_search .layout>h1 {
    padding: 0.875rem 1.25rem;
    margin: 0;
    min-height: auto;
    background-color: rgba(0, 0, 0, 0.05);
    font-weight: bold;
}

#content_browse .nav_sep .nav_item_text {
    font-weight: bold;
}

#content_browse .list {
    margin: 0;
}

#content_browse .nav_sep:first-child {}

.nav_sep .nav_item_text {
    padding-left: 0 !important;
    color: #000 !important;
    letter-spacing: 1.6px !important;
    font-size: 0.8125rem;
    font-weight: normal;
}

.list .nav_item_hold *,
.nav_panel.legacyList .nav_item_hold * {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.list .nav_item_sub,
.nav_panel.legacyList .nav_item_sub {
    color: #737373;
}

.list .nav_item_img,
.nav_panel.legacyList .nav_item_img {
    display: -webkit-box;
    -webkit-box-align: center;
}

#content_browse .list .more {
    position: absolute;
    right: 0.5rem;
    top: calc(50% - 1rem);
    bottom: calc(50% - 1rem);
    font-size: 2rem;
    color: #ccc;
}

.list .nav_item_wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.list .nav_item_wrap,
.nav_panel.legacyList .nav_item_wrap {
    display: -webkit-box;
}

.nav_panel.legacyList .nav_item_wrap {
    padding-left: 1.25rem;
    /* matches .master_header styles */
    padding-right: 1.25rem;
    /* matches .master_header styles */
}

.list .nav_item_sub,
.list .nav_item_text,
.nav_panel.legacyList .nav_item_sub,
.nav_panel.legacyList .nav_item_text {
    width: -webkit-calc(100% - 2rem);
    padding: 0 0.5rem 0 0;
    max-width: -webkit-calc(100% - 2.1rem);
    /* leave half of the "more" button space */
}


/*** Tile Ribbon Layout ***/

.ribbon {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-bottom: 1.5rem;
    /* ribbon padding changed to tile (first and last) margin */
}

.ribbon>.inside {
    display: table;
    overflow-y: hidden;
    max-height: 100%;
}


/*** Tile Wrap Layout ***/

.tile_flow {
    padding: 0 -webkit-calc(1.25rem - 1%);
    /* left/right matches .master_header styles, minus the tile margin */
    -webkit-box-sizing: border-box;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-around;
    -webkit-flex-wrap: wrap;
}

.tile_flow .nav_header_section {
    height: auto;
}

.tile_flow .tile {
    margin-bottom: 21px;
}

.tile_flow .nav_header_section .tile {
    margin-bottom: 0;
}


/* Tile Styles */

.tile {
    /* width in rem instead of vw to keep width constant and because of scroller width calculation issues */
    width: 10rem;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: top;
    -webkit-flex-basis: auto;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
    /*VEGAS TODO: possibly a line here for older devices? **/
    /* outline: 1px solid #E5E5E5; */
}

.tile.spacer {
    height: 1px;
    box-shadow: none;
    margin: 0;
}

.ribbon .tile {
    margin-right: 0.45rem;
    /** Give the tiles a slight left and bottom margin so the box shadow effect renders **/
    margin-bottom: 0.1rem;
}

/* ribbon padding changed to tile (first and last) margin */
.ribbon .tile:first-child {
    margin-left: 1.15rem !important;
}

.ribbon .tile:last-child {
    margin-right: 1.25rem !important;
}

.tile_flow .tile {
    margin-right: 1%;
    margin-left: 1%
}


/* VEGAS TODO: Define styles for selected tiles */


/*.tile_flow > .tile,*/

.tile_flow>.half {
    margin-right: 0;
}

.tile>.image,
#stationDrag>.image {
    overflow: none;
    background-color: #d8d8d8;
    background-size: cover;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    /* width in rem instead of vw to keep width constant and because of scroller width calculation issues */
    width: 10rem;
    height: 10rem;
    position: relative;
    top: 0;
    left: 0;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    cursor: pointer;
}



/*Override tile size for tablets/larger devices*/

@media screen and (min-device-width: 600px) {
    .tile {
        width: 12.3rem;
    }

    .tile>.image {
        width: 12.3rem;
        height: 12.3rem;
    }
}

@media screen and (min-device-width: 300px) and (max-device-width: 600px) {
    body.Android_override .tile {
        width: 9rem;
    }

    body.Android_override .tile>.image {
        width: 9rem;
        height: 9rem;
    }
}



/* Hide hamburger in landscape view */
.autoArt {
    height: 100%;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    padding: 10%;
}

.autoArt .sourceIcon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.tile>.image>.autoArt {
    /* Removed but saved in case we want to use an image background in the future
    background-blend-mode: multiply;
    -webkit-background-blend-mode: multiply;*/
    /*position: absolute;
    top: 0;
    left: 0;*/

    z-index: 5;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
}

.tile>.image>.autoArt+.iconWrapper {
    z-index: 5;
}

.tile>.image>.autoArt>.title {
    font-size: 70px;
    color: #fff;
}

.icon {
    font-family: bose;
}

#content_browse .icon {
    z-index: 10;
}

#content_browse .nav_header .icon {
    /*position: absolute;*/
}

#content_browse .tile .image .iconWrapper {
    position: absolute;

    top: 0;
    right: 0;
    padding: .75rem;
}

.iconWrapper .icon {
    padding: .225rem;

    font-size: 1.6rem;

    text-align: center;
    border: 2px #fff solid;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.nav_source_spotify .tile .iconWrapper {
    display: none;
}

#content_browse .half .icon {
    font-size: 1.7rem;
    width: 1.7rem;
    -webkit-box-sizing: content-box;
}

#content_browse .tile .footer.icon {
    font-size: 1rem;
}

.image .icon {
    color: #fff;
    text-transform: none;
}

.tile>.image>.tileList {
    color: #fff;
    font-family: bose;
    font-size: 130px;
}

.tile>.footer,
.half {
    position: relative;
    top: 0;
    left: 0;
    padding: 0.4375rem 2rem 0 0.4375rem;
    -webkit-box-sizing: border-box;
    background-color: #fff;
}

.tile>.footer {
    height: 3.5rem;
}

.half {
    background-color: #e9e9e9;
    padding: 0;
}


/* any text/icons in a half tile should be black */

.half * {
    display: block;
    position: relative;
    color: #000;
    text-align: center;
    vertical-align: middle;
}

.text_shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.half .icon {
    font-size: 3em;
    top: 0;
    right: 0;
    margin-top: 0;
    padding-bottom: .5rem;
}

.tile>.footer>h1,
.half h1 {
    white-space: normal;
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.6px;
    color: #000000;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: auto;
    margin: 0;
}

.half h1 {
    padding-top: 0.2em;
    text-transform: uppercase;
    font-weight: bold;
    text-transform: uppercase;
    font-weight: bold;
}

.tile>.footer>h2 {
    padding: 0;
    opacity: 0.66;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.1;
    letter-spacing: 0.3px;
    color: #737373;
    white-space: nowrap;
    font-weight: normal;
}

.tile>.footer>.more {
    color: #ccc;
    font-size: 1.7rem;
    width: 1.375rem;
    position: absolute;
    bottom: 0;
    right: .5rem;
    line-height: 2.2rem;
}

.tile>.footer>.explicit {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 12px;
    height: 12px;
    border: 1px solid #ff0000;
    -webkit-box-sizing: border-box;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    font-size: 8px;
    letter-spacing: 0.4px;
    color: #ff0000;
}

.nav {
    cursor: pointer;
}

.tile>.nav>span {
    font-size: 4rem !important;
    margin-top: 10%;
}

.sub_header .half {
    max-width: none;
    width: -webkit-calc(50% - 1px);
    height: 5rem;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.sub_header .center {
    width: 100%;
}

.sub_header .disable,
.sub_header .disable>* {
    color: #d1d1d1;
    cursor: default;
}

.sub_header .disable img {
    opacity: 0.1;
}

.nav_header_section {
    width: 100%;
    -webkit-box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    position: relative;
    top: 0;
    left: 0;
}

.nav_header_section .ibut,
.nav_header_section .title,
.nav_header_section .title * {
    vertical-align: middle;
    display: inline;
}

.nav_header_section .ibut {
    font-family: bose;
}

.nav_header_section .ibut.right {
    text-align: right;
}

.nav_header_section .ibut.hidden {
    display: none;
}

.nav_content {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/* This can be used to lock the native scroll on a container */
.lockScroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.nav_content>h1:after {
    content: ' >';
}

.nav_header * {
    line-height: 3.75rem;
}


/* content placeholder css */

.left {
    float: left;
}

.right {
    float: right;
}

.center {
    text-align: center;
    vertical-align: middle;
}


/* NOW PLAYING */

#play_msg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    cursor: default;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}

#content_placeholder .nav_content {
    height: calc(100% - 4rem);
    top: 3.8rem;
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
}

#content_placeholder.scrollable_placeholder .nav_content {
    position: absolute;
    top: 0;
    height: 100%;

}

#content_placeholder .play_msg_hold {
    margin: 0%;
}


/*Pandora Sort Filters*/

.dbutStation_disable {
    border-radius: 4px;
    border: solid 1px #d1d1d1;
    color: #d1d1d1;
}

.dbutStation_enable {
    border-radius: 4px;
    border: solid 1px rgba(0, 0, 0, 0.8);
    color: rgba(0, 0, 0, 0.8);
}

.dbut_dropDown {
    word-spacing: normal;
    position: relative;
    text-align: center;
    padding: .25em .7em .2em;
    cursor: pointer;
    text-transform: uppercase;
    color: #888888;
    font-size: 0.875rem;
    font-weight: bold;
    border: 0;
    height: 2.625rem;
    display: -webkit-flex;
    -webkit-align-items: center;
}

.dbut_dropDown:hover {
    background-color: #d8d8d8;
}

#musicservices_filter .dbut_stationName {
    display: table;
    width: 4rem;
}

#musicservices_filter {
    padding: 0 11%;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    -webkit-align-items: center;
    min-width: 0;
}

.filter_wrapper {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    border-bottom: 4px solid transparent;
}

.filter_on {
    border-bottom: 4px solid #000;
}

#dropDown .filter_wrapper {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.sub_header hr {
    opacity: 0.5;
    margin-top: auto;
}

.dbut .icon {
    font-size: 2.1em;
}


/* Divider styles */


/* Pandora specific? */

.divider {
    font-family: BoseText;
    padding: 0;
}

.divider .but .icon {
    position: relative !important;
    display: inline-block;
}

.force_center .but .icon {
    right: 0;
}

.divider hr {
    width: 100%;
    margin: 0 5.6%;
}

.divider .but .but_text,
.divider .but .icon {
    font-size: 12px;
    font-style: normal;
    border: none;
}

.divider .but .but_text {
    padding: 0;
    margin: 0;
    min-width: 7em;
    min-height: 3em;
    line-height: 3em;
    font-family: BoseText-Light;
}

.force_center {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: #f9f9f9;
}

.force_center .but {
    letter-spacing: 0.5px;
}

.but .icon {
    /*padding-left: .4em;*/
    top: 0;
}


/** SEARCH **/

.panel_search .ibut_back {
    flex-basis: initial !important;
    -webkit-flex-basis: initial !important;
}

#content_browse .nav_item_wrap {
    padding: 0.5rem 0rem 0.5rem 1.25rem;
}

.nav_item_wrap.list_item_ind {
    background: #e9e9e9;
    text-transform: uppercase;
    font-size: 0.813rem;
}

.nav_item_wrap .nav_item_text {
    color: #333;
}


.nav_item_img,
.nav_item_auto_art {
    height: 3.875rem;
    min-height: 3.875rem;
    width: 3.875rem;
    min-width: 3.875rem;
    margin-right: 1.25rem;
    border: 0 !important;
    background-color: #fff;
}

.nav_item_img.display_like_icon {
    background-size: 2rem 2rem;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    height: 3.125rem;
    min-height: 3.125rem;
    width: 3.125rem;
    min-width: 3.125rem;
}


.nav_item_auto_art {
    color: #fff;
}

.nav_item_auto_art .autoArt .title {
    font-size: 1.875rem;
}

.nav_item_wrap .nav_item_text {
    font-size: .875rem;
    color: #333;
    letter-spacing: 0.8px;
    line-height: 1.3em;
}

.nav_item_sub {
    font-size: .6875rem;
    color: #737373;
}

.nav_item_sub_time {
    margin: 0 .25rem;
}

.nav_item_sub_source {
    flex: none;
    -webkit-flex: none;
}


/** Search Filters **/

.filters {
    display: -webkit-flex !important;
    display: flex !important;
    padding: 0 5rem;
    border-bottom: rgba(0, 0, 0, 0.5);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    -webkit-justify-content: space-between;
    -webkit-flex-wrap: wrap;
}

.filters .icon {
    position: relative !important;
    display: inline-block;
    margin: 1rem 0;
    height: 3rem;
    right: 0 !important;
    color: #d8d8d8;
    text-shadow: none;
}

.filters .icon .selected {
    color: #000 !important;
}


/**
    Browse placeholder
**/

#content_placeholder {
    z-index: 3;
    height: 100%;
    width: 100%;
}

#content_placeholder .content {
    position: fixed;
    z-index: 2;
    height: 100%;
    width: 100%;
    margin-top: -3.8em;
}


/**
    Fake Search for Spotify uber page
**/

.fake_search {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    width: -webkit-calc(100% - 2.5rem);
    /* matches .master_header styles */
    height: 48px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #ffffff;
    margin: 1rem 1.25rem 0 1.25rem;
    /* left/right matches .master_header styles */
    font-size: 0.875rem;
}

.fake_search * {
    color: #888 !important;
}

.fake_search .left {
    margin-left: 1rem;
}

.fake_search .right {
    margin-right: 1rem;
    font-size: 1.5625rem !important;
}


/*
    Hero Sub Header
*/

.hero_banner {
    position: relative;
    overflow: hidden;
}

body.performant_gui:not(.isQT) .hero_banner .blurred_art_filter {
    background-color: rgba(0, 0, 0, 0.6);
}

.hero_banner .blurred_art_filter {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: hidden;
    display: block;
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.hero_banner .art_container {
    display: none;
}

/* Don't blur hero image on Mac (Mac blur doesn't work properly on certain versions) */
body.performant_gui:not(.isQT) .hero_banner .art_container {
    display: block;
    filter: blur(20px);
    -webkit-filter: blur(20px);
}

body.performant_gui:not(.isQT) .hero_banner .art_container div {
    position: absolute;
    z-index: 0;
    height: -webkit-calc(100% + 60px);
    width: -webkit-calc(100% + 60px);
    margin-left: -30px;
    margin-top: -30px;
    display: block;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero_banner .info_wrapper {
    position: relative;
    z-index: 2;
}

.hero_img {
    display: block;
    width: 10rem;
    height: 10rem;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
}

.stretch_img {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    overflow-x: hidden;
}


/* increase the size of hero image on larger screens */

@media screen and (min-device-width: 600px) {
    .hero_img {
        width: 15rem;
        height: 15rem;
    }
}

.hero_banner h2 {
    text-align: center;
    color: #fff;
    padding: 2rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 0;
}

.hero_banner .more {
    position: absolute;
    top: 0;
    right: 0.5rem;
    color: #d8d8d8;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 2rem;
}


/** hero play but **/

.hero_play {
    background-color: #e9e9e9;
    height: 4rem;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.hero_play h1 {
    text-align: center;
    font-weight: bold;
    margin: 0;
}

.hero_play h1 .icon {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.7rem;
    vertical-align: middle;
}

.circle {
    border-radius: 50%;
    -webkit-border-radius: 50%;
}


/**
    SETTINGS and MESSAGES
**/

#content_settings .nav_item_wrap {
    padding: 0;
    min-height: 3.5em;
    width: 100%;
    color: #b2b2b2;
    cursor: pointer;
    overflow: hidden;
}

#content_settings .nav_header>.ibut {
    position: absolute;
    top: 20px;
    left: 21px;
    height: -webkit-calc(100% - 20px);
    font-size: 30px;
    color: #000;
    display: inline-flex;
    -webkit-align-items: center;
}

#content_settings .nav_header>.ibut.ibut_close {
    left: auto;
    right: 21px;
}

#content_settings .nav_item_wrap.vAlign.item_pad_norm.header.nav_item_off {
    background-color: #e9e9e9;
    cursor: default;
    padding: 0 0.75rem 0 0.75rem;
}

#content_settings .nav_item_wrap.vAlign.item_pad_norm.header.nav_item_off>.nav_item_text {
    font-weight: bold;
}


/*#content_settings .nav_header_section { width: 60%; height: -webkit-calc(100% - 20px); border: 0; background: transparent; position: absolute; top: 20px; left: 20%; display: flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; }*/

#message .nav_header_section .icon,
#content_settings .nav_header_section .icon {
    color: #000;
    font-family: bose;
    vertical-align: center;
}

.page_body {
    margin: 0 auto;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    min-height: -webkit-calc(100% + 1px);
}

.nav_panel.legacyList .page_body {
    max-width: none;
}

.bd_body {
    max-width: 40rem;
    margin: 0 auto;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    min-height: -webkit-calc(100% + 1px);
}

.nav_list {
    padding: 1rem 0;
    position: relative;
    -webkit-flex: 1;
    overflow: visible;
}

#message .nav_list {
    width: -webkit-calc(100% - 2rem);
    text-align: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
    font-size: .9rem;
}

#message .nav_list,
#message .content_panel footer,
#message img.dialog_img {
    width: 100%;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

#message .nav_list h3 {
    font-size: 1rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 1.75rem 0 1rem;
    padding: 0 1.2rem;
}

#message .nav_list.vert_align #dialog_copy {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
}

#message .nav_list #dialog_copy {
    margin-bottom: 2rem;
}

#message .nav_list #dialog_copy .dialog_icon {
    font-family: bose;
    font-size: 2.25rem;
}

#message .nav_content {
    padding: 0 1rem;
}


/*
    *** FEEDBACK PROMPT AND SCREENS ***
    *** START ***
*/
#message #dialog_copy.feedback {
    width: 100%;
    margin-bottom: 0;
}

#message .feedback .dialog_icon {
    display: none;
}

#quick_message.feedback .input {
    display: -webkit-flex;
    display: flex;
    border-top: 1px solid #d8d8d8;
    margin: 1rem 2rem 0;
}

#message .feedback .input {
    display: -webkit-flex;
    display: flex;
}

#message .feedback .input .rating,
#quick_message.feedback .input .rating,
#quick_message.feedback .input .dismiss {
    margin: auto;
    padding: 1.2rem 0 .5rem;
    cursor: pointer;
    -webkit-flex: 1;
    flex: 1;
    font-weight: bold;
    text-transform: uppercase;
}

#message .feedback .input .rating {
    padding: 2.4rem 0;
}

#message .feedback .input .rating img {
    width: 2rem;
}

#message .feedback h3 {
    text-transform: none;
}

#message .feedback a {
    text-decoration: underline;
}

#quick_message.feedback h4 {
    margin: .2rem 0 .4rem;
}

#message .feedback_form #feedbackEmailCheckbox {
    margin-bottom: 0;
}

#message .feedback_checkboxes h4 {
    background: #eee;
    font-size: .8rem;
    font-weight: normal;
    padding: .5rem 0;
    margin: 1.5rem 0;
}

#message .feedback_checkbox {
    text-align: left;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

#message .feedback_checkbox input[type=checkbox] {
    font-size: 1.5rem;
    border: 1px solid #ccc;
    margin: 1rem .5rem 1rem 0;
}

#message .feedback_checkbox label {
    padding: 1rem 0;
    vertical-align: middle;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

#message .feedback_form textarea {
    border: 1px solid #ccc;
}

#quick_message.feedback {
    background: #fff;
    color: #000;
    border-bottom: 2px solid #000;
}

/*
    *** END ***
    *** FEEDBACK PROMPT AND SCREENS ***
*/


/* regular message and main settings scrollbar */
#group_setup_view ::-webkit-scrollbar,
#main_settings::-webkit-scrollbar,
#message::-webkit-scrollbar {
    background-color: rgba(250, 250, 250, 1);
}

#group_setup_view ::-webkit-scrollbar-thumb,
#main_settings::-webkit-scrollbar-thumb,
#message::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 1);
    border-radius: 7px;
}


/* negative message */

#message.negative .nav_header,
#message.negative .nav_panel,
#message.negative::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0.85);
}

#message.negative .ibut,
#message.negative h1,
#message.negative .nav_content {
    color: #ccc;
}

#message.negative h4 {
    color: #fff;
}

#message.negative .nav_header_section .icon {
    color: #b90000;
}

#message.negative .but_text {
    color: #bbb;
}

#message.negative .but {
    border-color: #bbb;
}

#message.negative .but.selected .but_text {
    color: #000;
}

#message.negative .but.selected,
#message.negative::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 7px;
}

#message .dialog_icon {
    font-family: bose;
    font-size: 1.7rem;

}

#group_setup_view .nav_header_section h1 {
    margin: 0;
    white-space: normal;
    line-height: 1.5rem;
    text-align: center;
}


/*#content_settings #nav_panel.nav_header*/

#group_setup_view .nav_content,
#content_settings .nav_content {
    height: 100%;
}

#content_settings .nav_item_wrap,
#content_settings .row,
#content_settings .page_body .row.but {
    /* left/right matches .master_header styles */
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    cursor: pointer;
    overflow: hidden;
}

#content_settings .nav_item_wrap,
#content_settings .row,
#content_settings .page_body .row.but,
#content_placeholder .nav_item_wrap {
    padding: 0 1.25rem 0 1.25rem;
}

#content_settings .nav_item_sel {
    background: #fff !important;
}

#content_settings .nav_item_hold,
#content_settings .row .labels {
    margin: 14px 0;
    -webkit-flex-grow: 1;
    width: 50%;
}

#content_settings .row .labels.fullwidth {
    width: 100%;
}

#group_setup_view .nav_item_text,
#content_settings .nav_item_text,
#content_placeholder .nav_item_text,
#content_settings .row .name {
    color: #333333;
    font-size: .875rem;
    letter-spacing: .8px;
    font-weight: 100;
    text-transform: none;
    margin: 20px 0 20px 0;
    -webkit-flex-grow: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#content_settings .nav_item_hold .nav_item_text,
#content_settings .row .labels .name,
#content_settings .row .actions .name {
    text-transform: none;
    margin: 0 0 10px 0;
    height: auto;
    width: 100%;
}

#content_settings .nav_item_hold .nav_item_sub,
#content_settings .row .labels .value {
    color: #333333;
    font-size: 1.125rem;
    letter-spacing: 1px;
    font-weight: 100;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

#release_notes_html .row .labels .value {
    text-transform: none;
}

#release_notes_html .row .labels .value ul {
    padding-left: 2.5rem;
    list-style: disc;
}

#content_settings .nav_item_hold .nav_item_sub {
    font-size: 0.6875rem;
}


#content_settings .row .labels .body {
    color: #333333;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 100;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

/* control description for system settings */
.control_desc,
.switch_desc {
    font-size: .75rem;
    font-weight: normal;
    font-style: italic;
    line-height: 1.5;
    color: #868686;
}

.switch_desc {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid #d8d8d8;
    cursor: default;
    pointer-events: none;
}

#main_settings .row.descriptive_switch {
    border: none;
}

/*
    MASTER HEADER
    -------------
    
    Common shared units:
    Header height: 3.75rem (60px in design comp)
    Gutters (l/r margin/padding throughout app): 1.25rem (20px in design comp)
    
    DOM usage:
    <div class="master_header">
        <div class="master_header_button"></div>
        
        <div class="master_header_content">
            <div class="master_header_icon"></div>
            <div class="master_header_headline"></div>
        </div>
        
        <div class="master_header_button"></div>
    </div>
*/

#message.negative .master_header {
    background-color: rgba(0, 0, 0, 0.85);
}

.master_header {
    width: 100%;
    min-height: 3.75rem;
    padding: 0;
    border: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

body.performant_gui .master_header {
    -webkit-backdrop-filter: blur(4.8px);
    transform: translateZ(0);
}

#content_browse .panel_search .nav_header_section,
.master_header.search {
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    padding-left: 1.25rem;
}

.master_header.search .nav_header_search {
    position: relative;
    height: 3rem;
    -webkit-flex-grow: 1;
}

.master_header.search form {
    width: 100%;
    height: 100%;
    line-height: 0;
}

.master_header.search .nav_header_search_input {
    position: relative;
    font-size: 0.875rem;
    line-height: 0.875rem;
    color: #888;
    margin: 0;
    padding: 0 1rem;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: #fff !important;
    border: solid 1.5px rgba(79, 79, 79, 0.22);

    display: -webkit-inline-flex;
    -webkit-align-items: center;
}

.master_header.search .nav_header_search_input::-webkit-input-placeholder {
    font-size: 0.875rem;
    line-height: 0.875rem;
    color: #888;
    border: solid 1.5px transparent;
}

.master_header.search .nav_header_search_input:focus {}

.master_header .nav_header_submit_sel {
    color: #ccc;
}

.master_header .master_header_button,
.master_header .nav_header_submit {
    height: 100%;
    width: 4.3rem;

    text-align: center;
    font-family: bose;
    color: #000;
    font-size: 2.4rem;
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-inline-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    cursor: pointer;
}

.master_header .master_header_button.right {
    position: absolute;
    left: auto;
    right: 0;
}

.master_header .master_header_button.hidden {
    display: none;
}

.master_header.search .master_header_button,
.master_header.search .nav_header_submit {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    left: auto;
    -webkit-flex-grow: 0;
    -webkit-flex-shrink: 0;
    min-width: 0;
    font-weight: normal;
    font-size: 1.8rem;
}

.master_header .master_header_content {
    width: -webkit-calc(100% - 8.6rem);
    height: 100%;
    min-height: 3.75rem;
    position: relative;
    top: 0;
    left: 4.3rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.master_header .master_header_content * {
    display: inline-block;
}

.master_header .master_header_content .master_header_icon_wrapper {
    padding-left: 0.625rem;
}

.master_header .master_header_content .master_header_icon {
    width: 1.438rem;
    height: 1.438rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.master_header_icon {
    font-size: 1.6rem;
}

.master_header .master_header_content .master_header_headline_wrapper {
    padding-right: 0.625rem;
}

.master_header .master_header_content .master_header_headline_wrapper,
.master_header .master_header_content .master_header_headline_wrapper * {
    max-width: 100%;
}

.master_header .master_header_content .master_header_headline {
    white-space: normal;
    word-break: break-word;
    overflow: auto;
    line-height: 1.15rem;
    text-transform: none;
    font-weight: bold;
    font-size: 0.813rem;
    letter-spacing: 0.125rem;
    margin: 0 0 0 0.3rem;
    padding: .26em 0 0 0;
    max-width: 100%;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Special logo sizing for lockup browse headers images */
#content_browse .master_header_icon.lockup {
    height: 1.5625rem;
    width: 5.0625rem;
}

/* QUICK MESSAGING */

#quick_message {
    background: #000;
    min-height: 1.2em;
    /*border-bottom: 2px solid #61BDFA;font-weight: bold;*/
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 200;
    padding: .55em 0 .45em;
    font-size: .8em;
    -webkit-transform: translate3d(0, -2.5em, 0);
    transform: translate3d(0, -2.5em, 0);
    font-weight: lighter;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-align: center;
    color: #fff;
}

.iOS_override #quick_message {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

#quick_message.show {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

/*
    MASTER HEADER ICONS
    -------------------
    Resize individual icons: the following styles may be removed if the bose font is updated 
    to fix relative icon sizes. Replace with a single font-size declaration in .master_header_button.
*/

.master_header_button.ibut_srcs {
    font-size: 2rem;
}

.master_header_button.ibut_back {
    font-size: 1.8rem;
}

.master_header_button.presets {
    font-size: 2.6rem;
}

.master_header_button.ibut_close,
.master_header_button.ibut_back.right {
    font-size: 2.2rem;
}

#main_play .master_header_button.arrow {
    font-size: 1.75rem;
}

#volume_popup {
    position: absolute;
    top: calc(50% - 5rem);
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    width: 17rem;
    min-height: 8rem;
    background-color: rgba(0, 0, 0, .9);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    padding: 1rem;
}

#volume_popup .label {
    font-size: .8rem;
    margin: .5rem 0 .9rem;
}

#volume_popup .speaker {
    margin: .9rem;
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 2px;
    word-wrap: break-word;
}

#volume_popup #volume_popup_background {
    margin: 1.5rem 1rem 1rem;
    width: 13rem;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.38);
    overflow: hidden;
}

#volume_popup #volume_popup_bar {
    width: 13rem;
    height: 2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 1);
}

#page_about_legal .row {
    cursor: default;
}

/*
 Speaker offline; select another speaker screen
*/
#placeholder_speaker_offline_content {
    width: 100%;
    top: 0;
    text-align: center;
    position: absolute;
    margin: 0 auto;
}

#speaker_not_found_page {
    width: 100%;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1rem;
}

#speaker_not_found_speaker_list {
    font-size: 0.8rem;
    margin: 0 auto 0.7rem auto;
}

#speaker_not_found_speaker_list li,
#speaker_not_found_page .speaker_list_header {
    text-align: center;
    vertical-align: middle;
}

#speaker_not_found_page li.but {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    font-size: 0.9rem;
    margin-left: auto;
    margin-right: auto;
    border-top: solid 1.5px #d8d8d8;
    text-transform: none;
    cursor: pointer;
}

#speaker_not_found_page .nav_item_text {
    margin: 0;
}

#speaker_not_found_page h3 {
    max-width: 80%;
    margin: 1.5rem auto;
}

#speaker_not_found_page .speaker_list_header h3 {
    height: 100%;
    margin: 1rem auto !important;
    display: inline-block;
    vertical-align: middle;
}

#speaker_not_found_page .but:first-child {
    border-top: none;
}

#speaker_not_found_page .but:last-child {
    border-bottom: solid 1.5px #d8d8d8;
}

#speaker_not_found_page .but * {
    display: inline-block;
    text-align: left;
}

#speaker_not_found_page .still_looking_msg ul {
    max-width: 70%;
    padding-left: 2rem;
    margin-left: auto;
    margin-right: auto;
    list-style: initial;
    text-align: left;
}

@media screen and (min-device-width: 600px) {
    #speaker_not_found_page .still_looking_msg ul {
        max-width: 90%;
    }

    #speaker_not_found_page h3 {
        max-width: 90%;
        margin: 2rem auto;
    }
}

#speaker_not_found_page .still_looking_msg ul li {
    line-height: 1.9rem;
}

#speaker_not_found_page a {
    display: inline;
    cursor: pointer;
    text-decoration: underline;
}

#speaker_not_found_page .speaker_list_header {
    font-size: 0.9rem;
    font-weight: bold;
    background-color: #e9e9e9;
}

.other_speakers_online .no_speakers_online_msg,
.no_speakers_online .speaker_list_header,
.no_speakers_online #speaker_not_found_speaker_list,
.no_speakers_online .other_speakers_online_msg,
.no_speakers_online .still_looking_msg h3,
#viewport.device_tray #main_play .loader_container,
#viewport.device_tray #main_play #play_msg_hold_top,
#viewport.device_tray #main_play #but_msg_spkr_play,
#viewport.device_tray #main_play .msg_spkr_container,
#viewport.device_tray #main_play .alexa_learn_more,
#viewport.device_tray #main_play .play_msg_hold_bottom,
#viewport.device_tray #main_play .play_msg_update {
    display: none;
}

.no_speaker_online .no_speakers_online_msg {
    display: block;
}

/*Acesssibility Element to alert the user*/
#accessibilityAlert {
    width: 0;
    height: 0;
    margin: 0;
}

/* zipSideLoading CSS Changes */
#zipSideLoading {
    border-bottom: 1px solid #d8d8d8;
}

#zipSideLoading .row {
    border-bottom: none;
}

#zipSideLoading .row .labels,
#zipSideLoading .row .actions {
    margin-bottom: 0px;
}

#selectData {
    padding: 0.3rem 1.25rem 0.3rem 2.15rem;
    font-size: 0.7rem;
    color: #9acd32;
}

#zipSideLoading .value,
#selectData,
#zipSideLoading .but.clear {
    display: flex;
    display: -webkit-flex;
}

#input_zip_data,
#select_input_zip_data {
    border-radius: 4px 0 0 4px;
}

#zipSideLoading .but.clear {
    position: relative;
    padding: 0.9rem;
    border: none;
    border-radius: 0 4px 4px 0;
    background: #fff;
    justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

#zipSideLoading .clear .but_text {
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    color: #b90000;
    font-family: bose;
}

#page_develop_main .row .actions .but {
    width: 6rem;
}

#input_zip_data:not(:valid)~.clear {
    display: none;
}

#input_zip_data:not(:valid) {
    border-radius: 4px;
}

#select_input_zip_data~.but.clear,
.select~.but.clear {
    display: flex !important;
    display: -webkit-flex !important;
}

#select_input_zip_data~.ul_options {
    position: fixed;
    width: calc(100% - 8.5rem - 10px);
}

select[name="nasuser"]~.ul_options {
    position: fixed;
    width: calc(100% - 2.5rem);
}

#list_img_loading {
    background-size: 60% 60% !important;
}

.list_loading,
.tile.loading {
    background-color: #e9e9e9 !important;
}

.list_loading .nav_item_text,
.tile.loading .loading_text {
    font-weight: bold;
    letter-spacing: 0.8px;
}

.tile.loading .image,
.tile.loading .loading_text,
#list_img_loading {
    background-color: transparent;
}

.tile.loading .loading_text {
    text-align: center;
    height: 3.5rem;
    padding: 0.4375rem;
}

.iOS_override .chunking,
.Android_override .chunking {
    padding-bottom: 2.72rem;
}

#message_dialog .master_header_content {
    white-space: nowrap;
    color: #000;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.813rem;
    letter-spacing: 0.125rem;
    margin: 0 0 0 0.3rem;
    padding: .26em 0 0 0;
    overflow-y: hidden;
    display: block;
    text-align: -webkit-center;
}

/* Msg Content Scroll CSS Changes */

#message_dialog .page_body.content_scroll {
    height: 100% !important;
    min-height: 100% !important;
}

#message_dialog .page_body.content_scroll #dialog_copy .dialog_icon {
    display: none;
}

#msg_content_desc {
    text-align: left;
    line-height: 1.4rem;
    padding: 1.2rem;
    position: relative;
}

#msg_content_container {
    position: relative;
    overflow-y: auto;
}

#message_dialog .page_body.content_scroll #dialog_copy {
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    justify-content: center;
    -webkit-justify-content: center;
    margin-bottom: 0 !important;
    height: 100%;
}

#message_dialog .page_body.content_scroll #dialog_buttons .but {
    background-color: #000 !important;
}

#dialog_buttons {
    z-index: 9000 !important;
}

#message_dialog .page_body.content_scroll #dialog_buttons .but_text {
    color: #fff !important;
}

#message_dialog #dialog_buttons .but.disable {
    opacity: 0.5;
    pointer-events: none;
}

div.tooltip {
    color: #fff;
    font-weight: bold;
    position: absolute;
    font-family: BoseText;
    border-radius: 21px;
    font-size: 1rem;
    background-color: #43aaeb;
    max-width: 23rem;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
    min-height: 1.875rem;
    padding: 0.75rem;
    display: inline-flex;
    display: -webkit-inline-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    z-index: 100;
    letter-spacing: 0.03125rem;
    opacity: 0;
}

body.portrait div.tooltip {
    max-width: 22rem;
}

div.tooltip div {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    -webkit-background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 4px;
}

div.tooltip div.chevron_left {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAMAAAAootjDAAAARVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////9SnXPCAAAAFnRSTlMACQoVIiorLDFIbHh/ipCRzN7i6vD4ICrZPQAAAE9JREFUeNrNyDkSgCAQBMDxALxBwf3/U90ycmpNpeywQVwqM4/PItI/J+hw+XtWM/HH48wgmUHROQPVIirzxWrnv7+jtTeAbCJ7AzZOHV5crmUOP+qv//gAAAAASUVORK5CYII=);

}

div.tooltip div.chevron_down {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAqCAMAAADYrcjGAAABd1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGBgYAAAA6OjoAAAAAAAAAAAAAAABVVVUAAAAFBQUAAABaWloFBQVYWFgAAAAFBQUFBQUAAAAAAABwcHBNTU1HR0cAAAAAAABERERDQ0NCQkJAQEA8PDw3NzeTk5OioqKenp4xMTGPj4+Li4uKioqIiIiEhIR9fX10dHTJycm5ubnDw8O3t7e0tLSzs7OxsbGwsLDU1NTf39/f39/f39/c3Nzb29vd3d3o6Oja2trb29vq6urm5ubs7Ozq6uru7u7r6+vy8vLx8fHw8PDv7+/t7e329vbt7e37+/v8/Pz7+/v6+vr9/f3+/v7+/v7+/v7///9NeyCLAAAAfHRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKyssLC0uLzAwMTEzMzQ0NTU2ODk7PEFDRERFRkhMU1daXF5gY2RlaG53d3t7fH5/gIGTl6+wsbKysrOzs7S8vsDC2drb3N7f4+zz9PX2+fz9a6OURwAAAk1JREFUeNrN1edzmzAYBvBgjMTGYMDGOAbbODhp3aRp0qZJ9957p3vvPVP++Aos7EtfHH1sn4+vnt9J3EnH1L8Nx5WycByjBntkwvPlNDyZb7kDrfEjzpGRgEVJEjEinJtseQFlPSSMdiEWS6puVAxNFgWgx8crI0nJaoqIysMaR4aybrmeV3csTaJjaMkWsl5166Rmkhpfysa8IOl2I9yzNwp9x5BzDa1i1prt6OCOwLNUkbQyjBSrsetNkrw9NBPUKlRDq1peu3/mc/LrflivyAKflkplrDnBi4Tk3eE5Mqca2kZ3cOFb2rverKqIYlGvdX8mad4f29bONbTRwsXvWe1V4Gg4x0a9+zXJ8uH4INfQ7rw0tMnTcIyx7nbuJVSfGGlgL1O7cbZl02NzPFLt1vaHUE+wv2/EvikLFAtSxYuWn0BdbG/Ph64u5stktdqMV55DzRXY9cXIM2V6SdKtRc1p9degLkF7d6nnWyoef1V6x5zW7F9aQeT5CMDONKsafQJUI0l3A6AxQiK09siOtUH0vk3aVGVZqzLsBN1p2KbpNHsMW6wXopbvB/FisWXok0tzcTzYXWyZ+tT+1dUDVwotW388feTo1R/Flq0/nb/GtFA/o/rLFpatiyxTr1HNsGwNLVs/zu06sCzd6q88Gto7i71N74itdWc6Xn5A7Mat+cgHlqVtvzt78/XLc/22ZwHL0ppVnw47ncB3TRVYhhZExbAc17VNXcbAMjWSFFXTVFkEP222TjnGGAmEAsvSKc9CKLRsTzP1P+YP55/75ndfIAYAAAAASUVORK5CYII=);
}

div.tooltip span {
    text-align: center;
    display: inline-block;
}

#tray_details_bottom .tray_details_device .title {
    color: #000 !important;
}

.vol_row .title_hold.ibut_remove {
    border: 1px solid #000;
    border-radius: 200rem;
    font-weight: bold;
}

#main_vol_cont.in-zone-mode {
    right: 3.75rem !important;
}

body.portrait #main_vol_cont {
    display: none;
}

#main_vol_cont:not(.secondary_volume) .volume_icon {
    margin-right: 0.8rem;
}

body.offline .volume_row {
    opacity: 0.5 !important;
    cursor: default !important;
    pointer-events: none;
}

#artwork_peek:not(.disp_off)~.master_header_button.arrow.left {
    display: none;
}

#main_play.open .master_header_button.arrow.left {
    display: flex;
    display: -webkit-flex;
}

#tray_min_txt_wrapper {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row;
    flex-flow: row;
}

body.offline #tray_min_wrapper {
    opacity: 0.5;
}

#play_all_cont .but_off,
#play_all_cont .play_but_off {
    pointer-events: none;
}

#dev_tray_swiper-pagination {
    width: 100%;
}

#viewport:not(.device_tray) .dev_tray_speakers_slide {
    width: -webkit-calc(100% - 3.35rem) !important;
}

#viewport:not(.device_tray) .dev_tray_speakers_slide:not(.swiper-slide-active) .cardSpacing {
    display: none;
}

#viewport:not(.device_tray) #swiper-devices,
#viewport:not(.device_tray) .dev_tray_speakers_slide:not(.swiper-slide-active) {
    background: #fff;
    z-index: -1;
}

.dev_tray_speakers_slide.offline .speaker_src {
    background: #f2f2f2;
    color: #000;
    opacity: 0.3;
    pointer-events: none;
}

.dev_tray_speakers_slide.offline #but_power {
    opacity: 0.3;
    pointer-events: none;
}

.non_performant_gui #main_play,
.non_performant_gui #main_tray {
    transition: all 0s !important;
    -webkit-transition: all 0s !important;
}

.dev_tray_speakers_slide.offline #but_allPlay .but_text {
    background-color: #909090;
    border: solid 1.5px #909090;
}

.dev_tray_speakers_slide.offline #but_allPlay {
    pointer-events: none;
}

/* Alexa CSS Changes */

.alexa_icon {
    background: url(../images/sources/alexa.svg) no-repeat center;
    background-size: contain;
    margin: 1rem 0;
    height: 7rem;
    width: 100%;
}

.alexa_con span {
    font-size: 1.5rem;
}

.alexa_con~.play_msg_hold_bottom span,
footer form .row.big_button {
    padding: 0 !important;
}

.alexa_con~.play_msg_hold_bottom {
    opacity: 1 !important;
    height: 4rem;
    bottom: 4rem;
}

.alexa_learn_more {
    padding: 1rem;
    color: #fff;
    text-decoration: underline;
}

/*end*/

/* iPhoneX UI Changes */

/* accounting the top notch on iPhoneX */
body.iOS_override.iPhoneX {
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    /*Overriding with env if supports*/
    right: 0;
}

/* device tray cards */
body.iOS_override.iPhoneX #dev_tray_speakers {
    height: calc(100% - (6rem + constant(safe-area-inset-bottom)));
    height: calc(100% - (6rem + env(safe-area-inset-bottom)));
}

body.iOS_override.iPhoneX #tray_min_label {
    height: calc(4rem + constant(safe-area-inset-bottom));
    height: calc(4rem + env(safe-area-inset-bottom));
}

/* mainplay and maintray */
body.iOS_override.iPhoneX #main_tray {
    -webkit-transform: translateY(100%) translateY(-webkit-calc(-8rem - constant(safe-area-inset-bottom)));
    -webkit-transform: translateY(100%) translateY(-webkit-calc(-8rem - env(safe-area-inset-bottom)));
    transform: translateY(100%) translateY(calc(-8rem - constant(safe-area-inset-bottom)));
    transform: translateY(100%) translateY(calc(-8rem - env(safe-area-inset-bottom)));
}

body.iOS_override.iPhoneX #main_play {
    -webkit-transform: translateY(100%) translateY(calc(-7.9rem - constant(safe-area-inset-bottom)));
    -webkit-transform: translateY(100%) translateY(calc(-7.9rem - env(safe-area-inset-bottom)));
    transform: translateY(100%) translateY(calc(-7.9rem - constant(safe-area-inset-bottom)));
    transform: translateY(100%) translateY(calc(-7.9rem - env(safe-area-inset-bottom)));
    padding-bottom: calc(4rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
}

/* bottom drawer */
body.iOS_override.iPhoneX #volume_shade .volume_drawer_group,
body.iOS_override.iPhoneX .bbd #child_content {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

body.iOS_override.iPhoneX #quick_tour_hold {
    padding-top: calc(8.5rem - constant(safe-area-inset-bottom));
    padding-top: calc(8.5rem - env(safe-area-inset-bottom));
    height: calc(100% - (4rem + constant(safe-area-inset-bottom)));
    height: calc(100% - (4rem + env(safe-area-inset-bottom)));
}

/* message dialog and settings*/
body.iOS_override.iPhoneX #message footer,
body.iOS_override.iPhoneX #content_settings footer,
body.iOS_override.iPhoneX #group_setup_view footer {
    margin-bottom: calc(1rem + constant(safe-area-inset-bottom));
    margin-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* end */

.reset_service_desc {
    font-size: .85rem;
    font-weight: normal;
    font-style: italic;
    line-height: 1.5;
    color: #868686;
}

.reset_service {
    border: none !important;
    margin-bottom: 0 !important;
}

/* Favorites CSS */
#bbd_presets #child_content,
#bbd_favorites #child_content {
    height: 100%;
}

#add_remove_favorites,
#favorites_window,
#fav_list_items {
    width: 100%;
}

#favorites_window {
    margin-bottom: 2rem;
    border-top: 1.5px solid #ccc;
    margin-top: .5rem;
}

#add_remove_favorites ul {
    border: 1.5px solid #cfcfcf;
    border-left-style: none;
    border-right-style: none;
}

#add_remove_favorites {
    display: none;
}

.favorite_item {
    height: 4.5rem;
}

#fav_info {
    height: 4rem;
    width: calc(100% - 2rem);
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
}

#fav_info_image {
    height: 4rem;
    width: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
}

#fav_info_image span {
    font-family: bose !important;
    color: #ccc;
    font-size: 2.25rem;
}

#fav_info_desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    height: 4rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    width: calc(100% - 4rem);
}

#fav_info_desc span {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    max-height: 4rem;
    color: #737373;
}

#favorites_window h1.nav {
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.5px;
    color: #000000;
    font-size: 1em;
    margin-bottom: 0.65rem;
}

#favorites_window .footer h1 {
    -webkit-line-clamp: 1;
    max-height: 1rem;
}

#fav_list_items .nav_list {
    padding-bottom: 0;
    padding-top: 0;
}

#nav_item_preset_fav:not(.active) {
    pointer-events: none;
}

#nav_item_preset_fav {
    margin-top: 0.5rem;
}

#bbd_favorites.bbd {
    -webkit-transition: all .00001s ease;
    -o-transition: all .00001s ease;
    transition: all .00001s ease;
}

#fav_info_window h1 {
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

#toggleBottomDrawer.left {
    left: 0;
}

#bbd_favorites .nav_item_wrap {
    min-height: 0;
}

#bbd_favorites .preset_fav_item .nav_item_img {
    margin-right: 0.75rem;
}

#bbd_favorites .preset_fav_item .nav_item_hold {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

#bbd_favorites .preset_fav_item .nav_item_hold div {
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
}

#bbd_favorites .preset_fav_item {
    padding: 0.5rem 0rem 0.125rem 0rem;
}


#bbd_favorites {
    opacity: 0;
}

#bbd_favorites.open {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

#delete_favorites {
    height: 3.5rem;
    margin-left: 2.25rem;
    width: calc(100% - 7rem);
    border: 1.25px solid;
    border-radius: 8px;
    text-align: -webkit-center;
    text-align: center;
    line-height: 3.5rem;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    letter-spacing: 1.4px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    cursor: pointer;
}

#delete_favorites_but {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
}

#delete_fav_item {
    position: absolute;
    /* z-index: -1; */
    width: 100vw;
    height: 3.875rem;
    padding-left: 2rem;
    left: 0;
    z-index: 100;
    background: #f2f2f2;
    pointer-events: none;
}


#delete_fav_item .nav_item_text {
    text-align: center;
    line-height: 3.85rem;
    text-align: left;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: 1.4px;
    color: #333333;
}

#delete_fav_item .nav_item_sub {
    line-height: 3.85rem;
    text-align: -webkit-center;
    text-align: center;
    width: auto;
    margin-right: 1rem;
    padding-left: 0.5rem;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: 1.4px;
    text-align: right;
    color: #da0303;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    pointer-events: all;
}

.preset_fav_item .delete_item {
    display: none;
}

#delete_fav_item {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.delete_item.edit {
    pointer-events: none !important;
}

.delete_item.edit~.nav_item_img .autoArt,
.nav_item_restricted {
    display: none !important;
}

.delete_item.edit~#delete_fav_item {
    opacity: 1;
    visibility: visible;
}

.delete_item.edit~#delete_fav_item,
#delete_favorites.edit~ul li .delete_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
}

#delete_favorites.edit~ul li .delete_item {
    pointer-events: all;
}

#delete_favorites.edit~ul li.preset_fav_item.fav_edit {
    pointer-events: none;
}

#delete_favorites.edit~ul li.preset_fav_item {
    margin-left: -1.25rem !important;
}

#delete_favorites~ul li.preset_fav_item .preset_item_num {
    height: 3.875rem;
}

#bbd_presets.stationDrag #favorites_window,
#add_remove_favorites,
#cancel_favorites {
    display: none;
}

#bbd_presets.stationDrag #add_remove_favorites,
#bbd_presets.stationDrag #cancel_favorites {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    display: -webkit-flex !important;
}

#bbd_presets.stationDrag.remove #add_remove_favorites .preset_item_num,
#bbd_presets.stationDrag.remove #add_remove_favorites #preset_hold_img_fav_item,
#bbd_presets.stationDrag.remove #add_remove_favorites #preset_hold_img_add_fav_item {
    display: none;
}

#bbd_presets.stationDrag.remove #add_remove_favorites,
#bbd_presets.stationDrag #cancel_favorites {
    text-align: center;
}

#bbd_presets.stationDrag.remove #add_remove_favorites .nav_item_text {
    color: #de2020;
}

#add_remove_favorites {
    border: 2px solid #cfcfcf;
    border-left: none;
    border-right: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#nav_item_preset_6.preset_highlight_name~#add_remove_favorites {
    border-top: none;
}

#add_remove_favorites.preset_highlight_name {
    border: none;
}

#fav_list_items h1.nav.nav_item_seeall {
    padding: 0.75rem 1.25rem;
    margin: 0;
}

#bbd_favorites #nav_content_presets .preset_fav_item:last-child {
    margin-bottom: 1.25rem;
}

#bbd_favorites #nav_content_presets .list {
    padding-bottom: 2.25rem;
}

#favorite_filter {
    height: 3.5rem;
    margin-left: -1.25rem;
    width: 100vw;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    padding: 0 2rem;
    border-bottom: 1px solid #ccc;
    /*display: none;*/
}

#favorite_filter div {
    height: 100%;
    width: 35%;
    text-align: -webkit-center;
    text-align: center;
    white-space: nowrap;
}

#favorite_filter #az span {
    border: 1px solid black;
    border-radius: 5px;
    font-size: 1.25rem;
    padding: 0.1rem 0.5rem;
    line-height: 3.5rem;
}

#favorite_filter.date #date,
#favorite_filter.az #az {
    border-bottom: 4px solid black;
    pointer-events: none;
}

#favorite_filter #date {
    font-size: 2.25rem;
    line-height: 3.5rem;
}

#favorite_filter.az #date,
#favorite_filter.date #az {
    opacity: 0.5;
}

#delete_favorites.edit~#favorite_filter {
    display: none;
}

body.iOS_override.iPhoneX #bbd_favorites #nav_content_presets .preset_fav_item:last-child {
    margin-bottom: calc(1.5rem + constant(safe-area-inset-bottom));
    margin-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

body.iOS_override.iPhoneX #favorites_window {
    margin-bottom: calc(2rem + constant(safe-area-inset-bottom));
    margin-bottom: calc(2rem + env(safe-area-inset-bottom));
}

body.offline #nav_content_presets {
    overflow-y: hidden;
}

#fav_list_items .ribbon,
#nav_content_presets {
    -ms-touch-action: none;
    touch-action: none;
}

#bbd_favorites .preset_fav_item.active {
    pointer-events: all;
}

#bbd_favorites #nav_content_presets .nav_list {
    padding: 1rem 0 0 0;
}

/* Airplay 2 CSS */

.ap_source_img {
    height: 2.5rem;
    background: 50% 48.5% no-repeat url(../images/sources/airplay2/airplay_black.svg);
}

#but_speaker_src_airplay.selected .ap_source_img {
    background-image: url('../images/sources/airplay2/airplay_white.svg');
    pointer-events: none;
    cursor: pointer;
}

#airplay_logo img {
    width: 5rem;
    height: 5rem;
}

#airplay_title {
    padding: 1rem;
}

#airplay_title span {
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 2px;
    color: #333333;
}

#airplay_desc,
#airplay_hiw {
    text-align: left;
    line-height: 1.75;
    letter-spacing: 0.5px;
    color: #333333;
    font-size: 0.8rem;
}

#airplay_desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-flex-flow: column;
}

#airplay_desc span {
    padding-bottom: 1.5rem;
}

#airplay_desc span:last-child {
    padding-bottom: 0;
}

#airplay_desc a {
    text-decoration: underline;
}

#airplay_hiw ol {
    margin: 0;
    padding-top: 1.25rem;
    padding-left: 1rem;
}

#airplay_hiw ol li {
    padding-bottom: 1.25rem;
}

#airplay_hiw~a {
    text-decoration: underline;
    line-height: 1.75;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    padding: 1rem;
    color: #333333;
}

#source_string+.speaker_src {
    margin-left: 0rem !important;
}

body:not(.iOS_override) #but_speaker_src_airplay.speaker_src_ap:not(.selected),
.device_tray .dev_tray_speakers_slide.group #but_speaker_src_airplay,
#message_dialog .hide_dialog_icon .dialog_icon {
    display: none;
}

.sxmupdate #dialog_title h3 {
    text-transform: none;
}

#dialog_copy.airplay_promo .dialog_icon {
    background-image: url(../images/sources/airplay2/airplay_black.svg);
    width: 4rem;
    height: 4rem;
    background-size: 100%;
    display: block;
    margin: auto;
    background-repeat: no-repeat;
}

#dialog_copy.airplay_promo .airplay_copy sup {
    vertical-align: top;
}

#dialog_copy.airplay_promo .airplay_copy span {
    margin: 0.25rem 0;
    display: block;
}

#dialog_copy.airplay_promo #dialog_title h3 {
    text-transform: capitalize;
}

.layout h1.title {
    display: block !important;
    white-space: normal;
    line-height: 1.5rem;
}

#main_play .master_header_content {
    position: absolute;
}
