/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.u-visually-hidden:not(:focus, :active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.u-mask-link::after {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.u-unstyled-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

.u-unstyled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.u-container {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--container-max-width);
  padding: 0 var(--margin-base);
  width: 100%;
}

.u-margin-block-base {
  margin-block: var(--margin-base);
}

.u-margin-inline-base {
  margin-inline: var(--margin-base);
}

/**
  * Site specific utility classes, not included in primer-utils
  * .u-my-utility-class {
  *   color: red;
  * }
  * or overrides for primer-utils utility classes
  * .u-container {
  *   max-width: 100%;
  * }
  */
.u-container {
  padding-inline: calc(var(--margin-base) * 2);
}

/**
  * Site specific utils, not included in primer-utils
  *
  */
.Button {
  --button-background: transparent;
  --button-background-disabled: transparent;
  --button-background-hover: transparent;
  --button-border-color: transparent;
  --button-border-color-disabled: transparent;
  --button-border-color-hover: transparent;
  --button-color: var(--col-body);
  --button-color-disabled: var(--col-blue-grey);
  --button-color-hover: var(--col-body);
  background-color: var(--button-background);
  border: 2px solid var(--button-border-color);
  border-radius: 4px;
  color: var(--button-color);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: var(--line-height-base);
  padding: 0.6875rem 2rem;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
  width: 100%;
  word-wrap: break-word;
}
.Button:hover, .Button:focus {
  background-color: var(--button-background-hover);
  border-color: var(--button-border-color-hover);
  color: var(--button-color-hover);
}
.Button:disabled {
  background-color: var(--button-background-disabled);
  border-color: var(--button-border-color-disabled);
  color: var(--button-color-disabled);
  cursor: not-allowed;
}
.Button--icon {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
}
.Button--icon-flipped {
  transform: rotate(180deg);
}
.Button--primary {
  --button-background: var(--col-primary);
  --button-background-disabled: var(--col-blue-grey);
  --button-background-hover: var(--col-primary-hover);
  --button-border-color: var(--col-primary);
  --button-border-color-disabled: var(--col-blue-grey);
  --button-border-color-hover: var(--col-primary-hover);
  --button-color: var(--col-white);
  --button-color-disabled: var(--col-white);
  --button-color-hover: var(--col-white);
}
.Button--secondary {
  --button-background: transparent;
  --button-background-hover: var(--col-secondary-hover-opacity);
  --button-border-color: var(--col-secondary);
  --button-border-color-hover: var(--col-secondary-hover);
  --button-color: var(--col-secondary);
  --button-color-hover: var(--col-secondary-hover);
}
.Button--secondary-red {
  --button-background: transparent;
  --button-background-hover: var(--col-primary-hover-opacity);
  --button-border-color: var(--col-primary);
  --button-border-color-hover: var(--col-primary-hover);
  --button-color: var(--col-primary);
  --button-color-hover: var(--col-primary-hover);
}
.Button--tertiary {
  --button-background: var(--col-white);
  --button-border-color: var(--col-secondary);
  --button-border-color-hover: var(--col-secondary);
  --button-color: var(--col-secondary);
}
.Button--slim {
  border-width: 1px;
  padding: 0.5rem;
}
.Button--text {
  --button-color: var(--col-primary);
  --button-color-hover: var(--col-primary-hover);
  padding: 0;
}
.Button--width-auto {
  width: auto;
}

.Button__icon--flipped {
  transform: rotate(180deg);
}

.CommonHeading {
  color: var(--col-black);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 3rem;
}
.CommonHeading--main {
  margin-block: 0 1.25rem;
}
.CommonHeading--line {
  align-items: center;
  color: var(--col-secondary);
  display: flex;
  font-size: 1.125rem;
  gap: 0.5rem;
}
.CommonHeading--line::after {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}
.CommonHeading--margin-remove {
  margin: 0;
}
.CommonHeading--centered.CommonHeading--line::before {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}

:root {
  --col-primary: #d71009;
  --col-primary-hover: #c20e0a;
  --col-primary-hover-opacity: rgba(194, 14, 10, 0.04);
  --col-primary-pressed: #ae0c08;
  --col-secondary: #535f69;
  --col-secondary-hover: #4b565f;
  --col-secondary-hover-opacity: rgba(75, 86, 95, 0.04);
  --col-secondary-pressed: #444d56;
  --col-body: #333;
  --col-black: #0f1112;
  --col-white: #fff;
  --col-grey-xlight: #f2f4f7;
  --col-grey-xxlight: #f8f8f8;
  --col-blue-grey: #535f69;
  --col-blue-grey-50: #bfcbd7;
  --col-danger-variant: #fed9da;
  --col-interactive: #d71009;
  --col-interactive-light: rgb(247.6071428571, 84.1428571429, 78.3928571429);
  --col-interactive-grey: #707070;
  --col-divider-colour: #bfcbd7;
  --col-outline: #bfcbd7;
  --col-prominent-outline: #8296a7;
  --col-on-surface-placeholder: #8296a7;
  --col-surface: #f2f4f7;
  --col-surface-container-low: #eaeff3;
  --col-surface-container: #e3e9ef;
  --col-surface-container-high: #dde4eb;
  --col-surface-container-highest: #d7dee6;
  --col-background: #f2f4f7;
  --col-success: #2f7d31;
  --col-error: #b71d1c;
  --col-warning: #ffbf00;
  --col-info: #4d97eb;
  --font-family-base: Albert Sans, sans-serif;
  --font-family-heading: Albert Sans, sans-serif;
  --font-weight-bold: bold;
  --font-weight-heading: bold;
  --font-size-base: 16;
  --line-height-base: 1.2;
  --margin-base: 1rem;
  --container-max-width: 111rem;
  --light-grey-gradient: linear-gradient(180deg, #fff 0%, #f1f4f7 100%);
  --big-drop-shadow-box-shadow: 0 8px 24px 0 rgba(12, 12, 13, 0.1);
  --drop-shadow-box-shadow: 0 4px 16px 0 rgba(12, 12, 13, 0.05);
}

body {
  color: var(--col-body);
  font-family: var(--font-family-base);
  margin: 0;
}

a {
  color: var(--col-interactive);
}

p {
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.2;
  margin-block: 1rem;
}

li {
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.2;
  margin-block: 1rem;
}

h1 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.3333333333;
  margin-block: 1rem;
  margin-block: 1rem;
  color: var(--col-primary);
}

h2 {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.4;
  margin-block: 1rem;
  margin-block: 1rem;
}

h3 {
  font-family: var(--font-family-heading);
  font-size: 1.125rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.4444444444;
  margin-block: 1rem;
  margin-block: 1rem;
}

h4 {
  font-family: var(--font-family-heading);
  font-size: 1rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.5;
  margin-block: 1rem;
  margin-block: 1rem;
}

h5 {
  font-family: var(--font-family-heading);
  font-size: 0.875rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.5714285714;
  margin-block: 1rem;
  margin-block: 1rem;
}

h6 {
  font-family: var(--font-family-heading);
  font-size: 0.75rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.6666666667;
  margin-block: 1rem;
  margin-block: 1rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.LoungeCapacity[data-v-6d1529bd] {
  container: LoungeCapacity/inline-size;
}
.LoungeCapacity__list[data-v-6d1529bd] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@container LoungeCapacity (inline-size > 33.25rem) {
.LoungeCapacity__list[data-v-6d1529bd] {
    display: inline-flex;
    flex-direction: row;
}
}
.LoungeCapacity__item[data-v-6d1529bd] {
  display: block;
  margin: 0;
  width: 100%;
}
@container LoungeCapacity (inline-size > 33.25rem) {
.LoungeCapacity__item[data-v-6d1529bd] {
    width: -moz-max-content;
    width: max-content;
}
}
.LoungeCapacity__button[data-v-6d1529bd] {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-size: 1.375rem;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.375rem 1rem;
  width: 100%;
}
@container LoungeCapacity (inline-size > 33.25rem) {
.LoungeCapacity__button[data-v-6d1529bd] {
    justify-content: flex-start;
}
}
.LoungeCapacity__value[data-v-6d1529bd] {
  align-items: center;
  background: var(--col-danger-variant);
  border-radius: 50%;
  color: var(--col-black);
  display: flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppLoungeInfo[data-v-9afb07b0] {
  background: var(--col-white);
}
.AppLoungeInfo__container[data-v-9afb07b0] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@container App (inline-size > 81.25rem) {
.AppLoungeInfo__container[data-v-9afb07b0] {
    gap: 0;
}
}
.AppLoungeInfo__title[data-v-9afb07b0] {
  color: var(--col-black);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
}
.AppLoungeInfo__date-time[data-v-9afb07b0] {
  align-items: flex-start;
  display: flex;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625rem;
}
.AppLoungeInfo__date[data-v-9afb07b0] {
  border-right: 1px solid var(--col-secondary);
  padding-right: 1.25rem;
}
.AppLoungeInfo__time[data-v-9afb07b0] {
  padding-left: 1.25rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.DialogModal[data-v-e13d491c] {
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--drop-shadow-box-shadow);
  box-sizing: border-box;
  max-width: 39.9375rem;
  padding: 3rem;
  text-align: center;
  width: 100%;
}
.DialogModal[data-v-e13d491c]::backdrop {
  background: var(--col-secondary);
  opacity: 0.75;
}
.DialogModal[data-v-e13d491c] p {
  font-size: 1.125rem;
}
.DialogModal__actions[data-v-e13d491c] {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}
.DialogModal__heading[data-v-e13d491c] {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  text-wrap: balance;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.InputSearch[data-v-e5215cd0] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  display: flex;
}
.InputSearch__btn[data-v-e5215cd0] {
  align-items: center;
  background-color: transparent;
  border: 0;
  display: flex;
  justify-content: center;
  padding: 0;
  width: 3rem;
}
.InputSearch__input[data-v-e5215cd0] {
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  flex-grow: 1;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 2.875rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppBookingSource[data-v-da035ead] {
  max-width: unset;
  padding: 4rem;
  width: -moz-fit-content;
  width: fit-content;
}
.AppBookingSource__heading[data-v-da035ead] {
  display: flex;
  justify-content: space-between;
}
.AppBookingSource__title[data-v-da035ead] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
}
.AppBookingSource__content[data-v-da035ead] {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.AppBookingSource__header-label[data-v-da035ead] {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.AppBookingSource__form-group[data-v-da035ead] {
  text-align: left;
  width: 25rem;
}
.AppBookingSource__label[data-v-da035ead] {
  align-items: center;
  background: var(--col-white);
  border: 2px solid var(--col-outline);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-column: span 1;
  height: 8.75rem;
  justify-content: center;
  padding: 3rem;
  width: 16.75rem;
}
.AppBookingSource__label-icon[data-v-da035ead] {
  align-items: center;
  aspect-ratio: 5/1;
  display: flex;
  flex-shrink: 0;
  height: 3.3125rem;
  justify-content: center;
  width: 16.75rem;
}
.AppBookingSource__label-icon--red[data-v-da035ead] {
  color: var(--col-primary);
}
.AppBookingSource__label-text[data-v-da035ead] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  text-align: center;
}
.AppBookingSource__input[data-v-da035ead] {
  display: none;
}
.AppBookingSource__input:checked + .AppBookingSource__label[data-v-da035ead] {
  border-color: var(--col-primary);
}
.AppBookingSource__grid[data-v-da035ead] {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(4, 1fr);
  height: 33.25rem;
  justify-items: center;
  margin-top: 2rem;
  min-width: 103.125rem;
  overflow-y: scroll;
}
.AppBookingSource__buttons[data-v-da035ead] {
  display: flex;
  gap: 1rem;
  grid-column: span 6;
  justify-content: center;
  width: 100%;
}
.AppBookingSource__button[data-v-da035ead] {
  height: 4rem;
  padding: 1rem 2rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppBookingSourcesGridButton[data-v-0a49dd14] {
  width: 18.125rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppSiteHeader[data-v-73ca870b] {
  background-color: var(--col-white);
  box-shadow: var(--drop-shadow-box-shadow);
  padding-block: 2.5rem;
  position: sticky;
}
.AppSiteHeader--alt[data-v-73ca870b] {
  background-color: var(--col-surface-container-highest);
  border-bottom: 1px solid var(--col-prominent-outline);
  box-shadow: none;
}
.AppSiteHeader--alt[data-v-73ca870b] .AppSiteLanguageSelector {
  margin-left: auto;
}
.AppSiteHeader__container[data-v-73ca870b] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
@container App (inline-size > 81.25rem) {
.AppSiteHeader__container[data-v-73ca870b] {
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
}
}
.AppSiteHeader__lounge-info[data-v-73ca870b] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@container App (inline-size > 81.25rem) {
.AppSiteHeader__lounge-info[data-v-73ca870b] {
    align-items: center;
    flex-direction: row;
}
}
.AppSiteHeader__actions[data-v-73ca870b] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.AppSiteHeader--alt .AppSiteHeader__actions[data-v-73ca870b] {
  width: 100%;
}
@container App (inline-size > 81.25rem) {
.AppSiteHeader__actions[data-v-73ca870b] {
    align-items: center;
    flex-direction: row;
}
}
@container App (inline-size > 81.25rem) {
.AppSiteHeader__actions[data-v-73ca870b] .LoungeCapacity {
    min-width: 33.3125rem;
}
}
.AppSiteHeader__button[data-v-73ca870b] {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  padding: 0;
  width: 4rem;
}
.AppSiteHeader__button svg[data-v-73ca870b] {
  color: var(--col-secondary);
  height: 2.5rem;
  width: 2.5rem;
}
.AppSiteHeader__button[data-v-73ca870b]:disabled {
  background: var(--col-outline);
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppSiteHeaderLogout[data-v-efebafda] {
  display: block;
  height: 4rem;
  width: 4rem;
}
.AppSiteHeaderLogout__button[data-v-efebafda] {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0;
  width: 100%;
}
.AppSiteHeaderLogout__icon[data-v-efebafda] {
  color: var(--col-secondary);
  height: 2.5rem;
  width: 2.5rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-21c79c53] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-21c79c53] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-21c79c53] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-21c79c53] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-21c79c53] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-21c79c53] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-21c79c53] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-21c79c53]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-21c79c53] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-21c79c53] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-21c79c53] {
  width: 100%;
}
.Form__input--error[data-v-21c79c53] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-21c79c53] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-21c79c53] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-21c79c53]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-21c79c53] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-21c79c53]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-21c79c53] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-21c79c53] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-21c79c53]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-21c79c53] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-21c79c53] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-21c79c53] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-21c79c53]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-21c79c53] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-21c79c53] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-21c79c53] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-21c79c53] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-21c79c53] > * {
  flex: 1;
}
.Form__group[data-v-21c79c53] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-21c79c53] {
  width: 100%;
}
.Form--nomargin[data-v-21c79c53] {
  margin-block: 0;
}
.AppSiteLanguageSelector__select[data-v-21c79c53] {
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='10'%20viewBox='0%200%2016%2010'%20fill='none'%3e%3cpath%20d='M7.99652%209.50856C7.81606%209.50856%207.64808%209.47973%207.49258%209.42207C7.33708%209.36442%207.18919%209.26558%207.04892%209.12555L0.31839%202.39502C0.111223%202.1876%200.00514416%201.9269%200.000152204%201.6129C-0.00459016%201.29916%200.101489%201.03371%200.31839%200.816562C0.53554%200.599661%200.798615%200.491211%201.10762%200.491211C1.41662%200.491211%201.6797%200.599661%201.89685%200.816562L7.99652%206.91661L14.0962%200.816562C14.3036%200.609396%2014.5643%200.503317%2014.8783%200.498325C15.1921%200.493582%2015.4575%200.599661%2015.6746%200.816562C15.8916%201.03371%2016%201.29679%2016%201.60579C16%201.91479%2015.8916%202.17787%2015.6746%202.39502L8.94412%209.12555C8.80384%209.26558%208.65596%209.36442%208.50046%209.42207C8.34496%209.47973%208.17698%209.50856%207.99652%209.50856Z'%20fill='currentColor'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2021.5C10.6975%2021.5%209.46833%2021.2503%208.3125%2020.751C7.15667%2020.2517%206.14867%2019.5718%205.2885%2018.7115C4.42817%2017.8513%203.74833%2016.8433%203.249%2015.6875C2.74967%2014.5317%202.5%2013.3025%202.5%2012C2.5%2010.6872%202.74967%209.45542%203.249%208.30475C3.74833%207.15408%204.42817%206.14867%205.2885%205.2885C6.14867%204.42817%207.15667%203.74833%208.3125%203.249C9.46833%202.74967%2010.6975%202.5%2012%202.5C13.3128%202.5%2014.5446%202.74967%2015.6953%203.249C16.8459%203.74833%2017.8513%204.42817%2018.7115%205.2885C19.5718%206.14867%2020.2517%207.15408%2020.751%208.30475C21.2503%209.45542%2021.5%2010.6872%2021.5%2012C21.5%2013.3025%2021.2503%2014.5317%2020.751%2015.6875C20.2517%2016.8433%2019.5718%2017.8513%2018.7115%2018.7115C17.8513%2019.5718%2016.8459%2020.2517%2015.6953%2020.751C14.5446%2021.2503%2013.3128%2021.5%2012%2021.5ZM12%2019.9788C12.5103%2019.3019%2012.9398%2018.6192%2013.2885%2017.9307C13.6372%2017.2422%2013.9212%2016.4897%2014.1405%2015.673H9.8595C10.0917%2016.5153%2010.3789%2017.2808%2010.7213%2017.9693C11.0634%2018.6578%2011.4897%2019.3276%2012%2019.9788ZM10.0635%2019.7038C9.68017%2019.1538%209.33592%2018.5285%209.03075%2017.828C8.72558%2017.1273%208.48842%2016.409%208.31925%2015.673H4.927C5.45517%2016.7115%206.1635%2017.584%207.052%2018.2905C7.9405%2018.9968%208.94433%2019.4679%2010.0635%2019.7038ZM13.9365%2019.7038C15.0557%2019.4679%2016.0595%2018.9968%2016.948%2018.2905C17.8365%2017.584%2018.5448%2016.7115%2019.073%2015.673H15.6807C15.4794%2016.4153%2015.2262%2017.1368%2014.921%2017.8375C14.616%2018.5382%2014.2878%2019.1603%2013.9365%2019.7038ZM4.298%2014.173H8.0155C7.95267%2013.8013%207.90708%2013.4369%207.87875%2013.0798C7.85058%2012.7228%207.8365%2012.3628%207.8365%2012C7.8365%2011.6372%207.85058%2011.2773%207.87875%2010.9202C7.90708%2010.5631%207.95267%2010.1987%208.0155%209.827H4.298C4.20183%2010.1667%204.12817%2010.5198%204.077%2010.8865C4.02567%2011.2532%204%2011.6243%204%2012C4%2012.3757%204.02567%2012.7468%204.077%2013.1135C4.12817%2013.4802%204.20183%2013.8333%204.298%2014.173ZM9.51525%2014.173H14.4848C14.5474%2013.8013%2014.5929%2013.4402%2014.6212%2013.0895C14.6494%2012.7388%2014.6635%2012.3757%2014.6635%2012C14.6635%2011.6243%2014.6494%2011.2612%2014.6212%2010.9105C14.5929%2010.5598%2014.5474%2010.1987%2014.4848%209.827H9.51525C9.45258%2010.1987%209.40708%2010.5598%209.37875%2010.9105C9.35058%2011.2612%209.3365%2011.6243%209.3365%2012C9.3365%2012.3757%209.35058%2012.7388%209.37875%2013.0895C9.40708%2013.4402%209.45258%2013.8013%209.51525%2014.173ZM15.9845%2014.173H19.702C19.7982%2013.8333%2019.8718%2013.4802%2019.923%2013.1135C19.9743%2012.7468%2020%2012.3757%2020%2012C20%2011.6243%2019.9743%2011.2532%2019.923%2010.8865C19.8718%2010.5198%2019.7982%2010.1667%2019.702%209.827H15.9845C16.0473%2010.1987%2016.0929%2010.5631%2016.1212%2010.9202C16.1494%2011.2773%2016.1635%2011.6372%2016.1635%2012C16.1635%2012.3628%2016.1494%2012.7228%2016.1212%2013.0798C16.0929%2013.4369%2016.0473%2013.8013%2015.9845%2014.173ZM15.6807%208.327H19.073C18.5385%207.27567%2017.835%206.40317%2016.9625%205.7095C16.09%205.016%2015.0813%204.54167%2013.9365%204.2865C14.3198%204.8685%2014.6608%205.50508%2014.9595%206.19625C15.2583%206.88725%2015.4987%207.5975%2015.6807%208.327ZM9.8595%208.327H14.1405C13.9083%207.491%2013.6163%206.72075%2013.2645%206.01625C12.9125%205.31175%2012.491%204.64675%2012%204.02125C11.509%204.64675%2011.0875%205.31175%2010.7355%206.01625C10.3837%206.72075%2010.0917%207.491%209.8595%208.327ZM4.927%208.327H8.31925C8.50125%207.5975%208.74167%206.88725%209.0405%206.19625C9.33917%205.50508%209.68017%204.8685%2010.0635%204.2865C8.91217%204.54167%207.90192%205.01767%207.03275%205.7145C6.16342%206.41117%205.4615%207.282%204.927%208.327Z'%20fill='%230F1112'/%3e%3c/svg%3e");
  background-position: right 0.75rem center, left 0.75rem center;
  background-size: 0.75rem 0.75rem, 1.25rem 1.25rem;
  color: var(--col-black);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  height: 4rem;
  line-height: 1.2;
  padding: 1rem 2.5rem;
}
@container App (inline-size > 81.25rem) {
.AppSiteLanguageSelector__select[data-v-21c79c53] {
    width: 12.5rem;
}
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppSiteLogoutModal[data-v-13563112] {
  border: 1px solid var(--col-secondary);
  border-radius: 8px;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem;
  text-align: center;
  width: 35rem;
}
.AppSiteLogoutModal[open][data-v-13563112] {
  display: flex;
}
.AppSiteLogoutModal[data-v-13563112]::backdrop {
  background-color: var(--col-blue-grey);
  opacity: 0.9;
}
.AppSiteLogoutModal__actions[data-v-13563112] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 1.5rem;
}
.AppSiteLogoutModal__title[data-v-13563112] {
  color: var(--col-black);
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 3rem;
  margin: 0;
  text-align: center;
}
.AppSiteLogoutModal__text[data-v-13563112] {
  align-self: stretch;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: var(--line-height-base);
  margin: 0;
  word-wrap: break-word;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.App[data-v-9597055a] {
  container: App/inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /*
  Set site min-width to resolve layout issues on smaller screens
  min-width: utils.px2rem(1440);
  */
  overflow: hidden;
}
.App__main[data-v-9597055a] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.App__change-lounge-button[data-v-9597055a], .App__admin-portal-button[data-v-9597055a], .App__booking-sources-button[data-v-9597055a] {
  font-size: 1.375rem;
  padding: 1rem 2rem;
  width: auto;
}
.App__home-button[data-v-9597055a] {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  padding: 0;
  width: 4rem;
}
.App__home-button svg[data-v-9597055a] {
  color: var(--col-secondary);
  height: 2.5rem;
  width: 2.5rem;
}
.App__home-button[data-v-9597055a]:disabled {
  background: var(--col-outline);
}
.App__reset-button[data-v-9597055a] {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  padding: 0;
  width: 4rem;
}
.App__reset-button svg[data-v-9597055a] {
  color: var(--col-secondary);
  height: 2.5rem;
  width: 2.5rem;
}
.App__reset-button[data-v-9597055a]:disabled {
  background: var(--col-outline);
}
.App__grid-button[data-v-9597055a] {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  padding: 0;
  width: 4rem;
}
.App__grid-button svg[data-v-9597055a] {
  color: var(--col-secondary);
  height: 2.5rem;
  width: 2.5rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppDashboardList__list[data-v-e7f26f95] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  flex-grow: 1;
  gap: 3rem;
  grid-template-columns: repeat(var(--app-dashboard-columns), 1fr);
  padding: 3rem 0;
}
.AppDashboardList__item[data-v-e7f26f95] {
  margin: 0;
}
.AppDashboardList__item--large[data-v-e7f26f95] {
  grid-column: span 2;
  grid-row: span 2;
}
.AppDashboardList--square-items .AppDashboardList__item[data-v-e7f26f95] {
  aspect-ratio: 1;
}
.AppDashboardList__link[data-v-e7f26f95] {
  align-items: center;
  background: var(--col-white);
  border: 2px solid var(--col-outline);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  box-sizing: border-box;
  color: var(--col-black);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  justify-content: center;
  padding: 3rem;
  text-decoration: none;
  width: 100%;
}
.AppDashboardList__link[data-v-e7f26f95]:hover, .AppDashboardList__link[data-v-e7f26f95]:focus {
  background-color: var(--col-secondary-hover-opacity);
  border-color: var(--col-prominent-outline);
}
.AppDashboardList__title[data-v-e7f26f95] {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}
@container App (inline-size > 81.25rem) {
.AppDashboardList__title[data-v-e7f26f95] {
    font-size: 2rem;
}
}
@container App (inline-size > 120rem) {
.AppDashboardList__title[data-v-e7f26f95] {
    font-size: 2.5rem;
}
}
.AppDashboardList__icon[data-v-e7f26f95] {
  color: var(--col-primary);
  height: 4rem;
  width: 4rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppDashboard[data-v-21203bdd] {
  background: var(--col-surface);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.AppDashboard__container[data-v-21203bdd] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.CommonHeading[data-v-17a15d80] {
  color: var(--col-black);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 3rem;
}
.CommonHeading--main[data-v-17a15d80] {
  margin-block: 0 1.25rem;
}
.CommonHeading--line[data-v-17a15d80] {
  align-items: center;
  color: var(--col-secondary);
  display: flex;
  font-size: 1.125rem;
  gap: 0.5rem;
}
.CommonHeading--line[data-v-17a15d80]::after {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}
.CommonHeading--margin-remove[data-v-17a15d80] {
  margin: 0;
}
.CommonHeading--centered.CommonHeading--line[data-v-17a15d80]::before {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}
.AppBarcodeScanner[data-v-17a15d80] {
  align-items: center;
  background: var(--col-white);
  border: 1px solid var(--col-divider-colour);
  border-radius: 0.5rem;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 4rem;
  width: 44.5rem;
}
.AppBarcodeScanner__content[data-v-17a15d80] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.AppBarcodeScanner__item[data-v-17a15d80] {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.AppBarcodeScanner__heading[data-v-17a15d80] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
}
.AppBarcodeScanner__text[data-v-17a15d80] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  text-align: center;
}
.AppBarcodeScanner__barcode-form[data-v-17a15d80] {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.NotifyMessage[data-v-fc4ca80a] {
  align-items: center;
  border-radius: 0.25rem;
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
}
.NotifyMessage--default[data-v-fc4ca80a] {
  background-color: var(--col-white);
}
.NotifyMessage--error[data-v-fc4ca80a] {
  background-color: var(--col-error);
}
.NotifyMessage--success[data-v-fc4ca80a] {
  background-color: var(--col-success);
}
.NotifyMessage--warning[data-v-fc4ca80a] {
  background-color: var(--col-warning);
}
.NotifyMessage__close[data-v-fc4ca80a] {
  background-color: transparent;
  border: 0;
  margin-inline-start: auto;
  padding: 0;
}
.NotifyMessage__close[data-v-fc4ca80a]:hover {
  cursor: pointer;
}
.NotifyMessage__text[data-v-fc4ca80a] {
  font-size: 1.125rem;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: break-word;
}
.NotifyMessage--error .NotifyMessage__text[data-v-fc4ca80a], .NotifyMessage--success .NotifyMessage__text[data-v-fc4ca80a] {
  color: var(--col-white);
}
.NotifyMessage__text[data-v-fc4ca80a] p {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.NotifyMessage__icon[data-v-fc4ca80a] {
  display: block;
  flex: none;
}
.NotifyMessage--error .NotifyMessage__icon[data-v-fc4ca80a], .NotifyMessage--success .NotifyMessage__icon[data-v-fc4ca80a] {
  color: var(--col-white);
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-84135676] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-84135676] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-84135676] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-84135676] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-84135676] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-84135676] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-84135676] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-84135676]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-84135676] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-84135676] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-84135676] {
  width: 100%;
}
.Form__input--error[data-v-84135676] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-84135676] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-84135676] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-84135676]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-84135676] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-84135676]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-84135676] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-84135676] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-84135676]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-84135676] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-84135676] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-84135676] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-84135676]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-84135676] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-84135676] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-84135676] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-84135676] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-84135676] > * {
  flex: 1;
}
.Form__group[data-v-84135676] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-84135676] {
  width: 100%;
}
.Form--nomargin[data-v-84135676] {
  margin-block: 0;
}
.AppManualBoardingPassEntry[data-v-84135676] {
  padding: 1.375rem;
  width: 80dvw;
}
.AppManualBoardingPassEntry.Form[data-v-84135676] {
  grid-gap: 0 2rem;
  grid-template-columns: 1fr 1fr;
}
.AppManualBoardingPassEntry__heading[data-v-84135676] {
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.2;
  margin-block: 1rem;
  margin-block: 1rem;
  color: var(--col-black);
  grid-column: span 2;
  text-align: center;
}
.AppManualBoardingPassEntry__error-message[data-v-84135676] {
  grid-column: span 2;
  margin-block: 1rem;
}
.Form__group[data-v-84135676] {
  position: relative;
}
.Form__error-message[data-v-84135676] {
  bottom: -1.375rem;
  color: var(--col-error);
  font-size: 0.875rem;
  left: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppFlightWarning[data-v-5d3d659c] {
  align-items: center;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-style: normal;
  padding: 4rem;
  text-align: center;
  width: 36.5rem;
}
.AppFlightWarning__warning-icon[data-v-5d3d659c] {
  color: var(--col-error);
  height: 4rem;
  padding-bottom: 1rem;
  width: 4rem;
}
.AppFlightWarning__text[data-v-5d3d659c] {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.AppFlightWarning__title[data-v-5d3d659c] {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 3rem;
}
.AppFlightWarning__re-enter-button[data-v-5d3d659c] {
  margin-top: 3rem;
}
.AppFlightWarning__override-button[data-v-5d3d659c] {
  margin-top: 1.5rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.CommonHeading[data-v-d801f87b] {
  color: var(--col-black);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 3rem;
}
.CommonHeading--main[data-v-d801f87b] {
  margin-block: 0 1.25rem;
}
.CommonHeading--line[data-v-d801f87b] {
  align-items: center;
  color: var(--col-secondary);
  display: flex;
  font-size: 1.125rem;
  gap: 0.5rem;
}
.CommonHeading--line[data-v-d801f87b]::after {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}
.CommonHeading--margin-remove[data-v-d801f87b] {
  margin: 0;
}
.CommonHeading--centered.CommonHeading--line[data-v-d801f87b]::before {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}
.AppBookingNotFound[data-v-d801f87b] {
  align-items: center;
  background: var(--col-white);
  border: 1px solid var(--col-divider-colour);
  border-radius: 0.5rem;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 4rem;
  width: 44.5rem;
}
.AppBookingNotFound__content[data-v-d801f87b] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.AppBookingNotFound__warning-icon[data-v-d801f87b] {
  color: var(--col-error);
  height: 4rem;
  padding-bottom: 1rem;
  width: 4rem;
}
.AppBookingNotFound__item[data-v-d801f87b] {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.AppBookingNotFound__heading[data-v-d801f87b] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
}
.AppBookingNotFound__text[data-v-d801f87b] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  text-align: center;
}
.AppBookingNotFound__strike-through[data-v-d801f87b] {
  margin: 1rem 0;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppBookingSourceNotFound[data-v-8982003e] {
  align-items: center;
  background: var(--col-white);
  border: 1px solid var(--col-divider-colour);
  border-radius: 0.5rem;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 4rem;
  width: 44.5rem;
}
.AppBookingSourceNotFound__warning-icon[data-v-8982003e] {
  color: var(--col-error);
  height: 4rem;
  padding-bottom: 1rem;
  width: 4rem;
}
.AppBookingSourceNotFound__heading[data-v-8982003e] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
}
.AppBookingSourceNotFound__text[data-v-8982003e] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  text-align: center;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-6e9d4c73] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-6e9d4c73] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-6e9d4c73] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-6e9d4c73] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-6e9d4c73] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-6e9d4c73] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-6e9d4c73] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-6e9d4c73]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-6e9d4c73] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-6e9d4c73] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-6e9d4c73] {
  width: 100%;
}
.Form__input--error[data-v-6e9d4c73] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-6e9d4c73] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-6e9d4c73] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-6e9d4c73]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-6e9d4c73] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-6e9d4c73]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-6e9d4c73] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-6e9d4c73] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-6e9d4c73]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-6e9d4c73] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-6e9d4c73] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-6e9d4c73] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-6e9d4c73]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-6e9d4c73] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-6e9d4c73] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-6e9d4c73] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-6e9d4c73] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-6e9d4c73] > * {
  flex: 1;
}
.Form__group[data-v-6e9d4c73] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-6e9d4c73] {
  width: 100%;
}
.Form--nomargin[data-v-6e9d4c73] {
  margin-block: 0;
}
.ManualReferenceInput[data-v-6e9d4c73] {
  align-items: center;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-style: normal;
  padding: 4rem;
  text-align: center;
  width: 36.5rem;
}
.ManualReferenceInput__text[data-v-6e9d4c73] {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5rem;
}
.ManualReferenceInput__title[data-v-6e9d4c73] {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 3rem;
}
.ManualReferenceInput__form[data-v-6e9d4c73] {
  text-align: left;
  width: 100%;
}
.ManualReferenceInput__form-input[data-v-6e9d4c73] {
  width: 100%;
}
.ManualReferenceInput__re-enter-button[data-v-6e9d4c73] {
  margin-top: 3rem;
}
.ManualReferenceInput__override-button[data-v-6e9d4c73] {
  margin-top: 1.5rem;
}
.ManualReferenceInput .Form__group[data-v-6e9d4c73] {
  position: relative;
}
.ManualReferenceInput .Form__error-message[data-v-6e9d4c73] {
  bottom: -1.375rem;
  color: var(--col-error);
  font-size: 0.875rem;
  left: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-c56732ff] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-c56732ff] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-c56732ff] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-c56732ff] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-c56732ff] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-c56732ff] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-c56732ff] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-c56732ff]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-c56732ff] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-c56732ff] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-c56732ff] {
  width: 100%;
}
.Form__input--error[data-v-c56732ff] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-c56732ff] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-c56732ff] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-c56732ff]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-c56732ff] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-c56732ff]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-c56732ff] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-c56732ff] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-c56732ff]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-c56732ff] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-c56732ff] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-c56732ff] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-c56732ff]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-c56732ff] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-c56732ff] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-c56732ff] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-c56732ff] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-c56732ff] > * {
  flex: 1;
}
.Form__group[data-v-c56732ff] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-c56732ff] {
  width: 100%;
}
.Form--nomargin[data-v-c56732ff] {
  margin-block: 0;
}
.Dialog[open][data-v-c56732ff] {
  display: flex;
}
.Dialog[data-v-c56732ff]::backdrop {
  fill: var(--col-secondary);
  opacity: 0.75;
}
.BarcodeScannerModal[data-v-c56732ff] {
  border: 0;
  border-radius: 0.5rem;
  box-shadow: var(--drop-shadow-box-shadow);
  padding: 0;
}
.BarcodeScannerModal[data-v-c56732ff]::backdrop {
  background: var(--col-secondary);
  opacity: 0.75;
}.HomeView[data-v-0eb34624] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.GridView[data-v-1d64f64c] {
  background-color: var(--col-surface-container-highest);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.EventsAndFeedbackDialog[data-v-1d64f64c] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
.EventsAndFeedbackDialog__heading[data-v-1d64f64c] {
  margin: 0;
}
.EventsAndFeedbackDialog p[data-v-1d64f64c] {
  margin: 0;
}
.EventsAndFeedbackDialog__strike-through[data-v-1d64f64c] {
  margin: 0;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
select[data-v-abb8ecad] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--col-white);
  border: 1px solid var(--col-outline);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
}
select[data-v-abb8ecad]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
select[data-v-abb8ecad]:focus {
  border-color: var(--col-primary);
  outline: none;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-1127a5a1] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-1127a5a1] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-1127a5a1] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-1127a5a1] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-1127a5a1] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-1127a5a1] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-1127a5a1] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-1127a5a1]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-1127a5a1] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-1127a5a1] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-1127a5a1] {
  width: 100%;
}
.Form__input--error[data-v-1127a5a1] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-1127a5a1] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-1127a5a1] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-1127a5a1]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-1127a5a1] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-1127a5a1]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-1127a5a1] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-1127a5a1] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-1127a5a1]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-1127a5a1] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-1127a5a1] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-1127a5a1] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-1127a5a1]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-1127a5a1] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-1127a5a1] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-1127a5a1] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-1127a5a1] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-1127a5a1] > * {
  flex: 1;
}
.Form__group[data-v-1127a5a1] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-1127a5a1] {
  width: 100%;
}
.Form--nomargin[data-v-1127a5a1] {
  margin-block: 0;
}
.SelectLoungeView[data-v-1127a5a1] {
  display: flex;
  flex-grow: 1;
  position: relative;
}
.SelectLoungeView__container[data-v-1127a5a1] {
  margin-block: auto;
  width: 54rem;
}
.SelectLoungeView__heading[data-v-1127a5a1] {
  color: var(--col-black);
  text-align: center;
}
.SelectLoungeView__logo[data-v-1127a5a1] {
  bottom: 2rem;
  left: 0;
  margin-inline: auto;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.SelectUserView[data-v-c47fbac1] {
  background-color: var(--col-background);
  display: block;
  flex: 1;
  padding-block: 4.5rem;
}
.SelectUserView__grid[data-v-c47fbac1] {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@container App (inline-size > 81.25rem) {
.SelectUserView__grid[data-v-c47fbac1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
}
.SelectUserView__button[data-v-c47fbac1] {
  align-items: center;
  background: var(--col-white);
  border: 2px solid var(--col-blue-grey-50);
  border-radius: 8px;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.05);
  color: var(--col-black);
  cursor: pointer;
  display: flex;
  flex: 1 0 0;
  font-family: var(--font-family-base);
  font-size: 1.75rem;
  font-weight: 700;
  justify-content: center;
  line-height: 2rem;
  padding: 2.5rem 1rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-6debcec0] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-6debcec0] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-6debcec0] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-6debcec0] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-6debcec0] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-6debcec0] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-6debcec0] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-6debcec0]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-6debcec0] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-6debcec0] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-6debcec0] {
  width: 100%;
}
.Form__input--error[data-v-6debcec0] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-6debcec0] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-6debcec0] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-6debcec0]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-6debcec0] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-6debcec0]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-6debcec0] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-6debcec0] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-6debcec0]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-6debcec0] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-6debcec0] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-6debcec0] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-6debcec0]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-6debcec0] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-6debcec0] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-6debcec0] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-6debcec0] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-6debcec0] > * {
  flex: 1;
}
.Form__group[data-v-6debcec0] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-6debcec0] {
  width: 100%;
}
.Form--nomargin[data-v-6debcec0] {
  margin-block: 0;
}
.AppLogFeedbackView[data-v-6debcec0] {
  margin-top: 4.5rem;
}
.AppLogFeedbackView__form[data-v-6debcec0] {
  background: var(--col-white);
  border: 1px solid var(--col-outline);
  border-radius: 8px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  gap: 3rem;
  padding: 4rem;
}
.AppLogFeedbackView__form-column[data-v-6debcec0] {
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  gap: 3rem;
}
.AppLogFeedbackView__form-actions[data-v-6debcec0] {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
}
.AppLogFeedbackView__dialog-icon[data-v-6debcec0] {
  color: var(--col-primary);
  height: 4rem;
  width: 4rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-a7151bda] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-a7151bda] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-a7151bda] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-a7151bda] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-a7151bda] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-a7151bda] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-a7151bda] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-a7151bda]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-a7151bda] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-a7151bda] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-a7151bda] {
  width: 100%;
}
.Form__input--error[data-v-a7151bda] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-a7151bda] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-a7151bda] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-a7151bda]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-a7151bda] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-a7151bda]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-a7151bda] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-a7151bda] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-a7151bda]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-a7151bda] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-a7151bda] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-a7151bda] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-a7151bda]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-a7151bda] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-a7151bda] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-a7151bda] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-a7151bda] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-a7151bda] > * {
  flex: 1;
}
.Form__group[data-v-a7151bda] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-a7151bda] {
  width: 100%;
}
.Form--nomargin[data-v-a7151bda] {
  margin-block: 0;
}
.AppLogEventView[data-v-a7151bda] {
  margin-top: 4.5rem;
}
.AppLogEventView__form[data-v-a7151bda] {
  background: var(--col-white);
  border: 1px solid var(--col-outline);
  border-radius: 8px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  gap: 3rem;
  padding: 4rem;
}
.AppLogEventView__form-column[data-v-a7151bda] {
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  gap: 3rem;
}
.AppLogEventView__form-actions[data-v-a7151bda] {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
}
.AppLogEventView__dialog-icon[data-v-a7151bda] {
  color: var(--col-primary);
  height: 4rem;
  width: 4rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppEditButton[data-v-83f3ff69] {
  align-items: center;
  border: 1px solid var(--col-secondary);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  padding: 0.5rem;
  width: -moz-min-content;
  width: min-content;
}
.AppEditButton__icon[data-v-83f3ff69] {
  flex-shrink: 0;
  height: 1.375rem;
  width: 1.375rem;
}
.AppEditButton__text[data-v-83f3ff69] {
  color: var(--col-secondary);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppShopTile[data-v-eabf7eb2] {
  align-items: center;
  background: var(--col-white);
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 8px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  height: -moz-min-content;
  height: min-content;
  justify-content: space-between;
  padding: 3rem;
  width: 35rem;
}
.AppShopTile__items[data-v-eabf7eb2] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.AppShopTile__item-row[data-v-eabf7eb2] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppShopTile__item-content[data-v-eabf7eb2] {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.AppShopTile__item-quantity[data-v-eabf7eb2] {
  align-items: center;
  background: var(--col-danger-variant);
  border-radius: 4px;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  gap: 0.625rem;
  height: 3rem;
  justify-content: center;
  line-height: 1.75rem;
  padding: 0.625rem;
  text-align: center;
  width: 3rem;
}
.AppShopTile__item-name[data-v-eabf7eb2] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
}
.AppShopTile__item-price[data-v-eabf7eb2] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppShopTile__total[data-v-eabf7eb2] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppShopTile__total-quantity[data-v-eabf7eb2] {
  align-items: center;
  background: var(--col-danger-variant);
  border-radius: 4px;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  gap: 0.625rem;
  height: 3rem;
  line-height: 1.75rem;
  padding: 0.625rem;
  place-content: center center;
  text-align: center;
  width: 3rem;
}
.AppShopTile__total-name[data-v-eabf7eb2] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppShopTile__total-price[data-v-eabf7eb2] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppShopTile__title[data-v-eabf7eb2] {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppShopTile__title--center[data-v-eabf7eb2] {
  justify-content: center;
}
.AppShopTile__title-text[data-v-eabf7eb2] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem;
  margin: 0;
  text-align: center;
}
.AppShopTile__divider[data-v-eabf7eb2] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 1px;
  width: 100%;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppTotalTile[data-v-2df476ab] {
  align-items: center;
  background: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 8px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  height: -moz-min-content;
  height: min-content;
  justify-content: space-between;
  padding: 3rem;
  width: 35rem;
}
.AppTotalTile__items[data-v-2df476ab] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.AppTotalTile__item-row[data-v-2df476ab] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppTotalTile__item-content[data-v-2df476ab] {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.AppTotalTile__item-quantity[data-v-2df476ab] {
  align-items: center;
  background: var(--col-danger-variant);
  border-radius: 4px;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  gap: 0.625rem;
  height: 3rem;
  justify-content: center;
  line-height: 1.75rem;
  padding: 0.625rem;
  text-align: center;
  width: 3rem;
}
.AppTotalTile__item-name[data-v-2df476ab] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
}
.AppTotalTile__item-price[data-v-2df476ab] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppTotalTile__total[data-v-2df476ab] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppTotalTile__total-quantity[data-v-2df476ab] {
  align-items: center;
  background: var(--col-danger-variant);
  border-radius: 4px;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  gap: 0.625rem;
  height: 3rem;
  line-height: 1.75rem;
  padding: 0.625rem;
  place-content: center center;
  text-align: center;
  width: 3rem;
}
.AppTotalTile__total-name[data-v-2df476ab] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppTotalTile__total-price[data-v-2df476ab] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppTotalTile__title[data-v-2df476ab] {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppTotalTile__title-text[data-v-2df476ab] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem;
  margin: 0;
  text-align: center;
}
.AppTotalTile__divider[data-v-2df476ab] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 1px;
  width: 100%;
}
.AppTotalTile__button[data-v-2df476ab] {
  align-items: center;
  align-self: stretch;
  display: flex;
  height: 4rem;
  justify-content: center;
  padding: 1rem 2rem;
}
.AppTotalTile__button-container[data-v-2df476ab] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppGuestDetails[data-v-2a76ed48] {
  display: flex;
  flex-direction: row;
  height: 4rem;
  width: 100%;
}
.AppGuestDetails__title[data-v-2a76ed48] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.5rem;
}
.AppGuestDetails__content[data-v-2a76ed48] {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding-left: 1.5rem;
  width: 100%;
}
.AppGuestDetails__content--right[data-v-2a76ed48] {
  flex-direction: row-reverse;
}
.AppGuestDetails__cancel-button[data-v-2a76ed48] {
  align-items: center;
  border: 1px solid var(--col-secondary);
  border-radius: 4px;
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  text-wrap: nowrap;
  width: -moz-min-content;
  width: min-content;
}
.AppGuestDetails__back-button[data-v-2a76ed48] {
  align-items: center;
  aspect-ratio: 1/1;
  border: 2px solid var(--col-secondary);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  width: 4rem;
}
.AppGuestDetails__back-svg[data-v-2a76ed48] {
  flex-shrink: 0;
  height: 3rem;
  transform: rotate(180deg);
  width: 3rem;
}
.AppGuestDetails__details[data-v-2a76ed48] {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}
.AppGuestDetails__divider--vertical[data-v-2a76ed48] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 4.125rem;
  margin: 0;
  width: 1px;
}
.AppGuestDetails__info-bold[data-v-2a76ed48] {
  font-weight: 700;
}
.AppGuestDetails__details-tile[data-v-2a76ed48] {
  border-left: 1px solid var(--col-blue-grey-50);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-inline: 1rem;
  text-wrap: nowrap;
}
.AppGuestDetails__details-tile-title[data-v-2a76ed48] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  line-height: 1.75rem;
}
.AppGuestDetails__details-tile-value[data-v-2a76ed48] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.625rem;
  font-weight: var(--font-weight-bold);
  line-height: 2rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.CommonHeading[data-v-775b02c5] {
  color: var(--col-black);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 3rem;
}
.CommonHeading--main[data-v-775b02c5] {
  margin-block: 0 1.25rem;
}
.CommonHeading--line[data-v-775b02c5] {
  align-items: center;
  color: var(--col-secondary);
  display: flex;
  font-size: 1.125rem;
  gap: 0.5rem;
}
.CommonHeading--line[data-v-775b02c5]::after {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}
.CommonHeading--margin-remove[data-v-775b02c5] {
  margin: 0;
}
.CommonHeading--centered.CommonHeading--line[data-v-775b02c5]::before {
  background-color: var(--col-outline);
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
}

