/*
    Tenant site tokens - the contract, and a fallback set.

    Every value here is replaced at runtime by
    resources/views/frontend/partials/design-tokens.blade.php, which emits the
    tenant's palette (and the font they chose) as `:root` custom properties. That
    is the only place they come from, so a stylesheet that references them has no
    declaration to point at and - without this block - nothing to fall back on if a
    layout renders before (or without) that partial.

    `:where()` keeps this at zero specificity on purpose: the runtime `:root` block
    always out-ranks it, whichever order the two arrive in. In other words these
    are defaults for tooling and for a missing palette, never an override.
*/
:where(:root) {
    --oc-primary: #E53935;
    --oc-on-primary: #FFFFFF;
    --oc-primary-hover: #C62828;
    --oc-primary-tint: #FDECEC;
    --oc-ring: rgba(229, 57, 53, .26);
    --oc-secondary: #2C303B;
    --oc-on-secondary: #FFFFFF;
    --oc-menu-bg: #FFFFFF;
    --oc-menu-fg: #2C303B;
    --oc-text: #374151;
    --oc-heading: #111827;
    --oc-muted: #6B7280;
    --oc-surface: #FFFFFF;
    --oc-surface-alt: #F7F7F8;
    --oc-border: rgba(17, 24, 39, .10);
    --oc-band: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    --oc-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --oc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --oc-radius: 4px;
    --oc-space-unit: 1rem;
    --oc-heading-transform: none;
    --oc-heading-weight: 700;
}

