/*
 * 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.
 */

html {
  scroll-behavior: smooth;
}

body {
  display: none;
  font-size: var(--font-size-m);
  margin: 0;
  font-family: var(--font-family-body);
  line-height: 1.6;
  color: var(--body-color);
}

body.appear {
  display: block;
}

.custom {
  footer .button-container,
  .footer-nav-links {
    display: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-bold);
  font-weight: var(--font-weight-bold);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xxs);
  scroll-margin: calc(var(--spacing-l) + 1em);
}

h1 {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-l-alt);
  line-height: var(--line-height-lg);
}

h2 {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-l-m-alt);
  line-height: var(--line-height-m-l-alt);
}

h3 {
  font-size: var(--font-size-l-m);
  line-height: var(--line-height-m-l);
}

h4 {
  font-size: var(--font-size-m);
  line-height: var(--line-height-s);
}

h5 {
  font-size: var(--font-size-m);
  line-height: var(--line-height-s);
}

h6 {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s-alt);
}

@media (width < 1024px) {
  h1 {
    font-size: var(--font-size-l-m-alt);
    line-height: var(--line-height-m-l-alt);
  }

  h2 {
    font-size: var(--font-size-l);
    line-height: var(--line-height-m);
  }

  h3 {
    font-size: var(--font-size-s-alt);
    line-height: var(--line-height-s-m);
  }

  h4 {
    font-size: var(--font-size-m);
    line-height: var(--line-height-s);
  }

  h5 {
    font-size: var(--font-size-s);
    line-height: var(--line-height-s-s);
  }

  h6 {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  color: var(--color-dark-grey);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-body-alt);
  line-height: var(--line-height);
}

@media (width <= 768px) {
  p,
  dl,
  ol,
  ul,
  pre,
  blockquote {
    font-size: var(--font-size-xs);
    line-height: var(--line-height);
  }
}

@media (width <= 480px) {
  p,
  dl,
  ol,
  ul,
  pre,
  blockquote {
    font-size: var(--font-size-xs);
    line-height: var(--line-height);
  }
}

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

code {
  padding: var(--spacing-xxs);
}

pre {
  overflow: scroll;
}

main pre {
  background-color: var(--color-grey);
  padding: var(--spacing-xxs);
  overflow-x: auto;
  white-space: pre;
}

/* links */
a:any-link {
  color: var(--color-black);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
}

a:hover {
  color: var(--link-hover-color);
}

a:active {
  color: var(--bg-button);
}

main p {
  a:any-link {
    font-family: var(--font-family-bold);
  }

  a:focus {
    color: var(--color-black);
    outline: 2px solid var(--color-focus-outline);
  }
}

.small-font p {
  font-size: var(--font-size-xs-alt);
  line-height: var(--line-height-xs-alt);
}

/* default button, primary button, secondary button */
button,
button.primary,
button.secondary,
a.button:any-link,
a.button.primary:any-link,
a.button.secondary:any-link {
  font-family: var(--font-family-body);
  display: inline-block;
  box-sizing: border-box;
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-s);
  text-align: center;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-s);
  line-height: var(--line-height);
  color: var(--color-white);
  background-color: var(--bg-button);
  margin: var(--spacing-xs) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0.25rem;
  cursor: pointer;
}

a.button[title='Read More'] {
  font-family: var(--font-family-bold);
}

@media (width <= 768px) {
  button,
  button.primary,
  button.secondary,
  a.button:any-link,
  a.button.primary:any-link,
  a.button.secondary:any-link {
    font-size: var(--font-size-xs);
  }
}

@media (width <= 480px) {
  button,
  button.primary,
  button.secondary,
  a.button:any-link,
  a.button.primary:any-link,
  a.button.secondary:any-link {
    font-size: var(--font-size-xs-alt);
  }
}

a.button.secondary:any-link,
button.secondary {
  background-color: var(--color-white);
  color: var(--bg-button);
  outline: 1px solid var(--bg-button);
}

a.button:any-link:active,
a.button.primary:any-link:active,
button:active {
  background-color: var(--color-white);
  color: var(--bg-button);
  outline: 1px solid var(--bg-button);
}

button:focus,
button.primary:focus,
button.secondary:focus,
a.button:any-link:focus,
a.button.primary:any-link:focus,
a.button.secondary:any-link:focus {
  padding: var(--spacing-xxs-l-alt) var(--spacing-xs-lg);
  color: var(--color-white);
  border: 2px solid var(--color-black);
  background-color: var(--bg-button);
  outline: 2px solid var(--color-focus-outline);
}

a.button:any-link:hover,
a.button.primary:any-link:hover,
button:hover {
  background-color: var(--bg-button-hover);
  color: var(--color-white);
  text-decoration: underline;
}

a.button.secondary:any-link:hover,
button.secondary:hover {
  text-decoration: underline;
  background-color: var(--color-white);
  color: var(--bg-button);
}

