@charset "UTF-8";
/* Setup */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding on any ol, ul with a class assigned */
/* Remove default margin, set with .flow */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd,
input {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Anchor elements that don't have a class get default styles */
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * TABLE OF CONTENTS
 *
 * Type Scale
 * Font Weight
 * Neutral Colors
 * Brand Colors
 * Accent Colors
 * Data Colors
 * Color, Links
 * Color, UI
 * Spacing
 * Widths
 * Max Widths
 * Buttons
 * Forms
 * Border radius
 * Wrapper modifiers
 * Inline SVG
 * Breakpoints
 */
:root {
  /*
   * Add hooks for future customizations
   * --font-display covers larger font sizes from 18px up (sizes 1-5)
   * --font-body covers smaller font sizes less than 18px (sizes 6, 7)
   * --font-data is used for table data and possibly widget numbers and data
   */
  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-data: "Inter", sans-serif;
  /* Type Scale */
  /* Changing type scale to lower smallest font-size to 14px. Aiming for:
         15px > 14px
         16px > 15px
         20px > 18px
     New scale calculated here: https://utopia.fyi/type/calculator/?c=320,14,1.2,1140,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --font-size-7: clamp(0.875rem, calc(0.91rem + 0.12vw), 0.94rem);
  --font-size-6: clamp(0.94rem, calc(0.91rem + 0.12vw), 1rem);
  --font-size-5: clamp(1.13rem, calc(1.08rem + 0.24vw), 1.25rem);
  --font-size-4: clamp(1.35rem, calc(1.27rem + 0.41vw), 1.56rem);
  --font-size-3: clamp(1.62rem, calc(1.49rem + 0.65vw), 1.95rem);
  --font-size-2: clamp(1.94rem, calc(1.75rem + 0.97vw), 2.44rem);
  --font-size-1: clamp(2.33rem, calc(2.05rem + 1.4vw), 3.05rem);
  /* Font Weight */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  /* Neutral Colors */
  --color-neutral-10: hsl(0, 0%, 0%);
  --color-neutral-20: hsl(0, 0%, 20%);
  --color-neutral-30: hsl(0, 0%, 33%);
  --color-neutral-40: hsl(0, 0%, 46%);
  --color-neutral-50: hsl(0, 0%, 60%);
  --color-neutral-60: hsl(0, 0%, 67%);
  --color-neutral-70: hsl(0, 0%, 80%);
  --color-neutral-80: hsl(0, 0%, 93%);
  --color-neutral-90: hsl(0, 0%, 96%);
  --color-neutral-100: hsl(0, 0%, 100%);
  /* Brand Colors */
  --color-brand-10: hsl(214, 94%, 21%);
  --color-brand-20: hsl(215, 79%, 30%);
  --color-brand-30: hsl(215, 75%, 33%);
  --color-brand-40: hsl(215, 70%, 39%);
  --color-brand-50: hsl(215, 63%, 45%);
  --color-brand-60: hsl(215, 62%, 55%);
  --color-brand-70: hsl(215, 70%, 65%);
  --color-brand-80: hsl(214, 78%, 74%);
  --color-brand-90: hsl(215, 90%, 85%);
  --color-brand-100: hsl(216, 63%, 97%);
  /* Accent Colors */
  --color-accent-10: #8e3f06;
  --color-accent-20: #b55008;
  --color-accent-30: #dc6109;
  --color-accent-40: #f57519;
  --color-accent-50: #f78c40;
  /* Data Colors */
  --color-data-10: hsl(216, 54%, 51%);
  --color-data-20: hsl(209, 77%, 68%);
  --color-data-30: hsl(331, 55%, 43%);
  --color-data-40: hsl(17, 94%, 56%);
  --color-data-50: hsl(37, 96%, 59%);
  /* Color, Links */
  --color-link: hsl(210, 85%, 38%);
  --color-link-2: hsl(0, 0%, 20%);
  /* Color, UI */
  --color-danger-10: hsl(2, 82%, 28%);
  --color-danger-20: hsl(2, 87%, 33%);
  --color-danger-30: hsl(2, 92%, 38%);
  --color-danger-90: hsl(3, 74%, 94%);
  --color-success-10: hsl(151, 90%, 10%);
  --color-success-20: hsl(151, 91%, 14%);
  --color-success-30: hsl(151, 96%, 19%);
  --color-success-90: hsl(151, 40%, 85%);
  --color-warning-10: hsl(44, 83%, 25%);
  --color-warning-90: hsl(44, 100%, 87%);
  --color-info-10: hsl(211, 83%, 25%);
  --color-info-90: hsl(211, 74%, 88%);
  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%);
  /* Spacing */
  --spacing-00: 0;
  --spacing-10: clamp(0.25rem, calc(0.25rem + 0vw), 0.25rem);
  --spacing-20: clamp(0.44rem, calc(0.41rem + 0.12vw), 0.5rem);
  --spacing-30: clamp(0.69rem, calc(0.66rem + 0.12vw), 0.75rem);
  --spacing-40: clamp(0.88rem, calc(0.83rem + 0.24vw), 1rem);
  --spacing-50: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem);
  --spacing-60: clamp(1.75rem, calc(1.65rem + 0.49vw), 2rem);
  --spacing-70: clamp(2.63rem, calc(2.48rem + 0.73vw), 3rem);
  --spacing-80: clamp(3.5rem, calc(3.3rem + 0.98vw), 4rem);
  --spacing-90: clamp(5.25rem, calc(4.96rem + 1.46vw), 6rem);
  /* Widths */
  --w1: 1rem;
  --w2: 2rem;
  --w3: 4rem;
  --w4: 8rem;
  --w5: 16rem;
  /* Max Widths */
  --mw1: 8rem;
  --mw2: 16rem;
  --mw3: 20rem;
  --mw4: 24rem;
  --mw5: 28rem;
  --mw6: 32rem;
  --mw7: 48rem;
  --mw8: 64rem;
  --mw9: 96rem;
  /* Buttons */
  --button-border: 1px solid rgba(0, 0, 0, 0.1);
  --button-radius: 5px;
  --button-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);
  --button-focus: 3px solid #86bbed;
  /* Forms */
  --form-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  --border-hover-color: #0f69af;
  /* Border radius */
  --border-radius: 0.5rem;
  /* Wrapper modifiers */
  --wrapper-wide-max-width: 128rem; /* 2048px */
  --wrapper-narrow-max-width: 92rem; /* 1440px */
  /* Inline SVG - change # to %23 */
  --svg-dropdown-closed: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1.887 1.886 0l6.117 6.226L14.114 0 16 1.887 8.003 10 0 1.887Z" fill="hsl(215, 74%, 37%)" /></svg>');
  --svg-dropdown-open: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8.113 14.114 10 7.997 3.774 1.886 10 0 8.113 7.997 0 16 8.113Z" fill="hsl(215, 74%, 37%)" /></svg>');
  --svg-dropdown-inverse-closed: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1.887 1.886 0l6.117 6.226L14.114 0 16 1.887 8.003 10 0 1.887Z" fill="hsl(0, 0%, 100%)" /></svg>');
  --svg-dropdown-inverse-open: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8.113 14.114 10 7.997 3.774 1.886 10 0 8.113 7.997 0 16 8.113Z" fill="hsl(0, 0%, 100%)" /></svg>');
  --svg-dropdown-nav-closed: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1.887 1.886 0l6.117 6.226L14.114 0 16 1.887 8.003 10 0 1.887Z" fill="hsl(34, 100%, 46%)" /></svg>');
  --svg-dropdown-nav-open: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8.113 14.114 10 7.997 3.774 1.886 10 0 8.113 7.997 0 16 8.113Z" fill="hsl(34, 100%, 46%)" /></svg>');
  --svg-dropdown-nav-inverse-closed: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1.887 1.886 0l6.117 6.226L14.114 0 16 1.887 8.003 10 0 1.887Z" fill="hsl(0, 0%, 100%)" /></svg>');
  --svg-dropdown-nav-inverse-open: url('data:image/svg+xml;utf8,<svg width="16" height="10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 8.113 14.114 10 7.997 3.774 1.886 10 0 8.113 7.997 0 16 8.113Z" fill="hsl(0, 0%, 100%)" /></svg>');
}

/* Breakpoints */
/* Blocks */
/* ==========================================================================*\
   $ _ACCORDION.SCSS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ BASE ACCORDION STYLES
 * $ ACCORDION MODIFIER CLASSES
 * $ PACKAGE CARD ACCORDIONS
 */
/* ==========================================================================*\
   $ BASE ACCORDION STYLES
\* ==========================================================================*/
.accordion > * {
  border-top: 1px solid var(--color-neutral-70);
}

.accordion-trigger {
  border: 0;
  border-radius: 0;
  color: initial;
  font-weight: var(--fw-medium);
  width: 100%;
  text-align: left;
  background: none;
  display: block;
  position: relative;
  outline: none;
  display: block;
  position: relative;
  outline: none;
}
.accordion-trigger:active, .accordion-trigger:focus-visible {
  transform: unset;
  box-shadow: unset;
}

.accordion-title {
  display: flex;
  align-items: center;
  white-space: normal;
  gap: var(--spacing-30);
  word-break: break-word;
}

.accordion-panel {
  padding-top: var(--spacing-20);
  padding-right: var(--spacing-50);
  padding-bottom: var(--spacing-50);
  padding-left: var(--spacing-50);
  word-break: break-word;
  /* Moving this to .accordion-panel for now since .flow by itself adds too much space,
  but spacing is still needed between elements inside the accordion.  */
}
.accordion-panel.flow > * + * {
  --flow-space: 1rem;
}

.accordion-icon svg {
  height: unset;
  fill: currentcolor;
  transition: all 0.2s ease-in;
  transform: rotate(-90deg);
}

.is-open .accordion-icon svg {
  transform: none;
}

/* ==========================================================================*\
   $ ACCORDION MODIFIER CLASSES
\* ==========================================================================*/
.wrapper_border {
  border: 1px solid var(--color-neutral-70);
}
.wrapper_border > *:first-child {
  border-top: 0;
}

.wrapper_border-radius {
  border-radius: var(--border-radius);
}
.wrapper_border-radius *:first-child:nth-last-child(2) .accordion-trigger {
  border-radius: 7px;
}
.wrapper_border-radius *:first-child:nth-last-child(2) .accordion-trigger.is-open {
  border-radius: 7px 7px 0 0;
}
.wrapper_border-radius *:first-child .accordion-trigger {
  border-radius: 7px 7px 0 0;
}
.wrapper_border-radius *:nth-last-child(2) .accordion-trigger {
  border-radius: 0 0 7px 7px;
}
.wrapper_border-radius *:nth-last-child(2) .accordion-trigger.is-open {
  border-radius: 0;
}

.rmPanelBorder .accordion-panel {
  border-top: 0;
}

/**
  * Modifiers used when an accordion is used to show and hide the main description on a page
  * (Example: http://exhdashv7.exh.mysdev.com/7_0/templates/one-off-pages/attendee-invitations.cfm)
  */
.accordion.single-border-bottom > * {
  border-top: 0;
}
.accordion.single-border-bottom .accordion-trigger {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-neutral-70);
}
.accordion.single-border-bottom .accordion-trigger.is-open {
  border-bottom: 0;
}
.accordion.single-border-bottom .accordion-trigger.is-open .accordion-title {
  border-bottom: 0;
}
.accordion.single-border-bottom .accordion-panel {
  padding-top: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-neutral-70);
}
.accordion.single-border-bottom .accordion-trigger:active {
  background: unset;
  color: revert;
}
.accordion.single-border-bottom .accordion-trigger:active svg {
  fill: var(--color-neutral-40);
}
.accordion.single-border-bottom .accordion-trigger:hover {
  background: unset;
  color: var(--color-link);
}
.accordion.single-border-bottom .accordion-trigger svg {
  fill: var(--color-neutral-40);
}

.accordion.inline-padding__none .accordion-trigger {
  padding-left: 0;
  padding-right: 0;
}
.accordion.inline-padding__none .accordion-panel {
  padding-left: 0;
  padding-right: 0;
}

.accordion.page-description .accordion-panel {
  /* Maybe change this to be a typography pattern (seen here: http://exhdashv7.exh.mysdev.com/7_0/templates/one-off-pages/attendee-invitations.cfm */
  color: var(--color-neutral-30);
}

/* ==========================================================================*\
   $ PACKAGE CARD ACCORDIONS
\* ==========================================================================*/
.accordion > .package-card + * {
  margin-top: 32px;
}
.accordion .package-card {
  padding: var(--spacing-40) var(--spacing-50) var(--spacing-40);
}
.accordion .package-card > * {
  border-top: unset;
}
.accordion .package-card .accordion-trigger {
  padding: 0;
}
.accordion .package-card .accordion-trigger:hover {
  background: transparent;
}
.accordion .package-card .package-price-special {
  color: #025e32;
  font-weight: var(--fw-normal);
}
.accordion .package-card .accordion-panel {
  padding: 0 0 16px;
  margin-top: 24px;
}
.accordion .package-card .flow {
  --flow-space: var(--spacing-50);
}
.accordion .package-card .card-package-feature > * {
  flex: 1;
}
@media screen and (min-width: 60em) {
  .accordion .package-card .card-package-feature {
    flex-direction: row;
  }
}
.accordion .package-card input[type=button] {
  font-weight: var(--fw-normal);
}

.accordion-title-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Notes
 * https://css-tricks.com/a-complete-guide-to-links-and-buttons/
 */
/* ARIA
 * Buttons already have role="button", so no need to add it
 */
button,
input[type=submit],
.button,
.button--file::file-selector-button {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-10);
  border-radius: var(--border-radius);
  color: var(--color-neutral-10);
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
  overflow: visible; /* Reset, Edge hides overflow */
  padding: 0.75em 1.5em; /* Use em so button sizes get proportional padding */
  text-align: center;
  text-decoration: none;
  text-transform: none; /* Reset, Firefox inherits text-transform */
  transition: background 250ms ease; /* animate transition for background color changes */
  white-space: nowrap;
  -webkit-appearance: button; /* Reset, Safari otherwise prevents some styles */
}

/*
 * Button States
 */
button:hover,
input[type=submit]:hover,
.button:hover,
.button--file::file-selector-button:hover {
  background: var(--color-neutral-80);
  color: var(--color-neutral-10);
}

button:active,
input[type=submit]:active,
.button:active,
.button--file::file-selector-button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  transform: scale(0.95);
}

/* Button disabled */
button[disabled],
.button.is-disabled,
.button--file[disabled],
.button--file.is-disabled,
.button--file[disabled]::file-selector-button,
.button--file.is-disabled::file-selector-button {
  cursor: auto;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button disabled active */
button[disabled]:active,
.button.is-disabled:active,
.button--file[disabled]::file-selector-button:active,
.button--file.is-disabled::file-selector-button:active {
  box-shadow: none;
  transform: none;
}

/* Button disabled hover */
button[disabled]:hover,
.button.is-disabled:hover,
.button--file[disabled]::file-selector-button:hover,
.button--file.is-disabled::file-selector-button:hover {
  background: inherit;
}

/* Button disabled hover for button--primary since above rule inherits wrong color */
/*
 * Button Primary
 */
.button--primary,
input[type=submit].button--primary {
  color: var(--color-neutral-100);
  border: none;
}

.button--primary:hover {
  color: var(--color-neutral-100);
}

.button--primary:focus {
  outline: var(--button-focus);
}

/*
 * Button Secondary
 */
/*
 * Button Danger
 */
.button--danger {
  background: var(--color-danger-30);
  border: 0;
  color: var(--color-neutral-100);
}

.button--danger:hover {
  background: var(--color-danger-20);
  color: var(--color-neutral-100);
}

.button--danger:focus {
  background: var(--color-danger-10);
  color: var(--color-neutral-100);
}

/*
 * Button Success
 */
.button--success {
  background: var(--color-success-30);
  color: var(--color-neutral-100);
}

.button--success:hover {
  background: var(--color-success-20);
  color: var(--color-neutral-100);
}

.button--success:focus {
  background: var(--color-success-10);
  color: var(--color-neutral-100);
}

/*
 * Button Transparent
 * Used for the close button on fixed alerts (.alert--fixed)
 */
.button--transparent {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--color-link);
}

.button--transparent:hover {
  background: var(--color-button-gradient);
  color: var(--color-link);
}

/*
 * Button Reset
 * Remove basic button styles for buttons that don't look like other .button classes
 */
.button--reset {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}

/*
 * Button Link
 * Remove basic button styles for buttons to make them look similar to an anchor
 */
.button--link {
  padding: 0;
  background-color: transparent;
  border: 0;
  outline: none;
  color: var(--color-link);
}

.button--link:hover {
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-link);
  color: var(--color-link);
}

.button--link:focus {
  background: transparent;
  text-decoration: none;
  outline: var(--button-focus);
  color: var(--color-link);
}

/* Added on https://mapyourshow.atlassian.net/browse/SC-25 */
.button--link:active {
  box-shadow: none;
  transform: none;
}

/*
 * Button Icon
 * For using an icon within a button
 */
.button--icon {
  border-radius: 999px;
  border: none;
  color: var(--color-neutral-30);
  padding: 8px 4px;
}

.button--icon:hover {
  color: var(--color-neutral-10);
}

.button--icon:focus {
  background: var(--color-neutral-100);
  outline: var(--button-focus);
}

.button--icon svg,
.button--icon:hover svg {
  fill: currentColor;
  height: -moz-max-content;
  height: max-content;
  width: -moz-max-content;
  width: max-content;
}

/* Prevent global svg dimentions from overriding */
/* Copied from widgets.css */
.button--icon-flex {
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * Button Icon Only (No Button Text)
 */
.button--icon-only {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: fill 250ms ease;
  /* Modifier for button with icon to make it round */
}
.button--icon-only svg path {
  fill: var(--color-neutral-30);
}
.button--icon-only:hover svg path {
  fill: var(--color-neutral-10);
}
.button--icon-only.round {
  padding: 0;
  border-radius: 50%;
}

/*
 * Button Sizes
 * Font sizes added to _typography.scss
 */
.button--small {
  padding: 0.5em 1em;
}

.button--large {
  padding: 1em 2em;
}

/*
 * Button Position Wrappers
*/
/* Wrap around buttons that need to be positioned of a relatively positioned element within its padding */
.button-action-floating {
  position: absolute;
  padding: inherit;
  /* Modifier for the button's placement */
}
.button-action-floating.top-right {
  padding: 0.5rem;
  right: 0;
  top: 0;
}
.button-action-floating a:hover {
  background-color: var(--ck-color-button-default-hover-background);
}

/*
 * Button Group
 */
.button--group {
  display: flex;
  gap: var(--spacing-30);
  flex-wrap: wrap;
}

.button--group .button:first-child {
  margin-left: 0;
}

.button--group.justify-between {
  justify-content: space-between;
}

/* Necessary targeting to override button--group within form styles (added on https://mapyourshow.atlassian.net/browse/BOOTHSALES-1460) */
.button--group.justify-center {
  justify-content: center;
}

/* Exh dashboard custom styles */
.button--account_info {
  display: flex;
  align-items: center;
  color: var(--color-neutral-10);
}

/* Chevron down */
.button--account_info.is-open::after {
  transform: rotate(180deg);
}

.button--language-selector {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-50);
  color: var(--color-neutral-10);
}

/* Language button in mobile view menu (https://mapyourshow.atlassian.net/browse/EXHV7-513) */
.button--language-selector_mobile {
  display: flex;
  align-items: center;
  color: var(--color-neutral-10);
  font-weight: 700;
}

/*
 * Header Buttons for Tables or cards that can be sorted
 */
/* Example usage: http://exhdashv7.exh.mysdev.com/7_0/templates/upload-show-features/how-do-i-rank.cfm */
.button--header {
  border: 0;
  padding: 0;
  font-size: var(--font-size-7);
  color: unset;
  font-weight: bold;
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 0;
  background: transparent;
}
.button--header:hover {
  background: none;
  text-decoration: underline;
}
.button--header:active {
  box-shadow: none;
  transform: none;
}
.button--header:focus-visible {
  outline-offset: 5px;
}

/* Sorting icons in table header styles inline with the .button--header */
.header__sort-icon {
  display: none;
}

[aria-sort=ascending] .header__sort-icon,
[aria-sort=descending] .header__sort-icon {
  display: inline-block;
  transition: 0.3s ease-in-out;
}

[aria-sort=ascending] .header__sort-icon {
  display: inline-block;
  transform: rotate(180deg);
}

/* Multi line buttons, used in resources section */
.button--multiline_container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--spacing-40);
  margin-bottom: var(--spacing-40);
}

/*
 * http://jira.mysprod.com:8080/browse/CES24-38
 * justify-content center commented out to vertically align text
 */
.button--multiline {
  border: 1px solid var(--color-link);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
  padding: var(--spacing-40);
  text-align: left;
  white-space: break-spaces;
}
.button--multiline .title {
  color: var(--color-link);
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}
.button--multiline .description {
  color: var(--color-neutral-40);
  font-size: var(--font-size-7);
  font-weight: 400;
  margin-top: var(--spacing-20);
  overflow-wrap: anywhere;
}

/* Upload File Button (Without Cropping Tool)
 * Example Use Case Here:
 * http://exhdashv7.exh.mysdev.com/7_0/datacollection:main/displayForm?formname=press_release&exhid=228&releaseid=32
*/
.button--file {
  cursor: pointer;
}
.button--file:focus-visible {
  outline: none;
}
.button--file:focus-visible::file-selector-button {
  outline: 3px solid #86bbed;
  outline-offset: -3px;
}
.button--file::file-selector-button {
  margin-right: 0.563rem;
}

.form--wrapper input[type=file].button--file {
  padding-top: 0.563rem;
  padding-bottom: 0.563rem;
  padding-left: 0;
  padding-right: var(--spacing-20);
}
.form--wrapper input[type=file].button--file:invalid {
  padding-left: var(--spacing-20);
}

/*
 * Exhibitor button
 * https://mapyourshow.atlassian.net/browse/EXH-667
 * Modifier that allows text to wrap, used on select exhibitors page exhibitor buttons
 */
.button--text-wrap {
  white-space: normal;
}

/* IntroJS button overrides
 * (https://mapyourshow.atlassian.net/browse/SC-121)
 * Example Use Case Here:
 * https://imts24.exh.mysdev.com/7_0/leads:main/report
*/
/* Nested styles used so overrides work on IntoJS styles */
.introjs-tooltipbuttons .introjs-prevbutton,
.introjs-tooltipbuttons .introjs-nextbutton {
  background: var(--color-accent-30);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: var(--border-radius);
  color: var(--color-neutral-100);
  cursor: pointer;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
  overflow: visible;
  padding: 0.75em 1.5em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  text-shadow: none;
  transition: background 250ms ease;
  white-space: nowrap;
}
.introjs-tooltipbuttons .introjs-prevbutton:hover,
.introjs-tooltipbuttons .introjs-nextbutton:hover {
  background-color: var(--color-accent-20);
  background: var(--color-accent-20);
  border-color: var(--color-accent-20);
  color: var(--color-neutral-100);
  outline: none;
  text-decoration: none;
}
.introjs-tooltipbuttons .introjs-prevbutton:focus,
.introjs-tooltipbuttons .introjs-nextbutton:focus {
  background-color: var(--color-accent-30);
  background: var(--color-accent-30);
  border-color: var(--color-accent-20);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  color: var(--color-neutral-100);
  outline: none;
  text-decoration: none;
  transform: scale(0.95);
}
.introjs-tooltipbuttons .introjs-prevbutton:active,
.introjs-tooltipbuttons .introjs-nextbutton:active {
  background-color: var(--color-accent-30);
  background: var(--color-accent-30);
  border: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  color: var(--color-neutral-100);
  outline: none;
  text-decoration: none;
  transform: scale(0.95);
}

