// HELPERS

@media print {
	#fupi_cookie_notice{
		display: none;
	}
}

#fupi_cookie_notice, 
#fupi_cookie_notice *{
	box-sizing: border-box;
}

.fupi_hidden{
	display: none !important;
}

.fupi_srt{ // 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;
}

html.fupi_scroll_lock:not(.fupi_infobox) body{
	overflow-y: hidden;
}

html.fupi_blur_out:not(.fupi_infobox) body{
	>*{
		&:not(#fupi_cookie_notice):not(.fupi_noblur){
			animation: fupi_blur_out 1s ease;
			-webkit-animation: fupi_blur_out 1s ease;
			-moz-animation: fupi_blur_out 1s ease;
		}
	}
}

html.fupi_blur:not(.fupi_infobox) body{
	>*{
		&:not(#fupi_cookie_notice):not(.fupi_noblur){
			-webkit-filter: blur(7px);
			-moz-filter: blur(7px);
			-o-filter: blur(7px);
			-ms-filter: blur(7px);
			filter: blur(7px);
		}
	}
}

html.fupi_blur_out:not(.fupi_infobox) body{
	>*{
		&:not(#fupi_cookie_notice):not(.fupi_noblur){
			animation: fupi_blur_out 1s ease;
			-webkit-animation: fupi_blur_out 1s ease;
			-moz-animation: fupi_blur_out 1s ease;
		}
	}
}

@keyframes fupi_blur_out {
  from {
    -webkit-filter: blur(7px);
    -moz-filter: blur(7px);
    -o-filter: blur(7px);
    -ms-filter: blur(7px);
	filter: blur(7px);
  }
  to {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
	filter: blur(0px);
  }
}

// CONSENT BANNER WRAP

#fupi_cookie_notice{
	position: fixed;
	z-index: 99999999;
	bottom: 0;
	left: 0;
	right: 0;
	color: var(--fupi-notice-txt-color);
	.fupi_headline{
		display: inline-block;
		vertical-align: middle;
		line-height: 1.1;
		color: var(--fupi-notice-h-color);
		font-size: var(--fupi-notice-h-size);
		&:not(#fupi_main_headline){
			margin: 0 10px 0 0;
		}
	}
	&:not(.fupi_notice_infobox){
		&.fupi_notice_gradient_overlay{
			background: rgba(255,255,255,0);
			background: linear-gradient(0deg, rgba(0,0,0,0.39539565826330536) 0%, rgba(255,255,255,0) 100%);
		}
	}
}
	.fupi_panel{
		position: absolute;
		background-color: #e8e5e5;
		padding: 30px 30px 10px;
		border-radius: var(--fupi-notice-panel-round-corners);
		background-color: var(--fupi-notice-panel-bg-color);
		box-shadow: var(--fupi-notice-panel-box-shadow);
		border-width: var(--fupi-notice-panel-border-width);
		border-color: var(--fupi-notice-panel-border-color);
		border-style: solid;
		&:not(.fupi_animated){
			visibility: hidden;
		}
	}
		.fupi_content{
			p{
				margin-bottom: 0;
			}
		}
		#fupi_main_descr{
			margin-top: 0 !important;
			a{
				outline: none;
			}
		}
			.fupi_section{
				&:not(.fupi_hidden){
					+ .fupi_section{
						margin-top: 2em;
					}
				}
			}
				.fupi_cookietype_descr{
					margin-top: 1em;
					line-height: 1.5;
					font-size: var(--fupi-notice-p-size);
				}
				#fupi_main_headline{
					margin: 0 0 1em 0;
				}

#fupi_cookie_notice{ // this makes the gradient overlay visible on all screen sizes
	&:not(.fupi_notice_infobox){
		&[data-position="popup"]{
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.fupi_panel{
				max-width: 700px;
				max-height: 100vh;
				overflow-y: auto;
			}
		}
	}
}

// .fupi_privacy_url:focus-visible {
//     outline: 0;
// 	text-decoration: underline;
// }

@media screen and (max-width: 959px) {
	#fupi_cookie_notice{
		display: flex;
		justify-content: center;
		.fupi_panel{
			bottom: 0;
			max-width: 420px;
			border-bottom-right-radius: 0 !important;
			border-bottom-left-radius: 0 !important;
			border-bottom-width: 0 !important;
		}
		.fupi_headline{		
			font-size: var(--fupi-notice-h-size-mobile);
		}
	}

	.fupi_cookietype_descr{
		font-size: var(--fupi-notice-p-size-mobile);
	}
}

