.header{transition:.3s;opacity:1}.header-clear{height:70px;opacity:0;transition:.4s}.header-clear .fa-times{font-size:18px;width:60px;height:60px;text-align:center;line-height:60px}.animate .header{opacity:0}.animate .header-clear{opacity:1;transition:.4s}.nav-item a{color:#ccc;font-family:Roboto,sans-serif;font-size:14px;padding:13px 0;font-weight:400!important;transition:.4s!important}.nav-item a:hover,.outer-nav a:hover{color:#fff}.nav-sub-item{padding-left:55px;display:none}.nav-sub-item a{font-size:12px;padding:10px 0;opacity:.5!important}.nav-icon{margin-right:20px;font-size:17px;width:20px;text-align:center}.nav-icon-selected{position:absolute;left:0;top:20px;font-size:10px;color:#fff}@media (min-width:768px){.all-elements{background-color:#000}#perspective{width:99%;margin-left:.5%;overflow:visible}.effect-airbnb{width:110%}.perspective_container,body{background-color:#1b1b1b}.nav-item a{font-size:16px;padding:20px 0}.nav-sub-item a{font-size:14px;padding:15px 0}}.perspective,body,html{width:100%;height:100%}.perspective{overflow:visible;background:#aaa}.outer-nav,.wrapper{overflow-y:scroll;overflow-x:hidden}.perspective_container{min-height:100%;position:relative;outline:rgba(0,0,0,0) solid 1px;z-index:10;transform:translateZ(0) translateX(0) rotateY(0)}.perspective_container::after{content:'';position:absolute;top:0;left:0;width:100%;height:0;opacity:0;background:rgba(0,0,0,.2);transition:opacity .4s,height 0s .4s}.wrapper{position:relative}.component{margin:0 auto;width:60%;text-align:justify;font-size:1.5em}.perspective.modalview{position:fixed;perspective:1500px}.modalview .perspective_container{position:absolute;width:100%;height:100%;cursor:pointer;backface-visibility:hidden}.modalview .wrapper{transform:translateZ(-1px)}.animate .perspective_container::after{opacity:1;height:101%;transition:opacity .3s}.outer-nav{position:absolute;top:50%;transform:translateY(-50%);width:250px;height:500px;transition:none;min-height:500px;max-height:500px}.outer-nav::-webkit-scrollbar{display:none}.inner-nav{width:100%;overflow:hidden}.inner-nav a{margin:0;padding-left:23%;display:block;width:100%;text-decoration:none}.outer-nav a{display:inline-block;white-space:nowrap;font-weight:300;color:#cacaca;transition:color .3s}.outer-nav a::before{display:inline-block;font-family:typicons;margin-right:10px;backface-visibility:hidden;width:20px;height:20px}.effect-airbnb{background-color:#141414}@media (max-width:760px){.effect-airbnb .perspective_container{transition:transform .4s;transform-origin:50% 50%}.effect-airbnb.animate .perspective_container{transform:translateZ(-100px) translateX(65%) rotateY(-45deg)}}@media (min-width:761px){.effect-airbnb .perspective_container{transition:transform .4s;transform-origin:50% 50%}.effect-airbnb.animate .perspective_container{transform:translateZ(-100px) translateX(17%) rotateY(-45deg)}}.no-csstransforms3d .effect-airbnb.animate .perspective_container{left:75%}.effect-airbnb .outer-nav a{opacity:0;transform:translateX(-150px);transition:transform .4s,opacity .4s}.effect-airbnb.animate .outer-nav a{opacity:1;transform:translateX(0)}

.perspective,
.effect-airbnb {
    background:#141414!important;
    background-color:#141414!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
}

/* Unified staff portal drawer background. Scoped by the My Jobs link so public
   website menus keep their existing appearance. */
.effect-airbnb:has(.outer-nav a[href*="myjobs.php"]),
.effect-airbnb:has(.outer-nav a[href*="/myjobs.php"]) {
    background:
        radial-gradient(circle at 82% 6%,rgba(20,150,210,.18),transparent 32%),
        linear-gradient(180deg,#20282e 0%,#12171b 100%)!important;
    background-color:#12171b!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
}

.bb-staff-portal-menu {
    background:
        radial-gradient(circle at 82% 6%,rgba(20,150,210,.18),transparent 32%),
        linear-gradient(180deg,#20282e 0%,#12171b 100%)!important;
    background-color:#12171b!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
}

@media (max-width:760px) {
    /* Prevent the legacy menu markup flashing in its old centred position
       before JavaScript classifies the page during a fresh reload. */
    .effect-airbnb:not(.animate) .outer-nav {
        visibility:hidden!important;
        pointer-events:none!important;
    }

    .effect-airbnb .perspective_container {
        transition-duration:.34s!important;
        transition-timing-function:cubic-bezier(.22,1,.36,1)!important;
    }

    /* The drawer carries its links with it. Do not give the links a second,
       slower entrance animation or they visibly lag behind the panel. */
    .effect-airbnb .outer-nav a {
        transition-delay:0s!important;
    }

    .perspective_container::after,
    .animate .perspective_container::after {
        transition-duration:.30s!important;
    }

    .effect-airbnb:has(.outer-nav a[href*="myjobs.php"]) .outer-nav {
        background:transparent!important;
    }

    /* Let every portal option, including Log out, remain reachable on short
       phones instead of clipping the drawer to the legacy 500px height. */
    .effect-airbnb .outer-nav {
        top:0!important;
        transform:none!important;
        width:65vw!important;
        max-width:280px!important;
        height:100vh!important;
        height:100dvh!important;
        min-height:0!important;
        max-height:none!important;
        padding:max(44px,calc(env(safe-area-inset-top) + 20px)) 0 max(22px,env(safe-area-inset-bottom))!important;
        box-sizing:border-box!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .effect-airbnb .outer-nav .inner-nav {
        width:100%!important;
        min-height:min-content;
        padding-bottom:8px;
        overflow:visible!important;
    }

    .effect-airbnb .bb-portal-menu-heading {
        margin:0 12px 6px;
        padding:6px 9px;
    }

    .effect-airbnb .bb-portal-menu-heading + .nav-item {
        margin-top:14px!important;
    }

    .effect-airbnb .outer-nav .nav-item a {
        padding-top:13px!important;
        padding-bottom:13px!important;
        line-height:1.25!important;
    }

    /* Keep the drawer and every visible menu item on one animation timeline.
       The legacy stylesheet animated each link separately, which was most
       noticeable on an uncached/private Safari load. */
    .effect-airbnb .outer-nav .inner-nav,
    .effect-airbnb .outer-nav .nav-item,
    .effect-airbnb .outer-nav .nav-icon,
    .effect-airbnb.animate .outer-nav .inner-nav,
    .effect-airbnb.animate .outer-nav .nav-item,
    .effect-airbnb.animate .outer-nav .nav-icon {
        -webkit-animation:none!important;
        animation:none!important;
        -webkit-transition:none!important;
        transition:none!important;
        -webkit-transform:none!important;
        transform:none!important;
        opacity:1!important;
    }

    /* The wording pushes in from the left with the panel, but every link uses
       exactly the same timing—there is no stagger or delayed fade. */
    .effect-airbnb .outer-nav .nav-item a {
        opacity:1!important;
        -webkit-transform:translateX(-42px)!important;
        transform:translateX(-42px)!important;
        -webkit-transition:-webkit-transform .34s cubic-bezier(.22,1,.36,1)!important;
        transition:transform .34s cubic-bezier(.22,1,.36,1)!important;
        transition-delay:0s!important;
    }

    .effect-airbnb.animate .outer-nav .nav-item a {
        opacity:1!important;
        -webkit-transform:translateX(0)!important;
        transform:translateX(0)!important;
        transition-delay:0s!important;
    }

    /* Staff pages use a true overlay drawer. Keeping it behind the legacy 3D
       content made the menu appear blank on pages where the content no longer
       moved far enough aside. */
    .bb-staff-portal-menu .outer-nav,
    .effect-airbnb:has(.outer-nav a[href*="myjobs.php"]) .outer-nav {
        position:fixed!important;
        z-index:2147482000!important;
        left:0!important;
        top:0!important;
        background:linear-gradient(180deg,#20282e 0%,#12171b 100%)!important;
        box-shadow:18px 0 45px rgba(0,0,0,.42)!important;
        -webkit-transform:translateX(-102%)!important;
        transform:translateX(-102%)!important;
        -webkit-transition:-webkit-transform .34s cubic-bezier(.22,1,.36,1)!important;
        transition:transform .34s cubic-bezier(.22,1,.36,1)!important;
        visibility:hidden!important;
        pointer-events:none!important;
    }

    .bb-staff-portal-menu.animate .outer-nav,
    .effect-airbnb.animate:has(.outer-nav a[href*="myjobs.php"]) .outer-nav {
        -webkit-transform:translateX(0)!important;
        transform:translateX(0)!important;
        visibility:visible!important;
        pointer-events:auto!important;
    }

    /* The drawer overlays the staff page, so do not also run the old 3D page
       push. Combining both left an empty strip beside the open menu. */
    .bb-staff-portal-menu .perspective_container,
    .bb-staff-portal-menu.animate .perspective_container,
    .effect-airbnb:has(.outer-nav a[href*="myjobs.php"]) .perspective_container,
    .effect-airbnb.animate:has(.outer-nav a[href*="myjobs.php"]) .perspective_container {
        -webkit-transform:none!important;
        transform:none!important;
        -webkit-transition:none!important;
        transition:none!important;
    }

    .bb-staff-portal-menu .outer-nav .nav-item a,
    .bb-staff-portal-menu.animate .outer-nav .nav-item a,
    .effect-airbnb:has(.outer-nav a[href*="myjobs.php"]) .outer-nav .nav-item a,
    .effect-airbnb.animate:has(.outer-nav a[href*="myjobs.php"]) .outer-nav .nav-item a {
        -webkit-transform:none!important;
        transform:none!important;
        -webkit-transition:none!important;
        transition:none!important;
        opacity:1!important;
    }

}

.perspective_container{background:#1B1B1B;min-height:100vh;}

/* Keep normal mobile pages out of a permanent 3D compositing layer. iOS
   Safari can intermittently paint that legacy layer (and its menu shade) as
   a full-screen black rectangle during rapid reloads. The 3D transform is
   still applied by .effect-airbnb.animate only while the drawer is open. */
@media (max-width:760px) {
    .effect-airbnb:not(.animate) .perspective_container {
        -webkit-transform:none!important;
        transform:none!important;
        -webkit-backface-visibility:visible!important;
        backface-visibility:visible!important;
    }

    .effect-airbnb:not(.animate) .perspective_container::after {
        height:0!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
    }
}

.header{height:38px;}

#showMenu,
#closeMenu{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

/* Staff portal menus must not link back into the customer website. */
.bb-staff-portal-menu .outer-nav .nav-item:has(> a[href="https://www.butlerbookings.co.uk/index.php"]),
.bb-staff-portal-menu .outer-nav .nav-item:has(> a[href="https://www.butlerbookings.co.uk/"]) {display:none!important;}

.staff-portal-label {
    position: absolute;
    top: 29px!important;
    left: 50%!important;
    width: 58px!important;
    z-index: 10001;
    transform: translateX(-50%)!important;
    text-align: center!important;
    color: #75d5ff;
    font: 800 6.25px/1 Helvetica, Arial, sans-serif;
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.bb-portal-menu-heading {
    margin:0 14px 8px;
    padding:0;
    color:#f3f8fb;
    background:linear-gradient(135deg,rgba(21,159,223,.16),rgba(8,120,177,.07));
    border:1px solid rgba(117,213,255,.18);
    border-radius:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    font-family:Helvetica,Arial,sans-serif;
}
.bb-portal-menu-profile-link {
    width:100%!important;
    margin:0!important;
    padding:7px 10px!important;
    display:flex!important;
    align-items:center;
    gap:8px;
    box-sizing:border-box;
    color:inherit!important;
    white-space:normal!important;
    text-decoration:none!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-align:left!important;
    cursor:pointer;
}
.bb-portal-menu-copy { min-width:0; }
.bb-portal-menu-chevron{margin-left:auto;color:#75d5ff;font-size:10px;transition:transform .18s}.bb-portal-menu-heading.is-account-open .bb-portal-menu-chevron{transform:rotate(180deg)}
.bb-portal-account-menu{padding:0 8px 7px}.bb-portal-account-menu[hidden]{display:none!important}.bb-portal-account-menu a{width:100%!important;margin:0!important;padding:8px 9px!important;display:block!important;box-sizing:border-box!important;border-radius:8px;color:#dcebf1!important;background:rgba(6,16,22,.28)!important;font:700 10px Helvetica,Arial,sans-serif!important;text-decoration:none!important}.bb-portal-account-menu a+a{margin-top:4px!important}.bb-portal-account-menu a i{width:17px;margin-right:6px;color:#75d5ff;text-align:center}
.effect-airbnb .bb-portal-menu-heading {
    opacity:0;
    visibility:hidden;
    transform:none;
    transition:none;
    pointer-events:none;
}
.effect-airbnb.animate .bb-portal-menu-heading {
    opacity:1;
    visibility:visible;
    transform:none;
    transition:none;
    pointer-events:auto;
}
.bb-portal-menu-mark {
    position:relative;
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#75d5ff;
    background:rgba(117,213,255,.09);
    border:1px solid rgba(117,213,255,.2);
    border-radius:10px;
    overflow:hidden;
}
.bb-portal-menu-mark.has-photo {
    border-radius:50%;
    border-color:rgba(117,213,255,.46);
    box-shadow:0 4px 12px rgba(0,0,0,.28),0 0 0 2px rgba(117,213,255,.07);
}
.bb-portal-menu-photo {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
}
.bb-portal-menu-heading small,
.bb-portal-menu-heading strong { display:block; }
.bb-portal-menu-heading small {
    margin-bottom:2px;
    color:#8297a3;
    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
    line-height:1;
    text-transform:uppercase;
}
.bb-portal-menu-heading strong {
    color:#eaf8ff;
    font-size:12px;
    font-weight:900;
    line-height:1.1;
}
.bb-portal-menu-name {
    display:block;
    max-width:150px;
    margin-top:2px;
    overflow:hidden;
    color:#9eb2bd;
    font-size:8px;
    font-weight:700;
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bb-portal-menu-name[hidden] { display:none!important; }

/* Staff identity is hidden by default. This prevents legacy customer pages
   flashing an old grey Staff Portal label before JavaScript normalises them. */
.bb-portal-menu-heading,
.staff-portal-label { display:none!important; }
.bb-staff-portal-menu .bb-portal-menu-heading { display:block!important; }
.bb-staff-portal-menu .staff-portal-label { display:block!important; }

/* One canonical customer drawer, matching the mobile Terms page. These
   important rules neutralise old page-specific menu declarations. */
#perspective.bb-public-site-menu,
#perspective.bb-public-site-menu.modalview,
#perspective.bb-public-site-menu.animate {
    background:#141414!important;
    background-color:#141414!important;
    background-image:none!important;
    background-repeat:no-repeat!important;
}
.bb-public-site-menu .outer-nav {
    position:fixed!important;
    z-index:2147482000!important;
    left:0!important;
    top:0!important;
    width:72vw!important;
    max-width:286px!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:none!important;
    padding:max(18px,calc(env(safe-area-inset-top) + 10px)) 12px max(16px,calc(env(safe-area-inset-bottom) + 10px))!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background-color:#111316!important;
    background-image:linear-gradient(165deg,#23272b 0%,#111316 100%)!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-left:0!important;
    border-radius:0 18px 18px 0!important;
    box-shadow:16px 0 42px rgba(0,0,0,.38)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    -webkit-transform:translateX(-102%)!important;
    transform:translateX(-102%)!important;
    -webkit-transition:-webkit-transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear .34s!important;
    transition:transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear .34s!important;
}
.bb-public-site-menu.animate .outer-nav {
    visibility:visible!important;
    pointer-events:auto!important;
    -webkit-transform:translateX(0)!important;
    transform:translateX(0)!important;
    -webkit-transition:-webkit-transform .34s cubic-bezier(.22,1,.36,1),visibility 0s!important;
    transition:transform .34s cubic-bezier(.22,1,.36,1),visibility 0s!important;
}
/* Do not leave the drawer shadow visible after the closing slide has begun. */
.bb-public-site-menu:not(.animate) .outer-nav {
    box-shadow:none!important;
}
@media (max-width:760px) {
    .bb-public-site-menu .perspective_container,
    .bb-public-site-menu.animate .perspective_container {
        -webkit-transform:none!important;
        transform:none!important;
        -webkit-transition:none!important;
        transition:none!important;
    }
    .bb-public-site-menu .perspective_container::after {
        position:fixed!important;
        z-index:2147481000!important;
        inset:0!important;
        width:auto!important;
        height:100%!important;
        background:rgba(5,7,9,.42)!important;
        opacity:0!important;
        visibility:hidden!important;
        pointer-events:none!important;
        transition:opacity .25s ease,visibility 0s linear .25s!important;
    }
    .bb-public-site-menu.animate .perspective_container::after {
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
        transition:opacity .25s ease,visibility 0s!important;
    }
}
.bb-public-site-menu .inner-nav {
    width:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:visible!important;
}
.bb-customer-menu-head {
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:3px 5px 14px 9px;
    margin-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.bb-customer-menu-head span,
.bb-customer-menu-head strong,
.bb-customer-menu-head small { display:block; }
.bb-customer-menu-head strong {
    color:#fff;
    font:900 24px/1.05 Helvetica,Arial,sans-serif;
    letter-spacing:-.03em;
}
.bb-customer-menu-head small {
    margin-bottom:4px;
    color:#e47ca5;
    font:800 8px/1 Helvetica,Arial,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.bb-customer-menu-head > a {
    position:relative!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    display:grid!important;
    place-items:center;
    flex:0 0 35px;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    color:#d9dde0!important;
    background:rgba(255,255,255,.065)!important;
    border:1px solid rgba(255,255,255,.1)!important;
    border-radius:50%!important;
    box-shadow:none!important;
    font-size:0!important;
    line-height:0!important;
    text-decoration:none!important;
}
.bb-customer-menu-head > a i { display:none!important; }
.bb-customer-menu-head > a::before,
.bb-customer-menu-head > a::after {
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:15px!important;
    height:2px!important;
    margin:0!important;
    display:block!important;
    background:#e9ecef!important;
    border:0!important;
    border-radius:2px!important;
    transform-origin:center!important;
}
.bb-customer-menu-head > a::before { transform:translate(-50%,-50%) rotate(45deg)!important; }
.bb-customer-menu-head > a::after { transform:translate(-50%,-50%) rotate(-45deg)!important; }
.bb-public-site-menu .inner-nav .nav-item {
    margin:5px 0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
}
.bb-public-site-menu .inner-nav .nav-item a {
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    margin:0!important;
    min-height:48px!important;
    padding:9px 11px!important;
    box-sizing:border-box!important;
    color:#d7d9dc!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(255,255,255,.055)!important;
    border-radius:13px!important;
    box-shadow:0 5px 13px rgba(0,0,0,.08)!important;
    font:750 13px/1.25 Helvetica,Arial,sans-serif!important;
    text-align:left!important;
    text-decoration:none!important;
}
.bb-public-site-menu .inner-nav .nav-item a.active-item {
    color:#fff!important;
    background:linear-gradient(90deg,rgba(230,0,92,.24),rgba(230,0,92,.08))!important;
    border-color:rgba(230,0,92,.32)!important;
    box-shadow:inset 3px 0 0 #e6005c,0 7px 18px rgba(230,0,92,.11)!important;
}
.bb-public-site-menu .outer-nav .nav-icon,
.bb-public-site-menu .outer-nav .inner-nav .nav-item a .nav-icon {
    width:22px!important;
    min-width:22px!important;
    height:28px!important;
    margin:0 10px 0 1px!important;
    display:grid!important;
    place-items:center!important;
    flex:none!important;
    line-height:28px!important;
    text-align:center!important;
    color:#ef8bb3!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    font-size:14px!important;
}
.bb-public-site-menu .active-item .nav-icon {
    color:#fff!important;
    background:transparent!important;
}
.bb-customer-menu-actions {
    display:grid;
    grid-template-columns:1fr 48px;
    gap:8px;
    margin:auto 0 1px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
}
.bb-customer-menu-actions a {
    min-height:50px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:14px;
    text-decoration:none!important;
    font:850 12px/1.1 Helvetica,Arial,sans-serif!important;
}
.bb-customer-quote {
    justify-content:flex-start!important;
    padding:9px 13px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#ee0b66,#c80050)!important;
    box-shadow:0 9px 22px rgba(230,0,92,.22)!important;
}
.bb-customer-quote > span { display:block; }
.bb-customer-quote small {
    display:block;
    margin-top:3px;
    color:#ffdbe8;
    font:600 8px/1.2 Helvetica,Arial,sans-serif;
}
.bb-customer-call {
    padding:0!important;
    color:#f5c8d9!important;
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.1)!important;
}
.bb-public-site-menu .bb-customer-call::before {
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    margin:0!important;
}
.bb-public-site-menu .bb-customer-call > .fa-phone {
    width:18px!important;
    height:18px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    line-height:18px!important;
    text-align:center!important;
}

/* Never expose staff identity UI on customer-facing pages, including pages
   restored from Safari's back-forward cache. */
.bb-public-site-menu .bb-portal-menu-heading,
.bb-public-site-menu .staff-portal-label { display:none!important; }

/* Original customer menu position. The general short-phone drawer rule above
   is for the staff portal and must not pin public menus to the top. */
@media (max-width:760px) {
    .bb-legacy-public-menu .outer-nav {
        top:50%!important;
        width:245px!important;
        max-width:58vw!important;
        height:500px!important;
        min-height:500px!important;
        max-height:500px!important;
        padding:0!important;
        overflow-y:auto!important;
        transform:translateY(-50%)!important;
    }
    .bb-legacy-public-menu .inner-nav {
        width:100%!important;
        padding:0!important;
    }
}

/* Portal blue replaces legacy green active-page colours from older page CSS. */
.bb-staff-portal-menu .outer-nav .nav-item a.active-item {
    color:#eaf8ff!important;
    background:linear-gradient(90deg,rgba(21,159,223,.24),rgba(8,120,177,.12))!important;
    box-shadow:inset 3px 0 0 #75d5ff;
}
.bb-staff-portal-menu .outer-nav .nav-item a.active-item .nav-icon { color:#75d5ff!important; }

/* Installed iPhone app: keep the portal controls below the status bar/notch. */
@supports (padding-top: env(safe-area-inset-top)) {
    .bb-staff-portal-menu .header {
        height:calc(38px + env(safe-area-inset-top))!important;
        padding-top:env(safe-area-inset-top)!important;
        box-sizing:border-box!important;
    }
    .bb-staff-portal-menu #showMenu {
        top:env(safe-area-inset-top)!important;
    }
    .bb-staff-portal-menu .header > img,
    .bb-staff-portal-menu .header .logo {
        top:calc(7px + env(safe-area-inset-top))!important;
    }
    .bb-staff-portal-menu .staff-portal-label {
        top:calc(29px + env(safe-area-inset-top))!important;
    }
    .bb-staff-portal-menu .bb-notification-bell,
    .bb-staff-portal-menu .bell {
        top:calc(3px + env(safe-area-inset-top))!important;
    }
    .bb-staff-portal-menu .perspective_container {
        padding-top:env(safe-area-inset-top)!important;
        box-sizing:border-box!important;
    }
}

/* Desktop staff portal: use a conventional slide-out drawer. */
@media (min-width:761px) {
    .staff-portal-label {
        top:29px!important;
        left:50%!important;
        width:58px!important;
        transform:translateX(-50%)!important;
        text-align:center!important;
    }

    body.bb-desktop-menu-open { overflow:hidden!important; }
    .animate .header { opacity:1!important; }
    .animate .header-clear { opacity:0!important; }

    #perspective,
    #perspective.modalview {
        position:relative!important;
        width:100%!important;
        height:auto!important;
        min-height:100%!important;
        margin:0!important;
        overflow:visible!important;
        perspective:none!important;
    }

    .effect-airbnb { width:100%!important; }

    .effect-airbnb .perspective_container,
    .effect-airbnb.animate .perspective_container,
    .modalview .perspective_container {
        position:relative!important;
        width:100%!important;
        height:auto!important;
        min-height:100vh!important;
        transform:none!important;
        transition:none!important;
        cursor:default!important;
    }

    .modalview .wrapper {
        top:0!important;
        transform:none!important;
    }

    .effect-airbnb .outer-nav {
        position:fixed!important;
        z-index:2147482000;
        top:0!important;
        left:0!important;
        width:300px!important;
        max-width:82vw!important;
        height:100vh!important;
        height:100dvh!important;
        min-height:0!important;
        max-height:none!important;
        padding:72px 0 28px;
        box-sizing:border-box;
        overflow-y:auto!important;
        transform:translateX(-102%)!important;
        transition:transform .28s cubic-bezier(.22,1,.36,1)!important;
        background:linear-gradient(180deg,#1b2228,#111518)!important;
        border-right:1px solid rgba(117,213,255,.18);
        box-shadow:18px 0 45px rgba(0,0,0,.38);
    }

    .effect-airbnb.animate .outer-nav {
        transform:translateX(0)!important;
    }

    .bb-desktop-drawer-close {
        position:absolute;
        top:18px;
        right:18px;
        z-index:2;
        width:38px;
        height:38px;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#dff6ff;
        background:rgba(117,213,255,.1);
        border:1px solid rgba(117,213,255,.2);
        border-radius:50%;
        font-size:0;
        cursor:pointer;
        transition:background-color .15s ease,transform .15s ease;
    }

    .bb-desktop-drawer-close::before,
    .bb-desktop-drawer-close::after {
        content:"";
        position:absolute;
        top:50%;
        left:50%;
        width:16px;
        height:2px;
        background:currentColor;
        border-radius:2px;
        transform-origin:center;
    }

    .bb-desktop-drawer-close::before {
        transform:translate(-50%,-50%) rotate(45deg);
    }

    .bb-desktop-drawer-close::after {
        transform:translate(-50%,-50%) rotate(-45deg);
    }

    .bb-desktop-drawer-close:hover {
        background:rgba(117,213,255,.2);
        transform:scale(1.04);
    }

    .bb-desktop-drawer-close:focus-visible {
        outline:2px solid #75d5ff;
        outline-offset:3px;
    }

    .effect-airbnb .outer-nav a,
    .effect-airbnb.animate .outer-nav a {
        opacity:1!important;
        transform:none!important;
        transition:color .15s ease,background-color .15s ease!important;
    }

    .outer-nav .nav-item a {
        margin:2px 14px!important;
        padding:14px 18px!important;
        width:auto!important;
        border-radius:12px;
        font:700 14px Helvetica,Arial,sans-serif!important;
    }

    .bb-staff-portal-menu .outer-nav .nav-item a:hover,
    .bb-staff-portal-menu .outer-nav .nav-item a.active-item {
        color:#fff!important;
        background:rgba(17,159,218,.16);
    }

    .perspective_container::after {
        position:fixed!important;
        z-index:2147481000;
        inset:0!important;
        width:auto!important;
        height:100%!important;
        visibility:hidden;
        opacity:0!important;
        pointer-events:none;
        background:rgba(4,8,11,.58)!important;
        transition:opacity .22s ease,visibility 0s linear .22s!important;
    }

    .animate .perspective_container::after {
        visibility:visible;
        opacity:1!important;
        pointer-events:auto;
        transition:opacity .22s ease!important;
    }
}