/* ==========================================================================*\
   $ ACCELERATOR BUTTON
\* ==========================================================================*/
.button--accelerator {
  background: var(--color-brand-90);
  color: var(--color-brand-20);
  padding-inline: var(--spacing-40);
  white-space: normal; /* reset white-space from base button styles to ensure svg icons stay on the button */
  justify-content: space-between;
  /* copied from .button--icon-flex to cleanup markup */
  border: 2px solid rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  gap: 8px;
  /* allows for additional icon next to the button label */
  /* override :hover styles from the base and .button--icon-flex */
}
.button--accelerator .button__icon-label {
  display: flex;
  gap: var(--spacing-20);
  align-items: center;
}
.button--accelerator svg {
  flex-shrink: 0;
}
.button--accelerator svg.arrow {
  transition: 0.3s;
  transform: translateX(0);
}
.button--accelerator svg path {
  fill: var(--color-brand-20);
}
.button--accelerator.button:hover {
  background: var(--color-brand-80);
  color: var(--color-brand-20);
}
.button--accelerator.button:hover .arrow:last-child {
  transform: translateX(3px);
}
.button--accelerator:focus-visible {
  outline-color: var(--Form-Focus, #005fcc);
}
.button--accelerator:focus-visible .arrow:last-child {
  transform: translateX(3px);
}

.accelerator-individual-lead {
  /* RESET BUTTON LINK STYLES TO BETTER MATCH LINKS = MOVE TO _LINKS PARTIAL? */
}
.accelerator-individual-lead .button--link {
  border-radius: 0;
}
.accelerator-individual-lead .button--link:focus {
  text-decoration: unset;
}
.accelerator-individual-lead .button--link:focus:hover {
  text-decoration: underline;
}
.accelerator-individual-lead .button--link:active {
  transform: none;
  box-shadow: none;
}
.accelerator-individual-lead .button--link:focus-visible {
  outline-offset: 1px;
}

/* ==========================================================================*\
   $ ACCELERATOR BANNER
\* ==========================================================================*/
@supports (contain: inline-size) {
  .accelerator--banner {
    container-type: inline-size;
    container-name: accelerator-banner-container;
  }
}
/* Use .accelerator--banner with .o-HeadingActionBar to make this work */
.accelerator--banner.o-HeadingActionBar {
  padding-inline: var(--spacing-60);
  padding-block: var(--spacing-50);
  border-radius: var(--border-radius);
  color: var(--color-neutral-80);
  gap: var(--spacing-50);
}

/* Unique styles to .accelerator--banner */
.accelerator--banner {
  background: var(--color-brand-20);
  gap: 1rem;
}
.accelerator--banner .content-wrapper {
  flex: 1 1 69%;
}
.accelerator--banner .content-wrapper > * + * {
  margin-block-start: 1rem;
}
.accelerator--banner .title {
  font-size: var(--font-size-4);
  font-style: normal;
  font-weight: 700;
}
.accelerator--banner .description {
  font-size: var(--font-size-5);
}

@container accelerator-banner-container (max-width: 407.5px) {
  .accelerator--banner .button--accelerator {
    flex-grow: 1;
  }
}
@supports not (contain: inline-size) {
  @media screen and (max-width: 30em) {
    .accelerator--banner .button--accelerator {
      flex-grow: 1;
    }
  }
}
/* ==========================================================================*\
   $ ACCELERATOR NOTIFICATION
\* ==========================================================================*/
#alertNotificationAccelerator {
  position: fixed;
  z-index: 20;
  right: 32px;
  bottom: 62px;
}

.accelerator--notification {
  /* Copied styles from .alert--notification */
  display: flex;
  flex-direction: column;
  margin: 0;
  inset-inline-start: unset;
  box-shadow: 0px 53px 21px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.05), 0px 13px 13px rgba(0, 0, 0, 0.09), 0px 3px 7px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  font-size: var(--font-size-7);
  border: none;
  /* New Accelerator styles */
  background: var(--color-brand-20);
  color: var(--color-neutral-80);
  padding-block: calc(var(--spacing-70) - 8px);
  padding-inline: var(--spacing-60);
  width: 403px;
  max-width: calc(100vw - 79px);
  /* border-radius: var(--border-radius); */
  border-radius: var(--spacing-50); /* check if this border radius is hard set or based on the value of --border-radius */
  position: relative; /* allow for positioning close button differently than on original .alert--notification */
  /* Close button */
}
.accelerator--notification .button--primary {
  background: var(--color-brand-90, #b6d3fb);
  color: var(--color-brand-20);
}
.accelerator--notification .button--primary svg path {
  fill: var(--color-brand-20);
}
.accelerator--notification .button--transparent svg path {
  fill: var(--color-neutral-90); /* keep icon visible with dark color background */
}
.accelerator--notification [aria-label=close] {
  padding: 0.5rem;
  position: relative;
  top: -20px;
  left: 10px;
}
.accelerator--notification .content-wrapper {
  margin-bottom: var(--spacing-60);
  display: flex;
  justify-content: space-between;
}
.accelerator--notification .title {
  font-size: var(--spacing-50);
  letter-spacing: normal;
  color: var(--color-neutral-90);
}
.accelerator--notification .description {
  margin-block-start: var(--spacing-20);
}
.accelerator--notification .description > * + * {
  margin-block-start: 1rem;
}
.accelerator--notification p {
  font-size: var(--font-size-5);
  letter-spacing: normal;
}

/* ==========================================================================*\
   $ ACCELERATOR LANDING PAGE
\* ==========================================================================*/
.accelerator-landing-page.flow {
  --flow-space: 3rem;
}

.accelerator-landing-page h1, .accelerator-landing-page h2 {
  max-width: unset;
}
.accelerator-landing-page .button--large {
  font-size: var(--font-size-5);
}

.content-top {
  --column-gap: var(--spacing-80);
}
.content-top.media {
  flex-wrap: wrap;
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  row-gap: var(--spacing-70);
}
.content-top .media-body {
  flex-basis: calc(60% - var(--column-gap));
}
.content-top .media-img {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  overflow: hidden;
  flex: 1 1 calc(33% - var(--column-gap));
  margin-right: 0;
  min-width: min(300px, 100%);
}
.content-top .media-img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  background: lightgray 50%/cover no-repeat;
  height: 100%;
  width: 100%;
}

.content-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: var(--spacing-60);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-60);
}

.features-grid {
  --gap-size: var(--spacing-70);
  --column-size: calc(50% - var(--gap-size));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(249px, var(--column-size)), 1fr));
  gap: var(--gap-size);
  width: 100%;
}
.features-grid p {
  font-size: var(--font-size-5);
}
.features-grid svg {
  fill: var(--color-brand-50);
}

/* ==========================================================================*\
   $ ACCELERATOR INDIVIDUAL LEAD REPORT
\* ==========================================================================*/
/* FLOW TWEAK */
.accelerator-individual-lead.flow {
  --flow-space: clamp(2rem, -1.235rem + 4.706vw, 3rem);
}

/* Keep margin between breadcrumbs and first element on page as 2rem instead of 3rem coming from .flow */
.accelerator-individual-lead .list--breadcrumbs + * {
  margin-block-start: 2rem;
}
.accelerator-individual-lead .section-title {
  font-size: var(--font-size-5);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--spacing-40);
  color: var(--color-neutral-10);
}

/* TOP SECTION: LEAD DETAILS */
@supports (contain: inline-size) {
  .lead-contact-info {
    container-type: inline-size;
    container-name: lead-contact-info-container;
  }
}
.lead-details .lead-interests ul {
  padding-left: var(--spacing-60);
}
.lead-details .lead-interests li {
  margin-top: unset;
}

.lead-details-card {
  --lead-img-width: 96px;
  --lead-img-height: 96px;
  /* Sidebar column for main bio details section */
  /* 
   * https://mapyourshow.atlassian.net/browse/SC-88
   * Allow upgrade to lead grade
   */
}
.lead-details-card.card {
  padding: var(--spacing-60);
  padding-block-end: 1.25rem;
}
.lead-details-card.card .lead-details {
  padding-block-end: var(--spacing-60);
  color: var(--color-neutral-20);
  gap: clamp(2rem, -4.471rem + 9.412vw, 4rem);
}
.lead-details-card .lead-details-sidebar {
  display: flex;
  gap: var(--spacing-50);
  flex-direction: column;
  align-items: center;
  margin-right: unset;
  flex: 1 1 320px; /* was 212px */
  max-width: 320px; /* was 260px */
  margin-inline: auto;
}
.lead-details-card .lead-details-sidebar hr {
  width: 100%;
  margin-block: 0;
}
.lead-details-card .lead-details-sidebar .button--icon-flex {
  width: 100%;
  justify-content: center;
}
.lead-details-card .lead-details-sidebar .button--icon-flex svg {
  fill: var(--color-neutral-100);
}
.lead-details-card .lead-details-body {
  flex-basis: 70%;
}
.lead-details-card .lead-details-body hr {
  background-color: rgba(0, 0, 0, 0.1);
}
.lead-details-card .lead-bio p,
.lead-details-card .lead-interests li {
  max-width: 80ch;
}
.lead-details-card .lead-img {
  width: var(--lead-img-width);
  height: var(--lead-img-height);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: var(--border-radius);
}
.lead-details-card .no-img-placeholder {
  width: var(--lead-img-width);
  height: var(--lead-img-height);
  border-radius: var(--border-radius);
}
.lead-details-card .lead-details-info {
  --flow-space: 0.5rem;
  text-align: center;
}
.lead-details-card .lead-details-info .name {
  font-size: var(--font-size-4);
  color: var(--color-neutral-10);
}
.lead-details-card .lead-details-info .title {
  color: var(--color-neutral-40);
  line-height: 1.4;
}
.lead-details-card .lead-details-info .contact-info {
  word-break: break-word;
  line-height: 1.4;
}
.lead-details-card .lead-details-info .phone-number,
.lead-details-card .lead-details-info .contact-info {
  --flow-space: 0.1em;
}
.lead-details-card .lead-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-20);
}
.lead-details-card .lead-contact-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-30);
  width: 100%;
}
.lead-details-card .choose-salesperson-wrapper {
  max-width: 218px;
}

@container lead-contact-info-container (max-width: 668.5px) {
  .lead-details-card .lead-details {
    flex-direction: column;
  }
  .lead-details {
    width: 100%;
  }
}
@supports not (contain: inline-size) {
  @media screen and (max-width: 1099px) {
    .lead-details-card .lead-details {
      flex-direction: column;
    }
    .lead-details {
      width: 100%;
    }
  }
}
@media screen and (max-width: 744px) {
  .lead-contact-wrapper {
    width: 100%;
  }
  .lead-contact-wrapper .button {
    width: 100%;
    justify-content: center;
  }
  /* Choose Salesperson <select> Element */
  .lead-details-card .choose-salesperson-wrapper {
    width: 100%;
    max-width: unset;
  }
}
/* SAVE NOTE SECTION */
.lead-notes {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-block-start: var(--spacing-60);
}
.lead-notes label {
  color: var(--color-neutral-10);
}

/* LEAD ACCORDION SECTION */
.lead-accordion-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-50);
  margin-block-start: var(--spacing-30);
}

/* SAVED NOTES ACCORDION */
.saved-notes-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-50);
}

.saved-note {
  color: var(--color-neutral-20);
}
.saved-note .title {
  color: var(--color-neutral-10);
  font-weight: var(--fw-bold);
}
.saved-note textarea.note {
  color: var(--color-neutral-20);
}

/* Specific tweaks for the button--link to ensure longer namges can wrap and aling properly */
#select-salesperson-btn {
  white-space: normal;
  text-align: left;
}

/* ACCORDION OVERRIDES */
.lead-details-card {
  /* Adjust how icon rotates for the lead-accordion.cfm component */
  /* Tweaks to table styles */
}
.lead-details-card .accordion > * {
  border-top: none;
}
.lead-details-card .accordion-title {
  font-weight: var(--fw-bold);
  gap: var(--spacing-10);
}
.lead-details-card .accordion-trigger:focus-visible {
  z-index: 1;
}
.lead-details-card .accordion-panel {
  padding-block: 0;
}
.lead-details-card .accordion-icon svg {
  transform: rotate(180deg);
}
.lead-details-card .is-open .accordion-icon svg {
  transform: none;
}
.lead-details-card .table--specs {
  display: table;
  table-layout: auto;
}
.lead-details-card .table--responsive {
  max-width: none;
}
.lead-details-card .table--scroll {
  border-radius: 0;
}
.lead-details-card.card th, .lead-details-card.card td {
  padding: var(--spacing-20) var(--spacing-30);
}

/* EMAILS ACCORDION */
.previous-emails-modal .modal-container {
  padding-block-end: 40px;
  position: relative;
}
.previous-emails-modal .modal-container .accordion-trigger {
  padding-inline: 0;
  font-weight: var(--fw-bold);
}
.previous-emails-modal .modal-container .accordion-panel {
  color: var(--color-neutral-10);
}

/* Ensure table columsn are split 50/50 and that table--scroll styles don't kick in until small screens */
@media screen and (min-width: 30.063em) {
  .lead-details-card .table--specs {
    white-space: normal;
  }
  .lead-details-card .accordion-panel table .table-key {
    width: 50%;
  }
}
/* COMPANY INFO */
.badge-text {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-align: center;
  letter-spacing: 0.05em;
}

/* Modifier for base <dl> styles in _lists.scss - move to other stylesheet? */
.description-list__alt {
  color: var(--color-neutral-10);
}
.description-list__alt > .title {
  font-size: var(--font-size-6);
  text-transform: capitalize;
}
.description-list__alt > .title:not(:first-child) {
  margin-block-start: var(--spacing-60);
}

@supports (contain: inline-size) {
  .lead-company-info {
    container-type: inline-size;
    container-name: lead-company-info-container;
  }
}
.company-info {
  display: flex;
  -moz-column-gap: var(--spacing-70);
       column-gap: var(--spacing-70);
  row-gap: var(--spacing-60);
  justify-content: space-between;
}

@container lead-company-info-container (max-width: 683px) {
  .company-info {
    flex-direction: column;
  }
}
@supports not (contain: inline-size) {
  @media screen and (max-width: 1100px) {
    .company-info {
      flex-wrap: wrap;
    }
  }
}
.company-info-wrapper.card {
  padding: var(--spacing-60);
  color: var(--color-neutral-20);
}
.company-info-wrapper .flow {
  --flow-space: var(--spacing-50);
}
.company-info-wrapper .company-description {
  -moz-column-gap: var(--spacing-60);
       column-gap: var(--spacing-60);
  row-gap: var(--spacing-40);
  flex-wrap: wrap;
  padding-block-end: var(--spacing-50);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.company-info-wrapper .company-description .media-img {
  max-height: 122px;
  width: auto;
  border-radius: var(--border-radius);
  margin-right: 0;
  padding: 1rem;
}
.company-info-wrapper .company-description .media-body {
  flex-basis: 75%;
}
.company-info-wrapper .company-description .title {
  color: var(--color-neutral-10);
}
.company-info-wrapper .company-info--content .title {
  letter-spacing: normal; /* overwrite default dt style */
}
.company-info-wrapper .interests {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-block-end: var(--spacing-50);
}
.company-info-wrapper .interests .title-wrapper {
  display: flex;
  gap: var(--spacing-20);
  align-items: center;
}
.company-info-wrapper .interests .title-wrapper svg {
  flex-shrink: 0;
}
.company-info-wrapper .interests .title-wrapper svg path {
  fill: var(--color-brand-30);
}
.company-info-wrapper .interests .title {
  text-transform: uppercase;
  font-size: var(--font-size-6);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-10);
  letter-spacing: 0.05em;
}

/* COMPETITOR CARDS */
.leads-sidebar {
  flex: 0 0 290px;
}
.leads-sidebar.flow {
  --flow-space: var(--spacing-60);
}

.competitor-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}
.competitor-cards-wrapper .card-wrapper {
  width: min(100%, 300px);
}

.competitor-card {
  /* Allow long number values to wrap if needed */
}
.competitor-card.card {
  color: var(--color-neutral-10);
}
.competitor-card .split-pair {
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-50);
  flex-wrap: nowrap;
}
.competitor-card dt {
  font-weight: 600;
  font-size: var(--font-size-7);
}
.competitor-card dl {
  font-size: var(--font-size-7);
}
.competitor-card .data-col dd {
  overflow-wrap: anywhere;
}
.competitor-card .title {
  font-size: var(--font-size-5);
  margin-block-start: 0;
  margin-block-end: var(--spacing-30);
}

/* RELATED EMPLOYEE CARDS */
.additional-leads .section-title,
.additional-contacts .section-title {
  margin-block-end: var(--spacing-30);
  text-transform: uppercase;
  letter-spacing: 0.32px;
  font-size: var(--font-size-6);
  letter-spacing: 0.05em;
}

@supports (contain: inline-size) {
  .leads-cards-wrapper {
    container-type: inline-size;
    container-name: leads-cards-wrapper-container;
  }
}
.leads-cards-wrapper {
  --gap-size: var(--spacing-30);
  --column-size: calc(33% - var(--gap-size));
  display: grid;
  /* NOTE: Tweak minmax() value once we get some screens of different viewport sizes of the page */
  grid-template-columns: repeat(auto-fill, minmax(max(300px, var(--column-size)), 1fr));
  gap: var(--gap-size);
}
.leads-cards-wrapper .card-wrapper {
  height: 100%;
}
.leads-cards-wrapper a.card-wrapper:hover {
  text-decoration: none;
  background: var(--color-link);
}
.leads-cards-wrapper a.card-wrapper:hover .title {
  text-decoration: underline;
  color: var(--color-neutral-10);
}
.leads-cards-wrapper .card {
  padding: var(--spacing-40);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--spacing-30);
  align-items: flex-start;
  height: 100%;
}
.leads-cards-wrapper .card .title {
  max-width: unset;
  font-size: var(--font-size-6);
  color: var(--color-neutral-10);
}
.leads-cards-wrapper .card .title:hover {
  text-decoration-color: var(--color-neutral-10);
}
.leads-cards-wrapper .card .subtitle {
  margin-block-start: var(--spacing-10);
  max-width: unset;
  line-height: 1.4;
}

.additional-leads .leads-cards-wrapper .media {
  flex-basis: 100%;
  align-items: center;
  width: 100%;
}
.additional-leads .leads-cards-wrapper .media-img {
  height: unset;
  -o-object-fit: unset;
     object-fit: unset;
  margin-right: unset;
  border-radius: unset;
  flex: unset;
}

/* 
 * tweak max-width to allow more room for the email address 
 * .mw8 = 64rem (1024px), 87.5 (1400px), .mw9 = 96rem (1536px)
 * use a width between 8 and 9
 */
.accelerator-individual-lead {
  --mw8: 87.5rem;
}
.accelerator-individual-lead .list--pipes {
  line-height: normal;
}
.accelerator-individual-lead .list--pipes li {
  font-size: var(--font-size-7);
}
.accelerator-individual-lead .list--pipes li:after {
  color: rgba(0, 0, 0, 0.2);
}
.accelerator-individual-lead .list--pipes > li:not(:last-child)::after {
  margin-inline: var(--spacing-30);
  color: hsla(0, 0%, 0%, 0.1);
  font-size: var(--font-size-7);
}

/* Limit sizing of related employee cards when in a single column */
@container leads-cards-wrapper-container (max-width: 611px) {
  .leads-cards-wrapper .card-wrapper {
    width: min(300px, 100vw - 4rem);
    max-width: 100cqw;
  }
}
/* Fix for older browers to limit sizing of related employee cards when in a single column */
@supports not (contain: inline-size) {
  @media screen and (max-width: 1100px) {
    .leads-cards-wrapper .card-wrapper {
      max-width: min(456px, 100vw - 4rem);
      max-width: 60vw;
    }
  }
}
/* REPORT ISSUE */
.report-issue {
  --flow-space: var(--spacing-30);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-20);
  align-items: center;
}
.report-issue .button--transparent:hover {
  background: var(--color-neutral-100);
}

.accelerator-individual-lead .report-issue .section-title {
  margin-block-end: 0;
}

/* ALERT FEEDBACK */
.alert--wrapper__sticky {
  position: sticky;
  height: 0;
  overflow: visible;
  bottom: 0;
  /* OVERRIDE STYLES IN _FEEDBACK.SCSS */
}
.alert--wrapper__sticky .alert--inline_fit {
  display: block;
  position: fixed;
  bottom: 26px;
}

/* Hide score filters in the sidebar on smaller screens */
/* Change the border-radius of the selected filter in the sidebar */
@media screen and (max-width: 959px) {
  .salesAcceleratorFilters--large {
    display: none;
  }
  aside .l-sidebar_nav .is-selected:has(> form) a {
    border-radius: var(--border-radius);
  }
}
/* Hide score filters above leads datatable when scores in sidebar are visible */
@media screen and (min-width: 960px) {
  .salesAcceleratorFilters--small {
    display: none;
  }
}
/* ==========================================================================*\
   $ CARDS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ CARD BASE STYLES
 * $ CARD TRANSPARENT
 * $ CARD TABLES
 * $ CARD FEATURE IMAGE
 * $ CONTACT CARD (MODIFIERS)
 * $ RESOURCES CARD (MODIFIERS)
 * $ COPY PACKAGE CARD (MODIFIERS)
 * $ NOTIFICATION CARD (MODIFIERS)
 */
/* ==========================================================================*\
   $ CARD BASE STYLES
\* ==========================================================================*/
/**
 * Note: Card styles copied from widgets.scss
 */
/* Wraps around entire card & sets gradient background for the gradient border */
.card-wrapper {
  border-radius: var(--border-radius);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  height: -moz-max-content;
  height: max-content;
}

/* Main .card element minus the gradient border */
.card {
  width: 100%;
  height: auto;
  background-color: var(--color-neutral-100);
  padding: 16px 24px;
  /* SETUP FOR BORDER GRADIENT */
  --border-gradient-size: 1px;
  background-clip: padding-box;
  /* border here removes 1px of border around the inner div to reveal the gradient background of the .card-wrapper */
  border: solid var(--border-gradient-size) transparent;
  /* Should inherit the border-radius set on the .card-wrapper, which is 4px; */
  border-radius: var(--border-radius);
  position: relative;
  color: var(--color-neutral-30);
}

/* ==========================================================================*\
   $ CARD TRANSPARENT
\* ==========================================================================*/
/** Used to maintain a card layout but without
 * the background color, such as on the Search results page
 * NOTE: You don't need '.card-wrapper with .card--transparent'
 */
.card--transparent {
  background: transparent;
  margin-bottom: var(--spacing-20);
  padding-left: 0;
  padding-right: 0;
}
.card--transparent .title {
  font-family: var(--font-display);
}
.card--transparent .description {
  font-size: var(--font-size-7);
  color: var(--color-neutral-30);
}

/* ==========================================================================*\
   $ CARD TABLES
\* ==========================================================================*/
.card td,
.card th {
  border-bottom: 0;
  padding: 12px 0;
}
.card tbody tr {
  border-top: 1px solid #eeeeee;
}
.card tr > * + * {
  padding-left: 0.75rem;
}

/* Setting column width on Documents table: http://exhdashv7.exh.mysdev.com/7_0/templates/one-off-pages/documents.cfm */
#documents col:first-child {
  width: 66%;
  max-width: 648px;
}

/* ==========================================================================*\
   $ CARD FEATURE IMAGE
\* ==========================================================================*/
/* This gets added to the .card-wrapper element since it affects the layout at the .card-wrapper level */
.card--feature-image {
  height: auto;
  display: flex;
  flex-direction: column;
}
.card--feature-image img {
  background-color: white;
  border-radius: 8px 8px 0 0;
}
.card--feature-image .card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--spacing-20);
}
.card--feature-image .subtitle {
  font-size: var(--font-size-7);
  margin-bottom: var(--spacing-30);
  color: var(--color-black);
}
.card--feature-image .title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-10);
  color: var(--color-black);
}
.card--feature-image .description-container {
  margin-bottom: var(--spacing-40);
}
.card--feature-image .description {
  font-size: var(--font-size-7);
  color: var(--color-neutral-30);
  flex: 1;
}

/* ==========================================================================*\
   $ CONTACT CARD (MODIFIERS)
\* ==========================================================================*/
.online-contacts {
  /* modify column sizing for .flex--auto-stretch */
  --flex-col-sizing: 0 1 341px;
}

