#wrapper .header {
    background-color: #2a2d33;
    padding: 10px 0;
    margin-bottom: 10px;
}

#wrapper .header .RadMenu {
    margin: 10px 0;
    float: none;
}

#wrapper .logo {
    margin: 10px 0;
    width: 100%;
    display: inline-block;
}

#wrapper .logo img {
    max-width: 100%;
}

#wrapper .jumbotron {
    padding: 1.875em;
    padding-top: 1em;
    background-color: #e9eaea;
}

#wrapper .jumbotron .RadButton {
    float: right;
    margin-top: .667em;
    font-size: .5em;
}

#wrapper .footer {
    width:100%;
    padding: 30px 15px;
    line-height: 30px;
}

/* Enable horizontal scrolling inside the RadListBox */
.events-list .rlbContent,
.events-list .rlbGroup,
.events-list .rlbList {
    overflow-x: scroll !important; /* or use scroll to always show the bar */
}

/* Make each item behave like a wide row so horizontal scroll is meaningful */
.events-list .event-item {
    display: grid;
    /* time | title | category | location (tweak as needed) */
    grid-template-columns: 160px 360px 240px 260px;
    gap: 8px;
    align-items: center;
    min-height: 32px;

    /* Ensure total width exceeds the visible list width to allow horizontal scroll */
    min-width: 1020px;
}

