/* smart test CSS */

.jq-container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.jp-test {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.test-div {
	padding: 20px;
}

/* CORE overlay, progress elements */
.actionBoxElement {
	background-color: white;
	border-radius: 10px;
	border: 2px solid black;
	box-shadow: #333333 10px 10px 25px;
	color: black;
	/*font-size: 20px;*/
	left: 45px;
	min-height: 200px;
	position: fixed;
	text-align: center;
	top: 45px;
	width: 70%;
	z-index: 99;
}

.actionBoxTitle {
	background-color: #c2c5cf;
	border-radius: 7px 7px 0 0;
	margin-bottom: 5px;
	padding: 5px;
}

.actionBoxText {
	margin: 0 20px 0 20px;
}

.actionBoxButtons {
	bottom: 0;
	font-size: 20px;
	padding: 20px 20px 10px 20px;
	position: absolute;
	width: 95%;
}

/* the overlay background black cover */
.overlayBoxElement {
	background-color: rgba(0, 0, 0, 0.3);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 98;
}

/* the progress guruguru */
/* NEW VERSION with CSS key frame animation */
.progress {
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.6);
	border: 20px solid rgba(255, 255, 255, 0.25);
	border-left-color: rgba(3, 155, 229 ,1);
	border-top-color: rgba(3, 155, 229 ,1);
	border-radius: 50%;
	display: inline-block;
	animation: rotate 600ms infinite linear;
	/* align */
	left: 0;
	top: 0;
	position: absolute;
	z-index: 120;
}
/* Animation for above progress */
@keyframes rotate {
	to {
		transform: rotate(1turn)
	}
}