body {
	background-color: #eff8fc;
}
body:before {
	content: "";
	background-image: url(/assets/img/bg-footer.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	opacity: 0.1;
	top: 60px;
}
.footer {
	background-image: url(/assets/img/bg-footer.png);
	background-color: #185198;
	background-repeat: no-repeat;
	background-size: cover;
}
a {
	text-decoration: none;
}
.fs-7 {
	font-size: 0.75rem;
}
.fs-8 {
	font-size: 0.85rem;
}
.fs-9 {
	font-size: 0.95rem;
}
*[data-cover],
*[data-contain],
*[data-auto] {
	background-position: center;
	background-repeat: no-repeat;
}
*[data-cover] {
	background-size: cover;
	object-fit: cover;
}
*[data-contain] {
	background-size: contain;
	object-fit: contain;
}
*[data-auto] {
	background-size: auto;
	object-fit: auto;
}
.h2-title {
	color: #000;
	text-shadow: 1px 1px 1px #fff;
}
.shadow {
	box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.075) !important;
}
.shadow-sm {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* scroll to top */
.scroll-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	text-align: center;
}

/* Z-Index */
.z-1000 {
	z-index: 1000;
}
.z-1010 {
	z-index: 1010;
}
.z-1020 {
	z-index: 1020;
}
.z-1030 {
	z-index: 1030;
}
.z-1040 {
	z-index: 1040;
}
.z-1050 {
	z-index: 1050;
}
.z-1060 {
	z-index: 1060;
}
.z-1070 {
	z-index: 1070;
}
.z-1080 {
	z-index: 1080;
}
.z-1090 {
	z-index: 1090;
}

/* cursor */
.cursor-pointer {
	cursor: pointer;
}
.cursor-progress {
	cursor: progress;
}
.cursor-wait {
	cursor: wait;
}
.cursor-zoom-in {
	cursor: zoom-in;
}
.cursor-zoom-out {
	cursor: zoom-out;
}
.cursor-not-allowed {
	cursor: not-allowed;
}
.cursor-grab {
	cursor: grab;
}
.cursor-grabbing {
	cursor: grabbing;
}
.cursor-help {
	cursor: help;
}
.cursor-move {
	cursor: move;
}
.cursor-copy {
	cursor: copy;
}
.cursor-crosshair {
	cursor: crosshair;
}
.cursor-cell {
	cursor: cell;
}
.cursor-all-scroll {
	cursor: all-scroll;
}
.cursor-col-resize {
	cursor: col-resize;
}
.cursor-row-resize {
	cursor: row-resize;
}
.cursor-s-resize {
	cursor: s-resize;
}
.cursor-w-resize {
	cursor: w-resize;
}

/* Show Pass */
.showpass {
	position: relative;
}
.showpass i {
	position: absolute;
	font-size: 1.5rem;
	top: 1.2rem;
	right: 1rem;
	cursor: pointer;
	z-index: 9999;
}
.showpass i.fa-eye-slash {
	color: var(--bs-secondary);
}
.showpass i.fa-eye {
	color: var(--bs-primary);
}

/* soal */
.fix-menu {
	height: 40px;
	padding-top: 10px;
	border-left: 1px solid var(--bs-border-color);
	text-align: center !important;
	white-space: nowrap !important;
	font-size: 0.8rem;
	color: #fff;
	background: var(--bs-gray-500);
}
.fix-menu:hover {
	background: var(--bs-gray);
}
.fix-menu a {
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	width: 100%;
	position: relative;
	display: block;
}
.soal {
	margin: 40px 0;
	font-size: 0.85rem;
}
.box-soal,
.box-opsi {
	height: calc(100% - 80px);
	overflow: auto;
	border-top: 1px solid var(--bs-border-color);
	border-bottom: 1px solid var(--bs-border-color);
	position: absolute;
	padding: 0 10px;
	background: rgba(255, 255, 255, 1);
}
.box-soal {
	width: 60%;
	left: 0;
	border-right: 1px solid var(--bs-border-color);
}
.box-opsi {
	width: 40%;
	right: 0;
}

.box-soal img {
	max-height: 50vh !important;
	filter: grayscale(100%) brightness(1.1);
}
.box-opsi img {
	max-height: 30vh !important;
	filter: grayscale(100%) brightness(1.1);
}

.opsi {
	border: 1px solid var(--bs-gray);
	border-radius: 50%;
	text-align: center;
	color: var(--bs-dark);
	box-shadow: 1px 2px 3px #a6a3a3;
	font-size: 18px;
	vertical-align: middle;
	display: inline-block;
	padding: 1px 10px;
	cursor: pointer;
}

