*
* Anything specific to one of them belongs in that block's own stylesheet, not
* here.
*/
.media-text {
container-name: media-text;
container-type: inline-size;
}
.media-text__wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "image" "content";
gap: var(--space-2xl);
}
@media (min-width: 48.001rem) {
.media-text__wrapper {
align-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "image content";
}
.media-text--position-right .media-text__wrapper {
grid-template-areas: "content image";
}
}
.media-text__media {
grid-area: image;
}
.media-text__media .person-item {
height: auto;
}
.media-text__media .person-item__image {
flex: 0 0 auto;
aspect-ratio: 32/23;
}
.media-text__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3xs);
grid-area: content;
}
.media-text__tag {
font-size: var(--text-200);
letter-spacing: -0.0075rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 400;
margin: 0;
padding: var(--space-6xs) var(--space-5xs);
color: var(--color-text-primary);
background: var(--color-grey-200);
border: 0.0625rem solid var(--color-border-secondary);
}
.media-text__text h1:first-child,
.media-text__text h2:first-child {
margin-top: 0;
}
.media-text--title-small .media-text__text h2 {
font-size: var(--text-610);
letter-spacing: -0.05rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 500;
}
.media-text__ctas {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-6xs);
padding: var(--space-4xs) 0;
}
/**
* A hero with no media.
*
* One column of copy rather than two, run to the reading measure the design
* uses, and sitting closer to whatever follows — with no picture to balance,
* the usual section spacing leaves it stranded.
*
* The gap is closed from both sides: this section gives up most of its bottom
* padding, and the first module of the drag-and-drop area below gives up the
* top of its own. Halving one alone would still leave the other's full padding.
*/
.media-text--media-none {
padding-bottom: var(--space-xs);
}
.media-text--media-none .media-text__wrapper {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "content";
}
.media-text--media-none .media-text__content {
max-width: 37.5rem;
}
.media-text--media-none + .main-dnd-area .dnd-section:first-child .vertical-padding {
padding-top: var(--space-xs);
}
.media-text--media-none + .main-dnd-area .dnd-section:first-child .has-section-border {
border-top: 0;
}
/**
* Reference archive.
*
* Rendered by templates/reference-archive.html. The cards are the shared
* `.post-item--reference` in _post-item.scss; what belongs here is the hero,
* the filter chips and the load-more row.
*/
.archive-hero {
padding-top: var(--space-l);
}
.archive-hero__wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3xs);
}
.archive-hero__wrapper > *:not(.archive-filters) {
max-width: 37.5rem;
}
.archive-hero__wrapper h1,
.archive-hero__wrapper p {
margin: 0;
}
/**
* Filters.
*
* One group per taxonomy, each a row of pill buttons. The chosen chip is
* marked with `aria-selected`, which is both the state the script reads and
* what styles it — no extra class to keep in sync.
*/
.archive-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-3xs);
width: 100%;
padding-top: var(--space-3xs);
}
.archive-filters__group {
display: flex;
flex: 1 1 18rem;
flex-direction: column;
gap: var(--space-5xs);
padding-right: var(--space-xs);
}
.archive-filters__label {
font-size: var(--text-410);
letter-spacing: -0.02rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 500;
margin: 0;
color: var(--color-text-primary);
}
.archive-filters__tags {
margin: 0;
padding: 0;
list-style: none;
}
.archive-filters__tags li::after,
.archive-filters__tags li::before {
display: none;
}
.archive-filters__tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-6xs);
}
.archive-filters__tags li {
padding-left: 0;
}
.filter-tag {
font-size: var(--text-300);
letter-spacing: -0.0175rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 400;
padding: var(--space-6xs) var(--space-4xs);
color: var(--color-text-primary);
background: var(--color-background-primary);
border: 0.0625rem solid var(--color-border-secondary);
border-radius: 62.4375rem;
cursor: pointer;
transition: color var(--transition-2), background var(--transition-2), border-color var(--transition-2);
}
.filter-tag:hover, .filter-tag:focus-visible {
color: var(--color-text-link-secondary);
background: var(--color-blue-wisper);
border-color: var(--color-blue-extralight);
}
.filter-tag[aria-selected=true] {
color: var(--color-text-link-secondary);
background: var(--color-blue-wisper);
border-color: var(--color-blue-extralight);
}
.archive-listing {
padding-top: var(--space-l);
padding-bottom: var(--space-4xl);
}
/* Belt and braces: a chip with no text should never draw its box. */
.tag:empty {
display: none;
}
.posts-not-found {
font-size: var(--text-400);
letter-spacing: -0.02rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 400;
margin: var(--space-l) 0 0;
color: var(--color-text-secondary);
}
.posts-load {
margin-top: var(--space-l);
padding-top: var(--space-l);
border-top: 0.0625rem solid var(--color-border-primary);
}
.posts-load.hidden {
display: none;
}
/**
* Product archive grid.
*
* The listing and the CTA banner are children of one grid: `.list` is
* `display: contents` so the cards it holds become grid items themselves,
* which lets module-js/product-archive.js drop the banner partway down the
* grid with `order` instead of interleaving it in the DOM. Putting the banner
* inside `.list` would make List.js treat it as a card and filter it away.
*/
.product-archive__grid .list {
display: contents;
}
.product-archive__cta {
grid-column: 1/-1;
}
.product-archive__cta .cta-banner {
--eagle-width: 21.4375rem;
width: auto;
left: auto;
right: auto;
margin-left: 0;
margin-right: 0;
padding: var(--space-l);
border-top: 0;
}
.product-archive__cta .cta-banner--background-blue .cta-banner__wrapper {
min-height: calc(var(--eagle-height) - var(--space-l) * 2);
}
.product-archive__cta .cta-banner__image {
right: 0;
bottom: calc(var(--space-l) * -1);
}
/**
* Breadcrumb.
*
* HubSpot renders the markup from the menu, so everything here hangs off its
* classes. The design puts a house against the first crumb — the site root —
* and an arrow between the rest, with the root in the primary text colour and
* the trail behind it in the secondary one.
*/
.hs-breadcrumb-menu-wrapper:after {
content: "";
display: table;
clear: both;
}
.hs-breadcrumb-menu-wrapper {
align-items: center;
display: flex;
gap: var(--space-4xs);
}
.hs-breadcrumb-menu {
margin: 0;
padding: 0;
list-style: none;
}
.hs-breadcrumb-menu li::after,
.hs-breadcrumb-menu li::before {
display: none;
}
.hs-breadcrumb-menu {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-5xs);
}
.hs-breadcrumb-menu-item {
font-size: var(--text-200);
letter-spacing: -0.0075rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 400;
padding: 0;
color: var(--color-text-secondary);
}
.hs-breadcrumb-menu-item a {
color: inherit;
text-decoration: none;
}
.hs-breadcrumb-menu-item a:hover, .hs-breadcrumb-menu-item a:focus-visible {
color: var(--color-text-primary);
text-decoration: underline;
}
.hs-breadcrumb-menu-item {
/**
* The separator. Written as an arrow rather than a slash, and sat
* inside the crumb it follows — the list gap supplies the space after
* it, this margin the space before.
*/
}
.hs-breadcrumb-menu-item .hs-breadcrumb-menu-divider::before {
content: "→";
margin-left: var(--space-5xs);
padding: 0;
color: var(--color-text-secondary);
}
.hs-breadcrumb-menu {
/**
* The site root, with the house. It is a background rather than an inline
* image because the markup comes from HubSpot's menu tag and cannot carry
* one; the fill is baked in for the same reason.
*/
}
.hs-breadcrumb-menu-item.first-crumb {
color: var(--color-text-primary);
}
.hs-breadcrumb-menu-item.first-crumb::before {
content: "";
/**
* The theme's list bullet is an absolutely positioned blue circle
* on every `li`, and `reset-list` only hides it — so its position,
* fill and radius all have to be undone here or they come through
* around the house. The shorthand is what clears the fill.
*/
position: static;
display: inline-block;
width: 0.8125rem;
height: 0.8125rem;
margin-right: var(--space-6xs);
vertical-align: -0.125em;
background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13'%20height='13'%20viewBox='0%200%2013%2013'%20fill='none'%3E%3Cpath%20d='M10.855%2013H2.145C0.975%2013%200%2012.012%200%2010.829V6.084C0%205.486%200.26%204.901%200.715%204.498L5.07%200.546C5.915-0.182%207.085-0.182%207.93%200.546L12.285%204.498C12.74%204.888%2013%205.486%2013%206.084V10.829C12.935%2012.077%2012.025%2013%2010.855%2013ZM6.5%201.339C6.305%201.339%206.11%201.404%205.915%201.534L1.56%205.486C1.365%205.616%201.3%205.876%201.3%206.149V10.894C1.3%2011.349%201.69%2011.752%202.145%2011.752H10.79C11.245%2011.752%2011.635%2011.362%2011.635%2010.894V6.149C11.635%205.889%2011.505%205.694%2011.375%205.486L7.02%201.534C6.89%201.404%206.695%201.339%206.5%201.339Z'%20fill='%2327283F'/%3E%3C/svg%3E") no-repeat center/contain;
border-radius: 0;
}
/**
* Placement above a hero.
*
* The crumb sits outside the hero rather than inside it. It is global content,
* and the editor lays an overlay over a global module that reaches well past
* the module's own 18px — inside the hero that overlay covered the top of the
* hero and swallowed the clicks meant for it.
*
* Outside, the spacing has to be rebuilt to land in the same places: the crumb
* carries the `--space-xs` that used to be the hero's top padding, and the hero
* takes `--space-l` in place of its own, which is the gap that used to sit
* below the crumb. Padding rather than a margin, so a hero with a background
* still reaches all the way up to the crumb.
*
* The heroes are listed rather than matched loosely so the rule outweighs each
* one's own `padding-top` — and so it is greppable from either end.
*/
.site-breadcrumb {
padding-top: var(--space-xs);
}
.site-breadcrumb + * {
margin-top: var(--space-l);
}
.site-breadcrumb + .site-hero,
.site-breadcrumb + .page-hero,
.site-breadcrumb + .product-hero,
.site-breadcrumb + .article-hero,
.site-breadcrumb + .archive-hero,
.site-breadcrumb + .archive-listing {
margin-top: 0;
padding-top: var(--space-l);
}
/**
* And the module below it draws no divider. That line is meant to separate two
* sections; here there is nothing above it but the crumb, so it would read as a
* rule under the breadcrumb rather than between anything.
*/
.site-breadcrumb + * .has-section-border,
.site-breadcrumb + .has-section-border {
border-top: 0;
}
/*--------------------------------------------------------------
# Utilities - Helpers and overrides.
--------------------------------------------------------------*/
:focus {
outline: thin dotted;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: var(--color-link);
clip: auto !important;
color: white;
display: block;
font-size: 0.8em;
font-weight: bold;
height: auto;
padding: 0.75rem;
left: 0.5rem;
top: 0.5rem;
text-decoration: none;
width: auto;
z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}
/**
* Section background colours.
*
* A module emits one of these when its background is anything other than
* white. Spacing is not this file's job: the band gets its height from the
* module's own `vertical-padding`, and `has-section-border` in _sections.scss
* is what closes the gap so the colour meets its neighbours.
*
* The class name carries the field value, so a new choice in a module's
* `background_color` field only needs a rule here rather than one in every
* module that offers it.
*/
.has-light_grey-background {
background: var(--color-grey-200);
/**
* The tag chip is filled with the same grey as this band, so on it the
* chip would disappear. The design flips it to the page background and
* takes the border up a step to keep the edge readable.
*
* `.media-text__tag` is listed alongside `.tag` because it carries its own
* copy of the chip's declarations rather than the `tag-chip` mixin.
*/
}
.has-light_grey-background .tag:not(.tag--blue),
.has-light_grey-background .media-text__tag {
background: var(--color-background-primary);
border-color: var(--color-black-10);
}
.has-light_grey-background {
/**
* Only chips sitting on the band itself, though. A listing card keeps its
* own white background whatever the section does, so a chip inside one is
* against white already and keeps the ordinary grey fill — flipping it too
* left it invisible against the card.
*/
}
.has-light_grey-background .post-item .tag:not(.tag--blue) {
background: var(--color-grey-200);
border-color: var(--color-border-secondary);
}
/**
* Section divider.
*
* Every full-width module draws its own top edge, so a stack of them ends up
* with exactly one hairline between each pair — including one under the hero,
* since the first module in the drag-and-drop area draws it too.
*
* It is an opt-in class rather than a rule on `.full-width`, because that class
* is also on the heroes and the site footer, which should not carry the line.
*/
.has-section-border {
border-top: 0.0625rem solid var(--color-border-primary);
}
.hs-inline-edit script[type="mce-no/type"] {
display: block;
background: red;
color: #fff;
font-size: 1rem;
font-family: "Lucida Console";
padding: 1rem;
}
.hs-inline-edit script[type="mce-no/type"]:before {
content: "Hubspot render koodi, editoi muokataksesi lomaketta";
display: block;
margin: 0 0 1rem;
font-family: sans-serif;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
}
/**
* The editor's layout-section drag overlay.
*
* A single element the editor moves and resizes to whatever it is hovering,
* inside the preview frame — which is where this stylesheet is loaded too, so
* it can be reached from here. On a page whose breadcrumb is global content it
* ends up stretched over the top of the hero, and since it sits above the page
* it takes every click meant for what is underneath.
*
* Its size is set inline by the editor, so shrinking it would take an
* `!important` height that clamps every section on every page. Letting the
* clicks through instead leaves the overlay where it is and gives the hero
* back.
*
* Hooked on the test id rather than the class beside it: that class is a
* styled-components hash and is regenerated whenever HubSpot ships the editor.
*
* Editor only — the element does not exist on the live site.
*/
[data-test-id=layout-section-hover-overlay] {
pointer-events: none !important;
}
/**
* The page id printed into a hero for the editor.
*
* It is there to be copied into HubDB, so it has to be easy to find in a hero
* full of real content — hence a heading's size and the brand blue, rather than
* the body copy it would otherwise be mistaken for.
*
* The templates print it behind `request.postDict.inpageEditorUI`, so it never
* reaches a visitor.
*/
.editor-page-id {
font-size: var(--text-610);
letter-spacing: -0.05rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 500;
color: var(--color-blue);
}
.scroll-stop {
overflow: hidden;
}
#CookieBanner {
position: fixed;
z-index: 2147483645;
min-height: 100vh;
min-width: 100vw;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 auto;
pointer-events: none;
display: none;
}
#CookieBanner.is-visible-cookie-banner {
display: flex;
align-items: center;
justify-content: center;
}
#CookieBanner,
#CookieBanner * {
box-sizing: border-box;
text-underline-offset: 0.125em;
outline-offset: 3px;
}
#CookieBannerOverlay {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: auto;
z-index: 10;
}
.is-visible-cookie-banner #CookieBannerOverlay {
animation: cookieBannerFadeIn 0.25s ease-in-out;
animation-fill-mode: forwards;
}
.is-closing-cookie-banner #CookieBannerOverlay {
animation: cookieBannerFadeOut 0.25s ease-in-out;
animation-fill-mode: forwards;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
#CookieBanner * {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
#CookieBannerNotice {
color: var(--color-text);
max-width: 1080px;
padding: 40px 28px;
overflow: auto;
max-height: 100vh;
max-height: calc(100vh - 24px);
width: 100%;
width: calc(100% - 24px);
max-width: 1080px;
background: var(--color-background);
margin: 0 auto;
z-index: 500;
pointer-events: auto;
}
@media (min-width: 450px) {
#CookieBannerNotice {
padding: 24px;
max-height: calc(100vh - 48px);
width: calc(100% - 48px);
}
}
.is-visible-cookie-banner #CookieBannerNotice {
animation: cookieBannerSlideIn 0.25s ease-in-out;
animation-fill-mode: forwards;
}
.is-closing-cookie-banner #CookieBannerNotice {
animation: cookieBannerSlideOut 0.25s ease-in-out;
animation-fill-mode: forwards;
pointer-events: none;
}
@media (min-width: 800px) {
#CookieBannerNotice {
padding: 48px;
max-width: 49rem;
}
}
@media (min-width: 1000px) {
#CookieBannerNotice {
padding: 64px;
}
}
/**
* Utils
*/
@keyframes cookieBannerFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes cookieBannerFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes cookieBannerSlideIn {
0% {
opacity: 0;
transform: translateY(96px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cookieBannerSlideOut {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(96px);
}
}
#CookieBanner button > * {
pointer-events: none;
}
#CookieBanner ul,
#CookieBanner li {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
}
#CookieBanner .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/**
* Content
*/
#CookieBanner .cookiebanner__main__inner {
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 800px) {
#CookieBanner .cookiebanner__main__content {
margin-right: 48px;
}
}
#CookieBanner .cookiebanner__main__title {
font-size: var(--heading-400);
letter-spacing: -0.06rem;
line-height: 1.15;
font-family: var(--font-family-title);
font-weight: 500;
margin-bottom: 1rem;
}
#CookieBanner .cookiebanner__main__description {
font-size: var(--text-400);
letter-spacing: -0.02rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 400;
margin-top: 0;
margin-bottom: 0;
}
/**
* Buttons
*/
#CookieBanner .cookiebanner__buttons {
margin: 0;
padding: 0;
list-style: none;
}
#CookieBanner .cookiebanner__buttons li::after,
#CookieBanner .cookiebanner__buttons li::before {
display: none;
}
#CookieBanner .cookiebanner__buttons {
margin-top: var(--space-l);
}
#CookieBanner .cookiebanner__buttons ul {
display: flex;
flex-direction: row;
}
@media (max-width: 800px) {
#CookieBanner .cookiebanner__buttons ul {
flex-direction: column;
}
#CookieBanner .cookiebanner__buttons ul * {
width: 100%;
}
}
#CookieBanner .cookiebanner__buttons__details {
min-width: 1px;
padding: 0;
border-radius: 0;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
border: 0;
background: rgba(255, 255, 255, 0);
}
#CookieBanner .cookiebanner__buttons__details:hover, #CookieBanner .cookiebanner__buttons__details:focus {
background: unset;
}
#CookieBanner .cookiebanner__buttons__details {
color: var(--color-link);
height: 100%;
}
/**
* Details
*/
#CookieBanner .cookiebanner__details {
margin-top: var(--space-s);
display: none;
}
#CookieBanner.is-details-open .cookiebanner__details {
display: block;
}
#CookieBanner .cookiebanner__details__inner {
max-width: 1080px;
margin: 0 auto;
}
/**
* Preferences
*/
#CookieBanner .cookiebanner__details__preferences {
display: flex;
flex-direction: column;
margin-top: var(--space-s);
}
#CookieBanner .cookiebanner__details__preferences__options {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0;
margin: 0;
border: 0;
min-width: 0;
}
@media (min-width: 540px) {
#CookieBanner .cookiebanner__preference__heading {
display: flex;
align-items: center;
}
}
#CookieBanner .cookiebanner__preference {
background: var(--color-grey-200);
padding: var(--space-xs);
width: 100%;
margin-bottom: var(--space-xs);
}
#CookieBanner .cookiebanner__preference::last-of-type {
margin-bottom: 0;
}
/* Hide the input */
#CookieBanner .cookiebanner__preference input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
}
#CookieBanner .cookiebanner__preference__label {
display: flex;
align-items: center;
flex-grow: 1;
flex-direction: column;
}
@media (min-width: 540px) {
#CookieBanner .cookiebanner__preference__label {
flex-direction: row;
}
}
#CookieBanner .cookiebanner__preference input:focus + .cookiebanner__preference__label,
#CookieBanner .cookiebanner__preference__label:hover {
text-decoration: underline;
cursor: pointer;
}
#CookieBanner .cookiebanner__preference__ui {
flex-shrink: 0;
display: flex;
align-items: center;
width: 2.5rem;
height: 1.375rem;
background: #868e96;
border-radius: 40px;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
#CookieBanner .cookiebanner__preference__text {
display: block;
margin-top: 12px;
}
@media (min-width: 540px) {
#CookieBanner .cookiebanner__preference__text {
margin-left: 16px;
margin-top: 0;
}
}
#CookieBanner .cookiebanner__preference__title {
font-size: var(--text-500);
letter-spacing: -0.0225rem;
line-height: 1.5;
font-family: var(--font-family-base);
font-weight: 400;
}
#CookieBanner .cookiebanner__preference__toggle {
margin: 0;
padding: 0;
list-style: none;
}
#CookieBanner .cookiebanner__preference__toggle li::after,
#CookieBanner .cookiebanner__preference__toggle li::before {
display: none;
}
#CookieBanner .cookiebanner__preference__toggle {
background: transparent;
color: var(--color-link);
text-decoration: underline;
}
@media (max-width: 800px) {
#CookieBanner .cookiebanner__preference__toggle {
margin-top: var(--space-2xs);
width: 100%;
}
}
#CookieBanner .cookiebanner__preference__toggle:hover,
#CookieBanner .cookiebanner__preference__toggle:focus,
#CookieBanner .cookiebanner__preference__toggle:active {
text-decoration: underline;
}
#CookieBanner .cookiebanner__preference__more {
display: none;
margin-top: 24px;
}
#CookieBanner .cookiebanner__preference__more__list {
margin-top: 16px;
width: 100%;
overflow: auto;
border: 1px solid rgba(0, 0, 0, 0.25);
background: linear-gradient(to right, #f4f4f4 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #f4f4f4 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: #f4f4f4;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100%, 0 0, 100%;
background-attachment: local, local, scroll, scroll;
}
#CookieBanner .cookiebanner__preference__more__list table {
width: 100%;
}
#CookieBanner .cookiebanner__preference__more__list tbody td {
background: transparent;
border-top: 1px solid rgba(0, 0, 0, 0.25);
}
#CookieBanner .cookiebanner__preference__more__list tbody .CybotCookiebotDialogDetailBodyContentCookieTypeTableEmpty {
border-top: 0;
}
#CookieBanner .cookiebanner__preference__more__list a {
text-decoration: underline;
color: inherit;
}
#CookieBanner .cookiebanner__preference__more__list th,
#CookieBanner .cookiebanner__preference__more__list td {
vertical-align: baseline;
min-width: 176px;
text-align: left;
padding: 6px;
background: transparent;
font-size: 16px;
word-break: break-word;
}
@media (min-width: 800px) {
#CookieBanner .cookiebanner__preference__more__list th,
#CookieBanner .cookiebanner__preference__more__list td {
padding: 8px;
}
}
#CookieBanner .cookiebanner__preference__more.is-open {
display: block;
}
#CookieBanner .cookiebanner__preference__ui__handle {
display: flex;
margin-left: 0.25rem;
justify-content: center;
align-items: center;
width: 1rem;
height: 1rem;
background: #fff;
border-radius: 50%;
transition: all 0.2s ease-in-out;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
#CookieBanner .cookiebanner__preference input:checked + label .cookiebanner__preference__ui {
background: #16a085;
}
#CookieBanner .cookiebanner__preference input:checked + label .cookiebanner__preference__ui__handle {
margin-left: 50%;
background: #fff;
}
#CookieBanner .cookiebanner__details__preferences__buttons {
text-align: center;
margin-top: 8px;
}
#CookieBanner .cookiebanner__accept-selection {
width: 100%;
}
/**
* Updated
*/
#CookieBanner .cookiebanner__details__updated {
margin-top: 24px;
text-align: center;
}
#CookieBanner .cookiebanner__details__updated p {
font-size: 15px;
}