:root {
    --nethub-red: #E73746;
}

/* font overrides */
html, body,
h1, h2, h3, h4, h5, h6,
p, div, span, a, li, ul, ol,
label, input, textarea, select, button,
table, th, td,
strong, em, b, small,
summary, caption, figcaption {
  font-family: 'IBM Plex Sans', sans-serif !important;
}

.hidden {
    display: none;
}

/* keep for now used in scripts  */
.ticket-sales-container__summary-field hr {
    height: 50px;
    width: 1px;
    align-self: center;
    background: gray;
    margin: 0;
}
.ticket-sales-container__summary-field {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 10px;
}
.ticket-sales-container__summary-field:not(:last-child) {
    margin-bottom: 15px;
}
.ticket-sales-container__summary-item .ticket-sales-container__summary-item-label, 
.ticket-sales-container__summary-item-value,
.ticket-sales-container__summary-item-note {
    margin-bottom: 0;
    text-align: center;
}
.ticket-sales-container__summary-item-label {
    font-size: 0.9em;
}
.ticket-sales-container__summary-item-value {
    font-weight: bold;
    font-size: 1.3em;
}
.ticket-sales-container__summary-item-note {
    font-size: 0.7em;
    font-style: italic;
}
/* keep for now used in scripts */
#eventsTable_filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#eventsTable_filter p {
    font-size: 1.2rem;
    margin-bottom: 0;
    margin-right: 15px;
}

#eventsTable_filter label {
    margin-bottom: 0;
}
/* ------------------ */

/* keep */
.wrapper {
    height: unset;
    min-height: 100vh;
}

/* --------------------------------------- */
/* -- EXISTING TABLE MANAGEMENT SECTION -- */
/* --------------------------------------- */
.table-management__tables-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

table tr:nth-child(even).table-management__unused-table-dragover,
table tr:nth-child(odd).table-management__unused-table-dragover {
    border: 1px solid yellow;
    background: rgba(255, 0, 0, 0.09);
}

.table-management__table td,
.table-management__table th {
    border: 1px solid #ddd;
}

.table-management__table td.seatNumberField {
    text-align: center;
}

.table-management__table {
    width: 530px;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-management__table--unassigned {
    width: 100% !important;
    table-layout: fixed;
}

#ongAttendeesContainer .dataTables_scrollHeadInner {
    width: 100% !important;
}

.table-management__table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table-management__table tr:hover {
    background-color: #ddd;
}

.table-management__table th {
    background-color: #ddd;
}

#ongAttendeesContainer div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.table-management__table .idField,
.table-management__table .tableNumberField {
    display: none;
}

.table-management__table th.nameHeading,
.table-management__table th.companyHeading,
.table-management__table th.invitedByHeading,
.table-management__table th.sectorHeading,
.table-management__table th.seatNumber {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 120px;
}

.table-management__table th.invitedByheading {
    white-space: nowrap;
}

.table-management__table tbody {
    font-size: 12px;
}

.table-management__table th.seatNumber {
    text-align: center;
    width: 50px;
}

.table-management__table td.nameField,
.table-management__table td.companyField,
.table-management__table td.invitedByField,
.table-management__table td.sectorField {
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}


.table-management__modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    margin: 0;
    width: min(750px, 90%);
    z-index: 9999;
}

.table-management__group-hover {
    background: rgba(0, 255, 0, 0.3) !important;
}

table.compact thead th,
table.compact thead td {
  padding: 5px 9px !important;
}

table.table-management__table.dataTable {
    border-collapse: collapse !important;
}

table.table-management__table.dataTable.compact>tbody>tr>td,
table.table-management__table.dataTable.compact>tbody>tr>td {
  padding: 0px !important;
}

.table-management__number-picker {
    max-width: 60px;
}

.table-management__vertical-separator {
    width: 1px;
    height: 100%;
}

.table-management__event-title {
    font-size: 1.75rem;
}

.table-management__seatless-title {
    font-size: 1.5rem;
}

/* keep as it's inside a script */
#ongAttendeesContainer .randomiseTables {
    margin-top: 10px;
}