/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-775b02c5] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-775b02c5] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-775b02c5] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-775b02c5] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-775b02c5] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-775b02c5] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-775b02c5] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-775b02c5]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-775b02c5] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-775b02c5] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-775b02c5] {
  width: 100%;
}
.Form__input--error[data-v-775b02c5] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-775b02c5] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-775b02c5] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-775b02c5]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-775b02c5] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-775b02c5]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-775b02c5] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-775b02c5] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-775b02c5]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-775b02c5] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-775b02c5] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-775b02c5] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-775b02c5]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-775b02c5] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-775b02c5] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-775b02c5] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-775b02c5] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-775b02c5] > * {
  flex: 1;
}
.Form__group[data-v-775b02c5] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-775b02c5] {
  width: 100%;
}
.Form--nomargin[data-v-775b02c5] {
  margin-block: 0;
}
.AppDiscountDialog[data-v-775b02c5] {
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--drop-shadow-box-shadow);
  box-sizing: border-box;
  max-width: 36.5rem;
  padding: 3rem;
  text-align: center;
  width: 100%;
}
.AppDiscountDialog__label[data-v-775b02c5] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 0;
  text-align: left;
}
.AppDiscountDialog__input[data-v-775b02c5] {
  height: 4rem;
}
.AppDiscountDialog__form[data-v-775b02c5] {
  margin-bottom: 0;
}
.AppDiscountDialog__strikethrough-text[data-v-775b02c5] {
  margin-block: 0;
}
.AppDiscountDialog__divider[data-v-775b02c5] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 1px;
  width: 100%;
}
.AppDiscountDialog__title[data-v-775b02c5] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: 3rem;
  text-align: center;
}
.AppDiscountDialog__total-line[data-v-775b02c5] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-block: 2rem;
}
.AppDiscountDialog__total-title[data-v-775b02c5] {
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: normal;
}
.AppDiscountDialog__total-price[data-v-775b02c5] {
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  text-align: right;
}
.AppDiscountDialog__button-container[data-v-775b02c5] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-6bf5723c] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-6bf5723c] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-6bf5723c] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-6bf5723c] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-6bf5723c] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-6bf5723c] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-6bf5723c] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-6bf5723c]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-6bf5723c] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-6bf5723c] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-6bf5723c] {
  width: 100%;
}
.Form__input--error[data-v-6bf5723c] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-6bf5723c] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-6bf5723c] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-6bf5723c]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-6bf5723c] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-6bf5723c]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-6bf5723c] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-6bf5723c] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-6bf5723c]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-6bf5723c] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-6bf5723c] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-6bf5723c] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-6bf5723c]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-6bf5723c] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-6bf5723c] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-6bf5723c] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-6bf5723c] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-6bf5723c] > * {
  flex: 1;
}
.Form__group[data-v-6bf5723c] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-6bf5723c] {
  width: 100%;
}
.Form--nomargin[data-v-6bf5723c] {
  margin-block: 0;
}
.FormPasswordView__row[data-v-6bf5723c] {
  display: flex;
  gap: 1rem;
}
.FormPasswordView__input-container[data-v-6bf5723c] {
  position: relative;
  width: 100%;
}
.FormPasswordView__toggle-visibility[data-v-6bf5723c] {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0.375rem;
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}
.FormPasswordView__toggle-visibility[data-v-6bf5723c]:hover, .FormPasswordView__toggle-visibility[data-v-6bf5723c]:focus {
  background-color: var(--col-surface);
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-2fe6ea2a] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-2fe6ea2a] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-2fe6ea2a] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-2fe6ea2a] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-2fe6ea2a] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-2fe6ea2a] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-2fe6ea2a] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-2fe6ea2a]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-2fe6ea2a] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-2fe6ea2a] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-2fe6ea2a] {
  width: 100%;
}
.Form__input--error[data-v-2fe6ea2a] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-2fe6ea2a] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-2fe6ea2a] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-2fe6ea2a]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-2fe6ea2a] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-2fe6ea2a]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-2fe6ea2a] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-2fe6ea2a] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-2fe6ea2a]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-2fe6ea2a] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-2fe6ea2a] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-2fe6ea2a] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-2fe6ea2a]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-2fe6ea2a] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-2fe6ea2a] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-2fe6ea2a] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-2fe6ea2a] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-2fe6ea2a] > * {
  flex: 1;
}
.Form__group[data-v-2fe6ea2a] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-2fe6ea2a] {
  width: 100%;
}
.Form--nomargin[data-v-2fe6ea2a] {
  margin-block: 0;
}
.AppDiscountConfirmation[data-v-2fe6ea2a] {
  border: none;
  border-radius: 0.5rem;
  box-shadow: var(--drop-shadow-box-shadow);
  box-sizing: border-box;
  max-width: 36.5rem;
  padding: 3rem;
  width: 100%;
}
.AppDiscountConfirmation__label[data-v-2fe6ea2a] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 0;
}
.AppDiscountConfirmation__form[data-v-2fe6ea2a] {
  margin-bottom: 0;
}
.AppDiscountConfirmation__strikethrough-text[data-v-2fe6ea2a] {
  margin-block: 0;
}
.AppDiscountConfirmation__divider[data-v-2fe6ea2a] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 1px;
  width: 100%;
}
.AppDiscountConfirmation__title[data-v-2fe6ea2a] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: 3rem;
  text-align: center;
}
.AppDiscountConfirmation__total-line[data-v-2fe6ea2a] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-block: 2rem;
}
.AppDiscountConfirmation__total-title[data-v-2fe6ea2a] {
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: normal;
}
.AppDiscountConfirmation__total-price[data-v-2fe6ea2a] {
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  text-align: right;
}
.AppDiscountConfirmation__button-container[data-v-2fe6ea2a] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.AppDiscountConfirmation[data-v-2fe6ea2a] .Form__input {
  height: 4rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppBookingSummary[data-v-e20b3613] {
  background: var(--col-grey-xlight);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2.875rem;
  padding: 4.5rem;
}
.AppBookingSummary__tiles[data-v-e20b3613] {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}.AppNotFoundView[data-v-2499b48c] {
  display: block;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppBasketItem[data-v-83246283] {
  align-items: center;
  background: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 8px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: row;
  gap: 4rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1.875rem;
}
.AppBasketItem__button-minus[data-v-83246283] {
  width: 2rem;
}
.AppBasketItem__button[data-v-83246283] {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  padding: 0;
  width: 4rem;
}
.AppBasketItem__button[data-v-83246283]:disabled {
  background: var(--col-blue-grey-50);
  border: 1px solid var(--col-blue-grey-50);
  cursor: not-allowed;
  fill: var(--col-blue-grey-50);
}
.AppBasketItem__quantity-controls[data-v-83246283] {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  gap: 0.5rem;
  justify-content: space-between;
  min-width: 13.125rem;
}
.AppBasketItem__quantity[data-v-83246283] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.AppBasketItem__product-details[data-v-83246283] {
  display: flex;
  flex-direction: column;
  flex-grow: 9;
  gap: 0.5rem;
}
.AppBasketItem__product-name[data-v-83246283] {
  color: var(--col-blue-grey-900);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
}
.AppBasketItem__price[data-v-83246283] {
  color: var(--col-black);
  flex-grow: 1;
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 12.5rem;
}
.AppBasketItem__product-info[data-v-83246283] {
  color: var(--col-blue-grey);
  font-family: var(--font-family-base);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}
.AppBasketItem__product-text--bold[data-v-83246283] {
  font-weight: var(--font-weight-bold);
}
.AppBasketItem__divider--vertical[data-v-83246283] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 4.125rem;
  margin: 0;
  width: 1px;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppBasketSummary[data-v-b9b44849] {
  align-items: center;
  background: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 8px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  height: -moz-min-content;
  height: min-content;
  justify-content: space-between;
  padding: 3rem;
  width: 25.5rem;
}
.AppBasketSummary__items[data-v-b9b44849] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.AppBasketSummary__item-row[data-v-b9b44849] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppBasketSummary__item-content[data-v-b9b44849] {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.AppBasketSummary__item-quantity[data-v-b9b44849] {
  align-items: center;
  background-color: var(--col-danger-variant);
  border-radius: 4px;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  gap: 0.625rem;
  height: 3rem;
  justify-content: center;
  line-height: 1.75rem;
  padding: 0.625rem;
  text-align: center;
  width: 3rem;
}
.AppBasketSummary__item-name[data-v-b9b44849] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
}
.AppBasketSummary__item-price[data-v-b9b44849] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppBasketSummary__total[data-v-b9b44849] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppBasketSummary__total-quantity[data-v-b9b44849] {
  align-items: center;
  background-color: var(--col-danger-variant);
  border-radius: 4px;
  color: var(--col-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  gap: 0.625rem;
  height: 3rem;
  line-height: 1.75rem;
  padding: 0.625rem;
  place-content: center center;
  text-align: center;
  width: 3rem;
}
.AppBasketSummary__total-name[data-v-b9b44849] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppBasketSummary__total-price[data-v-b9b44849] {
  align-content: center;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
}
.AppBasketSummary__title[data-v-b9b44849] {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.AppBasketSummary__title-text[data-v-b9b44849] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem;
  margin: 0;
  text-align: center;
}
.AppBasketSummary__divider[data-v-b9b44849] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 1px;
  width: 100%;
}
.AppBasketSummary__button[data-v-b9b44849] {
  align-items: center;
  align-self: stretch;
  display: flex;
  height: 4rem;
  justify-content: center;
  padding: 1rem 2rem;
}
.AppBasketSummary__button-container[data-v-b9b44849] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppGuestControlBar[data-v-7e15267d] {
  display: flex;
  flex-direction: row;
  height: 4rem;
  width: 100%;
}
.AppGuestControlBar__title[data-v-7e15267d] {
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.5rem;
}
.AppGuestControlBar__content[data-v-7e15267d] {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  width: 100%;
}
.AppGuestControlBar__content--right[data-v-7e15267d] {
  flex-direction: row-reverse;
}
.AppGuestControlBar__cancel-button[data-v-7e15267d] {
  align-items: center;
  border: 1px solid var(--col-secondary);
  border-radius: 4px;
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  text-wrap: nowrap;
  width: -moz-min-content;
  width: min-content;
}
.AppGuestControlBar__back-button[data-v-7e15267d] {
  align-items: center;
  aspect-ratio: 1/1;
  border: 2px solid var(--col-secondary);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 4rem;
}
.AppGuestControlBar__back-svg[data-v-7e15267d] {
  flex-shrink: 0;
  height: 3rem;
  transform: rotate(180deg);
  width: 3rem;
}
.AppGuestControlBar__details[data-v-7e15267d] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.AppGuestControlBar__divider--vertical[data-v-7e15267d] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: 4.125rem;
  margin: 0;
  width: 1px;
}
.AppGuestControlBar__info-bold[data-v-7e15267d] {
  font-weight: 700;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppBasketItemEdit[data-v-94040520] {
  background: var(--col-grey-xlight);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2.875rem;
  padding: 4.5rem;
  padding-bottom: 0;
}
.AppBasketItemEdit__tiles[data-v-94040520] {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  width: 100%;
}
.AppBasketItemEdit__basket-items[data-v-94040520] {
  display: flex;
  flex-direction: column;
  max-height: 65dvh;
  overflow-y: auto;
  width: 100%;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.EditButton[data-v-ef95c191] {
  background: none;
  border: 1px solid black;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.EditButton__image[data-v-ef95c191] {
  align-items: flex-start;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-0889fa44] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-0889fa44] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-0889fa44] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-0889fa44] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-0889fa44] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-0889fa44] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-0889fa44] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-0889fa44]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-0889fa44] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-0889fa44] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-0889fa44] {
  width: 100%;
}
.Form__input--error[data-v-0889fa44] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-0889fa44] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-0889fa44] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-0889fa44]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-0889fa44] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-0889fa44]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-0889fa44] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-0889fa44] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-0889fa44]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-0889fa44] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-0889fa44] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-0889fa44] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-0889fa44]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-0889fa44] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-0889fa44] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-0889fa44] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-0889fa44] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-0889fa44] > * {
  flex: 1;
}
.Form__group[data-v-0889fa44] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-0889fa44] {
  width: 100%;
}
.Form--nomargin[data-v-0889fa44] {
  margin-block: 0;
}
.AddDelayModal__actions[data-v-0889fa44] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  justify-content: center;
}
.AddDelayModal__heading[data-v-0889fa44] {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
}
.AddDelayModal__content-text[data-v-0889fa44] {
  display: block;
  font-size: 1.375rem;
  font-weight: 400;
  margin-bottom: 2rem;
}
.AddDelayModal__form[data-v-0889fa44] {
  text-align: left;
}
.AddDelayModal__input[data-v-0889fa44] {
  flex-grow: 1;
}
.AddDelayModal__input-container[data-v-0889fa44] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.AddDelayModal__flight-delay-container[data-v-0889fa44] {
  display: flex;
  flex-direction: column;
}
.AddDelayModal__hour-minute-seperator[data-v-0889fa44] {
  margin: 0 1rem;
}
.AddDelayModal__section-header[data-v-0889fa44] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.AddDelayModal__sub-text[data-v-0889fa44] {
  font-family: var(--font-family-base);
  font-size: 1.25rem;
  line-height: 1.375rem;
  margin-bottom: 1rem;
}
.AddDelayModal__form-label[data-v-0889fa44] {
  font-size: 1.375rem;
  margin-bottom: 1rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.AppSiteTable[data-v-2231f7d3] {
  display: block;
}
.AppSiteTable--horizontal-scroll[data-v-2231f7d3] {
  overflow-x: auto;
}
.AppSiteTable__table[data-v-2231f7d3] {
  background-color: var(--col-white);
  border: 1px solid var(--col-outline);
  border-collapse: separate;
  border-radius: 5px;
  border-spacing: 0;
  box-shadow: var(--drop-shadow-box-shadow);
  width: 100%;
}
.AppSiteTable__header[data-v-2231f7d3] {
  background-color: var(--col-surface-container-highest);
  font-family: var(--font-family-base);
  padding-block: 1.5rem;
  position: relative;
  text-align: left;
  text-wrap: nowrap;
}
.AppSiteTable__header-text[data-v-2231f7d3] {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 700;
}
.AppSiteTable__cell[data-v-2231f7d3] {
  padding-block: 1.5rem;
}
.AppSiteTable__cell-content[data-v-2231f7d3] {
  align-items: center;
  display: flex;
  height: 100%;
  padding-inline: 1.5rem;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.AppSiteTable__cell-data[data-v-2231f7d3] {
  align-items: center;
  display: flex;
  overflow-wrap: break-word;
}
.AppSiteTable__action-button-image[data-v-2231f7d3] {
  align-items: flex-start;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.5rem;
}
.AppSiteTable__action-button[data-v-2231f7d3] {
  background: none;
  border: 1px solid black;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.AppSiteTable__sort[data-v-2231f7d3] {
  margin-inline-start: 0.25rem;
  vertical-align: bottom;
}
.AppSiteTable__sort-header-button[data-v-2231f7d3] {
  align-items: center;
  background: none;
  border: 0;
  display: flex;
  padding-inline-start: 1.5rem;
}
.AppSiteTable__sort--asc[data-v-2231f7d3] {
  transform: scale(1, -1);
}
.AppSiteTable__cell-icon[data-v-2231f7d3] {
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
}
th[data-v-2231f7d3]:first-child {
  border-top-left-radius: 4px;
}
th[data-v-2231f7d3]:last-child {
  border-top-right-radius: 4px;
}
tr:last-child td[data-v-2231f7d3]:first-child {
  border-bottom-left-radius: 4px;
}
tr:last-child td[data-v-2231f7d3]:last-child {
  border-bottom-right-radius: 4px;
}
th:not(:first-child) .AppSiteTable__sort-header-button[data-v-2231f7d3] {
  border-color: var(--col-prominent-outline);
  border-style: solid;
  border-width: 0 0 0 1px;
}
.AppSiteTable__cell[data-v-2231f7d3]:not(:first-child) {
  position: relative;
}
.AppSiteTable__cell[data-v-2231f7d3]:not(:first-child)::before {
  background-color: var(--col-surface-container-low);
  bottom: 1.5rem;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 1.5rem;
  width: 1px;
}
tr:not(:first-child) .AppSiteTable__cell[data-v-2231f7d3] {
  border-top: 1px solid var(--col-outline);
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
.NavPagination[data-v-1e87022f] {
  display: block;
}
.NavPagination__list[data-v-1e87022f] {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.NavPagination__list-item[data-v-1e87022f] {
  margin: 0;
}
.NavPagination__item[data-v-1e87022f] {
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--col-secondary);
  border-radius: 0.25rem;
  color: var(--col-secondary);
  display: flex;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 700;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  width: 2.5rem;
}
.NavPagination__item[data-v-1e87022f]:hover:not(.NavPagination__item--spacer, [disabled], .NavPagination__item--current) {
  background-color: var(--col-secondary-hover-opacity);
  border-color: var(--secondary-hover);
  cursor: pointer;
}
.NavPagination__item--current[data-v-1e87022f] {
  background-color: var(--col-primary-hover-opacity);
  border-color: var(--col-primary);
  color: var(--col-primary);
}
.NavPagination__item--next[data-v-1e87022f] {
  margin-inline-start: 1rem;
}
.NavPagination__item--prev[data-v-1e87022f] {
  margin-inline-end: 1rem;
}
.NavPagination__item--prev .NavPagination__arrow[data-v-1e87022f] {
  transform: rotate(180deg);
}
.NavPagination__item--spacer[data-v-1e87022f] {
  border-color: transparent;
}
.NavPagination__item[disabled][data-v-1e87022f]:not(.NavPagination__item--current) {
  background-color: var(--col-outline);
  border-color: var(--col-outline);
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-94013b53] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-94013b53] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-94013b53] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-94013b53] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-94013b53] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-94013b53] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-94013b53] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-94013b53]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-94013b53] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-94013b53] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-94013b53] {
  width: 100%;
}
.Form__input--error[data-v-94013b53] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-94013b53] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-94013b53] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-94013b53]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-94013b53] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-94013b53]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-94013b53] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-94013b53] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-94013b53]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-94013b53] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-94013b53] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-94013b53] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-94013b53]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-94013b53] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-94013b53] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-94013b53] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-94013b53] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-94013b53] > * {
  flex: 1;
}
.Form__group[data-v-94013b53] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-94013b53] {
  width: 100%;
}
.Form--nomargin[data-v-94013b53] {
  margin-block: 0;
}
.AppFlightDelayListView[data-v-94013b53] {
  padding-top: 3rem;
}
.AppFlightDelayListView__container[data-v-94013b53] {
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;
}
.AppFlightDelayListView__heading[data-v-94013b53] {
  font-size: 3rem;
}
.AppFlightDelayListView__control-bar[data-v-94013b53] {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}
.AppFlightDelayListView__controls[data-v-94013b53] {
  display: flex;
  gap: 1rem;
  width: 50%;
}
.AppFlightDelayListView__form[data-v-94013b53] {
  flex-grow: 1;
  gap: 1.5rem;
  margin: 0;
  max-width: 54.375rem;
}
.AppFlightDelayListView__button[data-v-94013b53] {
  align-items: center;
  display: flex;
  margin-top: auto;
  padding-block: 0.375rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-4f6826ec] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-4f6826ec] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-4f6826ec] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-4f6826ec] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-4f6826ec] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-4f6826ec] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-4f6826ec] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-4f6826ec]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-4f6826ec] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-4f6826ec] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-4f6826ec] {
  width: 100%;
}
.Form__input--error[data-v-4f6826ec] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-4f6826ec] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-4f6826ec] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-4f6826ec]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-4f6826ec] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-4f6826ec]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-4f6826ec] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-4f6826ec] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-4f6826ec]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-4f6826ec] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-4f6826ec] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-4f6826ec] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-4f6826ec]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-4f6826ec] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-4f6826ec] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-4f6826ec] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-4f6826ec] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-4f6826ec] > * {
  flex: 1;
}
.Form__group[data-v-4f6826ec] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-4f6826ec] {
  width: 100%;
}
.Form--nomargin[data-v-4f6826ec] {
  margin-block: 0;
}
.AppFlightDelayProcessingView[data-v-4f6826ec] {
  padding-top: 3rem;
}
.AppFlightDelayProcessingView__container[data-v-4f6826ec] {
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;
}
.AppFlightDelayProcessingView__heading[data-v-4f6826ec] {
  font-size: 3rem;
}
.AppFlightDelayProcessingView__control-bar[data-v-4f6826ec] {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}
.AppFlightDelayProcessingView__controls[data-v-4f6826ec] {
  align-items: end;
  display: flex;
  gap: 1rem;
  width: 50%;
}
.AppFlightDelayProcessingView__form[data-v-4f6826ec] {
  flex-grow: 1;
  gap: 1.5rem;
  margin: 0;
  max-width: 54.375rem;
}
.AppFlightDelayProcessingView__button[data-v-4f6826ec] {
  align-items: center;
  display: flex;
  margin-top: auto;
  padding-block: 0.375rem;
}
.AppFlightDelayProcessingView__action-buttons[data-v-4f6826ec] {
  display: flex;
  gap: 0.5rem;
}
.AppFlightDelayProcessingView__vertical-divider[data-v-4f6826ec] {
  background: var(--col-blue-grey-50);
  border: 0;
  height: auto;
  margin: 0;
  margin-inline: 0.5rem;
  width: 1px;
}
.AppFlightDelayProcessingView__delayed-info[data-v-4f6826ec] {
  display: flex;
  flex-direction: row;
}
.AppFlightDelayProcessingView__delayed-time[data-v-4f6826ec] {
  color: var(--col-primary);
  font-weight: var(--font-weight-bold);
  margin-left: 0.25rem;
}
.AppFlightDelayProcessingView__table-heading[data-v-4f6826ec] {
  font-size: 2rem;
}/**
 * Mixin: visually-hidden
 *
 * Hides an element visually while still allowing it to be accessible to screen readers.
 *
 * @mixin
 * @usage
 *   .element {
 *     @include visually-hidden;
 *   }
 *
 * @description
 *   This mixin applies styles to visually hide an element on the page.
 *   It sets the clip property to a rectangle with all sides set to 0,
 *   the clip-path property to inset(50%), and the height, overflow, position, white-space,
 *   and width properties to specific values that hide the element from view.
 *   This technique is commonly used to hide elements visually while still allowing them
 *   to be accessible to screen readers.
 */