/* Instructions: Wrap inside of .card-wrapper to get
gradient border */
.contact-card {
  color: var(--color-neutral-20);
  height: 100%;
  /* Media Layout Changes for the contact card */
  /* Title and subtitle for contact's name and title */
  /* Keep email address from making card larger */
  /* Key Pair Style Changes from base
  Caffeine styles */
}
.contact-card p {
  font-size: var(--font-size-7);
}
.contact-card a {
  text-decoration: none;
}
.contact-card .media {
  gap: var(--spacing-30);
}
.contact-card .media-img {
  /* flex for ensure image doesn't change aspect ratio/size
  of card on smaller screens */
  flex: 0 0 64px;
  height: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 0;
  border-radius: 50%;
  overflow: hidden;
}
.contact-card .title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  margin-bottom: 0;
  max-width: 13ch;
  word-wrap: break-word;
}
.contact-card .subtitle {
  color: var(--color-neutral-40);
  font-size: var(--font-size-7);
  margin-top: 8px;
  max-width: 20ch;
}
.contact-card .email {
  overflow-wrap: anywhere;
}
.contact-card .data-pair {
  /* add flex and align-items to ensure flex properties don't go away at default viewport of original .data-pair styles */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* tie gap value to variable, so it can also be used for the flex-basis */
  --col-gap: 2rem;
  -moz-column-gap: var(--col-gap);
       column-gap: var(--col-gap);
  row-gap: 0.25rem;
  border-bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  min-height: unset;
}
.contact-card .data-pair > .data-pair--key, .contact-card .data-pair > .data-pair--value {
  flex-basis: calc(50% - var(--col-gap) / 2); /* set flex-basis to 50% of wrapper width minus the gap space */
}
.contact-card .data-pair--key {
  margin-right: 0;
  width: unset;
}

/* Placeholder for image when no contact image is provided */
.no-img-placeholder {
  color: white;
  font-size: 25px;
  font-weight: 600;
  width: 64px;
  height: 64px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================*\
   $ RESOURCES CARD (MODIFIERS)
\* ==========================================================================*/
#resourcesCards .card-wrapper {
  margin-bottom: var(--spacing-20);
}
#resourcesCards .media {
  align-items: center;
}
#resourcesCards .media-img {
  flex: 1;
}
#resourcesCards .media-body {
  flex: initial;
}
#resourcesCards .title {
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-20);
}
#resourcesCards .description {
  color: var(--color-neutral-30);
  font-size: var(--font-size-7);
}

/* ==========================================================================*\
   $ COPY PACKAGE CARD (MODIFIERS)
\* ==========================================================================*/
#copy-package-cards {
  margin-top: var(--spacing-50);
  margin-bottom: var(--spacing-50);
  --auto-grid-min-size: 300px;
  --grid-gap: 1.5rem;
  /* Overriding grid layout class, specific to this use case */
}
#copy-package-cards .grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(min-content, 288px));
}
/* ==========================================================================*\
   $ NOTIFICATION CARD (MODIFIERS)
\* ==========================================================================*/
#notification-cards .card {
  border-radius: 0;
}
#notification-cards .card--transparent {
  border-bottom: 1px solid var(--color-neutral-70);
}
#notification-cards .media {
  display: flex;
  justify-content: space-between;
}
#notification-cards .media-img {
  flex: 1;
}
#notification-cards .media-img_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-20);
  flex-wrap: wrap;
}
#notification-cards .media-body {
  flex: initial;
}
#notification-cards .title {
  font-weight: var(--fw-bold);
}
#notification-cards .publisheddate {
  color: var(--color-neutral-30);
}
#notification-cards .description {
  margin-top: var(--spacing-40);
  word-break: break-word;
}

/*
 * Alerts/Dialog
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
 */
.alert {
  background-color: var(--color-info-90);
  color: var(--color-info-10);
  border: none; /* is added to <dialog> by default */
  border-radius: var(--border-radius);
  display: block;
  font-size: var(--font-size-7);
  padding: var(--spacing-30);
  position: static; /* position is added to <dialog> by default */
  max-width: 800px;
  margin-top: var(--spacing-40);
  margin-bottom: var(--spacing-40);
  margin-left: 0;
  margin-right: 0;
}
.alert .button {
  margin: 0;
  padding: 0.5rem;
}
.alert svg {
  fill: var(--color-info-10);
}

/* Changed name on https://mapyourshow.atlassian.net/browse/EXH-679 */
.alert--inline_fit {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
}

/* Added on https://mapyourshow.atlassian.net/browse/EXH-679 */
.alert--inline_auto {
  display: inline-block;
  width: auto;
}

/* Make alert link underlines use currentColor */
.alert a {
  --color-link: currentColor;
}

.alert .title {
  font-family: var(--font-display);
  font-weight: bold;
}

.alert p {
  font-size: inherit;
}

.alert--info,
.info {
  background-color: var(--color-info-90);
  color: var(--color-info-10);
}
.alert--info svg,
.info svg {
  fill: currentColor;
}

.alert--error,
.error {
  background-color: var(--color-danger-90);
  color: var(--color-danger-10);
}
.alert--error svg,
.error svg {
  fill: var(--color-danger-10);
}

.alert--error .media-img {
  fill: currentColor;
}

.alert--success {
  background-color: var(--color-success-90);
  color: var(--color-success-10);
}
.alert--success svg {
  fill: var(--color-success-10);
}

.alert--warning {
  background-color: var(--color-warning-90);
  color: var(--color-warning-10);
}
.alert--warning svg {
  fill: currentColor;
}

/* Set the SVG icons size */
.alert .media-img {
  font-size: var(--font-size-4);
}

.alert .media-body {
  --flow-space: 0.5rem;
}

.alert--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.alert--fixed.alert--error {
  font-weight: 700;
}

/* Remove button padding, it's already on .alert */
.alert--fixed > button {
  padding: 0;
}

/* Position sticky alert, lives within markup context, not stuck to the top of the viewport (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1439) */
.alert--sticky {
  position: sticky;
  top: 1rem;
  z-index: 100;
}

/* Exisiting class in messagedisplay_exh.cfm to hide alerts */
.alert.hidden {
  display: none;
}

/* Notification alert */
.alert--notification {
  background-color: var(--color-neutral-100);
  border-radius: var(--border-radius);
  width: auto;
  max-width: 350px;
  min-width: 330px;
  color: var(--color-neutral-10);
  padding: var(--spacing-40);
  margin: 0;
  inset-inline-start: unset;
  box-shadow: 0px 53px 21px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.05), 0px 13px 13px rgba(0, 0, 0, 0.09), 0px 3px 7px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  font-size: var(--font-size-7);
  border: none;
  max-height: 55vh;
  overflow-y: auto;
}
.alert--notification .title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.alert--notification .media {
  margin-bottom: var(--spacing-40);
}
.alert--notification .button--primary {
  width: 100%;
  padding: 0.75em 1.5em;
}
.alert--notification .button {
  margin: 0;
  padding: 0.5rem;
}
.alert--notification p {
  font-size: inherit;
  word-break: break-word;
}
.alert--notification svg {
  fill: var(--color-info-10);
}

/* ERC-wide notifications */
#alertNotificationNav {
  position: absolute;
  top: 65px;
  right: 0px;
  z-index: 20;
}

/*
 * Badges
 */
.badge {
  background-color: var(--color-info-90);
  border-radius: var(--border-radius);
  font-size: 0.938rem;
  font-weight: 500;
  padding: 5px 10px;
  display: inline-block;
}
.badge .button {
  padding: 0;
  margin: 0;
  vertical-align: middle;
  margin-left: 8px;
}
.badge svg {
  height: 12px;
  width: 12px;
}

/* Used to vertically align icon and text */
.badge-inner {
  display: flex;
}

.badge--info {
  background-color: var(--color-info-90);
  color: var(--color-info-10);
}
.badge--info svg {
  fill: var(--color-info-10);
}

.badge--success {
  background-color: var(--color-success-90);
  color: var(--color-success-10);
}
.badge--success svg {
  fill: var(--color-success-10);
}

.badge--error {
  background-color: var(--color-danger-90);
  color: var(--color-danger-10);
}
.badge--error svg {
  fill: var(--color-danger-10);
}

.badge--warning {
  background-color: var(--color-warning-90);
  color: var(--color-warning-10);
}
.badge--warning svg {
  fill: var(--color-warning-10);
}

/**
 * Copied from /Volumes/MYSData/Development/Dev/MYS/admin.mapyourshow.com/wwwroot/6_0/assets/_sass/_objects.scss:
 * Alt badge styles with the dot
 */
.badge-status {
  font-size: var(--font-size-7);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  flex: 1 1 50%;
  /* tweak to match height of the container around the text match the height of the text, which has better vertical alignment the badge in :before */
  line-height: 1;
  /* Modifiers to add color to .badge-alt */
}
.badge-status:before {
  content: "";
  border-radius: 50%;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.badge-status.type--10:before {
  background: var(--color-data-10);
}
.badge-status.type--20:before {
  background: var(--color-data-20);
}
.badge-status.type--30:before {
  background: var(--color-data-30);
}
.badge-status.type--40:before {
  background: var(--color-data-40);
}
.badge-status.type--50:before {
  background: var(--color-data-50);
}

/**
 * TABLE OF CONTENTS
 *
 * Labels, Legend
 * Form Hints
 * Required Fields
 * Input, Textarea
 * Input File Upload
 * Input File Upload with Preview
 * Placeholder Text
 * Select
 * Checkbox, Radio
 * Error, Invalid
 * Button Group
 * Hybrid Form
 * Marker
 * Form Group Title / Border
 * Form Search
 * Focus styles
 * Read Only
 * Terms & Conditions
 * Form Overrides
 * Vue3datepicker Overrides
 * Vue multiselect Overrides
 */
.form-section-title {
  font-family: var(--font-display);
  line-height: 1.5;
  font-style: normal;
  font-weight: 700;
  padding-bottom: var(--spacing-10);
  max-width: none;
  text-transform: uppercase;
  /* Temp tweak for Vue components since they place user-generated headings inside wrappers that have the .form-section-title class;
     this targets those headings to still apply those styles: */
}
.form-section-title > h1, .form-section-title > h2, .form-section-title > h3, .form-section-title > h4, .form-section-title > h5, .form-section-title > h6 {
  font-family: var(--font-display);
  line-height: 1.5;
  font-style: normal;
  font-weight: 700;
  padding-bottom: var(--spacing-10);
  max-width: none;
  text-transform: uppercase;
}

.form--wrapper {
  --flow-space-form: 2em;
  max-width: 768px;
}
.form--wrapper .form-section-title {
  font-family: var(--font-display);
  --flow-space-form: 3rem;
  margin-top: var(--flow-space-form);
  /* Temp tweak for Vue components since they place user-generated headings inside wrappers with
        the .form-section-title class; this targets those headings to still apply those styles: */
}
.form--wrapper .form-section-title > h1, .form--wrapper .form-section-title > h2, .form--wrapper .form-section-title > h3, .form--wrapper .form-section-title > h4, .form--wrapper .form-section-title > h5, .form--wrapper .form-section-title > h6 {
  font-family: var(--font-display);
  --flow-space-form: 3rem;
  margin-top: var(--flow-space-form);
}

.form--wrapper > * + * {
  margin-top: 1.5em;
  margin-top: var(--flow-space-form);
}

/* Labels, Legend
 *
 * Create a line break on an inline element
 * https://piccalil.li/quick-tip/inline-line-break
 */
.form--wrapper {
  /* Add space between each set of form elements */
  /* Fieldset is more reliable than legend for margin-top because of how the legend is inset */
  /* Add space between each label, legend and form element */
  /* Reset fieldset and legend user agent styles or margins don't work */
  /* https://thatemil.com/blog/2015/01/03/reset-your-fieldset/ */
}
.form--wrapper legend {
  font-weight: bold;
}
.form--wrapper label::after {
  content: "\a";
  white-space: pre;
}
.form--wrapper legend,
.form--wrapper .form--hint {
  margin-bottom: var(--spacing-20);
}
.form--wrapper .boolean-checkbox .form--hint {
  margin-bottom: var(--spacing-0);
}
.form--wrapper fieldset {
  border: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  min-inline-size: unset;
  padding-block-start: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  padding-block-end: 0;
  min-width: 0;
}
.form--wrapper fieldset legend {
  display: table;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

label:not(fieldset label) {
  font-weight: bold;
}

label:not(fieldset label) {
  display: inline-block;
}

label:not(fieldset label):not(:first-child) {
  margin-top: var(--spacing-40);
}

label:not(fieldset label) {
  margin-bottom: var(--spacing-10);
}

.form-item .boolean-checkbox label,
.boolean-checkbox label {
  margin-bottom: var(--spacing-00);
  position: relative;
  top: -2px;
}
.form-item .boolean-checkbox label + .form--hint, .form-item .boolean-checkbox label + * .form--hint,
.boolean-checkbox label + .form--hint,
.boolean-checkbox label + * .form--hint {
  margin-top: var(--spacing-10);
}

/*
 * Form Hints
 *
 * Negative margin is used to override the normal margin-bottom
 * between the label or legend and form element
 */
.form--hint {
  color: var(--color-neutral-40);
  font-size: var(--font-size-7);
  font-style: italic;
  margin-top: -0.4rem;
}

/* modifier to allow line breaks and wrapping within the form--hint elements */
.form--hint.line-break {
  white-space: pre-wrap;
}

/* Modifier for second line of hint text that needs different styling,
 * such as radio buttons, where it is used on a <span> within a label
 * (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1471)
 */
.form--hint_secondary {
  color: #333;
  display: block;
  font-weight: var(--fw-normal);
}

/* Modifier for using within radio button so secondary lines up with normal label text (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1471) */
/*
 * Required Fields
 * https://www.nngroup.com/articles/required-fields/
 */
.form--required::before {
  content: "* ";
  color: var(--color-danger-30);
}

/*
 * Input, Textarea
 */
.form--wrapper {
  /* Hide number input arrows globally with utility class (https://mapyourshow.atlassian.net/browse/EXHV7-247) */
  /* Hide number input arrows globally with utility class (https://mapyourshow.atlassian.net/browse/EXHV7-247) */
}
.form--wrapper input:not(.button),
.form--wrapper select,
.form--wrapper textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0.563rem var(--spacing-20);
  transition: all 0.25s ease-in-out;
  width: 100%;
}
.form--wrapper input:hover,
.form--wrapper select:hover,
.form--wrapper textarea:hover {
  border: 1px solid var(--border-hover-color);
}
.form--wrapper input:not([type=file]),
.form--wrapper textarea {
  box-shadow: var(--form-shadow);
}
.form--wrapper input,
.form--wrapper select {
  line-height: 1;
}
.form--wrapper textarea {
  height: var(--spacing-90);
  line-height: 1.5;
  overflow: auto;
  resize: none;
}
.form--wrapper input.arrows-hidden[type=number]::-webkit-outer-spin-button,
.form--wrapper input.arrows-hidden[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form--wrapper input.arrows-hidden[type=number] {
  -moz-appearance: textfield;
}

.textarea--resize {
  resize: vertical;
}

/*
 * Input File Upload
 */
.form--wrapper input[type=file] {
  border-color: transparent;
  height: auto;
  margin-top: var(--spacing-10);
  padding: 0;
}
@media screen and (min-width: 60em) {
  .form--wrapper input[type=date],
  .form--wrapper input[type=number],
  .form--wrapper input[type=tel],
  .form--wrapper input[type=date],
  .form--wrapper input[type=time] {
    max-width: 25%;
    display: block;
  }
}

/*
 * Input File Upload with Preview
 */
/* INSTRUCTIONS: Wrap a button element,  an input[type="file"] element, a .previewWrapper, and an icon (e.g.,  .circle-icon__base)
 inside this wrapper to create an image and video upload field with a thumbnail preview of a single uploaded file; the .form--upload-wrapper
 has styles to allow it to be a clickable button if wrapped in a div[role="button"] */
.form--upload-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: var(--spacing-40);
  gap: var(--spacing-40);
  border-radius: var(--button-radius);
  position: relative;
  cursor: pointer;
  /* Overriding default button behavior for the input wrapper */
}
.form--upload-wrapper:active {
  box-shadow: none;
  transform: unset;
}
.form--upload-wrapper input[type=file] {
  display: none;
  position: absolute;
  /* testing styles to use instead of 'display: none' to perhaps use this later for non-cropped iamges: */
  /* opactiy: 0;
     top: 0;
     left: 0;
     width: 0;
  */
  /* Make the buttons inside the .form--upload-wrapper take the normal button disabled styling when the file input is disabled: */
}
.form--upload-wrapper input[type=file][disabled] ~ .upload-wrapper__button, .form--upload-wrapper input[type=file].is-disabled ~ .upload-wrapper__button, .form--upload-wrapper input[type=file][disabled] ~ * .upload-wrapper__button, .form--upload-wrapper input[type=file].is-disabled ~ * .upload-wrapper__button {
  cursor: auto;
  opacity: 0.5;
  cursor: not-allowed;
}

.form--upload-wrapper p {
  font-size: var(--font-size-7);
}

.previewWrapper {
  position: relative;
}
.previewWrapper img, .previewWrapper video {
  max-width: 170px;
}

.form--upload-wrapper.has-icon-label {
  gap: var(--spacing-40);
  /* Remove margin added on .circle-icon__base to account for extra space taken up by text */
}
.form--upload-wrapper.has-icon-label .circle-icon__base {
  margin-top: 0;
  margin-bottom: 0;
}

/* NOTE: Commenting out for now since this was removed from Figma; keeping in case we
add back in later */
/* Banner that appears over video thumbnail when it's uploaded; added
to a <div> that is a sibling of a .previewWrapper */
/*
 * Placeholder Text
 */
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--color-neutral-30);
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--color-neutral-30);
  opacity: 1;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--color-neutral-30);
}

:-moz-placeholder {
  /* Firefox 18- */
  color: var(--color-neutral-30);
}

/* Display character count after text field or textarea */
.description-count {
  font-size: var(--font-size-7);
  color: var(--color-neutral-40);
  text-align: right;
}

/*
 * Exh custom styles - Placeholder Text for dark inputs (including sidebar search)
 */
.l-sidebar_search ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--color-neutral-70);
  font-weight: 400;
}

.l-sidebar_search ::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--color-neutral-70);
  font-weight: 400;
  opacity: 1;
}

.l-sidebar_search :-ms-input-placeholder {
  /* IE 10+ */
  color: var(--color-neutral-70);
  font-weight: 400;
}

.l-sidebar_search :-moz-placeholder {
  /* Firefox 18- */
  color: var(--color-neutral-70);
  font-weight: 400;
}

/*
 * Select
 *
 * https://www.filamentgroup.com/lab/select-css.html
 * Arrow color can be set by changing the fill - it's #404040 now
 */
.form--wrapper {
  /* Added overflow ellipsis on https://mapyourshow.atlassian.net/browse/CES24-124 */
  /* Added width for overflow ellipsis on https://mapyourshow.atlassian.net/browse/CES24-124 */
}
.form--wrapper select {
  display: block;
  line-height: 1.3;
  max-width: 100%;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23444444%22%20d%3D%22M9.293%2012.95l.707.707L15.657%208l-1.414-1.414L10%2010.828%205.757%206.586%204.343%208z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 1.25em auto, 100%;
}
.form--wrapper select:hover {
  cursor: pointer;
}
.form--wrapper select::-ms-expand {
  display: none;
}
.form--wrapper select option {
  font-weight: normal;
}
.form--wrapper .overflow-ellipsis {
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 35px;
  overflow-x: clip;
}

/* Copy from Booth Sales - styles for selected list of items appearing below a select form field */
.selected--category {
  border-top: 1px solid var(--color-neutral-80);
  padding: var(--spacing-10) var(--spacing-30);
}

/*
 * Checkbox, Radio
 */
.checkbox--wrapper div + div,
.radio--wrapper div + div {
  margin-top: var(--spacing-30);
}

.checkbox--wrapper .grid--auto-form-items div + div,
.radio--wrapper .grid--auto-form-items div + div {
  margin-top: 0;
}

.grid--auto-form-items > div {
  display: flex;
  gap: 0.5rem;
}

.grid--auto-form-items input {
  flex: 0 0 21px;
}

.grid--auto-form-items .form--wrapper input[type=checkbox] + label,
.grid--auto-form-items .form--wrapper input[type=radio] + label {
  --spacing-10: 0;
}

.checkbox--inline label,
.checkbox--inline div,
.radio--inline label,
.radio--inline div {
  display: inline-block;
}

/* Modifier for multiline radio buttons vertically centered and with border-bottom between
 * each item, added to the <div> around each radio <input> and <label>
 *(https://mapyourshow.atlassian.net/browse/BOOTHSALES-1471)
 */
.radio--wrapper .radio--multiline {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  border-bottom: 1px solid var(--color-neutral-60);
  padding-bottom: 10px;
  /* Removed content since it was causing extra white space */
  /* Keep form--hint_secondary from inheriting larger label font size above */
}
.radio--wrapper .radio--multiline label {
  font-weight: var(--fw-bold);
  font-size: var(--font-size-5);
}
.radio--wrapper .radio--multiline label::after {
  content: "";
}
.radio--wrapper .radio--multiline .form--hint_secondary {
  font-size: var(--font-size-6);
  margin-top: 4px;
}

/* Progressive enhancement, style for new browsers */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .form--wrapper {
    /* DISABLED */
    /* Commented styles back in on https://mapyourshow.atlassian.net/browse/EXHV7-877 */
    /* DISABLED - HOVER */
    /* Added on https://mapyourshow.atlassian.net/browse/EXHV7-877 */
    /* HOVER */
    /* https://mapyourshow.atlassian.net/browse/SC-37 */
  }
  .form--wrapper input[type=checkbox],
  .form--wrapper input[type=radio] {
    --active-inner: #fff;
    --border: #ccc;
    --background: #fff;
    --disabled: var(--color-neutral-90);
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--background);
    cursor: pointer;
    display: inline-block;
    height: 21px;
    outline: none;
    position: relative;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    vertical-align: top;
    width: 21px;
  }
  .form--wrapper .boolean-checkbox .media-img {
    margin-right: 0.5rem;
  }
  .form--wrapper .boolean-checkbox .media-body {
    flex: initial;
  }
  .form--wrapper input[type=checkbox]:after,
  .form--wrapper input[type=radio]:after {
    content: "";
    display: block;
    opacity: var(--opacity, 0);
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--transition-duration, 0.3s) var(--transition-timing-function, ease), opacity var(--transition-delay, 0.2s);
  }
  .form--wrapper input[type=checkbox]:checked,
  .form--wrapper input[type=radio]:checked {
    --background: var(--active);
    --border-color: var(--active);
    --opacity: 1;
    --transition-delay: 0.3s;
    --transition-duration: 0.6s;
    --transition-timing-function: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    box-shadow: none;
  }
  .form--wrapper input[type=checkbox]:disabled,
  .form--wrapper input[type=radio]:disabled,
  .form--wrapper input[type=checkbox].is-disabled,
  .form--wrapper input[type=radio].is-disabled {
    --background: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .form--wrapper input[type=checkbox]:disabled:checked,
  .form--wrapper input[type=radio]:disabled:checked,
  .form--wrapper input[type=checkbox].is-disabled:checked,
  .form--wrapper input[type=radio].is-disabled:checked {
    --background: var(--disabled-inner);
    --border-color: var(--border);
    border: 1px solid var(--border);
  }
  .form--wrapper input[type=checkbox]:disabled + label,
  .form--wrapper input[type=radio]:disabled + label,
  .form--wrapper input[type=checkbox].is-disabled + label,
  .form--wrapper input[type=radio].is-disabled + label {
    cursor: not-allowed;
  }
  .form--wrapper input[type=checkbox]:hover:disabled,
  .form--wrapper input[type=radio]:hover:disabled,
  .form--wrapper input[type=checkbox]:hover.is-disabled,
  .form--wrapper input[type=radio]:hover.is-disabled {
    border: 1px solid var(--border);
  }
  .form--wrapper input[type=checkbox]:hover:disabled:checked,
  .form--wrapper input[type=radio]:hover:disabled:checked,
  .form--wrapper input[type=checkbox]:hover.is-disabled:checked,
  .form--wrapper input[type=radio]:hover.is-disabled:checked {
    border: 1px solid var(--border);
  }
  .form--wrapper input[type=checkbox] + label,
  .form--wrapper input[type=radio] + label {
    line-height: 21px;
    vertical-align: top;
    cursor: pointer;
    margin-left: var(--spacing-10);
  }
  .form--wrapper input[type=checkbox]:after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--check-rotate, 20deg));
  }
  .form--wrapper input[type=checkbox]:checked {
    --check-rotate: 43deg;
  }
  .form--wrapper input[type=radio] {
    border-radius: 50%;
  }
  .form--wrapper input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    transform: scale(var(--scale, 0.7));
  }
  .form--wrapper input[type=radio]:checked {
    --scale: 0.5;
  }
  .form--wrapper input[type=text].is-disabled,
  .form--wrapper input[type=email].is-disabled {
    box-shadow: none;
    border: none;
    background-color: transparent;
    padding-left: 0;
  }
}
/*
 * Error, Invalid
 */
