/*
Breakpoint viewport sizes and media queries.

Breakpoints are defined as a map of (name: minimum width), order from small to large:

    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)

The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
*/
/*
Name of the next breakpoint, or null for the last breakpoint.

    >> breakpoint-next(sm)
    md
    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
    md
    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
    md
*/
/*
Minimum breakpoint width. Null for the smallest (first) breakpoint.

    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
    576px
*/
/*
Maximum breakpoint width.
The maximum value is reduced by 0.02px to work around the limitations of
`min-` and `max-` prefixes and viewports with fractional widths.
See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
See https://bugs.webkit.org/show_bug.cgi?id=178261

    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
    767.98px
*/
/*
Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
Useful for making responsive utilities.

    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
    ""  (Returns a blank string)
    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
    "-sm"
*/
/*
Media of at most the maximum breakpoint width. No query for the largest breakpoint.
Makes the @content apply to the given breakpoint and narrower.
*/
/*
Media that spans multiple breakpoint widths.
Makes the @content apply between the min and max breakpoints
*/
/*
Media between the breakpoint's minimum and maximum widths.
No minimum for the smallest breakpoint, and no maximum for the largest one.
Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
*/
/* Mixins */
/* TYPOGRAPHY */
/** 20px **/
/** 14px **/
/** 12px **/
:export {
  font-family-main: "Inter", Helvetica, Arial, sans-serif;
  font-family-headers: "Chronicle Display A", "Chronicle Display B", "Times New Roman", Times, serif;
  font-family-icons: "ph";
  fontstack-body: "Inter", Helvetica, Arial, sans-serif;
  font-size-base: 1rem;
  font-size-lg: 1.25rem;
  font-size-sm: 0.875rem;
  font-size-xs: 0.75rem;
  font-weight-normal: normal;
  font-weight-bold: bold;
  font-weight-base: normal;
  line-height-base: 1.5;
  h1-font-size: 2.5rem;
  h2-font-size: 2rem;
  h3-font-size: 1.75rem;
  h4-font-size: 1.5rem;
  h5-font-size: 1.25rem;
  h6-font-size: 1rem;
}

/**
 * Breakpoint set v2.
 *
 * We can feed this to any of the breakpoint mixins here using the
 * $breakpoints parameter.
 *
 * Intended to replace the $grid-breakpoints variable.
 * Keep it simple, keep the 4 basic breakpoints,
 * add a minimum of intermediate points.
 *
 * Note that we might need a superset of this to make it work with
 * @mixin media-breakpoint-only.
 */
:export {
  size-xs: 0.25rem;
  size-s: 0.5rem;
  size-sm: 0.75rem;
  size-sm-extra: 0.875rem;
  size-m: 1rem;
  size-md: 1.125rem;
  size-l: 1.25rem;
  size-lg: 1.5rem;
  size-xl: 1.75rem;
  size-xxl: 2rem;
  size-2xl: 2.25rem;
  size-2lg: 2.5rem;
  size-3xl: 3rem;
  size-4xl: 3.5rem;
  size-5xl: 4rem;
  size-6xl: 4.5rem;
  size-7xl: 5rem;
  size-7xlg: 6rem;
  size-8xl: 8rem;
  container-width: 1320px;
  body-color: #282b2b;
  z-index-checkbox-radio: -10;
  z-index-background: -1;
  z-index-sticky: 1;
  z-index-infopanel: 1;
  z-index-details-wrapper: 2;
  z-index-banner-controls: 2;
  z-index-modal-controls: 2;
  z-index-sidebar: 3;
  z-index-sidebar-header: 4;
  z-index-globalheader-dropdown: 5;
  z-index-accordion-focused: 10;
  z-index-mainmenu-inactive: 10;
  z-index-mainmenu-inner: 10;
  z-index-likert-table-header: 50;
  z-index-social-action-popover: 51;
  z-index-mainmenu-overlay: 60;
  z-index-mainmenu-container: 70;
  z-index-mainmenu-toggle: 70;
  z-index-mainmenu-container-mobile: 505;
  z-index-mainmenu-toggle-mobile: 520;
  z-index-throbber-overlay: 1261;
  z-index-max-absolute: 2147483647;
  font-weight-light: 100;
  font-weight-normal: 400;
  font-weight-semibold: 500;
  font-weight-nearlybold: 600;
  font-weight-bold: 700;
  font-weight-black: 900;
}

/**
 * @file
 * Devices mixins.
 */
/**
 * Devices breakpoint mixin.
 *
 * @deprecated Replace with @include devices-v2.
 *
 * @see DU-1697
 */
