@import url("../Agile-Modern-Wide/styles.css");

:root {
  --epg-backcolor: white;
  --epg-backcolor-rgb: 255,255,255;
  --epg-textcolor: black;
  --epg-textcolor-rgb: 0,0,0;

  --epg-color1: #132B5A;
  --epg-color1-rgb: 19,43,90;
  --epg-color1text: white;
  --epg-color1text-rgb: 255,255,255;

  --epg-color2: #ECF4FA;
  --epg-color2-rgb: 236,244,250;
  --epg-color2text: #132B5A;
  --epg-color2text-rgb: 19,43,90;

  --epg-color3: #DC382E;
  --epg-color3-rgb: 220,56,46;
  --epg-color3text: white;
  --epg-color3text-rgb: 255,255,255;

  --epg-headback: #132B5A;
  --epg-headtext: white;
  --epg-footback: #132B5A;
  --epg-foottext: white;
}


/* ==========================================================
   EPG COLOR OVERRIDES
   ========================================================== */

.epgColor2Back {
  background-color: #ECF4FA !important;
  color: #132B5A !important;
}

.epgColor2Back a {
  color: #132B5A !important;
}

.epgColor2BorderTop {
  border-top-color: #ECF4FA !important;
}


/* ==========================================================
   FONTS
   ========================================================== */

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
}

.agl-navigation-main > li > a {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
}

.agl-epgbutton,
input.agl-epgbutton {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
  background-color: #DC382E !important;
  color: white !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
}

.agl-epgbutton:hover,
input.agl-epgbutton:hover {
  background-color: #C4322A !important;
}

.EventInfoHeader,
.PriceInfoHeader,
.Purchase .Header,
.TitleArea,
.TitleSplitArea,
.InnerTitleSplitArea {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
}

.AgileList .ListSectionHeader,
.DateSeparator {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
}

.agl-accountlinks {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
}


/* ==========================================================
   DIRECTOR / RELEASE YEAR METADATA
   ========================================================== */

.shc-film-meta {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: black;
  line-height: 1.3;
  margin-top: 4px;
  margin-bottom: 10px;
}

.EventInfoItemDateTime > .fa-light,
.EventInfoItemVenueName > .fa-light {
  display: none;
}


/* ==========================================================
   EXISTING CUSTOMIZATIONS
   ========================================================== */

.EventInfoItemEventName {
  font-size: 30px;
  color: #132B5A;
}

.EventInfoDateTimeSecondaryText {
  font-weight: bold;
  font-size: 16px;
}

.EventInfoItemDateTime,
.EventInfoItemDateTime * {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #132B5A !important;
}

#infoMoreDesc,
a#hlMoreDesc {
  display: none;
}

#trEventTitleAreaBottom {
  display: none;
}

.CustomInformation {
  display: none;
}

.agl-iframed .agl-media-swiper {
  display: none;
}


/* ==========================================================
   TICKET SELECTION AREA
   ========================================================== */

#halfColumns > td {
  background-color: rgb(242,242,242);
  padding: 15px 20px;
}
#halfColumns > td:first-child {
  border-radius: 14px 0 0 0;
}
#halfColumns > td:last-child {
  border-radius: 0 14px 0 0;
}
#halfColumns > td:first-child:last-child {
  border-radius: 14px 14px 0 0;
}

#fullColumns > td {
  background-color: rgb(242,242,242);
  padding: 0 20px 15px 20px;
  border-radius: 0 0 14px 14px;
}

#TTSelection3_divTicketSelectPrompt {
  font-size: 18px;
  margin-bottom: 12px;
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif;
  font-weight: 600;
}

.TierSelectInnerDiv {
  font-weight: 700;
}
.agl-itemprice > span {
  font-weight: 400;
}

.ticketTypeItem.agl-typeoption {
  margin-bottom: 6px;
}


/* ==========================================================
   MOBILE OVERRIDES
   ========================================================== */