/*
    The typeface, applied on top of the vendor stylesheets.

    The vendor stylesheets hard-code their own families in ~30 places - the body
    rule is Titillium Web (the classic palette's font, kept for tenants that never
    chose one), and the logo, buttons, ribbon, news titles and stat counters carry
    Titillium / Montserrat / Open Sans on ids and classes that outrank plain element
    selectors. That is why a palette's font, or a font chosen on Themes, only showed
    up where inheritance happened to reach. These rules re-point every text element
    at the font tokens, which the active palette (or the tenant's own choice)
    defines.

    `!important` is what makes that reliable against the vendor rules (ours are
    `body[data-oc-layout]`-scoped, so equal-or-higher specificity, and the vendor
    declarations are not important). The second argument of each `var()` is only a
    last-resort fallback for a page rendered without the token block - a neutral
    system stack, never a brand font - so it cannot be mistaken for the value in
    force. Icon fonts (icomoon, IcoFont, boxicons, FontAwesome) are deliberately
    untouched: they set their family on the icon element itself, so overriding them
    would turn the glyphs into text.
*/
body[data-oc-layout],
body[data-oc-layout] a,
body[data-oc-layout] p,
body[data-oc-layout] li,
body[data-oc-layout] td,
body[data-oc-layout] th,
body[data-oc-layout] label,
body[data-oc-layout] small,
body[data-oc-layout] strong,
body[data-oc-layout] figure,
body[data-oc-layout] figcaption,
body[data-oc-layout] blockquote,
body[data-oc-layout] .caption,
body[data-oc-layout] .btn,
body[data-oc-layout] button,
body[data-oc-layout] input,
body[data-oc-layout] select,
body[data-oc-layout] textarea,
body[data-oc-layout] .form-control,
body[data-oc-layout] .ribbon,
body[data-oc-layout] .ocmp-nav #ocmp-logo,
body[data-oc-layout] .ocmp-nav .top-menu {
    font-family: var(--oc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
}

body[data-oc-layout] h1,
body[data-oc-layout] h2,
body[data-oc-layout] h3,
body[data-oc-layout] h4,
body[data-oc-layout] h5,
body[data-oc-layout] h6,
body[data-oc-layout] .ocmp-heading,
body[data-oc-layout] .ocmp-counters .ocmp-counter,
body[data-oc-layout] .display-tc h1,
body[data-oc-layout] .display-tc h2,
body[data-oc-layout] h3.video-title,
body[data-oc-layout] h3.content-title {
    font-family: var(--oc-font-display, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
}

/* ---------------------------------------------------------------- type scale
   One scale for the whole site, so a section heading is the same size whichever
   layout renders it. The vendor stylesheets disagree with themselves here:
   `.header-title` is 2em while a plain `h2` is the browser's 1.5em, and each layout
   used to add its own tweaks on top - which is why the same section measured a
   different size per template. `body[data-oc-layout]`-scoped so these out-rank the
   vendor's class rules, while id-scoped vendor rules (the hero headings) still win. */
body[data-oc-layout] h1 {
    font-size: 2.6rem;
    line-height: 1.2;
}

body[data-oc-layout] h2 {
    font-size: 2rem;
    line-height: 1.25;
}

body[data-oc-layout] h3 {
    font-size: 1.5rem;
    line-height: 1.3;
}

body[data-oc-layout] h4 {
    font-size: 1.25rem;
    line-height: 1.35;
}

body[data-oc-layout] h5,
body[data-oc-layout] h6 {
    font-size: 1.0625rem;
    line-height: 1.4;
}

/* The section titles the shared sections render (`.header-title` is the vendor's
   2em one; `.ocmp-heading` wraps the about/committee/news/gallery headings). */
body[data-oc-layout] .header-title,
body[data-oc-layout] .ocmp-heading h2,
body[data-oc-layout] .ocmp-heading .section-title {
    font-size: 2rem;
    line-height: 1.25;
}

/* Lead copy under those headings, so intros read at the same size everywhere. */
body[data-oc-layout] .ocmp-heading > p {
    font-size: 1.0625rem;
    line-height: 1.7;
}

body[data-oc-layout] .about-content p,
body[data-oc-layout] .oc-contact .org-info p {
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* The contact block: the org name and address at one size in every layout (they
   were inline styles, and the portal's narrower column made them read small). */
body[data-oc-layout] .oc-contact .org-info h2 {
    font-size: 2.25rem;
    line-height: 1.2;
}

body[data-oc-layout] .oc-contact .org-info p {
    font-size: 1.125rem;
    line-height: 1.7;
}

body[data-oc-layout] .oc-contact h3 {
    font-size: 1.25rem;
    line-height: 1.45;
}

/* Handset step: headings shrink once, the same way in every template. The layouts
   used to each carry their own mobile size (1.4rem here, 1.55rem in default), which
   is why the same heading measured differently per template on a phone. */
@media (max-width: 767px) {
    body[data-oc-layout] h1 {
        font-size: 2.1rem;
    }

    body[data-oc-layout] h2,
    body[data-oc-layout] .header-title,
    body[data-oc-layout] .ocmp-heading h2,
    body[data-oc-layout] .ocmp-heading .section-title {
        font-size: 1.6rem;
    }

    body[data-oc-layout] h3 {
        font-size: 1.3rem;
    }

    body[data-oc-layout] .oc-contact .org-info h2 {
        font-size: 1.85rem;
    }

    body[data-oc-layout] .oc-contact .org-info p {
        font-size: 1.0625rem;
    }
}

/* --------------------------------------------------------------- components
   Blocks the shared sections and partials render, styled once so every layout
   gets them (the section markup is shared, only the arrangement differs). */
body[data-oc-layout] .about-image {
    background-position: center;
    background-size: cover;
    border-radius: var(--oc-radius, 4px);
    margin-bottom: 1rem;
    min-height: 280px;
}

body[data-oc-layout] .about-content {
    padding-bottom: 1.5rem;
    padding-top: 0.5rem;
}

body[data-oc-layout] .booking-widget-illustration {
    display: block;
    margin: 0 auto 0.75rem;
    max-width: 160px;
    opacity: 0.85;
    width: 100%;
}

/* The booking widget is included in the hero, a full-width band and the narrow
   rail/aside columns; inside those it must not add its own gutter. */
body[data-oc-layout] .rail-box .booking-widget-shell,
body[data-oc-layout] .aside-box .booking-widget-shell,
body[data-oc-layout] .rail-box .booking-widget-shell .col-md-12,
body[data-oc-layout] .aside-box .booking-widget-shell .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   OCMP tenant site - shared polish layer
   --------------------------------------------------------------------------
   Loaded after every vendor stylesheet of both public themes, so this is the
   file that decides how a tenant site actually looks. Everything here reads the
   --oc-* custom properties emitted by
   resources/views/frontend/partials/design-tokens.blade.php (the tenant's
   palette plus their colour overrides) - there are no hard-coded brand colours.

   Scope:  body[data-oc-layout]              both themes ("default", "shuffle")
           body[data-oc-layout="default"]    layout-specific tweaks live in
           body[data-oc-layout="shuffle"]    web/css/templates/<layout>.css

   `!important` is used only where a vendor stylesheet or an inline style from
   the theme markup would otherwise win.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. base */

body[data-oc-layout] {
    background: var(--oc-surface, #FFFFFF);
    color: var(--oc-text, #374151);
    font-family: var(--oc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body[data-oc-layout] h1,
body[data-oc-layout] h2,
body[data-oc-layout] h3,
body[data-oc-layout] h4,
body[data-oc-layout] h5,
body[data-oc-layout] h6 {
    color: var(--oc-heading, #111827);
    font-family: var(--oc-font-display, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-weight: var(--oc-heading-weight, 700);
    letter-spacing: -0.01em;
    text-transform: var(--oc-heading-transform, none);
    line-height: 1.25;
}

body[data-oc-layout] p {
    color: var(--oc-text, #374151);
    line-height: 1.75;
}

body[data-oc-layout] a {
    color: var(--oc-primary, #E53935);
    transition: color 0.18s ease;
}

body[data-oc-layout] a:hover,
body[data-oc-layout] a:focus {
    color: var(--oc-primary-hover, #C62828);
    text-decoration: none;
}

body[data-oc-layout] small,
body[data-oc-layout] .text-muted {
    color: var(--oc-muted, #6B7280) !important;
}

/* Keyboard users get a visible ring in the tenant's own colour. */
body[data-oc-layout] a:focus-visible,
body[data-oc-layout] button:focus-visible,
body[data-oc-layout] input:focus-visible,
body[data-oc-layout] select:focus-visible,
body[data-oc-layout] textarea:focus-visible {
    outline: 2px solid var(--oc-primary, #E53935);
    outline-offset: 2px;
}

/* --------------------------------------------------------- 2. section rhythm */

body[data-oc-layout] section,
body[data-oc-layout] .ocmp-counters,
body[data-oc-layout] .content-section,
body[data-oc-layout] #about,
body[data-oc-layout] #news,
body[data-oc-layout] #gallery,
body[data-oc-layout] #committee,
body[data-oc-layout] #amenities,
body[data-oc-layout] #events,
body[data-oc-layout] #contact {
    padding-top: calc(var(--oc-space-unit, 1rem) * 3);
    padding-bottom: calc(var(--oc-space-unit, 1rem) * 3);
}

/* Dark bands (page headers, contact block) use the palette gradient. */
body[data-oc-layout] .ocmp-bg-section,
body[data-oc-layout] .oc-band,
body[data-oc-layout] .parallax-section {
    background: var(--oc-band, linear-gradient(135deg, #1F2937 0%, #374151 100%));
    background-image: var(--oc-band, linear-gradient(135deg, #1F2937 0%, #374151 100%));
    background-size: cover;
    background-position: center;
}

body[data-oc-layout] .ocmp-bg-section *,
body[data-oc-layout] .oc-band * {
    border-color: rgba(255, 255, 255, 0.18);
}

body[data-oc-layout] .ocmp-bg-section h1,
body[data-oc-layout] .ocmp-bg-section h2,
body[data-oc-layout] .ocmp-bg-section h3,
body[data-oc-layout] .ocmp-bg-section h4,
body[data-oc-layout] .ocmp-bg-section h5,
body[data-oc-layout] .ocmp-bg-section h6,
body[data-oc-layout] .ocmp-bg-section p,
body[data-oc-layout] .ocmp-bg-section .text-muted {
    color: #FFFFFF !important;
}

/* Every section heading gets the same accent rule and spacing. */
body[data-oc-layout] .ocmp-heading .section-title::after,
body[data-oc-layout] .header-title::after,
body[data-oc-layout] .section-title::after {
    background: var(--oc-primary, #E53935) !important;
}

body[data-oc-layout] .header-title,
body[data-oc-layout] .ocmp-heading {
    margin-bottom: calc(var(--oc-space-unit, 1rem) * 1.5);
}

/* ------------------------------------------------------------- 3. buttons */

/*
    Buttons are a touch rounder than the palette's radius (4px -> 6px).

    The vendor stylesheets disagree with themselves here: `.more-services .btn`
    and `#hero .btn-get-started` are 50px pills, `.btn.custom` is 4px and
    `.btn-outline-primary.custom-white` is 2px - and the id-scoped pill rules
    outrank a class-scoped override, so buttons bore no family resemblance
    between one section and the next. `!important` is what makes a single value
    stick on every button of every layout, the same way the font rules below do.
    It keeps the rounding proportional too: a palette that ships a rounder
    `--oc-radius` gets rounder buttons.
*/
body[data-oc-layout] .btn,
body[data-oc-layout] button,
body[data-oc-layout] input[type="button"],
body[data-oc-layout] input[type="submit"],
body[data-oc-layout] input[type="reset"],
body[data-oc-layout] .button {
    border-radius: calc(var(--oc-radius, 4px) + 2px) !important;
    font-family: var(--oc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body[data-oc-layout] .btn:hover,
body[data-oc-layout] button:hover {
    transform: translateY(-1px);
}

body[data-oc-layout] .btn-primary,
body[data-oc-layout] .btn-info {
    background: var(--oc-primary, #E53935) !important;
    border-color: var(--oc-primary, #E53935) !important;
    color: var(--oc-on-primary, #FFFFFF) !important;
}

body[data-oc-layout] .btn-primary:hover,
body[data-oc-layout] .btn-primary:focus,
body[data-oc-layout] .btn-info:hover,
body[data-oc-layout] .btn-info:focus {
    background: var(--oc-primary-hover, #C62828) !important;
    border-color: var(--oc-primary-hover, #C62828) !important;
    color: var(--oc-on-primary, #FFFFFF) !important;
}

body[data-oc-layout] .btn-success {
    background: var(--oc-secondary, #2C303B) !important;
    border-color: var(--oc-secondary, #2C303B) !important;
    color: var(--oc-on-secondary, #FFFFFF) !important;
}

body[data-oc-layout] .btn-outline-primary,
body[data-oc-layout] .btn-default {
    background: transparent;
    border: 1px solid var(--oc-primary, #E53935);
    color: var(--oc-primary, #E53935);
}

body[data-oc-layout] .btn-outline-primary:hover,
body[data-oc-layout] .btn-default:hover {
    background: var(--oc-primary-tint, #FDECEC);
    color: var(--oc-primary-hover, #C62828);
    border-color: var(--oc-primary-hover, #C62828);
}

body[data-oc-layout] .btn-link,
body[data-oc-layout] a.btn-link {
    color: var(--oc-primary, #E53935);
    background: none;
    border: 0;
}

/* ------------------------------------------------------ 4. surfaces & cards */

body[data-oc-layout] .card,
body[data-oc-layout] .panel,
body[data-oc-layout] .box,
body[data-oc-layout] .simple-radius-box,
body[data-oc-layout] .booking-widget,
body[data-oc-layout] .facility-card,
body[data-oc-layout] .news-item {
    background: var(--oc-surface, #FFFFFF);
    border: 1px solid var(--oc-border, rgba(17, 24, 39, .10));
    border-radius: var(--oc-radius, 4px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-oc-layout] .card:hover,
body[data-oc-layout] .facility-card:hover,
body[data-oc-layout] .news-item:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

body[data-oc-layout] .badge,
body[data-oc-layout] .label {
    border-radius: calc(var(--oc-radius, 4px) * 0.75);
    font-weight: 600;
    letter-spacing: 0.02em;
}

body[data-oc-layout] .badge-primary,
body[data-oc-layout] .label-primary {
    background: var(--oc-primary, #E53935) !important;
    color: var(--oc-on-primary, #FFFFFF) !important;
}

body[data-oc-layout] .badge-secondary,
body[data-oc-layout] .label-secondary {
    background: var(--oc-secondary, #2C303B) !important;
    color: var(--oc-on-secondary, #FFFFFF) !important;
}

/* ---------------------------------------------------------------- 5. forms */

body[data-oc-layout] input:not([type="checkbox"]):not([type="radio"]),
body[data-oc-layout] select,
body[data-oc-layout] textarea,
body[data-oc-layout] .form-control {
    background: var(--oc-surface, #FFFFFF);
    border: 1px solid var(--oc-border, rgba(17, 24, 39, .10));
    border-radius: var(--oc-radius, 4px);
    color: var(--oc-text, #374151);
    font-family: var(--oc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    padding: 10px 12px;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body[data-oc-layout] input:focus,
body[data-oc-layout] select:focus,
body[data-oc-layout] textarea:focus,
body[data-oc-layout] .form-control:focus {
    border-color: var(--oc-primary, #E53935);
    box-shadow: 0 0 0 3px var(--oc-ring, rgba(229, 57, 53, .26));
    outline: none;
}

body[data-oc-layout] label {
    color: var(--oc-heading, #111827);
    font-weight: 600;
}

/* ----------------------------------------------------------- 6. navigation */

body[data-oc-layout] .ocmp-nav ul li a,
body[data-oc-layout] .ocmp-nav ul li a:visited {
    color: var(--oc-menu-fg, #2C303B) !important;
    font-family: var(--oc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 0.18s ease, color 0.18s ease;
}

body[data-oc-layout] .ocmp-nav ul li a:hover,
body[data-oc-layout] .ocmp-nav ul li a:focus,
body[data-oc-layout] .ocmp-nav ul li.active > a {
    background: var(--oc-primary, #E53935) !important;
    color: var(--oc-on-primary, #FFFFFF) !important;
    filter: none !important;
}

body[data-oc-layout] .ocmp-nav .top-menu {
    background: var(--oc-primary, #E53935);
    border-bottom-color: var(--oc-primary, #E53935);
}

/* The vendor stack pins the menu bar with position: fixed and no layout space.
   The classic layout gets away with it because its hero is padded to sit under
   the bar; the newer layouts put their own first block there instead, so the bar
   covered it. For those, keep the bar in the flow and stuck to the top - and stop
   anchor jumps from landing a heading underneath it. */
body[data-oc-layout="portal"] #sticky-menu,
body[data-oc-layout="gateway"] #sticky-menu,
body[data-oc-layout="magazine"] #sticky-menu,
body[data-oc-layout="bands"] #sticky-menu,
body[data-oc-layout="sidebar"] #sticky-menu {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 3px rgba(9, 13, 20, 0.06);
}

body[data-oc-layout="portal"] .ocmp-nav .top-menu,
body[data-oc-layout="gateway"] .ocmp-nav .top-menu,
body[data-oc-layout="magazine"] .ocmp-nav .top-menu,
body[data-oc-layout="bands"] .ocmp-nav .top-menu,
body[data-oc-layout="sidebar"] .ocmp-nav .top-menu {
    position: static;
}

/* The menu links to #about, #news, #amenities... so jumps need to clear the bar. */
html {
    scroll-padding-top: 84px;
}

/* -------------------------------------------------------------- 7. footer */

body[data-oc-layout] footer,
body[data-oc-layout] #ocmp-footer,
body[data-oc-layout] .footer {
    background: var(--oc-menu-bg, #FFFFFF);
    color: var(--oc-menu-fg, #2C303B);
    border-top: 1px solid var(--oc-border, rgba(17, 24, 39, .10));
    padding-top: calc(var(--oc-space-unit, 1rem) * 1.5);
    padding-bottom: calc(var(--oc-space-unit, 1rem) * 1.5);
}

body[data-oc-layout] footer a,
body[data-oc-layout] #ocmp-footer a {
    color: var(--oc-menu-fg, #2C303B);
}

body[data-oc-layout] footer a:hover,
body[data-oc-layout] #ocmp-footer a:hover {
    color: var(--oc-primary, #E53935);
}

body[data-oc-layout] .ocmp-social-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------- 8. tables (issues pages) */

body[data-oc-layout] table {
    border-radius: var(--oc-radius, 4px);
    overflow: hidden;
}

body[data-oc-layout] table thead th,
body[data-oc-layout] table > thead > tr > th {
    background: var(--oc-surface-alt, #F7F7F8);
    color: var(--oc-heading, #111827);
    font-family: var(--oc-font-display, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-weight: 600;
    border-color: var(--oc-border, rgba(17, 24, 39, .10));
}

body[data-oc-layout] table td,
body[data-oc-layout] table th {
    border-color: var(--oc-border, rgba(17, 24, 39, .10));
    color: var(--oc-text, #374151);
}

body[data-oc-layout] table tbody tr:hover {
    background: var(--oc-primary-tint, #FDECEC);
}

/* --------------------------------------------------------- 9. components */

body[data-oc-layout] blockquote {
    border-left: 3px solid var(--oc-primary, #E53935);
    background: var(--oc-primary-tint, #FDECEC);
    border-radius: 0 var(--oc-radius, 4px) var(--oc-radius, 4px) 0;
    padding: calc(var(--oc-space-unit, 1rem) * 0.75) var(--oc-space-unit, 1rem);
}

body[data-oc-layout] hr {
    border-color: var(--oc-border, rgba(17, 24, 39, .10));
}

body[data-oc-layout] .alert {
    border-radius: var(--oc-radius, 4px);
    border-width: 1px;
}

body[data-oc-layout] .alert-success {
    background: var(--oc-primary-tint, #FDECEC);
    border-color: var(--oc-border, rgba(17, 24, 39, .10));
    color: var(--oc-heading, #111827);
}

body[data-oc-layout] .pagination > li.active > a,
body[data-oc-layout] .pagination .page-item.active .page-link {
    background: var(--oc-primary, #E53935);
    border-color: var(--oc-primary, #E53935);
    color: var(--oc-on-primary, #FFFFFF);
}

/* --------------------------------------------------------- 10. layout hooks */

/* Shuffle paints its own chrome: keep its neutral section background in step
   with the palette. The header rules live in web/css/templates/shuffle.css. */
body[data-oc-layout="shuffle"] .section-bg {
    background-color: var(--oc-surface-alt, #F7F7F8) !important;
}

/* ------------------------------------------ 11. facility availability notice */

/* A facility that is not in operation explains itself inside a danger box - the
   facility tabs on every layout and the sidebar's facilities list both use this,
   so the notice reads the same wherever a tenant meets it.

   Fixed colours rather than palette tokens: it has to read as a warning whichever
   palette the tenant picked, including the dark one (Midnight). The text colour
   clears 7:1 on the tint. */
.oc-facility-closed {
    background: #FDECEC;
    border: 1px solid #E55353;
    border-left-width: 4px;
    border-radius: 6px;
    color: #A01C1C;
    display: block;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding: 10px 12px;
}

.oc-facility-closed i {
    margin-right: 6px;
}

/* inside the sidebar's compact facilities list */
.aside-list .oc-facility-closed {
    margin-top: 4px;
    padding: 6px 8px;
}