/**
 * Device sizing for v2 breakpoints.
 *
 * Intended to replace the @mixin devices above. Keep it simple, keep the 4
 * basic breakpoints, add a minimum of intermediate points.
 *
 * @see DU-1697
 */
/**
 * Device sizing for v2 breakpoints.
 *
 * Intended to replace the @mixin devices above. Keep it simple, keep the 4
 * basic breakpoints, add a minimum of intermediate points.
 *
 * @see DU-1697
 */
/* Mixins */
/* Mixins */
/**
 * @file
 * Grid mixins.
 */
/**
 * Get the size of the gutter on the left and right of the container.
 * Varies by $breakpoint (xs, sm, md, lg).
 */
/**
 * Get the size of an element $column-count number of columns wide.
 * Varies by $breakpoint (xs, sm, md, lg).
 */
/**
 * Get the size of an internal gap $column-count wide.
 * Varies by $breakpoint (xs, sm, md, lg).
 */
/*generateSpacing mixin will create spacing classes for margin and padding.
Eg: mt-0, pl-2,mh-2
The first letter represents the spacing type ( Margin/Padding ).
m:  margin
p:  padding
The second letter represents the direction.
l: left
r: right
t: top
b: bottom
v: vertical (top and bottom)
h: horizontal (left and right)
a: all
The third represents the spacing value (which you can give your own)
For eg:
'mb-0' means margin-bottom: 0;
'ph-2' mean padding-left: 2rem; padding-right: 2rem;
'pv-4' mean padding-top: 4rem; padding-bottom: 4rem;
*/
.button, .button--style-primary, .button--style-primary-outline, .button--style-secondary, .button--style-secondary-outline, .button--style-tertiary {
  --after-content: "";
  --bg-color: inherit;
  --color: inherit;
  --hover-bg-color: inherit;
  --hover-color: inherit;
  --focus-bg-color: inherit;
  --focus-color: inherit;
  --focus-outline-color:inherit;
  --disabled-bg-color: inherit;
  --disabled-color: inherit;
  --icon-color:inherit;
  --icon-hover-color:inherit;
  cursor: pointer;
  display: flex;
  width: fit-content;
  border-width: 0;
  text-decoration: none;
  color: var(--color);
  background-color: var(--bg-color);
  border-radius: 1rem;
}
.button a, .button--style-primary a, .button--style-primary-outline a, .button--style-secondary a, .button--style-secondary-outline a, .button--style-tertiary a {
  text-decoration: none;
  cursor: pointer;
  color: var(--color) !important;
}
.button a:visited, .button--style-primary a:visited, .button--style-primary-outline a:visited, .button--style-secondary a:visited, .button--style-secondary-outline a:visited, .button--style-tertiary a:visited {
  color: var(--color) !important;
}
.button::after, .button--style-primary::after, .button--style-primary-outline::after, .button--style-secondary::after, .button--style-secondary-outline::after, .button--style-tertiary::after,
.button .icon,
.button--style-primary .icon,
.button--style-primary-outline .icon,
.button--style-secondary .icon,
.button--style-secondary-outline .icon,
.button--style-tertiary .icon {
  padding-left: 0.5rem;
  font-family: "ph";
  font-weight: 700;
  content: var(--after-content);
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--icon-color);
}
.button:hover, .button--style-primary:hover, .button--style-primary-outline:hover, .button--style-secondary:hover, .button--style-secondary-outline:hover, .button--style-tertiary:hover {
  color: var(--hover-color);
  background-color: var(--hover-bg-color);
  transition: background-color 0.3s ease-out;
  text-decoration: none;
}
.button:hover::after, .button--style-primary:hover::after, .button--style-primary-outline:hover::after, .button--style-secondary:hover::after, .button--style-secondary-outline:hover::after, .button--style-tertiary:hover::after,
.button:hover .icon,
.button--style-primary:hover .icon,
.button--style-primary-outline:hover .icon,
.button--style-secondary:hover .icon,
.button--style-secondary-outline:hover .icon,
.button--style-tertiary:hover .icon {
  -webkit-text-fill-color: var(--icon-hover-color);
}
.button:visited, .button--style-primary:visited, .button--style-primary-outline:visited, .button--style-secondary:visited, .button--style-secondary-outline:visited, .button--style-tertiary:visited {
  color: var(--color);
  background-color: var(--bg-color);
}
.button:visited::after, .button--style-primary:visited::after, .button--style-primary-outline:visited::after, .button--style-secondary:visited::after, .button--style-secondary-outline:visited::after, .button--style-tertiary:visited::after,
.button:visited .icon,
.button--style-primary:visited .icon,
.button--style-primary-outline:visited .icon,
.button--style-secondary:visited .icon,
.button--style-secondary-outline:visited .icon,
.button--style-tertiary:visited .icon {
  -webkit-text-fill-color: var(--icon-color);
}
.button:focus, .button--style-primary:focus, .button--style-primary-outline:focus, .button--style-secondary:focus, .button--style-secondary-outline:focus, .button--style-tertiary:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: -4px;
  color: var(--focus-color);
  background-color: var(--focus-bg-color);
  text-decoration: none;
}
.button:focus::after, .button--style-primary:focus::after, .button--style-primary-outline:focus::after, .button--style-secondary:focus::after, .button--style-secondary-outline:focus::after, .button--style-tertiary:focus::after,
.button:focus .icon,
.button--style-primary:focus .icon,
.button--style-primary-outline:focus .icon,
.button--style-secondary:focus .icon,
.button--style-secondary-outline:focus .icon,
.button--style-tertiary:focus .icon {
  -webkit-text-fill-color: var(--icon-hover-color);
}
.button:disabled, .button--style-primary:disabled, .button--style-primary-outline:disabled, .button--style-secondary:disabled, .button--style-secondary-outline:disabled, .button--style-tertiary:disabled {
  color: var(--disabled-color);
  background-color: var(--disabled-bg-color);
}

