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

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 100.06%;
  ascent-override: 95%;
  src: local('Arial');
}

*,
:after,
:before {
  border: 0 solid #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: Roboto, 'roboto-fallback', sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
}

body {
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: inherit;
}
body:not(.appear):has([class]) div[class] {
  display: none;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
pre,
samp {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

[type='button'],
[type='reset'],
[type='submit'],
button {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
}

fieldset,
legend {
  padding: 0;
}

menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

[role='button'],
button {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}
:root {
  font-size: 62.5%;
}

html {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

*:focus {
  border: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  outline: none;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
    Hides Sitecore editor markup,
    if you run the app in connected mode while the Sitecore cookies
    are set to edit mode.
  */
.scChromeData,
.scpm {
  display: none !important;
}

/*
    Styles for default JSS error components
  */
.sc-jss-editing-error,
.sc-jss-placeholder-error {
  padding: 1em;
  background-color: lightyellow;
}

/* 
    Style for default content block
  */
.contentTitle {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

a {
  text-decoration: none;
}

.container {
  display: grid;
}

.hidden {
  display: none;
}

:root {
  /* colors */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #000000;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;

  --primary-black: #000;
  --primary-white: #fff;
  --primary-white100: #feffff;
  --primary-white200: #f2f2f2;
  --primary-gradientBlue300: #d2e3fc;
  --primary-gradientBlue: #d0e2fc;
  --primary-gradientBlue100: #cde4fc;
  --primary-gradientBlue200: #cee4fc;
  --primary-gradientBlue400: #edf4ff;
  --primary-gradientYellow: #f1fce7;
  --primary-gradientYellow100: #ddf5ca;
  --primary-gradientYellow200: #e8f8dc;

  --secondary-red: #da251d;
  --secondary-red-alt: #e60000;
  --secondary-coral: #feefef;
  --secondary-lightGrey: #d9d9d9;
  --secondary-lightGreyTwo: #7d7d7d;
  --secondary-darkGrey: #494949;
  --secondary-grey50: #b6b6b6;
  --secondary-grey100: #727272;
  --secondary-grey200: #e7e7e7;
  --secondary-grey300: #d9d9d9;
  --secondary-grey400: #7d7d7d;
  --secondary-grey500: #616161;
  --secondary-grey600: #868686;
  --secondary-grey800: #eaeaea;
  --secondary-grey700: #666;
  --secondary-grey900: #707070;
  --secondary-grey1000: #6d6e71;
  --secondary-grey1100: #b1b1b1;
  --secondary-grey1200: #979797;
  --secondary-grey1300: #cccccc;
  --secondary-grey1400: #eff1f2;
  --secondary-grey1500: #c5c7c7;
  --secondary-grey1600: #e0e0e0;
  --secondary-grey1700: #efefef;
  --secondary-grey1800: #dddddd;
  --secondary-black900: #272727;
  --secondary-redText: #ed1c24;
  --secondary-black1000: #0c0c0c;
  --secondary-green: #4cb848;
  --secondary-green100: #389645;
  --secondary-green200: #eafbe0;
  --secondary-black-50: #333;
  --secondary-grey-1300: #9d9fa2;
  --secondary-grey-1400: #6c6c6c;
  --secondary-gradientBlue-100: #e1effd;
  --secondary-gradientBlue-200: #eaf3fe;
  --secondary-blue-100: #1d9bf0;
  --secondary-disabled: #e6e7e8;

  /* fonts */
  --body-font-family: Roboto, 'roboto-fallback', sans-serif;
  --heading-font-family: Roboto, 'roboto-fallback', sans-serif;

  --body-font-size-xxxl: 5rem;
  --body-font-size-xxl: 4rem;
  --body-font-size-xl: 3rem;
  --body-font-size-x: 2.2rem;
  --body-font-size-m: 2rem;
  --body-font-size-s: 1.8rem;
  --body-font-size-xs: 1.6rem;
  --body-font-size-xxs: 1.4rem;
  --body-font-size-xxxs: 1.2rem;
  --body-font-size-xxxxs: 1rem;

  /* body weight */
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-550: 550;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* nav height */
  --nav-height: 56px;
}

@media (width >= 900px) {
  :root {
    /* heading sizes */
    --heading-font-size-xxl: 45px;
    --heading-font-size-xl: 36px;
    --heading-font-size-l: 28px;
    --heading-font-size-m: 22px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
  }
}

@media (width >= 1024px) {
  :root {
    /* nav height */
    --nav-height: 92px;
  }
}

.cursor-pointer {
  cursor: pointer;
}
.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}
header .header,
footer .footer {
  visibility: hidden;
}

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

h1 {
  font-size: var(--heading-font-size-xxl);
}
h2 {
  font-size: var(--heading-font-size-xl);
}
h3 {
  font-size: var(--heading-font-size-l);
}
h4 {
  font-size: var(--heading-font-size-m);
}
h5 {
  font-size: var(--heading-font-size-s);
}
h6 {
  font-size: var(--heading-font-size-xs);
}

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

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
}

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

a.button.secondary,
button.secondary {
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color);
}

main img {
  max-width: 100%;
}

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

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

/* sections */
main > .section {
}

main > .section > div {
  margin: auto;
}

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

@media (width >= 900px) {
  main > .section > div {
  }
}

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

/* From GlobalStyles.ts */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', 'roboto-fallback', sans-serif;
  font-size: 1rem;
  font-weight: 400;

  .Toastify__toast {
    padding: 1.6rem 2.2rem 1rem 2.2rem;
  }
  .Toastify__toast::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1rem;
    background: var(--secondary-red);
  }
  .Toastify__toast-body {
    align-items: flex-start;
  }
  .Toastify__toast {
    border-radius: 1rem;
  }

  .modal {
    position: fixed;
    inset: 50%;
    border: 0.1rem solid rgb(204, 204, 204);
    background: rgb(255, 255, 255);
    overflow: visible;
    border-radius: 0.9rem;
    outline: none;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    height: fit-content;
    width: fit-content;
    padding: 0;

    &.enquiry-form-modal {
      width: calc(100vw - 4rem);
      height: calc(100vh - 4rem);
    }

    @media (min-width: 1024px) {
      &.enquiry-form-modal {
        width: fit-content;
        height: fit-content;
      }
      &.brand-application-modal {
        padding: 5rem;
        padding-bottom: 3.5rem;
      }
    }
  }
  .overlay {
    position: fixed;
    inset: 0rem;
    background: rgba(0, 0, 0, 0.76);
    z-index: 8500;
  }
  a[target='_blank']:after {
    content: '';
  }
  a:hover {
    text-decoration: none;
  }
}