@media screen and (min-width: 960px) {

	// OPT-IN/OUT

	#fupi_cookie_notice:not(.fupi_notice_infobox){
		&[data-position="popup"]{
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.fupi_panel{
				max-width: 520px;
				max-height: 100vh;
				overflow-y: auto;
			}
		}
		&[data-position="bottom"],
		&[data-position="bottom_wide"],
		&[data-position="bottom_full"]{
			display: flex;
			justify-content: center;
			.fupi_panel{
				bottom: 0;
				max-width: 460px;
			}
		}
		&[data-position="bottom_wide"]{
			#fupi_welcome_panel{
				max-width: 920px;
				padding: 10px 30px;
				.fupi_inner{
					display: flex;
					align-items: center;
				}
				.fupi_content{
					padding-right: 30px;
					flex: auto;
				}
				.fupi_buttons{
					flex: 4 0 auto !important;
					margin-top: 0;
					max-width: 500px;
				}
			}
		}
		&[data-position="bottom_full"]{
			#fupi_welcome_panel{
				max-width: 100vw;
				padding: 10px 30px;
				.fupi_inner{
					width: 100%;
					display: flex;
					align-items: center;
				}
				.fupi_content{
					padding-right: 30px;
					flex: auto;
				}
				.fupi_buttons{
					flex: 4 0 auto !important;
					max-width: 500px;
					margin-top: 0;
				}
			}
		}
		&[data-position="leftcorner"]{
			max-width: 420px;
			.fupi_panel{
				bottom: 0;
			}
		}
		&[data-position="bottom"],
		&[data-position="bottom_wide"],
		&[data-position="bottom_full"],
		&[data-position="leftcorner"]{
			.fupi_panel{
				border-bottom-right-radius: 0 !important;
				border-bottom-left-radius: 0 !important;
				border-bottom-width: 0 !important;
			}
		}
		&[data-position="leftcorner"]{
			.fupi_panel{
				border-top-left-radius: 0 !important;
				border-left-width: 0 !important;
			}
		}
	}

	// INFOBOX

	#fupi_cookie_notice.fupi_notice_infobox{
		&[data-position_inform="bottom"],
		&[data-position_inform="bottom_wide"],
		&[data-position_inform="bottom_full"]{
			display: flex;
			justify-content: center;
			.fupi_panel{
				bottom: 0;
				max-width: 460px;
			}
		}
		&[data-position_inform="bottom_wide"]{
			#fupi_welcome_panel{
				max-width: 920px;
				padding: 10px 30px;
				.fupi_inner{
					display: flex;
					align-items: center;
				}
				.fupi_content{
					padding-right: 30px;
					flex: auto;
				}
				.fupi_buttons{
					flex: 4 0 auto !important;
					margin-top: 0;
					max-width: 500px;
				}
			}
		}
		&[data-position_inform="bottom_full"]{
			#fupi_welcome_panel{
				max-width: 100vw;
				padding: 10px 30px;
				.fupi_inner{
					width: 100%;
					display: flex;
					align-items: center;
				}
				.fupi_content{
					padding-right: 30px;
					flex: auto;
				}
				.fupi_buttons{
					flex: 4 0 auto !important;
					max-width: 500px;
					margin-top: 0;
				}
			}
		}
		&[data-position_inform="leftcorner"]{
			max-width: 420px;
			.fupi_panel{
				bottom: 0;
			}
		}
		&[data-position_inform="bottom"],
		&[data-position_inform="bottom_wide"],
		&[data-position_inform="bottom_full"],
		&[data-position_inform="leftcorner"]{
			.fupi_panel{
				border-bottom-right-radius: 0 !important;
				border-bottom-left-radius: 0 !important;
				border-bottom-width: 0 !important;
			}
		}
		&[data-position_inform="leftcorner"]{
			.fupi_panel{
				border-top-left-radius: 0 !important;
				border-left-width: 0 !important;
			}
		}
	}
}

// WELCOME PANEL

#fupi_welcome_panel{
	z-index: 1;
	max-height: 100vh;
	overflow-y: auto;
}

