Cookie Modal: Parametres

No notes defined.

<div class="bcee-cookies-manager-modal modal fade in" id="bcee-cookies-manager-modal-2" tabindex="-1" role="dialog" style="display: block;">
    <div class="modal-dialog modal-dialog-small-margin-top modal-lg" role="document">
        <div class="modal-content bcee-cookies-manager-modal-content">
            <div class="bcee-cookies-manager-top-container bcee-cookies-manager-top-container-step2">
                <div class="bcee-cookies-manager-more-infos"><a class="bcee-link-arrow" href="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/" data-page="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/" data-modal="1" data-title="Plus d'infos"><span class="bcee-cookies-manager-more-infos-text link-label">Plus d'infos</span><a class="bcee-cookies-manager-more-infos-icon bcee-button-action light bcee-icon bcee-ab-info"></a></a>
                </div>
                <div class="bcee-cookies-manager-title bcee-cookies-manager-title-step-2 h2">Paramètres des cookies
                </div>
                <div class="bcee-cookies-manager-text bcee-cookies-manager-text-step-2 h2 light">Vous pouvez activer ou
                    désactiver les différents cookies en modifiant vos préférences à tout moment.
                </div>
            </div>
            <div class="bcee-cookies-manager-middle-container">
                <div class="bcee-cookies-manager-option-block">
                    <div class="bcee-cookies-manager-option-left-block">
                        <div class="bcee-cookies-manager-option-title">Cookies strictement nécessaires</div>
                        <div class="bcee-cookies-manager-option-text">L’acceptation de ces cookies vous permet la
                            navigation sur notre site web et l’utilisation des services digitaux Spuerkeess. Sans ces
                            cookies strictement nécessaires, certaines parties de notre site web ne fonctionneraient
                            plus correctement.
                        </div>
                    </div>
                    <div class="bcee-cookies-manager-option-right-block">
                        <div class="bcee-form-toggle bcee-cookie-toggle active" disabled="disabled" data-cookies="mandatory">
                            <div class="toggle-on">Oui</div>
                            <div class="toggle-switch"></div>
                            <div class="toggle-off">Non</div>
                        </div>
                    </div>
                </div>
                <div class="bcee-cookies-manager-option-block">
                    <div class="bcee-cookies-manager-option-left-block">
                        <div class="bcee-cookies-manager-option-title">Cookies fonctionnels</div>
                        <div class="bcee-cookies-manager-option-text">Nous utilisons les cookies fonctionnels afin de
                            vous fournir un service de navigation personnalisé pour une meilleure expérience client.
                        </div>
                    </div>
                    <div class="bcee-cookies-manager-option-right-block">
                        <div class="bcee-form-toggle bcee-cookie-toggle" data-cookies="service">
                            <div class="toggle-on">Oui</div>
                            <div class="toggle-switch"></div>
                            <div class="toggle-off">Non</div>
                        </div>
                    </div>
                </div>
                <div class="bcee-cookies-manager-option-block">
                    <div class="bcee-cookies-manager-option-left-block">
                        <div class="bcee-cookies-manager-option-title">Cookies analytiques et publicitaires</div>
                        <div class="bcee-cookies-manager-option-text">Ces cookies sont utilisés pour améliorer nos
                            services, personnaliser vos contenus et publicités, obtenir des statistiques et analyser le
                            trafic de notre site.
                        </div>
                    </div>
                    <div class="bcee-cookies-manager-option-right-block">
                        <div class="bcee-form-toggle bcee-cookie-toggle" data-cookies="analytics">
                            <div class="toggle-on">Oui</div>
                            <div class="toggle-switch"></div>
                            <div class="toggle-off">Non</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bcee-cookies-manager-bottom-container cookies-preferences">
                <div class="bcee-cookies-manager-accept-container"><a class="bcee-cookies-manager-deny-all btn btn-sm btn-grey" data-modal="2">Refuser tous</a></div>
                <div class="bcee-cookies-manager-accept-container"><a class="bcee-cookies-manager-accept-all btn btn-sm btn-grey" data-modal="2">Accepter tous</a>
                </div>
                <div class="bcee-cookies-manager-accept-container"><a class="bcee-cookies-manager-save btn btn-sm btn-green" data-modal="2">Enregistrer la
                        sélection</a></div>
            </div>
        </div>
    </div>
