diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index e3037a86..cca36044 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1 +1,34 @@
+
+
+ window.dataLayer = window.dataLayer || [];
+ function gtag() {
+ dataLayer.push(arguments);
+ }
+ gtag("consent", "default", {
+ ad_storage: "denied",
+ analytics_storage: "denied",
+ functionality_storage: "denied",
+ personalization_storage: "denied",
+ security_storage: "granted",
+ wait_for_update: 500,
+ });
+ gtag("set", "ads_data_redaction", true);
+ gtag("set", "url_passthrough", true);
+
+ gtag('js', new Date());
+ gtag('config', 'G-FK58C1XN5P');
+
+
diff --git a/.storybook/manager.js b/.storybook/manager.js
index 506761a6..05acceac 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,5 +1,6 @@
import { addons } from '@storybook/manager-api'
import rusticTheme from './rusticTheme'
+import '../src/cookiebot.css'
addons.setConfig({
theme: rusticTheme,
diff --git a/src/cookiebot.css b/src/cookiebot.css
new file mode 100644
index 00000000..062b7e92
--- /dev/null
+++ b/src/cookiebot.css
@@ -0,0 +1,321 @@
+/* This styling replaces the Cookiebot logo in the widget with text */
+#CookiebotWidget > button.CookiebotWidget-logo {
+ background: black;
+ width: 160px;
+ padding: 13px;
+ border-radius: 24px;
+}
+
+button.CookiebotWidget-logo:before {
+ font-weight: bold;
+ content: 'Manage Cookies';
+ left: 20px;
+ color: white;
+ visibility: visible;
+}
+
+.CookiebotWidget-open > button.CookiebotWidget-logo {
+ display: none !important;
+}
+
+.CookiebotWidget-logo > svg {
+ display: none !important;
+}
+
+/* End of Cookiebot widget styling */
+
+/*
+This styling is to customize the cookiebot template
+*/
+
+body > #CybotCookiebotDialog {
+ padding-top: 24px;
+ padding-bottom: 36px;
+ width: 100% !important;
+ box-shadow: 4px 4px 14px 4px #0000001c;
+ border-radius: 0px;
+ font-family: Roboto, sans-serif;
+ color: #505050;
+ transform: none !important;
+ max-height: calc(100% - 24px) !important;
+ overflow: scroll;
+}
+
+body > #CybotCookiebotDialog > #CybotCookiebotDialogBody {
+ max-width: 96%;
+ padding-right: 0px !important;
+}
+
+/* Text content */
+
+#CybotCookiebotDialogBody > #CybotCookiebotDialogBodyContent {
+ padding: 12px 0 12px 0;
+ padding-left: 0px !important;
+}
+
+#CybotCookiebotDialogBodyContent > #CybotCookiebotDialogBodyContentTitle {
+ font-size: 18pt;
+ margin: 2px 0 12px;
+ color: #161616;
+}
+
+#CybotCookiebotDialogBodyContent > #CybotCookiebotDialogBodyContentText {
+ color: #303030;
+}
+
+/* Logo image */
+
+#CybotCookiebotDialogPoweredbyLink > #CybotCookiebotDialogPoweredbyImage {
+ width: 0px;
+}
+
+/* Buttons */
+
+#CybotCookiebotDialogBody
+ > #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper {
+ display: inline;
+ float: right;
+ width: 60%;
+ margin-bottom: 12px;
+ text-transform: capitalize;
+}
+
+#CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
+ width: auto !important;
+ max-width: 200px;
+ padding: 8px 52px;
+ border-radius: 16px;
+ color: #1e0c04;
+ background-color: transparent;
+ border: 1.5px #d0c4be solid;
+}
+
+#CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
+ width: auto !important;
+ max-width: 200px;
+ padding: 8px 52px;
+ border-radius: 16px;
+ color: #1e0c04;
+ background-color: transparent;
+ border: 1.5px #d0c4be solid;
+}
+
+#CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
+ width: auto !important;
+ max-width: 200px;
+ padding: 8px 52px;
+ border-radius: 16px;
+ color: #1e0c04;
+ background-color: #ff6928;
+ border: 1.5px #d0c4be solid;
+}
+
+/* Selection */
+
+#CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtons
+ > #CybotCookiebotDialogBodyLevelButtonsTable {
+ width: auto !important;
+ display: block !important;
+ margin: 0 !important;
+}
+
+#CybotCookiebotDialogBodyLevelButtonsRow {
+ height: 41px;
+}
+
+#CybotCookiebotDialogBodyLevelButtonsSelectPane,
+#CybotCookiebotDialogBodyLevelDetailsWrapper {
+ line-height: 28px !important;
+}
+
+#CybotCookiebotDialogBodyLevelButtonsSelectPane {
+ border-radius: 8px 0 0 8px !important;
+}
+
+#CybotCookiebotDialogBody
+ > #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtons {
+ margin-left: 1px !important;
+ display: inline;
+ float: left;
+ width: 38%;
+}
+
+#CybotCookiebotDialogBodyLevelButtonsTable
+ > #CybotCookiebotDialogBodyLevelButtonsRow
+ > #CybotCookiebotDialogBodyLevelDetailsWrapper {
+ border-radius: 0px 8px 8px 0;
+ background-color: #f7f7f7;
+ padding: 6px 0 3px 4px !important;
+}
+
+#CybotCookiebotDialogBodyLevelButtonsRow
+ > #CybotCookiebotDialogBodyLevelDetailsWrapper
+ > #CybotCookiebotDialogBodyLevelDetailsButton {
+ color: #505050;
+ font-weight: 600;
+}
+
+#CybotCookiebotDialog
+ > #CybotCookiebotDialogDetail
+ > #CybotCookiebotDialogDetailBody {
+ max-width: 96% !important;
+ margin-top: 5px;
+}
+
+#CybotCookiebotDialogDetailBody
+ > #CybotCookiebotDialogDetailBodyContent
+ > #CybotCookiebotDialogDetailBodyContentTextOverview {
+ width: 100%;
+ display: block;
+}
+
+.CybotCookiebotDialogBodyLevelButtonWrapper > label {
+ text-transform: none !important;
+ font-weight: 600 !important;
+ letter-spacing: unset;
+}
+
+/*
+ Responsiveness
+ */
+
+/* Adjustments to Laptop */
+
+@media screen and (max-width: 1115px) {
+ #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
+ padding: 8px 24px;
+ }
+
+ #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
+ padding: 8px 24px;
+ }
+
+ #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
+ padding: 8px 24px;
+ }
+
+ #CybotCookiebotDialogBodyLevelButtonsTable
+ > #CybotCookiebotDialogBodyLevelButtonsRow
+ > #CybotCookiebotDialogBodyLevelDetailsWrapper {
+ padding: 12px 0 3px 4px !important;
+ }
+}
+
+/* Tablet */
+
+@media screen and (max-width: 834px) {
+ #CybotCookiebotDialogBody
+ > #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper {
+ width: 100%;
+ display: flex !important;
+ }
+
+ #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
+ padding: 8px 24px;
+ margin-left: 0px !important;
+ }
+
+ #CybotCookiebotDialogBody
+ > #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtons {
+ width: 100%;
+ }
+
+ #CybotCookiebotDialogBodyLevelButtonsTable
+ > #CybotCookiebotDialogBodyLevelButtonsRow
+ > #CybotCookiebotDialogBodyLevelDetailsWrapper {
+ padding: 6px 0 3px 4px !important;
+ }
+}
+
+/* Mobile */
+
+@media screen and (max-width: 605px) {
+ body > #CybotCookiebotDialog {
+ padding-top: 12px;
+ }
+
+ body > #CybotCookiebotDialog > #CybotCookiebotDialogBody {
+ max-width: 96%;
+ min-width: 250px;
+ }
+
+ #CybotCookiebotDialogBody
+ > #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper {
+ width: 100%;
+ flex-direction: column;
+ }
+
+ #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
+ max-width: 100%;
+ margin-left: 0px !important;
+ }
+
+ #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
+ max-width: 100%;
+ margin-left: 0px !important;
+ }
+
+ #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper
+ > #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
+ max-width: 100%;
+ margin-left: 0px !important;
+ }
+
+ #CybotCookiebotDialogBody
+ > #CybotCookiebotDialogBodyLevelWrapper
+ > #CybotCookiebotDialogBodyLevelButtons {
+ width: auto;
+ }
+
+ #CybotCookiebotDialogBodyContent > #CybotCookiebotDialogBodyContentTitle {
+ font-size: 16px;
+ }
+
+ #CybotCookiebotDialogBody > #CybotCookiebotDialogBodyContent {
+ padding: 6px 0 6px 0;
+ padding-left: 0px !important;
+ }
+
+ #CybotCookiebotDialogBodyLevelButtonsTable
+ > #CybotCookiebotDialogBodyLevelButtonsRow
+ > #CybotCookiebotDialogBodyLevelDetailsWrapper {
+ padding: 6px 0 3px 4px !important;
+ }
+}
+
+@media screen and (max-width: 496px) {
+ #CybotCookiebotDialogBodyLevelButtonsTable
+ > #CybotCookiebotDialogBodyLevelButtonsRow
+ > #CybotCookiebotDialogBodyLevelDetailsWrapper {
+ padding: 10px 0 3px 4px !important;
+ }
+}
+
+/*
+ End of Cookies banner styling
+ */