/*
! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.default,[data-theme="default"] {
  --twc-theme-10: 180 35.7% 94.5%;
  --twc-theme-20: 180 32.1% 89%;
  --twc-theme-30: 180 33.3% 83.5%;
  --twc-theme-80: 178.39999999999998 33.9% 56.1%;
  --twc-theme: 178.70000000000005 40.9% 45.1%;
}

.theatre-performance,[data-theme="theatre-performance"] {
  --twc-theme-10: 150 5.6% 92.9%;
  --twc-theme-20: 135 5.6% 85.9%;
  --twc-theme-30: 145.7 6.4% 78.6%;
  --twc-theme-80: 145.3 8.6% 43.3%;
  --twc-theme: 143.5 15.4% 29.2%;
}

.comedy-spoken-word,[data-theme="comedy-spoken-word"] {
  --twc-theme-10: 46.19999999999999 44.8% 94.3%;
  --twc-theme-20: 43.80000000000001 46.4% 89%;
  --twc-theme-30: 44.60000000000002 45.9% 83.3%;
  --twc-theme-80: 45 45.6% 55.3%;
  --twc-theme: 44.80000000000001 57.5% 44.3%;
}

.audience-with,[data-theme="audience-with"] {
  --twc-theme-10: 348 51.7% 94.3%;
  --twc-theme-20: 346 50% 88.2%;
  --twc-theme-30: 346.70000000000005 50.6% 82.5%;
  --twc-theme-80: 346.5 50.4% 53.3%;
  --twc-theme: 346.4 70.8% 41.6%;
}

.live-music,[data-theme="live-music"] {
  --twc-theme-10: 195 10.5% 92.5%;
  --twc-theme-20: 206.70000000000005 12% 85.3%;
  --twc-theme-30: 203.10000000000002 11.5% 77.8%;
  --twc-theme-80: 202.89999999999998 16.2% 41.2%;
  --twc-theme: 203.70000000000005 31.9% 26.5%;
}

.family,[data-theme="family"] {
  --twc-theme-10: 345 11.1% 92.9%;
  --twc-theme-20: 346.70000000000005 12.3% 85.7%;
  --twc-theme-30: 346.20000000000005 11.9% 78.6%;
  --twc-theme-80: 348.29999999999995 16.4% 43.1%;
  --twc-theme: 348 30.6% 28.8%;
}

.exhibitions,[data-theme="exhibitions"] {
  --twc-theme-10: 17.600000000000023 63% 94.7%;
  --twc-theme-20: 18.80000000000001 59.3% 89.4%;
  --twc-theme-30: 18.399999999999977 60.5% 84.1%;
  --twc-theme-80: 18.600000000000023 59.4% 57.5%;
  --twc-theme: 18.600000000000023 67.4% 46.9%;
}

.festivals,[data-theme="festivals"] {
  --twc-theme-10: 332.70000000000005 64.7% 96.7%;
  --twc-theme-20: 334.29999999999995 60% 93.1%;
  --twc-theme-30: 332.70000000000005 62.3% 89.6%;
  --twc-theme-80: 332.4 61.7% 72.4%;
  --twc-theme: 332.79999999999995 61.4% 65.5%;
}

.community-events,[data-theme="community-events"] {
  --twc-theme-10: 90 26.7% 94.1%;
  --twc-theme-20: 88.19999999999999 27.9% 88%;
  --twc-theme-30: 91.19999999999999 27.5% 82.2%;
  --twc-theme-80: 90.89999999999998 28.1% 52.5%;
  --twc-theme: 90.39999999999998 41.1% 40.6%;
}

.creative-activities,[data-theme="creative-activities"] {
  --twc-theme-10: 300 23.1% 92.4%;
  --twc-theme-20: 300 23.1% 84.7%;
  --twc-theme-30: 300 23.7% 76.9%;
  --twc-theme-80: 300.79999999999995 38.1% 38.6%;
  --twc-theme: 300.6 78.2% 23.3%;
}

.film,[data-theme="film"] {
  --twc-theme-10: 30 18.2% 95.7%;
  --twc-theme-20: 26.69999999999999 20% 91.2%;
  --twc-theme-30: 27.69999999999999 19.4% 86.9%;
  --twc-theme-80: 25.5 18.4% 64.9%;
  --twc-theme: 25.69999999999999 18.8% 56.1%;
}

/***************************************************************************/

/* DEFAULTS
/***************************************************************************/

html {
  font-family: "Karla", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* makes most fonts look ok, larger headings have overrides */
  letter-spacing: -1px;
  --tw-text-opacity: 1;
  color: rgb(22 22 22 / var(--tw-text-opacity));
}

/* scale base font size down on smaller breakpoints */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 1180px) {
  html {
    font-size: 16px;
  }
}

body {
  /* 20px, 1.5 like normal styles */
  font-size: 1.25rem;
  line-height: 1.5;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* start tailwind forms overrides */

/* duplicated in WatersideFormifyHelper */

[type="text"],
input:where(:not([type])),
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
  --tw-border-opacity: 1;
  border-color: rgb(176 176 176 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(22 22 22 / var(--tw-text-opacity));
}

/* end tailwind forms overrides */

input:not([type="submit"], [type="button"], .adyen-checkout__input),
select,
textarea {
  letter-spacing: 0;
  font-size: 1em !important;
  line-height: 1.5 !important;
}

div:empty,
ul:empty,
ol:empty,
li:empty,
p:empty {
  display: none;
}

a {
  /* leading-6 (1.5rem) is required, NOT the standard unitless 1.5, for unclear reasons */
  /* (links use underline text-decoration rather than borders for various reasons) */
  display: inline-block;
  font-weight: 500;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: hsl(var(--twc-theme) / var(--twc-theme-opacity, var(--tw-text-opacity)));
  text-decoration-line: underline;
}

table {
  width: 100%;
}

table th,
  table td {
    border-bottom-width: 1px;
  }

table th,
  table td {
    --tw-border-opacity: 1;
    border-color: rgb(230 230 230 / var(--tw-border-opacity));
  }

table th,
  table td {
    padding: 0.5rem;
  }

table th,
  table td {
    text-align: left;
  }

@media (min-width: 768px) {
    table th,
  table td {
      padding: 1rem;
    }
  }

table th:first-child, table td:first-child {
      padding-inline-start: 0px;
    }

table th:last-child, table td:last-child {
      padding-inline-end: 0px;
    }

table tbody tr:last-child td {
    border-width: 0px;
  }

/* form level errors/messages */

.ErrorMessage,
.ForgotPasswordMessage {
  color: red;
  display: block;
  font-weight: 500;
}

.ErrorMessage br, .ForgotPasswordMessage br {
    display: none;
  }

/* field level errors */

.ValidationError,
.spx-validation-message {
  color: red;
  display: block;
}

.ValidationError br, .spx-validation-message br {
    display: none;
  }

/* checkout form level messages */

.spx-validation-summary-errors {
  color: red;
  margin-bottom: 1rem;
}

.spx-validation-summary-errors .spx-validation-copy {
    font-weight: 700;
  }

.spx-validation-summary-errors .spx-validation-errorlist ul {
    list-style: square;
    padding-left: 1.2rem;
  }

.spx-validation-summary-errors .spx-validation-errorlist ul li a {
        color: red;
        border-bottom-color: red;
      }

/* remove min height */

.SpektrixPage {
  min-height: 0px;
  padding-bottom: 1.5rem;
}

/* reset spektrix credit */

.SpektrixFooter {
  opacity: 0.5;
  letter-spacing: 0;
  border-bottom: 0;
}

.SpektrixFooter a {
    border-bottom: 0;
  }

.SpektrixFooter img {
    margin: 0;
  }

/***************************************************************************/

/* ADYEN
/***************************************************************************/

/* reset from tailwind forms to adyen defaults on inputs (not spans within iframes with same class) */

.spx-payment-container input.adyen-checkout__input {
    border-color: #b9c4c9;
    border-radius: 6px;
    padding: 5px 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
      "Droid Sans", "Helvetica Neue", sans-serif;
    letter-spacing: 0;
  }

/* tweak spacing */

.spx-payment-container .adyen-checkout__helper-text,
  .spx-payment-container .adyen-checkout__label__text {
    padding-bottom: 8px;
  }

.spx-payment-container .adyen-checkout-form-instruction {
    margin-bottom: 24px;
  }

.spx-payment-container .adyen-checkout__payment-method__header {
    padding-top: 6px;
  }

/***************************************************************************/

/* BUTTONS CONTAINER FOR PRIMARY ACTIONS
/***************************************************************************/

/* password set page uses id not class */

.Buttons,
#Buttons {
  margin-top: 2rem;
  margin-bottom: 0px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.Buttons .Button, #Buttons .Button {
    display: inline-flex;
  }