.dateField {
    width: 1%;
    white-space: nowrap;
}

#tableManagementContainer > .table-management__print-unassigned {
    display: none;
}

.table-management__double-click {
    font-style: italic;
    display: inline-block;
    margin-left: auto;
    font-size: 15px;
}

.table-management__double-click:not(:first-of-type) {
    display: none;
}

.table-management__table-title {
    margin-bottom: 3px;
    display: flex;
    margin-bottom: 0;
    align-items: center;
    justify-content: center;
}

.table-management__table-title p {
    align-self: center;
    margin-bottom: 0;
    /* text-decoration: underline; */
    font-size: 20px;
    font-weight: bold;
}

.table-management__table-summary {
    gap: 20px;
}

.table-management__table--unassigned .ui-selected {
    background: rgba(0, 255, 0, 0.3) !important;
}

@media print {
    #ongAttendeesContainer .card-header {
        display: none;
    }

    #ongAttendeesContainer .card-footer {
        display: none;
    }

    #ongAttendeesContainer .randomiseTables {
        display: none;
    }

    #ongAttendeesContainer .invitedByField,
    #ongAttendeesContainer .invitedByHeading,
    #ongAttendeesContainer .sectorHeading,
    #ongAttendeesContainer .sectorField {
        display: none;
    }

    #tableManagementContainer {
        display: flex;
        flex-direction: column;
    }

    #tableManagementContainer > div { 
        page-break-inside: avoid;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 90vh;
    }

    #tableManagementContainer > .table-management__print-unassigned {
        display: block;
    }

    _::-webkit-full-page-media, _:future, :root, #tableManagementContainer > div {
        /* wahh wahh wahh, I'm safari and I want to be special */
        height: 270vh;
    }

    #tableManagementContainer > div > div {
        width: 90vw;
        margin: 0 auto;
        border: 1px solid #ddd;
        border-bottom: none;
        justify-content: center;
        padding-bottom: 5px;
    }
    

    #tableManagementContainer > div > div > .table-management__double-click {
        display: none;
    }

    #tableManagementContainer > div > div > p {
        font-size: 24px;
        font-weight: bold;    
    }

    #tableManagementContainer > div > table {
        width: 90vw;
        margin: 0 auto;
        border: 1px 
    }

    #tableManagementContainer > div td,
    #tableManagementContainer > div th {
        padding: 5px;
        font-size: 20px;
    }

    @page :header {
        display: none;
    }

    @page :footer {
        display: none;
    }

    .card {
        border: none;
    }

    hr {
        display: none;
    }
}

/* keep for now as used in script */
.invisible-input {
    visibility: hidden;
}

/* keep for now, used in script */
.subscriptions-form-table__no-data-text {
    text-align: center;
}
.susbcriptions-form__expandable-open {
    transform: rotate(90deg);
}
.subscriptions-form__warning-row {
    background: rgba(255, 0, 0, 0.3) !important;

}

.btn-nethub.disabled {
    pointer-events: none;
    background-color: initial;
    background: #E73746;
}

/* keep */
.events__icon-btn {
    width: 30px;
    height: 30px;
    border: none;
    padding: 0 !important;
    border-radius: 5px;
}

.data-tables table tbody .btn.events__icon-btn {
    padding: 0 !important;
}

.events__icon-btn img {
    width: 70%;
    height: 70%;
    margin: 0 auto;
    border-radius: 5px;
}

.events__icon-btn--red {
    background: var(--nethub-red);
}

.events__icon-btn--published {
    background: limegreen
}

.events__icon-btn--published img {
    transform: rotate(180deg);
}

.events__cancelled-event {
    background:rgba(255, 0, 0, 0.3) !important;
}

.ticket-receipt-container #publicEventView .col-md-3 {
    display: none;
}

.ticket-receipt-container #publicEventView .col-md-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.page-header {
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui;
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
}

.resend-ticket__actions {
    width: 50%;
}

.resend-ticket__actions button {
    flex: 1 1 0;
}

