:root {
  --button-border-radius: 8px;
  --button-color-background-hover: #fff8da;
  --button-color-background: var(--color-grey-200);
  --button-color-text: var(--color-primary-01);
  --color-black: #4a4a4a;
  --color-complementary-02: #10284a;
  --color-grey-000: #fff;
  --color-primary-01: #121212;
  --color-primary-02: #ffe242;
  --color-primary-04: #fee6ea;
  --color-primary-05: #fff0a1;
  --font-family-heading: "Prelo Slab";
  --font-family-label: "prelo_slab_semiboldsemibold", sans-serif;
  --font-family-paragraph: "Prelo Slab", sans-serif;
  --hover: var(--color-primary-04);
  --show-logo-in-popup: none;
  --spacer-02: 8px;
  --spacer-03: 12px;
  --spacer-04: 16px;
  --spacer-06: 24px;
  --typography-heading-03: bold 40px/48px var(--font-family-heading);
  --typography-label-l: bold 16px/24px var(--font-family-label);
  --typography-label-m: 16px/24px var(--font-family-label);
  --typography-paragraph-m: 16px/24px var(--font-family-paragraph);

  /*
  --button-border
  --button-fill
  --button-font
  --button-padding
  --font-content-paragraph
  */

  /* Cookiebot Banner */
  --cookie-banner-background: var(--color-grey-000);
  --cookie-banner-case-title: uppercase;
  --cookie-banner-link-color: var(--color-black);
  --cookie-banner-logo-aspect-ratio: 440/327;
  --cookie-banner-logo-width: 200;
  --cookie-banner-logo: url('./images/logo_pichincha_cookies.png') no-repeat;
  --cookie-banner-popup-background: rgba(255, 255, 255, 1);
  --cookie-banner-text-color: var(--color-black);
  --cookie-banner-title-color: var(--color-complementary-02);
  --cookie-banner-typography-text: 18px/30px var(--font-family-heading);
  --cookie-banner-typography-title: 20px/24px var(--font-family-heading), sans-serif;
  --cookie-banner-container: 1320px;
  --cookie-banner-height: 50%;
  --cookie-banner-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.2);
  --cookie-banner-tabs-color: var(--color-primary-02);

  /* Cookiebot Banner Button Main */
  --cookie-banner-button-background: var(--color-primary-02);
  --cookie-banner-button-border-radius: var(--button-border-radius);
  --cookie-banner-button-border: 1px solid var(--color-primary-02);
  --cookie-banner-button-case: initial;
  --cookie-banner-button-padding: var(--spacer-03) var(--spacer-04);
  --cookie-banner-button-reject: var(--color-primary-05);
  --cookie-banner-button-text-color: var(--color-black);
  --cookie-banner-button-text: var(--typography-label-m);

  /* Cookiebot Banner Button Customize Level */
  --cookie-banner-button-body-background: transparent;
  --cookie-banner-button-body-border-radius: 0;
  --cookie-banner-button-body-border: 0;
  --cookie-banner-button-body-padding: 12px 0;
  --cookie-banner-button-body-text-color: var(--color-black);
  --cookie-banner-button-body-text: 500 18px/36px var(--font-family-label), sans-serif;

  /* Cookiebot Popup */
  --cookie-popup-button-background: var(--color-complementary-02);
  --cookie-popup-button-body-background: transparent;
  --cookie-popup-button-body-border-radius: 28px;
  --cookie-popup-button-body-padding: 8px 24px;
  --cookie-popup-button-body-text-color: var(--color-primary-02);
  --cookie-popup-button-body-text: 500 18px/36px var(--font-family-label), sans-serif;
  --cookie-popup-button-border: 1px solid var(--color-complementary-02);
  --cookie-popup-button-text-color: var(--color-grey-000);
  --cookie-popup-button-text: 500 18px/36px var(--font-family-label), sans-serif;
  --cookie-popup-link-color: var(--color-primary-02);
  --cookie-popup-text-color: #000;
  --cookie-popup-typography-text: 16px/24px var(--font-family-label), sans-serif;
}

/* Styles */
body #CybotCookiebotDialog {
  transform: inherit !important;
  left: 0;
  top: initial !important;
  bottom: 0 !important;
  min-width: 100% !important;
  border-radius: 0;
  height: min-content !important;
  padding-top: 40px;
  padding-bottom: 40px;
}