#fupi_cookie_notice{
	&:not(.fupi_notice_infobox){
		&[data-position="popup"],
		&[data-position="bottom"],
		&[data-position="leftcorner"]{
			#fupi_welcome_panel{
				.fupi_content{
					padding-right: 0;
				}
			}
		}
	}
	.fupi_notice_infobox{
		&[data-position_inform="bottom"],
		&[data-position_inform="leftcorner"]{
			#fupi_welcome_panel{
				.fupi_content{
					padding-right: 0;
				}
			}
		}
	}
}

// SETTINGS PANEL

#fupi_settings_panel{
	z-index: 2;
	max-height: 100vh;
	overflow-y: auto;
	.fupi_content{
		padding-right: 0;
	}
}

//  BUTTONS

.fupi_buttons{
	margin: 20px -10px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	button{
		cursor: pointer;
		text-align: center;
		margin: 10px;
		flex: 1 0 auto;
		border-radius: var(--fupi-notice-btn-round-corners);
		font-size: var(--fupi-notice-btn-txt-size);
		transition: .1s all;
		&.fupi_button{
			background-color: var(--fupi-notice-btn-bg-color);
			color: var(--fupi-notice-btn-text-color);
			&:hover{
				background-color: var(--fupi-notice-btn-bg-color-hover);
				color: var(--fupi-notice-btn-text-color-hover);
			}
		}
		&.fupi_cta{
			background-color: var(--fupi-notice-cta-bg-color);
			color: var(--fupi-notice-cta-txt-color);
			&:hover{
				background-color: var(--fupi-notice-cta-bg-color-hover);
				color: var(--fupi-notice-cta-txt-color-hover);
			}
		}
	}
}

@media screen and (max-width: 959px) {
	.fupi_buttons{
		button{
			font-size: var(--fupi-notice-btn-txt-size-mobile);
		}
	}
}

	#fupi_agree_to_all_cookies_btn,
	#fupi_agree_to_selected_cookies_btn{
		flex: 3 0 auto;
	}

#fupi_cookie_notice{
	&[data-btn_config="default"]{
		#fupi_agree_to_all_cookies_btn,
		#fupi_agree_to_selected_cookies_btn{
			width: 90%;
		}
	}
	//&[data-btn_config="config_1"]{} // no changes here
	&[data-btn_config="config_2"]{
		#fupi_decline_cookies_btn,
		#fupi_return_btn{
			order: 1;
		}
		#fupi_cookie_settings_btn,
		#fupi_agree_to_selected_cookies_btn{
			order: 2;
		}
		#fupi_agree_to_all_cookies_btn{
			order: 3;
		}
	}
}

@media (max-width: 1024px){
	#fupi_cookie_notice{
		&[data-btn_config="config_3"]{
			#fupi_decline_cookies_btn,
			#fupi_return_btn{
				order: 1;
			}
			#fupi_cookie_settings_btn,
			#fupi_agree_to_selected_cookies_btn{
				order: 2;
			}
			#fupi_agree_to_all_cookies_btn{
				order: 3;
			}
		}
	}
}

// PADDINGS

#fupi_cookie_notice{
	&[data-paddings="medium"]{
		line-height: 1.5em;
		.fupi_panel{
			padding: 25px 25px 12px;
		}
		.fupi_buttons{
			margin-top: 10px;
			button{
				margin: 8px;
			}
		}
		.fupi_cookietype_descr{
			margin-top: 15px;
		}
		#fupi_main_headline{
			margin: 0 0 15px 0;
		}
		.fupi_section{
			&:not(.fupi_hidden){
				+ .fupi_section{
					margin-top: 1.5em;
				}
			}
		}
	}
	&[data-paddings="compact"]{
		line-height: 1.4em;
		.fupi_panel{
			padding: 20px 20px 10px;
		}
		.fupi_buttons{
			margin-top: 10px;
			button{
				margin: 6px;
			}
		}
		.fupi_cookietype_descr{
			margin-top: 11px;
		}
		#fupi_main_headline{
			margin: 0 0 11px 0;
		}
		.fupi_section{
			&:not(.fupi_hidden){
				+ .fupi_section{
					margin-top: 1.33em;
				}
			}
		}
	}
	&[data-paddings="supercompact"]{
		line-height: 1.3em;
		.fupi_panel{
			padding: 15px 15px 8px;
		}
		.fupi_buttons{
			margin-top: 8px;
			button{
				margin: 4px;
			}
		}
		.fupi_cookietype_descr{
			margin-top: 6px;
		}
		#fupi_main_headline{
			margin: 0 0 6px 0;
		}
		.fupi_section{
			&:not(.fupi_hidden){
				+ .fupi_section{
					margin-top: 1em;
				}
			}
		}
	}
}