.form--wrapper input:invalid,
.form--wrapper select:invalid,
.form--wrapper textarea:invalid {
  border: 1px solid var(--color-danger-30);
  box-shadow: 0 0 0 1px var(--color-danger-30);
}

/*
 * Button Group
 */
form .button--group {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--spacing-50);
  padding: var(--spacing-20) 0;
}

/*
 * Hybrid Form
 * Hybrid forms are stacked on small screens and spread out when they have room
 */
.form--hybrid {
  --flow-space: 2rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* $black-10 */
  padding: 2rem 0;
}

/* When stacked add margin between form elements and hints */
.form--hybrid > div:nth-child(1) {
  margin-bottom: 1rem;
}

.form-item label,
.form-item legend {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.form-item label::after,
.form-item legend::after {
  content: "\a";
  white-space: pre;
}

/* Inline form item wrppaer for making multiple form-items (such as 2 selects) be inline */
.form-item-inline {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-60);
  /* Make each child equal size */
  /* Make each child equal size by overriding number max width form styles */
}
.form-item-inline .form-item {
  flex-grow: 1;
}
.form-item-inline input[type=tel],
.form-item-inline input[type=number] {
  max-width: none;
  width: 100%;
}

/* Inline form item wrapper for making multiple form-items be inline while
 * keeping form items auto width (https://mapyourshow.atlassian.net/browse/ICAST2024-44)
 */
.form-item-inline_auto {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-40);
}

/* Inline form item wrppaer for making a single input and its label be inline */
.form-item-inline_single {
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
}
.form-item-inline_single label {
  margin-bottom: 0;
}
/* Modifier for making a 2 column form layout that allows for wrapping on smaller displays */
.form-item-inline.even {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(45% + 12px), 1fr));
}

@media screen and (min-width: 60em) {
  .form--hybrid {
    flex-direction: row;
    max-width: 75rem;
  }
  .form--hybrid > div:nth-child(1) {
    flex-basis: 30rem;
    margin-bottom: 0;
  }
  .form--hybrid > div:nth-child(2) {
    flex: 1;
    padding-left: 3rem;
  }
  .form-hint {
    margin-bottom: 0;
  }
}
/*
* Marker
* Style marker color (within form--hybrid)
*/
.form--hybrid ::marker {
  color: var(--color-danger-30);
}

/*
* Form Group Title / Border
* Group a set of form elements and add a title, border
*/
.form--group-title {
  color: var(--color-accent-30);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
}

.form--group-border {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-40);
}

/*
* Form Search (Input with search button on the right)
*/
.form--search_wrapper {
  display: flex;
  align-items: center;
}
.form--search_wrapper input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.form--search_wrapper button {
  background-image: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin: 0;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-right: 1rem;
  padding-left: 1rem;
}

/*
* Focus styles
*/
.radio--wrapper input:focus,
.checkbox--wrapper input:focus,
.boolean-checkbox input:focus {
  outline-offset: -1px;
  box-shadow: none;
}

/*
* Read Only
*/
input[readonly],
.form--wrapper input:not([type=file])[readonly] {
  box-shadow: none;
  border: 0;
  padding: 0;
  cursor: not-allowed;
  background-color: transparent;
}

/* Copy Input Modifier */
.form--wrapper input.copy[readonly] {
  box-shadow: var(--form-shadow);
  border: 1px solid #ccc;
  padding: 0.563rem var(--spacing-20);
  cursor: text;
  background-color: #fff;
}

/*
* Terms & Conditions
*/
.read-terms {
  border: 1px solid var(--color-neutral-60);
  max-height: 400px;
  overflow: auto;
}

.sign-here {
  border: 1px dashed var(--color-neutral-60);
  height: 150px;
}

/* Sign here box container ID */
/* Sign here box ID */
#ctlSignature {
  border: 1px dashed var(--color-neutral-60) !important;
  border-radius: 5px;
  height: 180px;
}

#ctlSignature_toolbar {
  width: auto !important;
  margin: 0 !important;
}

/* Signature box please sign here text */
#ctlSignature_status {
  color: initial !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  font-family: var(--font-body) !important;
  font-size: unset !important;
  float: unset !important;
  margin-right: 0 !important;
}

/*
 * Form Overrides
 */
/* 
 Fix input widths (no easy way to fix type in form system)
 Added selector to match any #companyform input with "fax", "phone", "zip"
 Changed % value to px to handle when inputs appear inline (.form-item-inline)
 https://mapyourshow.atlassian.net/browse/BOOTHSALES-1580 
 */
@media screen and (min-width: 60em) {
  input[name=renewals__zip],
  input[name=renewals__rvcontact_official_phone],
  input[name=renewals__rvcontact_billing_phone],
  #companyform input[name*=fax],
  #companyform input[name*=phone],
  #companyform input[name*=zip],
  .form--input_zip,
  .form--input_cc {
    max-width: 192px;
  }
}
/*
 * Vue3datepicker.. Fixes for MYS form styles overriding vue3datepicker library styles
 */
.form--wrapper input.dp__input_icon_pad {
  padding-left: var(--dp-input-icon-padding);
}
.form--wrapper .dp__action_button {
  line-height: 1;
}

/*
 * Vue multiselect.. Fixes for MYS form styles overriding Vue multiselect library styles
 */
.form--wrapper .multiselect__input,
.form--wrapper .multiselect__single {
  border: none !important;
}

/*Vue-Multiselect library style overrides - select label*/
.o-multi-select_container {
  /*Vue-Multiselect library style overrides - select container*/
  /*Vue-Multiselect library style overrides - select inner option container*/
  /*Vue-Multiselect library style overrides - select single option container*/
  /*Vue-Multiselect library style overrides - select dropdown container*/
  /*Vue-Multiselect library style overrides - select placeholder text container*/
}
.o-multi-select_container .typo__label {
  font-size: 1rem;
  white-space: nowrap;
}
.o-multi-select_container .multiselect {
  display: block;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.5rem;
}
.o-multi-select_container .multiselect__tags {
  border: 1px solid transparent;
  border-radius: 5px;
}
.o-multi-select_container .multiselect__single {
  margin-bottom: 0;
}
.o-multi-select_container .multiselect__content-wrapper {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.o-multi-select_container .multiselect__placeholder {
  margin-bottom: 0px;
  padding-top: 0px;
}

/* Moved from the reset - anchor elements that don't have a class get default styles
 * https://www.youtube.com/watch?v=sZS-7RX_c7g
 */
/* target links but not buttons */
a:not(.button),
a,
a.is-link {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
  text-decoration: none;
}

a:hover,
a.is-link:hover {
  color: var(--color-link);
  text-decoration: none;
}

a:not(.button):hover {
  text-decoration: underline;
}

/*
 * Makes a link stand out with bold text and a right arrow after the text.
 * To use, add a <span> tag (that contains the link text) within the <a> tag
 */
.link-arrow {
  font-weight: bold;
  font-weight: normal;
  color: var(--color-link);
  text-decoration-color: var(--color-link);
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.link-arrow span {
  font-weight: bold;
}

.link-arrow:hover {
  color: var(--color-link);
  text-decoration: none;
}

.link-arrow:after {
  content: " →";
  color: var(--color-link);
}

.no-underline,
.no-underline:hover,
a.no-underline,
a.no-underline:hover {
  text-decoration: none;
}

.underline,
.underline:hover,
a.underline,
a.underline:hover {
  text-decoration: underline;
}

.link-inherit {
  color: inherit;
  text-decoration: inherit;
}

footer a {
  color: var(--color-link-2);
  text-decoration-color: var(--color-neutral-70);
}

.cursor-move {
  cursor: move;
}

/* Link within accelerator alert (e.g. Leads page), added on (https://mapyourshow.atlassian.net/browse/SC-121) */
.accelerator--banner .content-wrapper a {
  color: inherit;
  font-size: var(--font-size-5);
  text-decoration: underline;
  font-weight: var(--fw-bold);
}
.accelerator--banner .content-wrapper a:hover {
  text-decoration: none;
}

/* https://www.blustemy.io/styling-inline-lists-in-css/
 * https://codepen.io/erikwallace/pen/YzGodBP?editors=1100
 */
/*
 * DEFAULT <ol>, <ul>
 */
ol,
ul {
  list-style-position: outside;
  max-width: 65ch;
  padding-left: var(--spacing-40);
}

ol > li::marker {
  font-weight: 700;
}

/* Add extra margin between each list item */
ol > li:not(:first-child),
ul > li:not(:first-child) {
  margin-top: var(--spacing-30);
}

/*
 * COMPACT LIST
 */
.list--compact > li:not(:first-child) {
  line-height: 1.6;
  margin-top: 0;
}

/*
 * NO MARKER
 */
.list--style-none {
  list-style: none;
}

/*
 * INLINE LIST
 * Make the list display horizontal left to right
 * WIP, make sure that when list items wrap the spacing and marker look good
 */
.list--inline {
  list-style: none;
  padding-left: 0;
}

.list--inline > li {
  display: inline;
}

/*
 * INLINE LIST FLEX
 * Change list-style-type with these classes
 * Use with .list--pipes for a flex list with pipe dividers
 */
.list--inline_flex {
  display: inline-flex;
  flex-wrap: wrap;
  row-gap: var(--spacing-10);
  list-style: none;
  padding-left: unset;
  /* Add extra margin between each list item */
}
.list--inline_flex li {
  flex-shrink: 0;
}
.list--inline_flex > li:not(:first-child) {
  margin-top: var(--spacing-00);
}

/*
 * LIST STYLE TYPES
 * Change list-style-type with these classes
 */
.list--breadcrumbs {
  padding-left: 0px;
}
.list--breadcrumbs a {
  color: var(--color-link);
  text-decoration: none;
}

.list--breadcrumbs > li {
  display: inline-block;
  list-style: none;
}

.list--inline > li:not(:last-child)::after,
.list--breadcrumbs > li:not(:last-child)::after,
.list--bullets > li:not(:last-child)::after,
.list--pipes > li:not(:last-child)::after {
  color: var(--color-neutral-40);
  font-weight: 400;
  margin: 0 var(--spacing-20);
}

/* Keep this first, or it will overwrite the other styles */
.list--inline > li:not(:last-child)::after {
  content: " ";
}

.list--breadcrumbs > li:not(:last-child)::after {
  content: " >";
}

.list--bullets > li:not(:last-child)::after {
  content: " •";
}

.list--pipes > li:not(:last-child)::after {
  content: " |";
}

/*
 * REMOVE LIST PADDING
 * WIP :: Use the utility .pl0 to remove left padding
 * Check to make sure that if list markers appear they aren't cutoff
 */
/*
 * DESCRIPTION LIST
 * WIP :: https://canvas.hubspot.com/components/lists
 */
dl > dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
}

dl dt:not(:first-child) {
  margin-top: var(--spacing-30);
}

dl dd {
  margin: 0;
}

/*
 * VERTICAL NAVIGATION
 * Interior page navigation
 */
.list-nav,
.list-nav li ul {
  list-style: none;
  padding-left: 0;
}

.list-nav > li {
  --spacing-30: 0;
  margin: 0;
}

/* Parent links */
.list-nav > li {
  padding: 0.5em 1em;
}

/* Remove padding top from the first link so spacing in sidebar is consistent */
.list-nav li:first-child {
  padding-top: 0;
}

/* Add space between the parent link and dropdown, also indent */
.list-nav li ul {
  margin: 0.5em;
}

/* Dropdown links - have 1/2 the padding of parents */
.list-nav li ul li {
  padding: 0.25em 0.5em;
}

/* Alignment for dropdown link and icon */
.toggle,
.list-nav li.is-dropdown button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.list-nav li.is-dropdown button {
  color: var(--color-link-10);
}

/* Remove anchor underline */
.list-nav a {
  text-decoration: none;
}

/*
 * Dropdown arrow referenced in tokens
 *
 * https://adactio.com/journal/15075
 */
/* Adds a dropdown arrow */
.toggle:after,
.list-nav li.is-dropdown button:after {
  content: "";
  background-image: var(--svg-dropdown-closed);
  vertical-align: middle;
  background-size: cover;
  height: 10px;
  width: 16px;
  transition: all 0.2s ease-in;
}

/* Use the white fill dropdown */
.toggle:after {
  background-image: var(--svg-dropdown-inverse-closed);
}

/* Flipped dropdown arrow - points up */
.list-nav li.is-dropdown.is-open button:after {
  transform: rotate(180deg);
}

/* Use the white fill dropdown */
.is-open .toggle:after {
  transform: rotate(180deg);
}

/* Dropdown arrow modifiers for <nav> mobile view */
.nav-mobile_wrapper {
  /* Use the white fill dropdown */
  /* Flipped dropdown arrow - points up */
  /* Use the white fill dropdown */
}
.nav-mobile_wrapper .toggle:after,
.nav-mobile_wrapper .list-nav li.is-dropdown button:after {
  content: "";
  background-image: var(--svg-dropdown-nav-closed);
  vertical-align: middle;
  background-size: cover;
  height: 10px;
  width: 16px;
}
.nav-mobile_wrapper .toggle:after {
  background-image: var(--svg-dropdown-nav-inverse-closed);
}
.nav-mobile_wrapper .list-nav li.is-dropdown.is-open button:after {
  transform: rotate(180deg);
}
.nav-mobile_wrapper .is-open .toggle:after {
  transform: rotate(180deg);
}

/*
 * Modifier
 * Remove bottom border
 * ex. <ul class="list-nav list-nav.border-none">
 */
.list-nav > li:not(.list-nav.border-none li) {
  border-bottom: 1px solid var(--color-neutral-40);
}

/* Add columns */
@media screen and (min-width: 60em) {
  .list--columns-l {
    -moz-columns: var(--list-columns);
         columns: var(--list-columns);
  }
  .list--columns-l li {
    margin-right: var(--spacing-40);
  }
}
/* Sidebar link list overrides for <ul> and <li> */
/* ==========================================================================*\
   $ LOGIN
\* ==========================================================================*/
.loginOnboard--exhdash_wrapper {
  padding: 2rem;
  --flow-space: 2rem !important;
}
.loginOnboard--exhdash_wrapper a:not(.button) {
  text-decoration: none;
}
.loginOnboard--exhdash_wrapper a:not(.button):hover {
  text-decoration: underline;
}
@media screen and (min-width: 60em) {
  .loginOnboard--exhdash_wrapper.checkInbox--exhdash-boothSpace .form--wrapper-login {
    max-width: calc(var(--mw3) * 2);
  }
}

@media screen and (min-width: 60em) {
  .loginOnboard--exhdash_wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
.logo--exhdash-page-title {
  display: block;
  height: auto;
  margin: 0 auto;
}

.form--wrapper-login {
  width: 100%;
  background-color: var(--color-neutral-100);
  padding: 2rem;
  margin: 0 auto;
  margin-block-end: 0;
  --border-gradient-size: 1px;
  background-clip: padding-box;
  border: solid var(--border-gradient-size) transparent;
  border-radius: var(--border-radius);
  position: relative;
}
.form--wrapper-login ul {
  --flow-space: 0;
}
.form--wrapper-login ul > li:not(:first-child) {
  margin-top: unset;
}
.form--wrapper-login label {
  color: var(--color-neutral-10);
  font-weight: var(--fw-medium);
}
.form--wrapper-login .boolean-checkbox span label {
  margin-bottom: var(--spacing-00);
  font-weight: var(--fw-medium);
}
.form--wrapper-login .form--hint {
  margin-bottom: var(--spacing-20);
}
.form--wrapper-login:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: calc(var(--border-gradient-size) * -1);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
}
@media screen and (min-width: 60em) {
  .form--wrapper-login {
    max-width: var(--mw6);
  }
}

.exhSelect--Wrapper {
  width: 100%;
}
@media screen and (min-width: 60em) {
  .exhSelect--Wrapper {
    max-width: var(--mw7);
  }
}

.loginOnboard--exhdash_wrapper {
  /* Note: Added hook for booth space specific changes that are separate from the main login styles */
  /* NOTE: THIS IS THE CONTAINER CLASS FOR THE STACKED BOOTHSALES LOGIN PAGE */
}
.loginOnboard--exhdash_wrapper h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  max-width: none;
  text-align: center;
  margin-top: 1rem;
}
.loginOnboard--exhdash_wrapper h3 {
  font-weight: var(--fw-bold);
}
.loginOnboard--exhdash_wrapper.signIn--exhdash-boothSpace {
  /* Override default flow / margin top value for first instance of heading text secondary (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1467) */
  /* Add some breathing room between custom top content section and heading-text_main (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1467)  */
}
.loginOnboard--exhdash_wrapper.signIn--exhdash-boothSpace h1 {
  text-align: left;
  margin-top: 0;
}
.loginOnboard--exhdash_wrapper.signIn--exhdash-boothSpace .heading-text_secondary:first-of-type {
  margin-top: var(--spacing-60);
}
.loginOnboard--exhdash_wrapper.signIn--exhdash-boothSpace .indextopcontent-text {
  margin-bottom: var(--spacing-30);
}

.login-wrapper-description {
  color: var(--color-neutral-20);
}

.login-help-info {
  font-size: var(--font-size-7);
  text-align: center;
  color: var(--color-neutral-20);
  margin-inline: 1rem;
}

.loginOnboard--exhdash_wrapper .login-help-info {
  text-align: left;
  margin-inline: 0;
  margin-top: 2rem;
}

.ws-nowrap {
  white-space: nowrap;
}

.exh-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 12px;
}
.exh-list .button--small {
  padding: 8px 12px;
}

.t-pwReqMatch {
  color: var(--color-success-20);
  font-weight: bold;
}

.t-titleMediumBlue {
  font-weight: var(--fw-normal);
}

/* Login page language selector desktop view (https://mapyourshow.atlassian.net/browse/EXHV7-462) */
.l-login-language_desktop {
  display: none;
  margin: 0 auto;
  justify-content: flex-end;
  max-width: var(--mw8);
  position: relative;
}

@media screen and (min-width: 30.063em) {
  .l-login-language_desktop {
    display: flex;
  }
}
/* Login page language selector mobile view (https://mapyourshow.atlassian.net/browse/EXHV7-462) */
.l-login-language_mobile {
  display: block;
  position: relative;
}

@media screen and (min-width: 30.063em) {
  .l-login-language_mobile {
    display: none;
  }
}
/* NOTE: THIS IS THE CONTAINER CLASS FOR THE SIDE BY SIDE / V2 BOOTHSALES LOGIN PAGE (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1467) */
.signIn--exhdash-boothSpace-v2.form--wrapper-login {
  max-width: var(--mw8);
}

.is-boothsales .signIn--exhdash-boothSpace-v2 {
  /* Override default login page heading alignment */
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .secondary-info-section {
  margin-top: var(--spacing-40);
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .secondary-info-section,
.is-boothsales .signIn--exhdash-boothSpace-v2 .primary-info-section {
  margin-bottom: var(--spacing-70);
  flex: 1;
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .boothsales-login-flow_container {
  gap: var(--spacing-70);
}
@media screen and (min-width: 60em) {
  .is-boothsales .signIn--exhdash-boothSpace-v2 .loginOnboard--exhdash_wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .is-boothsales .signIn--exhdash-boothSpace-v2 .boothsales-login-flow_container {
    display: flex;
  }
  .is-boothsales .signIn--exhdash-boothSpace-v2 .section-divider_vertical {
    display: none;
  }
  .is-boothsales .signIn--exhdash-boothSpace-v2 .first-time-exhibitor-header {
    display: block;
    visibility: hidden;
  }
  .is-boothsales .signIn--exhdash-boothSpace-v2 .primary-info-section {
    margin-bottom: 0;
  }
  .is-boothsales .signIn--exhdash-boothSpace-v2 .secondary-info-section {
    margin-top: 0;
    margin-bottom: 0;
  }
  .is-boothsales .signIn--exhdash-boothSpace-v2 .help-section-custom {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .form--wrapper {
  max-width: none;
  margin-top: 0;
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .section-divider_vertical {
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--color-neutral-70);
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .heading-text_main {
  text-align: left;
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .description-text {
  color: var(--color-neutral-20);
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .login-help-info {
  margin-top: 0;
}
.is-boothsales .signIn--exhdash-boothSpace-v2 .help-section-custom ul {
  list-style-position: inside;
}
.is-boothsales .signIn--exhdash-boothSpace-v2 hr {
  color: var(--color-neutral-70);
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-img {
  margin-right: var(--spacing-30);
}

.media-body {
  flex: 1;
}

.media--reverse {
  flex-direction: row-reverse;
}

/* ==========================================================================*\
   $ MODAL.SCSS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ MYS CUSTOM MODAL
 * $ MYS CUSTOM MODAL FIXED
 */
/* ==========================================================================*\
   $ MYS CUSTOM MODAL
\* ==========================================================================*/
/*COPIED FROM INLINE STYLES OF modal-display.cfm */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  margin-top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  height: auto;
  max-height: 90vh;
  max-width: 100rem;
  overflow-y: auto;
  transition: all 0.3s ease;
  width: 95vw;
}

.modal-container.modal-container_small {
  height: auto;
  max-height: 90vh;
  width: 95vw;
}

@media screen and (min-width: 60em) {
  .modal-container.modal-container_small {
    max-width: 928px;
    width: auto;
    height: auto;
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-50);
}

.modal-header h1,
.modal-header h2,
.modal-header h3 {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-3);
}

.modal-close-label {
  margin-right: var(--spacing-10);
}

.modal-body {
  margin: 20px 0;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  transform: scale(1.1);
}

.modal-wrapper .button-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}

/* Diable Background Scrolling (add to <body> when no scrolling should happen behind the modal) */
.scrolling-disabled {
  overflow: hidden;
}

/* ==========================================================================*\
   $ MYS CUSTOM MODAL FIXED (Fixed header and footer)
\* ==========================================================================*/
/* Added om https://mapyourshow.atlassian.net/browse/BOOTHSALES-1370 */
.modal-fixed .modal-container {
  display: flex;
  flex-direction: column;
}
.modal-fixed .modal-fixed-header-content {
  margin-bottom: 1rem;
}
.modal-fixed .modal-fixed-default-content {
  overflow-y: auto;
  flex: 1;
}

/* ==========================================================================*\
   $ jQuery UI MODAL / DIALOG
\* ==========================================================================*/
/* jQuery UI - v1.12.1 - 2016-09-21
* http://jqueryui.com
* Includes: draggable.css, core.css, resizable.css, button.css, controlgroup.css, checkboxradio.css, dialog.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-draggable-handle {
  touch-action: none;
}

/* Layout helpers
----------------------------------*/
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
  pointer-events: none;
}

/* Icons
----------------------------------*/
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* to make room for the icon, a width needs to be set here */
/* no icon support for input elements */
/* button icon element(s) */
/* workarounds */
/* Support: Firefox 5 - 40 */
.ui-dialog {
  border-radius: var(--border-radius);
  background: var(--color-neutral-100);
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.15);
  left: 0;
  outline: 0;
  padding: 2rem;
  position: absolute;
  top: 0;
  z-index: 9999;
}

.ui-dialog .ui-dialog-titlebar {
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  display: none; /* MYS */
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  background: none;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-size: 1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-size: 1em;
}

.ui-widget-content {
  font-size: em(14);
  border: 1px solid --color-neutral-70;
  color: var(--color-neutral-20);
}

/**
 * Special exception to make sure links in tables/datatables always get correct styling
 */
.ui-widget-content a :not(.ui-widget-content table a) {
  color: var(--color-neutral-20);
}

.ui-widget-header {
  background: white;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--font-size-4);
}

.ui-widget-header a {
  color: var(--color-neutral-20);
}

/* Interaction states
----------------------------------*/
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
/* Interaction Cues
----------------------------------*/
/* Icons
----------------------------------*/
/* states and images */
/* positioning */
/* Misc visuals
----------------------------------*/
/* Corner radius */
/* Overlays */
.ui-widget-overlay {
  background: var(--color-neutral-60);
  opacity: 0.3;
  filter: Alpha(Opacity=30); /* support: IE8 */
}

.ui-widget-shadow {
  box-shadow: 0px 0px 5px var(--color-neutral-40);
}

/* ==========================================================================*\
   $ OBJECTS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ TIPPY
 * $ CART SUMMARY
 * $ ORDER SUMMARY
 * $ COMPANY INFO (OVERALL LAYOUT)
 * $ ICONS
 * $ COMPONENTS (FROM WIDGETS)
 * $ SORT (FROM CHECKLIST, RESOURCES)
 * $ DYNAMIC CONTENT
 * $ LINE CLAMP
 * $ PIPE DIVIDER
 * $ SWITCH
 * $ CREDIT CARD SWIPPER
 * $ MISC
 */
.o-language-selector_icon {
  height: auto;
  width: auto;
  margin-right: var(--spacing-20);
}

/* is-selected language text color (https://mapyourshow.atlassian.net/browse/EXHV7-513) */
.is-selected .o-language-selector_text_mobile {
  color: var(--color-neutral-100);
}

.o-section_name {
  font-weight: 700;
}

.o-dropdown_header {
  position: absolute;
  top: 45px;
  background-color: var(--color-neutral-100);
  border-radius: var(--border-radius);
  padding: 0px var(--spacing-40);
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.15);
  z-index: 105; /* Made this higher than the widget loading overlay */
  width: -moz-max-content;
  width: max-content; /*EXHV7-239: ensure enough width in drowdown for all SVGs+links */
  /* Override default Caffeine spacing */
}
.o-dropdown_header ul {
  list-style-type: none;
  margin-bottom: 0;
  padding-left: 0; /* Override default Caffeine spacing */
  max-width: none; /* Override default Caffeine spacing */
}
.o-dropdown_header li {
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 12px 0px;
  border-radius: 8px;
}
.o-dropdown_header ul > li:not(:first-child) {
  margin-top: var(--spacing-0);
}
.o-dropdown_header svg {
  margin-right: 12px;
  /* EXHV7-239: Remove max-content height/width on SVG to stop icons from blowing up in Safari;
        this is instead handled on the outer wrapper */
}
.o-dropdown_header a {
  color: var(--color-neutral-20);
  text-decoration: none;
  font-size: var(--font-size-7); /* Override default Caffeine size */
}

.o-dropdown_account {
  right: 0px;
}

.o-dropdown_language {
  right: 110px;
}

/* Modified offset for login page since there is no account info button / dropdown on this page (https://mapyourshow.atlassian.net/browse/EXHV7-462) */
.loginOnboard--exhdash_wrapper .o-dropdown_language {
  right: 30px;
}

.o-account_initial {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 6px;
  width: 32px;
  height: 32px;
  color: var(--color-neutral-100);
  margin-right: var(--spacing-20);
}

/* HeadingActionBar, with heading and button spaced with space-between */
.o-HeadingActionBar {
  padding: 18px 0px 18px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-20);
}
.o-HeadingActionBar.info {
  color: var(--color-neutral-20);
}

/* HeadingActionBar, with heading and button spaced with flex-start */
.o-HeadingActionBar_start {
  padding: 18px 0px 18px 0px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--spacing-50);
}

