.klaro .cookie-modal {
  border-radius: 1.75rem;
  background: transparent;
}

.klaro .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.55);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  box-shadow: 0 24px 60px -36px rgba(47, 52, 55, 0.45);
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-footer {
  border-color: var(--color-line);
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-weight: 400;
}

.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-footer {
  color: var(--color-ink);
}

.klaro .cookie-notice .cn-body,
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body .cn-learn-more,
.klaro .cookie-notice .cn-ok,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-body p,
.klaro .cookie-modal .cm-modal .cm-body li {
  color: var(--color-ink) !important;
}

.klaro .cookie-modal .cn-learn-more,
.klaro .cookie-modal .cm-link,
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice .cm-link {
  color: var(--color-primary) !important;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 35%, transparent);
}

.klaro .cookie-modal .cn-learn-more:hover,
.klaro .cookie-modal .cm-link:hover,
.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice .cm-link:hover,
.klaro .cookie-modal .cn-learn-more:focus-visible,
.klaro .cookie-modal .cm-link:focus-visible,
.klaro .cookie-notice .cn-learn-more:focus-visible,
.klaro .cookie-notice .cm-link:focus-visible {
  color: var(--color-accent) !important;
  text-decoration-color: currentColor;
}

.klaro .cookie-modal .cm-modal .cm-body *,
.klaro .cookie-modal .cm-modal .cm-header * {
  color: var(--color-ink) !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: 1.35rem;
}

.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn {
  border-radius: 9999px;
  font-weight: 500;
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-background);
}

.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-success.cm-btn-info {
  background: var(--color-background) !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-ink) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success.cm-btn-info:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background: var(--color-background) !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-ink) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cm-btn-danger {
  background: var(--color-background) !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-ink) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close {
  background: var(--color-background);
  border-color: var(--color-line);
  color: var(--color-ink);
}

.klaro .cookie-modal .hide svg,
.klaro .cookie-notice .hide svg {
  stroke: var(--color-ink) !important;
  fill: none !important;
}

.klaro .cookie-modal .hide,
.klaro .cookie-notice .hide {
  color: var(--color-ink) !important;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: var(--color-primary);
}

.klaro .cookie-modal a,
.klaro .cookie-notice a,
.klaro .context-notice a {
  color: var(--color-primary);
}

.klaro .cookie-modal a:hover,
.klaro .cookie-notice a:hover,
.klaro .context-notice a:hover {
  color: var(--color-accent);
}

@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    left: var(--notice-left, 0.5rem);
    right: var(--notice-right, 0.5rem);
    bottom: var(--notice-bottom, 0.5rem);
    width: calc(100% - 1rem);
    border: 1px solid var(--color-line);
    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2),5px 5px 10px 0 rgba(0,0,0,.19);
  }
}