@media (max-width: 768px) {
  #halfColumns > td:last-child:not(:first-child) {
    display: none;
  }
  #halfColumns > td:first-child {
    border-radius: 14px 14px 0 0;
  }
}

/* ============================================================
   SHC ADDENDUM
   ============================================================ */

/* Hide carousel */
.agl-media-swiper { display: none !important; }

/* SHC-201/202: Ticket block — transparent so grey parent shows through */
.ticketTypeBlock, #TTSelection3_ticketBlock, [id$="_ticketBlock"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px 4px !important;
  margin-top: 0 !important;
}

/* Compact rows, fixed qty column width */
table.ticketTypeItem, table.agl-typeoption {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
}
table.ticketTypeItem tbody tr, table.agl-typeoption tbody tr {
  border-bottom: none !important;
  border-top: none !important;
}
table.ticketTypeItem td, table.agl-typeoption td {
  padding: 2px 8px !important;
  text-align: left !important;
  vertical-align: middle !important;
}
table.ticketTypeItem td:first-child, table.agl-typeoption td:first-child {
  width: 80px !important;
  min-width: 80px !important;
}
table.ticketTypeItem td label, table.agl-typeoption td label {
  display: inline !important;
  height: auto !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
table.ticketTypeItem select, table.agl-typeoption select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Add to Cart — right-aligned */
#ucImgBtnFindSeats_regularBtn, input[value="Add to Cart"] {
  float: right !important;
  margin-top: 16px !important;
}
.ticketTypeBlock::after, [id$="_ticketBlock"]::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* SHC-203: Member callout */
.shc-member-callout {
  margin-bottom: 10px !important;
  padding: 0 0 10px 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.shc-member-callout a {
  color: #c0392b !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
}

/* SHC-204: Southampton prompt */
.shc-southampton-prompt {
  margin-top: 6px !important;
  padding-top: 4px !important;
  border-top: 1px solid #e0e0dc !important;
  font-size: 13px !important;
}
.shc-southampton-prompt a {
  color: #888888 !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
}

/* Reduce ticketTypeBlock bottom padding */
.ticketTypeBlock {
  padding-bottom: 6px !important;
}

/* Reduce ButtonBlock and button top margin */
.ButtonBlock {
  margin-top: 4px !important;
}
#ucImgBtnFindSeats_regularBtn {
  margin-top: 4px !important;
}

/* ============================================================
   SCREEN 2 — CART (viewbasket.aspx)
   ============================================================ */

#timerRegion, .agl-basketclock {
  background: #f8f8f6 !important;
  color: #444 !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #e0e0dc !important;
  text-align: center !important;
  padding: 8px !important;
  font-size: 13px !important;
}
#timerRegion b, .agl-basketclock b { font-weight: 600 !important; }

#CartButtonBlock {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

#btnCheckout_regularBtn {
  margin-left: auto !important;
  order: 3 !important;
}

#lnkContinueShopping {
  order: 1 !important;
}

#CancelOrderButton_btnClearCart_regularBtn {
  order: 2 !important;
  background: transparent !important;
  border: 1px solid #1a2744 !important;
  color: #1a2744 !important;
  box-shadow: none !important;
}
#CancelOrderButton_btnClearCart_regularBtn:hover {
  background: #1a2744 !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  #btnCheckout_regularBtn {
    order: -1 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

input[id*="btnRemove"] {
  background: transparent !important;
  border: none !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  text-decoration: underline !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}
input[id*="btnRemove"]:hover { color: #c0392b !important; }

/* ============================================================
   SCREEN 3 — LOGIN (login.aspx)
   ============================================================ */

#timerRegion.agl-basketclock {
  background: #f8f8f6 !important;
  color: #444 !important;
  font-weight: 400 !important;
}

.ReturningCustomersBlock.StandoutBlock {
  background: #fff !important;
  border: 1px solid #e0e0dc !important;
  border-radius: 6px !important;
  padding: 24px !important;
  box-shadow: none !important;
}
.LoginRegular.agl-input-group, .LoginRegular.col-md-6 {
  background: transparent !important;
}
.ReturningCustomersBlock input[type=text],
.ReturningCustomersBlock input[type=email],
.ReturningCustomersBlock input[type=password] {
  border: 1px solid #e0e0dc !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ReturningCustomersBlock input:focus {
  border-color: #1a2744 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(26,39,68,0.1) !important;
}