@media screen and (min-width: 960px){
	#fupi_cookie_notice{
		&:not(.fupi_notice_infobox){
			&[data-paddings="medium"]{
				&[data-position="bottom_wide"],
				&[data-position="bottom_full"]{
					#fupi_welcome_panel{
						padding: 12px 25px !important;
					}
					.fupi_content{
						padding-right: 30px;
					}
				}
			}
			&[data-paddings="compact"]{
				&[data-position="bottom_wide"],
				&[data-position="bottom_full"]{
					#fupi_welcome_panel{
						padding: 10px 20px !important;
					}
					.fupi_content{
						padding-right: 25px;
					}
				}
			}
			&[data-paddings="supercompact"]{
				&[data-position="bottom_wide"],
				&[data-position="bottom_full"]{
					#fupi_welcome_panel{
						padding: 8px 15px !important;
					}
					.fupi_content{
						padding-right: 20px;
					}
				}
			}
		}
		&.fupi_notice_infobox{
			&[data-paddings="medium"]{
				&[data-position_inform="bottom_wide"],
				&[data-position_inform="bottom_full"]{
					#fupi_welcome_panel{
						padding: 12px 25px !important;
					}
					.fupi_content{
						padding-right: 30px;
					}
				}
			}
			&[data-paddings="compact"]{
				&[data-position_inform="bottom_wide"],
				&[data-position_inform="bottom_full"]{
					#fupi_welcome_panel{
						padding: 10px 20px !important;
					}
					.fupi_content{
						padding-right: 25px;
					}
				}
			}
			&[data-paddings="supercompact"]{
				&[data-position_inform="bottom_wide"],
				&[data-position_inform="bottom_full"]{
					#fupi_welcome_panel{
						padding: 8px 15px !important;
					}
					.fupi_content{
						padding-right: 20px;
					}
				}
			}
		}
	}
}

// GAPS BETWEEN BUTTONS

#fupi_cookie_notice{
	&[data-btn_gaps="spacious"]{
		.fupi_buttons{
			button{
				margin: 10px;
			}
		}
	}
	&[data-btn_gaps="medium"]{
		.fupi_buttons{
			button{
				margin: 8px;
			}
		}
	}
	&[data-btn_gaps="compact"]{
		.fupi_buttons{
			button{
				margin: 6px;
			}
		}
	}
	&[data-btn_gaps="supercompact"]{
		.fupi_buttons{
			button{
				margin: 4px;
			}
		}
	}
}

#fupi_cookie_notice{
	.fupi_hidden + .fupi_cookietype_descr{
		margin-top: 0;
	}
}


#fupi_stats_only_btn{
	display: none;
}

// TOGGLE SWITCHES

#fupi_cookie_notice label.fupi_switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	vertical-align: middle;
	input {
		opacity: 0;
		width: 0;
		height: 0;
	}
}

.fupi_switch_slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
	&::before {
		position: absolute;
		content: "";
		height: 14px;
		width: 14px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 50%;
	}
}

input:checked + .fupi_switch_slider {
  background-color: var(--fupi-notice-slider-color);
}

#fupi_necess_section .fupi_faux_slider {
	background-color: var(--fupi-notice-necessary-slider-color);
}

input:focus + .fupi_switch_slider {
	box-shadow: var(--fupi-notice-slider-focus-shadow);
}

input:checked + .fupi_switch_slider:before {
  transform: translateX(18px);
}

// ALWAYS-ENABLED FAUX SWITCH FOR THE NECESSARY COOKIES

// TOGGLE SWITCHES

.fupi_faux_switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	vertical-align: middle;
}

.fupi_faux_slider {
	position: absolute;
	cursor: not-allowed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #68909b;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
	&::before {
		position: absolute;
		content: "";
		height: 14px;
		width: 14px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 50%;
		transform: translateX(18px);
	}
}

// BUTTONS