.font-raleway {
    font-family: 'Raleway', sans-serif;
    color: black;
}

.public-events__container {
    padding: 0.05px 0;
    position: relative;
    /* top:60px; */
    padding-top:60px;
}

.public-events__container::after {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    z-index: -1;
    content: "";
}

.navbar-section {
    position:fixed; top:0; left:0; right:0; height:60px; display:flex; flex-direction:row; align-items:center; justify-content:center; z-index:2000; padding-inline:30px; background:rgb(252,252,252); box-shadow:0 4px 6px -2px rgba(8,25,31,0.25);
}

.navbar-logo-wrapper {
    position:relative; display:flex; flex-shrink:0; justify-content:center; width:300px; min-width:300px;
}

@media (max-width: 420px) {
    .navbar-logo-wrapper {
        margin:0px auto;
    }
}

/* -------- */

.public-events-header-inner-wrapper {
    display:flex; flex-direction: column; justify-content: space-around; height:500px; margin: 0px 20px; gap:60px; margin-top:20px;
}

@media (max-width: 420px) {
    .public-events-header-inner-wrapper {
        justify-content: flex-start !important;
    }
}   

.public-events__header {
    min-height: 60vh;
    max-width: 100%;
    position: relative;
    z-index: -1;
    display: flex;
    flex-direction: column;
    cursor:pointer;
    /* uncomment when we want the navbar in */
    
}

.public-events__header-background-img {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
}

.public-events__header .public-events__btn-link {
    font-size: 20px;
}

.public-events__header::before {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,.5);
    content: "";
    z-index: 2;
}

.public-events__title {
    font-weight: 500;
    color: white;
    font-size: 80px;
    width:100%;
}

.public-events__subtitle {
    font-weight: 500;
    color: white;
    font-size: 40px;
    width:100%;
}

.public-events__title--first {
    line-height: 0;
}

.public-events__title--second {
    margin: 0;
}

.public-events-search-btn {
    background: var(--nethub-red);
    color: white;
    border-width: 1px;
}

.public-events-search-btn-white {
    background: white;
    color: var(--nethub-red);
    border-color: var(--nethub-red);
    border-width: 1px;
}

.public-events__btn-link {
    background: var(--nethub-red);
    color: white;
    border-radius: 20px;
    padding: 0.5em 1.5em;
    font-weight: 500;
    margin-top: auto;
}
.public-events__btn-bookNow {
    background: var(--nethub-red);
    color: white;
    border-radius: 20px;
    padding: 0.5em 1.5em;
    font-weight: 500;
    margin-top: auto;
}
.public-events__btn-link-light {
    background: var(--nethub-red);
    color: white;
    border-radius: 20px;
    padding: 0.25em 1em;
    font-weight: 500;
    margin-top: auto;
    opacity: 0.8;
    font-size: 12px;
}
  
.public-events__btn-link-light.is-online {
    background-color: #08191F90 !important;
    color: white;
}