a.button.secondary:any-link:focus,
button.secondary:focus {
  background-color: var(--color-white);
  color: var(--bg-button);
}

a.button.secondary:any-link:active,
button.secondary:active {
  color: var(--color-white);
  background-color: var(--bg-button);
}

@media (width < 1024px) {
  button,
  button.primary,
  button.secondary,
  a.button:any-link,
  a.button.primary:any-link,
  a.button.secondary:any-link {
    padding: var(--spacing-xxs) var(--spacing-s);
  }

  button:focus,
  button.primary:focus,
  button.secondary:focus,
  a.button:any-link:focus,
  a.button.primary:any-link:focus,
  a.button.secondary:any-link:focus {
    padding: var(--spacing-xxxs) var(--spacing-xs-lg);
  }
}

.default-content-wrapper {
  button:not(.primary, .secondary),
  a.button:not(.primary, .secondary),
  button:not(.primary, .secondary):hover,
  a.button:not(.primary, .secondary):hover,
  button:not(.primary, .secondary):focus,
  a.button:not(.primary, .secondary):focus,
  button:not(.primary, .secondary):active,
  a.button:not(.primary, .secondary):active {
    background-color: transparent;
    color: var(--color-black);
    text-decoration: underline;
    padding: 0;
    border: 0;
    outline: 0;
  }

  button:not(.primary, .secondary):focus,
  a.button:not(.primary, .secondary):any-link:focus {
    outline: 2px solid var(--color-focus-outline);
  }
}

.button.chevron {
  position: relative;
  padding-right: 35px !important;
}

.button.chevron::after {
  content: '';
  background-image: url('../../icons/chevron-right-white.svg');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 10px; /* Adjust position as needed */
  top: 50%;
  transform: translateY(-50%);
  width: 16px; /* Adjust width as needed */
  height: 16px; /* Adjust height as needed */
}

.button.chevron:hover::after {
  background-image: url('../../icons/chevron-right-white.svg');
}

/* disabled button */
a.disabled:any-link,
a.disabled,
button:disabled,
button:disabled:hover {
  background-color: var(--color-disabled);
  color: var(--color-black);
  cursor: unset;
}

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

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

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

/* sections */
main .section {
  padding: var(--spacing-m) var(--spacing-xs);
}

.text-slim {
  display: flex;
  justify-content: center;

  p {
    color: var(--color-grey-alt);
  }

  .icon {
    height: 14px;
    width: 14px;
    padding: var(--spacing-xxxs);
    padding-bottom: unset;
  }
}