body #CybotCookiebotDialogPoweredbyImage {
  display: none;
}

body #CybotCookiebotDialogPoweredbyLink {
  aspect-ratio: var(--cookie-banner-logo-aspect-ratio);
  max-width: var(--cookie-banner-logo-width);
  position: relative;
  width: 100%;
  margin: auto;
}

body #CybotCookiebotDialogPoweredbyLink::after {
  background: var(--cookie-banner-logo);
  background-position: center;
  background-size: contain;
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}

body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogPoweredbyLink {
  display: var(--show-logo-in-popup);
  margin-top: var(--spacer-02);
}

body #CybotCookiebotDialogBodyContentTitle {
  color: var(--cookie-banner-title-color);
  font: var(--cookie-banner-typography-title);
  margin: 2px 0 16px;
  text-transform: var(--cookie-banner-case-title);
  display: none;
}

body #CybotCookiebotDialogBodyContentText {
  color: var(--cookie-banner-text-color);
  font: var(--cookie-banner-typography-text);
}

body #CybotCookiebotDialogBodyContentText h1 {
  text-align: left !important;
}

body #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a {
  color: var(--cookie-banner-link-color);
  transition: all 0.2s ease-in-out;
}

body #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a:hover {
  opacity: 0.75;
}

body #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
  max-width: var(--cookie-banner-container);
  place-items: center;
}

body .CybotCookiebotDialogContentWrapper {
  flex-direction: row !important;
}

body #CybotCookiebotDialogBodyButtonsWrapper {
  display: flex;
}

body #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  order: 0 !important;
}

body #CybotCookiebotDialogBodyLevelButtonCustomize {
  order: 1 !important;
}

body #CybotCookiebotDialogBodyButtonDecline {
  order: 2 !important;
}

body #CybotCookiebotDialogBodyButtonsWrapper button {
  margin-bottom: 6px !important;
}

body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogBodyContentTitle {
  color: var(--cookie-popup-text-color);
}

body #CybotCookiebotDialog[data-template='bottom'] a,
body #CybotCookiebotDialog[data-template='bottom'] div,
body #CybotCookiebotDialogBodyContentControls[data-template='bottom'],
body #CybotCookiebotDialog[data-template='slideup'] a,
body #CybotCookiebotDialog[data-template='slideup'] div,
body #CybotCookiebotDialogBodyContentControls[data-template='slideup'] {
  color: var(--cookie-banner-text-color);
  font: var(--cookie-banner-typography-text);
}

body #CybotCookiebotDialog[data-template='popup'] div,
body #CybotCookiebotDialogBodyContentControls[data-template='popup'] {
  color: var(--cookie-popup-text-color);
  font: var(--cookie-popup-typography-text);
}

body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogBodyContentText a {
  color: var(--cookie-popup-link-color);
  font: var(--cookie-popup-typography-text);
}

body #CybotCookiebotDialog[data-template='bottom'],
body #CybotCookiebotDialog[data-template='slideup'] {
  background: var(--cookie-banner-background);
  border-radius: 0;
  box-shadow: var(--cookie-banner-shadow);
  height: var(--cookie-banner-height);
  place-items: center;
}

body #CybotCookiebotDialog[data-template='popup'] {
  background: var(--cookie-banner-popup-background);
}

body #CybotCookiebotDialogPoweredbyCybot,
body #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyBottomWrapper {
  display: none;
}

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  background-color: var(--cookie-banner-button-background);
  border: var(--cookie-banner-button-border);
  border-radius: var(--cookie-banner-button-border-radius);
  color: var(--cookie-banner-button-text-color);
  font: var(--cookie-banner-button-text);
  font-weight: bold;
  padding: var(--cookie-banner-button-padding);
  text-transform: var(--cookie-banner-button-case);
  transition: all 0.25s ease-in-out;
}

/*
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline {
  background-color: var(--cookie-banner-button-reject);
  border-color: var(--cookie-banner-button-reject);
}

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize {
  background-color: white;
  border-color: white;
}
*/

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize {
  margin-left: var(--spacer-04);
}

body #CybotCookiebotDialog[data-template='bottom'] #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
body
  #CybotCookiebotDialog[data-template='bottom']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
body #CybotCookiebotDialog[data-template='slideup'] #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
body
  #CybotCookiebotDialog[data-template='slideup']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  background-color: var(--cookie-banner-button-background);
  color: var(--cookie-banner-button-text-color);
  text-transform: var(--cookie-banner-button-case);
}