h2 {
  font-size: 2rem;
  font-weight: 700;
}

header {
  height: var(--nav-height);
  transition: transform 0.5s ease;
  background: var(--primary-white);
  .logo-img-link {
    justify-content: left;
  }
}

footer {
  background: var(--secondary-black1000);
  color: var(--primary-white);
  .outer-grid {
    border-bottom: 0.1rem solid var(--secondary-darkGrey);
    & + .outer-grid {
      border-bottom: none;
    }
  }

  .inner-grid {
    background: var(--primary-white);
    .logo-footer {
      padding: 0.8rem 2.3rem;
    }
    .social-icon-footer {
      padding: 0.8rem 2.3rem 1.6rem 2.3rem;
    }
  }

  div[class^='SocialIcons'] {
    svg {
      path {
        fill: var(--primary-black) !important;
      }
    }
  }

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

    .outer-grid {
      border-bottom: 0.1rem solid var(--secondary-darkGrey);
      padding: 0 0 0 3.5rem;
      & + .outer-grid {
        border-bottom: 0.1rem solid var(--secondary-darkGrey);
      }
    }

    .inner-grid {
      padding: 0;
      margin: 0;
      background: transparent;
      .logo-footer {
        padding: unset;
      }
      .social-icon-footer {
        padding: unset;
      }
    }

    div[class^='SocialIcons'] {
      svg {
        path {
          fill: var(--primary-white) !important;
        }
      }
    }
    .logo-img-link {
      margin-left: -2rem;
    }
  }
}

@media (min-width: 1024px) {
  .mw-msil {
    max-width: 192rem;
    margin: 0 auto;
  }
}

.modal[open] {
  .children-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .close-icon-wrapper {
    background-color: unset;
    position: absolute;
    cursor: pointer;
    right: 0rem;
    top: 0.5rem;
    padding: 0;
    margin: 0;
    @media (min-width: 1024px) {
      right: 0;
      top: 0;

      .brand-application-modal & {
        right: 0.5rem;
        top: 0.5rem;
        transform: translate(100%, -100%);
      }
    }
    z-index: 10;

    .icon-close {
      background-image: url(/icons/close.svg);
      height: 53px;
      width: 53px;
      display: inline-block;
    }
  }
  &::backdrop {
    background: rgba(0, 0, 0, 0.76);
  }
}

.visible {
  display: block !important;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}