#solved a,
#good-bad a {
	width: 18%;
	float: left;
	border: 1px solid #ccc;
	font-style: normal;
	text-align: center;
	padding: 10px;
	margin: 1%;
	border-radius: 5px;
	color: var(--bs-dark);
}
#solved .card-body,
#good-bad .card-body {
	min-height: 220px;
}
.menu-active {
	border-bottom: 3px solid var(--bs-dark);
	box-shadow: 0 0 5px;
}
.center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/* audio */
.soal audio,
.play-audio,
.box-audio {
	width: 100px;
	height: 57px;
	border-radius: 15px;
}
.box-audio {
	position: relative;
	margin: 0 auto;
}
.play-audio {
	position: absolute;
	z-index: 99999;
	background-image: linear-gradient(black, black), url(../img/audio-on.webp);
	background-blend-mode: saturation;
	background-size: contain;
	background-repeat: no-repeat;
	object-fit: contain;
	cursor: pointer;
}
.play-audio.playing {
	background-image: linear-gradient(black, black), url(../img/audio-play.gif);
}
.play-audio.pause {
	background-image: linear-gradient(black, black), url(../img/audio-pause.webp);
}
.play-audio.disabled {
	background-image: linear-gradient(black, black), url(../img/audio-off.webp);
}

/*administrator*/
.gr-black {
	background: #4c4c4c;
	background: -moz-linear-gradient(
		top,
		#4c4c4c 0%,
		#595959 12%,
		#666666 25%,
		#474747 39%,
		#2c2c2c 50%,
		#000000 51%,
		#111111 60%,
		#2b2b2b 76%,
		#1c1c1c 91%,
		#131313 100%
	);
	background: -webkit-linear-gradient(
		top,
		#4c4c4c 0%,
		#595959 12%,
		#666666 25%,
		#474747 39%,
		#2c2c2c 50%,
		#000000 51%,
		#111111 60%,
		#2b2b2b 76%,
		#1c1c1c 91%,
		#131313 100%
	);
	background: linear-gradient(
		to bottom,
		#4c4c4c 0%,
		#595959 12%,
		#666666 25%,
		#474747 39%,
		#2c2c2c 50%,
		#000000 51%,
		#111111 60%,
		#2b2b2b 76%,
		#1c1c1c 91%,
		#131313 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
	color: #fff;
}

/* BG Gradient  */
.gr-blue {
	background: -moz-linear-gradient(
		top,
		rgba(255, 255, 255, 0) 0%,
		rgba(252, 254, 255, 0) 1%,
		rgba(122, 188, 255, 0.5) 50%,
		rgba(78, 115, 223, 1) 100%
	);
	background: -webkit-linear-gradient(
		top,
		rgba(255, 255, 255, 0) 0%,
		rgba(252, 254, 255, 0) 1%,
		rgba(122, 188, 255, 0.5) 50%,
		rgba(78, 115, 223, 1) 100%
	);
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(252, 254, 255, 0) 1%,
		rgba(122, 188, 255, 0.5) 50%,
		rgba(78, 115, 223, 1) 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#4e73df',GradientType=0 );
}
.gr-darkblue {
	background: #3b679e;
	background: -moz-linear-gradient(
		top,
		#3b679e 0%,
		#2b88d9 50%,
		#207cca 51%,
		#7db9e8 100%
	);
	background: -webkit-linear-gradient(
		top,
		#3b679e 0%,
		#2b88d9 50%,
		#207cca 51%,
		#7db9e8 100%
	);
	background: linear-gradient(
		to bottom,
		#3b679e 0%,
		#2b88d9 50%,
		#207cca 51%,
		#7db9e8 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 );
}
.gr-soft-blue {
	background: #7abcff;
	background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
	background: -webkit-linear-gradient(
		top,
		#7abcff 0%,
		#60abf8 44%,
		#4096ee 100%
	);
	background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
}

.w-1 {
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block;
}

/* Loading */
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bs-gray);
	opacity: 0.75;
	z-index: 1030;
	display: none;
}
.putar {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 200px;
	height: 200px;
	transform: scale(0.79);
}
.loading :before {
	content: " ";
	position: absolute;
	display: block;
	width: 160px;
	height: 160px;
	top: 20px;
	left: 20px;
	border-radius: 80px;
	box-shadow: 0 6px 0 0 #ffffff;
	-ms-animation: uil-ring-anim 1s linear infinite;
	-moz-animation: uil-ring-anim 1s linear infinite;
	-webkit-animation: uil-ring-anim 1s linear infinite;
	-o-animation: uil-ring-anim 1s linear infinite;
	animation: uil-ring-anim 1s linear infinite;
}
@-webkit-keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-moz-keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-ms-keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-moz-keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-o-keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes uil-ring-anim {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* list soalbentuk box */
.list-soal {
	text-align: center;
	background: var(--bs-light);
	padding: 10px;
	margin: 10px;
	border-radius: 10px;
	position: relative;
}
/* .list-soal a {
	font-weight: bold;
	text-shadow: 1px 1px 1px #ccc;
	color: var(--bs-dark);
} */
.list-soal img {
	width: 150px;
	height: 150px;
	padding: 0.25rem;
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}
.list-soal:hover,
.list-soal:hover img {
	box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.075) !important;
}
.list-soal:hover a {
	color: var(--bs-primary);
}
.lock a {
	filter: blur(2px);
}
.lock::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #c6c6c675;
	border-radius: 10px;
	z-index: 1;
}
.lock::after {
	content: "\f023";
	font-family: "faf";
	font-weight: 900;
	font-size: 5em;
	color: var(--bs-danger);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}