#jsmaindiv{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index: 1060;
	background: #5050507a;
	padding: 15px;
	display: grid;
    grid-template-areas:
        "top-start top top-end"
        "center-start center center-end"
        "bottom-start bottom-center bottom-end";
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
	grid-template-columns: auto minmax(0, 1fr) auto;
    overflow: auto;
}

#jsboxdiv{
	grid-area: center;
    place-self: center center;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px;
	border-radius: 10px;
	width: 35em;
	max-width: 100%;
	background-color: white;
	min-height: 150px;
	height: fit-content;
	box-shadow: 0 0 10px #797979;
	border: 1px solid #efefef;
	scale: 0;
	opacity: 0;
}

#jsboxdiv.open {
	scale: 1;
	opacity: 1;
    animation: 150ms pop-in;
}

#jsboxdiv.open #jsboxicon svg{
	animation-name: move-icon;
	animation-duration: 400ms;
	animation-delay: 150ms;
	animation-timing-function:ease-in-out;
}

#jsboxdiv.closing {
    animation: 150ms pop-out;
}

#jsboxtitle{
	font-size: 1.3em;
	font-weight: 600;
}

@keyframes move-icon{
	0%{
		rotate: 0deg;
	}
	25%{
		rotate: -15deg;
	}
	50%{
		rotate: 0deg;
	}
	75%{
		rotate: 15deg;
	}
	100%{
		rotate: 0deg;
	}
}

@keyframes pop-in{
	0%{
		scale: 0;
		opacity: 0;
	}
	90%{
		scale: 1.05;
	}
	100%{
		scale: 1;
		opacity: 1;
	}
}

@keyframes pop-out{
	0%{
		scale: 1;
		opacity: 1;
	}
	10%{
		scale: 1.05;
	}
	100%{
		scale: 0;
		opacity: 0;
	}
}