@keyframes klaroSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* =========================================================
   Klaro base
   ========================================================= */

#klaro .klaro {
  position: relative !important;
}

#klaro,
#klaro * {
  -webkit-tap-highlight-color: transparent !important;
}


/* =========================================================
   Accessible keyboard focus
   ========================================================= */

/*
 * Keep visible keyboard focus on interactive controls.
 */

#klaro button:focus-visible,
#klaro a:focus-visible,
#klaro input:focus-visible,
#klaro [tabindex]:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}


/*
 * Klaro's notice/modal containers can themselves receive
 * focus. Suppress the visible border on those containers
 * without affecting their interactive children.
 */

#klaro #klaro-cookie-notice:focus,
#klaro #klaro-cookie-notice:focus-visible,
#klaro .cookie-modal:focus,
#klaro .cookie-modal:focus-visible,
#klaro .cm-modal:focus,
#klaro .cm-modal:focus-visible,
#klaro .context-notice:focus,
#klaro .context-notice:focus-visible,
#klaro .cookie-notice:focus,
#klaro .cookie-notice:focus-visible {
  outline: 3px solid transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   Cookie notice
   ========================================================= */

#klaro #klaro-cookie-notice {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  position: fixed !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  padding: 5% !important;
  background-color: #502d0e !important;
  opacity: 1 !important;
  animation: klaroSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  z-index: 5000 !important;
}


/* =========================================================
   Cookie notice body
   ========================================================= */

#klaro #klaro-cookie-notice .cn-body {
  /*max-width: 80% !important;*/
  margin: unset !important;
}


/* =========================================================
   Cookie notice title
   ========================================================= */

#klaro #klaro-cookie-notice .cn-body #id-cookie-title {
  color: #ffffff !important;
  font-family: DopisBold, sans-serif;
  font-size: var(--fs-36px, 32px) !important;
  font-weight: 400 !important;
  margin: 0 0 4px 0 !important;
}


/* =========================================================
   Cookie notice text
   ========================================================= */

#klaro #klaro-cookie-notice .cn-body #id-cookie-notice {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-family: proxima-nova, Helvetica, Arial, sans-serif !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 19.6px !important;
}


/* =========================================================
   Cookie notice links
   ========================================================= */

#klaro #klaro-cookie-notice .cn-body #id-cookie-notice a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

#klaro #klaro-cookie-notice .cn-body #id-cookie-notice a:hover {
  font-weight: 450 !important;
}


/* =========================================================
   Cookie notice actions
   ========================================================= */

#klaro #klaro-cookie-notice .cn-body .cn-ok {
  float: left !important;
  max-width: unset !important;
  margin: 0 !important;
  margin-top: 10px !important;
  position: relative !important;
  left: 0 !important;
  gap: 10px !important;
}

#klaro #klaro-cookie-notice .cn-ok .cn-buttons {
  display: contents !important;
}


/* =========================================================
   Buttons
   ========================================================= */

#klaro .cookie-modal .cn-ok .cm-btn,
#klaro #klaro-cookie-notice .cn-body .cn-ok .cn-buttons button,
.cookie-modal .cm-btn,
.cookie-modal .cm-btn.cm-btn-info {
  border: none !important;
  border-radius: 40px !important;
  height: 50px !important;
  padding: 5px 20px !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  font-family: Arial, sans-serif !important;
}


/* =========================================================
   Primary / success buttons
   ========================================================= */

#klaro #klaro-cookie-notice .cn-body .cn-ok .cn-buttons .cm-btn-success,
.cookie-modal .cm-btn,
.cookie-modal .cm-btn.cm-btn-info {
  background-color: #FFE41E !important;
}


/* =========================================================
   Button hover states
   ========================================================= */

#klaro #klaro-cookie-notice .cn-body .cn-ok .cn-learn-more:hover,
#klaro .cookie-modal .cm-btn:hover,
.cookie-modal .cm-btn.cm-btn-info:hover,
#klaro #klaro-cookie-notice .cn-body .cn-ok .cn-buttons button:hover {
  background-color: #FFE41E !important;
  text-decoration: none !important;
}


/* =========================================================
   Modal
   ========================================================= */

.cookie-modal {
  z-index: 3000 !important;
}

#klaro .cookie-modal {
  overscroll-behavior: contain;
}

#cm-modal-title span {
  font-size: 24px !important;
}

#klaro .cn-changes {
  color: #ffffff !important;
}


/* =========================================================
   Consent switches
   ========================================================= */

.cm-list-input.required:checked + .cm-list-label .slider,
.cm-list-input.half-checked:checked + .cm-list-label .slider,
.cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider {
  background-color: #502d0e !important;
}


/* =========================================================
   Optional modal scroll lock
   ========================================================= */

/*
html:has(#klaro .cookie-modal),
body:has(#klaro .cookie-modal) {
  overflow: hidden;
}
*/


/* =========================================================
   Desktop
   ========================================================= */

@media only screen and (min-width: 1025px) {

  #klaro #klaro-cookie-notice .cn-body {
    max-width: 100% !important;
  }

  #klaro #klaro-cookie-notice {
    width: 54vw !important;
    min-width: 54vw !important;
    max-width: 54vw !important;
    padding: 2% !important;
  }

  .klaro.learn-more-as-button
    .cookie-notice:not(.cookie-modal-notice)
    a.cm-link.cn-learn-more {
    min-height: unset !important;
  }
}
@media only screen and (max-width: 991px) {
	#klaro #klaro-cookie-notice .cn-ok {
	    display: flex !important;
	    flex-direction: column !important;
	    width: 100% !important;
	    gap: 10px !important;
	    margin-top: 15px !important;
	  }
  #klaro #klaro-cookie-notice .cn-ok .cm-btn,
  #klaro #klaro-cookie-notice .cn-ok .cn-buttons button {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
}
/* =========================================================
   Cookie modal notice
   ========================================================= */

@media (min-width: 400px) {

  .klaro .cookie-modal-notice {
    max-width: 600px !important;
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #klaro #klaro-cookie-notice {
    animation: none !important;
  }
}