.public-events__btn-link--local-style {
    border-radius: 5px;
    background:transparent !important;
    border: 1px solid rgba(0,0,0,0.2);
    transition: all 0.1s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.public-events__btn-link--local-styleBranded {
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    transition: all 0.1s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.public-events__btn-link--local-style:hover, .public-events__btn-link--local-styleBranded:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.public-events__btn-link, .public-events__btn-bookNow {
    margin-top: initial;
}

.public-events__btn-link--white {
    background: white;
    color: var(--nethub-red);
}

.public-events__btn-link--brand {
    background: var(--nethub-red);
    color: white;
}

.public-events__main {
    width: min(1400px, 90%);
    margin: 30px auto;
}

.public-events__dynamic-events-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 15px;
    justify-content: center;
    margin-bottom: 40px;
    width: 100%;
}

/* SEARCH FILTERS SECTION */
.search-filter-events-section {
    margin: 30px 0px;
}

.search-filter-events {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 10px;
    justify-content: center;
}

.search-filter-events-column {
    width: 250px;
    flex-direction: column;
    align-items: center;
}

.event-search-checkbox-section, .event-search-cta-section {
    width: 250px;
    flex-direction: column;
    align-items: center;
}

/* test mobile media query */
@media (max-width: 420px) {
    .search-filter-events-section {
        padding:20px 0px;
    }
    .event-search-checkbox-section {
        width:100% !important;
        align-items: center;
        justify-content:flex-end;
    }
    .event-search-cta-section {
        width:100% !important;
        margin-top:10px !important;
    }
}

@media only screen and (max-width: 877px) {
    .search-filter-events {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 10px;
        justify-content: center;
    }
}

/* end search/filter section */

.public-events__event {
    width: 21rem;
    min-width: 21rem;
    height: auto;
    padding-bottom: 1rem;
    background: #ffffff;
    border: 2px solid var(--grey-4, #efefef95);
    border-radius: 6px;
    display: block;
    position: relative;
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.10),
      0 10px 10px -5px rgba(0, 0, 0, 0.08),
      0 10px 10px -5px rgba(0, 0, 0, 0.06),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: box-shadow 200ms ease-in-out;
}

.public-events__event:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.public-events__event-logo {
    aspect-ratio: 2 / 1;
    width: 100%;
    display: block;
    margin: 0 auto;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    object-fit: fill;
}

.public-events__event-name {
    font-size: 16px;
    text-align: left;
    font-weight: 600;
}

.public-events__event-info-item {
    font-size: 13.5px;
    margin-bottom: 0;
}

.public-events__event-info-item--date, .public-events__event-info-item--time {
    font-size: 13.5px;
    font-weight:bold;
}

.public-events__event-price {
    font-size: 18px;
    margin: 0;
    text-align: 'center';
    /* font-weight: 500; */
    font-weight:bold;
}

.public-events__event-flag {
    width: 23%;
    height: 7%;
    aspect-ratio: 1 / 1;
    position: absolute;

    border-radius: 6px;

    top: 0;
    left: 40%;
    transform: translateY(-1px);
    mask: url('data:image/svg+xml;utf8,<svg width="62" height="63" viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 52V1H61V52L31 62L1 52Z" fill="black" stroke="black"/></svg>');
    mask-size: cover;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="62" height="63" viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 52V1H61V52L31 62L1 52Z" fill="black" stroke="black"/></svg>');
    -webkit-mask-size: cover;
    display: grid;
    place-items: center;
}

.public-events__event-flag--yellow {
    color: black;
    background: #fbd33b;
}

.public-events__event-flag--black {
    color: white;
    background: black;
}

.public-events__event-flag--black p {
    color: white;
}

.public-events__event-flag p {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    line-height: 1;
}

.public-events__event-textwrap--1LineMax{
    display: block;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em; 
    height: 1.5em; 
    min-height: 1.5em; 
    max-height: 1.5em; 
}
    
.public-events__event-textwrap--2LinesMax {   
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2; 
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em; 
    height: 3em;
    min-height: 3em; 
    max-height: 3em; 
    word-wrap: break-word;
}

.public-events__host-options {
    margin-bottom: 50px;
}

.public-events__host-options-title {
    font-weight: 500;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 24px;
}

/* new subtext class for use in all section where text goes underneath the title */
.subtext-normal {
    font-size: 16px;
    font-weight: 500; 
    margin: 10px 0px;
    text-align: center;
}

@media (max-width: 420px) {
    .subtext-normal {
        font-size:14px !important;
    }

}

.public-events__host-options-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(auto, min-content);
}

.public-events__host-image {
    display: grid;
    place-items: center;
}

.public-events__host-options-list {
    margin: 40px 0;
}

.public-events__host-cta {
    font-size: 22px;
    font-weight: 500;
}

.public-events__host-options {
    padding: 0 50px;
}

.public-events__host-options-list li {
    font-size: 20px;
    font-weight: 500;
    color: black;
}

.public-events__more-support {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    margin-bottom: 80px;
}

.public-events__icons-container img {
    width: 50px;
    margin-top: 40px;
}

