/*Default style are for mobile*/

html, body {
	background: #F2F2F2;
}

.homepage-floating-card {
	width: 100% !important;
}


.homepage-card-footer {
	font-size: 0.6rem;
	line-height: auto !important;
	font-weight: 800;
	font-kerning: normal;
}

#scroll-down-box-text {
	color: #000;
}

.lSAction {
	display: none;
}
.carousel-caption h1 {
	text-shadow: 2px 2px 5px rgba(255,255,255,0.49);
}
.carousel-caption p {
	text-shadow: 2px 2px 5px rgba(255,255,255,0.49);
} 

#first-carousel-section .clearfix.px-md-5,
#testimonial .clearfix.px-md-5,
#kenali .clearfix.px-md-5,
#syarat .clearfix.px-md-5
{
	position: relative;
}
#first-carousel-section .lSAction > a {
	top: 40%;
}
.ktaformnumber .form-check-inline, 
.ktaformdate .form-check-inline {
	width: 100%;
	margin-right: 0.15rem;
}

.ktaformnumber .form-check-inline:last-child,
.ktaformdate .form-check-inline:last-child {
	margin-right: 0px;
}

.ktaformnumber .form-check-inline .text-sm, 
.ktaformdate .form-check-inline .text-sm {
	font-size: 14px;
	width: 100%;
}

.requirements-wrapper .bg-danger {
	background-color: #DA593C !important;
}


/* STEPS STYLE MASTER */
.kta-steps a.back {
	color: #DA593C;
}

.kta-steps .form-container {
	max-width: 800px;
}

/*
.nav-steps .row {
	max-width: 800px;
}
*/
.container.nav-steps {
	max-width: 100%; 
/* 	overflow:auto; */
	
}
.nav-steps .row {
	width: 550px;
}

.nav-steps .row div {
	text-align: left;
	counter-increment: section;
	position: relative;	
	visibility: hidden;
	height: 0px;
}
.nav-steps .row div.active {
	visibility: visible;
	height: auto;
}
.nav-steps .row div:before {
  content: counter(section);
  left: 0px; 
/*   margin-right: 10px; */
  position: absolute;
  border-radius: 50%;
/*   padding: 10px; */
  height: 20px;
  width: 20px;
/*   background-color: blue; */
  text-align:center;
/*
  color: white;
  font-size: 110%;
*/
  border: 1px solid #a9a9a9;
  font-size:0.8em;
}

.nav-steps .row div hr {
	border: 0.5px solid #a9a9a9;
	margin-top: 2rem;
	margin-bottom: 3rem;	
}

.nav-steps .row div.active:before {
	border: none;	
	background-color: #ECA94B;
	color: #fff;
}

.nav-steps .row div.filled:before {
	border: none;	
	background-color: #0CC863;
	color: #fff;
}

.nav-steps .row div.active hr {
	border: 2px solid #FEC703;
	margin-top: 1.9rem;
	margin-bottom: 3rem;		
	
}


.nav-steps a.step {
	color: #000;
	font-weight: bold;
/* 	margin: 0px 3px 0px 4px; */
	padding: 0px 0px 0px 25px;
	width: 100%;
	display: block;
}
.nav-steps a.step:hover {
	text-decoration: none;
}





.nav-steps a.step.active {
/*   border-bottom: 4px solid #FEC703; */
}


.profile-pic {
	width: 60px;
	height: auto;
	background: #fff;
	display: block;
	overflow: hidden;
}

.kta-steps .btn-next.btn-danger, .kta-steps .btn-next-form.btn-danger {
	width: 300px;
	background: #A6A2A1;
	border: none;
	box-shadow: 4px 10px 20px rgba(0, 0, 0, 0.15);
	border-radius: 25px;	
}
.kta-steps .btn-next.btn-danger.active {
	background: #DA593C;
}
.section-button {
	display: block;
	width: 100%;
}
.kta-steps .section-button a.back{
	font-size: 15px;
	line-height: 31px;	
	text-align: center;

	display: block;
	border: 1px solid #DA593C;
	border-radius:30px; 
	background-color: transparent;
	padding: 2px 10px; 
	color:#DA593C;
}

/*

.kta-steps .section-button a.back{
	float: left;
}
*/

.kta-steps .section-button a.back, .kta-steps .section-button .btn-next{
		width: 100%; 
		float:none;
		margin-bottom: 20px;
		font-size: 18px;
		
}


.otp-inner {
	width: 20rem;
}


.step-info {
	min-width: 100%;
	display: block;
	margin: 0 auto;
} 



.step-info select {

  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
/*   height: 34px; */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('../images/vector/select-down.svg')  95% / 12px no-repeat #fff;
}


/* CAUTION: Internet Explorer hackery ahead */


.step-two-info select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}


.homepage-floating-card select {
  border: 1px solid #CCC;
  height: auto;
font-size: 20px !important;
font-weight: bold;
  height: auto !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('../images/vector/home-down.svg')  95% / 12px no-repeat #fff;
	
}



@media screen and (max-width: 320px) {
	.ktaformnumber .form-check-inline .text-sm, 
	.ktaformdate .form-check-inline .text-sm 	
	{
	padding: 5px 0px !important;
	}
	
.ktaformnumber .form-check-inline .text-sm, 
.ktaformdate .form-check-inline .text-sm {
	font-size: 12px;
}	
	
	
	.lSAction {
		display: none;
	}

	.testimoni-desktop .card-carousel-body:last-child {
	 font-size:12px; 
	} 	
	.testimoni-desktop {
		height: 50vh;
	}
	.testimoni-desktop span.font-weight-light {
		display: block;
	}
	
	
}


/*Desktop above 768*/
@media screen and (min-width: 768px) {
	.homepage-floating-card {
		width: 26rem !important;
	}
	
	.requirements-wrapper {
	    padding-top: 70px;
	}
		
	/*hero*/
	
	.carousel-item {
		min-height: 730px;
	}
	
	
	.container.kta-steps {
		width: 1070px;
	}
	
	
	.container.nav-steps {
		max-width: 100%; 
		overflow:auto;
		
	}
	.nav-steps .row {
		width: 600px;
	}	
		
	.nav-steps .row div {
		visibility: visible;
	}	
	
	
	.lSAction {
		display: block;
	}	
	.lSAction > a {
		top: 40%;
	}	
	
	
	.otp-inner {
		width: 30rem;
	}
	
	
	.ktaformnumber .form-check-inline, 
	.ktaformdate .form-check-inline {
	width: 100px;
	}
	.ktaformnumber .form-check-inline .text-sm, 
	.ktaformdate .form-check-inline .text-sm {
		font-size: 10px;
	}
	.lSAction > .lSNext  {
		right: 40px;
	}
	.kta-steps a.back {
		font-size: 15px;
		line-height: 35px;
	}
	
	
	.kta-steps .section-button a.back{
		width: 158px; 
		float: left;
		}	
	.kta-steps .section-button .btn-next {
		float: right;
		width: 300px;
	}
		
		
	.profile-pic {
		width: 60px;
		height: 60px;
	}	
	
	
	
	
	.step-info {
		min-width: 600px;
		width: 600px;
		max-width: auto;

	} 
	
	
	.step-info select {
	
	  background: url('../images/vector/select-down.svg')  98% / 12px no-repeat #fff;
	}		
	
	
	
		
		
}

@media screen and (min-width: 1440px) {

/* STEPS STYLE MASTER */
	.kta-steps a.back {
		font-size: 18px;
	}
	

	
	
}