body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogBodyButtonAccept,
body
  #CybotCookiebotDialog[data-template='popup']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  background-color: var(--cookie-popup-button-background);
  color: var(--cookie-popup-button-text-color);
  text-transform: var(--cookie-banner-button-case);
}

body
  #CybotCookiebotDialog[data-template='popup']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogBodyLevelButtonCustomize,
body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline {
  background-color: var(--cookie-popup-button-body-background);
  border: var(--cookie-popup-button-body-border);
  color: var(--cookie-popup-button-body-text-color);
  text-transform: var(--cookie-banner-button-case);
}

body
  #CybotCookiebotDialog[data-template='popup']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonCustomize,
body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
  border: var(--cookie-popup-button-body-border);
  border-radius: var(--cookie-popup-button-body-border-radius);
  color: var(--cookie-banner-button-body-text-color);
  font: var(--cookie-popup-button-body-text);
  padding: var(--cookie-popup-button-body-padding);
  text-transform: var(--cookie-banner-button-case);
}

body
  #CybotCookiebotDialog[data-template='slideup']
  #CybotCookiebotDialogBodyButtonsWrapper
  #CybotCookiebotDialogBodyLevelButtonCustomize {
  display: none;
}

body #CybotCookiebotDialogBodyButtonsWrapper {
  flex-direction: column !important;
}

body #CybotCookiebotDialogBodyButtonsWrapper button {
  width: 100% !important;
}

body #CybotCookiebotDialog .CybotCookiebotScrollContainer,
body #CybotCookiebotDialogHeader {
  border-bottom: none;
}

body #CybotCookiebotDialogHeader {
  width: 300px;
  height: 100%;
  display: flex;
  align-items: flex-start;
}

body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:not(:first-of-type) {
  margin-bottom: 0;
}

body #CybotCookiebotDialogBodyContent {
  padding-top: 0;
}

body #CybotCookiebotDialogNav {
  display: none;
}

body #CybotCookiebotDialogNav a.CybotCookiebotDialogNavItemLink {
  font-weight: bold;
}

body #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.active {
  border-bottom: 1px solid var(--cookie-banner-tabs-color);
  color: var(--cookie-banner-tabs-color);
}

body #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
  color: var(--cookie-banner-tabs-color);
}

body #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover {
  color: var(--cookie-banner-tabs-color);
}

body #CybotCookiebotDialogTabContent {
  padding-top: var(--spacer-04);
  height: -webkit-fill-available;
  overflow: auto;
}

body #CybotCookiebotDialogTabContent input: checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--cookie-banner-tabs-color);
}

body
  #CybotCookiebotDialog[data-template='popup']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonCustomize,
body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline,
body
  #CybotCookiebotDialog[data-template='popup']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  background-color: var(--cookie-popup-button-body-background);
  text-decoration: underline;
}

body #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow {
  display: none;
}

body
  #CybotCookiebotDialog[data-template='popup']
  #CybotCookiebotDialogFooter
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
body #CybotCookiebotDialog[data-template='popup'] #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline {
  text-decoration: underline;
}

body #CybotCookiebotDialogPoweredByText {
  display: none;
}

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize {
    margin: 0;
}

body #CybotCookiebotDialogFooter {
  width: 100%;
  max-width: 300px;
}

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow {
  display: none;
}

@media screen and (max-width: 600px) {
  body #CybotCookiebotDialogHeader {
    justify-content: center;
  }

  body #CybotCookiebotDialogHeader > div {
    justify-content: center;
    text-align: center;
  }

  body #CybotCookiebotDialogBodyLevelButtonCustomize {
    order: initial;
  }

  body #CybotCookiebotDialogBodyButtonsWrapper {
    flex-direction: column !important;
  }
}

@media screen and (min-width: 601px) {
  body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonsWrapper {
    justify-content: space-between;
  }
}

@media screen and (max-width: 799px) {
  body #CybotCookiebotDialogBodyButtonsWrapper {
    flex-direction: column !important;
  }
}