.Buttons .Button, #Buttons .Button {
    cursor: pointer;
  }

.Buttons .Button, #Buttons .Button {
    align-items: center;
  }

.Buttons .Button, #Buttons .Button {
    text-wrap: nowrap;
  }

.Buttons .Button, #Buttons .Button {
    border-radius: 0px;
  }

.Buttons .Button, #Buttons .Button {
    border-width: 2px;
  }

.Buttons .Button, #Buttons .Button {
    --tw-border-opacity: 1;
    border-color: rgb(22 22 22 / var(--tw-border-opacity));
  }

.Buttons .Button, #Buttons .Button {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }

.Buttons .Button, #Buttons .Button {
    padding-left: 1rem;
    padding-right: 1rem;
  }

.Buttons .Button, #Buttons .Button {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

.Buttons .Button, #Buttons .Button {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

.Buttons .Button, #Buttons .Button {
    font-weight: 800;
  }

.Buttons .Button, #Buttons .Button {
    text-transform: uppercase;
  }

.Buttons .Button, #Buttons .Button {
    letter-spacing: -1px;
  }

.Buttons .Button, #Buttons .Button {
    --tw-text-opacity: 1;
    color: rgb(22 22 22 / var(--tw-text-opacity));
  }

.Buttons .Button:hover, #Buttons .Button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(246 246 246 / var(--tw-bg-opacity));
  }

/* primary action on left, some pages need flipping */

.Basket2 div.Buttons,
.NewAccount div.Buttons {
  flex-direction: row-reverse;
}

/* but reset on first step of new account where there's no prev button */

.NewAccount #ctl00_ContentPlaceHolder_PasswordControls + div.Buttons {
  flex-direction: row;
}

/***************************************************************************/

/* ONE-OFF BUTTONS WHICH WHICH ARE PRIMARY ACTIONS
/***************************************************************************/