/**
 * Mixin: mask-link
 *
 * This mixin is used to create a mask effect for a link element.
 * It adds a pseudo-element ::after to the link element and sets its position, size, and content.
 * The pseudo-element covers the entire link parent element, creating a mask effect.
 *
 * Usage:
 *
 * ```
 * .my-link-parent {
 *   position: relative;
 * }
 * .my-link {
 *   @include mask-link;
 * }
 * ```
 */
/**
 * Typography mixin to set font family, size, weight and line height.
 *
 * @param {String} $font-family - The font family.
 * @param {String} $font-size - The font size.
 * @param {String} $font-weight - The font weight.
 * @param {String} $letter-spacing - The letter spacing.
 * @param {String} $line-height - The line height.
 * @param {String} $margin-block - The vertical margins (top and bottom) applied to the element.
 * @param {Boolean} $apply-size-only - If true, only the font size and line-height will be applied.
 */
/**
 * Mixin: unstyled-button
 *
 * Description:
 * This mixin sets the styles for an unstyled button. It removes the background,
 * border, and padding, and sets the cursor to pointer. The font size is set to
 * 1rem and the margin is set to 0.
 *
 * Usage:
 * Include this mixin in a selector to apply the unstyled button styles.
 *
 * Example:
 * .my-button {
 *   @include unstyled-button;
 * }
 */
