/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
 Form
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
.klaro {
  --klaro-primary-color: var(--secondary-color);
  --klaro-button-text-color: var(--primary-color);
  --klaro-button-text-color-hover: var(--primary-color);
  --klaro-button-bg: var(--klaro-primary-color);
  --klaro-button-bg-hover: var(--primary-light-color);
  --klaro-button-padding: 6px 10px;
  --klaro-button-border-radius: var(--menu-anchor-border-radius);
  --klaro-button-border: none;
  --klaro-button-border-hover: none;
  --klaro-slider-bg-required: var(--primary-light-color);
  --klaro-slider-bg-active: var(--klaro-primary-color);
  --dark2: var(--primary-color);
  --green1: var(--primary-color);
  --blue1: var(--primary-color);
  --green2: var(--primary-color);
  --border-radius: var(--image-border-radius);
}
.klaro .cm-required {
  color: var(--primary-color);
}
.klaro .cookie-notice a,
.klaro .cookie-modal a {
  color: var(--primary-color);
  text-decoration: underline;
}
.klaro .cookie-notice h1, .klaro .cookie-notice p, .klaro .cookie-notice li, .klaro .cookie-notice strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal p,
.klaro .cookie-modal li,
.klaro .cookie-modal strong {
  color: var(--primary-color);
}
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  transition: var(--transition);
  background-color: var(--primary-color);
  color: var(--secondary-color);
  line-height: 18px;
  letter-spacing: 0.1px;
  border-radius: var(--button-border-radius);
  text-transform: none;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
}
.klaro .cookie-notice:focus,
.klaro .cookie-modal:focus {
  outline: none;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
}
.klaro .klaro-close {
  color: var(--primary-color);
}

.cm-header h1 {
  font-family: var(--header-font-family);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}
@media (min-width: 992px) {
  .cm-header h1 {
    font-size: 2rem;
    line-height: 32px;
  }
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required {
  color: var(--primary-color);
}