#CustomerLogin_ucImgBtnLogin_regularBtn {
  float: right !important;
  margin-top: 8px !important;
}
.ReturningCustomersBlock::after { content: ''; display: table; clear: both; }

.shc-guest-checkout-cta {
  display: block !important;
  text-align: right !important;
  margin-top: 10px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  color: #1a2744 !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.shc-guest-checkout-cta:hover { color: #c0392b !important; }

.shc-signup-note {
  margin-top: 8px !important;
  font-size: 13px !important;
  color: #444 !important;
  text-align: right !important;
}
.shc-signup-note a {
  color: #1a2744 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

#ReturningCustomerPriorityLogin_NewCustomersBlock { display: none !important; }

/* ============================================================
   SCREEN 4 — GUEST INFO FORM
   ============================================================ */

.StandoutBlock {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.StandoutContainer {
  background: #fff !important;
  border: 1px solid #e0e0dc !important;
  border-radius: 6px !important;
  padding: 24px !important;
}

.StandoutContainer input[type=text],
.StandoutContainer input[type=email],
.StandoutContainer input[type=tel],
.StandoutContainer select {
  border: 1px solid #e0e0dc !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.StandoutContainer input:focus,
.StandoutContainer select:focus {
  border-color: #1a2744 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(26,39,68,0.1) !important;
}

#ucImgBtnSubmit_regularBtn {
  float: right !important;
}
.LoginButtonsBlock::after { content: ''; display: table; clear: both; }

/* ============================================================
   SCREEN 5 — PAYMENT (payment.aspx) — SINGLE COLUMN
   ============================================================ */

.agl-payment #timerRegion,
.agl-payment .agl-basketclock {
  background: #f8f8f6 !important;
  color: #444 !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #e0e0dc !important;
}

/* Single-column wrapper */
.shc-payment-singlecol {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  max-width: 680px !important;
}

/* Cost summary — light card */
.shc-cost-summary {
  border: 1px solid #e0e0dc !important;
  border-radius: 6px !important;
  padding: 16px 20px !important;
  background: #f8f8f6 !important;
}
.shc-cost-summary table {
  width: 100% !important;
}

/* Billing address — simple divider separation */
.shc-billing-address {
  border-top: 1px solid #e0e0dc !important;
  padding-top: 4px !important;
}
.shc-billing-address table {
  width: 100% !important;
}

/* Spring Appeal — full width above single column */
.shc-donate-fullwidth {
  width: 100% !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}

/* Donation/appeal card */
.agl-payment .DonationArea,
.agl-payment [id*="AppealArea"],
.agl-payment [id*="donationArea"],
.agl-donatecard {
  border: 1px solid #e0e0dc !important;
  border-radius: 6px !important;
  padding: 16px 20px !important;
  background: #f8f8f6 !important;
  box-shadow: none !important;
}

/* Donation amount buttons — outlined navy */
.agl-payment .DonationArea input.agl-epgbutton,
.agl-payment [id*="AppealArea"] input.agl-epgbutton,
.agl-payment [id*="AppealArea"] .agl-epgbutton,
.agl-donatecard button.agl-epgbutton,
.agl-actions button.agl-epgbutton {
  background: transparent !important;
  border: 1px solid #1a2744 !important;
  color: #1a2744 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  margin: 2px !important;
  border-radius: 4px !important;
}
.agl-payment .DonationArea input.agl-epgbutton:hover,
.agl-payment [id*="AppealArea"] input.agl-epgbutton:hover,
.agl-donatecard button.agl-epgbutton:hover,
.agl-actions button.agl-epgbutton:hover {
  background: #1a2744 !important;
  color: #fff !important;
}

/* Address confirm buttons — quiet secondary */
#btnBillYes, #btnBillNo {
  background: transparent !important;
  border: 1px solid #e0e0dc !important;
  color: #444 !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
#btnBillYes:hover, #btnBillNo:hover {
  border-color: #1a2744 !important;
  color: #1a2744 !important;
}

a.agl-epgbutton.ChangeLink {
  background: transparent !important;
  border: 1px solid #e0e0dc !important;
  color: #444 !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
a.agl-epgbutton.ChangeLink:hover {
  border-color: #1a2744 !important;
  color: #1a2744 !important;
}

/* Apply Gift Card — outlined navy */
#ucPaymentInfo_btnApplyGiftCard,
.agl-payment button.agl-epgbutton:not(.agl-range-go) {
  background: transparent !important;
  border: 1px solid #1a2744 !important;
  color: #1a2744 !important;
  box-shadow: none !important;
}
#ucPaymentInfo_btnApplyGiftCard:hover,
.agl-payment button.agl-epgbutton:not(.agl-range-go):hover {
  background: #1a2744 !important;
  color: #fff !important;
}

/* SHC-402: Card payment fields */
#ucPaymentInfo_txtCardNumber,
#ucPaymentInfo_txtNameOnCard,
input[id*="ucPaymentInfo_txt"],
select[id*="ucPaymentInfo_ddl"] {
  border: 1px solid #e0e0dc !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  height: 43px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
input[id*="ucPaymentInfo_txt"]:focus,
select[id*="ucPaymentInfo_ddl"]:focus {
  border-color: #1a2744 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(26,39,68,0.1) !important;
}

/* Hide CC brand icons */
#ucPaymentInfo_ccLogo { display: none !important; }

/* SHC-403: Make Payment — left-aligned */
#PaymentButtonBlock {
  text-align: left !important;
}
#ucimgbtnSearch_regularBtn {
  float: none !important;
  margin-top: 0 !important;
  background: #c0392b !important;
  color: #fff !important;
}
.agl-payment .agl-form-actions::after,
.agl-payment .LoginButtonsBlock::after { content: ''; display: table; clear: both; }

/* ============================================================
   NAV — Account icon + dropdown
   ============================================================ */

a.agl-navigation-user,
a.agl-navigation-cart {
  background-color: transparent !important;
  color: #ffffff !important;
}
a.agl-navigation-user:hover,
a.agl-navigation-user.agl-clicked,
a.agl-navigation-user[aria-expanded="true"],
a.agl-navigation-cart:hover,
a.agl-navigation-cart.agl-clicked {
  background-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

ul.agl-navigation-account {
  background-color: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  padding: 6px 0 !important;
}
ul.agl-navigation-account li a,
ul.agl-navigation-account li span {
  display: block !important;
  color: #1a2744 !important;
  background-color: transparent !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
ul.agl-navigation-account li a:hover {
  background-color: #f0f2f7 !important;
  color: #1a2744 !important;
}

/* ============================================================
   NAV DROPDOWN — logged-in (#navButtons)
   ============================================================ */

#navButtons {
  background-color: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  padding: 6px 0 !important;
  min-width: 180px !important;
}

#navButtons a {
  display: block !important;
  color: #1a2744 !important;
  background-color: transparent !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#navButtons a:hover {
  background-color: #f0f2f7 !important;
  color: #1a2744 !important;
}

#navButtons .agl-acct-signinout {
  border-top: 1px solid #e8e8e8 !important;
  margin-top: 4px !important;
  color: #888888 !important;
  font-size: 13px !important;
}
#navButtons .agl-acct-signinout:hover {
  background-color: #f0f2f7 !important;
  color: #1a2744 !important;
}