/**
 * Mixin: unstyled-list
 *
 * Description:
 * This mixin sets the styles for an unstyled list by removing the default list styles,
 * including the bullet points, margin, and padding.
 *
 * Usage:
 * To use this mixin, include it in a selector where you want to remove the list styles.
 * For example:
 *
 * ```
 * ul {
 *   @include unstyled-list;
 * }
 * ```
 *
 * Result:
 * The list items within the `ul` element will have no bullet points, margin, or padding.
 */
/**
 * Mixin for creating a container element.
 *
 * @param {number} $max-width - The maximum width of the container.
 * @param {number} $padding - The padding of the container.
 */
/**
 * Basic mixin for creating container queries.
 * This is mainly to keep all the syntax errors that can occur when using
 * the @container directive in one place.
 *
 * @param {string} $container-name - The name of the container.
 * @param {string} $container-type - The type of the container.
 * @param {number} $from - The minimum value for the container type.
 * @param {number} $until - The maximum value for the container type.
 */
/**
 * @mixin margin-block
 * @description Sets the margin-block property to the specified size.
 *
 * @param {number|string} $size - The size of the margin-block.
 */
/**
 * @mixin margin-inline
 * @description Sets the inline margin to the specified size.
 *
 * @param {number} $size - The size of the margin.
 */