.text-slim > .default-content-wrapper {
  max-width: 816px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.text-slim.text-center {
  padding-bottom: unset;

  @media (width < 768px) {
    padding-bottom: var(--spacing-xs);
  }
}

/* Notification pane */
.section.notification {
  padding: 0;

  > div {
    padding: var(--spacing-xs) var(--spacing-s);
    background-color: var(--bg-color-paper);

    p {
      margin: 0;
      color: var(--notification-text-color);
      font-size: var(--font-size-xs-alt);
      line-height: 1.5rem;

      a {
        color: var(--color-black);
        text-decoration: underline;
      }
    }
  }
}

header {
  height: var(--nav-mobile-height);

  @media (width > 1040px) {
    height: var(--nav-height);
  }
}

.partner > header {
  > div > div > nav {
    > div:not(:nth-child(2)) {
      display: none;
    }

    > div:nth-child(2) {
      margin: 0 auto;
    }
  }
}

.custom > header {
  > div > div > nav {
    > div:not(:nth-child(2)) {
      display: none;
    }

    > div:nth-child(2) {
      margin: 0 auto;
    }
  }
}

.section.breadcrumb-container {
  background: var(--color-white);
  padding: 8px 25px;
  border-top: 1px solid var(--bg-color-paper);
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.section.text-left,
.text-left {
  text-align: left;
}

.section.text-right,
.text-right {
  text-align: right;
}

.section.text-justify,
.text-justify {
  text-align: justify;
}

.section.text-center,
.text-center {
  text-align: center;
}

.text-center.image {
  > .default-content-wrapper p {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
}

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

@media (width >= 768px) {
  .section {
    & > div {
      max-width: var(--max-width-container);
      margin: auto;
    }

    &.nav-brand > div {
      margin: unset;
    }
  }

  /* Notification pane */
  .section.notification {
    > div {
      max-width: 100%;
      padding: 0.5rem 0;
      text-align: center;
    }
  }
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--color-grey);
}

/* Header Nav */
.header-nav-container.section {
  display: grid;
  margin: var(--spacing-l) var(--spacing-s);
  grid-auto-rows: auto;
  padding: 0;

  @media (width >= 768px) {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--spacing-l);
    padding: var(--spacing-l) var(--spacing-s);
    border-radius: 1rem;
    border: 1px solid var(--bg-color-paper);
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    max-width: var(--max-width-large);
    margin: -120px var(--spacing-l) var(--spacing-xxl) var(--spacing-l);
  }

  @media (width >= 1024px) {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 var(--spacing-xl);
    padding: var(--spacing-l) var(--spacing-xxxl);
    border-radius: 1rem;
    border: 1px solid var(--bg-color-paper);
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    margin: var(--spacing-xxl-negative) var(--spacing-xxxl) var(--spacing-xxl) var(--spacing-xxxl);
    margin-left: auto;
    margin-right: auto;
    width: 1232px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .header-nav-wrapper {
    width: -webkit-fill-available;
    margin-top: 0;
  }

  .header-nav-wrapper:nth-child(1) {
    @media (width >= 768px) {
      grid-area: 1 / 1 / span 2 / span 1;
    }

    @media (width >= 1024px) {
      grid-area: 1 / 1 / span 4 / span 1;

      span.divider:last-child {
        display: none;
      }
    }
  }

  .header-nav-wrapper:nth-child(2) {
    @media (width >= 768px) {
      grid-area: 3 / 1 / span 4 / span 1;

      span.divider:last-child {
        display: none;
      }
    }

    @media (width >= 1024px) {
      grid-area: 1 / 2 / span 1 / span 1;

      span.divider:last-child {
        display: flex;
      }
    }
  }

  .header-nav-wrapper:nth-child(3) {
    @media (width >= 768px) {
      grid-area: 1 / 2 / span 1 / span 1;
    }

    @media (width >= 1024px) {
      grid-area: 2 / 2 / span 6 / span 1;

      span.divider:last-child {
        display: none;
      }
    }
  }

  .header-nav-wrapper:nth-child(4) {
    @media (width >= 768px) {
      grid-area: 2 / 2 / span 1 / span 1;
    }

    @media (width >= 1024px) {
      grid-area: 1 / 3 / span 1 / span 1;
    }
  }

  .header-nav-wrapper:nth-child(5) {
    @media (width >= 768px) {
      grid-area: 3 / 2 / span 1 / span 1;

      .divider {
        margin: var(--spacing-xs) 0;
      }
    }

    @media (width >= 1024px) {
      grid-area: 2 / 3 / span 1 / span 1;

      .divider {
        margin: var(--spacing-xs) 0;
      }
    }
  }

  .header-nav-wrapper:nth-child(6) {
    @media (width >= 768px) {
      grid-area: 4 / 2 / span 1 / span 1;

      .divider {
        margin: var(--spacing-xs) 0;
      }
    }

    @media (width >= 1024px) {
      grid-area: 3 / 3 / span 1 / span 1;

      .divider {
        margin: var(--spacing-xs) 0;
      }
    }
  }

  .header-nav-wrapper:nth-child(7) {
    @media (width >= 768px) {
      grid-area: 5 / 2 / span 1 / span 1;

      .divider {
        margin: var(--spacing-xs) 0;
      }

      span.divider:last-child {
        display: none;
      }
    }

    @media (width >= 1024px) {
      grid-area: 4 / 3 / span 1 / span 1;

      .divider {
        margin: var(--spacing-xs) 0;
      }

      span.divider:last-child {
        display: none;
      }
    }
  }
}

.section.header-nav-container {
  @media (width < 1024px) {
    display: none;
  }
}

/* helper classes */
.hide {
  display: none !important;
}

.visibility-hidden {
  visibility: hidden !important;
  padding: 0;
  margin: 0;
  height: 0;
}

.mt-4 {
  margin-top: var(--spacing-l);
}

.mb-4 {
  margin-bottom: var(--spacing-l);
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.my-4 {
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-l);
}

.ev-icon {
  background-image: url('../../icons/EV-logo.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

strong {
  font-family: var(--font-family-bold);
  font-weight: var(--font-weight-bold);
}

em {
  font-style: italic;
}

.section.rating-widget-container {
  background: var(--bg-color-paper);
}

.section.rating-widget-container .default-content-wrapper {
  text-align: center;
}

/* stylelint-disable */
.section.side-page-text-block {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ol,
  p {
    margin: 0;
  }

  &.legal.mt-4 {
    margin-top: var(--spacing-m);
  }

  &.maxxia-landing-app {
    padding: 32px 16px;

    ol {
      padding-inline-start: 24px;
    }

    .image-link-wrapper {
      padding-right: 64px;
      padding-bottom: 24px;
      padding-top: 24px;
      display: block;
    }

    .image-link-wrapper:last-of-type {
      padding-right: 0;
      padding-top: 24px;
    }
  }

  .default-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    h2,
    h3 {
      font-weight: 700;
      font-size: var(--font-size-l-alt);
      line-height: 2.5rem;
    }

    p {
      strong {
        font-size: var(--font-size-s);
        font-family: var(--font-family-bold);
        color: var(--color-black);
      }

      font-size: var(--font-size-xs);
      font-weight: 400;
      line-height: 1.5rem;
    }
  }

  @media (width >= 1024px) {
    padding: 48px 312px;

    &.legal {
      padding: 0 312px;
    }

    &.maxxia-landing-app {
      padding: 32px 312px;

      .image-link-wrapper {
        display: inline-block;
      }
    }

    &.legal.mt-4 {
      margin-top: var(--spacing-xxl);
    }

    .default-content-wrapper {
      h2,
      h3 {
        font-size: var(--font-size-lg);
        line-height: 3rem;
        font-weight: 700;
      }

      p {
        strong {
          font-size: var(--font-size-xs);
        }

        font-size: var(--font-size-xs);
        line-height: var(--line-height);
      }
    }
  }
}

.section.tablinks-2 {
  > div {
    max-width: 450px;
    display: flex;
    flex-direction: row;

    > p:nth-of-type(2) {
      > a {
        border-bottom: 2px solid var(--color-pink);
        border-radius: 0;
        pointer-events: none;
      }
    }

    > p > a {
      background-color: var(--bg-color-neutral);
      color: #000;
      border-bottom: 2px solid var(--color-disabled);
      border-radius: 0;
    }
  }
}

.section.tablinks-3 {
  > div {
    max-width: 450px;
    display: flex;
    flex-direction: row;

    > p:last-child {
      > a {
        border-bottom: 2px solid var(--color-pink);
        border-radius: 0;
        pointer-events: none;
      }
    }

    > p > a {
      background-color: var(--bg-color-neutral);
      color: #000;
      border-bottom: 2px solid var(--color-disabled);
      border-radius: 0;
    }
  }
}
/* stylelint-enable */

@media (width<= 768px) {
  .section.tablinks {
    > div {
      display: flex;
      justify-content: center;

      > p > a {
        font-size: 12px;
      }
    }
  }

  .section.tablinks-2 {
    > div {
      display: flex;
      justify-content: center;

      > p > a {
        font-size: 12px;
      }
    }
  }

  .section.tablinks-3 {
    > div {
      display: flex;
      justify-content: center;

      > p > a {
        font-size: 12px;
      }
    }
  }
}

.section.takeaway {
  > div:last-child {
    > div > div > div {
      border: 1px solid var(--border-color);
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 3px;
      align-self: stretch;
    }
  }
}
/* stylelint-disable */
.section.running-cost {
  p:nth-child(1) {
    color: var(--color-pink);
  }
  h2,
  h3 {
    font-weight: 700;
    font-size: var(--font-size-l-alt);
    line-height: 2.5rem;

    @media (width >= 1024px) {
      font-size: var(--font-size-lg);
      line-height: 3rem;
    }
  }
}
/* stylelint-enable */
.section.custom-hero {
  @media (width < 1024px) {
    > div > div {
      height: 350px;

      div {
        background-color: var(--bg-color-light-beige);

        > div:first-child > div > picture {
          inset: auto;
          z-index: 1;
          bottom: 0;
        }

        > div:nth-child(2) {
          height: 350px;

          > div {
            z-index: 1;
            position: relative;
          }
        }
      }
    }
  }
}

.section.download-section {
  max-width: var(--max-width-container);
  margin: 0 auto;
}

@media (width >= 1024px) {
  .section.campaign-form {
    width: 1024px;
    margin-top: -120px !important;
    border-radius: 5px;
  }
}
/* stylelint-disable */
.section.no-image-banner {
  padding: var(--spacing-xxl-l) var(--spacing-xs);
  text-align: center;
  background-color: var(--bg-button);

  .default-content-wrapper {
    max-width: var(--max-width-large);
    margin: 0 auto;

    * {
      color: var(--color-white);
      margin: 0;
    }

    h1 {
      font-size: var(--font-size-l-alt);
      font-weight: var(--font-weight-bold);
    }

    h6 {
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--spacing-xxs);
      margin-top: var(--spacing-xs-l-alt);
    }

    p {
      font-size: var(--font-size-xs);
    }
  }

  &.left {
    text-align: left;
  }

  &.right {
    text-align: right;
  }

  @media (width < 1024px) {
    padding: var(--spacing-l-l) var(--spacing-xs);

    h1 {
      font-size: var(--font-size-l-m-alt);
    }
  }
}

.section.quick-links-container {
  padding: 0;
  background: linear-gradient(90deg, var(--bg-button) -30.93%, var(--color-active-outline) 100%);
  background-color: var(--color-active-outline);

  .default-content-wrapper {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    max-width: 100%;
    padding: var(--spacing-l) 0;
    gap: var(--spacing-xs);

    > p {
      width: 190px;
      margin: 0;
      display: flex;
      padding: var(--spacing-s);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      align-self: stretch;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        width: 0;
        transition: 0.45s;
        border-radius: var(--spacing-s);
        height: 2px;
        background-color: var(--color-white);
      }

      &:hover::after {
        width: 85%;
      }

      &:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 10px;
        right: -9px;
        width: 2px;
        height: var(--spacing-xxl);
        background-color: rgba(255, 255, 255, 0.15);
        border-radius: var(--spacing-s);
      }

      br {
        display: none;
      }

      > a {
        display: block;
        margin: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        text-align: center;
        cursor: pointer;
        font-size: var(--font-size-s-alt);
        line-height: var(--line-height-s-m);
        color: var(--color-white);
        text-decoration: none;

        &:focus {
          outline: 0;
        }

        span,
        img {
          height: var(--spacing-l-m);
          width: auto;
        }

        &:last-child {
          padding-top: var(--spacing-xs);
        }
      }
    }

    @media (width < 1024px) {
      padding: 0 var(--spacing-xs-l-alt);
      gap: 0;

      > p {
        width: 160px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);

        > a {
          font-size: var(--font-size-m);
          line-height: var(--line-height);

          span,
          img {
            height: var(--spacing-m-l);
            width: auto;
          }

          &:last-child {
            padding-top: var(--spacing-xxs);
          }
        }
      }
    }

    @media (width <= 768px) {
      max-width: 375px;
      margin: 0 auto;
      justify-content: center;

      > p {
        width: 119px;

        &:nth-child(even)::before {
          display: none;
        }

        &:not(:last-child)::before {
          top: 50%;
          right: 0px;
          transform: translateY(-50%);
        }
      }
    }

    @media (width <= 375px) {
      padding: 0;

      > p {
        width: 90px;
      }
    }
  }
}

