/***************************************
 * BOSE BOTTOM DRAWER css - Sean Weiss
****************************************/

#bbd_container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 36;
    pointer-events: none;
}


/*delay the z index change so that the animation completes first*/

#bbd_container:not(.onboard_on) {
    -webkit-transition: z-index 0s linear .5S;
}


/* High z so that ONBOARDING overcasts the messages */

#bbd_container.onboard_on {
    z-index: 300;
}

#bbd_container.show {
    display: block;
}

#bbd_container .backdrop {
    z-index: 1;
    position: absolute;
}

.bbd {
    position: absolute;
    width: 100%;
    height: 100%;
    color: rgba(51, 51, 51, 1);
    transform: translate3d(0, 110%, 0);
    -webkit-transform: translate3d(0, 110%, 0);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.bbd.open {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    pointer-events: all;
}

#bbd_tour{
    transform: none;
    -webkit-transform: none;
    
}

.drawer_content {
    position: absolute;
    width: 100%;
    bottom: 0;
    top: 0;
    pointer-events: none;
}

.show_backdrop .backdrop {
    background-color: rgba(187, 187, 187, 0.4);
}
body.performant_gui .show_backdrop .backdrop {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);    
}
#bbd_container .backdrop {
    transform: none !important;
    -webkit-transform: none !important;
}

.bbd_tour .show_backdrop .backdrop {
    background-color:  unset;
    -webkit-backdrop-filter: unset;
    backdrop-filter:  unset;
}

.toggleBottomDrawer {
    background: transparent;
    color: #000;
    font-family: bose;
    z-index: 14;
    position: absolute;
    /* Temp: if bose font relative icon sizes are fixed, font-size should match .master_header_button size */
    font-size: 2.2rem;
    /* The remaining properties match .master_header styles */
    width: 4.3rem;
    height: 3.75rem;
    position: absolute;
    right: 0;
    bottom: -webkit-calc(100% - 3.75rem);
    top: auto;
    left: auto;
    display: inline-flex;
    display: -webkit-inline-flex;
    align-items: center;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    cursor: pointer;
}

.toggleBottomDrawer.hide,
header.hide {
    display: none;
}

.bbd .child_holder {
    position: relative;
    width: 100%;
    height: 100%;
}

.bbd .child_content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    min-height: 20%;
    background-color: #f2f2f2;
    pointer-events: all;
}

#bbd_tour .child_content {
    position: relative !important;
    background-color: inherit;
}
.bbd ul {
    width: 100%;
    font-size: 1.8em;
}

.bbd .row {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    cursor: pointer;
    overflow: hidden;
    padding: 0 1.25rem;
    /* left/right matches .master_header styles */
}

.bbd .name {
    color: #333333;
    text-transform: none;
    margin: 20px 0 20px 0;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/*.bbd .radio_hold {
    width: 40px;
}*/

.bbd .page_body input[type=radio] {
    border: solid 1.5px #aaa;
    background-color: #eee;
    margin: 0;
}

.bbd .page_body input[type=radio]:checked {
    border: solid 1.5px #aaa;
}


/********* BOSE BOTTOM DRAWER END **********/


/********* AUX VIEW **********/

#main_aux,
#aux_hold {
    max-width: unset !important;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    background-color: #f2f2f2;
    color: #000;
}

#aux_hold,
#quick_tour_hold {
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    z-index: 11;
}

#main_aux,
#quick_tour {
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    z-index: 10;
}


/********* AUX VIEW END *********/


/*********  Quick Tour **********/
#bbd_tour {
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    /*    -webkit-filter: blur(20px);
    filter: blur(20px);*/
/*    -webkit-backdrop-filter: blur(4.8px);
    backdrop-filter: blur(4.8px);*/
}

/*#main.bbd_tour #main_tray {
    z-index: 37;
    pointer-events: none;
}*/

#main.bbd_tour .zztop {
    z-index: 37;
    pointer-events: none;
}

#main.bbd_tour .zztop .source_item{
    pointer-events: none;
}

#main.bbd_tour #main_tray.zztop #but_up{
    pointer-events: none;
}


#quick_tour {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: unset !important;
    height: 100%;
    background-color: inherit;
}

#quick_tour_hold {
    max-width: unset !important;
    -webkit-flex-wrap: wrap;
    color: #fff;
    margin: 0 auto;
    width: calc(100% - 2rem);
    height: calc(100% - 4rem);
}

