.load-ml-circle,
.load-ml {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	height: 55px;
	width: 55px;
	border: 2px solid #0000;
	border-radius: 50%;
    background: linear-gradient(#223b63e3, #223b63e3) padding-box, linear-gradient(var(--angle), #7154FE, #74F0FC) border-box;
	animation: rotate-left linear infinite;
}

.load-ml-circle {
	animation-duration: 1.2s;
}

.load-ml {
	animation-duration: 0.5s;
}

@keyframes rotate-left {
	to {
		--angle: -360deg;
	}
}

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.load-emel {
    width: 84%;
    height: auto;
    display: block;
    left: 0;
    right: 0;
    margin-inline: auto;
}

/*loader*/
.loader,
.loader:before,
.loader:after {
	background: #00acee;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}

.loader:before,
.loader:after {
	position: absolute;
	top: 0;
	content: '';
}

.loader:before {
	left: -1.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.loader {
	text-indent: -9999em;
	margin: 88px auto;
	position: relative;
	font-size: 11px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.loader:after {
	left: 1.5em;
}

@-webkit-keyframes load1 {

	0%,
	80%,
	100% {
		box-shadow: 0 0 #00acee;
		height: 4em;
	}

	40% {
		box-shadow: 0 -2em #00acee;
		height: 5em;
	}
}

@keyframes load1 {

	0%,
	80%,
	100% {
		box-shadow: 0 0 #00acee;
		height: 4em;
	}

	40% {
		box-shadow: 0 -2em #00acee;
		height: 5em;
	}
}

/*akhir loader*/

/*loader 2*/
.loader2 {
	font-size: 8px;
	margin: 100px auto;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	text-indent: -9999em;
	-webkit-animation: load4 1.3s infinite linear;
	animation: load4 1.3s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}

@-webkit-keyframes load4 {

	0%,
	100% {
		box-shadow: 0 -3em 0 0.2em #00acee, 2em -2em 0 0em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 -1em #00acee, -3em 0 0 -1em #00acee, -2em -2em 0 0 #00acee;
	}

	12.5% {
		box-shadow: 0 -3em 0 0 #00acee, 2em -2em 0 0.2em #00acee, 3em 0 0 0 #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 -1em #00acee, -3em 0 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	25% {
		box-shadow: 0 -3em 0 -0.5em #00acee, 2em -2em 0 0 #00acee, 3em 0 0 0.2em #00acee, 2em 2em 0 0 #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 -1em #00acee, -3em 0 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	37.5% {
		box-shadow: 0 -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0em 0 0 #00acee, 2em 2em 0 0.2em #00acee, 0 3em 0 0em #00acee, -2em 2em 0 -1em #00acee, -3em 0em 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	50% {
		box-shadow: 0 -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 0em #00acee, 0 3em 0 0.2em #00acee, -2em 2em 0 0 #00acee, -3em 0em 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	62.5% {
		box-shadow: 0 -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 0 #00acee, -2em 2em 0 0.2em #00acee, -3em 0 0 0 #00acee, -2em -2em 0 -1em #00acee;
	}

	75% {
		box-shadow: 0em -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0em 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 0 #00acee, -3em 0em 0 0.2em #00acee, -2em -2em 0 0 #00acee;
	}

	87.5% {
		box-shadow: 0em -3em 0 0 #00acee, 2em -2em 0 -1em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 0 #00acee, -3em 0em 0 0 #00acee, -2em -2em 0 0.2em #00acee;
	}
}

@keyframes load4 {

	0%,
	100% {
		box-shadow: 0 -3em 0 0.2em #00acee, 2em -2em 0 0em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 -1em #00acee, -3em 0 0 -1em #00acee, -2em -2em 0 0 #00acee;
	}

	12.5% {
		box-shadow: 0 -3em 0 0 #00acee, 2em -2em 0 0.2em #00acee, 3em 0 0 0 #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 -1em #00acee, -3em 0 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	25% {
		box-shadow: 0 -3em 0 -0.5em #00acee, 2em -2em 0 0 #00acee, 3em 0 0 0.2em #00acee, 2em 2em 0 0 #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 -1em #00acee, -3em 0 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	37.5% {
		box-shadow: 0 -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0em 0 0 #00acee, 2em 2em 0 0.2em #00acee, 0 3em 0 0em #00acee, -2em 2em 0 -1em #00acee, -3em 0em 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	50% {
		box-shadow: 0 -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 0em #00acee, 0 3em 0 0.2em #00acee, -2em 2em 0 0 #00acee, -3em 0em 0 -1em #00acee, -2em -2em 0 -1em #00acee;
	}

	62.5% {
		box-shadow: 0 -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 0 #00acee, -2em 2em 0 0.2em #00acee, -3em 0 0 0 #00acee, -2em -2em 0 -1em #00acee;
	}

	75% {
		box-shadow: 0em -3em 0 -1em #00acee, 2em -2em 0 -1em #00acee, 3em 0em 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 0 #00acee, -3em 0em 0 0.2em #00acee, -2em -2em 0 0 #00acee;
	}

	87.5% {
		box-shadow: 0em -3em 0 0 #00acee, 2em -2em 0 -1em #00acee, 3em 0 0 -1em #00acee, 2em 2em 0 -1em #00acee, 0 3em 0 -1em #00acee, -2em 2em 0 0 #00acee, -3em 0em 0 0 #00acee, -2em -2em 0 0.2em #00acee;
	}
}

/*akhir loader2*/

/*loader 3*/
.loader3:before,
.loader3:after,
.loader3 {
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}

.loader3 {
	font-size: 5px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.loader3:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.loader3:after {
	left: 3.5em;
}

.loader3:before,
.loader3:after {
	content: '';
	position: absolute;
	top: 0;
}

@-webkit-keyframes load7 {

	0%,
	80%,
	100% {
		box-shadow: 0 1.5em 0 -1.3em #1A74E4;
	}

	40% {
		box-shadow: 0 1.5em 0 0 #1A74E4;
	}
}

@keyframes load7 {

	0%,
	80%,
	100% {
		box-shadow: 0 1.5em 0 -1.3em #1A74E4;
	}

	40% {
		box-shadow: 0 1.5em 0 0 #1A74E4;
	}
}

/*akhir loader3*/
.yun1_1 {
	-webkit-animation: yun 4s ease-in-out both infinite
}

.yun1_2 {
	-webkit-animation: yun2 3.5s .2s ease-in-out both infinite
}

.yun1_3 {
	-webkit-animation: yun 4.5s .5s ease-in-out both infinite
}

.yun2_1 {
	-webkit-animation: yun 4s ease-in-out both infinite
}

.yun2_2 {
	-webkit-animation: yun2 3.5s .2s ease-in-out both infinite
}

.yun2_3 {
	-webkit-animation: yun 3s ease-in-out both infinite
}

.yun2_4 {
	-webkit-animation: yun 4s ease-in-out both infinite
}

.yun2_5 {
	-webkit-animation: yun2 3.5s .2s ease-in-out both infinite
}

.yun2_6 {
	-webkit-animation: yun 4s ease-in-out both infinite
}

.yun3_1 {
	-webkit-animation: yun 4s ease-in-out both infinite
}

.yun3_2 {
	-webkit-animation: yun2 3.5s .2s ease-in-out both infinite
}

.yun3_3 {
	-webkit-animation: yun 4.5s .5s ease-in-out both infinite
}

.yun3_4 {
	-webkit-animation: yun 4s ease-in-out both infinite
}

@-webkit-keyframes yun {
	0% {
		-webkit-transform: translateX(calc(-15 / 1920 * 100vw))
	}

	50% {
		-webkit-transform: translateX(calc(15 / 1920 * 100vw))
	}

	100% {
		-webkit-transform: translateX(calc(-15 / 1920 * 100vw))
	}
}

@-webkit-keyframes yun2 {
	0% {
		-webkit-transform: translateX(calc(10 / 1920 * 100vw))
	}

	50% {
		-webkit-transform: translateX(calc(-10 / 1920 * 100vw))
	}

	100% {
		-webkit-transform: translateX(calc(10 / 1920 * 100vw))
	}
}

.yun1 {
	position: absolute;
	margin-top: 10px;
	margin-left: 10px;
}

.loader-label {
	position: relative;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    margin-bottom: 9px;
    color: #fff;
    text-shadow: 1px 1px 1px #000000;
    top: 196px;
    font-size: 10px;
    font-family: laza;
    text-align: center;
}

.loader-line {
	position: relative;
	top: 215px;
	width: 93.5%;
	height: 3px;
	margin-left: 7px;
	margin-right: auto;
	background: #69676A;
}

.loader-line::before {
    content: "";
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFC107;
    box-shadow: 0px 1px 1px #ffc107ab;
    transform-origin: left;
    animation: line-loading 10s;
}

@keyframes line-loading {

	0%,
	10% {
		transform: scaleX(0);
	}

	40% {
		transform: scaleX(1);
		transform-origin: left;
	}

	40.00001%,
	60% {
		transform: scaleX(1);
		transform-origin: right;
	}

	70%,
	100% {
		transform: scaleX(1);
		transform-origin: right;
	}
}

@keyframes lineAnim {
	0% {
		left: -40%;
	}

	50% {
		left: 20%;
		width: 80%;
	}

	100% {
		left: 100%;
		width: 100%;
	}
}