@font-face {
  font-family: "Nissan";
  src: url(./fonts/Nissan_light.woff) format("woff");
  font-display: block;
  font-weight: 100 400;
}

@font-face {
  font-family: "Nissan";
  src: url(./fonts/Nissan_bold.woff) format("woff");
  font-display: block;
  font-weight: 700;
}

@font-face {
  font-family: "Nissan-Header";
  src: url(./fonts/Nissan_regular.woff) format("woff");
  font-weight: 100 400;
  font-display: block;
}

@font-face {
  font-family: "Nissan-Header";
  src: url(./fonts/Nissan_bold.woff) format("woff");
  font-weight: 700;
  font-display: block;
}

:root {
  /*** Fonts ***/
  --system-typography-font-family: "Nissan";
  --hl-font-family: "Nissan";
  --button-font-family: "Nissan-Header";

  font-family: var(--system-typography-font-family);

  /*** COLOR CARD ***/
  --cc-background-color: #ffffff;
  --cc-background-tint1-color: #f5f4f3;
  --cc-background-tint2-color: #e5e6e6;
  --cc-background-tint3-color: #cccccc;
  --cc-placeholder-color: #8a8a8a;
  --cc-text-color: #333333;
  --cc-text-tint1-color: #020a0d;
  --cc-primary-color: #c3002f;
  --cc-hover-color: #5c5c5c;

  --cc-success-color: #508f40;
  --cc-success-background-color: #e3ede0;
  --cc-info-color: #1e60ba;
  --cc-info-background-color: #dbe5f4;
  --cc-warning-color: #ffce00;
  --cc-warning-background-color: #fff7d6;
  --cc-error-color: #ec3640;
  --cc-error-background-color: #fcdfe0;

  /*** THEME ***/
  --theme-html-background: var(--cc-background-color);
  --theme-page-background-color: var(--cc-background-color);

  /*** CONTROLS ***/

  /* Button */
  --button-ext-filled-border-radius: 24px;
  --button-ext-filled-border: 1px solid var(--cc-text-tint1-color);
  --button-ext-filled-border-hover: 1px solid var(--cc-hover-color);
  --button-ext-filled-border-active: 1px solid var(--cc-placeholder-color);
  --button-ext-filled-color: var(--cc-background-tint1-color);
  --button-ext-filled-color-hover: var(--cc-background-tint1-color);
  --button-ext-filled-color-active: var(--cc-background-tint1-color);
  --button-ext-filled-background-color: var(--cc-text-tint1-color);
  --button-ext-filled-background-color-hover: var(--cc-hover-color);
  --button-ext-filled-background-color-active: var(--cc-placeholder-color);
  --button-ext-filled-loading-color: var(--cc-primary-color);
  --button-ext-filled-font-weight: 400;

  --button-ext-filled-inverted-border: 1px solid var(--cc-background-color);
  --button-ext-filled-inverted-border-hover: 1px solid var(--cc-hover-color);
  --button-ext-filled-inverted-border-active: 1px solid var(--cc-placeholder-color);
  --button-ext-filled-inverted-color: var(--cc-text-tint1-color);
  --button-ext-filled-inverted-color-hover: var(--cc-background-tint1-color);
  --button-ext-filled-inverted-color-active: var(--cc-background-tint1-color);
  --button-ext-filled-inverted-background-color: var(--cc-background-color);
  --button-ext-filled-inverted-background-color-hover: var(--cc-hover-color);
  --button-ext-filled-inverted-background-color-active: var(--cc-placeholder-color);
  --button-ext-filled-inverted-loading-color: var(--cc-primary-color);

  --button-ext-outlined-border-radius: 24px;
  --button-ext-outlined-border: 1px solid var(--cc-text-color);
  --button-ext-outlined-border-hover: 1px solid var(--cc-text-color);
  --button-ext-outlined-border-active: 1px solid var(--cc-placeholder-color);
  --button-ext-outlined-color: var(--cc-text-color);
  --button-ext-outlined-color-hover: var(--cc-background-color);
  --button-ext-outlined-color-active: var(--cc-background-color);
  --button-ext-outlined-background-color: var(--cc-background-color);
  --button-ext-outlined-background-color-hover: var(--cc-hover-color);
  --button-ext-outlined-background-color-active: var(--cc-placeholder-color);
  --button-ext-outlined-loading-color: var(--cc-primary-color);
  --button-ext-outlined-font-weight: 400;

  --button-ext-outlined-inverted-border: 1px solid var(--cc-background-color);
  --button-ext-outlined-inverted-border-hover: 1px solid var(--cc-background-color);
  --button-ext-outlined-inverted-border-active: 1px solid var(--cc-placeholder-color);
  --button-ext-outlined-inverted-color: var(--cc-background-color);
  --button-ext-outlined-inverted-color-hover: var(--cc-background-color);
  --button-ext-outlined-inverted-color-active: var(--cc-background-color);
  --button-ext-outlined-inverted-background-color: var(--cc-primary-color);
  --button-ext-outlined-inverted-background-color-hover: var(--cc-hover-color);
  --button-ext-outlined-inverted-background-color-active: var(--cc-placeholder-color);
  --button-ext-outlined-inverted-loading-color: var(--cc-info-background-color);

  --button-ext-tonal-border-radius: 24px;
  --button-ext-tonal-border: none;
  --button-ext-tonal-border-hover: none;
  --button-ext-tonal-border-active: none;
  --button-ext-tonal-color: var(--cc-text-color);
  --button-ext-tonal-color-hover: var(--cc-background-color);
  --button-ext-tonal-color-active: var(--cc-background-color);
  --button-ext-tonal-background-color: var(--cc-background-tint2-color);
  --button-ext-tonal-background-color-hover: var(--cc-hover-color);
  --button-ext-tonal-background-color-active: var(--cc-placeholder-color);
  --button-ext-tonal-loading-color: var(--cc-primary-color);
  --button-ext-tonal-font-weight: 400;

  /* Checkbox */
  --checkbox-background-color: var(--cc-background-tint2-color);
  --checkbox-background-color-checked: var(--cc-text-tint1-color);
  --checkbox-background-color-hover: var(--cc-background-tint1-color);
  --checkbox-checkmark-color: var(--cc-primary-color);
  --checkbox-border: 1px solid var(--cc-text-color);
  --checkbox-border-radius: 0px 4px 0 4px;

  /* Divider */
  --divider-color: var(--cc-background-tint2-color);

  /* IconExt */
  --icon-ext-expand-transform: rotate(180deg);

  /* LinkExt */
  --link-ext-link-color: var(--cc-text-tint1-color);
  --link-ext-link-color-hover: var(--cc-hover-color);
  --link-ext-link-with-arrow-color: var(--cc-text-tint1-color);
  --link-ext-link-with-icon-color: var(--cc-text-tint1-color);

  /* Loader */
  --loader-embedded-background-color: var(--cc-primary-color);

  /* Field Input */
  --field-input-placeholder-color: var(--cc-placeholder-color);
  --field-input-background-color: var(--cc-background-color);
  --field-input-outline-focus: 1px solid var(--cc-text-tint1-color);
  --field-input-border-top: 1px solid var(--cc-text-color);
  --field-input-border-left: 1px solid var(--cc-text-color);
  --field-input-border-right: 1px solid var(--cc-text-color);
  --field-input-border-bottom: 1px solid var(--cc-text-color);
  --field-input-border-radius: 4px;
  --field-input-border-color-focus: var(--cc-text-color);
  --field-input-border-color-active: var(--cc-text-color);
  --field-input-label-color-focus: var(--cc-primary-color);
  --field-input-error-color: var(--cc-error-color);

  /* Field Select */
  --field-select-option-color: var(--cc-primary-color);
  --field-select-option-background-color: var(--cc-background-tint2-color);
  --field-select-dropdown-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Edown-arrow%3C/title%3E%3Cg fill='%23000000'%3E%3Cpath d='M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

  /* Modal */
  --modal-border-radius: 4px 4px 0 0;

  --modal-header-color: var(--cc-text-color);
  --modal-header-background-color: var(--cc-background-tint1-color);
  --modal-header-border: 1px solid var(--cc-background-tint1-color);
  --modal-color: var(--cc-text-color);
  --modal-background-color: var(--cc-background-tint2-color);

  --modal-header-error-color: var(--cc-text-color);
  --modal-header-error-background-color: var(--cc-error-background-color);
  --modal-header-error-border: 1px solid var(--cc-error-color);
  --modal-error-color: var(--cc-text-color);
  --modal-error-background-color: var(--cc-background-tint2-color);

  --modal-header-warning-color: var(--cc-text-color);
  --modal-header-warning-background-color: var(--cc-warning-background-color);
  --modal-header-warning-border: 1px solid var(--cc-warning-color);
  --modal-warning-color: var(--cc-text-color);
  --modal-warning-background-color: var(--cc-background-tint2-color);

  --modal-header-info-color: var(--cc-text-color);
  --modal-header-info-background-color: var(--cc-info-background-color);
  --modal-header-info-border: 1px solid var(--cc-info-color);
  --modal-info-color: var(--cc-text-color);
  --modal-info-background-color: var(--cc-background-tint2-color);

  --modal-header-success-color: var(--cc-text-color);
  --modal-header-success-background-color: var(--cc-success-background-color);
  --modal-header-success-border: 1px solid var(--cc-success-color);
  --modal-success-color: var(--cc-text-color);
  --modal-success-background-color: var(--cc-background-tint2-color);

  /* Popover */
  --tooltip-background-color: var(--cc-text-tint1-color);

  /* Swipable Slides */
  --swipable-slides-navigation-icon-background-color: var(--cc-primary-color);
  --swipable-slides-navigation-icon-background-color-hover: var(--cc-background-tint1-color);

  /* Tabs */
  --tab-header-color: var(--cc-text-color);
  --tab-header-color-active: var(--cc-text-color);
  --tab-header-background-color: var(--cc-background-tint2-color);
  --tab-header-background-color-active: var(--cc-background-tint1-color);
  --tab-header-expand-icon-transform: rotate(-180deg);
  --tab-header-border-radius: 0;
  --tab-content-color: var(--cc-text-color);
  --tab-content-background-color: var(--cc-background-tint1-color);

  /*** BLOCKS ***/

  /* Accordion */
  --accordion-block-border: 1px solid var(--cc-background-tint2-color);
  --accordion-block-expand-icon-transform: rotate(-45deg);
  --accordion-block-border-radius: 0px;
  --accordion-block-gap: 0;
  --accordion-block-header-background-color: var(--cc-background-tint1-color);
  --accordion-block-open-header-background-color: var(--cc-background-color);
  --accordion-block-open-content-background-color: var(--cc-background-color);

  /* Article Teaser Block */
  --article-teaser-block-background-color: var(--cc-background-color);
  --article-teaser-block-border: 1px solid var(--cc-background-tint1-color);
  --article-teaser-block-border-radius: 0;

  /* Banner top */
  --banner-top-background-color: var(--cc-text-color);
  --banner-top-text-color: var(--cc-background-color);

  /* BreadCrumbs */
  --breadcrumbs-background-color: var(--cc-background-tint1-color);
  --breadcrumbs-link-separator-color: var(--cc-primary-color);

  /* Card Information Block */
  --card-information-block-header-color: var(--cc-background-color);
  --card-information-block-header-background-color: var(--cc-text-color);
  --card-information-block-content-color: var(--cc-background-color);
  --card-information-block-content-background-color: var(--cc-text-color);
  --card-information-block-border: 1px solid var(--cc-text-color);
  --card-information-block-border-radius: 0;

  /* Fact And Icon Block */
  --fact-and-icon-block-background-color: var(--cc-background-color);
  --fact-and-icon-block-icon-background-color: var(--cc-background-color);
  --fact-and-icon-border: 1px solid var(--cc-background-tint2-color);
  --fact-and-icon-block-border-radius: 0;

  /* Footer */
  --footer-background-color: var(--cc-text-tint1-color);
  --footer-color: var(--cc-background-color);
  --footer-link-color-hover: var(--cc-hover-color);
  --footer-divider-color: var(--cc-hover-color);
  --footer-links-block-divider-color: var(--cc-hover-color);

  /* GDPR Link Area */
  --gdpr-link-decoration: underline;

  /* Header */
  --header-color: var(--cc-text-color);
  --header-background-color: var(--cc-background-color);
  --header-navigation-color-active: var(--cc-text-color);
  --header-login-background: var(--cc-background-color);
  --header-login-background-hover: var(--cc-hover-color);
  --header-bottom-border: 1px solid var(--cc-background-tint2-color);
  --header-sitelinks-color: var(--cc-primary-color);
  --header-sitelinks-color-active: var(--cc-primary-color);

  /* Hero block */
  --hero-headline-wrap-background-color: var(--cc-text-color);
  --hero-headline-wrap-color: var(--cc-background-color);
  --hero-headline-li-icon: url("data:image/svg+xml;utf8,%0A%20%20%20%20%20%20%3Csvg%20%0A%20%20%20%20%20%20%20%20width%3D%2224%22%20%0A%20%20%20%20%20%20%20%20height%3D%2224%22%20%0A%20%20%20%20%20%20%20%20viewBox%3D%220%200%2024%2024%22%20%0A%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%3Cpath%20%0A%20%20%20%20%20%20%20%20fill-rule%3D%22evenodd%22%20%0A%20%20%20%20%20%20%20%20clip-rule%3D%22evenodd%22%20%0A%20%20%20%20%20%20%20%20d%3D%22M2%2012C2%2013.9778%202.58649%2015.9112%203.6853%2017.5557C4.78411%2019.2002%206.3459%2020.4819%208.17316%2021.2388C10.0004%2021.9957%2012.0111%2022.1937%2013.9509%2021.8079C15.8907%2021.422%2017.6725%2020.4696%2019.0711%2019.0711C20.4696%2017.6725%2021.422%2015.8907%2021.8078%2013.9509C22.1937%2012.0111%2021.9957%2010.0004%2021.2388%208.17317C20.4819%206.3459%2019.2002%204.78412%2017.5557%203.6853C15.9112%202.58649%2013.9778%202%2012%202C9.34783%202%206.80429%203.05357%204.92893%204.92893C3.05356%206.8043%202%209.34784%202%2012Z%22%20%0A%20%20%20%20%20%20%20%20stroke%3D%22%23F8F8F8%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20%0A%20%20%20%20%20%20%20%20d%3D%22M10.4096%2016.3374L6.72289%2012.7952L6%2013.5904L9.54217%2017.0602C9.75904%2017.3494%2010.0482%2017.494%2010.4096%2017.494C10.7711%2017.494%2011.1325%2017.2771%2011.3494%2016.988L18%206.57831L17.0602%206L10.4096%2016.3374Z%22%20%0A%20%20%20%20%20%20%20%20fill%3D%22%23F8F8F8%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E")
    no-repeat 0 2px;

  /* Large USP Teaser Block */
  --large-usp-teaser-block-background: var(--cc-background-color);
  --large-usp-teaser-block-image-border-radius: 0;

  /* Navigation */
  --navigation-popup-background-color: var(--cc-background-color);
  --navigation-popup-color: var(--cc-text-tint1-color);
  --navigation-block-mobile-item-border-bottom: 1px solid var(--cc-background-tint2-color);

  /* Search */
  --search-page-prompt-background: var(--cc-background-tint2-color);

  /* Small Teaser Article Container Block */
  --small-teaser-article-container-block-band-color: var(--cc-background-tint2-color);

  /* Teaser-full-page-block */
  --teaser-full-page-block-content-wrap-background-color: var(--cc-background-color);
  --teaser-full-page-block-content-wrap-header-font-weight: 700;
  --teaser-full-page-block-content-wrap-link-font-weight: 700;
  --teaser-full-page-block-border: 1px solid var(--cc-background-tint1-color);
  --teaser-full-page-block-image-border-radius: 0;

  /* Text block */
  --text-block-border: 1px solid var(--cc-text-tint1-color);
  --text-block-border-radius: 0px;
  --text-block-image-border-radius: 0;
  --text-block-error-color: var(--cc-text-color);
  --text-block-error-background-color: var(--cc-error-background-color);
  --text-block-warning-color: var(--cc-text-color);
  --text-block-warning-background-color: var(--cc-warning-background-color);
  --text-block-info-color: var(--cc-text-color);
  --text-block-info-background-color: var(--cc-info-background-color);
  --text-block-success-color: var(--cc-text-color);
  --text-block-success-background-color: var(--cc-success-background-color);
  --text-block-variation1-color: var(--cc-background-color);
  --text-block-variation1-background-color: var(--cc-tertiary-color);
  --text-block-variation2-color: var(--cc-background-color);
  --text-block-variation2-background-color: var(--cc-text-tint1-color);
  --text-block-table-headline-background-color: var(--cc-background-color);
  --text-block-table-body-background-color: var(--cc-background-color);
  --text-block-table-odd-colored-background-color: var(--cc-background-color);
  --text-block-li-icon: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10.3245%2015.1123L10.3333%2015.1211L10.3422%2015.1123L16.6065%208.84792C16.701%208.7535%2016.7938%208.7079%2016.8851%208.7079C16.9764%208.7079%2017.0692%208.7535%2017.1636%208.84792C17.2575%208.94188%2017.2984%209.03899%2017.2893%209.13967C17.28%209.24205%2017.2382%209.33034%2017.1636%209.40495L10.9279%2015.6406C10.7577%2015.8108%2010.5597%2015.8955%2010.3333%2015.8955C10.107%2015.8955%209.90895%2015.8108%209.73872%2015.6406L6.77895%2012.6808C6.68453%2012.5864%206.63894%2012.4936%206.63894%2012.4023C6.63894%2012.311%206.68453%2012.2182%206.77895%2012.1238C6.87291%2012.0298%206.97003%2011.9889%207.07071%2011.9981C7.17308%2012.0074%207.26137%2012.0492%207.33599%2012.1238L10.3245%2015.1123ZM12.005%2021.9875C10.624%2021.9875%209.32556%2021.7255%208.1096%2021.2014C6.89339%2020.6773%205.83557%2019.966%204.93605%2019.0676C4.03654%2018.1692%203.32438%2017.1128%202.79958%2015.8981C2.27488%2014.6837%202.0125%2013.386%202.0125%2012.005C2.0125%2010.624%202.27455%209.32556%202.79858%208.1096C3.32273%206.89339%204.034%205.83558%204.93238%204.93607C5.83078%204.03655%206.88725%203.32438%208.10191%202.79958C9.31633%202.27488%2010.614%202.0125%2011.995%202.0125C13.376%202.0125%2014.6744%202.27455%2015.8904%202.79858C17.1066%203.32273%2018.1644%204.034%2019.0639%204.93238C19.9635%205.83078%2020.6756%206.88725%2021.2004%208.10191C21.7251%209.31633%2021.9875%2010.614%2021.9875%2011.995C21.9875%2013.376%2021.7255%2014.6744%2021.2014%2015.8904C20.6773%2017.1066%2019.966%2018.1644%2019.0676%2019.064C18.1692%2019.9635%2017.1128%2020.6756%2015.8981%2021.2004C14.6837%2021.7251%2013.386%2021.9875%2012.005%2021.9875ZM12%2021.2079C14.5703%2021.2079%2016.7478%2020.3158%2018.5318%2018.5318C20.3158%2016.7478%2021.2079%2014.5703%2021.2079%2012C21.2079%209.4297%2020.3158%207.25218%2018.5318%205.46817C16.7478%203.68417%2014.5703%202.7921%2012%202.7921C9.4297%202.7921%207.25218%203.68417%205.46817%205.46817C3.68417%207.25218%202.7921%209.4297%202.7921%2012C2.7921%2014.5703%203.68417%2016.7478%205.46817%2018.5318C7.25218%2020.3158%209.4297%2021.2079%2012%2021.2079Z%22%20fill%3D%22%23C3002F%22%20stroke%3D%22%23C3002F%22%20stroke-width%3D%220.025%22%2F%3E%0A%3C%2Fsvg%3E")
    no-repeat 0 2px;

  /* USP Container */
  --usp-container-block-background: var(--cc-text-color);
  --usp-block-title-color: var(--cc-background-color);
  --usp-block-text-color: var(--cc-background-color);

  /* Webshop Entry Block */
  --webshop-entry-block-background: var(--cc-background-color);
  --webshop-entry-block-header-color: var(--cc-text-tint1-color);
  --webshop-entry-block-inverted-background: var(--cc-background-tint3-color);
  --webshop-entry-block-inverted-color: var(--cc-text-tint1-color);
}

/* Custom styling */
.hl {
  color: var(--cc-text-tint1-color);
}

.hero .hl,
.card-information-block .hl,
.footer .hl {
  color: inherit;
}

.link-ext.linkWithIcon {
  font-weight: 700;
  text-decoration: underline !important;
}

.usp-container-block > .usp-block {
  .hl.h3 {
    font-size: 18px;
  }

  .text {
    font-size: 16px;
  }
}

.article-teaser-block .link-ext,
.card-information-block .link-ext {
  font-weight: 700;
}

.teaser-full-page-block .text {
  font-weight: 100;
}

.contact-us-info-block a {
  color: var(--cc-primary-color) !important;
}

.header :is(.navigation-items button, .login-and-search-block .button-ext, .login-and-search-block .link-ext) {
  text-transform: uppercase;
  text-underline-offset: 8px;

  &:hover {
    text-decoration: underline;
  }
}

.footer .link-ext {
  text-decoration: none;
  font-weight: 700;
  color: var(--cc-background-tint2-color) !important;

  &:hover {
    text-decoration: none !important;
  }
}