#quick_tour .presets, 
#quick_tour .ibut_srcs{
    color: #fff !important;
    opacity: 1;
    height: 3.75rem;
    line-height: 3.75rem;
    width: 4.3rem;
    text-align: center;
    font-family: bose;
    pointer-events: none;
    display: -webkit-inline-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    cursor: pointer;
}

#quick_tour .presets{
    font-size: 2.6rem;
}

#quick_tour .ibut_srcs{
    font-size: 2rem;
}

#quick_tour .helper{
    color: white;
    font-family: BoseText;
    font-weight: bold;
    letter-spacing: 0.7px;
    line-height: 1.5rem;
    width: 50%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

#quick_tour_header *{
    height: 3.75rem;
}

#quick_tour .btn_label_hold{
    display: -webkit-flex;
    display: flex;
    padding-bottom: 1rem;
}

#quick_tour .btn_label_hold .helper:first-child{
    margin-right: .5rem;
    text-align: left;
    margin-left: .25rem;
}

#quick_tour .btn_label_hold .helper:last-child{
    margin-left: .5rem;
    text-align: right;
}

#quick_tour .presets_hold{
    right: 0;
    top: 0;
    left: auto;
    color: white;
}
#quick_tour .srcs_hold{
    left: 0;
    top: 0;
    right: auto;
    /*position: absolute;*/
    color: white;
}

#quick_tour .presets_hold,
#quick_tour .srcs_hold{
    width: 4.3rem;
    line-height: 3.75rem;
}

#close_quick_tour {
    margin: 2rem auto;
    height: 3.375rem;
    border: 1.5px solid #d8d8d8;
    border-radius: 0.438rem;
    color: #d8d8d8;
    background-color: #000;
    cursor: pointer;
    text-align: center;
    max-width: 17rem;
    width: 100%;
    display: -webkit-flex;
    font-weight: bold;
    letter-spacing: 0.125rem;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    overflow: hidden;
}

#quick_tour .header {
    font-size: 0.975rem;
    padding-top: 2rem;
    text-align: center;
}

#quick_tour .content {
    font-size:0.875rem;
    width:13.875rem;
}
#quick_tour .content,
#quick_tour .content_title 
{
    text-align: left;
}

#quick_tour .footer {
    position: absolute;
    bottom: 1rem !important;
    width: 100%;
    top: 3rem;
}

#quick_tour .footer .content_title{
    font-weight: bold;
    margin: 1.5rem 0 1rem 0;
    font-size: 1rem;
    letter-spacing: 1.5px;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: absolute;
    bottom: 2rem;
    width: 100%;
}

#quick_tour .icon {
    text-align: center;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
}

#quick_tour .icon,
#quick_tour .icon img{
    height: 1rem;
    width: 1rem;
}

#quick_tour_header{
    height: 3.75rem;
    width: 100%;
    position: absolute;
    top: 0;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.landscape #quick_tour_header{
    width:100%;
}

#quick_tour_dev_tray_overlay{
    width: 100%;
    bottom: 0;
    right: 4rem;
    height: 4rem;
    z-index: 30;
    position: absolute;
}

div#quick_tour_vol_shade {
    height: 4rem;
    width: 4rem;
    position: absolute;
    display: flex;
    display: -webkit-flex;
    left: calc(100% - 4rem);
    bottom: 0;
}

#quick_tour_hold .content_title div {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#quick_tour_hold .header,
#quick_tour_hold .content {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    text-overflow: ellipsis;
    width: auto;
}

.quick_tour_close_section {
    padding-bottom: 1rem;
    position: absolute;
    display: -webkit-flex;
    display: flex;
    bottom: 5rem;
    flex-flow: column;
    -webkit-flex-flow: column;
    overflow: hidden;
    width: 100%;
}


/* For screen sizes wider than 600px, increase sizes and margins */
@media screen and (min-device-width: 600px) {
    #quick_tour .helper{
        font-size: 1.2em;
    }

    #close_quick_tour{
        font-size: 0.825rem;  
    }

    #quick_tour .header,
    #quick_tour .content {
        font-size: 1.05rem;
    }

    #quick_tour .footer .content_title{
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
    }

    #quick_tour .icon{
        margin-top: 2rem;
    }

    #quick_tour .icon,
    #quick_tour .icon img{
        height: 2rem;
        width: 2rem;
    }

    #quick_tour .footer{
        bottom: 4rem;
    }
}