/**
 * Converts a pixel value to a rem value based on the base font size.
 *
 * @param {number} $size-in-px - The size in pixels to convert to rem.
 * @param {number} $base-font-size - The base font size in pixels. Default value is 16.
 * @returns {string} The converted value in rem.
 */
/**
 * Calculates a unitless line height by dividing the line height value by the font size value.
 *
 * @param {Number} $font-size-in-px - The font size value in pixels.
 * @param {Number} $line-height-in-px - The line height value in pixels.
 * @return {Number} - The unitless line height.
 */
/**
  * Site specific utils, not included in primer-utils
  *
  */
.Form[data-v-238190d7] {
  --form-row-spacing: 2.5rem;
  color: var(--col-text);
  display: grid;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  gap: var(--form-row-spacing);
  grid-template-columns: 1fr;
  line-height: var(--line-height-body);
  margin-block: 1.5rem;
}
.Form__actions[data-v-238190d7] {
  display: flex;
  gap: 2rem;
}
.Form__fieldset[data-v-238190d7] {
  background-color: var(--col-white);
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-shadow: var(--drop-shadow-box-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
}
.Form__fieldset + .Form__fieldset[data-v-238190d7] {
  margin-top: var(--form-row-spacing);
}
.Form__fieldset-header[data-v-238190d7] {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Form__checkbox-group[data-v-238190d7] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.Form__input[data-v-238190d7] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  height: 3rem;
  line-height: 1.27;
  padding: 0.75rem 1rem;
}
.Form__input[data-v-238190d7]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__input[type=number][data-v-238190d7] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.Form__input--textarea[data-v-238190d7] {
  min-height: 7.8125rem;
}
.Form__input--fullwidth[data-v-238190d7] {
  width: 100%;
}
.Form__input--error[data-v-238190d7] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__input--vueselect[data-v-238190d7] {
  --vs-border-radius: 4px;
  --vs-border: 1px solid var(--col-blue-grey-50);
  --vs-menu-border: 2px solid var(--col-prominent-outline);
  --vs-min-height: 3rem;
  --vs-option-focused-background-color: var(--col-secondary-hover-opacity);
  --vs-option-hover-background-color: var(--col-surface-container);
  --vs-option-padding: 0.75rem 1rem;
  --vs-option-selected-background-color: var(--col-surface-container);
  --vs-outline-color: var(--col-prominent-outline);
  --vs-padding: 0rem 1rem;
  border: 0;
  padding: 0;
}
.Form__label[data-v-238190d7] {
  color: var(--col-black);
  display: block;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem;
  margin-block: 0 0.375rem;
}
.Form__label[data-v-238190d7]:has(+ .Form__label-detail) {
  margin-block-end: 0.25rem;
}
.Form__label-detail[data-v-238190d7] {
  margin-block: 0 0.5rem;
}
.Form__label-detail[data-v-238190d7]:has(+ .CheckBox) {
  margin-block: 0 1rem;
}
.Form__legend[data-v-238190d7] {
  font-size: 1.5rem;
  font-weight: 700;
}
.Form__link[data-v-238190d7] {
  color: var(--col-body);
  text-decoration: underline;
}
.Form__link[data-v-238190d7]:hover {
  color: var(--col-primary);
}
.Form__select[data-v-238190d7] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--col-white);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDE2IDEwIiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik03Ljk5NjUyIDkuNTA4NTZDNy44MTYwNiA5LjUwODU2IDcuNjQ4MDggOS40Nzk3MyA3LjQ5MjU4IDkuNDIyMDdDNy4zMzcwOCA5LjM2NDQyIDcuMTg5MTkgOS4yNjU1OCA3LjA0ODkyIDkuMTI1NTVMMC4zMTgzOSAyLjM5NTAyQzAuMTExMjIzIDIuMTg3NiAwLjAwNTE0NDE2IDEuOTI2OSAwLjAwMDE1MjIwNCAxLjYxMjlDLTAuMDA0NTkwMTYgMS4yOTkxNiAwLjEwMTQ4OSAxLjAzMzcxIDAuMzE4MzkgMC44MTY1NjJDMC41MzU1NCAwLjU5OTY2MSAwLjc5ODYxNSAwLjQ5MTIxMSAxLjEwNzYyIDAuNDkxMjExQzEuNDE2NjIgMC40OTEyMTEgMS42Nzk3IDAuNTk5NjYxIDEuODk2ODUgMC44MTY1NjJMNy45OTY1MiA2LjkxNjYxTDE0LjA5NjIgMC44MTY1NjJDMTQuMzAzNiAwLjYwOTM5NiAxNC41NjQzIDAuNTAzMzE3IDE0Ljg3ODMgMC40OTgzMjVDMTUuMTkyMSAwLjQ5MzU4MiAxNS40NTc1IDAuNTk5NjYxIDE1LjY3NDYgMC44MTY1NjJDMTUuODkxNiAxLjAzMzcxIDE2IDEuMjk2NzkgMTYgMS42MDU3OUMxNiAxLjkxNDc5IDE1Ljg5MTYgMi4xNzc4NyAxNS42NzQ2IDIuMzk1MDJMOC45NDQxMiA5LjEyNTU1QzguODAzODQgOS4yNjU1OCA4LjY1NTk2IDkuMzY0NDIgOC41MDA0NiA5LjQyMjA3QzguMzQ0OTYgOS40Nzk3MyA4LjE3Njk4IDkuNTA4NTYgNy45OTY1MiA5LjUwODU2WiIgZmlsbD0iYmxhY2siLz4NCjwvc3ZnPg==");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  background-size: 0.625rem;
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  color: var(--col-black);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  height: 3rem;
  line-height: 1;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  width: 100%;
}
.Form__select--error[data-v-238190d7] {
  border-color: var(--col-primary);
  border-width: 2px;
}
.Form__textarea[data-v-238190d7] {
  border: 1px solid var(--col-blue-grey-50);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  padding: 0.75rem 1rem;
  width: 100%;
}
.Form__textarea[data-v-238190d7]:focus {
  outline: 2px solid var(--col-prominent-outline);
}
.Form__error-message[data-v-238190d7] {
  color: var(--col-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-block-start: 0.25rem;
}
.Form__column[data-v-238190d7] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.Form__column--double[data-v-238190d7] {
  flex-direction: row;
  gap: 1.25rem;
  grid-column: span 2;
}
.Form__row[data-v-238190d7] {
  display: flex;
  gap: 1.25rem;
  width: 100%;
}
.Form__row--equal-width[data-v-238190d7] > * {
  flex: 1;
}
.Form__group[data-v-238190d7] {
  margin-bottom: 1.25rem;
  width: 100%;
}
.Form__input--full[data-v-238190d7] {
  width: 100%;
}
.Form--nomargin[data-v-238190d7] {
  margin-block: 0;
}
.AppSalesListingView[data-v-238190d7] {
  padding-top: 3rem;
}
.AppSalesListingView__container[data-v-238190d7] {
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;
}
.AppSalesListingView__heading[data-v-238190d7] {
  font-size: 3rem;
}
.AppSalesListingView__control-bar[data-v-238190d7] {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}
.AppSalesListingView__controls[data-v-238190d7] {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
  width: 50%;
}
.AppSalesListingView__form[data-v-238190d7] {
  flex-grow: 1;
  gap: 1.5rem;
  margin: 0;
  max-width: 27.1875rem;
}
.AppSalesListingView__button[data-v-238190d7] {
  align-items: center;
  display: flex;
  margin-top: auto;
  padding-block: 0.375rem;
}
.AppSalesListingView__actions[data-v-238190d7] {
  display: flex;
  gap: 1.5rem;
}