:root {
  /*
  These values are taken from the kk-basis base theme.
  It's possible to overwrite these values in the theme.
  */
  --cookie-color-primary: #000c2e;
  --cookie-color-white: #fff;
  --cookie-checked-grey: #999eab;
  --cookie-table-header: #363f59;
  --cookie-spacing: 8px;
  --kk-font-family: 'KBH', serif;
  --kk-font-family-body: 'KBH Tekst', serif;
}

/* Prevent CSS display override of the hidden attribute. */
#sliding-popup[hidden] {
  display: none !important;
}

/* Prevent viewport scroll when cookie banner displayed. */
/* See JS Drupal.eu_cookie_compliance.createPopup(). */
/* See JS Drupal.eu_cookie_compliance.acceptAction(), Drupal.eu_cookie_compliance.savePreferencesAction(). */
body.kk-eu-cookie--popup-blocking {
  overflow: hidden;
}

/* .sliding-popup-bottom matches popup + withdraw ding. */
/* Popup only: .sliding-popup-bottom:not(.eu-cookie-withdraw-wrapper) */
/* Withdraw ding only: .sliding-popup-bottom.eu-cookie-withdraw-wrapper */
.sliding-popup-bottom {
  font-family: var(--kk-font-family-body);
  width: 100%;
  max-width: 100%;
  background-color: var(--cookie-color-primary);
  padding: calc(var(--cookie-spacing) * 6) calc(var(--cookie-spacing) * 4.375);
  box-sizing: border-box;
  text-align: initial;
}

/* Popup scroll when shallow viewport, like desktop zoom >200%. */
/* Popup scroll when details expanded. */
.sliding-popup-bottom:not(.eu-cookie-withdraw-wrapper) {
  overflow-y: auto;
}

/* Popup maximized when shallow viewport, like desktop zoom >200%. */
@media screen and (max-height: 500px) {
  .sliding-popup-bottom:not(.eu-cookie-withdraw-wrapper) {
    top: 0;
  }
}

/* Popup details expanded: Prevent viewport scroll. */
body.kk-eu-cookie--details-expand {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Popup details expanded: Expand popup. */
.sliding-popup-bottom.kk-eu-cookie--details-expand {
  height: 100%;
}

/* Popup full width if container exceeded */
.sliding-popup-bottom.popup--full-height {
  height: 100%;
  & aside {
    padding-bottom: 90px;
  }
}

/* Mime kk-basis profile kk_basis theme body. */
.eu-cookie-compliance-banner {
  line-height: 1.6;
}
/* breakpoint-tablet */
@media screen and (min-width: 768px) {
  .eu-cookie-compliance-banner {
    line-height: 1.62;
  }
}

.eu-cookie-compliance-banner-info,
.eu-cookie-compliance-withdraw-banner {
  background-color: var(--cookie-color-primary);
  color: var(--cookie-color-white);
}

.eu-cookie-compliance-banner-info .kk-accordion:hover,
.eu-cookie-compliance-withdraw-banner .kk-accordion:hover {
  background-color: var(--cookie-color-primary);
  color: var(--cookie-color-white);
}

.eu-cookie-compliance-banner-info .kk-accordion .kk-accordion__details,
.eu-cookie-compliance-withdraw-banner .kk-accordion .kk-accordion__details,
.eu-cookie-compliance-banner-info .kk-accordion .kk-accordion__text,
.eu-cookie-compliance-withdraw-banner .kk-accordion .kk-accordion__text {
  background-color: var(--cookie-color-primary);
  color: var(--cookie-color-white);
  text-align: left;
  padding: 0;
}

.eu-cookie-compliance-categories .kk-accordion__summary--headline {
  margin: 0;
}

.eu-cookie-compliance-categories .kk-accordion__details .kk-accordion__summary-visual {
  transform: rotate(90deg);
}

.eu-cookie-compliance-categories .kk-accordion__details[open] .kk-accordion__summary-visual {
  width: var(--cookie-spacing);
  transform: rotate(-90deg); /* Make the chevron "point up". */
}

.eu-cookie-compliance-categories .kk-accordion__details .kk-accordion__summary-visual svg {
  display: inline;
}

/* Reset inherited padding so we can easier adjust the spacing to other elements */
.eu-cookie-compliance-categories .kk-accordion__details {
  padding: 0;
  margin: calc(var(--cookie-spacing) * 3) 0 calc(var(--cookie-spacing) * 5);
}
.eu-cookie-compliance-categories .kk-accordion__details .kk-accordion__text {
  margin: 0;
}
/* Mime kk-basis profile kk_basis theme h3. */
.eu-cookie-compliance-categories .kk-accordion__details .kk-accordion__text h3 {
  font-family: 'KBH Tekst', serif;
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 700;
}

.eu-cookie-compliance-banner-info .kk-accordion__summary {
  padding: 0;
  display: flex;
  gap: var(--cookie-spacing);
}

.eu-cookie-compliance-categories .kk-eu-cookie_category-control-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(var(--cookie-spacing) * 4);
  row-gap: calc(var(--cookie-spacing) * 2);
}