/* ------------------------------ */
/* --- FOOTER SECTION UPDATED --- */
/* ------------------------------ */
.footer-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    padding-inline: 30px;
    background: rgb(242, 242, 242);
    box-shadow: 0 -4px 6px -2px rgba(8, 25, 31, 0.25);
    padding: 8px 0px;
}

.footer-section p {
    flex-grow: 1;
    margin-bottom: 0;
    text-align: center;
}

.footer-section img {
    height: 50px;
    margin: 10px;
}

.footer-section-link {
    color: black;
    text-decoration: underline;
}

/* Mobile overrides for footer section */
@media (max-width: 420px) {
    .footer-section {
        flex-direction: column;
        height: auto;
        padding-inline: 10px;
        text-align: center;
        gap: 10px;
    }

    .footer-section img {
        height: 50px;
        margin: 5px auto;
    }
}

/* keep for now */
.public-events__more-support-img {
    aspect-ratio: 1 / 1;
}
.public-events__more-support-img img {
    object-fit: cover;
}
.public-events__contact-item p:first-child {
    font-weight: 400;
    font-size: 28px;
    margin-bottom: 5px;
}
.public-events__contact-item a:not(:first-child), 
.public-events__contact-item p:not(:first-child) {
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 300;
}
/* keep for now */
.public-events__contact-item a {
    text-decoration: underline;
    color: #0000EE;
}

/* mobile overrides for */
@media only screen and (max-width: 1024px) {
    .public-events__title {
        font-size: 40px;
    }

    .public-events__title--first {
        line-height: initial;
        margin-bottom: 0;
    }

    .public-events__subtitle {
        font-size: 26px;
    }

    .public-events__header .public-events__btn-link {
        font-size: 14px;
    }

    .public-events__host-options {
        padding-left: 0;
    }
}

/* --------------------------- */
/* ---- SPONSORS SECTION ---- */
/* --------------------------- */
.public-events__sponsor-logos {
    cursor: pointer;
}

.public-events__sponsor-logos img {
    width: 100px;
    aspect-ratio: 1 / 1;
}

.public-events__opening-info {
    font-size: 24px;
    text-align: center;
}

/* commented because section this css was for is also commented out */
/* .event-images__slider {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.event-images__slider img {
    aspect-ratio: 9 / 7;
} */

/* --------------------------- */
/* --- NAV BAR SECTION --- */
/* --------------------------- */
/* Will be used when navbar code is uncommented and re-added to the project */
.navbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1.5em;

    border: 1px solid transparent;
    border-radius: 5px;

    background: transparent;
    color: #08191F;
    font-weight: 500;
    text-decoration: none;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease,
        color .15s ease;
}

.navbar-link:hover,
.navbar-link:focus-visible {
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    background: #fff;
    color: #000;
}

.navbar-link--brand:hover,
.navbar-link--brand:focus-visible {
    background: var(--nethub-red);
    color: #fff;
    border-color: rgba(0,0,0,0.2);
}

/* ---------------------------------- */
/* --- EVENT DETAILS PAGE VIEW ---*/
/* ---------------------------------- */
.event-page-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 70px 0;
}

.event-page-inner {
    width: 100%;
    max-width: 1260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
}

.event-page-inner {
    flex: 0 1 auto;
}

