@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --carmen-primary-white: #fff;
  --carmen-primary-black: #000;

  --carmen-accent: #006aff;
  --carmen-accent-50: #E5F0FF;
  --carmen-accent-100: #CCE1FF;
  --carmen-accent-200: #99C3FF;
  --carmen-accent-300: #66A6FF;
  --carmen-accent-400: #3388FF;
  --carmen-accent-500: #006AFF;
  --carmen-accent-600: #0055CC;
  --carmen-accent-700: #004099;
  --carmen-accent-800: #002A66;
  --carmen-accent-900: #001533;
  --carmen-accent-950: #000B19;

  --carmen-mint-green: #b2fce2;
  --carmen-mint-green-50: #f5fffb;
  --carmen-mint-green-100: #f0fef9;
  --carmen-mint-green-200: #e2fef4;
  --carmen-mint-green-300: #d3fdee;
  --carmen-mint-green-400: #bffde7;
  --carmen-mint-green-500: #b2fce2;
  --carmen-mint-green-600: #5df9c2;
  --carmen-mint-green-700: #0ef6a5;
  --carmen-mint-green-800: #07a76f;
  --carmen-mint-green-900: #035337;
  --carmen-mint-green-950: #02271a;

  --carmen-yellow: #ffb71a;
  --carmen-yellow-50: #fff9eb;
  --carmen-yellow-100: #fff0d1;
  --carmen-yellow-200: #ffe2a3;
  --carmen-yellow-300: #ffd375;
  --carmen-yellow-400: #ffc547;
  --carmen-yellow-500: #ffb71a;
  --carmen-yellow-600: #e09900;
  --carmen-yellow-700: #a87300;
  --carmen-yellow-800: #704d00;
  --carmen-yellow-900: #382600;
  --carmen-yellow-950: #1f1500;

  --carmen-red: #f05d3c;
  --carmen-red-50: #FEEFEC;
  --carmen-red-100: #FCE0D9;
  --carmen-red-200: #F9C0B3;
  --carmen-red-300: #F69D89;
  --carmen-red-400: #F37D63;
  --carmen-red-500: #F05D3C;
  --carmen-red-600: #DF3711;
  --carmen-red-700: #A6290D;
  --carmen-red-800: #721C09;
  --carmen-red-900: #390E04;
  --carmen-red-950: #1C0702;

  --carmen-brown: #a06e28;
  --carmen-brown-50: #F9F1E7;
  --carmen-brown-100: #F3E3CE;
  --carmen-brown-200: #E7C89D;
  --carmen-brown-300: #DAAC6C;
  --carmen-brown-400: #CD8F37;
  --carmen-brown-500: #A06E28;
  --carmen-brown-600: #7E5720;
  --carmen-brown-700: #624318;
  --carmen-brown-800: #412D10;
  --carmen-brown-900: #211608;
  --carmen-brown-950: #100B04;

  --carmen-orange: #ff6633;
  --carmen-orange-50: #FFF0EB;
  --carmen-orange-100: #FFE0D6;
  --carmen-orange-200: #FFC2AD;
  --carmen-orange-300: #FFA385;
  --carmen-orange-400: #FF855C;
  --carmen-orange-500: #FF6633;
  --carmen-orange-600: #F53D00;
  --carmen-orange-700: #B82E00;
  --carmen-orange-800: #7A1F00;
  --carmen-orange-900: #3D0F00;
  --carmen-orange-950: #1F0800;

  --carmen-purple: #6804db;
  --carmen-purple-50: #EFE1FE;
  --carmen-purple-100: #E1C8FE;
  --carmen-purple-200: #C18CFD;
  --carmen-purple-300: #A355FC;
  --carmen-purple-400: #851EFB;
  --carmen-purple-500: #6804DB;
  --carmen-purple-600: #5403AF;
  --carmen-purple-700: #3E0282;
  --carmen-purple-800: #290255;
  --carmen-purple-900: #15012D;
  --carmen-purple-950: #0A0014;

  --form-width: 300px;
  --border-radius-container: 20px;
  --border-radius-button: 10px;
  --sidebar-width: 33%;
  --modal-z-index: 1150;
}