.disclosure-guides {
  h2 {
    font-size: 32px;
    line-height: 40px;
    padding-top: 32px;
  }

  h5 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  h6 {
    padding-left: 24px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 48px;
  }

  .icon-download {
    height: 16px;
    width: 16px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }

  h6::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--border-color-card);
    position: absolute;
    bottom: -24px;
    left: 0;
  }

  @media (width < 1024px) {
    h6 {
      text-align: left;
      flex-wrap: wrap;
      padding-right: 48px;
      width: 80%;
    }

    .icon.icon-download {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.imp-info p {
  color: var(--link-hover-color);
}

.hero p sup,
/* For two column disclaimer paragraphs */
.disclaimer .disclaimer p,
.disclaimer:not(.two-column-section) p,
.section.two-column-section sup {
  font-size: var(--font-size-xs-alt) !important;
  line-height: var(--line-height-s-alt);
  max-width: var(--max-width-container);
  color: var(--color-grey) !important;
  margin: auto;

  strong {
    color: var(--color-grey) !important;
  }
}

.hero p sup {
  max-width: unset;

  strong {
    color: var(--color-black);
  }
}

.subpage-wrapper {
  max-width: var(--max-width-medium-alt);
  margin: auto;
}

.section.faq-details {
  max-width: var(--max-width-medium-alt);
  margin: auto;
  position: relative;
  background-color: var(--color-medium-grey);
  border-radius: var(--spacing-xxxs);
  margin-top: 140px;
  color: #000;
  font-size: var(--font-size-xs);
  padding: var(--spacing-s);
  margin-bottom: var(--spacing-xxxs);
  box-sizing: border-box;

  p.button-container {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;

    a {
      display: inline-flex;
      font-size: var(--font-size-xs);
      text-decoration: underline;
      align-items: center;
      color: var(--bg-button);

      &:hover {
        color: var(--bg-button);
      }
    }
  }

  @media (width < 1024px) {
    margin: auto;
    margin-top: var(--spacing-xxl-l);

    p:not(.button-container) {
      font-size: var(--spacing-xs);
      line-height: var(--line-height-s-alt);
    }
  }
}

.section.faq-details.iframe-container {
  max-width: var(--max-width-container);

  h2,
  p {
    padding: 0px var(--spacing-l);
  }

  @media (width < 768px) {
    p {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  h2 {
    padding-top: var(--spacing-xl-l);
  }

  p:nth-child(1) {
    margin-top: unset;
    background-color: var(--color-white);
    margin: 0px var(--spacing-m-l-alt);
    padding: var(--spacing-l-l-alt);
    padding-top: unset;
    color: var(--color-grey);

    @media (width < 768px) {
      margin-left: 0;
      margin-right: 0;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 15px;
    }
  }

  p:nth-child(4) {
    padding-bottom: var(--spacing-xl-l);
  }
}
.section.faq-sub-details-section {
  max-width: var(--max-width-medium-alt);
  margin: auto;
  box-sizing: border-box;

  @media (width >= 860px) {
    padding: var(--spacing-l) 0 0;
  }

  @media (width < 860px) {
    padding: var(--spacing-s) var(--spacing-xs) 0;
  }

  &.small-font p {
    margin-top: 0;
    font-size: var(--font-size-xs-alt);

    @media (width > 860px) {
      margin-bottom: var(--spacing-s);
    }

    a {
      margin-bottom: var(--spacing-xl-l-alt);

      @media (width < 860px) {
        margin-bottom: var(--spacing-xl);
      }
    }
  }

  h2 {
    margin-top: 0;
  }

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

.section.request-callback.grey-bg,
.section.grey-bg {
  background-color: var(--color-medium-grey);
}

.section.no-padding {
  padding: 0;
}

.section.no-top-padding {
  padding-top: 0;
}

.section.no-bottom-padding {
  padding-bottom: 0;
}

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

.section.md-container {
  max-width: var(--max-width-container-medium);
  margin: auto;
}

.section.tablinks {
  .default-content-wrapper {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: normal;

    p {
      margin: 0;

      a,
      a:hover,
      a:active,
      a:focus {
        margin: 0;
        text-decoration: none;
        border-radius: 100px;
        border: 1px solid var(--border-color-card);
        padding: 7px var(--spacing-s);
        line-height: var(--line-height);
        font-size: var(--font-size-xs);
        color: var(--color-dark-grey);
      }

      a:hover {
        color: var(--color-white);
        background-color: var(--color-brand);
        border-color: var(--color-brand);
      }
    }
  }
}

.section.image-link-container:not(.nav-brand) {
  @media (width >= 1024px) {
    padding: var(--spacing-l-alt) var(--spacing-xxxl);
  }
}

.section.insurance {
  padding-top: var(--spacing-xxl);
  padding-bottom: unset;
}

@media (width <= 768px) {
  .section.insurance {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
}

.section.insurance .default-content-wrapper {
  max-width: 816px;
  text-align: left;
  margin: 0 auto;
}

.section.accordion-faq.faq.insurance.accordion-group-container {
  padding-top: unset;
  margin-bottom: unset;

  @media (width > 1024px) {
    padding-bottom: 0;
  }
}

[class='section car-brand-desc'] {
  text-align: center;

  .button-container {
    margin-top: var(--spacing-l);
  }

  .button-container a.button,
  .button-container a.button:hover {
    background: var(--bg-button);
    color: var(--color-white);
    display: block;
    width: fit-content;
    margin: 0 auto;
    line-height: var(--line-height);
    border-radius: 0.25rem;
    padding: var(--spacing-xxs) var(--spacing-s);
    text-decoration: none;
  }

  .button-container a.button:hover {
    background: var(--bg-button-hover);
  }
}

.car-brands-listing-wrapper .card-main-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--spacing-xs);

  .card-container {
    border: 1px solid var(--border-color-card);
    border-radius: var(--spacing-xxxs);
    padding: var(--spacing-s);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 80px;
      height: 80px;
      object-fit: cover;
    }

    p {
      flex: 1;
    }
  }

  @media (width <= 768px) {
    grid-template-columns: 1fr;
  }
}

main .section.child-component {
  margin-top: var(--spacing-xl);
  padding-top: 0;
  padding-bottom: 0;

  @media (width >=1024px) {
    margin-top: var(--spacing-xxl);
  }

  &.m-alt-container > .default-content-wrapper {
    max-width: var(--max-width-medium-alt);

    @media (width < 768px) {
      padding: 0 var(--spacing-xs);
    }
  }
}

.section.load-more {
  padding: 0;

  p,
  a.button {
    margin: 0;
  }
}

.two-column {
  main {
    @media (width > 1024px) {
      & {
        text-align: center;
      }
    }

    .section.two-column-section {
      padding: 0 var(--spacing-xs) 0;

      & > *:not(:first-child, :last-child),
      & .default-content-wrapper:not(:first-child) > * {
        margin-top: var(--spacing-xs-l-alt);
        margin-bottom: var(--spacing-xs-l-alt);

        & p {
          color: var(--color-dark-grey);
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-body-alt);
          line-height: var(--line-height);
        }

        & .disclaimer p {
          font-size: var(--font-size-xs-alt);
          line-height: var(--line-height-s-alt);
        }
      }

      h2 {
        color: var(--color-dark-grey);
        font-weight: var(--heading-font-weight);
        margin-top: 0;
      }

      & > *:first-child {
        margin-top: var(--spacing-l-alt);
      }

      & > *:not(:last-child) {
        .columns > div {
          display: block;
        }

        &.car-details-helpful-wrapper {
          margin-top: var(--spacing-m);
          margin-bottom: var(--spacing-m);
        }

        &.columns-wrapper + .default-content-wrapper {
          h1 {
            margin-bottom: var(--spacing-xxs);
          }

          p {
            strong {
              font-size: var(--font-size-s);
              line-height: var(--line-height-s);
              color: var(--color-black);
              display: block;
              margin-top: var(--spacing-negative-xxs);
            }
          }
        }

        &.default-content-wrapper:nth-child(5) {
          p:nth-child(2) {
            background-color: var(--color-medium-grey);
            padding: var(--spacing-s);
            border-radius: 8px;
          }
        }

        @media (width < 1024px) {
          margin-top: var(--spacing-m);
        }

        &.iframe-wrapper {
          padding: 0;
        }
      }

      @media (width < 1024px) {
        &.left-side {
          padding-top: 0;
        }
      }

      @media (width > 1024px) {
        text-align: left;
        display: inline-block;
        vertical-align: top;
        max-width: 826px;

        &.left-side {
          padding-left: 0;

          img {
            width: 100%;
          }
        }

        &.right-side {
          padding-right: 0;
          max-width: 374px;
        }
      }

      &.right-side {
        .default-content-wrapper {
          border-radius: 8px;
          border: 1px solid var(--border-color-card);
          border-bottom: 0;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          padding: var(--spacing-l) var(--spacing-l) 0;

          h2 {
            margin-top: 0;
          }
        }

        .form-wrapper {
          border-radius: 8px;
          border: 1px solid var(--border-color-card);
          border-top: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          padding: var(--spacing-s) var(--spacing-l) var(--spacing-l);
          margin-top: var(--spacing-negative-s);

          .field-wrapper:not(:first-child) {
            margin-top: var(--spacing-m);
          }

          button {
            margin: 0;
          }
        }

        &.fragment-container {
          .image-link-container {
            padding: 0;

            @media (width < 1024px) {
              text-align: center;
            }

            p {
              margin: 0;
            }
          }
        }
      }

      &.left-side {
        .columns-wrapper,
        .fragment-wrapper:not(:last-child),
        .fragment-wrapper + *,
        #related-articles {
          margin-bottom: var(--spacing-l-alt);
        }

        .columns-wrapper:first-child {
          & > div > div {
            display: flex;
            width: fit-content;
            gap: 0.5rem;
            margin-bottom: var(--spacing-m);
          }

          @media (width < 1040px) {
            margin: var(--spacing-s) 0;
          }
        }
      }

      #all-articles {
        padding: var(--spacing-s);
        margin-bottom: 0;
        background-color: var(--color-medium-grey);
        border-top-right-radius: var(--spacing-xs);
        border-top-left-radius: var(--spacing-xs);

        & + p,
        & + * + p {
          padding-left: var(--spacing-s);
          padding-right: var(--spacing-s);
          background-color: var(--color-medium-grey);
        }

        & + p {
          color: var(--color-dark-grey);
          margin: 0;
        }

        & + * + p {
          margin: 0;
          padding: var(--spacing-s);
          border-bottom-right-radius: var(--spacing-xs);
          border-bottom-left-radius: var(--spacing-xs);
          display: flex;
          justify-content: space-between;

          a {
            display: flex;
            justify-content: center;
            align-items: center;

            &[disabled] {
              opacity: 0.5;
              pointer-events: none;
            }

            &:first-child::before,
            &:last-child::after {
              content: url('../../icons/chevron-right.svg');
              margin-top: 5px;
              padding-left: var(--spacing-xxxs);
            }

            &:first-child::before {
              transform: rotate(180deg);
              margin: 0 0 5px;
            }
          }
        }
      }

      .columns-wrapper,
      .fragment-wrapper:not(:last-child),
      .fragment-wrapper + *,
      #related-articles {
        margin-top: var(--spacing-l-alt);
      }

      .cards > ul {
        grid-template-columns: repeat(2, 1fr);

        @media (width < 786px) {
          grid-template-columns: repeat(1, 1fr);
        }

        & > li {
          &.no-data {
            grid-column: 1 / 3;
          }

          img {
            border-radius: 0;
          }
        }
      }
    }

    & > .section.active-filter-container {
      border-bottom: 1px solid var(--border-color);
      text-align: left;

      &.marketplace-search {
        @media (width > 1024px) {
          padding-left: 0;
          padding-right: 0;

          .dropdown-filter {
            max-width: var(--max-width-container);
            margin: auto;
          }

          & > div,
          .active-filter-wrapper {
            max-width: 100%;
          }
        }

        .divider {
          margin-top: var(--spacing-l);
          border-top: 1px solid var(--border-color);

          @media (width < 1024px) {
            margin: var(--spacing-s) var(--spacing-negative-s) 0;
          }
        }
      }

      &:has(.filter-resultant) {
        border: 0;
      }

      @media (width < 1040px) {
        padding: var(--spacing-s);
      }
    }
  }
}