/* Don't use flex-wrap: wrap behavior on boothsales package cards for title / select button (https://mapyourshow.atlassian.net/browse/PTXPO25-19) */
.is-boothsales .package-card .o-HeadingActionBar {
  flex-wrap: nowrap;
}

.o-HeadingQuickLink_Wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-20);
}

/* Action button icons */
.o-icon_actions {
  fill: #154b95;
}

/* ==========================================================================*\
   $TIPPY
\* ==========================================================================*/
.tippy-tooltip {
  text-align: left !important;
}

.o-Tippy_Actions_container {
  text-align: left;
  padding: 4px;
}

.o-Tippy_Actions_container .o-Tippy_Actions_item {
  display: block;
  margin-bottom: 0.5rem;
  color: #000;
  text-decoration: none;
}

.o-Tippy_Actions_container .o-Tippy_Actions_warning {
  color: #db4c39;
}

/* Note: Being used inline with form label; must avoid using flex for alignment and spacing
properties for instances where the required ::before element is present */
.o-tippy_icon {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
}

/* ==========================================================================*\
   $ CART SUMMARY
\* ==========================================================================*/
.o-CartSummary_Wrapper {
  border: 1px solid var(--color-neutral-70);
  border-radius: var(--border-radius);
  gap: 16px;
  max-width: 768px;
}

/* Temp boothsales modifier to maintain space between wrapper items */
.is-boothsales .o-CartSummary_Wrapper {
  margin-bottom: 0.5rem;
}

.o-CartSummaryDetails_Wrapper {
  background-color: var(--color-neutral-100);
  padding: 1rem;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.o-CartSummaryDetails_Wrapper ul > li:not(:first-child) {
  margin-top: 0;
}

.o-CartSummaryTotal {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  font-weight: bold;
}

.o-CartSummaryDetails div {
  display: block;
}
@media screen and (min-width: 30.063em) {
  .o-CartSummaryDetails div {
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
}
.o-CartSummaryDetails > * {
  --flow-space: 0.5rem;
}

/* ==========================================================================*\
   $ ORDER SUMMARY
\* ==========================================================================*/
/* Used in boothsales and non boothsales for order totals, payment schedule */
.o-OrderSummary_container {
  border: 1px solid var(--color-neutral-70);
  border-radius: var(--border-radius);
  color: var(--color-black);
  padding: var(--spacing-40);
  background-color: var(--color-neutral-100);
}
.o-OrderSummary_container .item-number {
  margin-bottom: var(--spacing-60);
}
.o-OrderSummary_container .order-info_outer {
  gap: var(--spacing-70);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin-bottom: var(--spacing-60);
  padding-bottom: var(--spacing-60);
}
.o-OrderSummary_container .order-info_outer:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 60em) {
  .o-OrderSummary_container .order-info_outer {
    display: flex;
  }
}
.o-OrderSummary_container .order-info_inner_primary {
  flex: 1;
}
.o-OrderSummary_container .order-info_inner_secondary {
  flex: 1;
  justify-content: space-between;
}
@media screen and (min-width: 60em) {
  .o-OrderSummary_container .order-info_inner_secondary {
    display: flex;
  }
}
.o-OrderSummary_container .order-info_details div {
  display: flex;
  justify-content: space-between;
}
.o-OrderSummary_container .order-subheading {
  color: #555;
  margin-bottom: var(--spacing-20);
}
.o-OrderSummary_container .schedule-details,
.o-OrderSummary_container .duedate-details {
  margin-right: var(--spacing-20);
}
.o-OrderSummary_container .order-total_container {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: #025e32;
}
.o-OrderSummary_container .o-OrderSummary {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: var(--spacing-40);
  border-radius: var(--border-radius);
  background-color: var(--color-brand-100);
}
@media screen and (min-width: 60em) {
  .o-OrderSummary_container .o-OrderSummary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-70);
  }
}
.o-OrderSummary_container .o-OrderSummaryTotal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  -moz-column-gap: var(--spacing-40);
       column-gap: var(--spacing-40);
  font-size: var(--font-size-5);
}
.o-OrderSummary_container .order-info_outer:has(+ .o-OrderSummary) {
  border-bottom: none;
  margin-block-end: var(--spacing-50);
  padding-block-end: 0;
}
.o-OrderSummary_container .amount-due {
  text-align: right;
}

/* ==========================================================================*\
   $ COMPANY INFO (OVERALL LAYOUT)
\* ==========================================================================*/
.o-company_name {
  font-weight: var(--fw-medium);
}

/* ==========================================================================*\
   $ ICONS
\* ==========================================================================*/
/* Wrapper for when an icon and text needs to be in the same wrapper */
.icon-label-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-10);
  text-align: center;
}

/* NOTE: COPIED FROM .card-package-product-icons IN BOOTHSALES.SCSS */
.circle-icon__base {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.circle-icon__base svg {
  /* overrides base SVG width and height styles set to 1em; actual icon height set on the SVG element */
  width: unset;
  height: unset;
}

/* QUESTION: Move fill color to the card-package-icons? or maybe to a modifier class? */
/* ==========================================================================*\
   $ COMPONENTS (FROM WIDGETS)
\* ==========================================================================*/
/**
 * HIGHLIGHT COMPONENT
 * Highlight important single stats with different background colors
*/
.highlight-component {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.highlight-component .label {
  text-transform: uppercase;
  color: var(--color-neutral-40);
  font-weight: var(--fw-normal);
  font-size: var(--font-size-7);
  line-height: 1;
  margin-bottom: var(--spacing-10);
}
.highlight-component .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-3);
  color: var(--color-neutral-10);
}

/**
 * Highlight Component Modifiers
*/
.highlight-component--info {
  padding: var(--spacing-30) var(--spacing-40);
  border-radius: 8px;
  color: var(--color-neutral-10);
}
.highlight-component--info .label {
  color: var(--color-neutral-10);
}

/* Instructions: add to the .highlight-component for RED background */
.highlight-component--danger {
  padding: var(--spacing-30) var(--spacing-40);
  border-radius: 8px;
  background: var(--color-danger-90);
}
.highlight-component--danger .label {
  color: var(--color-danger-20);
}
.highlight-component--danger .value {
  color: var(--color-danger-20);
}

/* ==========================================================================*\
   $ SORT (FROM CHECKLIST, RESOURCES)
\* ==========================================================================*/
.sort-container_desktop {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-50);
}

.sort-container_mobile {
  display: flex;
  padding: var(--spacing-30) 0;
  gap: var(--spacing-40);
}

.sort-container_desktop {
  display: none;
}

.sort-container_mobile {
  display: flex;
  padding: var(--spacing-30) 0;
  gap: var(--spacing-40);
}
.sort-container_mobile button {
  flex: 1;
}

/* TWEAKPOINT, MUST MATCH BREAKPOINT OF .l-nav_primary_submenu SHOWING/HIDING */
@media screen and (min-width: 650px) {
  .sort-container_desktop {
    display: block;
  }
  .sort-container_mobile {
    display: none;
  }
  /* Resource-specific sort styles */
  #resourcesCards .sort-container_desktop {
    display: flex;
  }
}
/* TWEAKPOINT - HOW DO I RANK SORT BUTTON: http://exhdashv7.exh.mysdev.com/7_0/templates/upload-show-features/how-do-i-rank.cfm */
#howDoIRank .sort-container_mobile {
  display: none;
}
@media screen and (max-width: 30em) {
  #howDoIRank .sort-container_mobile {
    display: flex;
  }
}

/* Checklist-specific sort styles */
.checklist-container.sort-container_desktop {
  background-color: transparent;
}

/* ==========================================================================*\
   $ DYNAMIC CONTENT (Hook for dynamic content, such as Resources pages)
\* ==========================================================================*/
.o-dynamicContent {
  max-width: 800px;
}

.o-dynamicContent > * + * {
  margin-top: 1em;
  margin-top: var(--flow-space);
}

/* ==========================================================================*\
   $ LINE CLAMP (Used for hiding text with Read More / Read Less)
\* ==========================================================================*/
/* Add classes to surrounding element, not the element that contains the text being truncated */
.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp__2 {
  -webkit-line-clamp: 2;
}

.line-clamp__3 {
  -webkit-line-clamp: 3;
}

.line-clamp__4 {
  -webkit-line-clamp: 4;
}

.line-clamp__5 {
  -webkit-line-clamp: 5;
}

.line-clamp__6 {
  -webkit-line-clamp: 6;
}

.line-clamp__7 {
  -webkit-line-clamp: 7;
}

.line-clamp__8 {
  -webkit-line-clamp: 8;
}

/* Fix for Firefox line clamp issue when child element text is surrounded by <p> tags...
 * https://stackoverflow.com/questions/62326049/how-to-make-div-ellipsis-with-multiple-paragraphs-inside-it
 */
.line-clamp p {
  display: contents;
}

.line-clamp p:after {
  content: "\a";
  white-space: pre;
}

/* ==========================================================================*\
   $ PIPE DIVIDER
\* ==========================================================================*/
.pipe {
  margin: 0 0.5rem;
  opacity: 0.25;
}

/* ==========================================================================*\
   $ SWITCH
\* ==========================================================================*/
/* Wrap .switch--wrapper around the .switch element and the switch's corresponding label for accessibility
and keyboard functionality; might need to add to an <a> if linking somewhere, like on this page:
http://expomys.exh.mysdev.com/7_0/datacollection:main/displayFormSummary_online_contact?formname=online_contact */
.switch--wrapper {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Override link styles that come through if .switch--wrapper is applied to an <a> tag */
a.switch--wrapper {
  text-decoration: none;
  display: block;
}
a.switch--wrapper:hover {
  text-decoration: none;
}

/* Main switch element - wraps around the .toggler element */
.switch {
  position: relative;
  background: var(--color-neutral-60);
  border-radius: 12px;
  display: block;
  height: 24px;
  width: 48px;
}

.switch .toggler {
  position: absolute;
  border: 2px solid var(--color-neutral-50);
  border-radius: 50%;
  background: var(--color-neutral-100);
  height: 24px;
  width: 24px;
}

/* Change the style of the switch when it is turned on */
.switch--wrapper[aria-checked=true] .switch {
  background: var(--color-accent-30);
}

.switch--wrapper[aria-checked=true] .switch .toggler {
  border-color: var(--color-accent-20);
  transform: translateX(100%);
}

/* Change animation duration specific to the switch element */
.toggler.animated {
  --animation-duration: 0.3s;
}

/* ==========================================================================*\
   $ CREDIT CARD SWIPPER
\* ==========================================================================*/
/* Added on https://mapyourshow.atlassian.net/browse/NRFAPAC2025-7 */
.credit-card-swiper {
  border: 1px solid var(--color-neutral-70);
  border-radius: 8px;
  padding: var(--spacing-40);
}
.credit-card-swiper .alert {
  margin: 0;
}
.credit-card-swiper .instructions-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-50);
  margin-bottom: var(--spacing-50);
}
.credit-card-swiper .instructions-text {
  font-size: var(--font-size-5);
}

/* ==========================================================================*\
   $ MISC
\* ==========================================================================*/
/* Used to highlight a category, e.g. how do I rank page */
.highlight .sponsored-category-text {
  text-transform: uppercase;
}
.highlight a {
  font-weight: var(--fw-bold);
}

/* Used to highlight a section or table row for summary info like total amount (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1471) */
.summary {
  background-color: #f2f6fd;
  font-weight: var(--fw-bold);
}

/* Used as warning text, such as within a table in the Appointments section (https://mapyourshow.atlassian.net/browse/EXHV7-688) */
.text-warning_30 {
  font-size: var(--font-size-7);
  font-style: italic;
  color: var(--color-danger-30);
}

/* Layout for filter select / export button layout (Added to styles and tweaked on https://mapyourshow.atlassian.net/browse/SC-72) */
.filter--export-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-30);
}

/* Layout for filters, e.g. above quasar tables */
.filter--wrapper {
  /* https://mapyourshow.atlassian.net/browse/SC-72: change flexbox to grid and set columns */
  /* display: flex;
  flex-wrap: wrap; */
  align-items: center;
  gap: var(--spacing-30);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 50%), 1fr));
  flex-grow: 1;
}

/* Override default form spacing since form items are inline (Added to styles and tweaked on https://mapyourshow.atlassian.net/browse/SC-72) */
.filter--wrapper > * + * {
  margin-top: 0;
}

/* https://mapyourshow.atlassian.net/browse/SC-72: Set media query for .form-item width */
@media screen and (min-width: 60em) {
  .filter--wrapper .form-item {
    min-width: 200px;
    width: 100%;
  }
}
/* Pagination with numbers */
.pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--spacing-50);
}

.pagination-number {
  position: relative;
}

.pagination-number-last:after {
  content: "…";
}

/* Keep here until confirmed updated styles are working in other instances of pagination */
.pagination-previous:before {
  content: "<";
  font-weight: 700;
}

.pagination-next:after {
  content: ">";
  font-weight: 700;
}

.pagination-text {
  max-width: 65em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: var(--spacing-50) 0;
  padding: 0 var(--spacing-30);
  align-items: flex-end;
}
.pagination-text .pagination-next,
.pagination-text .pagination-previous {
  display: block;
  max-width: 25em;
}

.pagination-numbers a {
  text-decoration: none;
  cursor: pointer;
  padding: var(--spacing-20) var(--spacing-40);
  border-radius: 50%;
  color: var(--color-brand-30);
}

.pagination-numbers > a {
  /* Testing styles to allow for page numbers to always stay in a circle regardless of number of numbers */
  width: 40px;
  height: 40px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-numbers a:hover {
  background: var(--color-neutral-70);
  text-decoration: none;
}

/* Keep here until confirmed updated styles are working in other instances of pagination */
.pagination-numbers a.is-selected {
  color: var(--color-neutral-10);
  position: relative;
  background-color: var(--color-neutral-70);
}

/* Selected number underline */
.pagination-numbers a.is-disabled,
.pagination-text a.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
  display: inline-block;
}

/* ==========================================================================*\
   $ PROGRESS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ PROGRESS BAR PERCENTAGE
 * $ PROGRESS BAR STEPS
 */
/* ==========================================================================*\
   $ PROGRESS BAR PERCENTAGE (Used in How Do I rank)
\* ==========================================================================*/
.progressbar {
  background: white;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  width: 100%;
  height: 32px;
  position: relative;
  padding: 8px;
}
.progressbar .counter {
  position: relative;
  z-index: 1; /* positions text higher than progress bar, so it appears at full opacity */
  line-height: 1; /* Lines up text in center of progress bar */
  color: hsl(44, 83%, 25%);
  font-weight: bold;
}
.progressbar .value {
  background-color: rgb(255, 237, 189);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 80%;
}
.progressbar .value.success {
  background-color: rgb(201, 232, 217);
}
.progressbar .value.danger {
  background-color: rgb(251, 229, 228);
}
.progressbar .value.success + .counter {
  color: hsl(151, 91%, 14%);
}
.progressbar .value.danger + .counter {
  color: hsl(2, 87%, 33%);
}
.progressbar[aria-valuenow="100"] .value {
  border-radius: 5px;
}

/* ==========================================================================*\
   $ PROGRESS BAR STEPS (Used at the top of the boothsales application)
\* ==========================================================================*/
/* Progress steps (e.g. booth sales) */
.o-steps-container {
  display: flex;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 700px) {
  .o-steps-container {
    gap: 6px;
  }
  .o-step-text {
    display: none;
  }
  .o-progress-step::before,
  .o-progress-step::after {
    display: none;
  }
}
.o-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 8px;
  width: 100%;
}

@media screen and (max-width: 700px) {
  .o-progress-step {
    background-color: var(--color-neutral-70);
    height: 8px;
    border-radius: var(--border-radius);
  }
}
.o-progress-step::before,
.o-progress-step::after {
  display: block;
  position: absolute;
  top: 17px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-neutral-70);
  content: "";
}

@media screen and (max-width: 700px) {
  .o-progress-step::before,
  .o-progress-step::after {
    display: none;
  }
}
.o-progress-step.is-active::before {
  z-index: 2;
  left: -52%;
}

@media screen and (max-width: 700px) {
  .o-progress-step.is-active::before {
    background: transparent;
  }
}
.o-step-number {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-40);
  border-radius: 50%;
  border: 1px solid var(--color-neutral-40);
  height: 32px;
  width: 32px;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 3;
}

@media screen and (max-width: 700px) {
  .o-step-number {
    display: none;
  }
}
.is-active .o-step-number {
  color: var(--color-neutral-100);
}

.o-step-text {
  color: var(--color-neutral-20);
  text-align: center;
  font-size: 0.938em;
}
.o-step-text a {
  text-decoration: none;
}

@media screen and (max-width: 700px) {
  .o-step-text {
    display: none;
  }
}
.is-active .o-step-text {
  font-weight: var(--fw-medium);
}

.o-step-number--mobile {
  font-weight: var(--fw-medium);
  margin-top: 8px;
}

@media screen and (min-width: 700px) {
  .o-step-number--mobile {
    display: none;
  }
}
/* ==========================================================================*\
   $ OBJECTS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ SEARCH SIDEBAR
 * $ SEARCH STANDALONE
 * $ SEARCH PAGE
 */
/* ==========================================================================*\
   $ SEARCH SIDEBAR
\* ==========================================================================*/
.l-sidebar_search {
  padding: var(--spacing-40) 0;
  border-top: 1px solid hsla(0, 0%, 0%, 0.1);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  margin-bottom: 0;
  /* Hide built in clear (x) icon */
  /* Main Search Conditional input value styling */
}
.l-sidebar_search .form--wrapper {
  max-width: none; /* Override default Caffeine spacing */
}
.l-sidebar_search form {
  margin: 0;
}
.l-sidebar_search label {
  position: relative;
  width: 100%;
  margin: 0;
}
.l-sidebar_search label::after {
  content: "";
}
.l-sidebar_search input[type=search] {
  margin-top: 0;
  background-color: var(--color-neutral-90);
  padding-right: 4.25rem;
  box-shadow: none;
  border: none;
  font-weight: var(--fw-normal);
}
.l-sidebar_search input[type=search]::-webkit-search-decoration,
.l-sidebar_search input[type=search]::-webkit-search-cancel-button,
.l-sidebar_search input[type=search]::-webkit-search-results-button,
.l-sidebar_search input[type=search]::-webkit-search-results-decoration {
  display: none;
}
.l-sidebar_search .search-clear-icon {
  margin-right: 8px;
}
.l-sidebar_search .search-icon-submit-button {
  position: absolute;
  right: 8px;
  top: 2px;
  background-color: transparent;
  /* http://jira.mysprod.com:8080/browse/EXHV7-239 */
  border-radius: 5px;
}
.l-sidebar_search .search-icon-submit-button svg {
  width: unset;
}
.l-sidebar_search .search-icon-close-button {
  display: none;
  position: absolute;
  top: 2px;
  right: 38px;
  background-color: transparent;
  padding-right: 0;
  /* http://jira.mysprod.com:8080/browse/EXHV7-239 */
  border-radius: 5px;
}
.l-sidebar_search .search-icon-close-button svg {
  width: unset;
}
.l-sidebar_search .search-icon-close-button::after {
  content: "|";
  color: var(--color-neutral-60);
}
.l-sidebar_search [data-hassearchtext=true] .search-icon-close-button {
  display: block;
}

@media screen and (min-width: 60em) {
  .l-sidebar_search {
    margin-bottom: var(--spacing-50);
  }
}
/* ==========================================================================*\
   $ SEARCH STANDALONE
\* ==========================================================================*/
.standalone_search {
  margin-bottom: 0;
  /* Hide built in clear (x) icon */
  /* Custom reset button */
  /* Main Search Conditional input value styling */
}
.standalone_search .form--wrapper {
  max-width: none; /* Override default Caffeine spacing */
}
.standalone_search form {
  margin: 0;
}
.standalone_search label {
  position: relative;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
}
.standalone_search input[type=search] {
  margin-top: 0;
  background-color: var(--color-neutral-100);
  padding-right: 4rem;
  font-weight: var(--fw-normal);
}
.standalone_search input[type=search]::-webkit-search-decoration,
.standalone_search input[type=search]::-webkit-search-cancel-button,
.standalone_search input[type=search]::-webkit-search-results-button,
.standalone_search input[type=search]::-webkit-search-results-decoration {
  display: none;
}
.standalone_search input[type=reset],
.standalone_search .button--search_reset {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-right: 1em;
  padding-left: 1em;
}
.standalone_search input::-moz-placeholder {
  color: var(--color-neutral-40);
  font-weight: var(--fw-normal);
}
.standalone_search input::placeholder {
  color: var(--color-neutral-40);
  font-weight: var(--fw-normal);
}
.standalone_search .search-clear-icon {
  margin-right: 8px;
}
.standalone_search .search-icon-submit-button {
  position: absolute;
  right: 13px;
  top: 4px;
  background-color: transparent;
  /* http://jira.mysprod.com:8080/browse/EXHV7-239 */
  border-radius: 5px;
}
.standalone_search .search-icon-submit-button svg {
  width: unset;
}
.standalone_search .search-icon-close-button {
  display: none;
  position: absolute;
  top: 4px;
  right: 40px;
  background-color: transparent;
  padding-right: 0;
  /* http://jira.mysprod.com:8080/browse/EXHV7-239 */
  border-radius: 5px;
}
.standalone_search .search-icon-close-button svg {
  width: unset;
}
.standalone_search .search-icon-close-button::after {
  content: "|";
  color: var(--color-neutral-60);
}
.standalone_search [data-hassearchtext=true] .search-icon-close-button {
  display: block;
}
.standalone_search .search-input_wrapper {
  flex-shrink: 0;
}