</div>
<div class="bcee-cookies-manager-modal modal fade in" id="bcee-cookies-manager-modal-2" tabindex="-1" role="dialog"
	 style="display: block;">
	<div class="modal-dialog modal-dialog-small-margin-top modal-lg" role="document">
		<div class="modal-content bcee-cookies-manager-modal-content">
			<div class="bcee-cookies-manager-top-container bcee-cookies-manager-top-container-step2">
				<div class="bcee-cookies-manager-more-infos"><a class="bcee-link-arrow"
																href="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/"
																data-page="https://www.spuerkeess.lu/fr/a-propos-de-nous/publications/cookie-policy/"
																data-modal="1" data-title="Plus d'infos"><span
							class="bcee-cookies-manager-more-infos-text link-label">Plus d'infos</span><a
							class="bcee-cookies-manager-more-infos-icon bcee-button-action light bcee-icon bcee-ab-info"></a></a>
				</div>
				<div class="bcee-cookies-manager-title bcee-cookies-manager-title-step-2 h2">Paramètres des cookies
				</div>
				<div class="bcee-cookies-manager-text bcee-cookies-manager-text-step-2 h2 light">Vous pouvez activer ou
					désactiver les différents cookies en modifiant vos préférences à tout moment.
				</div>
			</div>
			<div class="bcee-cookies-manager-middle-container">
				<div class="bcee-cookies-manager-option-block">
					<div class="bcee-cookies-manager-option-left-block">
						<div class="bcee-cookies-manager-option-title">Cookies strictement nécessaires</div>
						<div class="bcee-cookies-manager-option-text">L’acceptation de ces cookies vous permet la
							navigation sur notre site web et l’utilisation des services digitaux Spuerkeess. Sans ces
							cookies strictement nécessaires, certaines parties de notre site web ne fonctionneraient
							plus correctement.
						</div>
					</div>
					<div class="bcee-cookies-manager-option-right-block">
						<div class="bcee-form-toggle bcee-cookie-toggle active" disabled="disabled"
							 data-cookies="mandatory">
							<div class="toggle-on">Oui</div>
							<div class="toggle-switch"></div>
							<div class="toggle-off">Non</div>
						</div>
					</div>
				</div>
				<div class="bcee-cookies-manager-option-block">
					<div class="bcee-cookies-manager-option-left-block">
						<div class="bcee-cookies-manager-option-title">Cookies fonctionnels</div>
						<div class="bcee-cookies-manager-option-text">Nous utilisons les cookies fonctionnels afin de
							vous fournir un service de navigation personnalisé pour une meilleure expérience client.
						</div>
					</div>
					<div class="bcee-cookies-manager-option-right-block">
						<div class="bcee-form-toggle bcee-cookie-toggle" data-cookies="service">
							<div class="toggle-on">Oui</div>
							<div class="toggle-switch"></div>
							<div class="toggle-off">Non</div>
						</div>
					</div>
				</div>
				<div class="bcee-cookies-manager-option-block">
					<div class="bcee-cookies-manager-option-left-block">
						<div class="bcee-cookies-manager-option-title">Cookies analytiques et publicitaires</div>
						<div class="bcee-cookies-manager-option-text">Ces cookies sont utilisés pour améliorer nos
							services, personnaliser vos contenus et publicités, obtenir des statistiques et analyser le
							trafic de notre site.
						</div>
					</div>
					<div class="bcee-cookies-manager-option-right-block">
						<div class="bcee-form-toggle bcee-cookie-toggle" data-cookies="analytics">
							<div class="toggle-on">Oui</div>
							<div class="toggle-switch"></div>
							<div class="toggle-off">Non</div>
						</div>
					</div>
				</div>
			</div>
			<div class="bcee-cookies-manager-bottom-container cookies-preferences">
				<div class="bcee-cookies-manager-accept-container"><a
						class="bcee-cookies-manager-deny-all btn btn-sm btn-grey" data-modal="2">Refuser tous</a></div>
				<div class="bcee-cookies-manager-accept-container"><a
						class="bcee-cookies-manager-accept-all btn btn-sm btn-grey" data-modal="2">Accepter tous</a>
				</div>
				<div class="bcee-cookies-manager-accept-container"><a
						class="bcee-cookies-manager-save btn btn-sm btn-green" data-modal="2">Enregistrer la
						sélection</a></div>
			</div>
		</div>
	</div>