/* Prevent wrapping so columns stay on one line; allow horizontal overflow */
.events-list .event-item .col {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* RadListBox horizontal scroll (scroll area is the content panel) */
.events-list .rlbContent {
    overflow-x: auto !important;   /* show H-scroll when needed */
    overflow-y: auto;              /* keep vertical scrolling */
}

/* Ensure inner wrappers don't clip horizontal overflow */
.events-list .rlbGroup,
.events-list .rlbList,
.events-list .rlbItem,
.events-list .rlbText {
    overflow: visible !important;
}

/* Make each item wide enough to trigger horizontal scrolling */
.events-list .event-item {
    display: grid;
    grid-template-columns: 180px 360px 240px 260px; /* time | title | category | location */
    gap: 8px;
    align-items: center;
    min-height: 32px;

    /* The key: make the item's width exceed the list's visible width */
    width: max-content;    /* size to content width in modern browsers */
    min-width: 1500px;     /* fallback to guarantee overflow */
}

/* Keep columns on one line */
.events-list .event-item .col {
    white-space: nowrap;
}

/* Make the scroll container handle horizontal overflow */
.events-list .rlbContent {
    overflow-x: auto !important;
    overflow-y: auto;
}

/* Let the UL grow to the widest item so .rlbContent can scroll */
.events-list .rlbList {
    width: max-content !important;   /* expand to content width */
    min-width: 100% !important;      /* but never smaller than the viewport */
}

/* Ensure wrappers don't clip the wide template */
.events-list .rlbItem,
.events-list .rlbText {
    width: auto !important;
    overflow: visible !important;
}

/* Keep your wide item layout (one row, no wrapping) */
.events-list .event-item {
    display: grid;
    grid-template-columns: 180px 360px 240px 260px;
    gap: 8px;
    align-items: center;
    min-height: 32px;

    width: max-content;   /* size to its content */
    min-width: 1040px;    /* ensure it can overflow the visible area */
}

.events-list .event-item .col {
    white-space: nowrap;
}

/* Side-by-side lists with a centered transfer button column */
.schedule-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.schedule-layout .list-col {
    flex: 1 1 0;
    min-width: 0; /* allow flex children to shrink */
}
.schedule-layout .transfer-col {
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical center */
    align-items: center;
    gap: 8px;
    width: 52px; /* enough room for buttons */
}
.schedule-layout .transfer-col .RadButton {
    width: 40px;
}

/* Make items in both RadListBox controls 50% of the base font size */
.events-list {
    font-size: 0.5em;
}

/* Optional: tighten row height a bit for the smaller text */
.events-list .event-item {
    min-height: 24px;
}

.events-list,
.events-list .rlbList,
.events-list .rlbItem,
.events-list .rlbText,
.events-list .event-item {
    font-size: 0.5em !important;
}

/* ========== Mobile (phones) ========== */
@media (max-width: 600px) {
    /* Stack layout vertically on phones */
    .schedule-layout {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    /* Transfer buttons sit between lists, centered horizontally */
    .schedule-layout .transfer-col {
        order: 2;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 12px;
    }
    .schedule-layout .transfer-col .RadButton {
        width: 48px;
        height: 48px;
        font-size: 20px;
        line-height: 1;
    }

    /* Each list takes full width and uses a comfortable height */
    .events-list .rlbContent {
        height: 38vh !important;
        max-height: 38vh !important;
        overflow-x: hidden !important;  /* no horizontal scroll on mobile */
        overflow-y: auto !important;
    }
    /* Ensure the UL doesn't force horizontal scroll */
    .events-list .rlbList {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Item layout: stack fields, allow wrapping, no fixed min-widths */
    .events-list .event-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px 0;
        min-width: 0 !important;
        width: 100% !important;
    }
    .events-list .event-item .col {
        white-space: normal !important;   /* allow wrapping on small screens */
        overflow: visible;
        text-overflow: clip;
        display: block;
    }
    .events-list .event-item .col.time {
        font-weight: 600;
    }
    .events-list .event-item .col.title {
        font-weight: 600;
    }

    /* Filter bar wraps and dropdown spans full width */
    .filter-bar {
        flex-wrap: wrap;
        gap: 6px;
    }
    .filter-bar .RadDropDownList,
    .filter-bar .RadDropDownList .rddlInner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

/* ========== Desktop/tablet (keep your current wide-row behavior) ========== */
@media (min-width: 601px) {
    /* If you want wide “columns”, keep horizontal scroll and fixed min-widths here.
       If you no longer want horizontal scroll on desktop, you can remove these. */
    .events-list .rlbContent { overflow-x: auto !important; }
    .events-list .rlbList { width: max-content !important; min-width: 100% !important; }
    .events-list .event-item {
        display: grid;
        grid-template-columns: 120px 1fr 1fr; /* time | title | location */
        gap: 8px;
        width: max-content;
        min-width: 900px; /* adjust as needed */
    }
    .events-list .event-item .col { white-space: nowrap; }
}

/* === RadListBox responsive overrides (place at end of file) === */

/* Mobile-first: stack and wrap, no forced widths */
.events-list .rlbContent,
.events-list .rlbGroup,
.events-list .rlbList {
    overflow-x: hidden !important;
}
.events-list .rlbList {
    width: 100% !important;
    min-width: 0 !important;
}
.events-list .event-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 0;
    width: 100% !important;
    min-width: 0 !important;
}
.events-list .event-item .col {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    display: block;
}

/* Make the two lists stack cleanly on phones */
.schedule-layout {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.schedule-layout .transfer-col {
    order: 2;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 12px;
}

/* Improve readability on phones (your lists use 9–10px now) */
@media (max-width: 600px) {
    .events-list,
    .events-list .rlbList,
    .events-list .rlbItem,
    .events-list .rlbText,
    .events-list .event-item {
        font-size: 12px !important;
        line-height: 1.3;
    }
    .events-list .rlbContent {
        height: 40vh !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
    }
}

/* Desktop/tablet: re-enable your wide columns and horizontal scroll only here */
@media (min-width: 992px) {
    .schedule-layout { flex-direction: row; }

    .events-list .rlbContent { overflow-x: auto !important; }
    .events-list .rlbList { width: max-content !important; min-width: 100% !important; }

    .events-list .event-item {
        display: grid;
        grid-template-columns: 120px 1fr 1fr; /* time | title | location */
        gap: 8px;
        width: max-content;
        min-width: 900px;
    }
    .events-list .event-item .col { white-space: nowrap; }
}

/* --- Responsive hard overrides (append at end of file) --- */

/* Mobile-first: stack, wrap, no horizontal scroll */
.schedule-layout {
    flex-direction: column !important;
    gap: 12px;
    align-items: stretch;
}
.schedule-layout .list-col,
.schedule-layout .transfer-col {
    width: 100% !important;
    max-width: 100% !important;
}
.schedule-layout .transfer-col {
    order: 2 !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px;
}

.events-list .rlbContent {
    overflow-x: hidden !important;
    height: 40vh !important;
    max-height: 40vh !important;
}
.events-list .rlbList {
    width: 100% !important;
    min-width: 0 !important;
}
.events-list .event-item {
    display: grid;
    grid-template-columns: 1fr !important; /* stack fields */
    width: 100% !important;
    min-width: 0 !important;
}
.events-list .event-item .col {
    white-space: normal !important;
}

/* Desktop/tablet: re-enable wide layout and horizontal scroll only here */
@media (min-width: 992px) {
    .schedule-layout { flex-direction: row !important; }

    .events-list .rlbContent { overflow-x: auto !important; }
    .events-list .rlbList { width: max-content !important; min-width: 100% !important; }

    .events-list .event-item {
        grid-template-columns: 120px 1fr 1fr !important; /* time | title | location */
        width: max-content !important;
        min-width: 900px !important;
    }
    .events-list .event-item .col { white-space: nowrap !important; }
}

/* Desktop fix: place transfer buttons vertically between the lists */
@media (min-width: 992px) {
  .schedule-layout {
    flex-direction: row !important;
    align-items: stretch;
    flex-wrap: nowrap; /* prevent wrapping to next line */
  }

  .schedule-layout .list-col {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important; /* undo 100% width from mobile rules */
  }

  .schedule-layout .transfer-col {
    order: 0 !important;           /* ensure it renders between the two list cols */
    display: flex;
    flex-direction: column;         /* stack ▲ over ▼ */
    justify-content: center;        /* vertical center between lists */
    align-items: center;
    gap: 8px;
    width: 52px !important;         /* fixed middle column */
    flex: 0 0 52px;                 /* don't grow/shrink */
  }

  .schedule-layout .transfer-col .RadButton {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}

/* RadDropDownList popup font-size for rddlCategory */
.cat-ddl-popup,
.cat-ddl-popup .rddlList,
.cat-ddl-popup .rddlItem,
.cat-ddl-popup .rddlItem .rddlItemText,
.cat-ddl-popup .rddlGroupHeader {
    font-size: 12px !important;
    line-height: 1.25;
}

/* Email textbox placeholder styling */
.email-input::placeholder {
    color: #888;
    opacity: 1; /* ensure consistent across browsers */
}
.email-input:-ms-input-placeholder { color:#888; }      /* IE 10-11 */
.email-input::-ms-input-placeholder { color:#888; }     /* Edge legacy */

/* Hide placeholder when focused (optional per requirement) */
.email-input:focus::placeholder {
    color: transparent;
}