.sd-cookiebanner__panel {
width: min(var(--sd-cookiebanner-panel-max-width, 800px), 100%);
max-height: calc(100vh - 100px);
background: var(--sd-cookiebanner-panel-background, #13222f);
color: var(--sd-cookiebanner-panel-text, #ffffff);
border: var(--sd-cookiebanner-panel-border-width, 0px) solid
var(--sd-cookiebanner-panel-border-color, transparent);
border-radius: var(--sd-cookiebanner-panel-border-radius, 14px);
padding: var(--sd-cookiebanner-panel-padding, 20px);
box-shadow: var(
--sd-cookiebanner-panel-box-shadow,
0 15px 45px rgba(0, 0, 0, 0.24)
);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.sd-cookiebanner__panel h3 {
margin: 0 0 10px;
color: var(
--sd-cookiebanner-heading-color,
var(--sd-cookiebanner-panel-text, #ffffff)
);
font-size: var(--sd-cookiebanner-heading-font-size, 20px);
font-family: var(--sd-cookiebanner-heading-font-family, inherit);
}
.sd-cookiebanner__panel p {
margin: 0;
line-height: 1.5;
color: var(
--sd-cookiebanner-text-color,
var(--sd-cookiebanner-panel-text, #ffffff)
);
font-size: var(--sd-cookiebanner-text-font-size, 16px);
font-family: var(--sd-cookiebanner-text-font-family, inherit);
}
.sd-cookiebanner__text {
display: grid;
gap: 10px;
}
.sd-cookiebanner__text p {
margin: 0;
}
.sd-cookiebanner__panel a,
.sd-cookiebanner-placeholder__inner a {
color: var(
--sd-cookiebanner-link-color,
var(--sd-cookiebanner-panel-text, #ffffff)
);
}
.sd-cookiebanner__actions {
display: flex;
justify-content: start;
gap: 12px;
margin-top: 18px;
flex-wrap: wrap;
}
.sd-cookiebanner__button {
appearance: none;
border: 0;
border-radius: var(--sd-cookiebanner-button-border-radius, 999px);
padding: 11px 16px;
cursor: pointer;
}
.sd-cookiebanner__button--primary {
background: var(--sd-cookiebanner-primary-button-background, #f7b500);
color: var(--sd-cookiebanner-primary-button-text, #13222f);
}
.sd-cookiebanner__button--secondary {
background: var(
--sd-cookiebanner-secondary-button-background,
rgba(255, 255, 255, 0.16)
);
color: var(--sd-cookiebanner-secondary-button-text, #ffffff);
}
.sd-cookiebanner__services {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.sd-cookiebanner__services-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sd-cookiebanner__services-title {
display: block;
}
.sd-cookiebanner__services-toggle {
appearance: none;
display: flex;
align-items: center;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
text-align: left;
font-size: 12px;
}
.sd-cookiebanner__service-toggle {
appearance: none;
font-size: 12px;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
padding: 0;
flex: 0 0 auto;
text-decoration: underline;
}
.sd-cookiebanner__services-list {
margin-top: 12px;
}
.sd-cookiebanner__service {
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sd-cookiebanner__service:first-of-type {
border-top: 0;
}
.sd-cookiebanner__service-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sd-cookiebanner__service-label {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
cursor: pointer;
color: var(
--sd-cookiebanner-service-label-color,
var(
--sd-cookiebanner-text-color,
var(--sd-cookiebanner-panel-text, #ffffff)
)
);
}
.sd-cookiebanner__service-content {
display: flex;
flex-direction: column;
gap: 3px;
}
.sd-cookiebanner__service-content small {
opacity: 0.8;
}
.sd-cookiebanner__service-description {
padding: 8px 0 0 34px;
}
.sd-cookiebanner__service-description small {
display: block;
opacity: 0.8;
line-height: 1.5;
}
.sd-cookiebanner-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 350px;
height: 100%;
padding: 24px;
background: var(--sd-cookiebanner-placeholder-background, #f4efe7);
border: var(--sd-cookiebanner-placeholder-border-width, 1px) solid
var(--sd-cookiebanner-placeholder-border-color, #d1b998);
border-radius: var(--sd-cookiebanner-placeholder-border-radius, 0px);
color: var(--sd-cookiebanner-placeholder-text, #13222f);
}
.sd-cookiebanner-placeholder__inner {
max-width: 540px;
text-align: center;
}
.sd-cookiebanner-placeholder__title-box {
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 0 14px;
padding: 8px 14px;
border: 1px solid currentColor;
border-radius: 999px;
}
.sd-cookiebanner-placeholder__title {
display: block;
line-height: 1.3;
}
.sd-cookiebanner-placeholder__inner p {
margin: 10px 0 16px;
}
.sd-cookiebanner-placeholder__inner .sd-cookiebanner__actions {
justify-content: center;
}
@media (max-width: 640px) {
.sd-cookiebanner__actions {
flex-direction: column;
}
.sd-cookiebanner__panel {
max-height: calc(100vh - 24px);
}
}