Cookie Banner

Ready

HTML
Notes
View
Context
Assets
Info


        
        <div id="onetrust-consent-sdk" data-nosnippet="true">
    <div class="onetrust-pc-dark-filter ot-fade-in" style="z-index:2147483645;"></div>
    <div id="onetrust-banner-sdk" class="otCenterRounded default ot-wo-title vertical-align-content" tabindex="0" role="region" aria-label="Cookie banner">
        <div class="ot-sdk-container" role="dialog" aria-modal="true" aria-label="Privacy">
            <div class="ot-sdk-row">
                <div id="onetrust-group-container" class="ot-sdk-twelve ot-sdk-columns">
                    <div id="onetrust-policy">
                        <div class="banner-header">
                            <div class="banner_logo"></div>
                        </div>
                        <div id="onetrust-policy-text">
                            <p align="justify">By clicking 'Accept Cookies', you allow us to analyze your use of our services to improve them. Alternatively, you can choose to 'Reject All' which will only keep the “strictly necessary” cookie category on, to ensure the website’s functionality. You can manage your preferences and change your choices at any time by clicking on "Cookie Settings". For more information, please refer to our
                                <a href="https://www.verisure.com/cookies-policy">Cookie Policy.
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div id="onetrust-button-group-parent" class="ot-sdk-twelve ot-sdk-columns has-reject-all-button">
                    <div id="onetrust-button-group">
                        <button id="onetrust-pc-btn-handler" class="cookie-setting-link">Cookie Settings</button>
                        <div class="banner-actions-container">
                            <button id="onetrust-reject-all-handler">Reject All</button>
                            <button id="onetrust-accept-btn-handler">Accept Cookies</button>
                        </div>
                    </div>
                </div><!-- Close Button -->
                <div id="onetrust-close-btn-container"></div><!-- Close Button END-->
            </div>
        </div>
    </div>
</div>

No notes defined.


        <div id="onetrust-consent-sdk" data-nosnippet="true">
	<div class="onetrust-pc-dark-filter ot-fade-in" style="z-index:2147483645;"></div>
	<div id="onetrust-banner-sdk" class="otCenterRounded default ot-wo-title vertical-align-content" tabindex="0" role="region" aria-label="Cookie banner">
		<div class="ot-sdk-container" role="dialog" aria-modal="true" aria-label="Privacy">
			<div class="ot-sdk-row">
				<div id="onetrust-group-container" class="ot-sdk-twelve ot-sdk-columns">
					<div id="onetrust-policy">
						<div class="banner-header">
							<div class="banner_logo"></div>
						</div>
						<div id="onetrust-policy-text">
							<p align="justify">By clicking 'Accept Cookies', you allow us to analyze your use of our services to improve them. Alternatively, you can choose to 'Reject All' which will only keep the “strictly necessary” cookie category on, to ensure the website’s functionality. You can manage your preferences and change your choices at any time by clicking on "Cookie Settings". For more information, please refer to our
								<a href="https://www.verisure.com/cookies-policy">Cookie Policy.
								</a>
							</p>
						</div>
					</div>
				</div>
				<div id="onetrust-button-group-parent" class="ot-sdk-twelve ot-sdk-columns has-reject-all-button">
					<div id="onetrust-button-group">
						<button id="onetrust-pc-btn-handler" class="cookie-setting-link">Cookie Settings</button>
						<div class="banner-actions-container">
							<button id="onetrust-reject-all-handler">Reject All</button>
							<button id="onetrust-accept-btn-handler">Accept Cookies</button>
						</div>
					</div>
				</div><!-- Close Button --><div id="onetrust-close-btn-container"></div><!-- Close Button END--></div>
		</div>
	</div>
</div>


        
            
            /* No context defined. */

File:

