#cc-main {
  --cc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cc-modal-border-radius: 1.45rem;
  --cc-btn-border-radius: .8rem;
  --cc-bg: #ffffff;
  --cc-primary-color: #224466;
  --cc-secondary-color: #52647b;
  --cc-btn-primary-bg: #315f8c;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-hover-bg: #224466;
  --cc-btn-secondary-bg: #ccdbe6;
  --cc-btn-secondary-color: #224466;
  --cc-btn-secondary-hover-bg: #d9e3ed;
  --cc-link-color: #315f8c;
  --cc-cookie-category-block-bg: #f3f6f8;
  --cc-cookie-category-block-border: #e5eaf0;
  --cc-cookie-category-block-hover-bg: #eaf0f5;
  --cc-footer-bg: #f7f9fa;
  --cc-overlay-bg: rgba(12, 24, 42, .54);
}

#cc-main .cm,
#cc-main .pm {
  border: 1px solid rgba(23, 49, 76, .12);
  box-shadow: 0 24px 72px rgba(13, 30, 53, .22), 0 5px 14px rgba(13, 30, 53, .08);
}

#cc-main .cm {
  max-width: 42rem;
  overflow: hidden;
}

#cc-main .cm::before {
  content: '';
  display: block;
  height: .35rem;
  background: linear-gradient(90deg, #224466, #7791b4 52%, #ccdbe6);
}

#cc-main .cm__title {
  font-size: 1.25rem;
  letter-spacing: -.035em;
  line-height: 1.2;
}

#cc-main .cm__desc {
  line-height: 1.55;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-weight: 650;
  min-height: 2.8rem;
}

#cc-main .cm__btns {
  gap: .45rem;
}

@media (min-width: 641px) {
  #cc-main .pm--box {
    height: auto;
    max-height: min(37.5em, calc(100vh - 2rem));
  }
}

html.dark #cc-main {
  --cc-bg: #172334;
  --cc-primary-color: #f4f7fb;
  --cc-secondary-color: #c1ccda;
  --cc-btn-primary-bg: #d5eafa;
  --cc-btn-primary-color: #10233c;
  --cc-btn-primary-hover-bg: #b9daf3;
  --cc-btn-secondary-bg: #2b415a;
  --cc-btn-secondary-color: #f4f7fb;
  --cc-btn-secondary-hover-bg: #38536f;
  --cc-link-color: #98d4f5;
  --cc-cookie-category-block-bg: #1e3149;
  --cc-cookie-category-block-border: #38506c;
  --cc-cookie-category-block-hover-bg: #29415e;
  --cc-footer-bg: #1c2c41;
}

@media (max-width: 640px) {
  #cc-main .cm { max-width: calc(100vw - 1.25rem); }
  #cc-main .cm__title { font-size: 1.2rem; }
}

/* Keep the two decisions equally prominent; settings are a quieter third action. */
#cc-main .cm__texts { padding: 1.25rem 1.5rem 1rem; }
#cc-main .cm__desc { font-size: .9375rem; }
#cc-main .cm__btns { padding: 1rem 1.5rem; }
#cc-main .cm__btn-group:first-child { gap: .625rem; }
#cc-main .cm__btn[data-role="all"],
#cc-main .cm__btn[data-role="necessary"] {
  flex: 1;
  min-height: 3rem;
}
#cc-main .cm__btn[data-role="show"] {
  background: transparent;
  border-color: transparent;
  color: var(--cc-secondary-color);
  min-height: 2.75rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible {
  outline: 3px solid var(--cc-link-color);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  #cc-main .cm__texts { padding: 1.1rem 1.1rem .8rem; }
  #cc-main .cm__btns { padding: .85rem 1.1rem; }
  #cc-main .cm__btn-group:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #cc-main .cm__btn { padding: .65rem .5rem; font-size: .875rem; }
}
/* Override the library's stacked mobile group and intrinsic button widths. */
#cc-main .cm .cm__btn-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}
#cc-main .cm .cm__btn-group .cm__btn {
  width: 100%;
  margin: 0 !important;
  align-self: stretch;
  min-width: 0;
}
#cc-main .cm .cm__btn[data-role="show"] { grid-column: 1 / -1; }