.event-header-dynamic {
    width: 95%;
    height: 55vh;
    max-width: 1260px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.event-banner-overlay {
    position:absolute; inset:0; background: rgba(0,0,0,0.4); z-index:2;
}

.event-banner-image-dynamic {
    object-fit: fill; height: 100%; width: 100%; position: absolute; inset: 0;
}

/* mobile overrides for event headers */
@media (max-width: 420px) {
    .event-header-dynamic {
        width: 95%;
        margin:0px auto;
        height: 200px;
        min-height: 200px;
    }
    .event-banner-image-dynamic {
        aspect-ratio: 19 / 6;
        width: 100%;
        display: block;
        margin: 0px;
        padding:0px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        object-fit: cover;
    }
    .event-banner-overlay {
        display: none !important;
    }
}

/* ---------------------------------- */
/* summary section (top below banner) */
/* ---------------------------------- */
.event-summary-container {
    display: flex; justify-content: space-between; text-align: center; margin:15px 0px; height:auto; max-height: 300px;
}

.summary-details {
    width:60%; height:auto; display:flex; flex-direction:column; align-items:flex-start;
}

.details-container {
    width:100%; display:flex; flex-direction:column; align-items:flex-start; margin-bottom:10px;
}

.details-container-address {
    display:flex; align-items: center; height: auto; width:100%; gap:10px;
}

.details-address {
    font-weight:400; font-size:18px; margin:0px;padding:0px; width:100%; text-align:left;
}

.details-container-dates {
    display:flex; align-items: center; height: auto; width:100%; gap:10px;
}

.details-dates {
    font-weight:400; font-size:18px; margin:0px;padding:0px; width:100%; text-align:left;
}

.details-icon {
    width:32px; height:32px;
}

.details-title {
    font-weight:600; font-size:24px; margin:10px 0px; padding:0px; text-align:left;
}

.details-organiser {
    font-weight:400; font-size:18px; padding:0px; margin-bottom:10px; text-align:left;
}

.details-container-sponsors {
    display:flex; flex-direction:column; align-items: flex-start; width:100%; margin:8px 0px;
}

.summary-cta-section {
    display:flex; flex-direction:column; width:40%; justify-content:space-between; align-items:flex-end; gap:10px;
}

.summary-pricing-section {
    position:relative; display:flex; flex-shrink:0; border-radius:8px; border: 1px solid #efefef; width:80%; height: 100px; max-height: 100px; justify-content:space-evenly; margin:0px; padding:4px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-price {
    display:flex; justify-content: center; align-items: center;
}

.summary-membership-section {
    display:flex; flex-shrink:0; border-radius:8px; border: 1px solid #efefef; width:80%; height:140px; max-height:140px; justify-content:space-evenly; margin:0px; padding:4px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-membership {
    display:flex; flex-direction:column; justify-content: space-evenly; align-items: center;
}

/* Mobile overrides for the event summary section */
@media (max-width: 768px) {
    .event-summary-container {
        flex-direction: column;
        justify-content:center;
        max-height: 700px;
    }
    
    .summary-details,
    .summary-cta-section {
        width: 100% !important;
    }

    .summary-cta-section {
        align-items:center !important;
        margin:8px 0px !important;
    }

    .summary-pricing-section, .summary-membership-section {
        width:100% !important;
    }

    .details-title {
        width: 100% !important;
        font-size:20px !important;
    }
    .details-organiser {
        width:100% !important;
        font-size: 16px !important;
    }

    .details-dates, .details-address {
        font-size:16px !important;
    }
}

/* ---------------------------------- */
/* --- location/map section --- */
/* ---------------------------------- */
.location-map-wrapper {
    display:flex; width:100%; justify-content:center; align-items:center;
}

.location-map,
.virtual-map {
    width: 100%;
    max-width: 500px;
    height: 400px;
    border-radius: 6px;
}

@media (max-width: 420px) {
    .location-map,
    .virtual-map {
        width: 98%;
        max-width: 98%;
    }

    .location-map, .virtual-map {
        height: 400px;
    }
}

/* ---------------------------------- */
/* --- ticket options cards --- */
/* ---------------------------------- */
.options_cards_outer_container {
    display:flex; justify-content: space-evenly; flex-wrap: wrap;
}

/* Desktop / default */
.options_cards {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 0 0 430px;
    max-width: 430px;
    min-width: 430px;
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #efefef;
    margin: 0;
    padding: 16px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2),
                0px 1px 3px rgba(0, 0, 0, 0.1);
}

/* checkbox */
.options_cards-checkbox {
    display:flex;
    align-items:center;
    justify-content: center;
    margin:0px;
    padding:0px;
    cursor:pointer;
    height:100%;
}
/* main div within the options card */
.options_cards-detailsContainer {
    display:flex; 
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    padding-left:20px;
}

.options_cards-row {
    display:flex; justify-content:space-between; height:34px; width:100%; margin:0px; padding:0px;
}