@media screen and (max-width: 1024px) {
  body #CybotCookiebotDialogFooter {
    max-width: 100%;
  }

  body #CybotCookiebotDialogBodyButtonsWrapper {
    flex-direction: row !important;
  }

  body #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper {
    flex-direction: column !important;
  }

  body #CybotCookiebotDialogPoweredbyLink {
    height: 100px;
  }

  body #CybotCookiebotDialogPoweredbyLink::after {
    max-width: 200px;
    width: 100%;
    left: 50%;
    transform: translatex(-50%);
  }

  body #CybotCookiebotDialogHeader {
    width: 100%;
    height: min-content !important  ;
  }

  body #CybotCookiebotDialogTabContent {
    border-bottom: 1px solid var(--color-grey-200);
    padding-top: var(--spacer-04);
    margin-bottom: var(--spacer-07);
  }

  body #CybotCookiebotDialog {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 1280px) {
  body #CybotCookiebotDialog[data-template='bottom'],
  body #CybotCookiebotDialog[data-template='slideup'] {
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    max-width: 100%;
    min-height: var(--cookie-banner-height);
    position: fixed;
    right: 0;
    top: auto;
    transform: none;
    width: 100%;
  }

  body #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtons,
  body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonsWrapper {
    justify-content: space-between;
  }

  body #CybotCookiebotDialogBodyLevelButtonCustomize {
    order: 1;
  }
}

#CybotCookiebotDialogTabContent {
  height: min-content;
}

/* 2023.12.19 Banco Pichincha styles */
.CookieDeclaration div[id=CookieDeclarationChangeConsent] {
  align-items: center;
  background: var(--button-color-background, var(--color-primary-02));
  border-radius: var(--button-border-radius, 0);
  border: var(--button-border, 0);
  color: var(--button-color-text, var(--color-grey-000));
  cursor: pointer;
  display: inline-flex;
  fill: var(--button-fill, var(--button-color-text, var(--color-grey-000)));
  font: var(--button-font, var(--typography-label-l));
  outline: 0;
  padding: var(--button-padding, var(--spacer-03) var(--spacer-04));
  position: relative;
  transition-duration: .3s;
  width: fit-content;
}

.CookieDeclaration div[id=CookieDeclarationChangeConsent] a {
  font: var(--button-font, var(--typography-label-l));
  text-decoration: none;
}

.CookieDeclaration div[id=CookieDeclarationChangeConsent] a:hover {
  font: var(--button-font, var(--typography-label-l));
  text-decoration: none;
}

.CookieDeclaration div[id=CookieDeclarationChangeConsent]:hover {
  background: var(--button-color-background-hover, var(--color-primary-01));
}

.CookieDeclaration {
  ---grid-gutter: var(--spacer-06);
  font: var(--font-content-paragraph);
}

.CookieDeclaration a {
  color: var(--color-complementary-02);
  text-decoration: underline;
}

.CookieDeclaration div[*|class=CookieDeclarationType] {
  font: var(--typography-paragraph-m);
}

.CookieDeclaration div[id=CookieDeclarationUserStatusPanel] {
  border: 2px solid var(--color-primary-02);
  padding: 15px;
}

.CookieDeclaration div[id=CookieDeclarationUserStatusPanel] div * {
  color: var(--button-color-text, var(--color-grey-000));
  font-size: 16px;
  line-height: 24px;
  margin-bottom: var(--spacer-02);
  padding-top: 0;
}

.CookieDeclaration div[id=CookieDeclarationChangeConsent] {
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
  background: var(--button-color-background, var(--color-primary-02));
  border: var(--button-border, 0);
  border-radius: var(--button-border-radius, 0);
  color: var(--button-color-text, var(--color-grey-000));
  cursor: pointer;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: inline-flex;
  fill: var(--button-fill, var(--button-color-text, var(--color-grey-000)));
  font: var(--button-font, var(--typography-label-l));
  outline: 0;
  padding: var(--button-padding, var(--spacer-03) var(--spacer-04));
  position: relative;
  -moz-transition-duration: .3s;
  transition-duration: .3s;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.CookieDeclaration div[id=CookieDeclarationChangeConsent] a {
  text-decoration: none;
}

.CookieDeclaration div[id=CookieDeclarationChangeConsent]:hover {
  background: var(--button-color-background-hover, var(--color-primary-01));
}

.CookiesList_cookiesListTitle {
  font: var(--typography-heading-03);
}

.CookiesList_cookiesListButtons {
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
}

.CookiesList_cookiesListButton {
  color: var(--color-complementary-02);
  display: block;
  text-decoration: underline;
}

.CookiesList_cookiesListButton:not(:last-child) {
  margin-right: var(--spacer-06);
}