.fupi_notice_btn_small{
	button{
		padding: 6px 10px !important;
	}
}
.fupi_notice_btn_medium{
	button{
		padding: 9px 15px !important;
	}
}
.fupi_notice_btn_large{
	button{
		padding: 12px 20px !important;
	}
}

// CLOSE ICON

#fupi_cookie_notice{
	&.fupi_changing_preferences{
		.fupi_close_banner_btn{
			display: block !important;
		}
		#fupi_return_btn{
			display: none;
		}
	}
}

// ANIMATIONS

.fupi_fadeInUp {
  	opacity: 1;
    transform: translate3d(0, 0, 0);
}

.fupi_fadeOutDown {
  	opacity: 0;
  	transform: translate3d(0, 100%, 0);
}

// OTHER

// MAX WIDTH OF CENTRALLY POSITIONED POPUP

#fupi_cookie_notice[data-position="popup"]{
	#fupi_welcome_panel{
		max-width: var(--fupi-notice-popup-panel-max-width);
	}
}

// hide notice elements in "only notify" mode

#fupi_ok_text{
	display: none;
}

#fupi_cookie_notice.fupi_notice_infobox{
	#fupi_decline_cookies_btn,
	#fupi_cookie_settings_btn,
	#fupi_settings_panel,
	#fupi_agree_text,
	#fupi_stats_only_btn{
		display: none !important;
	}
	#fupi_ok_text{
		display: block;
	}
}

// IFRAME MANAGER

// This is to make an iframe placeholder fit in the place reserved for the embed

.fupi_iframe_placeholder{
	position: relative;
}

.fupi_iframe_content{
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	.fupi_inner{
		flex: 1 0 auto;
		max-width: 100%;
		padding: 14px 20px;
		background-color: rgba(25,44,52,.85);
		color: #fff;
		text-align: center;
		box-sizing: border-box;
		> p{
			margin: 14px 0;
		}
	}
}

.fupi_blocked_iframe .fupi_iframe_descr{
	color: #fff;
	font-size: 16px;
	line-height: 1.4em;
	a{
		color: #fff;
		text-decoration: underline;
		&:hover, &:focus{
			text-decoration: none;
		}
	}
}

.fupi_blocked_iframe button.fupi_iframe_consent_btn{
	border-radius: 3px;
	border: none;
	padding: .75em 1.25em;
	font-size: 18px;
	line-height: 1em;
	background-color: #3acdb7;
	transition: .3s all;
	color: #000;
	&:hover, &:focus{
		background-color: #63ffe8;
	}
}

@media screen and (max-width: 768px){
	.fupi_blocked_iframe .fupi_iframe_descr{
		font-size: 14px;
	}
}

.fupi_blocked_iframe{
	&.fupi_fit_to_guten_embed,
	&.fupi_fit_to_bricks_embed{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.fupi_iframe_placeholder{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
}

// makes iframes responsive
.fupi_responsive_iframe{
	position: relative;
	overflow: hidden;
	iframe{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}

// TOGGLE BUTTON

#fupi_notice_toggler{
	position: fixed;
	z-index: 99999;
	bottom: 10px;
	left: 10px;
	border-width: 0 !important;
	border-radius: 100%;
	width: 52px;
	height: 52px;
	padding: 8px;
	background-color: transparent !important;
	&::before{
		content: '';
		display: block;
		border-radius: 100%;
		width: 100%;
		height: 100%;
		background-color: var(--fupi-notice-toggler-bg-color);
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1;
	}
	img{
		position: relative;
		z-index: 2;
		width: 36px;
		height: 36px;
	}
	&:not(.fupi_active){
		display: none !important;
	}
}

@media screen and (max-width: 480px){
	#fupi_notice_toggler{
		width: 44px;
		height: 44px;
		padding: 4px;
		&::before{
			width: 44px;
			height: 44px;
		}
	}
}

// CONSENT ID

.fupi_consent_info{
	font-size: 12px;
	text-align: right;
	margin: 5px 0 0;
	color: #777;
	width: 100% !important;
	order: 990;
	a{
		color: #777;
    	text-decoration: underline !important;
	}
}

// CREDIT NOTE

.fupi_poweredBy{
	display: none;
	text-align: right;
    font-size: 12px;
    color: #777;
	margin: 5px 0 0;
	order: 999;
	width: 100% !important;
	a{
		color: #777;
		text-decoration: underline !important;
	}
}