/* ==========================================================================*\
   $ SEARCH PAGE
\* ==========================================================================*/
/* Search results page wrapper (https://mapyourshow.atlassian.net/browse/EXHV7-485) */
#search-results {
  /* New tab text (resources) */
  /* Due date and description wrapper */
  /* Due date icon */
  /* Due date text */
  /* Description text */
}
#search-results .tab-text {
  font-style: italic;
  color: var(--color-neutral-30);
  display: inline-block;
  margin-right: var(--spacing-10);
}
#search-results .due-date-description_wrapper {
  display: flex;
  gap: var(--spacing-30);
}
#search-results .due-date_icon svg {
  vertical-align: text-top;
}
#search-results .due-date_text {
  display: inline;
  color: var(--color-neutral-30);
  font-size: var(--font-size-7);
  margin-right: var(--spacing-10);
}
#search-results .description {
  display: inline;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.14px;
  line-height: 1.1;
}

h1 {
  font-size: var(--font-size-3);
  line-height: 1.1;
  max-width: 37ch;
}

h2 {
  line-height: 1.1;
  max-width: 29ch;
}

h3 {
  max-width: 39ch;
}

h4 {
  max-width: 46ch;
}

p {
  line-height: 1.6;
  max-width: 80ch; /* .measure */
}

b,
strong {
  font-weight: 700;
}

blockquote {
  color: var(--color-neutral-30);
  font-size: var(--font-size-5);
  max-width: 50ch;
  padding-left: 1rem;
}

table {
  font-family: var(--font-data);
}

.f1 {
  font-size: var(--font-size-1);
}

.f5 {
  font-size: var(--font-size-5);
}

.f6 {
  font-size: var(--font-size-6);
}

.f7 {
  font-size: var(--font-size-7);
}

/*
 * Fluid Font Sizes
 * https://piccalil.li/tutorial/fluid-typography-with-css-clamp/
 */
/* 61.04px */
.mega {
  font-size: clamp(var(--fluid-type-min, 3.052rem), 1rem + var(--fluid-type-target, 3.815vw), var(--fluid-type-max, 3.815rem));
  letter-spacing: -0.022em;
}

h1,
.f1 {
  letter-spacing: -0.022em;
  text-rendering: optimizeLegibility;
}

h2,
.f2 {
  font-size: var(--font-size-2);
  letter-spacing: -0.022em;
  text-rendering: optimizeLegibility;
}

h3 {
  font-weight: 500;
}

h3,
.f3,
blockquote,
blockquote p,
.highlight-component .component__value {
  font-size: var(--font-size-3);
  letter-spacing: -0.021em;
  text-rendering: optimizeLegibility;
}

h4,
.f4,
caption,
.accordion.page-description .accordion-title,
.card-package-info .package-price-special {
  font-size: var(--font-size-4);
  letter-spacing: -0.019em;
  text-rendering: optimizeLegibility;
}

.border-bottom--none {
  border-bottom: none;
  padding-bottom: 0;
}

p,
address,
dt,
li,
cite {
  font-size: var(--font-size-6);
  letter-spacing: -0.011em;
}

.f5,
.alert .title,
.alert--notification .title,
.button--account_info,
.button--large,
.buyup-text_intro,
.card-package-info .package-price-basic,
.card-package-info .package-description,
.card--feature-image .title,
.card--transparent .title,
.col--summary-end span,
.contact-card .title,
.form-section-title,
.o-company_name,
.o-OrderSummary_container .item-number,
.th-package-info .package-price-basic,
.th-package-info .package-price-special,
.widget-heading {
  font-size: var(--font-size-5);
  letter-spacing: -0.014em;
}

caption,
dd,
.f6,
.button,
.button--file::file-selector-button,
.card-package-product-list-title,
.component__label .link,
.form--wrapper legend,
.form--wrapper-login label,
input[type=submit],
label:not(fieldset label),
.o-Tab_Nav li,
.progressbar .counter,
.sidebar-section h5 {
  font-size: var(--font-size-6);
  letter-spacing: -0.011em;
}

.f7,
.button--small,
code,
figcaption,
table,
footer p,
footer li,
aside p,
aside li,
.form--hint {
  font-size: var(--font-size-7);
  letter-spacing: -0.009em;
}

.boolean-checkbox .form--hint {
  max-width: 70ch;
}

/* Utilities */
/* ==========================================================================*\
   $ ANIMATION.SCSS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ BASE ANIMATION STYLES
 * $ ANIMATION TYPES
 * $ LOADER ANIMATION
 */
/* ==========================================================================*\
   $ BASE ANIMATION STYLES
\* ==========================================================================*/
:root {
  --animation-duration: 0.75s;
  --animation-duration-short: 0.3s;
}

.animated {
  animation-duration: var(--animation-duration);
  animation-fill-mode: both;
}

.animated.short {
  animation-duration: var(--animation-duration-short);
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

/* ==========================================================================*\
   $ ANIMATION TYPES
\* ==========================================================================*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes slideRight {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
.slideRight {
  animation-name: slideRight;
}

@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
.slideLeft {
  animation-name: slideLeft;
}

/* ==========================================================================*\
   $ LOADER ANIMATION
\* ==========================================================================*/
/* Loading container class */
.loading_animation_container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
}

/* Full screen modifier (not just full viewport) */
.loading_animation_container.fullscreen {
  position: fixed;
}

/* Loading animation class */
.loading_animation {
  /* 	height: 200px; */
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}

.loading_animation:after {
  content: " ";
  display: block;
  width: 200px;
  height: 200px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #fff;
  animation: dual-ring_animation 1.2s linear infinite;
}

/* Loading animation class size modifiers */
.loading_animation.small:after {
  width: 85px;
  height: 85px;
}

.loading_animation.medium:after {
  width: 150px;
  height: 150px;
}

@keyframes dual-ring_animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Widget-specific loader styles */
.widget-wrapper .loading_animation_container {
  border-radius: var(--border-radius);
}

/* WIP */
.box {
  background-color: #fdfdfd;
  border-radius: 0.625rem;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}

/*------------------------------------*\
  # COLOR PALETTE
\*------------------------------------*/
/* Background color accent */
.bg-color-accent-10 {
  background-color: var(--color-accent-10);
}

.bg-color-accent-20 {
  background-color: var(--color-accent-20);
}

.bg-color-accent-30 {
  background-color: var(--color-accent-30);
}

.bg-color-accent-40 {
  background-color: var(--color-accent-40);
}

.bg-color-accent-50 {
  background-color: var(--color-accent-50);
}

/* Background color brand */
.bg-color-brand-10 {
  background-color: var(--color-brand-10);
}

.bg-color-brand-20 {
  background-color: var(--color-brand-20);
}

.bg-color-brand-30 {
  background-color: var(--color-brand-30);
}

.bg-color-brand-40 {
  background-color: var(--color-brand-40);
}

.bg-color-brand-50 {
  background-color: var(--color-brand-50);
}

.bg-color-brand-60 {
  background-color: var(--color-brand-60);
}

.bg-color-brand-70 {
  background-color: var(--color-brand-70);
}

.bg-color-brand-80 {
  background-color: var(--color-brand-80);
}

.bg-color-brand-90 {
  background-color: var(--color-brand-90);
}

.bg-color-brand-100 {
  background-color: var(--color-brand-100);
}

/* Background color neutral */
.bg-color-neutral-10 {
  background-color: var(--color-neutral-10);
}

.bg-color-neutral-20 {
  background-color: var(--color-neutral-20);
}

.bg-color-neutral-30 {
  background-color: var(--color-neutral-30);
}

.bg-color-neutral-40 {
  background-color: var(--color-neutral-40);
}

.bg-color-neutral-50 {
  background-color: var(--color-neutral-50);
}

.bg-color-neutral-60 {
  background-color: var(--color-neutral-60);
}

.bg-color-neutral-70 {
  background-color: var(--color-neutral-70);
}

.bg-color-neutral-80 {
  background-color: var(--color-neutral-80);
}

.bg-color-neutral-90 {
  background-color: var(--color-neutral-90);
}

.bg-color-neutral-100 {
  background-color: var(--color-neutral-100);
}

/* Color neutral */
.color-neutral-10 {
  color: var(--color-neutral-10);
}

.color-neutral-20 {
  color: var(--color-neutral-20);
}

.color-neutral-30 {
  color: var(--color-neutral-30);
}

.color-neutral-40 {
  color: var(--color-neutral-40);
}

.color-neutral-50 {
  color: var(--color-neutral-50);
}

.color-neutral-60 {
  color: var(--color-neutral-60);
}

.color-neutral-70 {
  color: var(--color-neutral-70);
}

.color-neutral-80 {
  color: var(--color-neutral-80);
}

.color-neutral-90 {
  color: var(--color-neutral-90);
}

.color-neutral-100 {
  color: var(--color-neutral-100);
}

/* Background color misc. */
.bg-color-black {
  background-color: black;
}

.bg-color-white {
  background-color: white;
}

/* Color misc. */
.color-white {
  color: white;
}

.color-black {
  color: black;
}

/* Color UI */
.color-danger-10 {
  color: var(--color-danger-10);
}

.color-danger-20 {
  color: var(--color-danger-20);
}

.color-danger-30 {
  color: var(--color-danger-30);
}

.color-danger-90 {
  color: var(--color-danger-90);
}

.color-success-10 {
  color: var(--color-success-10);
}

.color-success-20 {
  color: var(--color-success-20);
}

.color-success-30 {
  color: var(--color-success-30);
}

.color-success-90 {
  color: var(--color-success-90);
}

.color-warning-10 {
  color: var(--color-warning-10);
}

.color-warning-90 {
  color: var(--color-warning-90);
}

.color-info-10 {
  color: var(--color-info-10);
}

.color-info-90 {
  color: var(--color-info-90);
}

/*
 * Custom CSS for screen readers and accessibility
 */
.is-visually-hidden {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}

/*
 * Hide elements like empty nav elements to prevent them from being focusable with tabbing
 */
.is-hidden {
  visibility: hidden;
}

/*
 * Add interaction styles to drag
 *
 * Commented out -moz styles because they aren't needed
 *
 * https://github.com/SortableJS/vue.draggable.next
 * https://mapyourshow.atlassian.net/browse/EXH-689
 */
.grabbable {
  cursor: move;
  cursor: grab;
  cursor: -webkit-grab;
}

.grabbable:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* visible hover for drag */
.grabbable:active,
.grabbable:hover {
  outline: var(--button-focus);
}

/*
 * FLOW
 * Handy utility for consistently setting vertical space and rhythm
 * Uses the lobotomized owl selector to add margin-top to siblings
 * Ideal for front-ends where components won't know what surrounds them
 *
 * https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties/
 */
:root {
  --flow-space: 1em;
}

.flow {
  --flow-space: 1em;
}

/*
 * Set a default for IE, browsers that understand custom properties will use --flow-space
 */
.flow > * + * {
  margin-top: 1em;
  margin-top: var(--flow-space);
}

/*
 * Remove the focus outline for mouse users
 * Preserve it for keyboard users with :focus-visible
 *
 * https://css-tricks.com/the-focus-visible-trick/
 * https://codepen.io/larimaza/pen/jOOpPOO
 * https://css-tricks.com/having-a-little-fun-with-custom-focus-styles/
 *
 * Firefox link focus-visible bug
 * https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox
 */
/* Focus with a mouse, touch or stylus */
/* Browsers have trouble interpreting this for inputs */
/* Focus with a keyboard */
*:focus-visible {
  outline: 3px solid #86BBED;
}

*:focus:not(:focus-visible) {
  outline: none;
}

hr {
  border: none;
  background-color: var(--color-neutral-70);
  height: 1px;
}

/* Boothsales order summary variation */
.o-OrderSummary_container hr {
  border: none;
  background-color: rgba(0, 0, 0, 0.1);
  height: 2px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.form--section-divider {
  margin-bottom: 0;
}

:root {
  --grid-gap: 1rem;
  --auto-grid-min-size: 12.5rem;
}

/*
* AUTO GRID (CSS GRID)
* Influenced by https://hankchizljaw.com/wrote/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/.
* The article above. Instead of the fallback stacking, the fallback is a flexbox grid.
*/
/* Commenting out fallbacks and @supports since grid is widely supported now */
/* Flexbox fallbacks */
.grid--auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: var(--grid-gap);
}

.grid--auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: var(--grid-gap);
}

.grid--auto-fill > *,
.grid--auto-fit > * {
  max-width: unset;
  margin: unset;
}

.grid--auto-fill > * + *,
.grid--auto-fit > * + * {
  margin-top: unset;
}

/* Used for columns of checkboxes or radios */
.grid--auto-form-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: var(--grid-gap);
  align-items: baseline;
}

/* Used for columns of checkboxes or radios */
.grid--auto-form-items.columns-small {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

/* Used for columns of checkboxes or radios */
.grid--auto-form-items.columns-medium {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

/* Used for columns of checkboxes or radios */
.grid--auto-form-items.columns-large {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

/*
* FLEXBOX COLUMNS LAYOUT
*/
/* Column container */
.columns {
  display: flex;
  margin-bottom: calc(16px + 1vw);
}

.columns-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(16px + 1vw);
}

/* Column container children */
.columns > *,
.columns-wrap > *,
.columns-l > *,
.columns-xl > * {
  margin: 0 calc(16px + 1vw) calc(16px + 1vw) 0;
}

/* Column container last child */
.columns > *:last-child,
.columns-wrap > *:last-child,
.columns-l > *:last-child,
.columns-xl > *:last-child {
  margin-right: 0;
}

@media screen and (min-width: 60em) {
  .columns-l {
    display: flex;
    margin-bottom: calc(16px + 1vw);
  }
}
@media screen and (min-width: 100em) {
  .columns-xl {
    display: flex;
    margin-bottom: calc(16px + 1vw);
  }
}
/* Flex Stretch Layout */
/**
* Outer "grid" layout using flexbox; keeps elements
* a consistent height in a row while allowing wrapping for additional
* elements
*/
.flex--auto-stretch {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /* Set the column width in the flex layout using --flex-col-sizing; value for
  column sizing should be scoped to pages or elements */
}
.flex--auto-stretch > * {
  flex: var(--flex-col-sizing);
  /* Remove height set on child elements, so they
  can stretch to the height of the parent */
  height: unset;
}

/* Exh dashboard custom styles */
.wrapper-inner {
  transition: grid-template-columns 0.3s ease-out;
}

@media screen and (min-width: 60em) {
  @supports (display: grid) {
    .wrapper-inner {
      display: grid;
      grid-template-columns: 22rem auto;
    }
  }
}
/*
 * Sidebar Section Styles
 */
/* NOTE: Used as a general outer wrapper to target elements inside of a sidebar on a page;
Exmaple: (http://exhdashv7.exh.mysdev.com/7_0/templates/upload-show-features/upload-artwork-logo.cfm) */
.sidebar-section h5 {
  text-transform: uppercase;
  margin-bottom: var(--spacing-20);
  margin-top: var(--spacing-0);
}

/* Boothsales-specific style */
.is-boothsales .wrapper-inner {
  display: block;
}

.l-sidebar-default {
  background-color: var(--color-white);
  padding: var(--spacing-30);
}

@media screen and (min-width: 60em) {
  .l-sidebar-default {
    border-right: 1px solid hsla(0, 0%, 0%, 0.1);
  }
}
.l-sidebar_nav {
  display: none;
  /* Override default Caffeine spacing */
  /* If a selected link has filters (ex. checklist) change the border radius */
  /* Sidebar main menu, e.g. main navigation options */
  /* Sidebar sub menu, e.g. checklist options */
  /* Hide any sort options in mobile menu since they will be shown in on-page modal */
  /* TWEAKPOINT, MUST MATCH BREAKPOINT OF SORT-CONTAINER-DESKTOP SHOWING/HIDING */
}
.l-sidebar_nav ul {
  list-style-type: none;
  margin-bottom: var(--spacing-50);
  padding-left: 0; /* Override default Caffeine spacing */
  max-width: none; /* Override default Caffeine spacing */
}
.l-sidebar_nav li {
  border-radius: 8px;
}
.l-sidebar_nav ul > li:not(:first-child) {
  margin-top: var(--spacing-0);
}
.l-sidebar_nav svg {
  margin-right: 12px;
  height: auto;
  width: auto;
  vertical-align: middle;
}
.l-sidebar_nav path {
  fill: var(--color-neutral-10);
}
.l-sidebar_nav a {
  color: var(--color-neutral-10);
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  padding: 12px 16px;
  width: 100%;
}
.l-sidebar_nav a:hover {
  text-decoration: none;
}
.l-sidebar_nav a:hover path {
  fill: var(--color-white);
}
.l-sidebar_nav .is-selected a {
  border-radius: var(--border-radius);
  color: var(--color-white);
}
.l-sidebar_nav .is-selected a path {
  fill: var(--color-white);
}
.l-sidebar_nav .is-selected:has(> form) a {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.l-sidebar_nav .button.button--sidebarToggle-close:hover {
  background: transparent;
}
.l-sidebar_nav .l-nav_primary .form--wrapper {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  margin-bottom: 0;
}
.l-sidebar_nav .l-nav_primary_submenu {
  padding-left: var(--spacing-50);
  margin-bottom: 0;
  padding-bottom: var(--spacing-30);
  color: var(--color-neutral-10);
  display: none;
}
.l-sidebar_nav .l-nav_primary_submenu li {
  padding: 8px 12px;
}
.l-sidebar_nav .l-nav_primary_submenu hr {
  height: 1px;
  border: 0;
}
@media screen and (min-width: 650px) {
  .l-sidebar_nav .l-nav_primary_submenu {
    display: block;
  }
}

/* New language section for language button in small screen menu (https://mapyourshow.atlassian.net/browse/EXHV7-513) */
.l-nav_secondary,
.l-nav_language {
  display: block;
}

/* New language section for language button in small screen menu (https://mapyourshow.atlassian.net/browse/EXHV7-513) */
@media screen and (min-width: 60em) {
  .l-nav_secondary,
  .l-nav_language {
    display: none;
  }
}
@media screen and (min-width: 60em) {
  .l-sidebar_nav {
    display: block;
  }
}
.l-sidebar_nav.is-open {
  display: block;
  margin-top: var(--spacing-30);
}

.l-sidebar-logo_wrapper {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-50) var(--spacing-50) var(--spacing-30) var(--spacing-50);
  align-items: center;
  min-height: 70px;
}

.l-sidebar_info {
  padding-bottom: var(--spacing-50);
}

@media screen and (min-width: 60em) {
  .l-sidebar-logo_wrapper {
    justify-content: center;
  }
}
.button--mobile-menu {
  display: block;
  position: relative;
  padding-left: 1em;
  padding-right: 1em;
  text-align: right;
  min-width: 108px;
  transition: all 0.2s ease 0s;
}

@media screen and (min-width: 60em) {
  .button--mobile-menu {
    display: none;
  }
}
.hamburger {
  display: block;
  position: absolute;
  top: 13px;
  left: 16px;
  width: 18px;
  height: 24px;
  z-index: 2;
}

.hamburger__inner {
  display: block;
  width: 24px;
  height: 3px;
  margin-top: 6px;
  transition: all 0.2s ease-in-out;
}

.hamburger__inner::before {
  top: 0;
}

.hamburger__inner::after {
  top: 12px;
}

.hamburger__inner::before,
.hamburger__inner::after {
  display: block;
  position: absolute;
  content: "";
  z-index: -1;
  width: 24px;
  height: 3px;
  transition: all 0.2s ease-in-out;
}

.hamburger--open .hamburger__inner {
  background: none;
}
.hamburger--open .hamburger__inner::before, .hamburger--open .hamburger__inner::after {
  top: 6px;
}
.hamburger--open .hamburger__inner::before {
  transform: rotate(-45deg);
}
.hamburger--open .hamburger__inner::after {
  transform: rotate(45deg);
}

.l-main_nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--spacing-50);
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  padding-bottom: var(--spacing-40);
  position: relative;
}

/* https://mapyourshow.atlassian.net/browse/EXHV7-842 */
@media screen and (max-width: 60em) {
  .l-main_nav {
    margin-bottom: var(--spacing-40);
  }
}
.l-main_nav_left {
  display: flex;
  flex-direction: column;
}

.l-main_nav_right {
  display: none;
  align-items: center;
  position: relative;
}

/* Show language button at small screens on login page (https://mapyourshow.atlassian.net/browse/EXHV7-462) */
.loginOnboard--exhdash_wrapper .l-main_nav_right {
  display: block;
}

@media screen and (min-width: 60em) {
  .l-main_nav_right {
    display: flex;
  }
}
.l-main-default {
  background-color: var(--color-neutral-90);
  padding: var(--spacing-40) var(--spacing-60) var(--spacing-60) var(--spacing-60);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* https://mapyourshow.atlassian.net/browse/EXHV7-842 */
@media screen and (max-width: 60em) {
  .l-main-default {
    padding: var(--spacing-20) var(--spacing-40) var(--spacing-30) var(--spacing-40);
  }
}
/* Boothsales-specific style (All non packages, non items booth sales pages) */
.is-boothsales .l-main-default {
  background-color: var(--color-neutral-100);
}

/* Boothsales-specific style (Packages and items pages) */
[data-boothsalesstep=packages] .l-main-default,
[data-boothsalesstep=items] .l-main-default {
  background-color: transparent;
}

/* https://mapyourshow.atlassian.net/browse/EXH-703 */
/* Header image (full width) */
.l-header-image_header {
  margin-inline-start: auto;
  margin-inline-end: auto;
  height: auto;
}

/* Header logo */
.l-header-image_logo {
  margin: 0 auto;
  height: auto;
}

/* Container for Header logo / language selector button (https://mapyourshow.atlassian.net/browse/EXHV7-462) */
.l-headerimage-language_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

@media screen and (min-width: 30.063em) {
  .l-headerimage-language_container {
    display: block;
  }
}
/* https://mapyourshow.atlassian.net/browse/EXHV7-904: testing markup + style solution */
.l-headerimage-language_container .l-header-image_wrapper:only-child {
  margin-inline: auto;
}

/* Boothsales modifier for header image (full width) */
footer {
  color: var(--color-neutral-30);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: var(--spacing-60);
}

.l-widget--wrapper {
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
  grid-gap: 1.5rem;
}

/* Sidebar toggle open / closed styles */
/* Sidebar closed, using data attribute */
[data-sidebarmenunopen=false] .wrapper-inner {
  grid-template-columns: 5.5rem auto;
}
[data-sidebarmenunopen=false] .l-sidebar-default {
  text-align: center;
}
[data-sidebarmenunopen=false] .l-sidebar_search {
  border: 0;
}
[data-sidebarmenunopen=false] .l-sidebar_search .form--wrapper {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}
[data-sidebarmenunopen=false] .l-sidebar_search input {
  background-color: transparent;
}
[data-sidebarmenunopen=false] .l-sidebar_nav svg {
  margin-right: 0;
}
[data-sidebarmenunopen=false] .l-sidebar_info {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}
[data-sidebarmenunopen=false] .l-nav_primary .link-text_nav {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}
[data-sidebarmenunopen=false] .button--sidebarToggle-close {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}
[data-sidebarmenunopen=false] .l-nav_primary_submenu {
  display: none;
}

/* Sidebar open, using data attribute */
[data-sidebarmenunopen=true] .button--sidebarToggle-open {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}

/* Close sidebar button */
.button--sidebarToggle-close {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
  font-weight: var(--fw-bold);
  color: var(--color-neutral-10);
  padding: 12px 16px;
}

/* Open sidebar button */
.button--sidebarToggle-open {
  padding: 12px 16px;
}

@media screen and (min-width: 60em) {
  .button--sidebarToggle-close {
    display: block;
    clip: initial;
    position: initial;
    margin-top: 8rem;
  }
  .button--sidebarToggle-open {
    margin-top: 8rem;
  }
}
/**
 * Utilities for Flex/Grid Gap (copied from
 * /Volumes/MYSData/Development/Dev/MYS/admin.mapyourshow.com/wwwroot/6_0/assets/_sass/_utilities.scss
 */
.gap-0 {
  gap: var(--spacing-00);
}

.gap-10 {
  gap: var(--spacing-10);
}

.gap-20 {
  gap: var(--spacing-20);
}

.gap-30 {
  gap: var(--spacing-30);
}

.gap-40 {
  gap: var(--spacing-40);
}

.gap-50 {
  gap: var(--spacing-50);
}

.gap-60 {
  gap: var(--spacing-60);
}

.gap-70 {
  gap: var(--spacing-70);
}

.gap-80 {
  gap: var(--spacing-80);
}

.gap-90 {
  gap: var(--spacing-90);
}

/* Error page include (/Volumes/Development/MYS/exh.mapyourshow.com/wwwroot/7_0/includes/error.cfm) */
#l-errorPage_main {
  background-color: var(--color-neutral-90);
  padding: var(--spacing-40) var(--spacing-60) var(--spacing-60) var(--spacing-60);
}