Content:


                                #onetrust-consent-sdk {
	#onetrust-pc-sdk,
	#ot-search-cntr,
	#onetrust-pc-sdk .ot-switch.ot-toggle,
	#onetrust-pc-sdk ot-grp-hdr1 .checkbox,
	#onetrust-pc-sdk #ot-pc-title::after,
	#onetrust-pc-sdk #ot-sel-blk,
	#onetrust-pc-sdk #ot-fltr-cnt,
	#onetrust-pc-sdk #ot-anchor,
	#vendor-search-handler {
		background-color: $color-grey-background !important;
	}

	#onetrust-banner-sdk {
		display: flex;
		width: 616px !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 32px !important;
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		background-color: #f2f2f2 !important;
		border-radius: 0 !important;

		#onetrust-accept-btn-handler {
			@extend %t-body-s;
			font-weight: 500 !important;
			border-radius: 2rem;
			padding: 12px 18px !important;
			background: $color-main !important;
			border: none !important;
		}

		#onetrust-reject-all-handler {
			border-radius: 2rem;
			color: $color-main !important;
			@extend %t-body-s;
			letter-spacing: 0px !important;
			font-weight: 500 !important;
			border: none !important;
			display: flex !important;
			min-width: unset;
			justify-content: center !important;
			padding: 12px 18px !important;
			align-items: center !important;
			margin-right: 0 !important;
			background-color: $color-grey-background !important;
			box-shadow:
				-1px -1px 0px 0px #fff inset,
				-2px -2px 2px 0px $color-grey-2 inset,
				-1px -1px 0px 0px #fff,
				-2px -2px 2px 0px $color-grey-2;
		}

		&.otCenterRounded {
			right: unset;
		}

		#onetrust-button-group-parent {
			padding: 20px 30px;
		}
		#onetrust-policy-text {
			margin: 0px !important;
		}

		#onetrust-button-group {
			display: flex !important;
			justify-content: space-between !important;
			align-items: center !important;
		}

		button {
			margin-bottom: 0px !important;
		}

		#onetrust-policy {
			margin-top: 0px !important;

			&::before {
				@extend %t-body-sm;
				content: 'Privacy Preference Center';
				display: block;
				font-weight: 500 !important;
				color: $color-black !important;
				padding: 16px 24px !important;
			}
		}

		.has-reject-all-button .banner-actions-container {
			display: flex !important;
			padding: 10px 8px 8px 10px !important;
			justify-content: center !important;
			align-items: center !important;
			gap: 8px !important;
			border-radius: 9999px !important;
			background: $color-grey-background !important;
			box-shadow:
				8px 8px 16px 0px #dcddde,
				-8px -8px 16px 0px #fff !important;
		}

		.has-reject-all-button #onetrust-pc-btn-handler.cookie-setting-link {
			@extend %t-body-s, %link-underline-reversed;
			letter-spacing: 0px !important;
			font-weight: 500 !important;
			display: flex !important;
			align-items: center !important;
			justify-content: start !important;
			outline: none !important;
			padding: 0 !important;
			min-width: auto;
			width: auto;
		}
	}

	#onetrust-pc-sdk {
		width: 826px !important;
		max-width: 826px !important;

		*:focus,
		.ot-vlst-cntr > a:focus {
			outline: none !important;
		}
		.ot-host-item > button:focus,
		.ot-ven-item > button:focus {
			border: 0 !important;
		}

		#no-results p {
			@extend %t-body-s;
			color: $color-grey-5;
			/* Styles for the paragraph text content */
		}

		#no-results p span {
			@extend %t-body-s;
			font-weight: 500 !important;
			color: $color-black;
			/* Different styles for the span element */

			/* Add any other specific styles for the span */
		}

		.ot-pc-footer-logo img {
			display: none;
		}

		.ot-active-menu {
			border: none;
			color: #232635 !important;
			border-bottom: 1px solid $color-grey-2 !important;
			box-sizing: border-box !important;

			h3 {
				color: $color-black !important;
				@extend %t-body-xs;
				font-weight: 500 !important;
			}
		}

		.category-menu-switch-handler {
			color: $color-grey-5 !important;
			border: none !important;
			border-bottom: 1px solid $color-grey-2 !important;
			background-color: $color-grey-background !important;
			box-sizing: border-box !important;
			padding: 12px 32px 12px 24px !important;

			h3 {
				font-weight: 400 !important;
			}
		}

		h3 {
			color: $color-grey-5 !important;
			@extend %t-body-xs;
		}

		.ot-pc-logo.ot-pc-logo {
			display: none;
		}

		#ot-pc-title {
			color: $color-black !important;
			@extend %t-body-sm;
			font-weight: 500 !important;
		}

		.ot-pc-header {
			display: flex !important;
			align-items: center !important;
			justify-content: space-between !important;
			width: unset !important;
			min-height: unset;
			padding: 16px 24px;
		}

		.ot-title-cntr {
			padding-left: 0rem !important;
			width: 100% !important;
		}

		.ot-close-cntr {
			position: absolute !important;
			transform: translateY(-50%) !important;
			margin-right: 15px !important;
		}

		.ot-pc-footer button {
			@extend %t-body-s;
			border-radius: 9999px !important;
			min-width: 140px !important;
			box-shadow: none !important;
			background: transparent !important;
			font-weight: 500 !important;
			margin-top: 0px !important;
			padding: 12px 18px !important;
			margin-bottom: 0px !important;
		}

		.ot-pc-footer button.save-preference-btn-handler {
			box-shadow:
				-1px -1px 0px 0px #fff inset,
				-2px -2px 2px 0px $color-grey-2 inset,
				-1px -1px 0px 0px #fff,
				-2px -2px 2px 0px $color-grey-2 !important;
			color: $color-main !important;
			border: none !important;
			background-color: $color-grey-background !important;
			margin-left: 0px !important;
			margin-right: 8px;
		}

		.ot-chkbox input:checked + label::after {
			content: '' !important;
			display: inline-block !important;
			width: 12px !important;
			height: 10px !important;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1.625 5L4.75 8.125L10.375 2.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
			background-repeat: no-repeat !important;
			background-position: center !important;
			background-size: contain !important;
			position: absolute !important;

			border: none !important;
			border-left: none !important;
			border-bottom: none !important;
			transform: none !important;

			border-radius: 0 !important;
		}

		#ot-host-lst .ot-host-info {
			background-color: $color-grey-1 !important;
		}

		.ot-host-opt li > div div {
			@extend %t-body-xs;
		}

		.ot-pc-footer button#accept-recommended-btn-handler {
			background: $color-main !important;
			color: $color-white !important;
			border: none !important;
		}

		.ot-pc-footer-logo {
			display: none !important;
		}

		&:active {
			color: $color-black;
		}

		.ot-always-active {
			color: $color-main !important;
			font-weight: 300 !important;
		}

		#ot-host-lst .ot-acc-hdr .ot-host-expand {
			color: $color-main !important;
			font-weight: 500 !important;
		}

		svg {
			color: $color-main !important;
		}

		#ot-pc-lst #ot-lst-title h3 {
			color: $color-main !important;
		}

		#ot-back-arw {
			color: $color-main !important;
		}

		#ot-host-lst li {
			margin-top: 0px !important;
			border-bottom: none !important;
		}
		#ot-host-lst li:last-child {
			border-bottom: 1px solid $color-grey-2 !important;
		}

		#ot-host-lst {
			margin-left: unset;
		}

		#ot-pc-hdr {
			display: flex !important;
			align-items: center !important;
			height: 52px !important;
			border-bottom: 1px solid $color-grey-2 !important;
			justify-content: space-between !important;
			padding: 24px !important;
			width: unset;

			input {
				height: 44px !important;
				width: 100% !important;
				float: none !important;
				display: flex !important;
				justify-content: center !important;
				align-items: center !important;
			}

			input::placeholder {
				font-style: normal !important;
			}
		}

		#ot-pc-lst #ot-lst-title h3 {
			@extend %t-body-s;
			font-weight: 500;
		}

		.ot-lst-subhdr {
			margin-left: auto !important;
			display: flex !important;
			align-items: center !important;
			bottom: 0px !important;
		}

		.ot-chkbox input:checked ~ label::before {
			background-color: $color-main !important;
			border: 1px solid $color-main !important;
		}

		.ot-chkbox label::before {
			border: 1px solid $color-grey-4 !important;
		}

		#filter-btn-handler {
			background-color: $color-main !important;
			width: 44px !important;
			height: 44px !important;
			border-radius: 9999px;
			border: none !important;
		}

		#filter-btn-handler path {
			fill: none !important;
			stroke-width: 40px !important;
			stroke: $color-white !important;
		}

		#filter-btn-handler svg {
			transform: translate(-50%, -50%) scaleX(-1) !important;
		}

		.ot-fltr-scrlcnt {
			position: relative;
		}

		.ot-fltr-scrlcnt::before {
			content: '';
			display: block;
			height: 1px;
			width: 100%;
			background: $color-grey-2;
			position: absolute;
			margin-bottom: 1.5rem !important;
			margin-right: 0 !important;
		}

		.ot-fltr-opts {
			margin-top: 20px !important;
		}

		.ot-fltr-opt span {
			@extend %t-body-s;
			font-weight: 400;
		}

		.ot-fltr-opt {
			margin-bottom: 12px !important;
		}

		#ot-fltr-cnt {
			padding-right: 0 !important;
			height: unset !important;
			margin: 38px 24px 0 0;
		}

		#ot-fltr-modal button {
			font-weight: 500;
			@mixin clamp line-height, 18, 20, $breakpoint-xs, $breakpoint-xl;
		}

		.ot-fltr-btns {
			display: flex !important;
			padding: 10px 8px 8px 10px !important;
			justify-content: center !important;
			gap: 8px !important;
			border-radius: 9999px !important;
			background: $color-grey-background !important;
			box-shadow:
				8px 8px 16px 0px #dcddde,
				-8px -8px 16px 0px #fff !important;
			margin: 16px !important;
		}
		.ot-fltr-opts:after {
			content: '';
			display: block;
			height: 1px;
			width: 100%;
			background: $color-grey-2;
			margin-top: 1.5rem !important;
		}

		.ot-desc-cntr {
			margin-left: unset !important;
		}

		.ot-pc-footer {
			display: flex !important;
			justify-content: center !important;
			gap: 8px !important;
			border-radius: 9999px !important;
			background: $color-grey-background !important;
			box-shadow:
				8px 8px 16px 0px #dcddde,
				-8px -8px 16px 0px #fff !important;
			width: auto !important;
			min-width: unset !important;
			max-width: unset !important;
			padding: 10px 8px 8px 10px !important;
			border: none !important;
			right: 16px !important;
			bottom: 16px !important;
		}

		#ot-anchor {
			display: none !important;
		}

		#ot-filter-list-header {
			@extend %t-body-xs;
			color: $color-black !important;
			font-weight: 500 !important;
		}

		button * {
			fill: $color-main !important;
		}

		.ot-grp-desc {
			@extend %t-body-xs;
			display: block;
			flex-direction: column !important;
			gap: 24px !important;
		}

		h4 {
			@extend %t-body-xs;
			font-weight: 500;
			color: $color-grey-5;
		}

		#ot-host-lst li.ot-host-info {
			@extend %t-body-xs !important;
			font-weight: 400;
			color: $color-black;
			padding: 20px 24px;
			width: calc(100% - 48px);
		}

		.ot-host-opt li > div div {
			font-size: unset !important;
		}

		#ot-pc-lst .ot-host-notice {
			float: right !important;

			svg.ot-arw {
				transform: rotate(90deg) !important;
			}
		}

		.ot-close-icon {
			height: 12px !important;
			width: 12px !important;
		}

		.ot-cat-header,
		#ot-pvcy-hdr {
			@extend %t-body-s;
			font-weight: 500;
			color: $color-black;
		}

		.ot-tab-desc {
			display: flex !important;
			padding: 40px 48px !important;
			flex-direction: column !important;
			align-items: flex-start !important;
			gap: 24px !important;
			flex: 1 0 0 !important;
			align-self: stretch !important;
			margin-left: unset !important;
			position: relative !important;
		}

		.ot-tab-desc::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 1px;
			background: $color-grey-2;
		}

		.ot-desc-cntr {
			margin-bottom: 0px !important;
			height: unset !important;
			padding-bottom: 0px !important;
		}

		.ot-desc-cntr > *:not(.ot-grp-hdr1) {
			padding-left: 0px !important;
			padding-right: 0px !important;
		}

		.ot-grp-hdr1 {
			padding-left: 0px !important;
		}

		.ot-sdk-column {
			margin-left: unset !important;
		}

		#ot-pc-lst .ot-acc-txt {
			padding-right: 20px;
			padding-left: 20px;
		}

		#ot-search-cntr {
			display: flex !important;
			width: 250px !important;
			padding: 12px 18px !important;
			justify-content: center space-between !important;
			align-items: center !important;

			svg {
				top: 5px !important;
				width: unset !important;
				padding: 12px 18px !important;
			}
			path {
				fill: $color-grey-5 !important;
			}
		}

		#ot-fltr-cntr {
			margin-left: 0px !important;
		}

		.ot-switch {
			position: relative !important;
			display: inline-block !important;
			width: 36px !important;
			height: 20px !important;
			background: $color-grey-2 !important;
			border-radius: 9999px !important;
			vertical-align: middle !important;
			transition: background 0.2s !important;
		}

		.ot-switch-nob {
			position: absolute !important;
			top: 2px !important;
			left: 3px !important;
			width: 15.5px !important;
			height: 15.5px !important;
			background: $color-white !important;
			border-radius: 50% !important;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
			transition:
				transform 0.2s,
				background 0.2s !important;
			z-index: 2 !important;
			border: none !important;
		}

		.ot-tgl input:checked + .ot-switch .ot-switch-nob {
			transform: translateX(14px) !important;
			background: $color-white !important;
		}

		.ot-tgl input:checked + .ot-switch {
			background: $color-main !important;
		}

		.ot-switch-nob:before {
			content: none !important;
			display: none !important;
		}

		#ot-lst-cnt {
			padding: 22px;
			margin: 0px;
			height: unset !important;
			max-height: calc(100% - 120px) !important;
		}

		#ot-host-lst .ot-tgl-cntr {
			width: 55%;
		}

		.ot-host-hdr {
			width: fit-content;
			margin-right: 5px;
		}

		.ot-fltr-btns button {
			padding: 12px 32px !important;
		}

		.ot-fltr-btns button:last-of-type {
			color: $color-main !important;
			order: 1 !important;
		}

		#ot-pc-desc a.privacy-notice-link {
			display: inline-block !important;
			margin-top: 24px !important;
		}

		ul li div:focus {
			margin: 0px !important;
		}

		#ot-pc-lst .ot-host-item > button {
			&[aria-expanded='true'] + .ot-acc-hdr svg.ot-arw {
				transform: rotate(-90deg) !important;
			}
		}

		.ot-host-opt li > div div:nth-child(1) {
			width: 15% !important;
		}

		.ot-host-opt li > div div:nth-child(2) {
			width: 85%% !important;
		}
	}

	#onetrust-pc-btn-handler.cookie-setting-link {
		background-color: transparent !important;
		color: $color-main !important;
		border: none !important;
	}

	#onetrust-pc-btn-handler {
		text-decoration: none !important;

		&::after {
			content: '';
			display: inline-block;
			width: 10px;
			height: 12px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Cpath d='M2.75 10.5L6.89645 6.35355C7.09171 6.15829 7.09171 5.84171 6.89645 5.64645L2.75 1.5' stroke='%23ED002F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			margin-left: 6px !important;
		}
	}

	#onetrust-policy-text {
		color: $color-main !important;
		position: relative;

		&::before,
		&::after {
			content: '';
			display: block;
			height: 1px;
			width: 100%;
			background: $color-grey-2;
		}
		p {
			margin: 30px !important;
			@extend %t-body-xs;
		}
	}

	#user-text {
		@extend %t-body-s;
		font-weight: 500 !important;
		color: $color-black;
	}

	.ot-btn-subcntr button {
		margin-right: 0px !important;
	}

	a,
	#onetrust-pc-sdk .category-host-list-handler {
		@extend %link-underline;
		color: $color-black !important;
		text-decoration: none !important;
		font-weight: normal !important;
		outline: none !important;
	}

	#filter-apply-handler {
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		border-radius: 9999px !important;
		border: none !important;
		background-color: $color-main !important;
		order: 2 !important;
	}

	#filter-cancel-handler {
		border-radius: 9999px !important;
		margin-bottom: 0 !important;
		box-shadow:
			-1px -1px 0px 0px #fff inset,
			-2px -2px 2px 0px $color-grey-2 inset,
			-1px -1px 0px 0px #fff,
			-2px -2px 2px 0px $color-grey-2 !important;

		border: none !important;
		display: flex !important;
		justify-content: start !important;
	}

	#clear-filters-handler {
		box-shadow: none !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M1.5625 1.0625L9.4375 8.9375' stroke='%23ED002F' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M9.4375 1.0625L1.5625 8.9375' stroke='%23ED002F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 18px center;
		background-size: 11px 10px;
		padding-right: 38px !important;
		color: $color-main !important;
	}

	@media (max-width: 425px), (max-width: 896px) and(max-height: 425px) and(orientation: landscape) {
		#onetrust-pc-sdk .ot-grp-hdr1 {
			padding-right: unset !important;
		}
	}

	#filter-cancel-handler {
		background-color: $color-grey-background !important;
		color: $color-main !important;
	}

	#filter-apply-handler {
		background-color: $color-main !important;
		color: $color-white !important;
	}

	@media only screen and (max-width: 600px) {
		#onetrust-banner-sdk .has-reject-all-button .banner-actions-container {
			width: auto !important;
		}
	}

	@media (min-width: 640px) {
		#onetrust-pc-sdk {
			#ot-pc-content {
				position: absolute;
				height: calc(100% - 150px) !important;
			}

			.ot-sdk-eight.ot-sdk-columns {
				width: 69.333333% !important;
			}
		}

		#ot-pc-content::after {
			content: '';
			display: block;
			height: 1px;
			width: 100%;
			background: $color-grey-2;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 1;
		}

		#ot-pc-lst::after {
			content: '';
			display: block;
			height: 1px;
			width: 100%;
			background: $color-grey-2;
			margin-top: 24px;
			position: absolute;
		}
	}

	@media (max-width: $breakpoint-md) {
		#onetrust-pc-sdk {
			.ot-host-opt li > div div:nth-child(1) {
				width: 20% !important;
			}

			.ot-host-opt li > div div:nth-child(2) {
				width: 80% !important;
			}
		}
	}

	@media (max-width: $breakpoint-sm) {
		#onetrust-pc-sdk {
			.ot-host-opt li > div div:nth-child(1) {
				width: 20% !important;
				padding-right: 10% !important;
			}
			.ot-host-opt li > div div:nth-child(2) {
				width: 70% !important;
			}
		}
	}

	@media (max-width: 450px) {
		#onetrust-pc-sdk {
			.ot-host-opt li > div div:nth-child(1) {
				width: 15% !important;
				padding-right: 35% !important;
			}

			.ot-host-opt li > div div:nth-child(2) {
				width: 50% !important;
			}
		}
	}

	@media (max-width: 640px) {
		#onetrust-banner-sdk {
			display: flex;
			width: calc(100% - 32px) !important;
			flex-direction: column !important;
			align-items: center !important;
			gap: 24px !important;
		}
		#onetrust-pc-sdk {
			width: calc(100% - 32px) !important;
			height: calc(100% - 32px) !important;

			.ot-pc-footer::before {
				content: '';
				display: block;
				height: 1px;
				width: 100%;
				width: calc(100% + 48px);
				background: $color-grey-2;
				margin-bottom: 16px;
				margin-left: -24px;
				margin-right: -24px;
			}

			.ot-pc-footer {
				flex-direction: column !important;
				gap: 8px !important;
				width: calc(100% - 48px) !important;
				padding: 24px !important;
				right: 0 !important;
				position: absolute;
				background: none !important;
				box-shadow: none !important;
				bottom: 0 !important;
			}

			.ot-pc-footer button {
				width: 100% !important;
				min-width: 100% !important;
				justify-content: center !important;
				margin: 0 !important;
			}

			.ot-pc-footer button.save-preference-btn-handler {
				position: relative;
				z-index: 1;
			}

			.ot-pc-footer button.save-preference-btn-handler::before {
				content: '';
				position: absolute;
				top: 10px;
				left: 14px;
				right: 9px;
				bottom: 7px;
				border-radius: 9999px;
				z-index: -1;
				display: block;
				background-color: $color-grey-background !important;
				box-shadow:
					-1px -1px 0 0 #fff inset,
					-2px -2px 2px 0 $color-grey-2 inset,
					-1px -1px 0 0 #fff,
					-2px -2px 2px 0 $color-grey-2;
			}

			.ot-pc-footer button.save-preference-btn-handler {
				@extend %t-body-s;
				font-weight: 500 !important;
				border: none !important;
				display: flex !important;
				min-width: unset;
				justify-content: center !important;
				padding: 22px 0px !important;
				align-items: center !important;
				margin-right: 0 !important;
				background: $color-grey-background !important;
				color: $color-main !important;
				box-shadow:
					8px 8px 16px 0 $color-grey-1,
					-8px -8px 16px 0 #fff !important;
				position: relative;
				z-index: 1;
			}

			.category-menu-switch-handler::after {
				content: '';
				display: inline-block;
				width: 8px;
				height: 8px;
				border-bottom: 1.5px solid $color-main;
				border-right: 1.5px solid $color-main;
				transform: rotate(45deg);
				position: absolute;
				right: 24px;
				top: 50%;
				margin-top: -9px;
				background: transparent;
				pointer-events: none;
			}

			#ot-pc-hdr {
				flex-wrap: wrap !important;
				align-items: flex-start !important;
				gap: 24px !important;
				padding: 16px 24px 56px !important;

				input {
					margin-right: 8px !important;
				}
			}

			.ot-lst-subhdr {
				flex: 1 1 100% !important;
				order: 1 !important;
				margin-left: 0 !important;
				justify-content: center !important;
				padding-left: 0px !important;
				padding-top: 0px !important;
			}

			#ot-search-cntr svg {
				top: unset !important;
				padding: 12px 16px !important;
			}

			#ot-search-cntr {
				padding: 0px !important;
			}

			&.ot-close-icon {
				height: 12px !important;
				width: 12px !important;
				margin-right: 10px !important;
			}

			.ot-desc-cntr {
				padding-bottom: unset !important;
				margin-left: 0px !important;
				padding: 0px 24px 32px !important;
				width: auto !important;
			}

			&.ot-ftr-stacked .ot-btn-container > * {
				border-radius: 9999px !important;
				/* background: $color-grey-background !important; */
				box-shadow:
					8px 8px 16px 0px $color-grey-1,
					-8px -8px 16px 0px #fff !important;
				padding: 10px 8px 8px 10px !important;
			}
		}

		#ot-pvcy-hdr {
			margin-top: 4px;
		}
	}

	@media (max-width: $breakpoint-lg) {
		#onetrust-banner-sdk {
			#onetrust-accept-btn-handler {
				@extend %t-body-s;
				font-weight: 500 !important;
				display: flex !important;
				min-width: unset;
				justify-content: center !important;
				background: $color-grey-background !important;
				color: $color-white !important;
				border: none !important;
				box-shadow:
					8px 8px 16px 0 $color-grey-1,
					-8px -8px 16px 0 #fff !important;
				position: relative;
				padding: 22px 0px !important;
				z-index: 1;
				margin-right: 0 !important;
				align-items: center !important;
			}

			#onetrust-reject-all-handler {
				@extend %t-body-s;
				font-weight: 500 !important;
				border: none !important;
				display: flex !important;
				min-width: unset;
				justify-content: center !important;
				padding: 22px 0px !important;
				align-items: center !important;
				margin-right: 0 !important;
				background: $color-grey-background !important;
				color: $color-main !important;
				position: relative;
				z-index: 1;
				box-shadow:
					8px 8px 16px 0 $color-grey-1,
					-8px -8px 16px 0 #fff;

				&::before {
					content: '';
					position: absolute;
					top: 10px;
					left: 12px;
					right: 8px;
					bottom: 7px;
					border-radius: 9999px;
					z-index: -1;
					display: block;
					border: none !important;
					display: flex !important;
					min-width: unset;
					justify-content: center !important;
					align-items: center !important;
					margin-right: 0 !important;
					background-color: $color-grey-background !important;
					box-shadow:
						-1px -1px 0px 0px #fff inset,
						-2px -2px 2px 0px $color-grey-2 inset,
						-1px -1px 0px 0px #fff,
						-2px -2px 2px 0px $color-grey-2;
				}
			}

			#onetrust-button-group-parent {
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				gap: 8px !important;
				padding: 24px !important;
				width: 100% !important;
			}

			&.has-reject-all-button {
				margin-bottom: 0px !important;
			}

			#onetrust-button-group {
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				width: 100% !important;
			}

			#onetrust-policy-text {
				width: unset !important;
			}

			.has-reject-all-button .banner-actions-container button {
				justify-content: center !important;
				margin: 0 !important;
			}

			.has-reject-all-button .banner-actions-container button:last-of-type {
				box-shadow:
					8px 8px 16px 0 #dcddde,
					-8px -8px 16px 0 #fff !important;
			}

			.has-reject-all-button .banner-actions-container {
				flex-direction: column !important;
				gap: 8px !important;
				width: inherit !important;
				padding: 16px !important;
				background: none !important;
				box-shadow: none !important;
				max-width: unset;
			}

			.has-reject-all-button .banner-actions-container button {
				width: 100% !important;
				justify-content: center !important;
				margin: 0 !important;
			}

			.has-reject-all-button #onetrust-pc-btn-handler.cookie-setting-link {
				text-align: center !important;
				display: flex !important;
				justify-content: center !important;
				max-width: unset !important;
			}
		}

		#onetrust-accept-btn-handler {
			position: relative;
			z-index: 1;
			background: $color-main !important;
			border: none !important;

			&::before {
				content: '';
				position: absolute;
				top: 10px;
				left: 10px;
				right: 9px;
				bottom: 10px;
				border-radius: 9999px;
				z-index: -1;
				display: block;
				background-color: $color-main !important;
			}
		}

		#onetrust-pc-sdk {
			#ot-lst-cnt {
				width: unset;
			}

			#ot-lst-title {
				@extend %t-body-s;
				padding-left: 0px !important;
				order: -1 !important;
				position: relative !important;
				top: 0 !important;
				flex: 0 0 auto !important;
			}

			#ot-pc-title-mobile {
				display: none !important;
				line-height: unset !important;
				margin-bottom: unset !important;
				margin-top: unset !important;
				width: unset !important;
				padding-left: unset !important;
			}

			#ot-pc-title {
				display: block !important;
			}

			.category-menu-switch-handler {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.ot-title-cntr #ot-pc-title {
				margin-left: unset !important;
			}

			.ot-close-cntr {
				margin-right: unset !important;
			}

			.ot-grp-hdr1 {
				width: 100%;
			}

			#ot-pc-lst .ot-host-notice {
				margin-left: 0px !important;
			}

			#ot-fltr-cntr {
				right: 0px !important;
			}

			&.ot-ftr-stacked .ot-btn-container button {
				padding: 10px 8px 8px 10px;
				background: $color-grey-background;
				box-shadow:
					8px 8px 16px 0px $color-grey-1,
					-8px -8px 16px 0px #fff;
			}

			&.ot-ftr-stacked .ot-btn-container div_button:first-of-type {
				border-radius: 9999px !important;
				background: $color-grey-background !important;
				box-shadow:
					8px 8px 16px 0px $color-grey-1,
					-8px -8px 16px 0px #fff !important;
				padding: 10px 8px 8px 10px !important;
			}

			&.ot-ftr-stacked .ot-btn-container {
				overflow: unset;
				display: flex !important;
				flex-direction: column !important;
				gap: 8px !important;
			}

			&.ot-ftr-stacked .ot-btn-subcntr button {
				border-radius: 9999px !important;
				background: $color-grey-background !important;
				box-shadow:
					8px 8px 16px 0px $color-grey-1,
					-8px -8px 16px 0px #fff !important;
			}
		}
	}

	@media (min-width: 640px) and (max-width: 826px) {
		#onetrust-pc-sdk {
			width: 100% !important;
		}
	}

	@media (min-width: 601px) and (max-width: 639px) {
		#onetrust-banner-sdk {
			&.ot-sdk-container {
				width: auto !important;
				padding: 0 !important;
				margin: 0 !important;
			}

			#onetrust-policy-title {
				padding: 0 22px 10px !important;
			}

			#onetrust-button-group-parent {
				padding: 15px 22px !important;
			}

			#banner-options {
				padding: 0 22px !important;
				width: calc(100% - 44px) !important;
			}

			&.banner-option {
				margin-bottom: 6px !important;
			}

			#onetrust-policy-text {
				margin: unset !important;
				width: unset !important;
			}

			.has-reject-all-button #onetrust-pc-btn-handler {
				float: none !important;
				max-width: 100% !important;
			}
		}

		#onetrust-banner-sdk #onetrust-policy-text,
		#onetrust-banner-sdk:not(.ot-dpd-desc) > .ot-b-addl-desc,
		#onetrust-banner-sdk .ot-dpd-container {
			margin: 0 22px 10px !important;
			width: calc(100% - 44px) !important;
		}
	}

	@media (max-width: $breakpoint-sm) {
		#onetrust-pc-sdk #ot-host-lst li.ot-host-info {
			padding: 20px 24px;
			width: calc(100% - 48px);
		}
	}

	@media (max-width: $breakpoint-xs + 55px) {
		#onetrust-pc-sdk {
			#ot-host-lst li.ot-host-info {
				padding: 16px 20px;
				width: calc(100% - 40px);
			}

			#ot-pc-lst .ot-acc-txt {
				padding-right: 12px;
				padding-left: 12px;
			}
		}
	}

	@media (max-width: $breakpoint-sm - 100px) {
		#onetrust-pc-sdk {
			#ot-host-lst li.ot-host-info {
				padding: 16px 20px;
				width: calc(100% - 48px);
			}

			#ot-pc-lst {
				.ot-acc-txt {
					padding-right: 12px;
					padding-left: 12px;
				}

				.ot-acc-hdr {
					padding-left: 15px;
				}
			}
		}
	}
}

URL: /components/raw/cookie-banner/cookie-banner.css
Filesystem Path: src/components/molecules/cookie-banner/cookie-banner.css
Size: 30.1 KB

Handle: @cookie-banner
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/cookie-banner/cookie-banner.twig