.options_cards-title {
    text-align:left; margin:0px; font-weight: 500; font-size:16px; width: 60%; height:100%;
}

.options_cards-priceSection {
    display:flex; justify-content:flex-end; width: 40%; height:100%; font-size:18px;
}

.options_cards-details {
    display:flex; text-align: left; margin:0px; padding: 0px; width: 100%; font-size:14px; align-items:center;
}

.options_cards-qtyMaxText, .options_cards-restrictText {
    text-align:left; padding: 0px; margin: 0px; font-weight: 500; font-size:12px !important; font-style:italic;
}
/* div wrapping the qty-stepper once moved to the right card */
.options_cards-qtySelect {
    display:flex; justify-content:flex-end; align-items:center; height:30px;
}
/* actual stepper in hidden section */
.qty-stepper {
    display:inline-flex; gap:12px; align-items:center;
}

.qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2ch;
    text-align: center;
    color: rgb(84, 84, 84);
}

.qty-minus, .qty-plus {
    display:flex; justify-content:center; align-items: center; width:26px; height:26px; border-radius: 25px;
}

/* mobile overrides for the ticket options/selection cards */
@media (max-width: 420px) {
    .options_cards {
        flex: 0 0 98%;
        max-width: 98%;
        min-width: 0;
    }
    .options_cards-details {
        font-size:13px !important;
    }
}

/* ---------------------------------- */
/* --- coupons section --- */
/* ---------------------------------- */
.coupon-section-container {
    width:100%;
}

.coupon-section {
    position:relative; display:flex; flex-shrink:0; flex-direction:row; justify-content:space-between; border-radius:8px; border: 1px solid #efefef; width:35%; height: auto; max-height: 70px; margin:0px; padding:15px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1);
}

/* mobile overrides for coupon section */
@media (max-width: 420px) {
    .coupon-section-container {
        width:98% !important;
    }
    .coupon-section {
        width:100% !important;
    }
}

/* ---------------------------------- */
/* --- food/extras options sections --- */
/* ---------------------------------- */
.extras-container {
    flex-direction: column; justify-content: center; align-items: center; padding-left: 0; padding-right: 0; width:100%; margin:0px;
}

.extras-wrapper {
    margin-bottom: 10px; width:60%; max-width:60%;
}

.extras-details {
    position:relative; display:flex; flex-shrink:0; flex-direction:column; width:60%; max-width:60%; height: auto; max-height: 160px; margin:0px; padding:10px;
}
/* mobile overrides for extras sections */
@media (max-width: 420px) {
    .extras-wrapper {
        width:100% !important;
        max-width: 100%;
    }
    .extras-details {
        width:100% !important;
        max-width: 100%;
        height:auto !important;
        max-height: 200px;
    }
}

/* ---------------------------------- */
/* --- food preferences sections --- */
/* ---------------------------------- */
.checkout_food_preferences_container {
    display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items:center; padding:15px 2px;width:100%;
}

.checkout_food_preference_cards {
    position:relative; display:flex; flex-direction:row; flex-shrink:0; border-radius:8px; border: 1px solid #efefef; width:24%; height: 45px; max-height: 45px; padding:6px; justify-content:space-between; align-items:center; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1); cursor:pointer;
}

.preference_cards_option-checkbox {
    flex: 0 0 15%;
    max-width: 15%;
    margin: 0;
}

.preference_cards_option-label {
    font-weight: normal;
    font-size:14px;
    flex: 0 0 85%;
    max-width: 85%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top:6px;
}

/* mobile overrides for food prefereces cards */
@media (max-width: 420px) {
    .checkout_food_preference_cards {
        width:47% !important;
        margin:0px;
        padding:0px 2px;
    }
}

/* ---------------------------------- */
/* --- personal details section --- */
/* ---------------------------------- */
.personal-details-wrapper {
    display:flex; flex-direction:column; align-items:center; padding:0px; margin:0px; justify-content:center;
}

/* ---------------------------------- */
/* - reusable inputs/action buttons - */
/* ---------------------------------- */