.eu-cookie-compliance-banner-info .kk-accordion .svg-plus,
.eu-cookie-compliance-withdraw-banner .kk-accordion .svg-plus {
  color: var(--cookie-color-white);
}

.eu-cookie-compliance-content {
  /* Make sure that the padding/margin is taken into account when the browser calculates the height/width of the content */
  box-sizing: border-box;
  font-family: var(--kk-font-family-body);
  display: flex;
  flex-wrap: wrap;
  max-width: 768px;
  margin: 0;
}

/* Make content text full width if elements exceed its container height */
.sliding-popup-bottom.popup--full-height {
  & .eu-cookie-compliance-message *, .eu-cookie-compliance-content {
    max-width: 90%;
  }
}

.eu-cookie-compliance-content label {
  display: inline;
  margin: 0;
}

.eu-cookie-compliance-content .eu-cookie-compliance-more-button {
  border: 0;
  padding: 0;
  background-color: var(--cookie-color-primary);
}

.eu-cookie-compliance-content .eu-cookie-compliance-more-button:after {
  content: "";
  display: block;
  border-bottom: 1px solid var(--cookie-color-white);
  width: 100%;
}

.eu-cookie-compliance-message {
  width: 100%;
  max-width: 100%;
}

/*
Style the cookie policy link according the same as the %linktype-body--on-dark
placeholder from the kk-basis theme and with the same focus/hover states.
*/
.eu-cookie-compliance-message a {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(currentColor,currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  color: var(--cookie-color-white);
  --scheme-color-light: var(--cookie-color-white);
  --scheme-color-dark: var(--cookie-color-primary);
}

.eu-cookie-compliance-message a:hover,
.eu-cookie-compliance-message a:focus {
  background-color: var(--scheme-color-light);
  background-image: none;
  color: var(--scheme-color-dark);
}

/* Mime kk-basis profile kk_basis theme h2. */
.eu-cookie-compliance-message > h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  margin: calc(var(--cookie-spacing) * 4) 0 calc(var(--cookie-spacing) * 2);
  /* Reset inherited margin. */
  margin-top: initial;
}

/* For more info on the "owl" selector:
   https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ and
   https://every-layout.dev/layouts/stack/
*/
.eu-cookie-compliance-message > h2,
.eu-cookie-compliance-message > * + * {
  margin-bottom: calc(var(--cookie-spacing) * 3);
}

.eu-cookie-compliance-more-button {
  margin-bottom: calc(var(--cookie-spacing) * 5);
}

.eu-cookie-compliance-message * {
  max-width: 768px;
}

.eu-cookie-compliance-buttons,
.eu-cookie-compliance-categories {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.eu-cookie-compliance-buttons button,
.eu-cookie-compliance-categories button,
.eu-cookie-compliance-categories-buttons button {
  font-size: 0.9375rem;
  font-family: var(--kk-font-family);
  font-weight: 500;
  line-height: 1.33;
  padding: calc((var(--cookie-spacing) * 2) - 3px) calc((var(--cookie-spacing) * 3) - 1px);
  color: var(--cookie-color-primary);
  background-color: var(--cookie-color-white);
  border: 1px solid var(--cookie-color-white);
  white-space: nowrap;
  overflow: visible;
}

/* Non cut full width version buttons if container exceeded */
.sliding-popup-bottom button {
  white-space: normal;
}

.eu-cookie-compliance-buttons button:focus,
.eu-cookie-compliance-buttons button:hover,
.eu-cookie-compliance-categories button:focus,
.eu-cookie-compliance-categories button:hover,
.eu-cookie-compliance-categories-buttons button:focus,
.eu-cookie-compliance-categories-buttons button:hover {
  /* Swap colors. */
  color: var(--cookie-color-white);
  background-color: var(--cookie-color-primary);
}

.eu-cookie-compliance-categories-buttons button svg,
.eu-cookie-compliance-categories button svg {
  margin-left: calc(var(--cookie-spacing) * 4);
  display: inline;
}

.eu-cookie-withdraw-tab {
  font-size: 0.9375rem;
  line-height: 1.33;
  padding: calc(var(--cookie-spacing) * 2) calc(var(--cookie-spacing) * 4);
  color: var(--cookie-color-white);
  background-color: var(--cookie-color-primary);
  border: 1px solid var(--cookie-color-white);
  border-bottom: none;
  margin-right: 2rem;
}

.eu-cookie-withdraw-tab:hover {
  background: var(--cookie-color-white);
  border: 1px solid var(--cookie-color-primary);
  color: var(--cookie-color-primary);
}

.eu-cookie-compliance-save-preferences-button {
  margin-bottom: calc(var(--cookie-spacing) * 3);
}

/** Table styles **/
.eu-cookie-compliance-banner-info .kk-eu-cookie_category-title {
  margin-top: calc(var(--cookie-spacing) * 3);
  margin-bottom: var(--cookie-spacing);
}

.eu-cookie-compliance-banner-info .kk-eu-cookie_category-description {
  margin-bottom: calc(var(--cookie-spacing) * 3);
}

/* This is the table wrapper */
.eu-cookie-compliance-banner-info .kk-eu-cookie_category-details {
  margin-top: calc(var(--cookie-spacing) * 3);
  overflow-x: auto;
}

.eu-cookie-compliance-banner-info .kk-eu-cookie_category-details table {
  display: block;
  max-width: 0; /* This makes sure that the table allows overflow-x scroll. */
}

.eu-cookie-compliance-banner-info .kk-eu-cookie_category-details table th {
  background-color: var(--cookie-table-header);
  min-width: 196px;
  padding: var(--cookie-spacing) calc(var(--cookie-spacing) * 2);
  border-left: 2px solid var(--cookie-color-primary);
}

.eu-cookie-compliance-banner-info .kk-eu-cookie_category-details table th:first-child {
  border-left-color: var(--cookie-table-header);
}

.eu-cookie-compliance-banner-info .kk-eu-cookie_category-details table th:last-child {
  border-right: 2px solid var(--cookie-table-header);
}

.eu-cookie-compliance-banner-info .kk-eu-cookie_category-details table td {
  vertical-align: top;
  padding: var(--cookie-spacing) calc(var(--cookie-spacing) * 2);
  border: 2px solid var(--cookie-table-header);
  border-top: 0;
}

/* Hide withdrawal button initially, display by JS it that can't add link to footer link menu. */
#sliding-popup.eu-cookie-withdraw-wrapper {
  visibility: hidden;
}