.region {
  padding-top: var(--spacing-60);
  padding-bottom: var(--spacing-60);
}

.split-pair {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-40);
}

/* Modifying caffiene base styles to improve mobile view */
.data-pair {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  height: auto;
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}

/* Some proof page data does not have a key and value
 * Product catgories use a table
 * Match the border style of .data-pair
 */
.info--exhdash_Proof td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Data Pairs (key and value)
 * For proofing, confirmation pages like - First Name Value
 */
.data-pair--key {
  color: #555;
}

.data-pair--value {
  font-weight: var(--fw-medium);
  color: var(--color-neutral-10);
}

/* Used when only a single item (only key or only value) is needed,
 * such as Proof page georegions or exh categories
 */
.data-pair--single {
  color: var(--color-black);
  font-weight: var(--fw-medium);
}

@media screen and (min-width: 60em) {
  .data-pair {
    display: flex;
    min-height: 40px;
    align-items: center;
  }
  .data-pair--key {
    margin-right: var(--spacing-20);
    width: 175px;
    text-align: left;
  }
}
svg {
  display: inline-block;
  height: auto;
  width: auto;
}

/* Allow SVGs in boothsales packages table to size automatically */
/* ==========================================================================*\
   $TABLES
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * Basic table styles
 * Table Simulated
 * Grid table layout (Mobile first test)
 * Grid table layout (Desktop first test)
 * Handsontable overrides
 */
/* ==========================================================================*\
   $ Basic table styles
\* ==========================================================================*/
table {
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--font-size-7);
  font-variant-numeric: tabular-nums;
  table-layout: fixed; /* optimize table rendering, renders one row at a time */
  border-radius: 8px;
}

caption {
  margin-bottom: var(--spacing-30);
  text-align: left;
}

th {
  font-weight: bold;
}

td,
th {
  border-bottom: 1px solid var(--color-neutral-80);
  padding: var(--spacing-20) var(--spacing-30);
  text-align: left;
}

/* Modifier
 * Striped Table - style odd rows with a contrasting background color
 */
.table--striped tbody tr:nth-child(odd) {
  background-color: var(--color-neutral-80);
}

/* Modifier
 * Compact Table - style odd rows with a contrasting background color
 */
.table--compact td,
.table--compact th {
  padding: var(--spacing-10) var(--spacing-30);
}

/* Modifier
 * Scroll Table - allow tables with many columns to scroll on small screens
 * ADD TO <table> ELEMENT
 * Gradient: https://jsfiddle.net/3oxq1ju6/1/
 */
.table--scroll {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0));
  /* Shadow covers */
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
  border-radius: 8px;
  /* https://mapyourshow.atlassian.net/browse/EXHV7-521: stops long strings in elements added by ckeditor from overflowing the table cell boundaries */
}
.table--scroll :where(h2, h3, h4, p, ol, ul) {
  max-width: none;
}

/* Modifier
 * Scroll Table - allow tables with many columns to scroll on small screens
 * Gradient: https://jsfiddle.net/3oxq1ju6/1/
 */
.table--specs {
  display: block;
  white-space: nowrap;
}

.table--specs tr:nth-child(odd) {
  background-color: var(--color-neutral-80);
}

/* Modifier
 * Responsive Table
 * Add to .table--scroll element to make table more responsive
 * ADD TO ELEMENT SURROUNDING <table>
 * Solution found here: https://stackoverflow.com/questions/2259189/table-overflowing-outside-of-div
 */
.table--responsive {
  --min-table-width: 200px;
  display: grid;
  grid-template-columns: minmax(var(--min-table-width), 1fr);
  max-width: -moz-max-content;
  max-width: max-content;
}

/* Modifier for allowing table to fit to content (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1471) */
.table--layout_auto {
  table-layout: auto;
}

/* Modifier for white-space:nowrap for tables to override user style sheet (https://mapyourshow.atlassian.net/browse/BOOTHSALES-1471) */
.white-space-nowrap {
  white-space: nowrap;
}

/**
 * TABLE GRADIENT
 */
/* These classes get added dynamically via js tables based on thier height and width (https://mapyourshow.atlassian.net/browse/SC-25) */
.table--gradient_vertical::after {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  bottom: 0;
  content: "";
  display: block;
  height: 150px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.table--gradient_horizontal::before {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
  content: "";
  display: block;
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  z-index: 10;
}

/* ==========================================================================*\
   $ TABLE SIMULATED (For making non table markup appear like a table
\* ==========================================================================*/
/* Taken from (https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/table/) */
/* Added on https://mapyourshow.atlassian.net/browse/BOOTHSALES-1480 */
/* Add .table--simulated to outer role="table" element */
.table--simulated[role=table] {
  display: table;
  width: 100%;
  font-size: var(--font-size-7);
  border-collapse: collapse;
}

.table--simulated [role=rowgroup] {
  width: 100%;
  padding: 0 10px;
}
.table--simulated [role=table] > div[id] {
  display: table-caption;
}
.table--simulated [role=row] {
  display: table-row;
  width: 100%;
  border-bottom: 1px solid var(--color-neutral-80);
}
.table--simulated [role=row]:last-of-type {
  border-bottom: 0;
}
.table--simulated [role=cell],
.table--simulated [role=columnheader] {
  display: table-cell;
  padding: var(--spacing-20) var(--spacing-30);
  text-align: left;
  min-width: 8em;
  vertical-align: middle;
}
.table--simulated [role=columnheader] {
  font-weight: bold;
  border-bottom: 1px solid var(--color-neutral-80);
}

/* ==========================================================================*\
   $ GRID TABLE LAYOUT (MOBILE FIRST TEST)
\* ==========================================================================*/
/* ==========================================================================*\
   $ GRID TABLE LAYOUT (DESKTOP FIRST TEST)
\* ==========================================================================*/
/* Add to individual elements that represent the table row */
.grid-table__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: center;
  color: var(--color-neutral-20);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Add .grid-table__head to wrapper around the table header row;
These styles aligns the grid table header buttons in the header row*/
.grid-table__head .col-1,
.grid-table__head .col-2,
.grid-table__head .col-3 {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Add border-top to just the table body rows, not the header */
.grid-table__body .grid-table__row {
  border-top: 1px solid #eeeeee;
}

/* Set column widths with row modifier;
modifier name describes space taken up in a row with 12 available columns */
.row--5-5-2 .col-1 {
  grid-column: 1/6;
}
.row--5-5-2 .col-2 {
  grid-column: 6/11;
}
.row--5-5-2 .col-3 {
  grid-column: 11/-1;
}

/* Resets for the SVG element, so we can override the default sizing and add fill
within each cell inside the table's body */
.col-1 svg,
.col-2 svg,
.col-3 svg {
  width: unset;
  height: unset;
  fill: var(--color-neutral-20);
}

/** Shift table layout to row header layout
  * (Idea taken from here: https://stackoverflow.com/questions/63809449/responsive-html-table-with-repeating-headers-each-row )
  **/
@media screen and (max-width: 30em) {
  .collapsed--rows#how-do-i-rank-table .col-1:before {
    content: "Product Category: ";
  }
  .collapsed--rows#how-do-i-rank-table .col-2:before {
    content: "Percentage: ";
  }
  .collapsed--rows#how-do-i-rank-table .col-3:before {
    content: "Ranking: ";
  }
  .collapsed--rows [role=cell]:before {
    font-weight: var(--fw-bold);
    display: block;
    margin-bottom: var(--spacing-10);
  }
  .collapsed--rows .grid-table__head {
    visibility: collapse;
    position: absolute;
    height: 1px;
    overflow: hidden;
  }
  .collapsed--rows .grid-table__head .button--header {
    content: attr(disabled);
  }
  .collapsed--rows .grid-table__body .grid-table__row:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .collapsed--rows .grid-table__body .grid-table__row:last-child {
    padding-bottom: 0;
  }
  .collapsed--rows .grid-table__row {
    grid-template-columns: unset;
    row-gap: 1rem;
  }
  .collapsed--rows .grid-table__row [role=cell] {
    text-align: left;
  }
  .collapsed--rows .row--5-5-2 .col-1,
  .collapsed--rows .row--5-5-2 .col-2,
  .collapsed--rows .row--5-5-2 .col-3 {
    grid-column: span 1;
  }
}
/* ==========================================================================*\
   $ Handsontable overrides
\* ==========================================================================*/
/*  https://handsontable.com/docs/javascript-data-grid/api/xc */
/* Change table text color */
.handsontable table .htDimmed {
  color: var(--color-neutral-20);
}

/* ==========================================================================*\
   $TABS
\* ==========================================================================*/
.o-Tab_Wrapper {
  display: block;
  margin: 0;
  vertical-align: top;
}

/**
   * UL <ul> ELEMENT
   */
.o-Tab_Nav {
  background: transparent;
  border-bottom: 1px solid var(--color-neutral-70);
  margin: 0;
  padding: 0;
  padding-left: 0;
  display: inline-block;
  max-width: 100%;
}
.o-Tab_Nav .o-Tab_NavItem.selected {
  border-bottom: none;
  font-weight: bold;
}
.o-Tab_Nav .o-Tab_NavItem.selected:hover, .o-Tab_Nav .o-Tab_NavItem.selected:focus {
  opacity: 1;
}
.o-Tab_Nav .o-Tab_NavItem.selected a, .o-Tab_Nav .o-Tab_NavItem.selected button {
  font-weight: 700;
}

.no-flexbox .o-Tab_Nav {
  display: block;
}

/**
   * LIST <li> ELEMENT
   */
.o-Tab_NavItem {
  list-style: none;
  margin: 0 2px 0 0;
  text-align: center;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  display: inline-block;
}
.o-Tab_NavItem a,
.o-Tab_NavItem a:link,
.o-Tab_NavItem .o-Tab_NavLink {
  color: var(--color-neutral-20);
  display: block;
  overflow-wrap: break-word;
  padding: 12px 8px 8px;
  text-decoration: none;
  border: 0;
  background: unset;
  border-radius: 0;
  line-height: 1.5;
}
@media screen and (min-width: 30.063em) {
  .o-Tab_NavItem a,
  .o-Tab_NavItem a:link,
  .o-Tab_NavItem .o-Tab_NavLink {
    overflow-wrap: normal;
    padding: 12px 12px 8px;
  }
}
@media screen and (min-width: 60em) {
  .o-Tab_NavItem a,
  .o-Tab_NavItem a:link,
  .o-Tab_NavItem .o-Tab_NavLink {
    padding: 12px 16px 8px;
  }
}
.o-Tab_NavItem a:active,
.o-Tab_NavItem a:link:active,
.o-Tab_NavItem .o-Tab_NavLink:active {
  box-shadow: none;
  transform: none;
}
.o-Tab_NavItem a:hover,
.o-Tab_NavItem button:hover {
  border-bottom: 4px solid var(--color-neutral-50);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
}
.o-Tab_NavItem:focus {
  outline: none;
}

/* Fix for <a> within a tab being too tall and taking up most of the page, seen on tabs within report pages - http://jira.mysprod.com:8080/browse/MYSADMIN-2284 */
@media screen and (min-width: 700px) {
  .o-Tab_NavItem.selected a,
  .o-Tab_NavItem.selected a:link,
  .o-Tab_NavItem a,
  .o-Tab_NavItem a:link,
  .o-Tab_NavItem .c-Tab_NavLink {
    padding: 12px 12px 8px;
    height: auto;
  }
}
/* Fix for tab container border showing on top, left and right, seen on tabs within report pages - http://jira.mysprod.com:8080/browse/MYSADMIN-2284 */
.o-Tab_Nav {
  background: transparent;
  border-bottom: 1px solid #ccc;
  margin: 0;
  padding: 0;
  display: inline-block;
  border-top: none;
  border-left: none;
  border-right: none;
}

/* Fix for tab font weight, seen on tabs within report pages - http://jira.mysprod.com:8080/browse/MYSADMIN-2284 */
.ui-widget-header .o-Tab_NavLink {
  font-weight: normal;
  color: #333;
}

/**
	 * If there are less than 5 tabs make them all the same width
	 * http://codepen.io/mattlubner/pen/RWPYdx
	 */
/*

/**
	 * If flexbox isn't available make tabs inline-block
	 */
.no-flexbox .o-Tab_NavItem {
  display: inline-block;
  margin: 0 0 0 -1px;
}

/**
   * SELECTED TAB LINK
   */
.o-Tab_NavItem.selected {
  background: transparent;
}
.o-Tab_NavItem.selected a,
.o-Tab_NavItem.selected a:link,
.o-Tab_NavItem.selected .o-Tab_NavLink {
  color: var(--color-neutral-20);
}
@media screen and (min-width: 30.063em) {
  .o-Tab_NavItem.selected a,
  .o-Tab_NavItem.selected a:link,
  .o-Tab_NavItem.selected .o-Tab_NavLink {
    padding: 12px 12px 8px;
  }
}
.o-Tab_NavItem.selected a:hover {
  cursor: not-allowed;
  background: transparent;
  pointer-events: not-allowed;
}

/**
   * TAB CONTENT
   */
/**
   * For situations where there's a table inside of tabs remove the
   * left/right padding on small screens so striped search results go edge to edge
   */
/**
   * Fallback when tabs can't fit on the screen, Javascript will control showing or hiding this select element
   */
/**
  * Wrapping Tabs Styles
  * (Styles tabs as buttons in a flexbox - Toggled using JS on page load)
  * Works with both <button> and <a> elements used as tabs
  */
[data-tabswrapping=true] .o-Tab_nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: 0;
}
[data-tabswrapping=true] .o-Tab_NavItem {
  margin-top: 0; /* Keep margin top off <li> elements to let flexbox control spacing with gap */
}
[data-tabswrapping=true] .o-Tab_NavItem.selected .o-Tab_NavLink {
  border-width: unset;
  padding: 0.75em 1.5em;
  background: var(--color-neutral-80);
  color: var(--color-neutral-10);
  font-weight: normal;
}
[data-tabswrapping=true] .o-Tab_NavItem .o-Tab_NavLink {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-10);
  border-radius: var(--button-radius);
  color: var(--color-neutral-10);
  font-size: var(--font-size-6);
  overflow: visible; /* Reset, Edge hides overflow */
  padding: 0.75em 1.5em; /* Use em so button sizes get proportional padding */
  transition: background 250ms ease; /* animate transition for background color changes */
  white-space: nowrap;
}
[data-tabswrapping=true] .o-Tab_NavItem .o-Tab_NavLink:hover {
  background: var(--color-neutral-80);
  color: var(--color-neutral-10);
  text-decoration: none;
}

.wrapper {
  max-width: var(--wrapper-wide-max-width);
  padding: 0px;
}

/* Boothsales-specific <body> class */
.is-boothsales .wrapper {
  max-width: 70.25rem; /* 1124px */
  padding: var(--spacing-70) 0;
  margin-left: auto;
  margin-right: auto;
}

/* Boothsales-specific <body> class */
.is-boothsales .wrapper-wide {
  max-width: 87.5rem;
  padding: var(--spacing-70) 0;
  margin-left: auto;
  margin-right: auto;
}

/* Sponsorships page-specific wrapper class */
.sponsorships .wrapper {
  max-width: 70.25rem; /* 1124px */
  margin-left: auto;
  margin-right: auto;
}