.PasswordSetMessage .Button,
.RedeemGiftButton.Button,
.MyAccount .NewAddress,
.MyAccount .EditContactPreferences,
div.MyPaymentCards a,
.AddCard input[type="submit"],
.Basket2 .CheckoutLink,
.spx-button-primary,
.Merchandise input[type="submit"],
.SupplementaryEventsPage input[type="submit"],
.EventDetails input[type="submit"] {
  /* as main button style */
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  text-wrap: nowrap;
  border-radius: 0px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(22 22 22 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -1px;
  --tw-text-opacity: 1;
  color: rgb(22 22 22 / var(--tw-text-opacity));
  text-decoration-line: none;
}

.PasswordSetMessage .Button:hover,
.RedeemGiftButton.Button:hover,
.MyAccount .NewAddress:hover,
.MyAccount .EditContactPreferences:hover,
div.MyPaymentCards a:hover,
.AddCard input[type="submit"]:hover,
.Basket2 .CheckoutLink:hover,
.spx-button-primary:hover,
.Merchandise input[type="submit"]:hover,
.SupplementaryEventsPage input[type="submit"]:hover,
.EventDetails input[type="submit"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}

/* some of these are slightly smaller e.g. when next to dropdowns */

.EventDetails input[type="submit"] {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* some of these are not in Buttons container so need top margin adding */

.PasswordSetMessage .Button,
.RedeemGiftButton.Button,
.MyAccount .NewAddress {
  margin-top: 2rem;
}

/***************************************************************************/

/* ONE-OFF BUTTONS WHICH ARE LINKS
/***************************************************************************/

div.MyPaymentCards input[type="submit"],
.AddressList .EditButton.Button,
.ChooseSeats
  .Button:not(
    .UpdateButton,
    #ctl00_ContentPlaceHolder_PromoCodeBox_PromoCodeButton,
    #ctl00_ContentPlaceHolder_PromoCodeBox_RemovePromoCodeButton
  ),
.Basket2 .Item .Button,
.Basket2 .AddAnotherGiftVoucher.Button,
.AddGiftVoucher .CancelButton.Button,
.AddCard .AddAddressesButton.Button,
.spx-button-secondary__checkout--start-checkout-forgotten-password,
.spx-button-secondary__checkout--donations,
.NewAccount .PreviousButton.Button {
  /* reset to body default */
  font-size: 1.25rem;
  margin: 0px;
  display: inline-block;
  cursor: pointer;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0px;
  font-weight: 500;
  text-transform: none;
  line-height: 1.5rem;
  letter-spacing: -1px;
  --tw-text-opacity: 1;
  color: hsl(var(--twc-theme) / var(--twc-theme-opacity, var(--tw-text-opacity)));
  text-decoration-line: underline;
}

div.MyPaymentCards input[type="submit"]:hover,
.AddressList .EditButton.Button:hover,
.ChooseSeats
  .Button:not(
    .UpdateButton,
    #ctl00_ContentPlaceHolder_PromoCodeBox_PromoCodeButton,
    #ctl00_ContentPlaceHolder_PromoCodeBox_RemovePromoCodeButton
  ):hover,
.Basket2 .Item .Button:hover,
.Basket2 .AddAnotherGiftVoucher.Button:hover,
.AddGiftVoucher .CancelButton.Button:hover,
.AddCard .AddAddressesButton.Button:hover,
.spx-button-secondary__checkout--start-checkout-forgotten-password:hover,
.spx-button-secondary__checkout--donations:hover,
.NewAccount .PreviousButton.Button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

/***************************************************************************/

/* ONE-OFF FIELD BUTTONS
/***************************************************************************/

.FindAddressButton.Button,
.PromoCode .Button,
/* donations +/- */
.spx-button-tertiary__checkout--donation,
/* checkout redeem gift voucher */
.spx-field-container__checkout--credit button,
/* checkout new address find address */
.spx-subsection-container__checkout--new-address #FindMyAddressButton {
  /* assume the field next to it is floated left and clears are handled */
  float: right;
  height: 3rem;
  width: 150px;
  cursor: pointer;
  border-radius: 0px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(22 22 22 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-decoration-line: none;
}

.FindAddressButton.Button:hover,
.PromoCode .Button:hover,

.spx-button-tertiary__checkout--donation:hover,

.spx-field-container__checkout--credit button:hover,

.spx-subsection-container__checkout--new-address #FindMyAddressButton:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
}

.spx-field-container__checkout--credit button {
  width: 200px;
}

.spx-button-tertiary__checkout--donation {
  float: none;
  width: 50px;
}

/***************************************************************************/

/* ONE-OFF BUTTONS WHICH ARE CANCEL BUTTONS AND CAN BE HIDDEN
/***************************************************************************/

.MyAccount .CancelPreferencesButton,
.spx-button-secondary__checkout--edit-billing-address.spx-intent-cancel {
  display: none;
}

/***************************************************************************/

/* SPACING OF FORM-LEVEL ERROR MESSAGE AT TOP
/***************************************************************************/

h1 + p,
h1 + .OptionalMessage + p,
h1 + .SavedMessage + p,
h1 + .Buttons + .SavedMessage + p,
h2:not(.EditTicketsHeading) + p {
  margin-top: 0px;
}

/***************************************************************************/

/* PROGRESS INDICATOR
/***************************************************************************/

.Progress ol {
    margin: 0px;
  }

.Progress ol {
    list-style-position: inside;
  }

.Progress ol {
    list-style-type: decimal;
  }

.Progress ol {
    padding: 0px;
  }

.Progress ol {
    line-height: 1.5rem;
  }

.Progress ol li {
      margin-bottom: 0.5rem;
    }

.Progress ol li:last-child {
        margin-bottom: 0px;
      }

.Progress ol li b {
        font-weight: 800;
      }

.Options ul {
    margin: 0px;
  }

.Options ul {
    list-style-type: none;
  }

.Options ul {
    padding: 0px;
  }

.Options ul {
    line-height: 1.5rem;
  }

.Options ul * {
      margin: 0px;
    }

.Options ul * {
      margin-bottom: 0.5rem;
    }

.Options ul * {
      padding: 0px;
    }

.Options ul *:last-child {
        margin-bottom: 0px;
      }

.Options ul * .Selected {
        border-width: 0px;
      }

.Options ul * .Selected {
        font-weight: 800;
      }

/***************************************************************************/

/* FORMS
/***************************************************************************/

/* fields */

.Container {
  margin-bottom: 1rem;
}

.Container:last-child {
    margin-bottom: 0px;
  }

/* main labels */

label.left {
  display: block;
  padding-bottom: 0.25rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* smaller checkout labels */

.spx-label-field__checkout--start-checkout,
.spx-label-field__checkout--start-checkout-login,
.spx-label-field__checkout--personal-details,
.spx-label-field__checkout--credit[for="GiftVoucherCode"],
.spx-label-field__checkout--new-address,
.spx-label-field__checkout--edit-billing-address {
  display: block;
  padding-bottom: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* required */

label.right,
.Comment {
  display: block;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(109 109 109 / var(--tw-text-opacity));
}

/* full width input */

.Input_Text,
.spx-input-text,
.spx-input-dropdown {
  width: 100% !important;
}

/* checkboxes */

input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.25rem;
  vertical-align: baseline;
}

/* dates */

.DateOfBirth select[aria-label="Day"], .DateToSend select[aria-label="Day"] {
    width: 30%;
    max-width: 100px;
  }

.DateOfBirth select[aria-label="Month"], .DateToSend select[aria-label="Month"] {
    width: 40%;
    max-width: 150px;
  }

.DateOfBirth input[aria-label="Year"], .DateToSend input[aria-label="Year"] {
    width: 25% !important;
    max-width: 100px;
  }

/* x-header headings, styling spans have been inserted in spektrix-iframe.js */

/* on all pages except the choose seats second step */

h1:not(.EditTicketsHeading) {
  font-size: 3.75rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2rem;
  /* mobile */
}

@media not all and (min-width: 768px) {
  h1:not(.EditTicketsHeading) {
    font-size: 2.4rem !important;
    line-height: 1.35 !important;
  }
}

h1:not(.EditTicketsHeading) > span {
    display: block;
  }

h1:not(.EditTicketsHeading) > span {
    padding-top: 0.5rem;
  }

h1:not(.EditTicketsHeading) > span > a,
    h1:not(.EditTicketsHeading) > span > span {
      display: inline;
    }

h1:not(.EditTicketsHeading) > span > a,
    h1:not(.EditTicketsHeading) > span > span {
      --tw-bg-opacity: 1;
      background-color: hsl(var(--twc-theme-20) / var(--twc-theme-20-opacity, var(--tw-bg-opacity)));
    }

h1:not(.EditTicketsHeading) > span > a,
    h1:not(.EditTicketsHeading) > span > span {
      -webkit-box-decoration-break: clone;
              box-decoration-break: clone;
    }

h1:not(.EditTicketsHeading) > span > a,
    h1:not(.EditTicketsHeading) > span > span {
      padding-left: 1rem;
      padding-right: 1rem;
    }

h1:not(.EditTicketsHeading) > span > a,
    h1:not(.EditTicketsHeading) > span > span {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

/* x-section subheadings, styling spans have been inserted in spektrix-iframe.js */

h2,
.ChooseSeats .EventDetails .DateAndTime,
.EditTickets h1.EditTicketsHeading .InstanceTime {
  font-size: 1.875rem;
  line-height: 1.35;
  letter-spacing: -0.05em;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
}

h2 > span, .ChooseSeats .EventDetails .DateAndTime > span, .EditTickets h1.EditTicketsHeading .InstanceTime > span {
    display: block;
  }

h2 > span, .ChooseSeats .EventDetails .DateAndTime > span, .EditTickets h1.EditTicketsHeading .InstanceTime > span {
    padding-top: 0.375rem;
  }

h2 > span > a,
    h2 > span > span,
    .ChooseSeats .EventDetails .DateAndTime > span > a,
    .ChooseSeats .EventDetails .DateAndTime > span > span,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > a,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > span {
      display: inline;
    }

h2 > span > a,
    h2 > span > span,
    .ChooseSeats .EventDetails .DateAndTime > span > a,
    .ChooseSeats .EventDetails .DateAndTime > span > span,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > a,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > span {
      --tw-bg-opacity: 1;
      background-color: hsl(var(--twc-theme-20) / var(--twc-theme-20-opacity, var(--tw-bg-opacity)));
    }

h2 > span > a,
    h2 > span > span,
    .ChooseSeats .EventDetails .DateAndTime > span > a,
    .ChooseSeats .EventDetails .DateAndTime > span > span,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > a,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > span {
      -webkit-box-decoration-break: clone;
              box-decoration-break: clone;
    }

h2 > span > a,
    h2 > span > span,
    .ChooseSeats .EventDetails .DateAndTime > span > a,
    .ChooseSeats .EventDetails .DateAndTime > span > span,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > a,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > span {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

h2 > span > a,
    h2 > span > span,
    .ChooseSeats .EventDetails .DateAndTime > span > a,
    .ChooseSeats .EventDetails .DateAndTime > span > span,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > a,
    .EditTickets h1.EditTicketsHeading .InstanceTime > span > span {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

h2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* x-subsection headings */

h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.05em;
  font-weight: 800;
  margin-top: 0px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* forgot password */

/* extra &nbsp in confirm field messes up spacing, so move buttons up a bit */

.ForgotPassword .Buttons {
    margin-top: -0.75rem;
  }

/* register */

/* top error message */

.NewAccount .ErrorMessage {
    margin-top: 0px;
  }

/* address options in register AND account */

/* add some spacing on address options, sort vertical align */

.NewAccount .AddressOption, .EditAddress .AddressOption {
    display: flex;
  }

.NewAccount .AddressOption, .EditAddress .AddressOption {
    align-items: baseline;
  }

.NewAccount .AddressOption, .EditAddress .AddressOption {
    gap: 0.25rem;
  }

.NewAccount .AddressOption:not(:last-child), .EditAddress .AddressOption:not(:last-child) {
      margin-bottom: 0.5rem;
    }

/* default/billing tickboxes */

.NewAccount .AddressOptions, .EditAddress .AddressOptions {
    margin-top: 1rem;
  }

.NewAccount .AddressOptions .Option .Checkbox, .EditAddress .AddressOptions .Option .Checkbox {
        display: flex;
      }

.NewAccount .AddressOptions .Option .Checkbox, .EditAddress .AddressOptions .Option .Checkbox {
        align-items: baseline;
      }

.NewAccount .AddressOptions .Option .Checkbox, .EditAddress .AddressOptions .Option .Checkbox {
        gap: 0.25rem;
      }

.NewAccount .AddressOptions .Option:not(:last-child), .EditAddress .AddressOptions .Option:not(:last-child) {
        margin-bottom: 0.5rem;
      }

/* preferences in register AND account */

/* tighten spacing on prefs than default containers, sort vertical align */

.NewAccount .Preferences .Container .Input_Checkbox, .MyAccount .Preferences .Container .Input_Checkbox {
      display: flex;
    }

.NewAccount .Preferences .Container .Input_Checkbox, .MyAccount .Preferences .Container .Input_Checkbox {
      align-items: baseline;
    }

.NewAccount .Preferences .Container .Input_Checkbox, .MyAccount .Preferences .Container .Input_Checkbox {
      gap: 0.25rem;
    }

.NewAccount .Preferences .Container:not(:last-child), .MyAccount .Preferences .Container:not(:last-child) {
      margin-bottom: 0.5rem;
    }

.NewAccount .Preferences .Container br, .MyAccount .Preferences .Container br {
      display: none;
    }

/* account */

.MyAccount {
  position: relative;
}

/* logout button top corner */

.MyAccount .Buttons:first-of-type {
    margin: 0px;
  }

.MyAccount .Buttons:first-of-type {
    margin-bottom: 1rem;
  }

@media (min-width: 640px) {
    .MyAccount .Buttons:first-of-type {
      position: absolute;
    }
  }

@media (min-width: 640px) {
    .MyAccount .Buttons:first-of-type {
      top: 0px;
    }
  }

@media (min-width: 640px) {
    .MyAccount .Buttons:first-of-type {
      right: 0px;
    }
  }

/* don't show empty p for saved message unless it has a message in it */

.MyAccount .SavedMessage {
    display: none;
  }

.MyAccount .SavedMessage:has(> span) {
      margin-top: 0px;
    }

.MyAccount .SavedMessage:has(> span) {
      display: block;
    }

/* spacing before link */

.MyAccount .ChangePassword {
    margin-top: 1rem;
  }

/* account > addresses */

.Addresses .Container {
    border-width: 1px;
  }

.Addresses .Container {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.Addresses .Container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

.Addresses .Container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

.Addresses .Container .AddressType {
      font-weight: 800;
    }

.Addresses .Container .AddressType {
      text-transform: uppercase;
    }

.Addresses .Container a {
      margin-right: 0.5rem;
    }

/* account > address edit AND register */

.NewAccount .Postcode label, .EditAddress .Postcode label {
      clear: both;
    }

.NewAccount .Postcode .Input_Text, .EditAddress .Postcode .Input_Text {
      width: calc(100% - 160px) !important;
    }

.NewAccount .Postcode .Input_Text, .EditAddress .Postcode .Input_Text {
      float: left;
    }

.ErrorMessage:has(+ .EditAddress),
.ErrorMessage:has(+ .NewAccount) {
  /* error shown above title! not really needed as the fields show errors */
  display: none;
}

/* account > payment cards */

.AddressList li {
    margin-bottom: 1rem;
  }

.AddressList li {
    border-width: 1px;
  }

.AddressList li {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.AddressList li {
    padding-left: 1rem;
    padding-right: 1rem;
  }

.AddressList li {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

.AddressList li input[type="submit"] {
      float: none;
    }

.AddCard {
  /* we can't clear the above floating so add some extra padding to bottom of page to account for it */
}

/* put add address button on right but there's no container */

.AddCard input[type="submit"],
  .AddCard .AddAddressesButton.Button {
    margin-top: 1rem;
  }

.AddCard input[type="submit"] {
    float: left;
  }

.AddCard .AddAddressesButton.Button {
    /* pad top to vertically centre like flex buttons would */
  }

.AddCard .AddAddressesButton.Button {
    float: right;
  }

.AddCard .AddAddressesButton.Button {
    padding-top: 1rem;
  }

.AddCard {
  padding-bottom: 5.5rem;
}

/* add card button when no cards */

div.MyPaymentCards a {
    margin-top: 2rem;
  }

div.MyPaymentCards a {
    display: block;
  }

div.MyPaymentCards a {
    width: -moz-fit-content;
    width: fit-content;
  }

/* button links within saved cards */

div.MyPaymentCards input[value="Make Preferred Card"] {
    margin-bottom: 0.5rem;
  }

div.MyPaymentCards input[value="Delete"] {
    margin-top: 0.5rem;
  }

div.MyPaymentCards hr {
    margin-top: 1rem;
  }

div.MyPaymentCards hr {
    margin-bottom: 1rem;
  }

div.MyPaymentCards hr {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

div.MyPaymentCards span {
    font-weight: 800;
  }

div.MyPaymentCards span {
    text-transform: uppercase;
  }

/* account > orders */

.MyOrders .OrderedItem {
    margin: 0px;
  }

.MyOrders .OrderedItem {
    margin-bottom: 0.5rem;
  }

.MyOrders .OrderedItem {
    border-top-width: 0px;
  }

.MyOrders .OrderedItem {
    border-bottom-width: 1px;
  }

.MyOrders .OrderedItem {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.MyOrders .OrderedItem {
    --tw-bg-opacity: 1;
    background-color: rgb(246 246 246 / var(--tw-bg-opacity));
  }

.MyOrders .OrderedItem {
    padding: 0px;
  }

.MyOrders .OrderedItem {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.MyOrders .OrderedItem {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

.MyOrders .OrderHeading,
  .MyOrders .OrderNumber {
    margin-top: 0px;
  }

.MyOrders .OrderHeading,
  .MyOrders .OrderNumber {
    font-weight: 800;
  }

.MyOrders .OrderHeading,
  .MyOrders .OrderNumber {
    text-transform: uppercase;
  }

.MyOrders .OrderDetails {
    margin: 0px;
  }

.MyOrders .OrderDetails {
    margin-bottom: 0.5rem;
  }

.MyOrders .OrderDetails {
    border-width: 1px;
  }

.MyOrders .OrderDetails {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.MyOrders .OrderDetails {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.MyOrders .OrderDetails {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

.MyOrders .OrderDetails .Section {
      margin: 0px;
    }

.MyOrders .OrderDetails .Section {
      margin-top: 1rem;
    }

.MyOrders .OrderDetails .Section:first-of-type {
        margin-top: 1rem;
      }

.MyOrders .OrderDetails .Section h2 {
        margin: 0px;
      }

.MyOrders .OrderDetails .Section h2 {
        display: block;
      }

.MyOrders .OrderDetails .Section h2 {
        width: -moz-fit-content;
        width: fit-content;
      }

/* account for no block-level element below */

.MyOrders .OrderDetails .Section h2.TicketsHeading {
          margin-bottom: 1rem;
        }

/* hide empty pointless social media stuff */

.MyOrders .OrderDetails .Section .SocialMedia,
      .MyOrders .OrderDetails .Section #fb-root,
      .MyOrders .OrderDetails .Section .SocialmediaShareLabel {
        display: none;
      }

/* the totals in each section are sometimes blank but are in the summary anyway */

.MyOrders .OrderDetails .Section .SectionTotal {
        display: none;
      }

/* align table total (always last column, only some have classes) */

.MyOrders .OrderDetails .Section th:last-child,
      .MyOrders .OrderDetails .Section td:last-child {
        width: 25%;
      }

/* gift voucher */

.AddGiftVoucher {
  /* add a bit of extra padding to account for recipient input being shown/hidden with js and resize not updating */
  padding-bottom: 2.5rem;
}

.AddGiftVoucher .SendTo label {
      margin-right: 1rem;
    }

.AddGiftVoucher .SendTo .Input_Text {
      margin-top: 0.5rem;
    }

/* some labels are spans */

.AddGiftVoucher span.left {
    display: block;
  }

.AddGiftVoucher span.left {
    padding-bottom: 0.25rem;
  }

.AddGiftVoucher span.left {
    font-weight: 800;
  }

.AddGiftVoucher span.left {
    text-transform: uppercase;
  }

/* message after message field */

.AddGiftVoucher .AddAnotherVoucherText {
    margin-top: -1rem;
  }

/* redeem */

.RedeemGift .GiftCode .ErrorMessage {
  margin-top: 1rem;
}

/***************************************************************************/

/* CHOOSE SEATS / EDIT TICKETS
/***************************************************************************/

/* don't show the event title as the header is shown */

.ChooseSeats .EventDetails {
    font-size: 0
  }

.ChooseSeats .EventDetails {
    margin: 0px;
  }

.ChooseSeats .EventDetails span,
    .ChooseSeats .EventDetails b {
      display: none;
    }

.ChooseSeats .AreaAndVenueDetails {
    display: none;
  }

/* calendar */

.ChooseSeats .InstanceCalendar {
    margin-top: 0.75rem;
  }

.ChooseSeats .InstanceCalendar {
    margin-bottom: 0px;
  }

.ChooseSeats .InstanceCalendar {
    padding-right: 36px;
  }

.ChooseSeats .InstanceCalendar .PreviousShowingButton {
      margin-left: 5px;
    }

.ChooseSeats .InstanceCalendar .NextShowingButton {
      margin-right: 5px;
    }

.ChooseSeats .InstanceCalendar .CalendarButton {
      right: 6px;
    }

.ChooseSeats .InstanceCalendar .CalendarButton {
      margin: 0px;
    }

.ChooseSeats .InstanceCalendar a {
      border-width: 0px;
    }

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .TitleArea {
          width: 100%;
        }

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .TitleArea .PrevArrow {
            left: 5px;
          }

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .TitleArea .NextArrow {
            right: 5px;
          }

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .TitleArea .CalendarTitleSpan {
            font-size: 1.125rem;
            line-height: 1.75rem;
          }

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .CalendarViewport table td.DateCell.SeatsAvailableOnline {
              --tw-text-opacity: 1;
              color: hsl(var(--twc-theme) / var(--twc-theme-opacity, var(--tw-text-opacity)));
            }

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .AdditionalInfoArea .ExpandingArea {
          font-size: 1.125rem;
          line-height: 1.75rem;
        }

/* yes this is a typo */

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .AdditionalInfoArea .ExpandingArea .Perfomance .Button {
            width: 4rem;
          }

.ChooseSeats .InstanceCalendar .DropDownCalendar .DropDownSection .AdditionalInfoArea .ExpandingArea .Perfomance .Button {
            text-align: center;
          }

/* instructions */

.ChooseSeats .SeatingAreaHeading {
    display: none;
  }

.ChooseSeats .SeatingAreaInstructions {
    margin-top: 2rem;
  }

.ChooseSeats .SeatingAreaInstructions {
    border-top-width: 2px;
  }

.ChooseSeats .SeatingAreaInstructions {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.ChooseSeats .SeatingAreaInstructions {
    padding-top: 1.5rem;
  }

/* seating plan */

.ChooseSeats .SeatingArea {
    border-width: 1px;
  }

.ChooseSeats .SeatingArea {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.ChooseSeats .SeatingArea.Unreserved {
      padding: 1rem;
    }

.ChooseSeats .SeatingArea .PlanControls {
      left: auto;
      width: auto;
      right: 0;
      padding: 5px 5px 5px 8px
    }

.ChooseSeats .SeatingArea .PlanControls {
      --tw-bg-opacity: 1;
      background-color: rgb(209 209 209 / var(--tw-bg-opacity));
    }

.ChooseSeats .SeatingArea .PlanControls div {
        display: inline-block;
      }

.ChooseSeats .SeatingArea .PlanControls .Control {
        mix-blend-mode: difference;
      }

/* needs taller min-height for seating plans like https://watersidearts.org/events/sing-and-sign */

.ChooseSeats #ctl00_ContentPlaceHolder_SeatingAreaControl_ContainerDiv {
    min-height: 350px !important;
  }

/* buttons, all are styled as links except the continue button */

.ChooseSeats .Buttons {
    margin-bottom: 2rem;
  }

/* prices */

.ChooseSeats .PricesContainer {
    /* text slightly smaller than normal */
    font-size: 1.125rem;
    line-height: 1.4
  }

.ChooseSeats .PricesContainer {
    width: 100%;
  }

.ChooseSeats .PricesContainer {
    overflow: auto;
  }

.ChooseSeats .PricesContainer {
    border-width: 1px;
  }

.ChooseSeats .PricesContainer {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.ChooseSeats .PricesContainer {
    padding: 1rem;
  }

.ChooseSeats .PricesContainer {
    padding-bottom: 0px;
  }

.ChooseSeats .PricesContainer h3 {
      /* table cell padding takes care of this */
    }

.ChooseSeats .PricesContainer h3 {
      margin-bottom: 0px;
    }

.ChooseSeats .PricesContainer .PriceBand {
      text-wrap: nowrap;
    }

/* message in header for priority booking */

.ChooseSeats .Message:has(+ .PriorityBookingWikiText) {
    margin-top: 2rem;
  }

.ChooseSeats .Message:has(+ .PriorityBookingWikiText) {
    border-top-width: 2px;
  }

.ChooseSeats .Message:has(+ .PriorityBookingWikiText) {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.ChooseSeats .Message:has(+ .PriorityBookingWikiText) {
    padding-top: 1.5rem;
  }

/* promo code box (priority booking) */

.ChooseSeats .PromoCode {
    margin-top: 2rem;
  }

.ChooseSeats .PromoCode {
    margin-bottom: 0px;
  }

.ChooseSeats .PromoCode {
    overflow: hidden;
  }

.ChooseSeats .PromoCode {
    border-bottom-width: 1px;
  }

.ChooseSeats .PromoCode {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.ChooseSeats .PromoCode {
    --tw-bg-opacity: 1;
    background-color: rgb(246 246 246 / var(--tw-bg-opacity));
  }

.ChooseSeats .PromoCode {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.ChooseSeats .PromoCode {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

.ChooseSeats .PromoCode label {
      clear: both;
    }

.ChooseSeats .PromoCode .Input_Text {
      width: calc(100% - 160px) !important;
    }

.ChooseSeats .PromoCode .Input_Text {
      float: left;
    }

/* submitted current value */

.ChooseSeats .PromoCode span.Input_Text {
      height: 3rem;
      line-height: 3rem;
    }

.EditTickets h1.EditTicketsHeading {
    font-size: 0;
  }

.EditTickets h1.EditTicketsHeading span span,
    .EditTickets h1.EditTicketsHeading b {
      display: none;
    }

.EditTickets h2.EditTicketsHeading {
    display: none;
  }

.EditTickets .Details .Details {
    margin: 0px;
  }

.EditTickets .Details .Details {
    margin-top: 2rem;
  }

.EditTickets .Details .Details {
    margin-bottom: 2rem;
  }

.EditTickets .Details .Details {
    width: 100%;
  }

.EditTickets .Details .Details {
    overflow: auto;
  }

.EditTickets .Details .Details {
    border-width: 1px;
  }

.EditTickets .Details .Details {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.EditTickets .Details .Details {
    padding: 0px;
  }

.EditTickets .Details .Details {
    padding-left: 1rem;
    padding-right: 1rem;
  }

.EditTickets .Details .Details select {
      width: 100%;
    }

/* message in header for edit tickets */

.EditTickets .Message:has(+ #ctl00_ContentPlaceHolder_EditTicketsWikiTextViewer) {
    margin-top: 2rem;
  }

.EditTickets .Message:has(+ #ctl00_ContentPlaceHolder_EditTicketsWikiTextViewer) {
    border-top-width: 2px;
  }

.EditTickets .Message:has(+ #ctl00_ContentPlaceHolder_EditTicketsWikiTextViewer) {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.EditTickets .Message:has(+ #ctl00_ContentPlaceHolder_EditTicketsWikiTextViewer) {
    padding-top: 1.5rem;
  }

/***************************************************************************/

/* BASKET
/***************************************************************************/

/* hide title as it in the iframe template, and shown/hidden based on whether the user goes from basket to edittickets/chooseseats */

.Basket2 h1 {
    display: none;
  }

/* hide savings header */

.Basket2 .Savings h2,
    .Basket2 .Savings ul {
      display: none;
    }

/* if you use a promo code with an empty basket you get a pointless header */

.Basket2 .Savings .RelatedOffersHeader {
      display: none;
    }

/* hide some other bits */

.Basket2 .Header,
  .Basket2 .ViewDetails {
    display: none;
  }

/* login for discounts box */

.Basket2 div[id$="LoginForDiscountsText"] {
    margin-bottom: 1rem;
  }

.Basket2 div[id$="LoginForDiscountsText"] {
    border-width: 1px;
  }

.Basket2 div[id$="LoginForDiscountsText"] {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.Basket2 div[id$="LoginForDiscountsText"] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.Basket2 div[id$="LoginForDiscountsText"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

.Basket2 div[id$="LoginForDiscountsText"] {
    text-align: center;
  }

/* promo code box */

.Basket2 .PromoCode {
    margin-bottom: 1rem;
  }

.Basket2 .PromoCode {
    overflow: hidden;
  }

.Basket2 .PromoCode {
    border-bottom-width: 1px;
  }

.Basket2 .PromoCode {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.Basket2 .PromoCode {
    --tw-bg-opacity: 1;
    background-color: rgb(246 246 246 / var(--tw-bg-opacity));
  }

.Basket2 .PromoCode {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.Basket2 .PromoCode {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

.Basket2 .PromoCode label {
      clear: both;
    }

.Basket2 .PromoCode .Input_Text {
      width: calc(100% - 160px) !important;
    }

.Basket2 .PromoCode .Input_Text {
      float: left;
    }

/* submitted current value */

.Basket2 .PromoCode span.Input_Text {
      height: 3rem;
      line-height: 3rem;
    }

/* items */

.Basket2 dl,
  .Basket2 dd,
  .Basket2 dt {
    margin: 0px;
  }

.Basket2 dl,
  .Basket2 dd,
  .Basket2 dt {
    padding: 0px;
  }

.Basket2 .Items {
    margin-top: 2rem;
  }

.Basket2 .Items {
    border-width: 1px;
  }

.Basket2 .Items {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.Basket2 .Items {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.Basket2 .Items {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

.Basket2 .Items p,
    .Basket2 .Items ul,
    .Basket2 .Items li {
      margin: 0px;
    }

.Basket2 .Items p,
    .Basket2 .Items ul,
    .Basket2 .Items li {
      padding: 0px;
    }

.Basket2 .Items .Money {
      font-weight: 700;
    }

.Basket2 .Items dt.Item {
      font-size: 1.5rem;
      line-height: 1.1;
      font-weight: 800;
    }

.Basket2 .Items dt.Item {
      padding-bottom: 0.75rem;
    }

.Basket2 .Items dt.Item {
      text-transform: uppercase;
    }

.Basket2 .Items dd.Item {
      margin-bottom: 1.5rem;
    }

.Basket2 .Items dd.Item {
      display: flex;
    }

.Basket2 .Items dd.Item {
      width: 100%;
    }

.Basket2 .Items dd.Item {
      flex-wrap: wrap;
    }

.Basket2 .Items dd.Item {
      align-items: baseline;
    }

.Basket2 .Items dd.Item {
      justify-content: space-between;
    }

.Basket2 .Items dd.Item {
      border-bottom-width: 1px;
    }

.Basket2 .Items dd.Item {
      --tw-border-opacity: 1;
      border-color: rgb(209 209 209 / var(--tw-border-opacity));
    }

.Basket2 .Items dd.Item {
      padding-bottom: 1.5rem;
    }

@media not all and (min-width: 768px) {
      .Basket2 .Items dd.Item {
        flex-direction: column;
      }
    }

.Basket2 .Items dd.Item .Buttons {
        display: flex;
      }

.Basket2 .Items dd.Item .Buttons {
        width: 100%;
      }

.Basket2 .Items dd.Item .Buttons {
        justify-content: flex-start;
      }

.Basket2 .Items dd.Item .Buttons {
        padding-top: 0.5rem;
      }

@media (min-width: 768px) {
        .Basket2 .Items dd.Item .Buttons {
          justify-content: flex-end;
        }
      }

@media (min-width: 768px) {
          .Basket2 .Items dd.Item.Instance .Breakdown {
            text-align: right;
          }
        }

.Basket2 .Items dd.Item.GiftVoucher .Breakdown {
          display: flex;
        }

.Basket2 .Items dd.Item.GiftVoucher .Breakdown {
          width: 100%;
        }

.Basket2 .Items dd.Item.GiftVoucher .Breakdown {
          flex-direction: row-reverse;
        }

.Basket2 .Items dd.Item.GiftVoucher .Breakdown {
          align-items: baseline;
        }

.Basket2 .Items dd.Item.GiftVoucher .Breakdown {
          justify-content: space-between;
        }

.Basket2 .Items dd.Item.GiftVoucher .Breakdown .Total {
            font-weight: 700;
          }

.Basket2 .Items .AddAnotherGiftVoucher {
      margin-bottom: 0.5rem;
    }

/* if you have both gift vouchers and membership in basket this appears between the two */

.Basket2 .Items .AddAnotherGiftVoucher + dt.Item.Membership {
      margin-top: 1rem;
    }

.Basket2 .Items dt.Footer {
      display: none;
    }

.Basket2 .Items dd.Footer {
      display: flex;
    }

.Basket2 .Items dd.Footer {
      width: 100%;
    }

.Basket2 .Items dd.Footer {
      flex-direction: row-reverse;
    }

.Basket2 .Items dd.Footer .Breakdown {
        text-align: right;
      }

.Basket2 .Items dd.Footer .Total {
        font-size: 1.5rem;
        line-height: 1.1;
        font-weight: 800;
      }

.Basket2 .Items dd.Footer .Total .Label {
          font-weight: 400;
        }

/* basket custom */

#x-spektrix-basket-discount-applied {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(209 209 209 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/***************************************************************************/

/* MERCHANDISE
/*
/* Assuming wikitext in this format:
/* $ShowImage$
/* ++Title
/* <blank>
/* Text goes here.
/* <paragraph break>
/* More text. End.
/***************************************************************************/

.SpektrixPage.Merchandise .Header {
    margin-bottom: 2.5rem;
  }

@media (min-width: 768px) {
    .SpektrixPage.Merchandise .Header {
      margin-bottom: 3rem;
    }
  }

.SpektrixPage.Merchandise .Header + .Merchandise {
      border-top-width: 1px;
    }

.SpektrixPage.Merchandise .Header + .Merchandise {
      --tw-border-opacity: 1;
      border-color: rgb(209 209 209 / var(--tw-border-opacity));
    }

.SpektrixPage.Merchandise .Merchandise {
    position: relative;
  }

.SpektrixPage.Merchandise .Merchandise {
    border-top-width: 1px;
    border-bottom-width: 1px;
  }

.SpektrixPage.Merchandise .Merchandise {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.SpektrixPage.Merchandise .Merchandise {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

@media (min-width: 640px) {
    .SpektrixPage.Merchandise .Merchandise {
      padding-right: calc(160px + 3rem);
    }
  }

.SpektrixPage.Merchandise .Merchandise + .Merchandise {
      border-top-width: 0px;
    }

.SpektrixPage.Merchandise .Merchandise .WikiText {
      /* enough height for when not enough text is supplied to cover image height */
    }

.SpektrixPage.Merchandise .Merchandise .WikiText {
      position: relative;
    }

.SpektrixPage.Merchandise .Merchandise .WikiText {
      min-height: 145px;
    }

.SpektrixPage.Merchandise .Merchandise .WikiText {
      padding-left: calc(25% + 1.5rem);
    }

/* tighten line spacing added by wikitext */

.SpektrixPage.Merchandise .Merchandise .WikiText br {
        line-height: 0.5;
      }

/* force that wikitext is used correctly */

.SpektrixPage.Merchandise .Merchandise .WikiText h1 {
        display: none;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText h2 {
        margin-top: 0px;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText h2 {
        margin-bottom: 1rem;
      }

/* remove space between item title and start of possibly-multiline description */

.SpektrixPage.Merchandise .Merchandise .WikiText h2 + span {
          display: none;
        }

/* image on left, crop, clickable to view full version */

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        position: absolute;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        left: 0px;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        top: 0px;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        aspect-ratio: 16/12;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        width: 25%;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        cursor: pointer;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        border-width: 1px;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        --tw-border-opacity: 1;
        border-color: rgb(209 209 209 / var(--tw-border-opacity));
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        -o-object-fit: cover;
           object-fit: cover;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img {
        -o-object-position: center;
           object-position: center;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText img:hover {
        --tw-border-opacity: 1;
        border-color: rgb(93 93 93 / var(--tw-border-opacity));
      }

/* remove space between image and title */

.SpektrixPage.Merchandise .Merchandise .WikiText img + span {
          display: none;
        }

/* fix bullets */

.SpektrixPage.Merchandise .Merchandise .WikiText ul {
        list-style: square;
        padding-left: 1.2rem;
      }

.SpektrixPage.Merchandise .Merchandise .WikiText ol {
        list-style: decimal;
        padding-left: 1.3rem;
      }

.SpektrixPage.Merchandise .Merchandise .Details {
      margin-top: 0.75rem;
    }

.SpektrixPage.Merchandise .Merchandise .Details {
      border-top-width: 1px;
    }

.SpektrixPage.Merchandise .Merchandise .Details {
      --tw-border-opacity: 1;
      border-color: rgb(230 230 230 / var(--tw-border-opacity));
    }

.SpektrixPage.Merchandise .Merchandise .Details {
      text-align: center;
    }

@media (min-width: 640px) {
      .SpektrixPage.Merchandise .Merchandise .Details {
        position: absolute;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.Merchandise .Merchandise .Details {
        right: 1rem;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.Merchandise .Merchandise .Details {
        top: 2rem;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.Merchandise .Merchandise .Details {
        margin-top: 0px;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.Merchandise .Merchandise .Details {
        width: 160px;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.Merchandise .Merchandise .Details {
        border-width: 0px;
      }
    }

.SpektrixPage.Merchandise .Merchandise .Details p {
        margin: 0px;
      }

.SpektrixPage.Merchandise .Merchandise .Details .Label {
        display: none;
      }

.SpektrixPage.Merchandise .Merchandise .Details .Money {
        display: block;
      }

.SpektrixPage.Merchandise .Merchandise .Details .Money {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }

.SpektrixPage.Merchandise .Merchandise .Details .Money {
        font-size: 1.5rem;
        line-height: 2rem;
      }

.SpektrixPage.Merchandise .Merchandise .Details .Money {
        font-weight: 700;
      }

@media (min-width: 640px) {
        .SpektrixPage.Merchandise .Merchandise .Details .Money {
          padding-top: 0px;
        }
      }

.SpektrixPage.Merchandise .Merchandise .Details input {
        display: block;
      }

.SpektrixPage.Merchandise .Merchandise .Details input {
        width: 100%;
      }

/***************************************************************************/

/* SUPPLEMENTARY EVENTS
/* Very similar styles to Merchandise BUT the markup nesting is different.
/*
/* Assuming wikitext in this format:
/* $ShowImage$
/* ++Title
/* <blank>
/* Text goes here.
/* <paragraph break>
/* More text. End.
/***************************************************************************/

/* header has no class, and there may or may not be an error too, want spacing between header and first item :/ */

.SpektrixPage.SupplementaryEventsPage div:first-of-type + .SupplementaryEventDiv {
    margin-top: 2rem;
  }

.SpektrixPage.SupplementaryEventsPage div:first-of-type + .ErrorMessage {
    margin-bottom: 2rem;
  }

/* header h2 */

.SpektrixPage.SupplementaryEventsPage #ctl00_ContentPlaceHolder_SupplementaryEventsWikiTextViewer h2 {
    margin-top: 0px;
  }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv {
    position: relative;
  }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv {
    border-top-width: 1px;
    border-bottom-width: 1px;
  }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

@media (min-width: 640px) {
    .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv {
      padding-right: calc(160px + 3rem);
    }
  }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv + .SupplementaryEventDiv {
      border-top-width: 0px;
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text {
      /* enough height for when not enough text is supplied to cover image height */
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text {
      position: relative;
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text {
      min-height: 145px;
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text {
      padding-left: calc(25% + 1.5rem);
    }

/* tighten line spacing added by wikitext */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text br {
        line-height: 0.5;
      }

/* force that wikitext is used correctly */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text h1 {
        display: none;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text h2 {
        margin-top: 0px;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text h2 {
        margin-bottom: 1rem;
      }

/* remove space between item title and start of possibly-multiline description */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text h2 + span {
          display: none;
        }

/* image on left, crop, NOT clickable (different from merchandise) */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        position: absolute;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        left: 0px;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        top: 0px;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        aspect-ratio: 16/12;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        width: 25%;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        border-width: 1px;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        --tw-border-opacity: 1;
        border-color: rgb(209 209 209 / var(--tw-border-opacity));
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        -o-object-fit: cover;
           object-fit: cover;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img {
        -o-object-position: center;
           object-position: center;
      }

/* remove space between image and title */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text img + span {
          display: none;
        }

/* fix bullets */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text ul {
        list-style: square;
        padding-left: 1.2rem;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text ol {
        list-style: decimal;
        padding-left: 1.3rem;
      }

/* hide events dates as this is used for addons e.g. ice cream */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv .Event_Text .Event_Dates {
        display: none;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
      /* undo left padding of container (vw not %) */
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
      margin-left: calc(calc(25vw + 1.5rem) * -1);
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
      margin-top: 0.75rem;
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
      border-top-width: 1px;
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
      --tw-border-opacity: 1;
      border-color: rgb(230 230 230 / var(--tw-border-opacity));
    }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
      text-align: center;
    }

@media (min-width: 640px) {
      .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
        position: absolute;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
        right: 0px;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
        top: 0px;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
        margin-top: 0px;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
        margin-right: calc(calc(160px + 3rem) * -1);
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
        width: 160px;
      }
    }

@media (min-width: 640px) {
      .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv {
        border-width: 0px;
      }
    }

/* hide "Full Price" */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv span[id] {
        display: none;
      }

/* price */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv span {
        display: block;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv span {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv span {
        font-size: 1.5rem;
        line-height: 2rem;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv span {
        font-weight: 700;
      }

@media (min-width: 640px) {
        .SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv span {
          padding-top: 0px;
        }
      }

/* quantity/button */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv input {
        margin-top: 1rem;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv input {
        display: block;
      }

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv input {
        width: 100%;
      }

/* quantity */

.SpektrixPage.SupplementaryEventsPage .SupplementaryEventDiv #SimpleSeatingDiv input[type="tel"] {
        margin-top: 0px;
      }

.SpektrixPage.SupplementaryEventsPage input[type="submit"] {
    margin-top: 2rem;
  }

/* added to basket message */

.SpektrixPage.SupplementaryEventsPage #ctl00_ContentPlaceHolder_InfoMessage {
    margin-top: 2rem;
  }

.SpektrixPage.SupplementaryEventsPage #ctl00_ContentPlaceHolder_InfoMessage {
    display: block;
  }

.SpektrixPage.SupplementaryEventsPage #ctl00_ContentPlaceHolder_InfoMessage:empty {
      display: none;
    }

/***************************************************************************/

/* SUPPLEMENTARY EVENTS - CROSS-SELLING PAGE (linked to from Basket)
/***************************************************************************/

.SpektrixPage.EventDetails {
  /* move upwards due to heading top margin given below layout */
  margin-top: -2rem;
  /* make room for absolute image, we assume there will be enough text to cover height as image is not cropped */
  position: relative;
  padding-left: calc(25% + 1.5rem);
}

/* image on left, not cropped */

.SpektrixPage.EventDetails img {
    position: absolute;
  }

.SpektrixPage.EventDetails img {
    left: 0px;
  }

.SpektrixPage.EventDetails img {
    top: 0px;
  }

.SpektrixPage.EventDetails img {
    width: 25%;
  }

.SpektrixPage.EventDetails img {
    border-width: 1px;
  }

.SpektrixPage.EventDetails img {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

/* hide line break between image and heading, and heading and text, but not within text */

.SpektrixPage.EventDetails .DetailsContainer img + span,
    .SpektrixPage.EventDetails .DetailsContainer h2 + span {
      display: none;
    }

/* tighten line spacing added by wikitext */

.SpektrixPage.EventDetails .DetailsContainer br {
      line-height: 0.5;
    }

/* hide dates heading */

.SpektrixPage.EventDetails .DatesAndTimesHeading {
    display: none;
  }

/* spacing between dropdown and button, vertical spacing between text and controls */

.SpektrixPage.EventDetails .EventDates {
    margin-top: 1rem;
  }

.SpektrixPage.EventDetails .EventDates {
    display: flex;
  }

.SpektrixPage.EventDetails .EventDates {
    flex-wrap: wrap;
  }

.SpektrixPage.EventDetails .EventDates {
    gap: 0.5rem;
  }

/***************************************************************************/

/* DONATIONS
/***************************************************************************/

.SpektrixPage.Donations .FundContainer {
    margin-top: 1.5rem;
  }

.SpektrixPage.Donations .FundContainer {
    border-width: 1px;
  }

.SpektrixPage.Donations .FundContainer {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.SpektrixPage.Donations .FundContainer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.SpektrixPage.Donations .FundContainer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

.SpektrixPage.Donations .ButtonSpacer {
    display: none;
  }

/***************************************************************************/

/* CHECKOUT (EXPRESS)
/***************************************************************************/

.spx-main-container__checkout {
  margin-bottom: 2rem;
}

/* sections */

.spx-main-container__checkout .spx-section-container {
    border-bottom-width: 2px;
  }

.spx-main-container__checkout .spx-section-container {
    --tw-border-opacity: 1;
    border-color: rgb(209 209 209 / var(--tw-border-opacity));
  }

.spx-main-container__checkout .spx-section-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

.spx-main-container__checkout .spx-section-container:first-child {
      padding-top: 0px;
    }

.spx-main-container__checkout .spx-section-container:last-child {
      border-width: 0px;
    }

.spx-main-container__checkout .spx-section-container:last-child {
      padding-bottom: 0px;
    }

/* edit link underneath header */

.spx-main-container__checkout .spx-link-edit {
    margin-bottom: 0.5rem;
  }

.spx-main-container__checkout .spx-link-edit {
    display: inline-block;
  }

/* subsections */

.spx-main-container__checkout .spx-subsection-summary-container,
  .spx-main-container__checkout .spx-field-container {
    overflow: hidden;
  }

/* headings */

.spx-main-container__checkout h2 {
    margin: 0px;
  }

.spx-main-container__checkout h2 {
    margin-bottom: 1rem;
  }

.spx-main-container__checkout h3 {
    margin-bottom: 0.5rem;
  }

.spx-main-container__checkout .spx-state-empty h2 {
    margin-bottom: 0px;
  }

.spx-main-container__checkout .spx-state-empty h2 > span > span {
      --tw-bg-opacity: 1;
      background-color: rgb(230 230 230 / var(--tw-bg-opacity));
    }

/* field containers */

.spx-main-container__checkout .spx-field-container {
    margin-bottom: 1rem;
  }

/* radio field containers */

.spx-main-container__checkout .spx-field-container__checkout--ticket-delivery,
  .spx-main-container__checkout .spx-field-container__checkout--select-address {
    margin-bottom: 0px;
  }

.spx-main-container__checkout .spx-field-container__checkout--ticket-delivery,
  .spx-main-container__checkout .spx-field-container__checkout--select-address {
    display: flex;
  }

.spx-main-container__checkout .spx-field-container__checkout--ticket-delivery,
  .spx-main-container__checkout .spx-field-container__checkout--select-address {
    align-items: baseline;
  }

.spx-main-container__checkout .spx-field-container__checkout--ticket-delivery,
  .spx-main-container__checkout .spx-field-container__checkout--select-address {
    gap: 0.25rem;
  }

/* checkbox field containers */

/* #UseCreditToPayForm required as don't want to target gift voucher code */

.spx-main-container__checkout #UseCreditToPayForm .spx-field-container__checkout--credit,
  .spx-main-container__checkout .spx-field-container__checkout--payment-method {
    display: flex;
  }

.spx-main-container__checkout #UseCreditToPayForm .spx-field-container__checkout--credit,
  .spx-main-container__checkout .spx-field-container__checkout--payment-method {
    align-items: baseline;
  }

.spx-main-container__checkout #UseCreditToPayForm .spx-field-container__checkout--credit,
  .spx-main-container__checkout .spx-field-container__checkout--payment-method {
    gap: 0.25rem;
  }

/* button margins */

.spx-main-container__checkout .spx-button-primary__checkout--start-checkout,
  .spx-main-container__checkout .spx-button-primary__checkout--start-checkout-login,
  .spx-main-container__checkout .spx-button-primary__checkout--ticket-delivery {
    margin-top: 1rem;
  }

/* start checkout when logged out */

.spx-main-container__checkout .spx-section-container__checkout--start-checkout .spx-text-copy, .spx-main-container__checkout .spx-section-container__checkout--start-checkout-login .spx-text-copy, .spx-main-container__checkout .spx-section-container__checkout--login-link-sent .spx-text-copy {
      margin-top: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--start-checkout .spx-text-copy, .spx-main-container__checkout .spx-section-container__checkout--start-checkout-login .spx-text-copy, .spx-main-container__checkout .spx-section-container__checkout--login-link-sent .spx-text-copy {
      margin-bottom: 1rem;
    }

.spx-main-container__checkout .spx-section-container__checkout--start-checkout-login .spx-text-copy__checkout--start-checkout-forgotten-password {
      margin-top: 1rem;
    }

.spx-main-container__checkout .spx-section-container__checkout--start-checkout-login .spx-text-copy__checkout--start-checkout-forgotten-password {
      display: inline-block;
    }

/* personal details */

.spx-main-container__checkout .spx-subsection-summary-container__checkout--personal-details span {
      float: left;
    }

.spx-main-container__checkout .spx-subsection-summary-container__checkout--personal-details span.spx-data-first-name,
      .spx-main-container__checkout .spx-subsection-summary-container__checkout--personal-details span.spx-data-phone-number {
        clear: left;
      }

.spx-main-container__checkout .spx-subsection-summary-container__checkout--personal-details span.spx-data-first-name {
        margin-right: 0.25rem;
      }

/* donations */

/* amount input */

.spx-main-container__checkout .spx-section-container__checkout--donations .spx-input-text__checkout--donation {
      width: auto !important;
    }

/* do not donate link */

.spx-main-container__checkout .spx-section-container__checkout--donations .spx-button-secondary__checkout--donations {
      margin-left: 1rem;
    }

/* order summary */

/* subsections */

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container {
      border-bottom-width: 1px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container {
      --tw-border-opacity: 1;
      border-color: rgb(209 209 209 / var(--tw-border-opacity));
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container.spx-data-group-basket-summary {
        padding-top: 0px;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container.spx-data-group-basket-summary .spx-link-edit {
          /* reset above */
        }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container.spx-data-group-basket-summary .spx-link-edit {
          margin-bottom: 0px;
        }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container.spx-data-group-basket-summary .spx-link-edit {
          display: inline;
        }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container .spx-subsection-summary-container {
        padding-bottom: 1rem;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container.spx-subsection-container__checkout--final-summary {
        border-width: 0px;
      }

/* final total */

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-container.spx-subsection-container__checkout--final-summary .spx-list-item:last-child {
          font-weight: 700;
        }

/* when closed */

.spx-main-container__checkout .spx-section-container__checkout--order-summary.spx-state-read-only .spx-subsection-container__checkout--final-summary {
      padding-bottom: 0px;
    }

/* orderlines */

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-summary {
      margin: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-summary {
      padding: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-summary {
      list-style: square;
      padding-left: 1.2rem;
      line-height: 1.5;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-item {
      margin: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-item {
      padding: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-item {
      padding-bottom: 0.5rem;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-item .spx-order-line {
        font-weight: 700;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-list-item:last-child {
        padding-bottom: 0px;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-sublist-summary {
      margin: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-sublist-summary {
      padding: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-sublist-summary {
      list-style: none;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-sublist-item {
      margin: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-sublist-item {
      padding: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-sublist-item .spx-order-line {
        font-weight: 400;
      }

/* gift voucher */

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-label-field,
      .spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-validation-message {
        float: left;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-label-field,
      .spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-validation-message {
        clear: both;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-input-text {
        width: calc(100% - 210px) !important;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-input-text {
        float: left;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-input-text {
        clear: left;
      }

.spx-main-container__checkout .spx-section-container__checkout--order-summary .spx-subsection-summary-container__checkout--credit .spx-field-container,
    .spx-main-container__checkout .spx-section-container__checkout--order-summary #UseCreditToPayForm .spx-field-container {
      margin-bottom: 0px;
    }

/* billing details */

/* do spacing differently */

.spx-main-container__checkout .spx-section-container__checkout--billing-details .spx-field-container:not(.spx-field-container__checkout--new-address) {
      margin-bottom: 0px;
    }

.spx-main-container__checkout .spx-section-container__checkout--billing-details .spx-subsection-container {
      margin-bottom: 1rem;
    }

/* manual address entry */

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection {
      margin-top: 1rem;
    }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection {
      border-width: 1px;
    }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection {
      --tw-border-opacity: 1;
      border-color: rgb(209 209 209 / var(--tw-border-opacity));
    }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection {
      padding-left: 1rem;
      padding-right: 1rem;
    }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection .spx-field-container {
        position: relative;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #AddressInput_NewAddress_PostCode {
        width: calc(100% - 210px) !important;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #FindMyAddressButton {
        /* account for padding on #AddressSubsection and borders */
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #FindMyAddressButton {
        position: absolute;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #FindMyAddressButton {
        right: 17px;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #FindMyAddressButton {
        margin-top: -4rem;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #FindMyAddressButton {
        width: 200px;
      }

/* don't show field-level validation messages as the postcode one breaks layout (still shown on form errors) */

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection .spx-validation-message__checkout--new-address.spx-validation-field-error {
        display: none;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection .spx-state-invalid #FindMyAddressButton {
        margin-top: -86px;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #AddressDropdown {
        margin-bottom: 1rem;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #SelectedAddressContainer {
        margin-top: -0.5rem;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #SelectedAddressContainer {
        margin-bottom: 0px;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #EnterMyAddressManuallyLink {
        margin-top: -0.5rem;
      }

.spx-main-container__checkout .spx-section-container__checkout--billing-details #AddressSubsection #EnterMyAddressManuallyLink {
        margin-bottom: 0.5rem;
      }

/* when closed */

.spx-main-container__checkout .spx-section-container__checkout--billing-details.spx-state-read-only .spx-subsection-container:last-child {
      margin-bottom: 0px;
    }

/***************************************************************************/

/* MEMBERSHIPS (small iframe on CMS Memberships page)
/***************************************************************************/

.Memberships {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: hsl(var(--twc-theme-20) / var(--twc-theme-20-opacity, var(--tw-border-opacity)));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--twc-theme-10) / var(--twc-theme-10-opacity, var(--tw-bg-opacity)));
  padding: 1.5rem;
  line-height: 1.5;
}

/* replace title */

/* this will always fit on one line so we don't inject styling spans (and it uses pseudo elements anyway) */

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText {
    font-size: 1.875rem;
    line-height: 1.35;
    letter-spacing: -0.05em;
    font-weight: 800;
  }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText {
    margin-bottom: 1rem;
  }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText {
    display: inline-block;
  }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--twc-theme-20) / var(--twc-theme-20-opacity, var(--tw-bg-opacity)));
  }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText {
    text-transform: uppercase;
  }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText h1 {
      display: none;
    }

.Memberships #ctl00_ContentPlaceHolder_HeaderWikiText::after {
      content: "Buy Membership";
    }

.Memberships .LoginForRenewalMessage {
    font-size: 0;
  }

.Memberships .LoginForRenewalMessage span {
      margin-bottom: 1rem;
    }

.Memberships .LoginForRenewalMessage span {
      display: block;
    }

.Memberships .LoginForRenewalMessage span {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }

.Memberships .Membership p {
      margin: 0px;
    }

.Memberships .Membership p.Buttons {
        margin-top: 1rem;
      }

.Memberships .Membership p.Buttons {
        display: flex;
      }

.Memberships .Membership p.Buttons {
        flex-wrap: wrap;
      }

.Memberships .Membership p.Buttons {
        gap: 1rem;
      }

.Memberships .Membership p.Buttons input {
          flex: 1 1 0%;
        }

.Memberships .Membership img {
      display: none;
    }

.Memberships .Membership .WikiText {
      font-weight: 800;
    }

.Memberships .Membership .WikiText {
      text-transform: uppercase;
    }