.page-building .main-panel,
.page-room .main-panel { position: relative; }

.page-building .search-wrapper {  display: flex; }

/* ------------ EXTRA PANEL ------------ */
/* mobile menu, same as campus map main menu */
.page-building .extra-panel { display: block; }

.page-building .extra-panel > button,
.page-room .extra-panel > button {
    margin: 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #373737;
    border-top: none;
}


/* ------------ DISPLAY LIST OF ROOMS IN BUILDING or ROOM PAGE ------------ */
.page-building .main-panel > button,
.page-room .main-panel > button,
.page-building .extra-panel > button,
.page-room .extra-panel > button {
    position: relative;
    background-color: transparent;
    border-radius: 0;
    border: none;
    border-top: 1px solid #666;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    padding: 1.5rem 2rem 0 0;
    margin: 1.5rem 1rem 0 1rem;
    width: calc(100% - 2rem);
    text-align: left;
}

.page-building .extra-panel > button,
.page-room .extra-panel > button { color: var(--text_color); }

.page-building .main-panel > button:after,
.page-room .main-panel > button:after,
.page-building .extra-panel > button:after,
.page-room .extra-panel > button:after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 2rem;
    width: .8rem;
    height: .8rem;
    transform: translateY(-33%) rotateZ(-90deg);
    background-image: url(../../assets/icons/icon_accordion_down_w.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.page-building .extra-panel > button:after,
.page-room .extra-panel > button:after {
    background-image: url(../../assets/icons/icon_accordion_down.svg);
    transform: translateY(-33%) rotateZ(-90deg);
}

.page-building .main-panel > button.upside:after,
.page-room .main-panel > button.upside:after,
.page-building .extra-panel > button.upside:after,
.page-room .extra-panel > button.upside:after {
    transform: translateY(-30%) rotateZ(-180deg);
}

.room-accordion {
    padding: 0 2rem;
    max-height: 0px;
    overflow: hidden;
}
.room-accordion.open {
    max-height: 1000px;
    padding: .5rem 1rem 0 1rem;
    /* margin-bottom: 1rem; */
    overflow: visible;
}
.room-accordion .view-building .views-row {
    /* margin-left: .5rem; */
    padding: .5rem 0;
    /* border-left: 1px solid #373737; */
}
.room-accordion .view-building .views-row .views-field-title a {
    /* color: var(--medium_gray); */
    color: var(--text_color);
    font-size: 14px;
    font-weight: 300;
    /* padding-left: 1rem; */
    display: block;
    padding-right: 3rem;
    background-position: calc(100% - 1rem) center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-image: url(../../assets/icons/icon_arrow_right.svg);
}
.room-accordion .view-building .views-row .views-field-title a.active {
    font-weight: 500;
    pointer-events: none;
}
.room-accordion .view-building .views-row .views-field-title a:hover {
    color: #FFF;
    text-decoration: underline;
}
.extra-panel .room-accordion .view-building .views-row .views-field-title a:hover { color: var(--text_color); }

.extra-panel .room-accordion:last-child { margin-bottom: 50px; }


@media(min-width: 576px) {
    .page-building .main-panel > button,
    .page-room .main-panel > button,
    .page-building .extra-panel > button,
    .page-room .extra-panel > button {
        margin: 1.5rem 2rem 0 2rem;
        width: calc(100% - 4rem);
    }

    .room-accordion.open {
        padding: .5rem 2rem 0 2rem;
    }
}


@media (min-width: 1024px) {
    .page-building .main-panel > button,
    .page-room .main-panel > button,
    .page-building .extra-panel > button,
    .page-room .extra-panel > button {
        font-size: 18px;
    }

    .room-accordion .view-building .views-row .views-field-title a {
        font-size: 16px;
        color: var(--medium_gray);
        padding-right: 0;
        background-image: unset;
    }
}


/* ------------ ROOM OR BUILDING PAGE CONTENT - CENTER COLUMN ------------ */
.page-room .region-content,
.page-building .region-content { margin: 0; }

.building-panel { 
    position: relative;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    margin-top: 139px;
}

/* heading of detail, not scroll */
.building-panel .fixbox { 
    border-bottom: 1px solid var(--border_gray); 
    padding-top: 1rem;
    position: relative;
}

.building-panel .fixbox > a { display: none; }

.building-panel .info-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-areas: 
        'building'
        'phone'
        'floor'
        'seating'; */
    padding-bottom: 1rem;
    width: 100%;
}

.building-panel .info-grid > * {
    padding: .25rem 1rem .25rem 3rem;
    font-size: 16px;
    font-weight: 300;
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
    background-position: 1rem center;
}

.building-panel .info-grid .field--name-field-floor,
.building-panel .info-grid .field--name-field-floors,
.building-panel .info-grid .field--name-field-room-seating-capacity { font-weight: 500; }

.building-panel .info-grid .field--name-field-floor::before,
.building-panel .info-grid .field--name-field-floors::before,
.building-panel .info-grid .field--name-field-room-seating-capacity::before {
    content: 'Seating capacity';
    margin-right: .5rem;
    position: relative;
    display: inline-block;
    font-weight: 300;
    font-size: 14px;
}

