input.css-popup{
	display:none;
}
input.css-popup:checked + .css-popup-container{
	opacity:1;
	pointer-events:inherit;
}
input.css-popup + .css-popup-container{
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:100;
	background: rgba(0,0,0,0.5);
	display:flex;
	align-items:center;
	justify-content:center;

	opacity:0;
	pointer-events:none;
	/* transition: opacity 250ms ease-in-out; */
}
input.css-popup + .css-popup-container .css-popup-body{
	position:relative;
	max-width:100%;
	max-height:100%;
	width:300px;
	height:300px;
	background:white;
	border-radius:4px;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.4);
	cursor:auto;
}
/* input.css-popup + .css-popup-container .css-popup-body .css-popup-close{
	position:absolute;
	top:15px; right:15px;
	line-height:1;
	font-size:15px;
	cursor:pointer;
}
input.css-popup + .css-popup-container .css-popup-body .css-popup-close svg{
	width:15px;
	height:15px;
	stroke:black;
} */

input.css-popup + .css-popup-container .css-popup-body .css-popup-close{
	position:absolute;
	top:5px; right:5px;
	line-height:1;
	font-size:25px;
	cursor:pointer;

	width: 35px;
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
}
input.css-popup + .css-popup-container .css-popup-body .css-popup-close:hover{
	background: var(--main-color-trans);
}
input.css-popup + .css-popup-container .css-popup-body .css-popup-close::before{
	content: "X";
	display: inline-block;
	color: var(--main-color);
	font-family: Fontastique;
}
input.css-popup + .css-popup-container .css-popup-body .css-popup-close svg{
	display: none;
}