</div>
  • Handle: @spk-cookie-modal--parametres
  • Preview:
  • Filesystem Path: components/spuerkeess-site/organisms/modal/cookie-modal/cookie-modal--parametres.njk
  • Content:
    .bcee-cookies-manager-modal .modal-dialog {
    	margin-top: 20px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .modal-dialog {
    		margin-top: 80px;
    	}
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .modal-dialog.modal-dialog-small-margin-top {
    		margin-top: 80px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-image-container {
    	text-align: center;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-image-container .bcee-cookies-manager-image {
    	max-height: 150px;
    	margin: auto;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-image-container .bcee-cookies-manager-image {
    		max-height: 300px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content {
    	border-radius: 20px;
    	overflow: hidden;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container {
    	padding: 20px 25px 5px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos {
    	text-align: center;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos a {
    	padding-right: 0;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos {
    		text-align: right;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-top-container .bcee-cookies-manager-more-infos .bcee-cookies-manager-more-infos-text {
    	text-align: right;
    	margin-right: 5px;
    	cursor: pointer;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-middle-container {
    	padding: 0 15px 20px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-middle-container {
    		padding: 0 60px 40px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container {
    	background-color: #f7f7f7;
    	padding: 30px 30px;
    	width: 100%;
    	display: block;
    	text-align: center;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container {
    		display: table;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container > * {
    	display: block;
    	text-align: center;
    	margin-bottom: 25px;
    	padding: 0;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container > * {
    		display: table-cell;
    		margin-bottom: 0;
    		margin-left: 15px;
    		text-align: center;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-bottom-container > *:last-child {
    	margin-bottom: 0;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title {
    	color: #001f47;
    	font-size: 18px;
    	line-height: 18px;
    	font-weight: 600;
    	text-align: center;
    	margin-bottom: 12px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title {
    		font-size: 22px;
    		line-height: 26px;
    		margin-bottom: 24px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text {
    	color: #001f47;
    	font-size: 14px;
    	line-height: 18px;
    	text-align: center;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text {
    		font-size: 16px;
    		line-height: 24px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title-step-2 {
    	margin-top: 15px;
    	margin-bottom: 5px;
    	padding: 0 5px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-title-step-2 {
    		padding: 20px 125px 0;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text-step-2 {
    	font-size: 16px;
    	line-height: 18px;
    	padding: 0 5px;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text-step-2 {
    		padding: 0 125px;
    		font-size: 22px;
    		line-height: 26px;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block {
    	display: table;
    	width: 100%;
    	margin-top: 20px;
    	padding-bottom: 30px;
    	border-bottom: 1px solid #a5abac;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div {
    	display: table-cell;
    	vertical-align: top;
    	width: 50%;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div {
    		width: auto;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div.bcee-cookies-manager-option-right-block {
    	text-align: right;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div {
    	min-height: 40px;
    	margin-bottom: 5px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div.bcee-cookies-manager-option-title {
    	vertical-align: middle;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div.bcee-cookies-manager-option-text {
    	overflow: visible;
    	width: 200%;
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div.bcee-cookies-manager-option-text {
    		overflow: auto;
    		width: auto;
    	}
    }
    @media only screen and (min-width:768px) {
    	.bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div {
    		vertical-align: middle;
    	}
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-title {
    	color: #001f47;
    	font-size: 16px;
    	font-weight: 600;
    	line-height: 26px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-text {
    	color: #001f47;
    	font-size: 16px;
    	line-height: 26px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-seeAllCookies {
    	color: #738CBE;
    	font-size: 12px;
    	line-height: 18px;
    	margin-top: 3px;
    }
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-preferences-link {
    	cursor: pointer;
    }
    
    .bcee-cookies-manager-more-infos {
    
    	.bcee-link-arrow {
    
    		display: inline-flex;
    		align-items: center;
    
    	}
    
    }
    
    .bcee-cookies-manager-more-infos-icon {
    
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	border: 0 !important;
    	background-image: none !important;
    	background-color: transparent !important;
    
    	&:hover {
    		color: #6683a0 !important;
    	}
    
    	&::before {
    
    		@include icon-base;
    		content: map-deep-get($token-icon-map, "infocircleborder");
    		font-size: 36px;
    		color: #6683a0;
    
    	}
    
    }
    
    .frame-space-before-extra-small {
    	margin-top: 0.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-extra-small {
    		margin-top: 1em;
    	}
    }
    .frame-space-before-small {
    	margin-top: 1em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-small {
    		margin-top: 2em;
    	}
    }
    .frame-space-before-medium {
    	margin-top: 1.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-medium {
    		margin-top: 3em;
    	}
    }
    .frame-space-before-large {
    	margin-top: 2em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-large {
    		margin-top: 4em;
    	}
    }
    .frame-space-before-extra-large {
    	margin-top: 2.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-before-extra-large {
    		margin-top: 5em;
    	}
    }
    .frame-space-after-extra-small {
    	margin-bottom: 0.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-extra-small {
    		margin-bottom: 1em;
    	}
    }
    .frame-space-after-small {
    	margin-bottom: 1em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-small {
    		margin-bottom: 2em;
    	}
    }
    .frame-space-after-medium {
    	margin-bottom: 1.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-medium {
    		margin-bottom: 3em;
    	}
    }
    .frame-space-after-large {
    	margin-bottom: 2em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-large {
    		margin-bottom: 4em;
    	}
    }
    .frame-space-after-extra-large {
    	margin-bottom: 2.5em;
    }
    @media only screen and (min-width:768px) {
    	.frame-space-after-extra-large {
    		margin-bottom: 5em;
    	}
    }
    
    .bcee-cookie-modal-info {
    	.h1,
    	H1 {
    		line-height:38px
    	}
    	.h1.light,
    	H1.light {
    		margin-bottom:4px
    	}
    	.h1 SPAN.light,
    	H1 SPAN.light {
    		font-size:.85em;
    	}
    	.h1.less-margin,
    	H1.less-margin {
    		margin-bottom:0
    	}
    	@media only screen and (min-width:768px) {
    		.h1,
    		H1 {
    			margin-bottom:3px
    		}
    	}
    	.h2,
    	H2 {
    		margin-bottom:20px
    	}
    	.h2.light,
    	H2.light {
    		margin-bottom:4px
    	}
    
    	.h2.less-margin,
    	H2.less-margin {
    		margin-bottom:5px
    	}
    	@media only screen and (min-width:768px) {
    		.h2,
    		H2 {
    			margin-bottom:30px
    		}
    	}
    	.h3,
    	H3 {
    		margin-bottom:16px
    	}
    
    	.h3.less-margin,
    	H3.less-margin {
    		margin-bottom:5px
    	}
    	@media only screen and (min-width:768px) {
    		.h3,
    		H3 {
    			margin-bottom:20px
    		}
    	}
    	.h4,
    	H4 {
    		margin-bottom:10px
    	}
    	@media only screen and (min-width:768px) {
    		.h4,
    		H4 {
    			margin-bottom:10px
    		}
    	}
    
    	P {
    		font-size:16px;
    		font-weight:400;
    		line-height:26px;
    		margin:20px 0
    	}
    	P.centered {
    		text-align:center
    	}
    	P.light {
    		color:#767b7c;
    		font-size:14px;
    		line-height:24px
    	}
    	@media only screen and (min-width:768px) {
    		P {
    			font-size:18px;
    			line-height:29px
    		}
    		P.light {
    			font-size:16px;
    			line-height:26px
    		}
    	}
    
    	.close {
    		&::before {
    
    			@include icon-base;
    			content: map-deep-get($token-icon-map, "close");
    
    		}
    	}
    
    	.table TH {
    		border: 0 !important;
    		color: #003060;
    		font-family: "futura-pt-bold";
    		font-size: 16px;
    		padding: 27px 10px 17px 10px !important;
    	}
    
    	.ce-table.ce-table-striped TBODY TR,
    	.ce-table.ce-table-striped TBODY TD {
    		border: 0 !important;
    	}
    
    	.ce-table.ce-table-striped TBODY TR:nth-child(2n) {
    		background-color: #f7f7f7;
    	}
    
    	.ce-table CAPTION, .ce-table TR TH {
    		color: #003060;
    		font-family: Open Sans,sans-serif;
    		font-weight: 600;
    	}
    
    	.ce-table CAPTION {
    		font-size: 22px;
    		line-height: 1.36;
    		padding: 0 0 12px;
    		caption-side: top !important;
    	}
    
    	.frame-type-text > UL LI {
    		line-height: 1.4;
    		margin: 10px 0;
    		padding-left: 20px;
    		position: relative;
    	}
    
    	.frame-type-text > UL LI::before {
    		-webkit-background-clip: padding-box;
    		-moz-background-clip: padding;
    		background-clip: padding-box;
    		background-color: #6683a0;
    		-webkit-border-radius: 4px;
    		-moz-border-radius: 4px;
    		border-radius: 4px;
    		content: "";
    		height: 8px;
    		left: 0;
    		position: absolute;
    		top: 7px;
    		width: 8px;
    	}
    
    	.ce-table {
    		margin: 40px 0;
    	}
    	.table {
    		width: 100%;
    		max-width: 100%;
    		margin-bottom: 20px;
    	}
    
    }
    
    .modal .modal-information {
    	width: 900px;
    	max-width: 100%;
    	margin: 80px auto 30px auto;
    
    	UL {
    		list-style: none;
    		padding-left: 0;
    	}
    
    }
    .modal .modal-information .modal-content {
    	-webkit-box-shadow: none !important;
    	-moz-box-shadow: none !important;
    	box-shadow: none !important;
    	border: 0 !important;
    	-webkit-border-radius: 20px;
    	-moz-border-radius: 20px;
    	border-radius: 20px;
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    }
    .modal .modal-information .modal-content .modal-header {
    	padding: 40px 60px 0 20px !important;
    	border: 0 !important;
    	position: relative;
    }
    @media only screen and (min-width:992px) {
    	.modal .modal-information .modal-content .modal-header {
    		padding: 40px 60px 0 60px !important;
    	}
    }
    .modal .modal-information .modal-content .modal-header .close {
    	position: absolute !important;
    	right: 15px;
    	top: 15px;
    	padding: 0 !important;
    	margin: 0 !important;
    	opacity: 1 !important;
    	filter: alpha(opacity=100) !important;
    	text-shadow: none !important;
    	-webkit-transition: 0.15s transform linear;
    	-moz-transition: 0.15s transform linear;
    	-o-transition: 0.15s transform linear;
    	transition: 0.15s transform linear !important;
    
    	&::before {
    		line-height: 1.35;
    		font-size: 27px;
    		display: block;
    	}
    
    	&:hover {
    
    		background-color: #de0000;
    		color: white !important;
    
    	}
    
    }
    @media only screen and (min-width:992px) {
    	.modal .modal-information .modal-content .modal-header .close {
    		right: -22px;
    		top: 40px;
    	}
    }
    .modal .modal-information .modal-content .modal-header .close:hover {
    	transform: rotate(90deg);
    }
    .modal .modal-information .modal-content .modal-body {
    	padding: 30px 20px 60px 20px !important;
    }
    @media only screen and (min-width:992px) {
    	.modal .modal-information .modal-content .modal-body {
    		padding: 30px 60px 60px 60px !important;
    	}
    }
    .modal .modal-information .modal-content .modal-footer {
    	padding: 0 30px 30px 30px !important;
    	border: 0 !important;
    }
    .modal .modal-information .modal-content .modal-loader {
    	display: none;
    	padding-bottom: 60px;
    }
    
    .btn {
    	display: inline-block;
    	margin-bottom: 0;
    	font-weight: 400;
    	text-align: center;
    	white-space: nowrap;
    	vertical-align: middle;
    	touch-action: manipulation;
    	cursor: pointer;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    	background-image: none;
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    	border: 0;
    	-webkit-border-radius: 30px;
    	-moz-border-radius: 30px;
    	border-radius: 30px;
    	font-size: 18px;
    	line-height: 1;
    	padding: 17px 40px;
    	position: relative;
    }
    
    .btn.btn-sm {
    	font-size: 14px;
    	padding: 10px 20px;
    }
    
    .btn-green {
    	background: #20af93;
    	background-image: none;
    	background-image: linear-gradient(45deg,#20af93,#20af93,#2a7);
    	color: #fff;
    	-webkit-transition: background-color .15s;
    	-moz-transition: background-color .15s;
    	-o-transition: background-color .15s;
    	transition: background-color .15s;
    }
    
    .btn-grey {
    	background-color: #6683a0;
    	color: #fff !important;
    	-webkit-transition: background-color .15s;
    	-moz-transition: background-color .15s;
    	-o-transition: background-color .15s;
    	transition: background-color .15s;
    }
    
    .bcee-button-action {
    	border: 2px solid #DE0000;
    	background-color: white;
    	flex-shrink: 0;
    	display: inline-block;
    	position: relative;
    	z-index: 1;
    	width: 40px;
    	height: 40px;
    	line-height: 36px;
    	text-align: center;
    	color: #DE0000 !important;
    	text-transform: uppercase;
    	text-decoration: none;
    	border-radius: 30px;
    	cursor: pointer;
    	-webkit-transition: all 100ms;
    	-moz-transition: all 100ms;
    	-o-transition: all 100ms;
    	transition: all 100ms;
    }
    
    .bcee-button-action {
    	color: #de0000 !important;
    	cursor: pointer;
    	line-height: 36px;
    	text-align: center;
    	text-transform: uppercase;
    }
    
    .bcee-form-toggle, .bcee-toggle {
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    	background-color: #d7d7d7;
    	-webkit-border-radius: 20px;
    	-moz-border-radius: 20px;
    	border-radius: 20px;
    	cursor: pointer;
    	display: inline-block;
    	height: 40px;
    	margin-left: 10px;
    	overflow: hidden;
    	position: relative;
    	-webkit-transition: all .25s;
    	-moz-transition: all .25s;
    	-o-transition: all .25s;
    	transition: all .25s;
    	width: 100px;
    }
    
    .bcee-form-toggle.disabled, .bcee-form-toggle[disabled], .bcee-toggle.disabled, .bcee-toggle[disabled] {
    	background-color: #ebebeb;
    	cursor: default;
    }
    
    .bcee-form-toggle.disabled.active, .bcee-form-toggle[disabled].active, .bcee-toggle.disabled.active, .bcee-toggle[disabled].active {
    	background-color: #bce5d6;
    }
    
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-option-block > div > div {
    	margin-bottom: 5px;
    	min-height: 40px;
    }
    
    .bcee-form-toggle.active .toggle-on, .bcee-toggle.active .toggle-on {
    	filter: alpha(opacity=100);
    	left: 0;
    	opacity: 1;
    }
    
    .bcee-toggle .toggle-off, .bcee-form-toggle .toggle-off {
    	left: 40px;
    	opacity: 1;
    	filter: alpha(opacity=100);
    }
    
    .bcee-form-toggle.active .toggle-off, .bcee-form-toggle.active .toggle-on, .bcee-toggle.active .toggle-off, .bcee-toggle.active .toggle-on {
    	color: #fff;
    }
    .bcee-form-toggle .toggle-on, .bcee-toggle .toggle-on {
    	filter: alpha(opacity=0);
    	left: -60px;
    	opacity: 0;
    }
    .bcee-form-toggle .toggle-off, .bcee-form-toggle .toggle-on, .bcee-toggle .toggle-off, .bcee-toggle .toggle-on {
    	color: #000;
    	font-size: 16px;
    	height: 40px;
    	line-height: 40px;
    	text-align: center;
    	text-transform: uppercase;
    	width: 60px;
    }
    .bcee-form-toggle .toggle-off, .bcee-form-toggle .toggle-on, .bcee-form-toggle .toggle-switch, .bcee-toggle .toggle-off, .bcee-toggle .toggle-on, .bcee-toggle .toggle-switch {
    	position: absolute;
    	top: 0;
    	-webkit-transition: all .25s;
    	-moz-transition: all .25s;
    	-o-transition: all .25s;
    	transition: all .25s;
    }
    
    .bcee-form-toggle.active .toggle-switch, .bcee-toggle.active .toggle-switch {
    	left: 60px;
    }
    .bcee-form-toggle .toggle-switch, .bcee-toggle .toggle-switch {
    	height: 40px;
    	left: 0;
    	width: 40px;
    }
    .bcee-form-toggle .toggle-off, .bcee-form-toggle .toggle-on, .bcee-form-toggle .toggle-switch, .bcee-toggle .toggle-off, .bcee-toggle .toggle-on, .bcee-toggle .toggle-switch {
    	position: absolute;
    	top: 0;
    	-webkit-transition: all .25s;
    	-moz-transition: all .25s;
    	-o-transition: all .25s;
    	transition: all .25s;
    }
    
    .bcee-form-toggle.active .toggle-off, .bcee-toggle.active .toggle-off {
    	filter: alpha(opacity=0);
    	left: 100px;
    	opacity: 0;
    }
    
    
    
    .bcee-form-toggle .toggle-switch::after, .bcee-toggle .toggle-switch::after {
    	-webkit-background-clip: padding-box;
    	-moz-background-clip: padding;
    	background-clip: padding-box;
    	background-color: #fff;
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	content: "";
    	height: 34px;
    	position: absolute;
    	right: 3px;
    	top: 3px;
    	-webkit-transform: scale(.9);
    	-moz-transform: scale(.9);
    	-ms-transform: scale(.9);
    	-o-transform: scale(.9);
    	transform: scale(.9);
    	-webkit-transition: all .1s;
    	-moz-transition: all .1s;
    	-o-transition: all .1s;
    	transition: all .1s;
    	width: 34px;
    }
    
    .bcee-cookies-manager-modal .bcee-cookies-manager-modal-content .bcee-cookies-manager-text-step-2 {
    	font-size: 22px;
    	line-height: 26px;
    	padding: 0 125px;
    	margin-top: 20px;
    }
    
    .h1.light, .h2.light, .h3.light, .h4.light, H1.light, H2.light, H3.light, H4.light {
    	font-family: futura-pt;
    	font-weight: 400;
    }
    
    .bcee-link-arrow .link-label {
    	color: #6683a0;
    	display: inline-block;
    	font-weight: 700;
    	line-height: 1.4;
    	-webkit-transition: color .25s;
    	-moz-transition: color .25s;
    	-o-transition: color .25s;
    	transition: color .25s;
    }
    
    .bcee-form-toggle.active, .bcee-toggle.active {
    	background-color: #2a7;
    }
    
    .btn-grey:hover, .btn-grey:active, .btn-grey:focus {
    	background-color: #5b7692 !important;
    	-webkit-box-shadow: none !important;
    	-moz-box-shadow: none !important;
    	box-shadow: none !important;
    	outline: none !important;
    }
    
    .btn-green:hover, .btn-green:focus, .btn-green:active {
    	color: white;
    	background-color: #1e9568 !important;
    	border-color: #22AA77 !important;
    	-webkit-box-shadow: none !important;
    	-moz-box-shadow: none !important;
    	box-shadow: none !important;
    	outline: none !important;
    }
    
    .bcee-loader-panel {
    	position: relative;
    	margin: 50px auto 0 auto;
    	width: 62px;
    	height: 62px;
    }
    
    .bcee-loader-panel .ab-bcee {
    	position: absolute;
    	top: 5.2px;
    	bottom: 6.2px;
    	left: 6.2px;
    	right: 6.2px;
    	width: 52px;
    	height: 52px;
    }
    
    .modal.loading .modal-body {
    	display: none;
    }
    
    .modal .modal-information .modal-content .modal-loader {
    	display: none;
    	padding-bottom: 60px;
    }
    
    .modal.loading .modal-loader {
    	display: block !important;
    }
    
    .bcee-loader-panel::before {
    	content: '';
    	display: block;
    	padding-top: 100%;
    }
    
    .bcee-loader-panel .circular .path {
    	stroke-dasharray: 1, 200;
    	stroke-dashoffset: 0;
    	animation: dash 2s infinite ease-in-out;
    	stroke-linecap: round;
    	stroke: #DE0000;
    }
    
    .bcee-loader-panel .circular {
    	animation: rotate 2s linear infinite;
    	height: 100%;
    	transform-origin: center center;
    	width: 100%;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    }
    
    .bcee-loader-panel .pathbg {
    	height: 100%;
    	transform-origin: center center;
    	width: 100%;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    }
    
    @keyframes dash {
    	0% {
    		stroke-dasharray: 1, 200;
    		stroke-dashoffset: 0;
    	}
    	50% {
    		stroke-dasharray: 100, 200;
    		stroke-dashoffset: -35px;
    	}
    	100% {
    		stroke-dasharray: 100, 200;
    		stroke-dashoffset: -175px;
    	}
    }
    
    @keyframes rotate {
    	100% {
    		transform: rotate(360deg);
    	}
    }
    
    .modal .modal-information .close {
    	z-index: 100;
    }
    
    .modal-header .close {
    	margin-top: -2px;
    }
    
    
    @include media-breakpoint-up(md) {
    	.bcee-cookies-manager-modal .modal-dialog,
    	.bcee-cookies-manager-modal .modal-dialog.modal-dialog-small-margin-top {
    		margin-top: 80px !important;
    	}
    }
    
  • URL: /components/raw/spk-cookie-modal/_cookie-modal.scss
  • Filesystem Path: components/spuerkeess-site/organisms/modal/cookie-modal/_cookie-modal.scss
  • Size: 21.1 KB