/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url("variables.css");
@import url("cme-icons.css");
@import url("colors.css");
@import url("util-styles.css");
@import url("util-styles-responsive.css");

:root {
  /* colors */
  --background-color: var(--white);
  --light-color: var(--gray5);
  --dark-color: var(--gray8);
  --text-color: var(--gray3);
  --title-color: var(--blue2);
  --link-color: var(--blue4);
  --link-hover-color: var(--blue4);

  /* fonts */
  --body-font-family: var(--averta), arial, sans-serif;
  --heading-font-family: var(--averta), arial, sans-serif;
  --roboto-mono-font-family: roboto-mono, monospace;

  /* body sizes */
  --body-font-size-m: 16px;
  --body-font-size-s: 14px;

  /* heading sizes */
  --heading-font-size-xxl: 42px;
  --heading-font-size-xl: 32px;
  --heading-font-size-l: 26px;
  --heading-font-size-m: 20px;
  --heading-font-size-s: 16px;
  --heading-font-size-xs: 11px;

  /* nav height */
  --nav-height: 64px;
  --nav-faux-height: 50px;

  /* Global breakpoints */
  --screen-xs-min: 0;
  --screen-sm-min: 481px;
  --screen-md-min: 769px;
  --screen-lg-min: 993px;
  --screen-xl-min: 1201px;
  --screen-xxl-min: 1401px;

  /* Container max sizes */
  --container-xs-max: 480px;
  --container-sm-max: 768px;
  --container-md-max: 992px;
  --container-lg-max: 1200px;
  --container-xl-max: 1400px;
  --container-xxl-max: 1600px;

  /* Container paddings */
  --container-padding-xs: 24px;
  --container-padding-sm: 32px;
  --container-padding-md: 54px;
  --container-padding-lg: 66px;
  --container-padding-xl: 88px;
  --container-padding-xxl: 88px;
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.5rem;
  letter-spacing: normal;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  margin: 0;
  display: none;
}

body.appear {
  display: block;
}

@media (width >= 769px) {
  body {
    font-size: var(--body-font-size-m);
  }
}

body.curtain-visible {
  overflow: hidden;
}

@media (width >= 993px) {
  body.include-nav {
    margin-top: 0;
  }
}

body.header-hidden main {
  padding-top: 0 !important;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  z-index: 80;
}

@media (width >= 993px) {
  .header {
    background-color: var(--white);
  }
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--heading-font-family);
  color: var(--title-color);
  margin-top: 0;

  &.gradient {
    background-image: linear-gradient(-45deg, var(--blue5), var(--green));
    background-clip: text;
    color: transparent;
  }

  & a {
    color: var(--blue2);
    position: relative;

    &:hover {
      color: var(--blue5);
      text-decoration: none;

      &::after {
        margin-left: .75rem;
        transition: 0.1s;
      }
    }

    &::after {
      font-family: var(--cme-group-icons);
      content: var(--icon-chevron-right);
      color: var(--blue5);
      margin-left: .5rem;
      font-size: 80%;
      font-weight: 400;
    }
  }
}

h1,
.h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.0262rem;
}

h2,
.h2 {
  font-size: 1.375rem;
  line-height: 1.75rem;
  letter-spacing: 0.02rem;

  & a {
    &:hover {
      &::after {
        margin-left: .625rem;
      }
    }

    &::after {
      margin-left: .375rem;
    }
  }
}

h3,
.h3 {
  font-size: 1.25rem;
  line-height: 1.625rem;
  letter-spacing: 0.0163rem;

  & a {
    &:hover {
      &::after {
        margin-left: .5625rem;
      }
    }

    &::after {
      margin-left: .375rem;
    }
  }
}

h4,
.h4 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  letter-spacing: 0.0262rem;

  & a {
    &:hover {
      &::after {
        margin-left: .5rem;
      }
    }

    &::after {
      margin-left: .3125rem;
    }
  }
}

h5,
.h5 {
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.0788rem;

  & a {
    &:hover {
      &::after {
        margin-left: .375rem;
      }
    }

    &::after {
      margin-left: .1875rem;
    }
  }
}

h6,
.h6 {
  text-transform: uppercase;
  font-size: 0.6875rem;
  line-height: 0.875rem;
  letter-spacing: 0.0206rem;
  margin-bottom: 0.625rem;

  & a {
    &:hover {
      &::after {
        margin-left: .25rem;
      }
    }

    &::after {
      margin-left: .125rem;
    }
  }
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
  margin-bottom: 1.25rem;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  font-weight: 600;
}

h5,
.h5,
h6,
.h6 {
  font-weight: 700;
}