/* https://mapyourshow.atlassian.net/browse/EXH-675 */
@media screen and (min-width: 100em) {
  body:has(.center-layout-xl) {
    background: var(--color-neutral-100);
  }
  .wrapper:has(.center-layout-xl) {
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
}
/* Spacing */
.ma0 {
  margin: var(--spacing-00);
}

.ma1 {
  margin: var(--spacing-10);
}

.ma2 {
  margin: var(--spacing-20);
}

.ma3 {
  margin: var(--spacing-30);
}

.ma4 {
  margin: var(--spacing-40);
}

.ma5 {
  margin: var(--spacing-50);
}

.ma6 {
  margin: var(--spacing-60);
}

.ma7 {
  margin: var(--spacing-70);
}

.ma8 {
  margin: var(--spacing-80);
}

.ma9 {
  margin: var(--spacing-90);
}

.ml0 {
  margin-left: var(--spacing-00);
}

.ml1 {
  margin-left: var(--spacing-10);
}

.ml2 {
  margin-left: var(--spacing-20);
}

.ml3 {
  margin-left: var(--spacing-30);
}

.ml4 {
  margin-left: var(--spacing-40);
}

.ml5 {
  margin-left: var(--spacing-50);
}

.ml6 {
  margin-left: var(--spacing-60);
}

.ml7 {
  margin-left: var(--spacing-70);
}

.ml8 {
  margin-left: var(--spacing-80);
}

.ml9 {
  margin-left: var(--spacing-90);
}

.mr0 {
  margin-right: var(--spacing-00);
}

.mr1 {
  margin-right: var(--spacing-10);
}

.mr2 {
  margin-right: var(--spacing-20);
}

.mr3 {
  margin-right: var(--spacing-30);
}

.mr4 {
  margin-right: var(--spacing-40);
}

.mr5 {
  margin-right: var(--spacing-50);
}

.mr6 {
  margin-right: var(--spacing-60);
}

.mr7 {
  margin-right: var(--spacing-70);
}

.mr8 {
  margin-right: var(--spacing-80);
}

.mr8 {
  margin-right: var(--spacing-80);
}

.mr9 {
  margin-right: var(--spacing-90);
}

.mb0 {
  margin-bottom: var(--spacing-00);
}

.mb1 {
  margin-bottom: var(--spacing-10);
}

.mb2 {
  margin-bottom: var(--spacing-20);
}

.mb3 {
  margin-bottom: var(--spacing-30);
}

.mb4 {
  margin-bottom: var(--spacing-40);
}

.mb5 {
  margin-bottom: var(--spacing-50);
}

.mb6 {
  margin-bottom: var(--spacing-60);
}

.mb7 {
  margin-bottom: var(--spacing-70);
}

.mb8 {
  margin-bottom: var(--spacing-80);
}

.mb9 {
  margin-bottom: var(--spacing-90);
}

.mt0 {
  margin-top: var(--spacing-00);
}

.mt1 {
  margin-top: var(--spacing-10);
}

.mt2 {
  margin-top: var(--spacing-20);
}

.mt3 {
  margin-top: var(--spacing-30);
}

.mt4 {
  margin-top: var(--spacing-40);
}

.mt5 {
  margin-top: var(--spacing-50);
}

.mt6 {
  margin-top: var(--spacing-60);
}

.mt7 {
  margin-top: var(--spacing-70);
}

.mt8 {
  margin-top: var(--spacing-80);
}

.mt9 {
  margin-top: var(--spacing-90);
}

@media screen and (max-width: 30em) {
  .mb0-ns {
    margin-bottom: var(--spacing-00);
  }
  .mb1-ns {
    margin-bottom: var(--spacing-10);
  }
  .mb2-ns {
    margin-bottom: var(--spacing-20);
  }
  .mb3-ns {
    margin-bottom: var(--spacing-30);
  }
  .mb4-ns {
    margin-bottom: var(--spacing-40);
  }
}
@media screen and (min-width: 60em) {
  .ma0-l {
    margin: var(--spacing-00);
  }
  .ma1-l {
    margin: var(--spacing-10);
  }
  .ma2-l {
    margin: var(--spacing-20);
  }
  .ma3-l {
    margin: var(--spacing-30);
  }
  .ma4-l {
    margin: var(--spacing-40);
  }
  .ma5-l {
    margin: var(--spacing-50);
  }
  .ma6-l {
    margin: var(--spacing-60);
  }
  .ma7-l {
    margin: var(--spacing-70);
  }
  .ma8-l {
    margin: var(--spacing-80);
  }
  .ma9-l {
    margin: var(--spacing-90);
  }
  .ml0-l {
    margin-left: var(--spacing-00);
  }
  .ml1-l {
    margin-left: var(--spacing-10);
  }
  .ml2-l {
    margin-left: var(--spacing-20);
  }
  .ml3-l {
    margin-left: var(--spacing-30);
  }
  .ml4-l {
    margin-left: var(--spacing-40);
  }
  .ml5-l {
    margin-left: var(--spacing-50);
  }
  .ml6-l {
    margin-left: var(--spacing-60);
  }
  .ml7-l {
    margin-left: var(--spacing-70);
  }
  .ml8-l {
    margin-left: var(--spacing-80);
  }
  .ml9-l {
    margin-left: var(--spacing-90);
  }
  .mr0-l {
    margin-right: var(--spacing-00);
  }
  .mr1-l {
    margin-right: var(--spacing-10);
  }
  .mr2-l {
    margin-right: var(--spacing-20);
  }
  .mr3-l {
    margin-right: var(--spacing-30);
  }
  .mr4-l {
    margin-right: var(--spacing-40);
  }
  .mr5-l {
    margin-right: var(--spacing-50);
  }
  .mr6-l {
    margin-right: var(--spacing-60);
  }
  .mr7-l {
    margin-right: var(--spacing-70);
  }
  .mr8-l {
    margin-right: var(--spacing-80);
  }
  .mr9-l {
    margin-right: var(--spacing-90);
  }
  .mb0-l {
    margin-bottom: var(--spacing-00);
  }
  .mb1-l {
    margin-bottom: var(--spacing-10);
  }
  .mb2-l {
    margin-bottom: var(--spacing-20);
  }
  .mb3-l {
    margin-bottom: var(--spacing-30);
  }
  .mb4-l {
    margin-bottom: var(--spacing-40);
  }
  .mb5-l {
    margin-bottom: var(--spacing-50);
  }
  .mb6-l {
    margin-bottom: var(--spacing-60);
  }
  .mb7-l {
    margin-bottom: var(--spacing-70);
  }
  .mb8-l {
    margin-bottom: var(--spacing-80);
  }
  .mb9-l {
    margin-bottom: var(--spacing-90);
  }
  .mt0-l {
    margin-top: var(--spacing-00);
  }
  .mt1-l {
    margin-top: var(--spacing-10);
  }
  .mt2-l {
    margin-top: var(--spacing-20);
  }
  .mt3-l {
    margin-top: var(--spacing-30);
  }
  .mt4-l {
    margin-top: var(--spacing-40);
  }
  .mt5-l {
    margin-top: var(--spacing-50);
  }
  .mt6-l {
    margin-top: var(--spacing-60);
  }
  .mt7-l {
    margin-top: var(--spacing-70);
  }
  .mt8-l {
    margin-top: var(--spacing-80);
  }
  .mt9-l {
    margin-top: var(--spacing-90);
  }
}
/*
 * Measure
 * Adapted from tachyons - use ch unit, not em
 */
.measure-narrow > * {
  max-width: 45ch;
}

.measure > * {
  max-width: 65ch;
}

.measure-wide > * {
  max-width: 80ch;
}

.pa0 {
  padding: var(--spacing-00);
}

.pa1 {
  padding: var(--spacing-10);
}

.pa2 {
  padding: var(--spacing-20);
}

.pa3 {
  padding: var(--spacing-30);
}

.pa4 {
  padding: var(--spacing-40);
}

.pa5 {
  padding: var(--spacing-50);
}

.pa6 {
  padding: var(--spacing-60);
}

.pa7 {
  padding: var(--spacing-70);
}

.pa8 {
  padding: var(--spacing-80);
}

.pa9 {
  padding: var(--spacing-90);
}

.pl0 {
  padding-left: var(--spacing-00);
}

.pl1 {
  padding-left: var(--spacing-10);
}

.pl2 {
  padding-left: var(--spacing-20);
}

.pl3 {
  padding-left: var(--spacing-30);
}

.pl4 {
  padding-left: var(--spacing-40);
}

.pl5 {
  padding-left: var(--spacing-50);
}

.pl6 {
  padding-left: var(--spacing-60);
}

.pl7 {
  padding-left: var(--spacing-70);
}

.pl8 {
  padding-left: var(--spacing-80);
}

.pl9 {
  padding-left: var(--spacing-90);
}

.pr0 {
  padding-right: var(--spacing-00);
}

.pr1 {
  padding-right: var(--spacing-10);
}

.pr2 {
  padding-right: var(--spacing-20);
}

.pr3 {
  padding-right: var(--spacing-30);
}

.pr4 {
  padding-right: var(--spacing-40);
}

.pr5 {
  padding-right: var(--spacing-50);
}

.pr6 {
  padding-right: var(--spacing-60);
}

.pr7 {
  padding-right: var(--spacing-70);
}

.pr8 {
  padding-right: var(--spacing-80);
}

.pr9 {
  padding-right: var(--spacing-90);
}

.pb0 {
  padding-bottom: var(--spacing-00);
}

.pb1 {
  padding-bottom: var(--spacing-10);
}

.pb2 {
  padding-bottom: var(--spacing-20);
}

.pb3 {
  padding-bottom: var(--spacing-30);
}

.pb4 {
  padding-bottom: var(--spacing-40);
}

.pb5 {
  padding-bottom: var(--spacing-50);
}

.pb6 {
  padding-bottom: var(--spacing-60);
}

.pb7 {
  padding-bottom: var(--spacing-70);
}

.pb8 {
  padding-bottom: var(--spacing-80);
}

.pb9 {
  padding-bottom: var(--spacing-90);
}

.pt0 {
  padding-top: var(--spacing-00);
}

.pt1 {
  padding-top: var(--spacing-10);
}

.pt2 {
  padding-top: var(--spacing-20);
}

.pt3 {
  padding-top: var(--spacing-30);
}

.pt4 {
  padding-top: var(--spacing-40);
}

.pt5 {
  padding-top: var(--spacing-50);
}

.pt6 {
  padding-top: var(--spacing-60);
}

.pt7 {
  padding-top: var(--spacing-70);
}

.pt8 {
  padding-top: var(--spacing-80);
}

.pt9 {
  padding-top: var(--spacing-90);
}

@media screen and (min-width: 60em) {
  .pa0-l {
    padding: var(--spacing-00);
  }
  .pa1-l {
    padding: var(--spacing-10);
  }
  .pa2-l {
    padding: var(--spacing-20);
  }
  .pa3-l {
    padding: var(--spacing-30);
  }
  .pa4-l {
    padding: var(--spacing-40);
  }
  .pa5-l {
    padding: var(--spacing-50);
  }
  .pa6-l {
    padding: var(--spacing-60);
  }
  .pa7-l {
    padding: var(--spacing-70);
  }
  .pa8-l {
    padding: var(--spacing-80);
  }
  .pa9-l {
    padding: var(--spacing-90);
  }
  .pl0-l {
    padding-left: var(--spacing-00);
  }
  .pl1-l {
    padding-left: var(--spacing-10);
  }
  .pl2-l {
    padding-left: var(--spacing-20);
  }
  .pl3-l {
    padding-left: var(--spacing-30);
  }
  .pl4-l {
    padding-left: var(--spacing-40);
  }
  .pl5-l {
    padding-left: var(--spacing-50);
  }
  .pl6-l {
    padding-left: var(--spacing-60);
  }
  .pl7-l {
    padding-left: var(--spacing-70);
  }
  .pl8-l {
    padding-left: var(--spacing-80);
  }
  .pl9-l {
    padding-left: var(--spacing-90);
  }
  .pr0-l {
    padding-right: var(--spacing-00);
  }
  .pr1-l {
    padding-right: var(--spacing-10);
  }
  .pr2-l {
    padding-right: var(--spacing-20);
  }
  .pr3-l {
    padding-right: var(--spacing-30);
  }
  .pr4-l {
    padding-right: var(--spacing-40);
  }
  .pr5-l {
    padding-right: var(--spacing-50);
  }
  .pr6-l {
    padding-right: var(--spacing-60);
  }
  .pr7-l {
    padding-right: var(--spacing-70);
  }
  .pr8-l {
    padding-right: var(--spacing-80);
  }
  .pr9-l {
    padding-right: var(--spacing-90);
  }
  .pb0-l {
    padding-bottom: var(--spacing-00);
  }
  .pb1-l {
    padding-bottom: var(--spacing-10);
  }
  .pb2-l {
    padding-bottom: var(--spacing-20);
  }
  .pb3-l {
    padding-bottom: var(--spacing-30);
  }
  .pb4-l {
    padding-bottom: var(--spacing-40);
  }
  .pb5-l {
    padding-bottom: var(--spacing-50);
  }
  .pb6-l {
    padding-bottom: var(--spacing-60);
  }
  .pb7-l {
    padding-bottom: var(--spacing-70);
  }
  .pb8-l {
    padding-bottom: var(--spacing-80);
  }
  .pb9-l {
    padding-bottom: var(--spacing-90);
  }
  .pt0-l {
    padding-top: var(--spacing-00);
  }
  .pt1-l {
    padding-top: var(--spacing-10);
  }
  .pt2-l {
    padding-top: var(--spacing-20);
  }
  .pt3-l {
    padding-top: var(--spacing-30);
  }
  .pt4-l {
    padding-top: var(--spacing-40);
  }
  .pt5-l {
    padding-top: var(--spacing-50);
  }
  .pt6-l {
    padding-top: var(--spacing-60);
  }
  .pt7-l {
    padding-top: var(--spacing-70);
  }
  .pt8-l {
    padding-top: var(--spacing-80);
  }
  .pt9-l {
    padding-top: var(--spacing-90);
  }
}
/* Tachyons */
/*

   DISPLAY
   Docs: http://tachyons.io/docs/layout/display

   Base:
    d = display

   Modifiers:
    n     = none
    b     = block
    ib    = inline-block
    it    = inline-table
    t     = table
    tc    = table-cell
    t-row          = table-row
    t-columm       = table-column
    t-column-group = table-column-group

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.dn {
  display: none;
}

.di {
  display: inline;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

/*
  This will set table to full width and then
  all cells will be equal width
*/
/*

  FLEXBOX

  Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

*/
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* 1. Fix for Chrome 44 bug.
 * https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
  flex: 1 1 auto;
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
}

.flex-none {
  flex: none;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

@media screen and (max-width: 30em) {
  .flex-ns {
    display: flex;
  }
  .flex-wrap-ns {
    flex-wrap: wrap;
  }
  .flex-nowrap-ns {
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 30.063em) {
  .flex-m {
    display: flex;
  }
  .flex-column-m {
    flex-direction: column;
  }
  .flex-row-m {
    flex-direction: row;
  }
  .flex-wrap-m {
    flex-wrap: wrap;
  }
  .flex-nowrap-m {
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 60em) {
  .flex-l {
    display: flex;
  }
  .flex-column-l {
    flex-direction: column;
  }
  .flex-row-l {
    flex-direction: row;
  }
  .flex-wrap-l {
    flex-wrap: wrap;
  }
  .flex-nowrap-l {
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 100em) {
  .flex-xl {
    display: flex;
  }
}
/*

   FONT WEIGHT
   Docs: http://tachyons.io/docs/typography/font-weight/

   Base
     fw = font-weight

   Modifiers:
     1 = literal value 100
     2 = literal value 200
     3 = literal value 300
     4 = literal value 400
     5 = literal value 500
     6 = literal value 600
     7 = literal value 700
     8 = literal value 800
     9 = literal value 900

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.normal, .fw-normal {
  font-weight: var(--fw-normal);
}

.fw-medium {
  font-weight: var(--fw-medium);
}

.b, .fw-bold {
  font-weight: var(--fw-bold);
}

/*

   MAX WIDTHS
   Docs: http://tachyons.io/docs/layout/max-widths/

   Base:
     mw = max-width

   Modifiers (SEE PUBLIC/SAS/_MAX_WIDTHS.SCC FOR MAX WIDTH SCALE VARS)
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale
     6 = 6st step in width scale
     7 = 7nd step in width scale
     8 = 8rd step in width scale
     9 = 9th step in width scale

     -100 = literal value 100%

     -none  = string value none


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Max Width Percentages */
.mw-100 {
  max-width: 100%;
}

/* Max Width Scale */
.mw1 {
  max-width: var(--mw1);
}

.mw2 {
  max-width: var(--mw2);
}

.mw3 {
  max-width: var(--mw3);
}

.mw4 {
  max-width: var(--mw4);
}

.mw5 {
  max-width: var(--mw5);
}

.mw6 {
  max-width: var(--mw6);
}

.mw7 {
  max-width: var(--mw7);
}

.mw8 {
  max-width: var(--mw8);
}

.mw9 {
  max-width: var(--mw9);
}

/* Max Width String Properties */
.mw-none {
  max-width: none;
}

@media screen and (min-width: 60em) {
  .mw4-l {
    max-width: var(--mw4);
  }
  .mw5-l {
    max-width: var(--mw5);
  }
}
/*

   POSITIONING
   Docs: http://tachyons.io/docs/layout/position/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

@media screen and (min-width: 60em) {
  .static-l {
    position: static;
  }
  .relative-l {
    position: relative;
  }
  .absolute-l {
    position: absolute;
  }
  .fixed-l {
    position: fixed;
  }
}
/*

  TEXT ALIGN
  Docs: http://tachyons.io/docs/typography/text-align/

  Base
    t = text-align

  Modifiers
    l = left
    r = right
    c = center
    j = justify

  Media Query Extensions:
    -ns = not-small
    -m  = medium
    -l  = large

*/
.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

/*

   TEXT TRANSFORM
   Docs: http://tachyons.io/docs/typography/text-transform/

   Base:
     tt = text-transform

   Modifiers
     c = capitalize
     l = lowercase
     u = uppercase
     n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.ttc {
  text-transform: capitalize;
}

.ttl {
  text-transform: lowercase;
}

.ttu {
  text-transform: uppercase;
}

.ttn {
  text-transform: none;
}

@media screen and (max-width: 30em) {
  .ttc-ns {
    text-transform: capitalize;
  }
  .ttl-ns {
    text-transform: lowercase;
  }
  .ttu-ns {
    text-transform: uppercase;
  }
  .ttn-ns {
    text-transform: none;
  }
}
@media screen and (min-width: 30.063em) {
  .ttc-m {
    text-transform: capitalize;
  }
  .ttl-m {
    text-transform: lowercase;
  }
  .ttu-m {
    text-transform: uppercase;
  }
  .ttn-m {
    text-transform: none;
  }
}
@media screen and (min-width: 60em) {
  .ttc-l {
    text-transform: capitalize;
  }
  .ttl-l {
    text-transform: lowercase;
  }
  .ttu-l {
    text-transform: uppercase;
  }
  .ttn-l {
    text-transform: none;
  }
}
/*

   WIDTHS
   Docs: http://tachyons.io/docs/layout/widths/

   Base:
     w = width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale

     -10  = literal value 10%
     -20  = literal value 20%
     -25  = literal value 25%
     -30  = literal value 30%
     -33  = literal value 33%
     -34  = literal value 34%
     -40  = literal value 40%
     -50  = literal value 50%
     -60  = literal value 60%
     -70  = literal value 70%
     -75  = literal value 75%
     -80  = literal value 80%
     -90  = literal value 90%
     -100 = literal value 100%

     -third      = 100% / 3 (Not supported in opera mini or IE8)
     -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
     -auto       = string value auto


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Width Scale */
.w1 {
  width: var(--w1);
}

.w2 {
  width: var(--w2);
}

.w3 {
  width: var(--w3);
}

.w4 {
  width: var(--w4);
}

.w5 {
  width: var(--w5);
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-33 {
  width: 33%;
}

.w-34 {
  width: 34%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.w-half {
  width: 50%;
}

.w-third {
  width: 33.3333333333%;
}

.w-two-thirds {
  width: 66.6666666667%;
}

.w-sixth {
  width: 16.6666666667%;
}

.w-auto {
  width: auto;
}

.w-33-m {
  width: 33%;
}

.w-50-m {
  width: 50%;
}

.w-half-m {
  width: 50%;
}

.w-third-m {
  width: 33.3333333333%;
}

.w-sixth-m {
  width: 16.6666666667%;
}

@media screen and (min-width: 60em) {
  .w-20-l {
    width: 20%;
  }
  .w-25-l {
    width: 25%;
  }
  .w-30-l {
    width: 30%;
  }
  .w-33-l {
    width: 33%;
  }
  .w-34-l {
    width: 34%;
  }
  .w-40-l {
    width: 40%;
  }
  .w-50-l {
    width: 50%;
  }
  .w-60-l {
    width: 60%;
  }
  .w-70-l {
    width: 70%;
  }
  .w-75-l {
    width: 75%;
  }
  .w-half-l {
    width: 50%;
  }
  .w-third-l {
    width: 33.3333333333%;
  }
  .w-two-thirds-l {
    width: 66.6666666667%;
  }
  .w-sixth-l {
    width: 16.6666666667%;
  }
}
@media screen and (min-width: 100em) {
  .w-20-xl {
    width: 20%;
  }
  .w-25-xl {
    width: 25%;
  }
  .w-30-xl {
    width: 30%;
  }
  .w-half-xl {
    width: 50%;
  }
  .w-third-xl {
    width: 33.3333333333%;
  }
  .w-two-thirds-xl {
    width: 66.6666666667%;
  }
  .w-sixth-xl {
    width: 16.6666666667%;
  }
}
/*

   WHITE SPACE

*/
.ws-normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

/*

  WORD BREAK

*/
.word-normal {
  word-break: normal;
}

.word-wrap {
  word-break: break-all;
}

.word-nowrap {
  word-break: keep-all;
}

/* Theme */
/* ==========================================================================*\
   $ _THEME-CSS-CUSTOM-PROPERTIES.SCSS
\* ==========================================================================*/
/**
 * TABLE OF CONTENTS
 *
 * $ _accordion.scss
 * $ _animation.scss
 * $ _buttons.scss
 * $ _cards.scss
 * $ _forms.scss
 * $ _layout.scss
 * $ _lists.scss
 * $ _login.scss
 * $ _objects.scss
 * $ _progress.scss
 * $ _tabs.scss
 * $ _typography.scss
 * $ boothsales.scss
 * $ checklist.scss
 * $ widgets.scss
 */
/* ==========================================================================*\
   $ _accordion.scss
\* ==========================================================================*/
.accordion-trigger:active, .accordion-trigger:focus-visible {
  background: var(--color-brand-100);
  color: var(--color-brand-30);
}

/* ==========================================================================*\
   $ _animation.scss
\* ==========================================================================*/
.loading_animation:after {
  border-color: var(--color-brand-30) transparent var(--color-brand-30) transparent;
}

/* ==========================================================================*\
   $ _buttons.scss
\* ==========================================================================*/
/* Button disabled hover for button since above rule inherits wrong color */
.button.is-disabled:hover,
.button[disabled]:hover {
  background: var(--color-neutral-100);
}

/* Button disabled hover for button--primary since above rule inherits wrong color */
.button--primary.is-disabled:hover,
.button--primary[disabled]:hover {
  background: var(--color-accent-30);
}

/*
 * Button Primary
 */
.button--primary,
input[type=submit].button--primary {
  background: var(--color-accent-30);
}

.button--primary:hover {
  background: var(--color-accent-20);
}

.button--primary:focus {
  background: var(--color-accent-10);
}

.button--icon:hover {
  background: var(--color-accent-90);
}

/* ==========================================================================*\
   $ _cards.scss
\* ==========================================================================*/
.contact-card a {
  color: var(--color-brand-30);
}

/* Placeholder for image when no contact image is provided */
.no-img-placeholder {
  background: var(--color-brand-30);
}

/* ==========================================================================*\
   $ _forms.scss
\* ==========================================================================*/
.form-section-title {
  border-bottom: 3px solid var(--color-brand-30);
  /* Temp tweak for Vue components since they place user-generated headings inside wrappers with
         the .form-section-title class; this targets those headings to still apply those styles: */
}
.form-section-title > h1, .form-section-title > h2, .form-section-title > h3, .form-section-title > h4, .form-section-title > h5, .form-section-title > h6 {
  border-bottom: 3px solid var(--color-brand-30);
}

.form--upload-wrapper {
  background: var(--color-brand-100);
  border: 1px dashed var(--color-brand-30);
}

.form--upload-wrapper p {
  color: var(--color-brand-30);
}

.form--search_wrapper button {
  background-color: var(--color-brand-30);
}

/* Progressive enhancement, style for new browsers */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .form--wrapper input[type=checkbox],
  .form--wrapper input[type=radio] {
    --active: var(--color-accent-30);
  }
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    border: 1px solid var(--color-accent-30);
  }
  /* HOVER */
  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --border-hover-color: var(--color-accent-30);
    border: 1px solid var(--border-hover-color);
  }
}
/*
* Form Group Title / Border
* Group a set of form elements and add a title, border
*/
.form--group-title {
  color: var(--color-accent-30);
}

/*
* Focus styles
*/
.radio--wrapper input:focus,
.checkbox--wrapper input:focus,
.boolean-checkbox input:focus {
  outline: 2px solid var(--color-accent-30);
}

/* ==========================================================================*\
   $ _layout.scss
\* ==========================================================================*/
.l-sidebar_nav {
  /* Sidebar main menu, e.g. main navigation options */
}
.l-sidebar_nav a:hover {
  color: var(--color-brand-30);
}
.l-sidebar_nav a:hover path {
  fill: var(--color-brand-30);
}
.l-sidebar_nav .is-selected a {
  background-color: var(--color-brand-30);
}
.l-sidebar_nav .is-selected a:hover {
  color: var(--color-white);
}
.l-sidebar_nav .is-selected a:hover path {
  fill: var(--color-white);
}
.l-sidebar_nav .button.button--sidebarToggle-close:hover {
  background: transparent;
  color: var(--color-brand-30);
}
.l-sidebar_nav .button.button--sidebarToggle-close:hover path {
  fill: var(--color-brand-30);
}
.l-sidebar_nav .l-nav_primary .form--wrapper {
  background-color: var(--color-brand-100);
}

.l-nav_primary_submenu hr {
  background-color: var(--color-brand-90);
  height: 1px;
  border: 0;
}

.button--mobile-menu {
  border: 1px solid var(--color-brand-30);
}

.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
  background: var(--color-brand-30);
}

.hamburger__text {
  color: var(--color-brand-30);
}

/* ==========================================================================*\
   $ _lists.scss
\* ==========================================================================*/
/*
 * https://mapyourshow.atlassian.net/browse/WTW25-9
 * Prevent terms and conditions list items from getting brand color
 */
ol > li::marker:not(.read-terms) {
  color: var(--color-brand-30);
}

ul > li::marker:not(.read-terms) {
  color: var(--color-brand-30);
}

/* ==========================================================================*\
   $ _login.scss
\* ==========================================================================*/
.loginOnboard--exhdash_wrapper a:not(.button) {
  color: var(--color-brand-30);
}

.t-titleMediumBlue {
  color: var(--color-brand-30);
}

/* ==========================================================================*\
   $ _objects.scss
\* ==========================================================================*/
.o-account_initial {
  background-color: var(--color-brand-30);
}

.o-HeadingActionBar.info {
  background-color: var(--color-brand-100);
}

.o-CartSummaryTotal {
  background-color: var(--color-brand-100);
}

/* NOTE: COPIED FROM .card-package-product-icons IN BOOTHSALES.SCSS */
.circle-icon__base {
  background: var(--color-brand-90);
}

/* QUESTION: Move fill color to the card-package-icons? or maybe to a modifier class? */
.circle-icon__base svg path {
  fill: var(--color-brand-30);
}

/* ==========================================================================*\
   $ _progress.scss
\* ==========================================================================*/
@media screen and (max-width: 700px) {
  .o-progress-step.is-active {
    background-color: var(--color-brand-30);
  }
}
.o-progress-step.is-active::before {
  background: var(--color-brand-30);
}

.is-active .o-step-number {
  background-color: var(--color-brand-30);
}

.is-active .o-step-text {
  color: var(--color-brand-30);
}

.o-step-number--mobile {
  color: var(--color-brand-30);
}

/* ==========================================================================*\
   $ _tabs.scss
\* ==========================================================================*/
.o-Tab_Nav:hover, .o-Tab_Nav:focus {
  color: var(--color-brand-30);
}

.o-Tab_NavItem.selected a,
.o-Tab_NavItem.selected a:link,
.o-Tab_NavItem.selected .o-Tab_NavLink {
  border-bottom: 4px solid var(--color-brand-30);
}

/* ==========================================================================*\
   $ _typography.scss
\* ==========================================================================*/
blockquote {
  border-left: 0.25rem solid var(--color-brand);
}

/* ==========================================================================*\
   $ boothsales.scss
\* ==========================================================================*/
.th-package-info.is-featured {
  border: 8px solid var(--color-brand-30);
  border-bottom: 0;
  border-top: 0;
}

.package-title-container {
  background-color: var(--color-brand-10);
}

.is-featured.package-title-container {
  background-color: var(--color-brand-30);
}

td.is-featured {
  border-left: 8px solid var(--color-brand-30);
  border-right: 8px solid var(--color-brand-30);
}

td.is-featured-last {
  border-left: 8px solid var(--color-brand-30);
  border-right: 8px solid var(--color-brand-30);
  border-bottom: 8px solid var(--color-brand-30);
}

.package-card.is-featured {
  border: 5px solid var(--color-brand-30);
  background: var(--color-brand-100);
}

.card-package-feature-list li {
  gap: var(--spacing-20);
}
.card-package-feature-list svg path {
  fill: var(--color-brand-50);
}

.card-package-product-icons {
  background: var(--color-brand-90);
}
.card-package-product-icons svg path {
  fill: var(--color-brand-30);
}

/* ==========================================================================*\
   $ checklist.scss
\* ==========================================================================*/
.checklist-container .form--wrapper input[type=checkbox] {
  height: 30px;
  width: 30px;
  border-color: var(--color-brand-30);
  border-width: 2px;
}
.checklist-container .form--wrapper input[type=checkbox]:checked {
  --background: var(--color-brand-30);
}
.checklist-container .title {
  color: var(--color-brand-30);
}

/* ==========================================================================*\
   $ widgets.scss
\* ==========================================================================*/
.button--icon-flex:hover {
  background-color: var(--color-accent-50);
}

.svg-accent {
  fill: var(--color-accent-30);
}

.highlight-component--info {
  background: var(--color-brand-30);
}

.progressbar--value__steps.value__completed {
  background: var(--color-brand-30);
}

html {
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  color: var(--color-neutral-20);
  background: var(--color-neutral-90);
  font-family: var(--font-body);
  font-weight: 400;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Boothsales-specific style */
body.is-boothsales {
  color: var(--color-neutral-20);
  background: var(--color-neutral-90);
  font-family: var(--font-body);
  padding: 0 0 var(--spacing-60) 0;
  margin-top: 1rem;
}

@media screen and (min-width: 60em) {
  body.is-boothsales {
    margin-top: 0;
  }
}