#navButtons .agl-acct-cartlink {
  display: none !important;
}

/* ============================================================
   NAV — Logo replacing hamburger
   ============================================================ */
.agl-navigation-toggle { display: none !important; }

.shc-nav-logo {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  height: 75px !important;
  text-decoration: none !important;
}
.shc-nav-logo img {
  height: 75px !important;
  width: auto !important;
  display: block !important;
}

/* SHC-504/global: Add/submit button — right-aligned on all info pages */
.ButtonBlock {
  text-align: right !important;
  margin-top: 16px !important;
}

/* ============================================================
   CART — Section headings and spacing
   ============================================================ */

.agl-viewbasket .orderSummaryEventHeader.epgColor2Back,
.agl-viewbasket .orderSummaryCatalogHeader.epgColor2Back {
  background-color: transparent !important;
  color: inherit !important;
}

.agl-viewbasket #ctl00_CPH1_GiftCardDataList {
  border-bottom: 1px solid rgb(224, 224, 224) !important;
  padding-bottom: 8px !important;
}

.agl-viewbasket [id*="MembershipDataList"] > tbody > tr:first-child b {
  font-family: 'Josefin Sans', 'Open Sans', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.agl-viewbasket [id*="MembershipDataList"] .DeliveryMethodBlock {
  margin-top: 4px !important;
}

.agl-viewbasket .DeliveryLink {
  display: none !important;
}

.agl-viewbasket .DeliveryMethodBlock .BigBoldText {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #999 !important;
}

.agl-viewbasket [id*="ucTicketSummary"] table,
.agl-viewbasket [id*="ucMembershipSummary"] table {
  margin-top: 10px !important;
}

#lnkContinueShopping,
#CancelOrderButton_btnClearCart_regularBtn {
  border-radius: 999px !important;
}

