@charset "UTF-8"; .cookieconsent { position: fixed; bottom: 0; left: 0; width: 100%; background-color: white; box-shadow: 0 30px 50px 20px rgba(black, 0.15); padding: 24px 0; z-index: 102; transform: translate3d(0, 100%, 0); opacity: 0; transition: 0.3s ease; &.show { opacity: 1; transform: translate3d(0, 0, 0); } .col { display: flex; align-items: center; justify-content: space-between; padding: 0; } .button-box { padding-left: 30px; } h6 { font-size: 17px; line-height: 1.3; font-weight: 700; } p { font-size: 15px; &:last-child { margin-bottom: 0; } } h5, p { margin: 6px 0; } .btn { transition: 0.3s ease; margin: 8px 0; min-height: 46px; padding: 8px 18px; border-radius: 18px; &:active, &:focus { color: white; } } } body { #CybotCookiebotDialog { position: fixed; bottom: 0; left: 0; width: 100%; background-color: white; box-shadow: 0 30px 50px 20px rgba(black, 0.15); padding: 16px 0 24px; top: auto !important; @media(max-width: 767px) { padding: 4px 0 8px; } } #CybotCookiebotDialogPoweredbyLink { display: none; } #CybotCookiebotDialogBody, #CybotCookiebotDialogDetailBody { width: 1230px; max-width: 100%; padding: 0 60px; margin: 0 auto; display: flex; flex-direction: column; box-sizing: border-box; a, a:hover { color: inherit !important; } @media(max-width: 1199px) { padding: 0 40px; } @media(max-width: 999px) { padding: 0 30px; } @media(max-width: 767px) { padding: 0 20px; } } #CybotCookiebotDialogDetailBody { display: block; } #CybotCookiebotDialogBodyLevelButtons { margin-left: 0; order: -1; } #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper, #CybotCookiebotDialogBodyLevelButtons { float: none !important; margin-left: 0 !important; } #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper { order: 1; margin: 6px 0; @media(min-width: 568px) and (max-width: 767px) { display: flex !important; justify-content: flex-end; margin-bottom: 10px; } @media(min-width: 1000px) { margin: 10px 0 4px; } } #CybotCookiebotDialogBodyLevelButtonsRow { @media(max-width: 767px) { display: block; } } #CybotCookiebotDialogBodyContent { padding-left: 0 !important; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; line-height: 1.5; color: $color-primary; color: var(--theme-color-primary, $color-primary); @media(max-width: 767px) { padding-bottom: 4px !important; } } #CybotCookiebotDialogBodyContentTitle { font-size: 17px; line-height: 1.3; font-weight: 700; color: $color-primary; color: var(--theme-color-primary, $color-primary); margin: 2px 0 12px; } #CybotCookiebotDialogBodyLevelWrapper { display: flex !important; flex-direction: column; } #CybotCookiebotDialogBodyLevelButtonsSelectPane { border: 0; padding: 6px 0; } a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, a#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll { font-family: "Korb"; display: inline-block; position: relative; color: $color-primary; color: var(--theme-color-primary, $color-primary); background-color: $color-secondary; background-color: var(--theme-color-secondary, $color-secondary); padding: 5px 18px; border-radius: 12px; margin-right: 10px; text-decoration: none; transition: 0.3s ease; @include focusvisible; font-weight: 400; font-size: 18px; line-height: 30px; height: auto; width: auto !important; margin: 0 8px; border: 0; &:hover { color: $color-primary; color: var(--theme-color-primary, $color-primary); } &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } @media(max-width: 567px) { margin: 8px 0; } } a#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll { background-color: $color-primary-light-04; background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04); } .CybotCookiebotDialogBodyLevelButtonWrapper, #CybotCookiebotDialog div { line-height: 1.5; } .CybotCookiebotDialogBodyLevelButtonWrapper { @media(max-width: 567px) { min-width: calc(50% - 14px); } } input[type=checkbox].CybotCookiebotDialogBodyLevelButton + label { font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.5 !important; color: $color-primary !important; color: var(--theme-color-primary, $color-primary) !important; height: auto; background-image: none !important; padding-left: 28px !important; margin-right: 10px; @media(max-width: 767px) { font-size: 16px; padding-top: 1px; margin-bottom: 5px; } &:before, &:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: 3px; border: 2px solid $color-primary; border: 2px solid var(--theme-color-primary, $color-primary); box-sizing: border-box !important; } &:after { @include icon-check-1; color: white; font-size: 11px; line-height: 15px; padding-top: 1px; padding-right: 1px; text-align: center; font-family: "Icons"; opacity: 0; background-color: $color-primary; background-color: var(--theme-color-primary, $color-primary); } } input[type=checkbox].CybotCookiebotDialogBodyLevelButton:checked + label:after { opacity: 1; } input[type=checkbox].CybotCookiebotDialogBodyLevelButton.CybotCookiebotDialogBodyLevelButtonDisabled + label { color: #636D76; &:before, &:after { border-color: #636D76; } &:after { background-color: #636D76; } } #CybotCookiebotDialogBodyLevelDetailsWrapper { display: inline-block; background-color: transparent; border: 0; height: auto; padding: 0; } a#CybotCookiebotDialogBodyLevelDetailsButton { position: relative; font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.5 !important; color: $color-primary; color: var(--theme-color-primary, $color-primary); height: auto; background-image: none !important; text-decoration: none; display: block; padding: 5px 26px 5px 5px; @media(max-width: 767px) { font-size: 16px; padding-bottom: 0; padding-top: 0; } &:focus, &:active { color: $color-primary; color: var(--theme-color-primary, $color-primary); } &:after { @include icon-small-arrow-right-simple; font-family: "Icons"; position: absolute; right: 0; font-size: 20px; line-height: 1; top: 50%; margin-top: -10px; transform: rotate(90deg); } } } .desktop body { a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { &:hover { box-shadow: 0 0 0 4px rgba($color-secondary, 0.4); } } a#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll:hover { box-shadow: 0 0 0 4px rgba($color-primary-light-04, 0.4); } } .cookieconsent-optout-marketing{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: $color-primary-light-04; background-color: var(--theme-color-primary-dimmed-04, $color-primary-light-04); .accept-marketing-container{ position: absolute; min-width: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); } }