::placeholder{
	color: #000;
	opacity: .5 !important;
}

*{outline: none !important;}

.radius {border-radius: 50px !important}
.bg-light {background-color: #f1f1f1 !important;}
.m-black {color: #54606b}
.garis {
	display: inline-block;
	width: 100px;
	height: 2px;
	background-color: #555;
}

.f-white{
	color: #fff !important; 
}

.input-group-prepend {
    margin-right: 10px;
}

.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

select.form-control:not([size]):not([multiple]) {
    height: unset;
}


.form-control {
    display: block;
    width: 100%;
    padding: 0.775rem 25px;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #ced4da;
    border-radius: 13px;
        border-top-left-radius: 013px;
        border-bottom-left-radius: 013px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #9FA0A1;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,0);
}

.input-group-text {
    padding: 0.75rem 17px;
    width: 3.5rem;
    text-align: center;
    font-size: 1.70rem;
    border-radius: 13px;
}

.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
}

.input-group-text {
	background-color: #ffffff00;
	color: #67B1D7;
	border-color: #67B1D7;
	border-width: 2px;
}

.btn {
	 padding: 0.775rem 25px;
	 border-radius: 13px;
}

.btn-costum{
	color: #fff;
	background: rgb(103,177,215);
	border-color: rgb(103,177,215);
	border-width: 0px;
	transition: .3s;
	background: linear-gradient(90deg, #67B1D7 0%, #F07B71 100%);
	box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.btn-outline-secondary.m-secondary{
	border-width: 2px;
	color: #6c757d !important;
}

.btn-outline-secondary.m-secondary:hover{
	color: #fff !important;
}

.btn-costum:hover{
	box-shadow:0px 5px 10px -3px rgba(0,0,0,.2);
}

.btn.btn-costum:active{
	color: #eee;
	background: linear-gradient(90deg, #60A1C2 0%, #DB7269 100%) !important;
	box-shadow:0px 5px 10px -3px rgba(0,0,0,.2);
}

.btn-red{
	border-color: #17564b;
	background-color: #17564b;
	color: #fff !important;
}

.btn-red:hover{
	border-color: #17564b;
	background-color: #17564b;
}

.btn.btn-red:active{
	border-color: #1F8371 !important;
	background-color: #1F8371 !important;
	box-shadow:0px 0px 0px 3px #1F837155 !important;
}

.btn-daun{
	border-color: #BBBE64;
	background-color: #BBBE64;
	color: #fff !important;
}

.btn-daun:hover{
	border-color: #BBBE64;
	background-color: #BBBE64;
}

.btn.btn-daun:active{
	border-color: #BBBE64 !important;
	background-color: #BBBE64 !important;
	box-shadow:0px 0px 0px 3px #BBBE6455 !important;
}

.btn-orange{
	border-color: #f2a166;
	background-color: #f2a166;
	color: #fff !important;
}

.btn-orange:hover{
	border-color: #f2a166;
	background-color: #f2a166;
}

.btn.btn-orange:active{
	border-color: #f2a166 !important;
	background-color: #f2a166 !important;
	box-shadow:0px 0px 0px 3px #f2a16655 !important;
}

.m-link{
	color: #666;
	font-weight: 600;
	text-decoration: underline;
}

.m-link:hover {
	text-decoration: underline;
	color: #333;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

.e1{
	position: absolute;
	top: 120px;
	left: 100px;
}

.e2{
	position: absolute;
	bottom: 50px;
	right: 100px;
}


.e3{
	position: absolute;
	top: 0px;
	right: -40px;
}

.e4 {
	position: absolute;
	bottom: -300px;
	left: -300px;
	width: 600px
}

.e5{
	position: absolute;
	top: 20px;
	right: 50px;
}

.e6{
	position: absolute;
	bottom: 30px;
	left: 30px;
	width: 100px;
}

.e8 {
	position: absolute;
	bottom: 50px;
	right: 10px;
	width: 100px;
	transform: rotate(90deg);
}



.relative{
	position: relative;
}

.t-grey {
	color: #888;
	font-weight: 300;
}

.hidden{
	overflow: hidden;
}

.box {
	padding: 10px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 3px 10px 0px rgba(0,0,0,.1);
}

.bg-white{
	background-color: #fff;
}
.shadow {
	box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
}

.fs-14{
	font-size: 14px ;
}

.f-ligt{
	font-weight: 200;
}

.bg-red {
	background-color: #17564b;
}

.flat {border-radius: 0px;}

.form-control.normal{
	padding: 0.575rem 25px;
	border:0px solid #ffffffff;
}

.m-title{
	font-size:23px;
}

.laptop {
	display: block;
}

.full-gbr{
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.m-text1 {
	text-align: center;
}

.m-text2 {
	text-align: right;
}



.gbr-tentangkami{
	width: 230px;
}

.hp{display: none}

.e7 {
		position: absolute;
		right: 0;
		bottom: -120px;
		width: 120px;
	}

.m-card{
	transition: .3s;
	background-color: #fff;
	height: 100%;
	position: relative;
}
.m-card:hover {
	box-shadow: 0 5px 20px -5px rgba(0,0,0,.1);
}

.m-card .m-card-img{
	width: 100%;
	height: 150px;
	background-color: #f5f5f5;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}

.m-card .m-card-body{
	background-color: #fff;
}

.m-card-foot{
	border-top: 1px solid #f1f1f1;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
}

.m-card .m-card-body.bb{
	border-bottom: 1px solid #f1f1f1;
}


.testi-right{
	border:2px solid #e4e8e9;
	display: flex;
	overflow: initial;
	position: relative;
	flex-direction: column;
	justify-content: center
}

.testi-right::after{
	content: "";
	position: absolute;
	background-color: white;
	width: 25px;
	height: 40px;
	z-index: 999;
	border:2px solid #e4e8e9;
	right: 60px;
	bottom: -20px;
}

.testi-right::before{
	content: "";
	position: absolute;
	background-color: white;
	width: 25px;
	height: 40px;
	z-index: 999;
	border:2px solid #e4e8e9;
	right: 90px;
	bottom: -20px;
}



.testimoni .owl-nav .owl-prev{
	display: inline-block;
	width: 30px;
	z-index: 99;
	cursor: pointer;
	color: #888 !important;
	height: 30px;
	background-color: #fff !important;
	border-radius: 50px;
	box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
	text-align: center;
	padding: 2px;

	position: absolute;
	left: -15px;
	top : 30%;
}

.testimoni .owl-nav .owl-next{
	display: inline-block;
	width: 30px;
	color: #888 !important;
	z-index: 99;
	cursor: pointer;
	height: 30px;
	background-color: #fff !important;
	border-radius: 50px;
	box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
	text-align: center;
	padding: 2px;

	position: absolute;
	right: -15px;
	top : 30%;
}

.bg-black{
	background-color: #25282b
}

.footer-list{
	list-style: none;
	padding-left: 0px;
}

.footer-list li{
	padding-bottom: 8px;
}

.footer-list li a{
	font-size: 13px;
	color: #fff;
	opacity: .7
}

.footer-list li a:hover{
	font-size: 13px;
	color: #fff;
	opacity: 1
}

.fs-13{
	font-size: 13px !important;
}



.download-app{
	position: absolute;
	width: 400px;
	background-color: #f1f1f1;
	height: 120px;
	margin: auto;
	left: 0;
	right: 0;
	top: -75px;
}

.navbar-mobile{
	transition: .5s;
	position: fixed;
	width: 300px;
	height: 100vh;
	overflow: auto;
	top:0;
	left: -100%;
	background-color: #fff;
	z-index: 9999;
}

.navbar-hitam{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9998;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0,0,0,.3);
}

.navbar-buka{
	left: 0;
}

.navbar-mobile .nav-close{
	font-size: 16px;
	color: #666;
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	background-color: white;
	padding: 5px 10px;
}

.navbar-list{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	border-bottom: 1px solid #eee;
}

.navbar-header{
	padding: 20px 10px;
	border-bottom: 1px solid #eee;
}

.navbar-header.link{
	padding: 0px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.navbar-header.link a {
	display: inline-block;
	padding: 20px;
	color: #fff;
	background-color: #98A6B1;
	width: 100%;
}

.navbar-header.link a:hover {
	background-color: #8D99A4;
}


.navbar-list li a {
	display: block;
	color: #565E66;
	padding: 13px 20px;
}

.navbar-list li a:hover{
	background-color: #00000011;
}

.card-s{
	border-width: 2px;border-color: #6c757d;border-radius: 10px
}

.intersection{
	position: absolute;
	height: 100%;
	top:0;
	right: 0;
	bottom: 0;
}

.title-ujian{
	font-size: 20px;
	color: #ffffffee;
	text-transform: uppercase;
}

.title-guru{
	color: #ffffffaa;
}


.bg-hijau-soft{
	background-color: #F3F9E3;
}

.nomor-soal{
	display: inline-block;
	background-color: #F3F9E3;
	padding: 10px;
	border-radius: 0px 0px 10px 10px;
}

.sisa-waktu{
	font-size: 18px;
	font-weight: 500;
	display: inline-block;
	background-color: #F3F9E3;
	padding: 10px 20px;margin-left: 10px;
	border-radius: 0px 0px 10px 10px;
}

.ujian-kanan div{
	font-size: 14px;
	text-transform: uppercase;
	color: white;
}

.list-nomor{
	list-style: none;
	padding-left: 0;
	display: flex;
	justify-content: center;
  	flex-wrap: wrap;
}

.list-nomor li{
	background-color: #f1f1f1;
	width: 50px;
	margin: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	color : #54606b;
	border-radius: 5px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}

.list-nomor li.dijawab{
	background-color: #BBBE64;
	color: #fff;
}

.list-nomor li.ragu-ragu{
	background-color: #f2a166;
	color: #fff;
}

.kotak-biasa{
	width: 15px;height: 15px;
	background-color: #eee;
	display: inline-block;
}

.bg-hijau-daun{
	background-color: #BBBE64 !important;
}

.bg-orange {
	background-color: #f2a166 !important;
}

.opsi-jawaban{
	display: flex;
	flex-direction: row;
	cursor: pointer;
}

.opsi-jawaban.ragu-ragu .opsi{
	background-color: #f2a166;
	color: #fff;
}

.opsi-jawaban.ragu-ragu .isi {
	background-color: #F3F9E3;
}

.opsi-jawaban.aktif .opsi{
	background-color: #BBBE64;
	color: #fff;
}

.opsi-jawaban.aktif .isi {
	background-color: #F3F9E3;
}

.opsi-jawaban .opsi{
	background-color: #f1f1f1;
	font-weight: bold;
	color: #54606b;
	width: 40px;
	text-align: center;
	height: auto;
	padding: 7px;
	border-radius: 10px 0px 0px 10px;
}

.opsi-jawaban .isi {
	width: 100%;
	padding: 7px;
	border:1px solid #f1f1f1;
	border-radius: 0px 10px 10px 0px;
}

.radius-5{
	border-radius: 5px;
}

.no-border {border:none}

.banner{
	height: 300px;
	background-color: #f1f1f1;
}

.m-card.shadow {
	box-shadow: 0 0px 20px -5px rgba(0,0,0,.1);
	border:1px solid #f1f1f1;
}

.btn-lanjut{
	display: flex;align-content: center;
	opacity: .8;
}

.btn-lanjut .garis-data{
	width: 100%;height: 2px;margin: auto;
}

.card-history{
			margin-bottom: 20px;
			cursor: pointer;
		}


		.card-history.daun:hover .history-bawah::after{
			background-color: #bbbe64;
			box-shadow: 0 0 2px 0px #bbbe64;
		}
		.card-history.daun:hover .history-bawah{
			box-shadow: 0 0 2px 0px #bbbe64;
		}
		.card-history.daun:hover .history-atas{
			box-shadow: 0 0 2px 0px #bbbe64;
		}

		.card-history.biru:hover .history-bawah::after{
			background-color: #97c1d7;
			box-shadow: 0 0 2px 0px #97c1d7;
		}
		.card-history.biru:hover .history-bawah{
			box-shadow: 0 0 2px 0px #97c1d7;
		}
		.card-history.biru:hover .history-atas{
			box-shadow: 0 0 2px 0px #97c1d7;
		}

	    .card-history.daun .history-atas{
	    	transition: .3s;
	    	display: inline-block;
	    	background-color: #bbbe64;
	    	padding: 10px 25px;
	    	border-radius: 8px 8px 0px 0px;
	    	font-size: 18px;
	    	font-weight: 600;
	    	color: #fff;
	    	text-transform: capitalize;
	    }

	    .card-history.daun .history-bawah{
	    	border : 2.5px solid #bbbe64;
	    	transition: .3s;
	    	border-radius: 0 8px 8px 8px;
	    	padding: 15px 40px;
	    	position: relative;
	    }

	    .card-history.daun .history-bawah::after{
			content: "";
			transition: .3s;
			position: absolute;
			width: 30px;
			height: 30px;
			border-radius: 30px;
			background-color: #fff;
			border:2.5px solid #bbbe64;
			bottom: -15px;
			right: 10%;
	    }

	    .card-history.daun .history-bawah p{
	    	margin: 0;
	    	color: rgba(0,0,0,.5);
	    }
	    .card-history.daun .history-bawah h5{
	    	font-weight:bold;
	    	color: #54606b;
	    }


	    .card-history.biru .history-atas{
	    	transition: .3s;
	    	display: inline-block;
	    	background-color: #97c1d7;
	    	padding: 10px 25px;
	    	border-radius: 8px 8px 0px 0px;
	    	font-size: 18px;
	    	font-weight: 600;
	    	color: #fff;
	    	text-transform: capitalize;
	    }

	    .card-history.biru .history-bawah{
	    	transition: .3s;
	    	border : 2.5px solid #97c1d7;
	    	border-radius: 0 8px 8px 8px;
	    	padding: 15px 40px;
	    	position: relative;
	    }

	    .card-history.biru .history-bawah::after{
			content: "";
			position: absolute;
			width: 30px;
			transition: .3s;
			height: 30px;
			border-radius: 30px;
			background-color: #fff;
			border:2.5px solid #97c1d7;
			bottom: -15px;
			right: 10%;
	    }

	    .card-history.biru .history-bawah p{
	    	margin: 0;
	    	color: rgba(0,0,0,.5);
	    }
	    .card-history.biru .history-bawah h5{
	    	font-weight:bold;
	    	color: #54606b;
	    }


	    .m-card2{
	    	background-color: #fff;
	    	box-shadow: 0 5px 20px -5px rgba(0,0,0,.1);
	    	border-radius: 5px;
	    	overflow: hidden;
	    }
		
		.m-card2 .title{
			color: #54606b;
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 4px;
			display: flex;
			align-items: center
		}

		.m-card-body{
			background-color: #f3f6fa;
			padding: 10px;
			border-radius: 5px;
		}

		.img-circle {
			width:50px;height: 50px;border-radius: 30px;
			display: inline-block;
		}
		
		.color-daun {color: #f2a166}

		.metodepembayaran {
			display: flex;
			border: 1px solid #eee;
			border-radius: 5px;
			padding: 1rem;
			background-color: #fcfcfc
		}

		.metodepembayaran:hover {
			background-color: #fafafa
		}

		.metodepembayaran input {
			margin-right: 20px;
			cursor: pointer;
		}

		.metodepembayaran label {
			cursor: pointer;
		}

		.metodepembayaran label span {
			opacity: .7;
		}

		.metodepembayaran.disabled{
			background-color: #fafafa;
			border: 1px solid #eee;
		}

		.metodepembayaran.disabled label, .metodepembayaran.disabled input{
			cursor: default;
		}

@media (max-width: 768px){

	.btn-buka{
		background-color: #eee;
		padding: 10px;
		width: 40px;
		height:50px;
		position: fixed;
		text-align: center;
		display: flex;
		align-content: center;
		align-items: center;
		cursor: pointer;
		border-radius: 10px 0px 0px 10px;
		margin: auto;
		padding: 10px;
		right:0px;
		z-index: 9;
		top: 0;
		bottom: 0;
	}

	.card-nomor-data{
		position: fixed;
		width: 285px;
		z-index: 9999;
		height: 400px;
		overflow: auto;
		right: -285px;
		top: 0;
		transition: .5s;
		bottom: 0;
		margin: auto;
	}

	.card-tutup {
		position: absolute;
		right: 10px;
		top: 10px;
		background-color: #f0f0f0;
		padding: 10px;
		border-radius: 5px;
		cursor: pointer;
	}


	.buka-card{
		right: 0;
	}

	.download-app{
		position: absolute;
		width: 260px;
		background-color: #f1f1f1;
		height: 105px;
		margin: auto;
		left: 0;
		right: 0;
		top: -55px;
	}

	.e8 {
		position: absolute;
		bottom: 20px;
		right: 40px;
		width: 70px;
		transform: rotate(0deg);
	}

	.e7 {
		position: absolute;
		right: 0;
		bottom: -90px;
		width: 90px;
	}

	.testimoni .owl-nav .owl-prev{
		left: 0px;
	}
	.testimoni .owl-nav .owl-next{
		right: 0px;
	}

	

	.hp{display: block}
	.laptop{
		display: none;
	}

	.m-text1,.m-text2 {
		text-align: left;
	}

	.e4 {
		position: absolute;
		bottom: -100px;
		left: -100px;
		width: 300px
	}

	.e1{
		position: absolute;
		top: 100px;
		left: 20px;
	}

	.e2{
		position: absolute;
		bottom: 0px;
		right: 0px;
	}
}