.building-panel .info-grid .field--name-field-floor::before,
.building-panel .info-grid .field--name-field-floors::before {
    content: 'Floors'
}

.building-panel .info-grid .name,
.building-panel .info-grid .field--name-field-building-address { 
    /* grid-area: building;  */
    background-image: url(../../assets/icons/icon_pin.svg);
}
.building-panel .info-grid .field--name-field-floor,
.building-panel .info-grid .field--name-field-floors { 
    /* grid-area: floor;  */
    background-image: url(../../assets/icons/icon_floor.svg);
}
.building-panel .info-grid .field--name-field-building-phone { 
    /* grid-area: phone;  */
    background-image: url(../../assets/icons/icon_phone_w.svg);
}
.building-panel .info-grid .field--name-field-room-seating-capacity { 
    /* grid-area: seating;  */
    background-image: url(../../assets/icons/icon_capacity.svg);
}

/* content of body of detail, scroll */
.building-panel .scrollbox {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.building-card .field--name-field-image,
.building-panel .field--name-field-image { 
    width: 100%; 
    font-size: 14px;
    font-style: italic;
    color: var(--medium_gray);
}

.building-panel .field--name-field-image img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    object-position: top left;
    display: block;
    margin: 0 auto;
}

.building-panel .scrollbox .field--name-field-images img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    object-position: center;
    margin: .5rem 0;
    display: block;
}


/* ------------ DETAIL PAGE BREADCRUMBS ------------ */
.page-building .campus-breadcrumb,
.page-room .campus-breadcrumb {
    display: flex;
    flex-direction: row;
    padding-left: 2rem;
    margin-top: 1rem;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1.5rem 1.5rem;
    background-image: url(../../assets/icons/icon_arrow_left.svg);
}

.page-building .campus-breadcrumb .map-icon,
.page-room .campus-breadcrumb .map-icon {
    padding: 1rem 0 1rem 2.5rem;
    background-image: url(../../assets/icons/icon_campus_map.svg);
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: .5rem center;
    font-size: 14px;
    color: var(--medium_gray);
    font-weight: 300;
}
.page-room .campus-breadcrumb .map-icon { font-size: 0; }

.page-room .campus-breadcrumb .building-breadcrumb {
    padding: 1rem 0 1rem .5rem;
    font-size: 14px;
    color: var(--medium_gray);
    font-weight: 300;
    display: inline;
}
.page-room .campus-breadcrumb .building-breadcrumb::before {
    content: '/';
    position: relative;
    display: inline;
    top: 0;
    left: -.5rem;
}


@media (min-width: 1024px) {
    .page-room .search { order: 0; }

    .page-building form.search,
    .page-room form.search { width: 100% }

    .page-room .campus-map,
    .page-building .campus-map { width: 25%; }



    .page-building .campus-menu.desktop,
    .page-room .campus-menu.desktop { display: block; }

    .page-building .campus-menu.mobile,
    .page-room .campus-menu.mobile { display: none; }

    

    .page-building .main-panel,
    .page-room .main-panel { padding-bottom: 15vh; }

    .page-building .extra-panel,
    .page-room .extra-panel { display: none; }


    /* ------------ BUILDING PANEL ------------ */
    .building-panel { 
        height: calc(100vh - 80px);
        width: 50%;
        padding: 0 4rem;
        margin-top: 0;
    }

    .building-panel .scrollbox {
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: none;
        padding-top: 2rem;
        padding-bottom: 30vh;
    }
    .building-panel .scrollbox::-webkit-scrollbar { width: 0; }

    .building-panel .fixbox > a {
        font-size: 0;
        width: 3rem;
        height: 3rem;
        background-color: transparent;
        border: 1px solid var(--border_gray);
        border-radius: 50%;
        background-image: url(../../assets/icons/icon_close.svg);
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        display: block;
        top: 2rem;
        right: 0;
    }

    .building-panel .fixbox > a:hover { background-color: var(--border_gray); }

    .building-panel .fixbox > h1 { padding-right: 3rem; }

    .building-panel .info-grid {
        grid-template-columns: 1fr 1fr;
        /* grid-template-areas: 
            'building floor'
            'phone seating'; */
    }

    .room-accordion .view-building .views-row .views-field-title a.active { color: #FFF; }

    /* BREADCRUMBS */
    .page-building .campus-breadcrumb,
    .page-room .campus-breadcrumb {
        display: none;
    }
}


@media (min-width: 1600px) {
    .building-panel .info-grid { width: 75%; }
}


@media (min-width: 3000px) {
    .page-room .campus-map,
    .page-building .campus-map {
        position: absolute;
        right: 0;
        width: 35%;
    }

    .campus-map .map-wrapper {
        width: 100% !important;
        height: 100% !important;
        top: 75% !important;
        left: 0 !important;
        transform: translateY(-50%) !important;
    }

    .campus-map-layout {
        max-width: 1920px !important;
        margin: 80px auto 0 auto !important;
    }
}