footer.footer.footer--dark {
  display: none;
}

/* 
 * Footer
 */

#carmen-cloud-footer {
  background-color: #2a2a2a;
  color: #fff;
  font-family: Urbanist, Helvetica, Arial, sans-serif;
  width: 100%;
}

#carmen-cloud-footer .links {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 50px 0;
}

#carmen-cloud-footer .links .column {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 280px;
}

#carmen-cloud-footer .links .column h2 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px 0;
}

#carmen-cloud-footer .links .column ul {
  list-style-type: none;
  margin: 0 0 40px 0;
  padding: 0;
}

#carmen-cloud-footer .links .column ul:last-child {
  margin: 0;
}

#carmen-cloud-footer .links .column ul li {
  margin: 0 0 10px 0;
}

#carmen-cloud-footer .links .column ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 15px;
}

#carmen-cloud-footer .links .column ul li a svg {
  height: 1em;
  margin: 0 0 0 5px;
  fill: #fff;
}

#carmen-cloud-footer .copyright {
  font-size: 14px;
  color: #fff;
  background-color: #000;
  text-align: center;
  padding: 10px 0;
}

@media (max-width: 1700px) {
  #carmen-cloud-footer .links {
    gap: 20px;
  }

  #carmen-cloud-footer .links .column {
    width: 240px;
  }
}

@media (max-width: 1440px) {
  #carmen-cloud-footer .links {
    gap: 20px;
  }

  #carmen-cloud-footer .links .column {
    width: 200px;
  }

  #carmen-cloud-footer .links .column:first-child {
    display: none;
  }
}

@media (max-width: 1000px) {
  #carmen-cloud-footer .links {
    flex-wrap: wrap;
    justify-content: center;
  }

  #carmen-cloud-footer .links .column {
    width: 40%;
  }
}

@media (max-width: 600px) {
  #carmen-cloud-footer .links {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  #carmen-cloud-footer .links .column {
    width: 60%;
  }
}

/*
 * Cookie Settings
 */

#modalWrapper {
  color: #000;
}

#modalWrapper input, button, select {
  font-family: Urbanist, Helvetica, Arial, sans-serif;
}

#modalWrapper.hidden {
  display: none;
}

#modalWrapper .backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: var(--modal-z-index);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#modalWrapper.active .backdrop {
  opacity: 1;
}

#modalWrapper * {
  box-sizing: border-box;
}

#modalWrapper a {
  color: var(--carmen-accent);
  text-decoration: none;
}

#modalWrapper .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: calc(var(--modal-z-index) + 1);
  width: 80%;
  max-width: 900px;
  height: 80%;
  max-height: 80%;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
}

#modalWrapper.active .modal {
  opacity: 1;
}

#modalWrapper .close-btn {
  position: absolute;
  top: -16px;
  right: -16px;
  cursor: pointer;
  background: var(--carmen-accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  padding: 0;
  height: 32px;
}

#modalWrapper .close-btn .close-icon {
  width: 32px;
  height: 32px;
}

#modalWrapper .save-btn {
  position: absolute;
  bottom: -42px;
  right: 0;
  background: var(--carmen-accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
}

#modalWrapper #performance-cookies-form {
  margin-bottom: 10px;
}

#modalWrapper .modal-content {
  display: flex;
  height: 100%;
}

#modalWrapper .sidebar {
  width: var(--sidebar-width);
}

#modalWrapper .menu {
  display: flex;
  flex-direction: column;
}

#modalWrapper .menu-item {
  display: flex;
  align-items: center;
  padding: 9px 32px;
  height: 72px;
  text-decoration: none;
  color: rgb(84, 84, 84, 0.54);
  font-size: 13px;
  font-weight: bold;
}