/* ============================================================
   MEMBERSHIP ASSIGN PAGE (agl-memberassign)
   ============================================================ */

.agl-memberassign .MemberAssignBlock {
  background-color: #f2f2f2 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}

/* ============================================================
   ACCOUNT PAGE — SHC-101 · SHC-102 · SHC-103 · SHC-901 · SHC-902
   ============================================================ */

.agl-card {
  box-shadow: none !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
}
.agl-customerimage.agl-card {
  box-shadow: none !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
}
.agl-usernav {
  box-shadow: none !important;
}

.ButtonLink,
input.ButtonLink,
a.ButtonLink {
  border-radius: 6px !important;
}

.epgColor2Back {
  background-color: transparent !important;
  color: inherit !important;
  border-top: 1px solid #e0e0e0 !important;
}
.epgColor2Back a {
  color: inherit !important;
}

.shc-no-refunds {
  font-size: 13px !important;
  color: #666666 !important;
  margin: 16px 0 8px 0 !important;
}

.agl-accountlinks .agl-epgbutton,
.agl-accountlinks a.agl-epgbutton {
  background-color: #ffffff !important;
  color: #1a2744 !important;
  box-shadow: none !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;
  text-align: left !important;
}
.agl-accountlinks .agl-epgbutton:hover,
.agl-accountlinks a.agl-epgbutton:hover {
  background-color: #f5f5f5 !important;
  color: #1a2744 !important;
  border-color: #aaaaaa !important;
}
.agl-accountlinks .agl-epgbutton.active,
.agl-accountlinks a.agl-epgbutton.active {
  background-color: #f0f0f0 !important;
  border-color: #1a2744 !important;
  color: #1a2744 !important;
  font-weight: 600 !important;
}

#hlForwardTickets,
#hlReturnTickets {
  display: none !important;
}

/* ============================================================
   MOBILE NAV — Account dropdown background fix
   ============================================================ */

@media (max-width: 768px) {
  .agl-usernav,
  .agl-navigation-user + *,
  [class*="agl-account"],
  .epgColor1Back.agl-usernav,
  .agl-navigation-account {
    background-color: #ffffff !important;
    color: #1a2744 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  .agl-usernav a,
  .agl-navigation-account a,
  .agl-navigation-account li,
  .agl-navigation-account span {
    color: #1a2744 !important;
    background-color: transparent !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  .agl-headerinner,
  #headerInclude,
  #headerMenu {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #navButtons {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
  }
  #navButtons a,
  #navButtons a:link,
  #navButtons a:visited {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 85vw !important;
  }
}