.section.three-col-text {
  @media (width >= 1024px) {
    .default-content-wrapper {
      max-width: var(--max-width-medium-alt);

      h3,
      h2 {
        font-size: var(--font-size-l-m-alt);
        line-height: var(--spacing-m-l);
      }

      p {
        margin: auto;
      }
    }
  }
}

.section.form-theme-dark-blue {
  .columns {
    & > div {
      align-items: flex-start;

      & > div > *:not(:first-child, :last-child) {
        margin-top: var(--spacing-xs-l-alt);
        margin-bottom: var(--spacing-xs-l-alt);
      }
    }

    div:nth-child(2) > p {
      color: var(--color-white);
      background-color: var(--color-darker-blue);
      border-top-right-radius: 0.5rem;
      border-top-left-radius: 0.5rem;
      text-align: center;
      padding: var(--spacing-l);
      padding-bottom: 0;
      font-size: var(--font-size-s);
      line-height: var(--line-height-m-l);
    }

    @media (width < 1024px) {
      & > div > div {
        margin-bottom: var(--spacing-xl);
      }
    }
  }

  .form-container {
    &.column-form {
      margin-top: 0 !important;

      & + p {
        display: none;
      }
    }

    .response-message {
      background-color: var(--color-darker-blue);
      display: block;
      padding: var(--spacing-l);
      border-radius: 0;
      border-bottom-right-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;

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

    form {
      background-color: var(--color-darker-blue);
      border-radius: 0;
      border-bottom-right-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      border: 0;

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

      p,
      a {
        color: var(--color-white);
      }

      a:hover {
        color: var(--link-hover-color);
      }
    }
  }
}

.apple-pay-template {
  .section.columns-container {
    & .columns-wrapper {
      position: relative;
      & .columns-2-cols > div {
        > div {
          h5 {
            color: var(--color-dark-grey);

            &::before {
              display: none;
            }
          }
        }
      }
    }
    &.txt-highlight {
      p img {
        max-width: fit-content;
      }
    }
  }

  .section.accordion-disclaimer {
    margin-bottom: var(--spacing-xxl-l-alt);

    @media (width < 1024px) {
      margin-top: var(--spacing-xl);
    }
  }
}

.section.popup-container {
  & .columns-wrapper {
    position: relative;

    p.button-container {
      position: absolute;
      top: calc(50% + -45px);
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      padding: 0;

      @media (width < 412px) {
        top: calc(50% + -65px);
      }

      a {
        all: unset;
        text-indent: -9999px;
        color: transparent;
        content: '';
        width: 80px;
        height: 80px;
        background-color: var(--color-white);
        background-image: url('../icons/play-button.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        cursor: pointer;
        border-radius: 50%;
        box-shadow:
          0 0 0 2px var(--color-white),
          0 0 0 4px var(--color-brand);
        margin: 0;
      }
    }
  }
}

.textlink {
  a:any-link {
    background-color: transparent !important;
    color: var(--color-black) !important;
    padding: 0 !important;
    outline: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: var(--font-size-xs) !important;
    font-family: var(--font-family-bold) !important;
    font-weight: var(--font-weight-bold) !important;
    text-decoration: none !important;
    white-space: normal !important;

    &:hover {
      color: var(--color-brand) !important;
    }
  }
}

.section.full-width {
  & > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.section.three-col-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: var(--font-size-xs);
  line-height: 1.5rem;

  .default-content-wrapper {
    padding: 0 var(--spacing-xs);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;

    @media (width < 768px) {
      gap: 0;
    }

    h3,
    h2 {
      text-align: center;
      font-size: var(--font-size-l-alt);
      line-height: 2.5rem;

      @media (width < 768px) {
        font-size: var(--font-size-l);
        margin: 0;
      }
    }
  }

  .columns {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 var(--spacing-xs);
  }

  .columns > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .columns > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    width: 100%;
    gap: 1rem;

    h3,
    h4 {
      font-size: var(--font-size-m);
      line-height: 2rem;
    }

    > p:first-child {
      height: 88px;
      width: 88px;
      display: flex;
      justify-content: center;
    }

    > p:last-child {
      margin-bottom: auto;
      font-size: var(--font-size-xs);
      line-height: var(--line-height);
      color: var(--color-dark-grey);
    }

    p.button-container {
      a {
        margin: 0;
        font-weight: 400;
        font-size: var(--font-size-xs);
        line-height: 20px;
        color: var(--color-black);
      }

      a::after {
        vertical-align: sub;
        content: url('../../icons/chevron-right.svg');
        width: 20px;
        height: 20px;
        margin-left: var(--spacing-xxxs);
      }
    }
  }

  @media (width >=1024px) {
    gap: 4rem;
    font-size: var(--font-size-s);
    line-height: 2rem;

    &.child-component {
      h2 {
        margin-top: 0;
      }
    }

    .columns-wrapper {
      .columns {
        gap: 2.5rem;

        &.columns-3-cols {
          gap: 1rem;
        }

        > div {
          flex-direction: row;
          align-items: stretch;
          gap: 2.5rem;
          justify-content: center;

          > div {
            h3,
            h4 {
              font-size: var(--font-size-m-alt);
              line-height: var(--line-height-s-m);
            }

            p.button-container {
              a {
                font-size: var(--font-size-s);
                line-height: 1.5rem;
              }
            }
          }
        }

        &.columns-3-cols div {
          gap: 1rem;
        }
      }
    }
  }
}