#modalWrapper .menu-item.active {
  color: var(--carmen-accent);
}

#modalWrapper .menu-item svg path {
  fill: rgb(84, 84, 84, 0.54);
}

#modalWrapper .menu-item.active svg path {
  fill: var(--carmen-accent);
}

#modalWrapper .icon {
  margin-right: 10px;
  width: 24px;
  height: 24px;
}

#modalWrapper .main-content {
  flex-grow: 1;
  padding: 20px;
  width: calc(100% - var(--sidebar-width));
  max-height: 100%;
  overflow-y: scroll;
  background-color: #f2f2f2;
  display: none;
}

#modalWrapper .main-content.active {
  display: block;
}

#modalWrapper .cookie-list {
  padding: 0;
}

#modalWrapper .cookie-list li {
  border: 1px solid #ccc;
  border-radius: 5px;
  list-style-type: none;
  margin-bottom: 10px;
  padding: 10px;
}

@media (min-width: 768px) {
  #modalWrapper .logo {
    display: block;
    padding: 20px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  #modalWrapper .modal-content {
    flex-direction: column;
  }

  #modalWrapper .sidebar {
    flex-direction: row;
    width: 100%;
  }

  #modalWrapper .main-content {
    width: 100%;
  }
  
  #modalWrapper .main-content p,
  #modalWrapper .main-content li {
    font-size: calc(16px * 0.75);
  }
  
  #modalWrapper .main-content h2 {
    font-size: calc(1.5rem * 0.75);
  }
  
  #modalWrapper .menu {
    flex-direction: row;
    justify-content: center;
  }

  #modalWrapper .menu-item {
    padding: 9px;
  }

  #modalWrapper .logo {
    display: none;
  }

  #modalWrapper .label {
    display: none;
  }
}

@media (max-height: 600px) {
  #modalWrapper .logo {
    display: none;
  }
}

/*
 * Cookie Consent Bar
 */

.cookie-consent-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  color: #000;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  z-index: calc(var(--modal-z-index) - 1);
}

.cookie-consent-bar.hidden {
  display: none;
}

.cookie-consent-bar__column {
  margin-left: 10px;
}

.cookie-consent-bar__column--grow {
  flex-grow: 1;
  max-width: 900px;
}

.cookie-consent-bar__btn {
  width: 100px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid var(--carmen-accent);
  color: var(--carmen-accent);
  padding: 5px;
  font-weight: 600;
  cursor: pointer;
}

.cookie-consent-bar__btn--primary {
  background: var(--carmen-accent);
  color: #fff;
}

@media (max-width: 768px) {
  .cookie-consent-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-consent-bar__column {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .cookie-consent-bar__column--grow {
    margin-bottom: 10px;
  }

  .cookie-consent-bar__btn {
    width: 45%;
    margin: 5px 0;
  }
}

/*
 * Cookie Settings Floating Button
 */

.cookie-settings-button {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  padding: 5px 10px 5px 5px;
  background: var(--carmen-accent);
  border-top-right-radius: 20px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 100;
}

.cookie-settings-button.hidden {
  display: none;
}

.cookie-settings-button--icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.cookie-settings-button--text {
  vertical-align: middle;
  display: none;
}

.cookie-settings-button:hover .cookie-settings-button--text {
  display: inline-block;
}

.cookie-settings-button--icon path {
  fill: #fff;
}

/*
 * Feedback Floating Button
 */

a.feedback-button {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 40px;
  padding: 5px 5px 5px 10px;
  background: rgba(240, 240, 240, 0.94);
  border-top-left-radius: 20px;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 100;
}

.feedback-button--icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.feedback-button--text {
  vertical-align: middle;
  display: none;
}

.feedback-button:hover {
  color: #000;
  text-decoration: none;
}

.feedback-button:hover .feedback-button--text {
  display: inline-block;
}

.feedback-button--icon path {
  fill: #000;
}