.button--size-md {
  font: 400 0.875rem/1.25rem Inter, Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: flex;
  padding: 0.75rem 1rem;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.button--size-md:after {
  font-size: 1.5rem;
}
@media (max-width: 991.98px) {
  .button--size-md {
    padding: 0.75rem 1rem;
  }
}
@media (max-width: 767.98px) {
  .button--size-md {
    padding: 0.75rem 1rem;
  }
}

.button--size-sm {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  display: flex;
  padding: 0.75rem 0.75rem;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.button--size-sm:after {
  font-size: 1rem;
}
@media (max-width: 991.98px) {
  .button--size-sm {
    padding: 0.75rem 0.75rem;
  }
}
@media (max-width: 767.98px) {
  .button--size-sm {
    padding: 0.75rem 0.75rem;
  }
}

.button--size-lg {
  font: 400 1rem/1.5rem Inter, Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: flex;
  padding: 0.75rem 1rem;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.button--size-lg:after {
  font-size: 1.5rem;
}
@media (max-width: 991.98px) {
  .button--size-lg {
    padding: 0.75rem 1rem;
  }
}
@media (max-width: 767.98px) {
  .button--size-lg {
    padding: 0.75rem 1rem;
  }
}

.button--size-xlg {
  font: 400 1.125rem/1.75rem Inter, Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: flex;
  padding: 0.75rem 1.5rem;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.button--size-xlg:after {
  font-size: 1.5rem;
}
@media (max-width: 991.98px) {
  .button--size-xlg {
    padding: 0.75rem 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .button--size-xlg {
    padding: 0.75rem 1.5rem;
  }
}

.button--size-full-width {
  font: 400 0.875rem/1.25rem Inter, Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: flex;
  padding: 0.75rem 1.5rem;
  align-content: center;
  align-items: center;
  justify-content: center;
  --bg-color:var(--colours-primary-default, #313435);
  --color: var(--colours-neutral-white, #ffffff);
  --icon-color: var(--colours-secondary-default, #fe9b7c);
  --icon-hover-color: var(--colours-secondary-default, #fe9b7c);
  --hover-bg-color: var(--colours-primary-600, #282b2b);
  --hover-color: var(--colours-secondary-default, #fe9b7c);
  --focus-bg-color: var(--colours-primary-600, #282b2b);
  --focus-color: var(--colours-secondary-default, #fe9b7c);
  --focus-outline-color:var(--colours-secondary-default, #fe9b7c);
  --disabled-bg-color: var(--colours-neutral-200, #d6d6d7);
  --disabled-color: inherit;
  margin: 0.5rem 0rem;
  padding: 1.5rem;
  width: 100% !important;
  border: 0 !important;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.button--size-full-width:after {
  font-size: 1rem;
}
@media (max-width: 991.98px) {
  .button--size-full-width {
    padding: 0.75rem 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .button--size-full-width {
    padding: 0.75rem 1.5rem;
  }
}
.button--size-full-width a {
  text-decoration: none;
}
.button--size-full-width a::after {
  display: none !important;
}
.button--size-full-width::after {
  display: flex;
  font-family: "ph";
  font-size: 1.5rem;
  content: var(--after-content);
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--icon-color);
}

.button--style-primary-outline {
  --color:var(--colours-primary-default, #313435);
  border: 2px solid var(--color);
  --hover-bg-color: var(--colours-primary-600,#282b2b);
  --hover-color: var(--colours-secondary-default, #fe9b7c);
  --focus-bg-color: var(--colours-primary-600,#282b2b);
  --focus-color: var(--colours-secondary-default, #fe9b7c);
  --focus-outline-color:var(--colours-secondary-default, #fe9b7c);
  --icon-hover-color: var(--colours-secondary-default, #fe9b7c);
  --icon-color: var(--color);
  --disabled-bg-color: var(--colours-neutral-200,#d6d6d7);
  --disabled-color: inherit;
}

.button--style-secondary-outline {
  --color: var(--colours-secondary-default, #fe9b7c);
  border: 2px solid var(--color);
  --hover-bg-color: var(--colours-secondary-500, #feaf96);
  --hover-color: var(--colours-neutral-800,#1a1c1c);
  --icon-hover-color: var(--colours-neutral-800, #1a1c1c);
  --icon-color: var(--color);
  --focus-bg-color: var(--colours-secondary-500, #feaf96);
  --focus-color: var(--colours-neutral-800, #1a1c1c);
  --focus-outline-color:var(--colours-secondary-default, #fe9b7c);
  --disabled-bg-color: var(--colours-neutral-200, #d6d6d7);
  --disabled-color: inherit;
}

.button--style-primary {
  --bg-color:var(--colours-primary-default, #313435);
  --color: var(--colours-neutral-white, #ffffff);
  --icon-color: var(--colours-secondary-default, #fe9b7c);
  --icon-hover-color: var(--colours-secondary-default, #fe9b7c);
  --hover-bg-color: var(--colours-primary-600, #282b2b);
  --hover-color: var(--colours-secondary-default, #fe9b7c);
  --focus-bg-color: var(--colours-primary-600, #282b2b);
  --focus-color: var(--colours-secondary-default, #fe9b7c);
  --focus-outline-color:var(--colours-secondary-default, #fe9b7c);
  --disabled-bg-color: var(--colours-neutral-200, #d6d6d7);
  --disabled-color: inherit;
}

.button--style-secondary {
  --bg-color: var(--colours-secondary-default, #fe9b7c);
  --color: var(--colours-neutral-800, #1a1c1c);
  --icon-color: var(--color);
  --icon-hover-color: var(--color);
  --hover-bg-color: var(--colours-secondary-500, #feaf96);
  --hover-color: var(--colours-neutral-800, #1a1c1c);
  --focus-bg-color: var(--colours-secondary-500, #feaf96);
  --focus-color: var(--colours-neutral-800, #1a1c1c);
  --focus-outline-color:var(--colours-secondary-default, #fe9b7c);
  --disabled-bg-color: var(--colours-neutral-200, #d6d6d7);
  --disabled-color: inherit;
}

.button--style-tertiary {
  --bg-color: var(--colours-tertiary-default, #bebfbf);
  --color: var(--colours-primary-default, #313435);
  --icon-color: var(--color);
  --icon-hover-color: var(--color);
  --hover-bg-color: var(--colours-tertiary-400, #d8d8d9);
  --hover-color: var(--colours-primary-default, #313435);
  --focus-bg-color: var(--colours-tertiary-400, #d8d8d9);
  --focus-color: var(--colours-primary-default, #313435);
  --focus-outline-color:var(--colours-tertiary-default, #bebfbf);
  --disabled-bg-color: var(--colours-neutral-200,#d6d6d7);
  --disabled-color: inherit;
}

.button--icon-only {
  position: relative;
  padding: var(--size-s);
  width: var(--size-lg);
  height: var(--size-lg);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-indent: 1000%;
  -webkit-text-fill-color: var(--color);
}
.button--icon-only [class^=ph-],
.button--icon-only [class*=" ph-"],
.button--icon-only .icon {
  position: absolute;
  text-indent: initial;
  font-size: var(--size-lg);
}
.button--icon-only::after {
  position: absolute;
  text-indent: initial;
  padding: 0;
}
@media (max-width: 991.98px) {
  .button--icon-only {
    padding: var(--size-sm);
  }
}
@media (max-width: 767.98px) {
  .button--icon-only {
    padding: var(--size-sm);
  }
}
@media (max-width: 991.98px) {
  .button--icon-only-mobile {
    position: relative;
    padding: var(--size-s);
    width: var(--size-lg);
    height: var(--size-lg);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-indent: 1000%;
    -webkit-text-fill-color: var(--color);
  }
  .button--icon-only-mobile [class^=ph-],
  .button--icon-only-mobile [class*=" ph-"],
  .button--icon-only-mobile .icon {
    position: absolute;
    text-indent: initial;
    font-size: var(--size-lg);
  }
  .button--icon-only-mobile::after {
    position: absolute;
    text-indent: initial;
    padding: 0;
  }
}

/*# sourceMappingURL=button.css.map */