#sliding-popup.eu-cookie-withdraw-wrapper.kk-eu-cookie--withdraw-visible {
  visibility: visible;
}

/* Checked styling for cookie checkboxes */
.eu-cookie-compliance-category--form-control {
  display: flex;
  align-items: center;
  gap: calc((var(--cookie-spacing) * 2) - 2px);
}

.kk-eu-cookie_category-control-list [type=checkbox] {
  position: relative;
  appearance: none;
  border: 1px solid var(--cookie-color-white);
  border-radius: 0;
  height: 24px;
  width: 24px;
}

.kk-eu-cookie_category-control-list [type=checkbox]:checked {
  border: 1px solid var(--cookie-color-white);
}

/* This rather "complex" selector, targets the pseudo before element on the checked checkbox,
 so we can add our little checkmark.
 */
.kk-eu-cookie_category-control-list [type=checkbox]:checked::before {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.kk-eu-cookie_category-control-list [type=checkbox]:checked::before {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.5L8 14.5L14.5 1' stroke='%23fff' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.kk-eu-cookie_category-control-list [type=checkbox]:disabled:checked {
  border: 1px solid var(--cookie-checked-grey);
}

.kk-eu-cookie_category-control-list [type=checkbox]:disabled:checked::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16' fill='none'%3E%3Cpath d='M1 7.5L8 14.5L14.5 1' stroke='%23999EAB' stroke-linecap='round' /%3E%3C/svg%3E%0A");
}

/* Bit of a weird value, but this is where the buttons breaks to be on the same line */
@media screen and (min-width: 563px) {
  .eu-cookie-compliance-categories {
    float: initial;
  }

  /* Align the buttons on a row. */
  .eu-cookie-compliance-categories-buttons {
    display: flex;
    align-items: center;
    gap: calc((var(--cookie-spacing) * 3));
  }

  /* For this breakpoint, we don't have enough space for the initial padding */
  .eu-cookie-compliance-buttons button,
  .eu-cookie-compliance-categories button,
  .eu-cookie-compliance-categories-buttons button {
    padding-inline: calc((var(--cookie-spacing) * 2) - 1px);
  }

  /* On our mobile styling, we push below element away from this button.
     We don't want that now that the buttons are aligned on the same row.
  */
  .eu-cookie-compliance-categories-buttons .eu-cookie-compliance-save-preferences-button {
    margin-bottom: 0;
  }

  .eu-cookie-compliance-categories .kk-eu-cookie_category-control-list {
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 638px) {
  .eu-cookie-compliance-buttons button,
  .eu-cookie-compliance-categories button,
  .eu-cookie-compliance-categories-buttons button {
    padding-inline: calc((var(--cookie-spacing) * 3) - 1px);
  }
}

@media screen and (min-width: 960px) {
  .eu-cookie-compliance-banner-info .kk-eu-cookie_category-details table {
    max-width: 100%;
  }
}