/* cookies style */

/*****************************************************
 *  panel
 **/
#t4k-cookies-panel {
	width:500px;
	background:white;
	padding:40px;
}
#t4k-cookies-header {
	border-bottom: 1px solid black;
	padding-bottom:3px;
}
#t4k-cookies-body {
	padding-top:10px;
	margin-bottom:10px;
	overflow-y:scroll;
}
.t4k-c-cookie { margin: 0 0 10px 0; }

/** 
 * panel center 
 * **/
#t4k-cookies-panel.t4k-cookies-center {
	height:500px;
	position:fixed;
	z-index:1000;
	top:50vh;
	left:50%;
	margin-left:-250px;
	margin-top:-250px;
}
.t4k-cookies-center .t4k-c-title:hover { cursor:pointer; }
.t4k-cookies-center .t4k-c-title h6:before {
	content: "";
	border: solid black;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin: 0 10px 0 0;
	position: relative;
	top: -3px;
	left:2px;
}
.t4k-cookies-center .t4k-c-cookie.open .t4k-c-title h6:before {
	transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    top: 0;
}
.t4k-cookies-center .t4k-c-message { display:none; margin:5px 0; font-size:13px; }
.t4k-cookies-center .open .t4k-c-message { display:flex; }

/**
 * panel left/right
 */
#t4k-cookies-panel.t4k-cookies-left,
#t4k-cookies-panel.t4k-cookies-right {
	padding-top: 60px;
	position:fixed;
	z-index:1000;
	top:0;
	bottom:0;
}
#t4k-cookies-panel.t4k-cookies-left { left:0; }
#t4k-cookies-panel.t4k-cookies-right { right:0; }
#t4k-cookies-panel.t4k-cookies-left #t4k-cookies-body,
#t4k-cookies-panel.t4k-cookies-right #t4k-cookies-body {
	max-height:600px;
}

@media only screen and (max-width: 600px) {
	#t4k-cookies-panel .t4k-c-title h6 {
		font-size: 0.9rem;
	}
	#t4k-cookies-panel.t4k-cookies-center {
		width:auto;
		margin:0;
		top: auto;
		left:5px;
		right:5px;
		bottom:5px;
		overflow-y:scroll;
	}
	#t4k-cookies-panel.t4k-cookies-left,
	#t4k-cookies-panel.t4k-cookies-right {
		width:100%;
		left:0;
		right:0;
		padding: 20px;
	}
}

/** Tag **/
#t4k-cookies-tag {
	display:inline-block;
	z-index:999;
	position:fixed;
	right:20%;
	bottom:0;
	background:var(--t4k-light);
	color:var(--t4k-dark);
	font-size:11px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
#t4k-cookies-tag a {
	display:block;
	width:100%;
	height:100%;
	padding:2px 6px;
}
#t4k-cookies-tag:hover {
	background:var(--t4k-dark);
	color:var(--t4k-light);
}

/** modal **/
#t4k-cookies-modal {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:999;
}
#t4k-cookies-modal.dark {
	background:rgba(0,0,0,0.8);
}