@media (width >=481px) {
  h1,
  .h1 {
    font-size: var(--heading-font-size-xxl);
    line-height: 3.375rem;
    margin-bottom: 1.875rem;
  }

  h2,
  .h2 {
    font-size: var(--heading-font-size-xl);
    line-height: 2.625rem;
    margin-bottom: 1.875rem;
  }

  h3,
  .h3 {
    font-size: var(--heading-font-size-l);
    line-height: 2.125rem;
    margin-bottom: 1.875rem;
  }

  h4,
  .h4 {
    font-size: var(--heading-font-size-m);
    line-height: 1.625rem;
    margin-bottom: 1.875rem;
  }

  h5,
  .h5 {
    font-size: var(--heading-font-size-s);
    line-height: 1.375rem;
    margin-bottom: 1.875rem;
  }

  h6,
  .h6 {
    font-size: var(--heading-font-size-xs);
    line-height: 0.875rem;
    margin-bottom: 0.9375rem;
  }

  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5 {
    margin-bottom: 1.25rem;
  }
}

.reverse {
  & h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    & a {
      color: var(--white);
    }
  }
}

dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

/* Remove margin-top from nested ul elements under li */
li ul {
  margin-top: 0;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* p */
p {
  font-family: var(--body-font-family);
  font-weight: 400;
  margin-bottom: 0.9375rem;
  font-size: var(--body-font-size-s);
  line-height: 1.25rem;
  letter-spacing: 0.0262rem;
  margin-top: 0;

  @media (width >=481px) {
    margin-bottom: 1.875rem;
    font-size: var(--body-font-size-m);
    letter-spacing: 0.03rem;
    line-height: 1.5rem;
  }

  &:not(.button-container) a {
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 200% 0.0625rem;
    overflow: hidden;
    transition: background-position 0.2s;
    text-decoration: none !important;
    background-image: linear-gradient(
      90deg,
      rgb(255 255 255 / 0%) 50%,
      var(--blue4) 0%
    );

    &:hover {
      color: var(--blue3);
      background-position: -100% 100%;
    }

    &:visited {
      color: var(--blue4);
    }
  }
}

/* p & span */
p,
span,
td,
th {
  &.text-1 {
    font-family: var(--body-font-family);
    font-weight: 400;
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.625rem;

    @media (width >=481px) {
      font-size: 1.75rem;
      letter-spacing: 0.0525rem;
      line-height: 2.25rem;
    }
  }

  &.text-2 {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 0.9375rem;

    @media (width >=481px) {
      font-size: 1.25rem;
      line-height: 1.75rem;
      letter-spacing: 0.03em;
      margin-bottom: 1.875rem;
    }
  }

  &.text-3 {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 0.9375rem;

    @media (width >=481px) {
      font-size: 1rem;
      letter-spacing: 0.03em;
      line-height: 1.5rem;
      margin-bottom: 1.875rem;
    }
  }

  &.text-4 {
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-bottom: 0.625rem;

    @media (width >=481px) {
      font-size: 0.875rem;
      letter-spacing: 0.03em;
      line-height: 1.25rem;
      margin-bottom: 1.25rem;
    }
  }

  &.text-small {
    font-size: 80%;
  }

  &.tagline {
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.75rem;
    color: var(--gray3);
    margin-bottom: 1.875rem;

    @media (width >=481px) {
      font-size: 2.375rem;
      line-height: 3rem;
    }
  }
}

/* span */
span {
  &.text-1,
  &.text-2,
  &.text-3,
  &.text-4,
  &.text-small,
  &.tagline {
    display: inline-block;
  }
}

/* links */
a,
a code {
  color: var(--link-color);
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
}

a:hover,
a:hover code {
  color: var(--link-hover-color);
  text-decoration: underline;
  font-family: inherit;
  font-size: inherit;
}

a:visited,
a:visited code {
  color: var(--link-color);
  font-family: inherit;
  font-size: inherit;
}

a[target="_blank"]:not([href^="mailto:"], [href$=".pdf"])::after {
  font-family: var(--cme-group-icons);
  content: var(--icon-positive);
  font-size: 0.625rem;
  margin-left: 0.3125rem;
  position: relative;
}

a {
  &.link-bold {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;

    &:hover {
      color: var(--blue4);
      background-position: 0;
      text-decoration: underline !important;
    }
  }

  &.position-right .icon {
    margin-left: 0.5rem;
  }

  &.position-left .icon {
    margin-right: 0.5rem;
  }

  &:hover,
  &:active {
    color: var(--blue4);
  }

  & .icon {
    filter: var(--blue4-filter);

    img {
      width: 0.7188rem;
    }
  }

  &.breadcrumb {
    color: var(--white) !important;
    font-family: var(--averta);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.25rem;
    background-image: none !important;

    & .icon {
      filter: var(--white-filter) !important;
    }

    &:hover {
      color: var(--white) !important;
      text-decoration: underline !important;
    }
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
.reverse {
  & a {
    color: var(--blue5);

    &:hover,
    &:active,
    &:visited {
      color: var(--blue5);
    }

    & .icon {
      filter: var(--blue5-filter);
    }
  }
}

/* ul */
ol,
ul {
  padding-inline-start: 2.5rem;
  margin-bottom: 1.875rem;
}

ol li,
ul li {
  margin-bottom: 0.625rem;
}

/* HR Default Styles */
hr {
  background-color: var(--gray5);
  border: none;
  color: var(--gray5);
  height: 0.0625rem;
  margin-bottom: 1.25rem;
}

.block-divider-line hr {
  background-color: var(--gray4);
  color: var(--gray5);
  margin-top: 1.25rem;
  margin-bottom: 0.625rem;
}

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

.icon {
  display: inline-block;
  height: 0.875rem;
  width: 0.875rem;

  &.icon-envelope {
    width: auto;

    & img {
      width: auto;
    }
  }
}

.icon img {
  height: 100%;
  width: 100%;
}

/* buttons */
a.button,
button {
  border-radius: 0.25rem;
  font-family: var(--averta);
  font-weight: 700;
  line-height: 0.75rem;
  letter-spacing: 0.0938rem;
  font-size: 0.75rem;
  padding: 0.625rem 1.375rem;
  vertical-align: middle;
  box-shadow: 0 0.0625rem 0.125rem 0 rgb(60 64 67 / 30%),
    0 0.125rem 0.375rem 0.125rem rgb(60 64 67 / 15%);
  background-image: none !important;
  border: none;
  display: inline-flex;
  color: var(--blue4);
  text-transform: uppercase;
  font-style: normal;
  text-align: center;

  &.secondary-4 {
    background-color: transparent;
    border: 0.0625rem solid var(--blue2);
    border-radius: 0.25rem;
    box-shadow: none;
    color: var(--blue2);

    & .icon {
      filter: var(--blue2-filter);
    }

    &:hover {
      background-color: var(--blue5);
      box-shadow: 0.25rem 0.25rem 0 0 var(--blue2);

      &::after {
        color: var(--blue2);
      }
    }

    &:active {
      color: var(--gray3);

      & .icon {
        filter: var(--gray3-filter);
      }

      &::after {
        color: var(--gray3);
      }
    }
  }
}

a.button.primary,
button.primary,
button.primary a {
  font-size: 0.75rem;
  letter-spacing: 0.0938rem;
  line-height: 0.75rem;
  background-color: var(--blue4);
  color: var(--white);
  border: 0.125rem solid var(--blue4);

  &::after {
    color: var(--white);
  }

  & .icon {
    filter: var(--white-filter);
  }

  &.alternate {
    background-color: var(--blue2);
    border-color: var(--blue2);
    color: var(--white);

    &:hover:not(:active) {
      background-color: var(--blue5);
      border-color: var(--blue5);
    }
  }

  &.inactive {
    &:hover,
    &:active {
      background-color: var(--blue4);
      border-color: var(--blue4);
      color: var(--white);
      text-decoration: none;
    }
  }

  &:hover {
    background-color: var(--blue5);
    border-color: var(--blue5);
    color: var(--blue2);
    text-decoration: none;

    &::after {
      color: var(--blue2);
    }

    & .icon {
      filter: var(--blue2-filter);
    }
  }

  &:active {
    background-color: var(--blue-active-state);
    border-color: var(--blue-active-state);
    color: var(--white);
    text-decoration: none;

    & .icon {
      filter: var(--white-filter);
    }

    &::after {
      color: var(--white);
    }
  }

  &:disabled,
  &[disabled],
  &.disabled {
    background-color: var(--gray5);
    border-color: var(--gray5);
    color: var(--gray3);
    text-decoration: none;
    box-shadow: 0 0.0625rem 0.125rem 0 rgb(60 64 67 / 30%),
      0 0.125rem 0.375rem 0.125rem rgb(60 64 67 / 15%);

    & .icon {
      filter: var(--gray3-filter);
    }

    &::after {
      color: var(--gray3);
    }
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
.reverse {
  & a.button.primary,
  & button.primary,
  & button.primary a {
    &.alternate {
      background-color: var(--blue4);
      border-color: var(--blue4);

      &:active {
        background-color: var(--blue-active-state);
        border-color: var(--blue-active-state);
      }
    }

    &:disabled,
    &[disabled],
    &.disabled {
      background-color: var(--gray3);
      border-color: var(--gray3);
      color: var(--gray5);

      & .icon {
        filter: var(--gray5-filter);
      }

      &::after {
        color: var(--gray5);
      }
    }
  }
}

a.button.secondary,
a.button.secondary-2,
a.button.secondary-3,
button.secondary,
button.secondary-2,
button.secondary-3 {
  background-color: transparent;
  border: 0.125rem solid var(--blue5);
  box-shadow: none;
  font-size: 0.75rem;
  padding: 0.625rem 1.375rem;
  line-height: 0.75rem;
  letter-spacing: 0.0938rem;
  color: var(--gray3);

  & .icon {
    filter: var(--gray3-filter);
  }

  &:hover {
    background-color: var(--blue5);
    border-color: var(--blue5);
    color: var(--blue2);

    &::after {
      color: var(--blue2);
    }

    & .icon {
      filter: var(--blue2-filter);
    }
  }

  &:active {
    color: var(--white);
    border-color: var(--blue-active-state);
    background-color: var(--blue-active-state);

    & .icon {
      filter: var(--white-filter);
    }

    &::after {
      color: var(--white);
    }
  }

  &:disabled,
  &[disabled],
  &.disabled {
    color: var(--gray4);
    border-color: var(--gray4);
    background-color: transparent;

    & .icon {
      filter: var(--gray4-filter);
    }

    &::after {
      color: var(--gray4);
    }
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
.reverse {
  & a.button.secondary,
  & a.button.secondary-2,
  & a.button.secondary-3,
  & button.secondary,
  & button.secondary-2,
  & button.secondary-3 {
    color: var(--white);

    & .icon {
      filter: var(--white-filter);
    }

    &:hover:not(:active) {
      color: var(--blue2);

      & .icon {
        filter: var(--blue2-filter);
      }
    }

    &:active {
      color: var(--blue2);
      border-color: var(--white);
      background-color: var(--white);

      & .icon {
        filter: var(--blue2-filter);
      }

      &::after {
        color: var(--blue2);
      }
    }

    &:disabled,
    &[disabled],
    &.disabled {
      border-color: var(--gray3);
      color: var(--gray5);
    }
  }
}

a.button.primary,
a.button.secondary,
a.button.secondary-2,
a.button.secondary-3,
a.button.secondary-4,
button.primary,
button.secondary,
button.secondary-2,
button.secondary-3,
button.secondary-4 {
  text-decoration: none;
}

a.button.secondary-2 {
  border-color: var(--gray3);
}

/* stylelint-disable-next-line no-duplicate-selectors */
.reverse {
  & a.button.secondary-2 {
    border-color: var(--white);

    &:hover {
      border-color: var(--blue5);
    }

    &:active {
      border-color: var(--white);
    }
  }
}

a.button.secondary-3 {
  color: var(--blue2);
  border-color: var(--blue2);

  & .icon {
    filter: var(--blue2-filter);
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
.reverse {
  & a.button.secondary-3 {
    border-color: var(--blue5);
  }
}

.button:disabled,
.button.disabled,
fieldset:disabled .button {
  pointer-events: none;
  opacity: 0.65;
}

/* section */
main {
  padding-top: 3.125rem;

  @media (width >= 993px) {
    padding-top: 6.25rem;
  }

  & > .section:not(.divider-container, .hero-container, .hero),
  & .columns {
    &.text-1,
    &.text-2,
    &.text-3,
    &.text-4,
    &.text-small,
    &.tagline {
      span {
        display: inline-block;
      }
    }

    &.text-1 {
      p,
      span,
      td,
      th {
        font-family: var(--body-font-family);
        font-weight: 400;
        margin-bottom: 1.25rem;
        font-size: 1.125rem;
        line-height: 1.625rem;

        @media (width >=481px) {
          font-size: 1.75rem;
          letter-spacing: 0.0525rem;
          line-height: 2.25rem;
        }
      }
    }

    &.text-2 {
      p,
      span,
      td,
      th {
        font-family: var(--body-font-family);
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 0.9375rem;

        @media (width >=481px) {
          font-size: 1.25rem;
          line-height: 1.75rem;
          letter-spacing: 0.03em;
          margin-bottom: 1.875rem;
        }
      }
    }

    &.text-3 {
      p,
      span,
      td,
      th {
        font-family: var(--body-font-family);
        font-weight: 400;
        font-size: 0.875rem;
        line-height: 1.25rem;
        margin-bottom: 0.9375rem;

        @media (width >=481px) {
          font-size: 1rem;
          letter-spacing: 0.03em;
          line-height: 1.5rem;
          margin-bottom: 1.875rem;
        }
      }
    }

    &.text-4 {
      p,
      span,
      td,
      th {
        font-family: var(--body-font-family);
        font-weight: 400;
        font-size: 0.75rem;
        line-height: 1rem;
        margin-bottom: 0.625rem;

        @media (width >=481px) {
          font-size: 0.875rem;
          letter-spacing: 0.03em;
          line-height: 1.25rem;
          margin-bottom: 1.25rem;
        }
      }
    }

    &.text-small {
      p,
      span,
      td,
      th {
        font-size: 80%;
      }
    }

    &.tagline {
      p,
      span,
      td,
      th {
        font-family: var(--body-font-family);
        font-weight: 600;
        font-size: 1.375rem;
        line-height: 1.75rem;
        color: var(--gray3);
        margin-bottom: 1.875rem;

        @media (width >=481px) {
          font-size: 2.375rem;
          line-height: 3rem;
        }
      }
    }

    &.blue1-background,
    &.blue2-background,
    &.blue3-background {
      padding: 1.875rem 0;
      color: var(--white);

      & > div {
        background-color: inherit !important;
        color: inherit;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: var(--white);

        & a {
          color: var(--white);

          &:hover {
            color: var(--blue5);
          }
        }
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    &.blue1-background {
      background-color: var(--blue1) !important;
    }

    &.blue2-background {
      background-color: var(--blue2) !important;
    }

    &.blue3-background {
      background-color: var(--blue3) !important;
    }

    &.gray-gradient-background {
      background: linear-gradient(var(--gray3), var(--gray1));
      padding: 1.875rem 0;
      color: var(--white);

      & .default-content-wrapper {
        color: var(--white);

        & :is(h1, h2, h3, h4, h5, h6):not(.gradient) {
          color: var(--white);
        }
      }
    }

    &.gray-gradient-background-reverse {
      background: linear-gradient(var(--gray1), var(--gray3));
      padding: 1.875rem 0;
      color: var(--white);

      & .default-content-wrapper {
        color: var(--white);

        & :is(h1, h2, h3, h4, h5, h6):not(.gradient) {
          color: var(--white);
        }
      }
    }

    &.gray5-background,
    &.light,
    &.highlight {
      background-color: var(--gray5);
      padding: 1.875rem 0;

      & > div {
        background-color: var(--gray5) !important;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    &.gray6-background {
      background-color: var(--gray6);
      padding: 1.875rem 0;
    }

    &.not-full-width {
      margin: 0 auto;

      @media (width >= 481px) {
        padding-inline: 2rem;
      }

      @media (width >= 769px) {
        padding-inline: 3.375rem;
      }

      @media (width >= 993px) {
        padding-inline: 4.125rem;
      }

      @media (width >= 1201px) {
        width: calc(70.5% - 17.625rem);
        padding-inline: 4.125rem !important;
      }

      @media (width >= 1401px) {
        max-width: 45.0625rem;
      }

      > div {
        width: 100% !important;
      }
    }

    &.center {
      & .default-content-wrapper {
        text-align: center;
      }

      & .block {
        margin: 0 auto;
      }

      & .layout > div {
        margin: 0 auto;
      }
    }

    &.flush {
      margin-top: -3.75rem;
    }

    &.no-margin-bottom {
      margin-bottom: 0;
    }

    &.glossary-section {
      & div {
        & p:first-child {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }
      }
    }
  }

  & > .section:not(.divider-container, .hero-container, .hero) {
    margin-bottom: 1.875rem;
  }

  @media (width >= 769px) {
    > .section {
      &.blue1-background,
      &.blue2-background,
      &.blue3-background,
      &.gray5-background,
      &.gray6-background,
      &.light,
      &.highlight {
        padding: 3.75rem 0;
      }
    }
  }
}

/* sections */

main > .section:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

main > .section.full-width picture,
main > .section.full-width picture img {
  display: block;
  width: 100%;
  height: 28.4375rem;
}

main > .section:not(.full-width) > div,
.container {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: var(--container-padding-xs);
  padding-right: var(--container-padding-xs);
  max-width: var(--container-xs-max);
}

@media (width > 480px) {
  main > .section:not(.full-width) > div,
  .container {
    padding-left: var(--container-padding-sm);
    padding-right: var(--container-padding-sm);
    max-width: var(--container-sm-max);
  }
}

@media (width > 768px) {
  main > .section:not(.full-width) > div,
  .container {
    padding-left: var(--container-padding-md);
    padding-right: var(--container-padding-md);
    max-width: var(--container-md-max);
  }
}

@media (width > 992px) {
  main > .section:not(.full-width) > div,
  .container {
    padding-left: var(--container-padding-lg);
    padding-right: var(--container-padding-lg);
    max-width: var(--container-lg-max);
  }
}

@media (width > 1200px) {
  main > .section:not(.full-width) > div,
  .container {
    padding-left: var(--container-padding-xl);
    padding-right: var(--container-padding-xl);
    max-width: var(--container-xl-max);
  }
}

@media (width > 1400px) {
  main > .section:not(.full-width) > div,
  .container {
    padding-left: var(--container-padding-xxl);
    padding-right: var(--container-padding-xxl);
    max-width: var(--container-xxl-max);
  }
}

/* Section Layouts */

.section {
  & .layout {
    display: flex;
    flex-wrap: wrap;

    & > div {
      flex: 0 0 auto;
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 1.25rem;

      @media (width > 768px) {
        padding: 0 0.9375rem;
      }

      &:first-child {
        @media (width > 768px) {
          padding-left: 0;
        }
      }

      &:last-child {
        @media (width > 768px) {
          padding-right: 0;
        }
      }
    }

    & .w-10 {
      @media (width > 768px) {
        width: 10%;
      }
    }

    & .w-20 {
      @media (width > 768px) {
        width: 20%;
      }
    }

    & .w-25 {
      @media (width > 768px) {
        width: 25%;
      }
    }

    & .w-30 {
      @media (width > 768px) {
        width: 30%;
      }
    }

     & .w-33 {
      @media (width > 768px) {
        width: 33.33%;
      }
    }

    & .w-40 {
      @media (width > 768px) {
        width: 40%;
      }
    }

    & .w-50 {
      @media (width > 768px) {
        width: 50%;
      }
    }

    & .w-60 {
      @media (width > 768px) {
        width: 60%;
      }
    }

    & .w-66 {
      @media (width > 768px) {
        width: 66.66%;
      }
    }

    & .w-70 {
      @media (width > 768px) {
        width: 70%;
      }
    }

    & .w-75 {
      @media (width > 768px) {
        width: 75%;
      }
    }

    & .w-80 {
      @media (width > 768px) {
        width: 80%;
      }
    }

    & .w-90 {
      @media (width > 768px) {
        width: 90%;
      }
    }
  }

  &.no-gap .layout > div {
    padding: 0;
  }

  &.equal-height .layout {
    align-items: stretch;

    & > div > div {
      height: 100%;
    }
  }

  &.sub-string-red {
    sub {
      vertical-align: baseline;
      font-size: inherit;
      color: var(--active-red);
    }
  }

  &.sup-string-green {
    sup {
      vertical-align: baseline;
      font-size: inherit;
      color: var(--green3);
    }
  }
}

main .section.divider > div:last-of-type {
  border-bottom: 0.0625rem solid var(--gray4);
}

main .section.divider[has-sidebar="true"] > div:last-of-type {
  border-bottom: none;
}

main .section.divider[has-sidebar="true"] > div:nth-last-of-type(2) {
  border-bottom: 0.0625rem solid var(--gray4);
}

main .section > [class*="-wrapper"] + [class*="-wrapper"]:not(.default-content-wrapper, .hero-wrapper) {
  margin-top: 1.875rem;

  &:has(.hidden-content) {
    display: none !important;
  }
}

/* Parallax section styling */
main .section.parallax {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--white);
  padding: 3.75rem 0 0;
  margin: -1px 0 1.875rem;

  @media (width >= 769px) {
    margin-bottom: 3.75rem;
  }

  @media only screen and (orientation: portrait) and (width >= 640px) {
    background-attachment: fixed;
  }

  @media only screen and (orientation: landscape) and (width >= 993px) {
    background-attachment: fixed;
  }

  /* Disable parallax on mobile for performance */
  @media (width <= 640px) {
    background-attachment: scroll;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 20%);
    z-index: 1;
  }

  & .default-content-wrapper {
    padding-bottom: 3.75rem;

    @media (width >= 769px) {
      padding-bottom: 5rem;
    }
  }

  & > div {
    position: relative;
    z-index: 2;
    text-align: left;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    padding-left: 30px;
    padding-right: 30px;

    @media (width >= 481px) {
      max-width: 768px;
      padding-left: 45px;
      padding-right: 45px;
    }

    @media (width >= 769px) {
      max-width: 992px;
      padding-left: 120px;
      padding-right: 120px;
    }

    @media (width >= 993px) {
      max-width: 1200px;
      padding-left: 200px;
      padding-right: 200px;
    }
  }

  & h1,
  & h2,
  & h3,
  & p {
    color: var(--white);
    text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
  }

  & p {
    font-family: var(--averta), Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 2.25rem;
    margin-bottom: 1.25rem;

    &:last-child {
      margin-bottom: 0;
    }

    &:has(em),
    & em {
      font-size: 1rem;
      line-height: 1.5rem;
    }
  }
}

/* Login teaser with background image */
main .fragment-wrapper .section.login-teaser-image {
  position: relative;
  min-height: 18.75rem;

  @media (width >= 769px) {
    min-height: 25rem;
  }

  /* Use image as background */
  & .default-content-wrapper picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    z-index: 0;
  }

  /* Hide the paragraph wrapper but keep the image */
  & .default-content-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;

    & p {
      margin: 0;
      height: 100%;
    }

    & picture {
      display: block;
      height: 100%;
    }
  }

  /* Position login wrapper as overlay */
  & .login-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 18.75rem;

    @media (width >= 769px) {
      min-height: 25rem;
    }
  }

  /* Add margin to login block */
  & .login {
    margin: 3.75rem;
  }
}

/* Loading overlay animation */
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Full screen overlay for animation */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 30%);
  display: none;
  z-index: 90;
}

/* Loading spinner */
body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.125rem;
  height: 3.125rem;
  border: 0.1875rem solid var(--blue4);
  border-top-color: transparent;
  border-radius: 50%;
  display: none;
  z-index: 91;
}

/* Show overlay and spinner when loading */
body.loading::after,
body.loading::before {
  display: block;
}

/* Add animation only to the spinner */
body.loading::before {
  animation: loading 0.75s linear infinite;
}

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

.alerts .alert-item {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: var(--blue6);
  color: var(--gray3);
}

@media (width >= 993px) {
  .alerts .alert-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

.alerts .alert-item .alert-text a:hover {
  color: var(--blue3);
}

.alerts .alert-item .alert-text a.btn.primary {
  color: var(--white);
}

.alerts .alert-item .alert-text a.btn {
  color: var(--blue4);
}

.alerts .alert-item .alert-text a.btn.primary:hover {
  color: var(--blue3);
}

.alerts .alert-item.standard-primary {
  background-color: var(--blue6);
  color: var(--gray3);
}

.alerts .alert-item.standard-secondary {
  background-color: var(--gray6);
  color: var(--gray3);
}

.alerts .alert-item.non-serious {
  background-color: var(--yellow);
  color: var(--gray3);
}

.alerts .alert-item.serious {
  background-color: var(--pink);
  color: var(--gray3);
}

.alerts .alert-item.gcc-serious {
  background-color: var(--pink);
  color: var(--gray3);
}

.alerts .alert-item.gcc-serious .alert-icon::before {
  content: var(--icon-attention-triangle);
  color: var(--active-red);
  font-family: var(--cme-group-icons);
  font-style: normal;
  position: absolute;
}

.alerts .alert-item .alert-gcc-container {
  display: inline-block;
  width: 94%;
}

.alerts .alert-item .alert-gcc-container .alert-title {
  color: var(--blue2);
  display: inline-block;
  font-weight: bold;
  padding-left: 1.5rem;
}

.alerts .alert-item .alert-gcc-container .alert-text {
  display: inline-block;
  padding-left: 0.5rem;
}

.alerts .alert-item .alert-gcc-container .alert-time {
  display: inline-block;
  padding-left: 0.5rem;
  font-size: 0.75rem;
}

@media (width < 993px) {
  .alerts .alert-item .container {
    padding: 0 0.625rem;
  }
}

/* Custom styles defined in transform alerts rte */

.green {
  color: var(--green);
}

.citron {
  color: var(--citron);
}

.blue2 {
  color: var(--blue2);
}

.blue4 {
  color: var(--blue4);
}

.white {
  color: var(--white);
}

.gray4 {
  color: var(--gray4);
}

.gray5 {
  color: var(--gray5);
}

.gray6 {
  color: var(--gray6);
}

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

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

/* Lightbox Styles */
.lightbox-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.lightbox-image {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.lightbox-expand-icon {
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgb(255 255 255 / 85%);
  color: var(--blue4);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cme-group-icons);
  font-size: 0.875rem;
  pointer-events: none;
  z-index: 1;
}

.lightbox-expand-icon::before {
  content: var(--icon-expand-secondary);
}

/* Lightbox p parent center img */
p.center-img {
  text-align: center;
}

/* Lightbox Modal Styles */
.modal dialog.lightbox-modal {
  width: fit-content;
  height: fit-content;
  max-width: 90vw;
  max-height: 90vh;
  padding: 0.5rem;
  border: 1px solid rgb(var(--gray8) / 20%);
  border-radius: 0.25rem;
}

.lightbox-image-display {
  max-width: 85vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.25rem;
  display: block;
}

/* Lightbox close button styles */
.modal dialog.lightbox-modal .close-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: none !important;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  color: #000;
  line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal dialog.lightbox-modal .close-button:hover,
.modal dialog.lightbox-modal .close-button:focus,
.modal dialog.lightbox-modal .close-button:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.modal dialog.lightbox-modal .close-button::before {
  content: "×";
  font-family: inherit;
}

/* Responsive styles */
@media (width <= 992px) {
  .lightbox-expand-icon {
    top: 1rem;
    right: 1rem;
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.75rem;
  }
}

@media (width <= 576px) {
  .modal dialog.lightbox-modal {
    padding: 0.25rem;
    max-width: 95vw;
    max-height: 85vh;
  }

  .lightbox-image-display {
    max-width: 90vw;
    max-height: 75vh;
  }
}

.highlighted-text {
  font-weight: bold;
  font-family: var(--averta);
  font-size: inherit;
}

/* share this overrides */
#st-2 {
  top: auto;
}

@media (width > 1024px) {
  #st-2 {
    top: var(--navbar-height) !important;
  }
}

#st-2.st-right {
  z-index: 70 !important;
}

/* general classes */
.white-background {
  background-color: var(--white);
}

.tooltip {
  position: relative;

  & .tooltip-content {
    position: absolute;
    background-color: var(--white);
    padding: 0.625rem 1.875rem;
    top: 0.625rem;
    z-index: 10;
    box-shadow: var(--gray8-shadow);
    color: var(--gray3);
    border-radius: 0.3125rem;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
    
    &::before {
      border-bottom: 0.5625rem solid var(--white);
      border-left: 0.5625rem solid transparent;
      border-right: 0.5625rem solid transparent;
      content: "";
      height: 0;
      left: auto;
      margin: 0 auto;
      opacity: 1;
      position: absolute;
      right: calc(50% - 0.3125rem);
      top: -0.5625rem;
      transition-delay: 0s;
      visibility: visible;
      width: 0;
    }
  }
}

/* toast animation */
@keyframes toast-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes toast-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* toasts */

.auth-toast-box {
  color: var(--white);
  display: block;
  margin-bottom: 1.5625rem;
  padding: 0.75rem;
  border: none;
  position: fixed;
  top: 8.75rem;
  width: 56.25rem;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  border-radius: 0.25rem 0 0 0.25rem;

  &.fade-in {
    animation: toast-fade-in 2s 1 ease;
  }

  &.fade-out {
    animation: toast-fade-out 2s 1 ease;
  }


  & .alert-icon {
    border-radius: 0.25rem 0 0 0.25rem;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    left: 0;
    width: 3.75rem;
    justify-content: center;
    color: var(--white);
    background-color: var(--gray7);
    font-size: 1.5rem;

    & .icon-check::before {
      content: var(--icon-check);
    }

    & .icon-attention-triangle::before {
      content: var(--icon-attention-triangle);
    }
  }

  & .alert-heading{
    align-items: center;
    display: flex;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 2.5rem;
    margin-left: 3.75rem;
    min-height: 2.5rem;
    padding-right: 1.875rem;
  }

  & .alert-close {
    align-items: center;
    background-color: transparent;
    bottom: 0;
    color: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;
    width: 3.75rem;
    border: none;
    box-shadow: none;

    & .icon-close::before {
      content: var(--icon-menu-close);
    }
  }

  &.alert-success {
    background-color: var(--notification-success-background);

    & .alert-icon {
      background-color: var(--forest);

      & i {
        color: var(--white);
      }
    }

    & .alert-heading {
      color: var(--blue2);
    }

    & .alert-close {
      color: var(--notification-success-tick);
    }
  }

  &.alert-error {
    background-color: var(--pink);

    & .alert-icon {
      background-color: transparent;

      & i {
        color: var(--active-red);
      }
    }

    & .alert-heading {
      color: var(--blue2);
    }

    & .alert-close {
      color: var(--active-red);
    }
  }

  &.alert-warning {
    background-color: var(--yellow);

    & .alert-icon {
      background-color: transparent;

      & i {
        color: var(--citron);
      }
    }

    & .alert-heading {
      color: var(--blue2);
    }

    & .alert-close {
      color: var(--blue2);
    }
  }
}

.min-height-400,
.min-height-400 .cards-body-container {
  @media (width >=993px) {
    min-height: 25rem;
  }
}

.hidden-content {
  display: none !important;
}