@font-face {
  font-family: 'Trio Grotesk';
  src:
    url('/nbapp/fonts/TrioGrotesk.woff2') format('woff2'),
    url('/nbapp/fonts/TrioGrotesk.woff') format('woff'),
    url('/nbapp/fonts/TrioGrotesk.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trio Grotesk';
  src:
    url('/nbapp/fonts/TrioGrotesk-Medium.woff2') format('woff2'),
    url('/nbapp/fonts/TrioGrotesk-Medium.woff') format('woff'),
    url('/nbapp/fonts/TrioGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trio Grotesk';
  src:
    url('/nbapp/fonts/TrioGrotesk-Bold.woff2') format('woff2'),
    url('/nbapp/fonts/TrioGrotesk-Bold.woff') format('woff'),
    url('/nbapp/fonts/TrioGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.pumphousepoint {
  /**
    * COLOURS
    * Reference: https://www.figma.com/design/tfbYg2w0y12K41if8EzKdy/NRMA-Resorts--%E2%80%A8UI-Kit-and-Design-system?node-id=1-33&t=w1pFjGxY8Qiu2vIg-0
  */

  /* brand colour pallette */
  --pumphousepoint-green: #4b6f64;
  --pumphousepoint-green-medium: #a5b7b1;
  --pumphousepoint-green-focus: #354e46;
  --pumphousepoint-off-white: #f6f6ef;
  --pumphousepoint-blue: #4f6f98;
  --pumphousepoint-blue-medium: #a7b7cb;
  --pumphousepoint-blue-medium-rgb: 167, 183, 203;
  --pumphousepoint-blue-light: #dfe2e5;
  --pumphousepoint-blue-focus: #3f597a;
  --pumphousepoint-blue-focus-rgb: 63, 89, 122;
  --pumphousepoint-navyblue: #29323d;
  --pumphousepoint-navyblue-medium: #3e4750;
  --pumphousepoint-link-blue: #849ab7;
  --pumphousepoint-special-green: #01753c;
  --pumphousepoint-special-red: #b33e3e;
  --pumphousepoint-special-blue: #005aff;
  --pumphousepoint-grey: #bdbdbd;
  --pumphousepoint-grey-medium: #e0e0e0;
  --pumphousepoint-grey-light: #f2f2f2;

  /* primary brand colours */
  --primary-100: var(--pumphousepoint-blue);
  --primary-100-30: var(--pumphousepoint-blue-medium);
  --primary-100-20: var(--pumphousepoint-blue-medium);
  --primary-100-10: var(--pumphousepoint-blue-light);
  --primary-200: var(--pumphousepoint-green);
  --primary-200-30: var(--pumphousepoint-green-medium);
  --primary-200-20: var(--pumphousepoint-green-medium);
  --primary-200-10: var(--pumphousepoint-off-white);

  /* secondary brand colours */
  --secondary-100: var(--pumphousepoint-blue);
  --secondary-100-30: var(--pumphousepoint-blue-medium);
  --secondary-100-20: var(--pumphousepoint-blue-medium);
  --secondary-100-10: var(--pumphousepoint-blue-medium);
  --secondary-200: var(--pumphousepoint-navyblue);
  --secondary-200-30: var(--pumphousepoint-navyblue-medium);
  --secondary-200-20: var(--pumphousepoint-navyblue-medium);
  --secondary-200-10: var(--pumphousepoint-link-blue);

  /* neutral colours */
  --neutral: var(--black);
  --neutral-50: var(--black);
  --neutral-40: #343434;
  --neutral-30: #757575;
  --neutral-20: #e0e0e0;
  --neutral-10: #e0e0e0;

  /* functional colours */
  --primary-text: var(--white);
  --secondary-text: var(--black);
  --primary-link: var(--pumphousepoint-blue);
  --secondary-link: var(--pumphousepoint-blue-light);
  --alert-success: var(--pumphousepoint-special-green);
  --alert-error: var(--pumphousepoint-special-red);

  /* selectable background colours */
  --dark-background: var(--pumphousepoint-navyblue);
  --primary-background: var(--pumphousepoint-navyblue);
  --secondary-background: hsla(210, 13%, 28%, 0.9);

  /* gradient */
  --figma-gradiant: linear-gradient(
    180deg,
    #353c59 0%,
    rgba(217, 217, 217, 0) 100%
  );
  --navigation-bg-gradiant: linear-gradient(
    180deg,
    #29323d 0%,
    rgba(217, 217, 217, 0) 100%
  );

  /**
    * SPACING
    * Reference: https://nrmagroup.atlassian.net/browse/HPD-1287
  */
  --vertical-margin-mobile: 2.5rem;
  --vertical-margin-tablet: 3.75rem;
  --vertical-margin-desktop: 3.75rem;

  /**
    * TYPESTYLES
    * Reference: https://www.figma.com/file/tfbYg2w0y12K41if8EzKdy/NRMA-Resorts--%E2%80%A8UI-Kit-and-Design-system?type=design&node-id=1-1889&mode=design&t=OvAid4dtckS9z4hX-0
  */

  /* brand fonts */
  --font-body: 'Montserrat', var(--font-fallback);
  --font-headings: 'Trio Grotesk', var(--font-fallback);
  --font-title: var(--font-body);

  /* special variant */
  --font-special-family: var(--font-headings);
  --font-special-weight: 500;
  --font-special-color: var(
    --pumphousepoint-blue
  ); /* cant find where this is used.. */
  --font-special-line-height: normal;
  --font-special-text-transform: uppercase;
  --font-special-letter-spacing: normal;

  /* brand font types */
  --font-desktop-heading-xl-family: var(--font-headings);
  --font-desktop-heading-xl-size: 34px;
  --font-desktop-heading-xl-weight: 500;
  --font-desktop-heading-xl-line-height: normal;
  --font-desktop-heading-xl-text-transform: uppercase;
  --font-desktop-heading-xl-letter-spacing: 0.1em;
  --font-desktop-heading-xl-margin-top: unset;
  --font-desktop-heading-xl-margin-bottom: 1rem;
  --font-mobile-heading-xl-family: var(--font-headings);
  --font-mobile-heading-xl-size: 26px;
  --font-mobile-heading-xl-weight: 500;
  --font-mobile-heading-xl-line-height: normal;
  --font-mobile-heading-xl-text-transform: uppercase;
  --font-mobile-heading-xl-letter-spacing: normal;
  --font-mobile-heading-xl-margin-top: unset;
  --font-mobile-heading-xl-margin-bottom: 1rem;

  --font-desktop-heading-l-family: var(--font-headings);
  --font-desktop-heading-l-size: 26px;
  --font-desktop-heading-l-weight: 500;
  --font-desktop-heading-l-line-height: normal;
  --font-desktop-heading-l-text-transform: uppercase;
  --font-desktop-heading-l-letter-spacing: normal;
  --font-desktop-heading-l-margin-top: unset;
  --font-desktop-heading-l-margin-bottom: 1rem;
  --font-mobile-heading-l-family: var(--font-headings);
  --font-mobile-heading-l-size: 20px;
  --font-mobile-heading-l-weight: 500;
  --font-mobile-heading-l-line-height: normal;
  --font-mobile-heading-l-text-transform: uppercase;
  --font-mobile-heading-l-letter-spacing: normal;
  --font-mobile-heading-l-margin-top: unset;
  --font-mobile-heading-l-margin-bottom: 1rem;

  --font-desktop-heading-m-family: var(--font-headings);
  --font-desktop-heading-m-size: 20px;
  --font-desktop-heading-m-weight: 500;
  --font-desktop-heading-m-line-height: normal;
  --font-desktop-heading-m-text-transform: uppercase;
  --font-desktop-heading-m-letter-spacing: normal;
  --font-desktop-heading-m-margin-top: unset;
  --font-desktop-heading-m-margin-bottom: 0.5rem;
  --font-mobile-heading-m-family: var(--font-headings);
  --font-mobile-heading-m-size: 16px;
  --font-mobile-heading-m-weight: 500;
  --font-mobile-heading-m-line-height: normal;
  --font-mobile-heading-m-text-transform: uppercase;
  --font-mobile-heading-m-letter-spacing: 0.1em;
  --font-mobile-heading-m-margin-top: unset;
  --font-mobile-heading-m-margin-bottom: 0.5rem;

  --font-desktop-heading-s-family: var(--font-headings);
  --font-desktop-heading-s-size: 16px;
  --font-desktop-heading-s-weight: 500;
  --font-desktop-heading-s-line-height: normal;
  --font-desktop-heading-s-text-transform: uppercase;
  --font-desktop-heading-s-letter-spacing: 0.1em;
  --font-desktop-heading-s-margin-top: unset;
  --font-desktop-heading-s-margin-bottom: 0.5rem;
  --font-mobile-heading-s-family: var(--font-headings);
  --font-mobile-heading-s-size: 13px;
  --font-mobile-heading-s-weight: 500;
  --font-mobile-heading-s-line-height: normal;
  --font-mobile-heading-s-text-transform: uppercase;
  --font-mobile-heading-s-letter-spacing: normal;
  --font-mobile-heading-s-margin-top: unset;
  --font-mobile-heading-s-margin-bottom: 0.5rem;

  --font-desktop-heading-xs-family: var(--font-headings);
  --font-desktop-heading-xs-size: 13px;
  --font-desktop-heading-xs-weight: 500;
  --font-desktop-heading-xs-line-height: normal;
  --font-desktop-heading-xs-text-transform: uppercase;
  --font-desktop-heading-xs-letter-spacing: normal;
  --font-desktop-heading-xs-margin-top: unset;
  --font-desktop-heading-xs-margin-bottom: 0.5rem;
  --font-mobile-heading-xs-family: var(--font-headings);
  --font-mobile-heading-xs-size: 11px;
  --font-mobile-heading-xs-weight: 500;
  --font-mobile-heading-xs-line-height: normal;
  --font-mobile-heading-xs-text-transform: uppercase;
  --font-mobile-heading-xs-letter-spacing: normal;
  --font-mobile-heading-xs-margin-top: unset;
  --font-mobile-heading-xs-margin-bottom: 0.5rem;

  --font-desktop-heading-xxs-family: var(--font-body);
  --font-desktop-heading-xxs-size: 14px;
  --font-desktop-heading-xxs-weight: 400;
  --font-desktop-heading-xxs-line-height: normal;
  --font-desktop-heading-xxs-text-transform: uppercase;
  --font-desktop-heading-xxs-letter-spacing: normal;
  --font-desktop-heading-xxs-margin-top: unset;
  --font-desktop-heading-xxs-margin-bottom: 0.5rem;
  --font-mobile-heading-xxs-family: var(--font-body);
  --font-mobile-heading-xxs-size: 12px;
  --font-mobile-heading-xxs-weight: 400;
  --font-mobile-heading-xxs-line-height: normal;
  --font-mobile-heading-xxs-text-transform: uppercase;
  --font-mobile-heading-xxs-letter-spacing: normal;
  --font-mobile-heading-xxs-margin-top: unset;
  --font-mobile-heading-xxs-margin-bottom: 0.5rem;

  --font-desktop-body-l-family: var(--font-body);
  --font-desktop-body-l-size: 22px;
  --font-desktop-body-l-weight: 400;
  --font-desktop-body-l-line-height: 1.75rem;
  --font-desktop-body-l-text-transform: none;
  --font-desktop-body-l-letter-spacing: normal;
  --font-mobile-body-l-family: var(--font-body);
  --font-mobile-body-l-size: 22px;
  --font-mobile-body-l-weight: 400;
  --font-mobile-body-l-line-height: 1.75rem;
  --font-mobile-body-l-text-transform: none;
  --font-mobile-body-l-letter-spacing: normal;

  --font-desktop-body-m-family: var(--font-body);
  --font-desktop-body-m-size: 18px;
  --font-desktop-body-m-weight: 400;
  --font-desktop-body-m-line-height: 1.75rem;
  --font-desktop-body-m-text-transform: none;
  --font-desktop-body-m-letter-spacing: normal;
  --font-mobile-body-m-family: var(--font-body);
  --font-mobile-body-m-size: 18px;
  --font-mobile-body-m-weight: 400;
  --font-mobile-body-m-line-height: 1.75rem;
  --font-mobile-body-m-text-transform: none;
  --font-mobile-body-m-letter-spacing: normal;

  --font-desktop-body-s-family: var(--font-body);
  --font-desktop-body-s-size: 16px;
  --font-desktop-body-s-weight: 400;
  --font-desktop-body-s-line-height: 1.5rem;
  --font-desktop-body-s-text-transform: none;
  --font-desktop-body-s-letter-spacing: normal;
  --font-mobile-body-s-family: var(--font-body);
  --font-mobile-body-s-size: 16px;
  --font-mobile-body-s-weight: 400;
  --font-mobile-body-s-line-height: 1.5rem;
  --font-mobile-body-s-text-transform: none;
  --font-mobile-body-s-letter-spacing: normal;

  --font-desktop-body-xs-family: var(--font-body);
  --font-desktop-body-xs-size: 14px;
  --font-desktop-body-xs-weight: 400;
  --font-desktop-body-xs-line-height: 1.75;
  --font-desktop-body-xs-text-transform: none;
  --font-desktop-body-xs-letter-spacing: normal;
  --font-mobile-body-xs-family: var(--font-body);
  --font-mobile-body-xs-size: 14px;
  --font-mobile-body-xs-weight: 400;
  --font-mobile-body-xs-line-height: 1.75;
  --font-mobile-body-xs-text-transform: none;
  --font-mobile-body-xs-letter-spacing: normal;

  --font-desktop-body-xxs-family: var(--font-body);
  --font-desktop-body-xxs-size: 12px;
  --font-desktop-body-xxs-weight: 400;
  --font-desktop-body-xxs-line-height: 1rem;
  --font-desktop-body-xxs-text-transform: none;
  --font-desktop-body-xxs-letter-spacing: normal;
  --font-mobile-body-xxs-family: var(--font-body);
  --font-mobile-body-xxs-size: 12px;
  --font-mobile-body-xxs-weight: 400;
  --font-mobile-body-xxs-line-height: 1rem;
  --font-mobile-body-xxs-text-transform: none;
  --font-mobile-body-xxs-letter-spacing: normal;

  --font-desktop-price-default-family: var(--font-body);
  --font-desktop-price-default-size: 20px;
  --font-desktop-price-default-weight: 700;
  --font-desktop-price-default-line-height: 1.5rem;
  --font-desktop-price-default-text-transform: none;
  --font-desktop-price-default-letter-spacing: normal;
  --font-mobile-price-default-family: var(--font-body);
  --font-mobile-price-default-size: 20px;
  --font-mobile-price-default-weight: 700;
  --font-mobile-price-default-line-height: 1.5rem;
  --font-mobile-price-default-text-transform: none;
  --font-mobile-price-default-letter-spacing: normal;

  /**
    * BUTTONS
    * Reference: https://www.figma.com/file/tfbYg2w0y12K41if8EzKdy/NRMA-Resorts--%E2%80%A8UI-Kit-and-Design-system?type=design&node-id=1-1936&mode=design&t=OvAid4dtckS9z4hX-0
  */

  /* brand button style */
  --button-border-radius: 4px;
  --button-box-shadow: none;
  --button-font-weight: 400;
  --button-text-transform: uppercase;
  --button-letter-spacing: 1px;
  --button-min-width: 186px;
  --button-display-desktop: inline-flex;
  --button-display-mobile: inline-flex;
  --button-inner-padding: initial;

  /* brand button sizes */
  --button-large-font-size: 1.125rem;
  --button-large-padding: 0 1.625rem;
  --button-large-height: 2.75rem;
  --button-medium-font-size: 0.875rem;
  --button-medium-padding: 0 1.625rem;
  --button-medium-height: 2.75rem;
  --button-small-font-size: 0.875rem;
  --button-small-padding: 0 1.625rem;
  --button-small-height: 2.75rem;

  /* custom button - back to top */
  --button-custom-bg: var(--pumphousepoint-blue-medium);

  /* primary action high emphasis */
  --button-primary-highem-bg: var(--pumphousepoint-green);
  --button-primary-highem-border-color: transparent;
  --button-primary-highem-border-width: 2px;
  --button-primary-highem-text: var(--pumphousepoint-off-white);
  --button-primary-highem-hover-bg: var(--pumphousepoint-green-medium);
  --button-primary-highem-hover-border-color: transparent;
  --button-primary-highem-hover-border-width: 2px;
  --button-primary-highem-hover-text: var(--pumphousepoint-off-white);
  --button-primary-highem-focus-bg: var(--pumphousepoint-green);
  --button-primary-highem-focus-border-color: var(--pumphousepoint-green-focus);
  --button-primary-highem-focus-border-width: 3px;
  --button-primary-highem-focus-text: var(--pumphousepoint-off-white);
  --button-primary-highem-disabled-bg: var(--pumphousepoint-grey);
  --button-primary-highem-disabled-border-color: transparent;
  --button-primary-highem-disabled-border-width: 2px;
  --button-primary-highem-disabled-text: var(--pumphousepoint-off-white);

  /* primary action medium emphasis */
  --button-primary-midem-bg: var(--pumphousepoint-blue);
  --button-primary-midem-border-color: transparent;
  --button-primary-midem-border-width: 2px;
  --button-primary-midem-text: var(--white);
  --button-primary-midem-hover-bg: var(--pumphousepoint-blue-medium);
  --button-primary-midem-hover-border-color: transparent;
  --button-primary-midem-hover-border-width: 2px;
  --button-primary-midem-hover-text: var(--white);
  --button-primary-midem-focus-bg: var(--pumphousepoint-blue-medium);
  --button-primary-midem-focus-border-color: var(--pumphousepoint-blue-focus);
  --button-primary-midem-focus-border-width: 3px;
  --button-primary-midem-focus-text: var(--white);
  --button-primary-midem-disabled-bg: var(--pumphousepoint-grey-light);
  --button-primary-midem-disabled-border-color: transparent;
  --button-primary-midem-disabled-border-width: 2px;
  --button-primary-midem-disabled-text: var(--pumphousepoint-darkblue);

  /* primary action high emphasis - on dark background */
  --button-primary-highem-bg-on-dark: var(--button-primary-highem-bg);
  --button-primary-highem-border-color-on-dark: var(
    --button-primary-highem-border-color
  );
  --button-primary-highem-border-width-on-dark: var(
    --button-primary-highem-border-width
  );
  --button-primary-highem-text-on-dark: var(--button-primary-highem-text);
  --button-primary-highem-hover-bg-on-dark: var(
    --button-primary-highem-hover-bg
  );
  --button-primary-highem-hover-border-color-on-dark: var(
    --button-primary-highem-hover-border-color
  );
  --button-primary-highem-hover-border-width-on-dark: var(
    --button-primary-highem-hover-border-width
  );
  --button-primary-highem-hover-text-on-dark: var(
    --button-primary-highem-hover-text
  );
  --button-primary-highem-focus-bg-on-dark: var(
    --button-primary-highem-focus-bg
  );
  --button-primary-highem-focus-border-color-on-dark: var(
    --button-primary-highem-focus-border-color
  );
  --button-primary-highem-focus-border-width-on-dark: var(
    --button-primary-highem-focus-border-width
  );
  --button-primary-highem-focus-text-on-dark: var(
    --button-primary-highem-focus-text
  );
  --button-primary-highem-disabled-bg-on-dark: var(
    --button-primary-highem-disabled-bg
  );
  --button-primary-highem-disabled-border-color-on-dark: var(
    --button-primary-highem-disabled-border-color
  );
  --button-primary-highem-disabled-border-width-on-dark: var(
    --button-primary-highem-disabled-border-width
  );
  --button-primary-highem-disabled-text-on-dark: var(
    --button-primary-highem-disabled-text
  );

  /* primary action high emphasis - on secondary background */
  --button-primary-highem-bg-on-secondary: var(--button-primary-highem-bg);
  --button-primary-highem-border-color-on-secondary: var(
    --button-primary-highem-border-color
  );
  --button-primary-highem-border-width-on-secondary: var(
    --button-primary-highem-border-width
  );
  --button-primary-highem-text-on-secondary: var(--button-primary-highem-text);
  --button-primary-highem-hover-bg-on-secondary: var(
    --button-primary-highem-hover-bg
  );
  --button-primary-highem-hover-border-color-on-secondary: var(
    --button-primary-highem-hover-border-color
  );
  --button-primary-highem-hover-border-width-on-secondary: var(
    --button-primary-highem-hover-border-width
  );
  --button-primary-highem-hover-text-on-secondary: var(
    --button-primary-highem-hover-text
  );
  --button-primary-highem-focus-bg-on-secondary: var(
    --button-primary-highem-focus-bg
  );
  --button-primary-highem-focus-border-color-on-secondary: var(
    --button-primary-highem-focus-border-color
  );
  --button-primary-highem-focus-border-width-on-secondary: var(
    --button-primary-highem-focus-border-width
  );
  --button-primary-highem-focus-text-on-secondary: var(
    --button-primary-highem-focus-text
  );
  --button-primary-highem-disabled-bg-on-secondary: var(
    --button-primary-highem-disabled-bg
  );
  --button-primary-highem-disabled-border-color-on-secondary: var(
    --button-primary-highem-disabled-border-color
  );
  --button-primary-highem-disabled-border-width-on-secondary: var(
    --button-primary-highem-disabled-border-width
  );
  --button-primary-highem-disabled-text-on-secondary: var(
    --button-primary-highem-disabled-text
  );

  /* primary action high emphasis - on dark background */
  --button-primary-highem-bg-on-dark: var(--button-primary-highem-bg);
  --button-primary-highem-border-color-on-dark: var(
    --button-primary-highem-border-color
  );
  --button-primary-highem-border-width-on-dark: var(
    --button-primary-highem-border-width
  );
  --button-primary-highem-text-on-dark: var(--button-primary-highem-text);
  --button-primary-highem-hover-bg-on-dark: var(
    --button-primary-highem-hover-bg
  );
  --button-primary-highem-hover-border-color-on-dark: var(
    --button-primary-highem-hover-border-color
  );
  --button-primary-highem-hover-border-width-on-dark: var(
    --button-primary-highem-hover-border-width
  );
  --button-primary-highem-hover-text-on-dark: var(
    --button-primary-highem-hover-text
  );
  --button-primary-highem-focus-bg-on-dark: var(
    --button-primary-highem-focus-bg
  );
  --button-primary-highem-focus-border-color-on-dark: var(
    --button-primary-highem-focus-border-color
  );
  --button-primary-highem-focus-border-width-on-dark: var(
    --button-primary-highem-focus-border-width
  );
  --button-primary-highem-focus-text-on-dark: var(
    --button-primary-highem-focus-text
  );
  --button-primary-highem-disabled-bg-on-dark: var(
    --button-primary-highem-disabled-bg
  );
  --button-primary-highem-disabled-border-color-on-dark: var(
    --button-primary-highem-disabled-border-color
  );
  --button-primary-highem-disabled-border-width-on-dark: var(
    --button-primary-highem-disabled-border-width
  );
  --button-primary-highem-disabled-text-on-dark: var(
    --button-primary-highem-disabled-text
  );

  /* primary action high emphasis - on secondary background */
  --button-primary-highem-bg-on-secondary: var(--button-primary-highem-bg);
  --button-primary-highem-border-color-on-secondary: var(
    --button-primary-highem-border-color
  );
  --button-primary-highem-border-width-on-secondary: var(
    --button-primary-highem-border-width
  );
  --button-primary-highem-text-on-secondary: var(--button-primary-highem-text);
  --button-primary-highem-hover-bg-on-secondary: var(
    --button-primary-highem-hover-bg
  );
  --button-primary-highem-hover-border-color-on-secondary: var(
    --button-primary-highem-hover-border-color
  );
  --button-primary-highem-hover-border-width-on-secondary: var(
    --button-primary-highem-hover-border-width
  );
  --button-primary-highem-hover-text-on-secondary: var(
    --button-primary-highem-hover-text
  );
  --button-primary-highem-focus-bg-on-secondary: var(
    --button-primary-highem-focus-bg
  );
  --button-primary-highem-focus-border-color-on-secondary: var(
    --button-primary-highem-focus-border-color
  );
  --button-primary-highem-focus-border-width-on-secondary: var(
    --button-primary-highem-focus-border-width
  );
  --button-primary-highem-focus-text-on-secondary: var(
    --button-primary-highem-focus-text
  );
  --button-primary-highem-disabled-bg-on-secondary: var(
    --button-primary-highem-disabled-bg
  );
  --button-primary-highem-disabled-border-color-on-secondary: var(
    --button-primary-highem-disabled-border-color
  );
  --button-primary-highem-disabled-border-width-on-secondary: var(
    --button-primary-highem-disabled-border-width
  );
  --button-primary-highem-disabled-text-on-secondary: var(
    --button-primary-highem-disabled-text
  );

  /* primary action medium emphasis */
  --button-primary-midem-bg: var(--pumphousepoint-blue);
  --button-primary-midem-border-color: transparent;
  --button-primary-midem-border-width: 2px;
  --button-primary-midem-text: var(--white);
  --button-primary-midem-hover-bg: var(--pumphousepoint-blue-medium);
  --button-primary-midem-hover-border-color: transparent;
  --button-primary-midem-hover-border-width: 2px;
  --button-primary-midem-hover-text: var(--white);
  --button-primary-midem-focus-bg: var(--pumphousepoint-blue-medium);
  --button-primary-midem-focus-border-color: var(--pumphousepoint-blue-focus);
  --button-primary-midem-focus-border-width: 3px;
  --button-primary-midem-focus-text: var(--white);
  --button-primary-midem-disabled-bg: var(--pumphousepoint-grey);
  --button-primary-midem-disabled-border-color: transparent;
  --button-primary-midem-disabled-border-width: 2px;
  --button-primary-midem-disabled-text: var(--pumphousepoint-off-white);

  /* primary action medium emphasis - on secondary background */
  --button-primary-midem-bg-on-secondary: var(--button-primary-midem-bg);
  --button-primary-midem-border-color-on-secondary: var(
    --button-primary-midem-border-color
  );
  --button-primary-midem-border-width-on-secondary: var(
    --button-primary-midem-border-width
  );
  --button-primary-midem-text-on-secondary: var(--button-primary-midem-text);
  --button-primary-midem-hover-bg-on-secondary: var(
    --button-primary-midem-hover-bg
  );
  --button-primary-midem-hover-border-color-on-secondary: var(
    --button-primary-midem-hover-border-color
  );
  --button-primary-midem-hover-border-width-on-secondary: var(
    --button-primary-midem-hover-border-width
  );
  --button-primary-midem-hover-text-on-secondary: var(
    --button-primary-midem-hover-text
  );
  --button-primary-midem-focus-bg-on-secondary: var(
    --button-primary-midem-focus-bg
  );
  --button-primary-midem-focus-border-color-on-secondary: var(
    --button-primary-midem-focus-border-color
  );
  --button-primary-midem-focus-border-width-on-secondary: var(
    --button-primary-midem-focus-border-width
  );
  --button-primary-midem-focus-text-on-secondary: var(
    --button-primary-midem-focus-text
  );
  --button-primary-midem-disabled-bg-on-secondary: var(
    --button-primary-midem-disabled-bg
  );
  --button-primary-midem-disabled-border-color-on-secondary: var(
    --button-primary-midem-disabled-border-color
  );
  --button-primary-midem-disabled-border-width-on-secondary: var(
    --button-primary-midem-disabled-border-width
  );
  --button-primary-midem-disabled-text-on-secondary: var(
    --button-primary-midem-disabled-text
  );

  /* primary action medium emphasis - on dark background */
  --button-primary-midem-bg-on-dark: var(--button-primary-midem-bg);
  --button-primary-midem-border-color-on-dark: var(
    --button-primary-midem-border-color
  );
  --button-primary-midem-border-width-on-dark: var(
    --button-primary-midem-border-width
  );
  --button-primary-midem-text-on-dark: var(--button-primary-midem-text);
  --button-primary-midem-hover-bg-on-dark: var(--button-primary-midem-hover-bg);
  --button-primary-midem-hover-border-color-on-dark: var(
    --button-primary-midem-hover-border-color
  );
  --button-primary-midem-hover-border-width-on-dark: var(
    --button-primary-midem-hover-border-width
  );
  --button-primary-midem-hover-text-on-dark: var(
    --button-primary-midem-hover-text
  );
  --button-primary-midem-focus-bg-on-dark: var(--button-primary-midem-focus-bg);
  --button-primary-midem-focus-border-color-on-dark: var(
    --button-primary-midem-focus-border-color
  );
  --button-primary-midem-focus-border-width-on-dark: var(
    --button-primary-midem-focus-border-width
  );
  --button-primary-midem-focus-text-on-dark: var(
    --button-primary-midem-focus-text
  );
  --button-primary-midem-disabled-bg-on-dark: var(
    --button-primary-midem-disabled-bg
  );
  --button-primary-midem-disabled-border-color-on-dark: var(
    --button-primary-midem-disabled-border-color
  );
  --button-primary-midem-disabled-border-width-on-dark: var(
    --button-primary-midem-disabled-border-width
  );
  --button-primary-midem-disabled-text-on-dark: var(
    --button-primary-midem-disabled-text
  );

  /* secondary high emphasis */
  --button-secondary-highem-bg: var(--pumphousepoint-off-white);
  --button-secondary-highem-border-color: var(--pumphousepoint-blue);
  --button-secondary-highem-border-width: 1px;
  --button-secondary-highem-text: var(--pumphousepoint-blue);
  --button-secondary-highem-hover-bg: var(--pumphousepoint-blue-medium);
  --button-secondary-highem-hover-border-color: var(--pumphousepoint-blue);
  --button-secondary-highem-hover-border-width: 1px;
  --button-secondary-highem-hover-text: var(--pumphousepoint-blue);
  --button-secondary-highem-focus-bg: var(--pumphousepoint-off-white);
  --button-secondary-highem-focus-border-color: var(
    --pumphousepoint-blue-medium
  );
  --button-secondary-highem-focus-border-width: 3px;
  --button-secondary-highem-focus-text: var(--pumphousepoint-blue);
  --button-secondary-highem-disabled-bg: var(--pumphousepoint-off-white);
  --button-secondary-highem-disabled-border-color: var(--pumphousepoint-grey);
  --button-secondary-highem-disabled-border-width: 1px;
  --button-secondary-highem-disabled-text: var(--pumphousepoint-blue);

  /* secondary high emphasis - on secondary background */
  --button-secondary-highem-bg-on-secondary: var(--button-secondary-highem-bg);
  --button-secondary-highem-border-color-on-secondary: var(
    --button-secondary-highem-border-color
  );
  --button-secondary-highem-border-width-on-secondary: var(
    --button-secondary-highem-border-width
  );
  --button-secondary-highem-text-on-secondary: var(
    --button-secondary-highem-text
  );
  --button-secondary-highem-hover-bg-on-secondary: var(
    --button-secondary-highem-hover-bg
  );
  --button-secondary-highem-hover-border-color-on-secondary: var(
    --button-secondary-highem-hover-border-color
  );
  --button-secondary-highem-hover-border-width-on-secondary: var(
    --button-secondary-highem-hover-border-width
  );
  --button-secondary-highem-hover-text-on-secondary: var(
    --button-secondary-highem-hover-text
  );
  --button-secondary-highem-focus-bg-on-secondary: var(
    --button-secondary-highem-focus-bg
  );
  --button-secondary-highem-focus-border-color-on-secondary: var(
    --button-secondary-highem-focus-border-color
  );
  --button-secondary-highem-focus-border-width-on-secondary: var(
    --button-secondary-highem-focus-border-width
  );
  --button-secondary-highem-focus-text-on-secondary: var(
    --button-secondary-highem-focus-text
  );
  --button-secondary-highem-disabled-bg-on-secondary: var(
    --button-secondary-highem-disabled-bg
  );
  --button-secondary-highem-disabled-border-color-on-secondary: var(
    --button-secondary-highem-disabled-border-color
  );
  --button-secondary-highem-disabled-border-width-on-secondary: var(
    --button-secondary-highem-disabled-border-width
  );
  --button-secondary-highem-disabled-text-on-secondary: var(
    --button-secondary-highem-disabled-text
  );

  /* secondary high emphasis - on dark background */
  --button-secondary-highem-bg-on-dark: var(--button-secondary-highem-bg);
  --button-secondary-highem-border-color-on-dark: var(
    --button-secondary-highem-border-color
  );
  --button-secondary-highem-border-width-on-dark: var(
    --button-secondary-highem-border-width
  );
  --button-secondary-highem-text-on-dark: var(--button-secondary-highem-text);
  --button-secondary-highem-hover-bg-on-dark: var(
    --button-secondary-highem-hover-bg
  );
  --button-secondary-highem-hover-border-color-on-dark: var(
    --button-secondary-highem-hover-border-color
  );
  --button-secondary-highem-hover-border-width-on-dark: var(
    --button-secondary-highem-hover-border-width
  );
  --button-secondary-highem-hover-text-on-dark: var(
    --button-secondary-highem-hover-text
  );
  --button-secondary-highem-focus-bg-on-dark: var(
    --button-secondary-highem-focus-bg
  );
  --button-secondary-highem-focus-border-color-on-dark: var(
    --button-secondary-highem-focus-border-color
  );
  --button-secondary-highem-focus-border-width-on-dark: var(
    --button-secondary-highem-focus-border-width
  );
  --button-secondary-highem-focus-text-on-dark: var(
    --button-secondary-highem-focus-text
  );
  --button-secondary-highem-disabled-bg-on-dark: var(
    --button-secondary-highem-disabled-bg
  );
  --button-secondary-highem-disabled-border-color-on-dark: var(
    --button-secondary-highem-disabled-border-color
  );
  --button-secondary-highem-disabled-border-width-on-dark: var(
    --button-secondary-highem-disabled-border-width
  );
  --button-secondary-highem-disabled-text-on-dark: var(
    --button-secondary-highem-disabled-text
  );

  /* secondary medium emphasis */
  --button-secondary-midem-bg: var(--pumphousepoint-off-white);
  --button-secondary-midem-border-color: var(--pumphousepoint-green);
  --button-secondary-midem-border-width: 1px;
  --button-secondary-midem-text: var(--pumphousepoint-green-focus);
  --button-secondary-midem-hover-bg: var(--pumphousepoint-green-medium);
  --button-secondary-midem-hover-border-color: var(--pumphousepoint-green);
  --button-secondary-midem-hover-border-width: 1px;
  --button-secondary-midem-hover-text: var(--pumphousepoint-green);
  --button-secondary-midem-focus-bg: var(--pumphousepoint-off-white);
  --button-secondary-midem-focus-border-color: var(
    --pumphousepoint-green-medium
  );
  --button-secondary-midem-focus-border-width: 3px;
  --button-secondary-midem-focus-text: var(--pumphousepoint-green);
  --button-secondary-midem-disabled-bg: var(--pumphousepoint-off-white);
  --button-secondary-midem-disabled-border-color: var(--pumphousepoint-grey);
  --button-secondary-midem-disabled-border-width: 1px;
  --button-secondary-midem-disabled-text: var(--pumphousepoint-green);

  /* secondary medium emphasis - on secondary background */
  --button-secondary-midem-bg-on-secondary: var(--button-secondary-midem-bg);
  --button-secondary-midem-border-color-on-secondary: var(
    --button-secondary-midem-border-color
  );
  --button-secondary-midem-border-width-on-secondary: var(
    --button-secondary-midem-border-width
  );
  --button-secondary-midem-text-on-secondary: var(
    --button-secondary-midem-text
  );
  --button-secondary-midem-hover-bg-on-secondary: var(
    --button-secondary-midem-hover-bg
  );
  --button-secondary-midem-hover-border-color-on-secondary: var(
    --button-secondary-midem-hover-border-color
  );
  --button-secondary-midem-hover-border-width-on-secondary: var(
    --button-secondary-midem-hover-border-width
  );
  --button-secondary-midem-hover-text-on-secondary: var(
    --button-secondary-midem-hover-text
  );
  --button-secondary-midem-focus-bg-on-secondary: var(
    --button-secondary-midem-focus-bg
  );
  --button-secondary-midem-focus-border-color-on-secondary: var(
    --button-secondary-midem-focus-border-color
  );
  --button-secondary-midem-focus-border-width-on-secondary: var(
    --button-secondary-midem-focus-border-width
  );
  --button-secondary-midem-focus-text-on-secondary: var(
    --button-secondary-midem-focus-text
  );
  --button-secondary-midem-disabled-bg-on-secondary: var(
    --button-secondary-midem-disabled-bg
  );
  --button-secondary-midem-disabled-border-color-on-secondary: var(
    --button-secondary-midem-disabled-border-color
  );
  --button-secondary-midem-disabled-border-width-on-secondary: var(
    --button-secondary-midem-disabled-border-width
  );
  --button-secondary-midem-disabled-text-on-secondary: var(
    --button-secondary-midem-disabled-text
  );

  /* secondary medium emphasis - on dark background */
  --button-secondary-midem-bg-on-dark: var(--button-secondary-midem-bg);
  --button-secondary-midem-border-color-on-dark: var(
    --button-secondary-midem-border-color
  );
  --button-secondary-midem-border-width-on-dark: var(
    --button-secondary-midem-border-width
  );
  --button-secondary-midem-text-on-dark: var(--button-secondary-midem-text);
  --button-secondary-midem-hover-bg-on-dark: var(
    --button-secondary-midem-hover-bg
  );
  --button-secondary-midem-hover-border-color-on-dark: var(
    --button-secondary-midem-hover-border-color
  );
  --button-secondary-midem-hover-border-width-on-dark: var(
    --button-secondary-midem-hover-border-width
  );
  --button-secondary-midem-hover-text-on-dark: var(
    --button-secondary-midem-hover-text
  );
  --button-secondary-midem-focus-bg-on-dark: var(
    --button-secondary-midem-focus-bg
  );
  --button-secondary-midem-focus-border-color-on-dark: var(
    --button-secondary-midem-focus-border-color
  );
  --button-secondary-midem-focus-border-width-on-dark: var(
    --button-secondary-midem-focus-border-width
  );
  --button-secondary-midem-focus-text-on-dark: var(
    --button-secondary-midem-focus-text
  );
  --button-secondary-midem-disabled-bg-on-dark: var(
    --button-secondary-midem-disabled-bg
  );
  --button-secondary-midem-disabled-border-color-on-dark: var(
    --button-secondary-midem-disabled-border-color
  );
  --button-secondary-midem-disabled-border-width-on-dark: var(
    --button-secondary-midem-disabled-border-width
  );
  --button-secondary-midem-disabled-text-on-dark: var(
    --button-secondary-midem-disabled-text
  );

  /* tertiary CTA medium emphasis */
  --button-link-midem-bg: transparent;
  --button-link-midem-border-color: transparent;
  --button-link-midem-border-width: 0px;
  --button-link-midem-text: var(--pumphousepoint-blue);
  --button-link-midem-hover-bg: transparent;
  --button-link-midem-hover-border-color: transparent;
  --button-link-midem-hover-border-width: 0px;
  --button-link-midem-hover-text: var(--pumphousepoint-blue);
  --button-link-midem-focus-bg: transparent;
  --button-link-midem-focus-border-color: rgba(
    var(--pumphousepoint-blue-focus-rgb),
    0.6
  );
  --button-link-midem-focus-border-width: 1px;
  --button-link-midem-focus-text: var(--pumphousepoint-blue);
  --button-link-midem-disabled-bg: transparent;
  --button-link-midem-disabled-border-color: transparent;
  --button-link-midem-disabled-border-width: 0px;
  --button-link-midem-disabled-text: var(--pumphousepoint-grey);

  /* tertiary CTA low emphasis */
  --button-link-lowem-bg: transparent;
  --button-link-lowem-border-color: transparent;
  --button-link-lowem-border-width: 0px;
  --button-link-lowem-text: var(--pumphousepoint-blue);
  --button-link-lowem-hover-bg: transparent;
  --button-link-lowem-hover-border-color: transparent;
  --button-link-lowem-hover-border-width: 0px;
  --button-link-lowem-hover-text: var(--pumphousepoint-blue);
  --button-link-lowem-focus-bg: transparent;
  --button-link-lowem-focus-border-color: rgba(
    132,
    154,
    183,
    0.6
  ); /* @README: not in palette? */
  --button-link-lowem-focus-border-width: 0px;
  --button-link-lowem-focus-text: var(--pumphousepoint-blue);
  --button-link-lowem-disabled-bg: transparent;
  --button-link-lowem-disabled-border-color: transparent;
  --button-link-lowem-disabled-border-width: 0px;
  --button-link-lowem-disabled-text: var(--pumphousepoint-grey);

  /**
    * OTHER COMPONENTS
    * Reference: https: //www.figma.com/file/tfbYg2w0y12K41if8EzKdy/NRMA-Resorts--%E2%80%A8UI-Kit-and-Design-system?type=design&node-id=1-2075&mode=design&t=381ATsAIn7XQiVwG-0
  */
  /*Footer Logo */
  --footer-logo-height: 58px;

  /* Icons */
  --icon-color-black: var(--black);
  --icon-color-white: var(--white);

  /*loader */
  --loader-color: var(--pumphousepoint-blue-light);
  --loader-width: 40px;
  --loader-overlay: rgba(0, 0, 0, 0.8);
  --loader-text-color: var(--white);

  /*quick call phone */
  --phone-icon-color: var(--primary-100);

  /* accommodation filter */
  --accommodation-filter-background-color: hsla(213, 26%, 73%, 0.9);
  --accommodation-filter-link-color: var(--black);
  --accommodation-filter-icon-color: var(--black);
  --accommodation-filter-link-color-active: var(--black);
  --accommodation-filter-icon-color-active: var(--black);
  --accommodation-filter-border-color: var(--black);
  --accommodation-filter-popup-text: var(--secondary-text);
  --accommodation-filter-popup-font-family: var(--font-body);
  --accommodation-filter-popup-text-transform: uppercase;
  --accommodation-filter-popup-cancel-button-text: var(--neutral-40);
  --accommodation-filter-popup-cancel-button-font-size: 0.875rem;
  --accommodation-filter-popup-apply-button-text: var(
    --button-secondary-midem-text
  );

  /* banner with image */
  --banner-with-image-content-text-align: left;
  --banner-with-image-inner-background: var(--pumphousepoint-blue-light);
  --banner-with-image-inner-background-mobile: var(--pumphousepoint-blue-light);
  --banner-with-image-secondary-inner-background: var(
    --pumphousepoint-blue-light
  );

  /* brand separator */
  --brand-separator-min-height: 0px;

  /* booking summary */
  --booking-summary-background: var(--pumphousepoint-grey-light);
  --booking-summary-accommodation-title-font-family: var(--font-body);
  --booking-summary-price-font-family: var(--font-body);
  --booking-summary-cancellation-font-family: var(--font-body);

  /* booking details form */
  --booking-details-form-border-color: var(--pumphousepoint-blue);

  /* card */
  --card-background-color: var(--pumphousepoint-blue-light);

  /* contact information */
  --contact-info-background-color: var(--pumphousepoint-blue-light);
  --contact-info-text-color: var(--secondary-text);

  /* faq */
  --faq-group-item-background-color: var(--white);
  --faq-group-item-border-color: transparent;
  --faq-background-color: var(--pumphousepoint-grey-light);
  --faq-border-color: var(--pumphousepoint-blue-medium);
  --faq-text-color: var(--pumphousepoint-navyblue);

  /* property features */
  --property-features-filter: invert(100%);

  /* terms and conditions modal */
  --terms-modal-desc-background-color: var(--pumphousepoint-grey-light);

  /* floating faq */
  --floating-faq-background-color: var(--pumphousepoint-blue-medium);
  --floating-faq-text-color: var(--pumphousepoint-navyblue);
  --floating-faq-border-color: var(--pumphousepoint-blue-focus);
  --floating-faq-border-radius: 0;

  /* FOMO, Figma */
  --label-fomo-bg: var(--pumphousepoint-blue-focus);
  --label-fomo-text: var(--black);

  /* Rate label, Figma */
  --label-rate-bg: var(--pumphousepoint-blue-focus);
  --label-rate-text: var(--black);
  --rate-card-border-bottom: 1px solid var(--pumphousepoint-blue-focus);
  --rate-card-border-image-source: none;
  --rate-card-border-image-slice: none;
  --rate-card-border-image-width: none;
  --rate-card-border-bottom-mobile: 1px solid var(--pumphousepoint-blue-focus);
  --rate-card-margin: 0rem 1.5rem;
  --rate-card-padding-desktop: 2rem 0rem;
  --rate-card-padding-mobile: 2rem 0.375rem;
  --rate-card-border-radius-desktop: 0rem;
  --rate-card-border-radius-mobile: 0rem;
  --product-selection-rate-card-text-color: var(--secondary-text);
  --product-selection-rate-card-padding-mobile: 1rem 0rem;
  --product-selection-rate-card-margin-mobile: 0rem 1rem;
  --product-selection-rate-card-border-bottom: none;
  --product-selection-rate-card-gap-mobile: 0.75rem;

  /* datepicker pop-up */
  --datepicker-background-color: var(--pumphousepoint-blue-medium);
  --datepicker-border-color: var(--pumphousepoint-off-white);
  --datepicker-disabled-background-color: var(--pumphousepoint-blue-light);
  --datepicker-disabled-border-color: var(--pumphousepoint-blue-light);
  --datepicker-disabled-color: var(--pumphousepoint-grey);
  --datepicker-disabled-text-decoration: none;
  --datepicker-highlighted-color: var(--pumphousepoint-blue-focus);
  --datepicker-highlighted-color-darken-5: var(--pumphousepoint-blue-focus);
  --datepicker-muted-color: var(--pumphousepoint-grey);
  --datepicker-muted-color-darken-5: var(--pumphousepoint-grey);
  --datepicker-muted-color-darken-10: var(--pumphousepoint-grey);
  --datepicker-muted-color-darken-15: var(--pumphousepoint-grey);
  --datepicker-muted-color-lighten-10: var(--pumphousepoint-grey-light);
  --datepicker-muted-color-lighten-25: var(--pumphousepoint-grey-light);
  --datepicker-muted-color-lighten-40: var(--pumphousepoint-grey-light);
  --datepicker-selected-color: var(--pumphousepoint-blue-focus);
  --datepicker-selected-color-darken-5: var(--pumphousepoint-blue-focus);
  --datepicker-selected-color-lighten-50: var(--pumphousepoint-blue-focus);
  --datepicker-selected-border-color: var(--pumphousepoint-blue-focus);
  --datepicker-text-color: var(--black);
  --datepicker-header-color: var(--primary-text);
  --datepicker-white-color: var(--white);
  --datepicker-font-weight: 500;
  --datepicker-border-radius: 0.3rem;
  --datepicker-tooltip-text: var(--secondary-text);

  /* footer */
  --footer-background-color: var(--pumphousepoint-blue);
  --footer-text-color: var(--pumphousepoint-blue-light);
  --footer-link-color: var(--pumphousepoint-blue-light);
  --footer-icon-color: var(--pumphousepoint-blue-light);
  --footer-booking-background-color: var(--pumphousepoint-blue);
  --footer-booking-text-color: var(--pumphousepoint-blue-light);
  --footer-global-background-color: var(--pumphousepoint-blue-light);
  --footer-global-text-color: var(--black);

  /* header */
  --header-full: 140px;
  --header-compact: 88px;
  --header-mobile-nav-background-color: var(--pumphousepoint-blue-light);
  --header-mobile-nav-content-color: var(--pumphousepoint-navyblue);
  --header-desktop-logo-width: 228px;
  --header-desktop-sticky-logo-width: 160px;
  --header-mobile-logo-width: 152px;
  --header-mobile-sticky-padding-top: 1rem;
  --header-sticky-background-color: var(--primary-100);
  --header-sticky-content-color: var(--white);
  --header-hero-content-font-family: var(--font-special-family);
  --header-desktop-blog-height: 500px;
  --header-mobile-blog-height: 300px;

  /* main navigation */
  --main-navigation-font-size: 13px;
  --main-navigation-item-gap: 1rem;
  --main-navigation-font-family: var(--font-special-family);
  --main-navigation-top-submenu-font-size: 11px;

  /* sub-navigation */
  --sub-navigation-background-color: var(--pumphousepoint-navyblue-medium);
  --sub-navigation-border-color: var(--pumphousepoint-off-white);
  --sub-navigation-border-radius: 0;
  --sub-navigation-link-color: var(--pumphousepoint-off-white);
  --sub-navigation-font-weight: 500;
  --sub-navigation-font-family: var(--font-special-family);

  /* swiper */
  --swiper-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 6 10'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m1 9 4-4-4-4'/%3E%3C/svg%3E%0A");
  --swiper-arrow-border-radius: 0;
  --swiper-arrow-bg-color: rgba(var(--pumphousepoint-blue-medium-rgb), 0.8);
  --swiper-arrow-bg-color-hover: rgba(
    var(--pumphousepoint-blue-focus-rgb),
    0.8
  );

  /* page - contact us */
  --page-contact-us-background-color: var(--pumphousepoint-blue-light);
  --page-contact-us-font-color: var(--pumphousepoint-navyblue);

  /* page - accommodation selection */
  --page-accommodation-selection-main-background: var(
    --pumphousepoint-blue-light
  );
  --page-accommodation-selection-main-text: var(--black);
  --page-accommodation-selection-footer-background: var(
    --pumphousepoint-blue-focus
  );
  --page-accomodation-ratecard-background: var(--pumphousepoint-blue-light);
  --page-accomodation-ratecard-mobile-divider: transparent;
  --page-accommodation-selection-title-transform: uppercase;
  --page-accommodation-selection-noresults-transform: none;

  /* page - booking path */
  --page-booking-path-main-background: var(--pumphousepoint-blue-light);
  --page-booking-path-header-background: var(--pumphousepoint-navyblue);
  --page-booking-path-header-font-size: 1rem;
  --page-booking-path-stepper-text-color: var(--pumphousepoint-blue);
  --page-booking-path-stepper-border-color: var(--pumphousepoint-blue-medium);
  --page-booking-path-stepper-background-color: var(--pumphousepoint-navyblue);
  --page-booking-path-stepper-separator: var(--pumphousepoint-grey);
  --page-booking-path-stepper-active-text-color: var(--pumphousepoint-off-white);
  --page-booking-path-stepper-active-background: var(
    --pumphousepoint-blue
  );
  --page-booking-path-stepper-active-border-color: var(
    --pumphousepoint-blue
  );
  --page-booking-path-stepper-border-radius: 0;
  --page-booking-path-back-to-search-link-color: var(--primary-link);
  --page-booking-path-tabs-border-radius: 0;
  --page-booking-path-tabs-background-color: var(--pumphousepoint-blue-medium);
  --page-booking-path-payment-transaction-title-font-size: 1rem;
  --page-booking-path-payment-transaction-title-font-weight: 500;
  --page-booking-path-payment-transaction-total-due-font-size: 1.125rem;
  --page-booking-path-confirmation-title-font-size: 1.625rem;
  --page-booking-path-confirmation-banner-color: var(
    --pumphousepoint-navyblue-medium
  );
  --page-booking-path-confirmation-banner-text-color: var(--white);
  --page-booking-path-confirmation-banner-cancel-text-color: var(--white);
  --page-booking-path-confirmation-banner-link-color: var(
    --pumphousepoint-blue-medium
  );
  --page-booking-path-confirmation-button-color: var(--button-primary-midem-bg);
  --page-booking-path-confirmation-button-border-color: var(
    --button-primary-midem-border-color
  );
  --page-booking-path-confirmation-button-text-color: var(
    --button-primary-midem-text
  );
  --page-booking-path-confirmation-help-background-color: var(
    --pumphousepoint-blue-light
  );
  --page-booking-path-confirmation-help-button-color: var(
    --button-secondary-highem-bg
  );
  --page-booking-path-confirmation-help-button-border-color: var(
    --button-secondary-highem-border-color
  );
  --page-booking-path-confirmation-help-button-text-color: var(
    --button-secondary-highem-text
  );
  --page-booking-path-payment-selected-color: var(--pumphousepoint-navyblue);

  /* Individual Room */
  --page-individual-room-property-search-color: var(
    --pumphousepoint-blue-medium
  );
  --page-individual-room-banner-color: var(--pumphousepoint-navyblue);
  --page-individual-room-banner-text-color: var(--pumphousepoint-off-white);
  --page-individual-room-banner-link-color: var(--pumphousepoint-blue-medium);
  --page-individual-room-heading-text-color: var(--pumphousepoint-off-white);
  --page-individual-room-info-text-color: var(--pumphousepoint-off-white);
  --page-individual-room-description-text-color: var(
    --pumphousepoint-off-white
  );
  --page-individual-room-empty-container-margin-bottom: 0rem;
  --page-individual-room-empty-border-image-display: none;
  --page-individual-room-rates-card-background: var(
    --pumphousepoint-blue-light
  );
  --page-individual-room-rates-card-text-color: var(--pumphousepoint-navyblue);
  --page-individual-room-rates-empty-container-height-mobile: 200px;
  --page-individual-room-rates-promo-link-color: var(--pumphousepoint-navyblue);
  --page-individual-room-rates-search-background-color: var(
    --pumphousepoint-navyblue
  );
  --page-individual-room-rates-search-text-color: var(--white);
  --page-individual-room-rates-empty-border-desktop: 2px solid
    var(--pumphousepoint-blue-focus);
  --page-individual-room-rates-empty-background-color: var(
    --pumphousepoint-navyblue
  );
  --page-individual-room-rates-empty-border-image-source: none;
  --page-individual-room-rates-empty-border-image-slice: none;
  --page-individual-room-rates-empty-border-image-width: none;
  --page-individual-room-rates-empty-border-mobile: none;

  /* page - subscribe */
  --page-subscribe-text-color: var(--pumphousepoint-navyblue);
  --page-subscribe-background: var(--pumphousepoint-blue-light);
  --page-subscribe-footer-background: var(--pumphousepoint-blue);

  /* Breadcrumbs */
  --breadcrumbs-active-color: var(--pumphousepoint-grey-light);
  --breadcrumbs-hover-color: var(--pumphousepoint-grey-light);

  /* Component Carousel */
  --component-carousel-section-title-color: var(--primary-text);
  --component-carousel-content-color: var(--pumphousepoint-navyblue);

  /* Component Dialog */
  --component-dialog-text: var(--secondary-text);

  /* Backgrounds */
  --shadow-25: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  /* Property Feature Default Background Color */
  --property-feature-background-color: none;

  /**********************************/
  /*** Self service custom styles ***/
  /**********************************/

  --heading-text-transform: uppercase;
  --from-price-text-color: var(--black);

  --searchbox-bg: var(--pumphousepoint-blue-medium);
  --searchbox-submit-bg: var(--pumphousepoint-blue);
  --searchbox-submit-border: var(--button-primary-midem-border-width) solid var(--button-primary-midem-border-color);
  --searchbox-submit-color: var(--button-primary-midem-text);
  --searchbox-submit-hover-bg: var(--button-primary-midem-hover-bg);
  --searchbox-submit-hover-border: var(--button-primary-midem-hover-border-width) solid var(--button-primary-midem-hover-border-color);
  --searchbox-submit-hover-color: var(--button-primary-midem-hover-text);

  /* Message Box */
  --messagebox-info-border: #26559F;
  --messagebox-info-bg: #f2ffff;
  --messagebox-warning-border: #B33E3E;
  --messagebox-warning-bg:#FFE3E3;
  --messagebox-success-border: #01753C;
  --messagebox-success-bg: #E8FBF2;
  --messagebox-error-border: #B33E3E;
  --messagebox-error-bg: #FFE3E3;
}

/* Pumphouse overrides.. */
body.pumphousepoint .navmain_item a {
  font-weight: 600 !important;
}

body.pumphousepoint .navmain_item.navmain_item--mydestinations a {
  font-weight: 500 !important;
  font-size: var(--main-navigation-top-submenu-font-size) !important;
  font-family: var(--main-navigation-font-family) !important;
}

body.pumphousepoint #nbwrap #newbook_content .newbook_online_category_box .flex-row {
  background: transparent;
}

body.pumphousepoint #nbwrap #newbook_content .newbook-panel {
  border-bottom: none !important;
  box-shadow: none;
}

body.pumphousepoint #newbook_content #newbook_online_sidebar .nb-header, 
body.pumphousepoint #newbook_content #newbook_cart_summary .nb-header {
  background: none;
  border: none;
}