/* (GET TICKETS) */
.public-events__book-tickets-btn {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.public-events__book-tickets-btn.disabled-btn {
    cursor: not-allowed !important;  
}

.public-events__btn-link.disabled-btn {
    pointer-events: none;
    opacity: 0.6 !important;
    background: grey !important;
    color: black;
    border: 2px solid grey;
    border-radius: 20px;
    padding: 0.5em 1.5em;
    font-weight: 500;
    margin-top: auto;
}

.public-events__action-btn {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.public-events__action-btn-link {
    background: var(--nethub-red);
    color: white;
    border-radius: 5px;
    padding: 0.5em 1.5em;
    font-weight: 500;
    margin-top: auto;
}

.public-events__action-btn-link.disabled-btn-link {
    cursor: not-allowed !important;  
}

.public-events__action-btn-link.disabled-btn-link {
    pointer-events: none;
    opacity: 0.6 !important;
    background-color: grey !important;
    color: black;
    border: 2px solid grey;
    border-radius: 5px;
    padding: 0.5em 1.5em;
    font-weight: 500;
    margin-top: auto;
}

/* grey lined section breaks */
.hr-custom {
    border: 0;
    border-top: 1px solid var(--grey-4, #efefef) !important;
    opacity: 0.4;
    margin-left:30px; margin-right:30px;
}

/* text areas */
.textArea-container {
    height: 50%; width:78%;
}

.textAreaGeneric {
    width: 100%;
    position: relative;
    border-radius: 8px;
    border: 1px solid #efefef;
    min-height: 100px;
    display: block;
    margin: 0;
    padding: 8px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2),
                0px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    color: black;
}

.textAreaGeneric::placeholder {
    color: #999 !important;
    opacity: 1;
}

/* text input */
.input-container {
    display:flex; justify-content:center; align-items:center; padding:0px; margin: 5px 0px; width:50%;
}

.inputGeneric {
    width:98%; position:relative; display:flex; flex-shrink:0; border-radius:8px; border: 1px solid #efefef; height: 40px; max-height: 40px; justify-content:space-evenly; align-items:center;  margin:0px; padding:8px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1); font-size: 14px;
}

.inputGeneric::placeholder {
    color: #999 !important;
    opacity: 1;
}

/* Mobile overrides for inputs */
@media (max-width: 420px) {
    .input-container {
        width: 98% !important;
        margin: 5px 0px;
        padding:0px;
    }
    .textArea-container {
        width: 100% !important;
    }
}

/* ----------------------------------- */
/* -- terms and conditions section  -- */
/* ----------------------------------- */
.terms-and-conditions-container {
    display: flex; justify-content: center; align-items: center; width: 50%; margin:10px 0px;
}

/* Mobile override */
@media (max-width: 420px) {
    .terms-and-conditions-container {
        width: 80% !important;
    }
}

/* ---------------------------------- */
/* --- order summary sections  --- */
/* ---------------------------------- */
#orderSummaryTable {
    width: 80%;
}

/* Mobile override */
@media (max-width: 420px) {
    #orderSummaryTable {
        width: 98% !important;
        /* border-radius:8px; border: 1px solid #efefef; margin:0px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1); */
    }
}

#orderSummaryTable tr,
#orderSummaryTable td,
#orderSummaryTable th {
  border: none !important;
  outline: none !important;
  border-collapse: collapse;
  border-spacing: 0;
  padding:10px;
}

/* --------------------- */

@media only screen and (max-width: 1024px) {
    /* keep */
    .public-events__sponsor-logos {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width: 420px) {
    /* keep */
    .public-events__title--first, .public-events__title--second {
        font-size: 40px;
    }

    /* keep */
    .public-events__host-options-info {
        grid-template-columns: 1fr;
    }

    /* keep */
    .public-events__host-options {
        padding-right: 0;
    }
    /* keep */
    .public-events__more-support {
        grid-template-columns: 1fr;
    }

    /* keep */
    .public-events__more-support-img {
        aspect-ratio: 1 / 1;
    }
}