/* ---------- vars ---------- */
.cookie#cookie-bar {
	--icon: 40px;
	--size: 475px;
}

/* ---------- layout ---------- */

.cookie#cookie-bar { display: none; }

.cookie#cookie-bar.active {
	display: grid;
	grid-template-columns: var(--size);
	justify-content: end;
}

.cookie#cookie-bar .content {
	position: fixed;
	z-index: 1000; 
	width: var(--size);
	right: 0;
	bottom: 0; 
	display: grid;  
	grid-template-columns: var(--icon) 1fr;
	gap: 15px;

}

.cookie#cookie-bar .content .icon {
	width: var(--icon);
	height: var(--icon); 
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ---------- lipstick ---------- */
.cookie#cookie-bar {
	font-size: 14px;
	line-height: 24px;
	color: white;
}

.cookie#cookie-bar .content {
	padding: 15px;
	background: rgba(17,17,17,.8);
}

.cookie#cookie-bar .content article > p:first-child {
	margin-top: 0;
}

.cookie#cookie-bar .content .icon {
	color: #23983d;
	font-size: 18px;
	border: 2px solid #23983d; 
	border-radius: 50%;
}

.cookie#cookie-bar .content .readmore.red {
	color: white;
}


/* ---------- mediaquery ---------- */


@media only screen and (max-width: 1023px) {
	.cookie#cookie-bar {
		--icon: 30px;
		--size: 260px;
	}

}