:root{
	--ku-quartz: #4a4a4a;
	--ku-thin-grey: #f8f8f8;
	--ku-main-green: #8CB658;
	--ku-mid-green: #A2C03E;
	--ku-yellow-light: #fffaea;
	--ku-brown: #BB8370;
	--ku-mustard: #FFFAEA;
}

html,
body{
	background: #fff;
	min-height: 100%;
	font-family: "Raleway", sans-serif;
	color: var(--ku-quartz);
	font-weight: 400;
}

.no-scroll{
	overflow: hidden;
}

#content{
	display: block;
	position: relative;

	transition: all 1s;
}

.icon{
	background: transparent url(../images/icon-success.png) no-repeat center;
	background-size: 80px 80px;
	height: 80px;
}
	.icon-success{
		background-image: url(../images/icon-success.png);
	}
	.icon-failed{
		background-image: url(../images/icon-failed.png);
	}
	.icon-help{
		background-image: url(../images/icon-bantuan.png);
		background-size: auto 80px;
		height:
	}

.btn-green,
.btn-brown{
	text-align: center;
	padding: 15px 25px;
	font-weight: 600;
	font-size: 16px;
	color: var(--ku-thin-grey);
	background: var(--ku-main-green);
	text-decoration: none;
	outline: none;
	display: inline-block;
	border-radius: 6px;
	font-family: "Raleway", sans-serif;
	transition: background 0.2s ease-in-out;
	border: 1px solid transparent;
}
	.btn-green:hover,
	.btn-green:active{
		color: var(--ku-thin-grey);
		background: var(--ku-brown);
	}
.btn-brown{
	color: #fff;
	background: #BB8370;
}
	.btn-brown:hover,
	.btn-brown:active{
		color: #f8f8f8;
		background: #8CB658;
	}

.btn-green-light,
.btn-brown-light{
	background-color: transparent;
	display: inline-block;
	outline: none;
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	color: var(--ku-main-green);
	padding: 15px 25px;
	border-radius: 6px;
	border: 1px solid var(--ku-main-green);
	transition: background 0.2s ease-in-out;
}
	.btn-green-light:hover,
	.btn-green-light:active{
		color: #fff;
		border-color: var(--ku-main-green);
		background-color: var(--ku-main-green);
	}
		.btn-green-light:hover .icon,
		.btn-green-light:active .icon{
			filter: brightness(0) invert(1);
		}
.btn-brown-light{
	border-color: var(--ku-brown);
	color: var(--ku-brown);
}
	.btn-brown-light:hover,
	.btn-brown-light:active{
		color: #fff;
		background-color: var(--ku-brown);
		border-color: var(--ku-brown);
	}

.btn-green-light .icon{
	display: inline-block;
	background: transparent center no-repeat;
	background-size: cover;
	height: 20px;
	width: 20px;
	vertical-align: middle;
	margin-right: 10px;
}
	.btn-green-light .icon-phone{
		background-image: url(../images/icon-phone.png);
	}
	.btn-green-light .icon-wa{
		background-image: url(../images/icon-wa.png);
	}

.btn-disabled{
	color: #fff;
	background: #c4c4c4;
	opacity: .5;
	cursor: not-allowed;
}
	.btn-disabled:hover,
	.btn-disabled:active{
		color: #fff;
		background: #c4c4c4;
	}

.btn-process,
.btn-process:hover{
	opacity: .2;
	background-color: var(--ku-quartz);
	color: #fff;
}

.btn-wa{
	font-family: "Arial", sans-serif;
	line-height: 1;
}
	.btn-wa span,
	.btn-wa i{
		vertical-align: middle;
		display: inline-block;
	}

.btn-grey{
	background-color: var(--ku-thin-grey);
	width: 100%;
	margin: 0 0 30px;
	padding: 20px;
}

.link-green{
	outline: none;
	text-decoration: none;
	color: var(--ku-main-green);
	font-size: 16px;
	font-weight: 600;
}
	.link-green:hover,
	.link-green:focus{
		color: var(--ku-brown);
	}
.link-white{
	outline: none;
	text-decoration: none;
	color: #f8f8f8;
	font-size: 16px;
	font-weight: 500;
}
	.link-white:hover,
	.link-white:focus{
		color: #BB8370;
	}
.link-brown{
	outline: none;
	text-decoration: none;
	color: var(--ku-brown);
	font-size: 16px;
	font-weight: 500;
}
	.link-brown:hover,
	.link-brown:focus{
		color: var(--ku-brown);
		text-decoration: underline;
	}

.line-height-2{
	line-height: 2;
}

.page-title,
.page-subtitle,
.page-subtitle2{
	padding: 0;
	margin: 0 0 40px;
	font-weight: 500;
	font-size: 32px;
	color: #4a4a4a;
}
.page-subtitle{
	font-size: 16px;
	color: var(--ku-mid-green);
	margin: 0 0 16px;
}
.page-subtitle2{
	font-size: 24px;
	font-weight: 600;
	color: var(--ku-quartz);
}
.page-content{
	font-size: 14px;
	color: #4a4a4a;
}

.poster-round{
	display: inline-block;
	width: 237px;
	height: 237px;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
}
	.poster-round img{
		display: block;
		width: auto;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

#navbar{
	display: block;
	width: 100%;
	position: relative;
	background: #fff;
	padding: 25px 0;
	z-index: 11;
}
	#navbar .logo{
		display: inline-block;
		outline: none;
		text-decoration: none;
		margin: 0 25px 0 0;
	}
	#navbar .menu{
		display: inline-block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
		#navbar .menu li{
			margin: 0 20px;
			padding: 0;
			display: inline-block;
		}
			#navbar .menu li a{
				display: block;
				font-size: 16px;
				color: var(--ku-quartz);
				text-decoration: none;
				outline: none;
				font-weight: 600;
				font-family: "Raleway", sans-serif;
			}

#navbar .search{
	display: inline-block;
	position: absolute;
	box-shadow: 0px 0px 4px rgba(109, 109, 109, 0.25);
	padding: 9px;
	border-radius: 24px;
	margin: 0;
	transition: all 0.5s;
	width: 42px;
	vertical-align: middle;
	overflow: hidden;
	top: 7px;
	right: 410px;
}
	#navbar .search input{
		width: 180px;
		margin: 0 10px;
		border: none;
		background: none;
		position: absolute;
		right: 40px;
		top: 9px;
	}
		#navbar .search input:focus{
			outline: none;
		}
	#navbar .search .btn-search{
		display: inline-block;
		width: 24px;
		height: 24px;
		background: transparent url(../images/icon-search.png) no-repeat center;
		background-size: 24px 24px;
		text-decoration: none;
		outline: none;
	}
	#navbar .search.open{
		width: 247px;
		background: #fff;
	}

#hero-slider{
	display: block;
	position: relative;
	width: 100%;
	height: 55vw;
	background: #ccc;
}
	#hero-slider .slick-list,
	#hero-slider .slick-track,
	#hero-slider .slick-slide{
		height: 100%;
	}
		#hero-slider .slick-slide .link{
			display: block;
			width: 100%;
			text-decoration: none;
			outline: none;
		}
		#hero-slider .slick-slide .poster{
			width: 100%;
			height: auto;
		}
	#hero-slider .slick-arrow{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 25px;
		background: transparent url(../images/btn-arrow.png) no-repeat center;
		background-size: 56px 56px;
		width: 56px;
		height: 56px;
		border: none;
		outline: none;
		color: transparent;
		margin: -28px 0 0;
	}
	#hero-slider .slick-next{
		left: auto;
		right: 25px;
		transform: rotate(180deg);
	}
	#hero-slider .slick-dots{
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 50%;
		margin: 0 0 50px;
		padding: 0;
		list-style: none;
		transform: translateX(-50%);
	}
		#hero-slider .slick-dots li{
			display: inline-block;
			margin: 0;
			padding: 0;
		}
		#hero-slider .slick-dots li button{
			background: #f8f8f8;
			border: 0;
			outline: none;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			margin: 0 4px;
			font-size: 0;
			color: transparent;
		}
			#hero-slider .slick-dots li.slick-active button{
				width: 24px;
				background: #F8C154;
				border-radius: 20px;
			}
	#hero-slider .overlay{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		font-family: "Raleway", sans-serif;
		text-align: center;
	}
		#hero-slider .overlay h3{
			color: #fff;
			font-family: "Raleway", sans-serif;
			font-size: 48px;
			font-weight: bold;
			padding: 0;
			margin: 0 0 50px;
		}

#footer{
	padding: 35px 0;
	background: #fff;
	filter: drop-shadow(0px -2px 8px rgba(138, 138, 138, 0.5));
}
	#footer .logo{
		margin-right: 24px;
	}
	#footer .logo img{
		width: 130px;
	}
	#footer .others{
		text-decoration: none;
		outline: none;
		font-weight: 600;
		color: var(--ku-quartz);
		margin: 0 0 0 8px;
		padding: 0 0 0 10px;
		display: inline-block;
		border-left: 1px solid #c4c4c4;
		line-height: .8;
	}
	#footer .social-link{
		display: inline-block;
		outline: none;
		text-decoration: none;
		height: 30px;
		width: auto;
		margin: 0 10px;
		padding: 0;
		position: relative;
	}
		#footer .social-link:last-child{
			margin-right: 0;
		}
		#footer .social-link img{
			height: 100%;
			width: auto;
		}

.section{
	position: relative;
	padding: 60px 0;
	overflow: hidden;
}
	.section-yellow{
		background: var(--ku-yellow-light);
	}
	.section-green{
		background: #8CB658 url(../images/bg-gallery.png) repeat top left;
		background-size: 1440px 471px;
		overflow: hidden;
	}
	.section-logo{
		background-image: url(../images/section-yellow.png);
		background-repeat: no-repeat;
		background-size: 321px 282.5px;
		background-position: right bottom;
	}

	.section .title{
		font-family: "Raleway", sans-serif;
		font-weight: 600;
		font-size: 32px;
		margin: 0 0 60px;
		padding: 0;
		color: var(--ku-quartz);
	}
		.section .title-small{
			font-size: 24px;
		}
		.section-green .title{
			color: #f8f8f8;
		}
		.section .title-line{
			font-size: 18px;
			padding-bottom: 16px;
			border-bottom: 1px solid rgba(196,196,196,.5);
			margin-bottom: 30px;
		}
	.section .content{
		font-size: 16px;
	}
		.section .content p{
			padding: 0;
			margin: 0 0 30px;
		}

.services-slider{
	position: relative;
	display: block;
	margin-left: -25px;
	margin-right: -25px;
}
	.services-slider .item{
		position: relative;
		width: 100%;
		padding: 0 25px;
	}
		.services-slider .item .box{
			position: relative;
			width: 100%;
			font-size: 16px;
			color: #4a4a4a;
			text-align: center;
			line-height: 150%;
			font-weight: 300;
		}
			.services-slider .item .box .poster{
				position: relative;
				margin: 0 0 30px;
				text-align: center;
				height: 160px;
			}
				.services-slider .item .box .poster img{
					position: absolute;
					display: inline-block;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
		.services-slider .item .box h4{
			font-weight: 500;
			color: var(--ku-brown);
			font-size: 24px;
			margin: 0 0 16px;
		}
	.services-slider .slick-arrow{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 0;
		background: transparent url(../images/btn-arrow.png) no-repeat center;
		background-size: 56px 56px;
		width: 56px;
		height: 56px;
		border: none;
		outline: none;
		color: transparent;
		margin: -28px 0 0;
	}
	.services-slider .slick-next{
		left: auto;
		right: 0;
		transform: rotate(180deg);
	}

#overlap-carousel{
	position: relative;
}
	#overlap-carousel .wrap{
		position: relative;
		top: 0;
		left: 0;
		width: 135%;
	}

.carousel{
	position: relative;
	display: block;
	margin-left: -13px;
	margin-right: -13px;
}
	.carousel .item{
		position: relative;
		width: 100%;
		padding: 0 13px;
	}
		.carousel .item .box{
			position: relative;
			width: 100%;
			font-size: 16px;
			color: #4a4a4a;
			text-align: center;
			line-height: 150%;
			font-weight: 300;
		}
			.carousel .item .box .poster{
				display: block;
				position: relative;
				width: 100%;
				height: 233px;
				background-color: #ccc;
				margin: 0 0 30px;
				overflow: hidden;
				outline: none;
				text-decoration: none;
			}
				.carousel .item .box .poster img{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: auto;
				}
		.carousel .item .box .title{
			text-decoration: none;
			outline: none;
			display: block;
		}
			.carousel .item .box h4{
				font-weight: 500;
				color: #f8f8f8;
				font-size: 16px;
				margin: 0;
			}
	.carousel .slick-arrow{
		position: absolute;
		z-index: 2;
		top: 35%;
		left: 0;
		background: transparent url(../images/btn-arrow.png) no-repeat center;
		background-size: 56px 56px;
		width: 56px;
		height: 56px;
		border: none;
		outline: none;
		color: transparent;
		margin: -28px 0 0;
	}
	.carousel .slick-prev{
		display: none;
	}

.box-info{
	display: block;
	width: 100%;
	position: relative;
	background: #fff;
	box-shadow: 0px 0px 10px #E5E5E5;
	overflow: hidden;
	color: #4a4a4a;
	line-height: 150%;
	font-size: 16px;
	font-weight: 300;
}
	.box-info .poster{
		display: block;
		width: 100%;
		position: relative;
		margin: 0;
		background: #ccc;
		min-height: 200px;
	}
		.box-info .poster img{
			width: 100%;
			height: auto;
		}
	.box-info content{
		display: block;
		padding: 30px;
	}
	.box-info h3{
		font-weight: 600;
		margin: 0 0 17px;
		padding: 0;
		font-size: 18px;
	}

.headpage{
	display: block;
	position: relative;
	background: #EAF5FE url(../images/headpage.png) repeat left center;
	background-size: 1440px 80px;
	color: #4a4a4a;
	text-align: center;
	margin: 0 0 50px;
	padding: 30px 0;
}
	.headpage h4{
		padding: 0;
		margin: 0;
		font-size: 24px;
		font-weight: 600;
	}

.gallery-info{
	font-size: 14px;
	color: #4a4a4a;
	padding: 0 350px;
}
	.gallery-info h3{
		margin: 0 0 16px;
		padding: 0;
		font-weight: bold;
		font-size: 18px;
	}

.box-gallery{
	display: block;
	position: relative;
	margin: 0 0 50px;
}
	.box-gallery .poster{
		display: block;
		position: relative;
		text-decoration: none;
		outline: none;
		background: #ccc;
		min-height: 234px;
		cursor: pointer;
		margin: 0 0 25px;
		overflow: hidden;
	}
		.box-gallery .poster img{
			position: relative;
			height: 100%;
			width: auto;
			left: 50%;
			transform: translateX(-50%);			
		}
	.box-gallery .title{
		text-decoration: none;
		outline: none;
		display: block;
		text-align: center;
		cursor: pointer;
	}
		.box-gallery .title h3{
			font-size: 16px;
			color: var(--ku-quartz);
			font-weight: 600;
		}
			.box-gallery .title:hover h3{
				text-decoration: underline;
			}

.box-consultation{
	display: block;
	position: relative;
	background: #FFFAEA;
	padding: 40px;
	text-align: center;
	font-weight: 400;
	font-size: 14px;
	color: #4a4a4a;
}
	.box-consultation .poster{
		display: inline-block;
		width: 111px;
		height: auto;
		margin: 0 0 30px;
	}
	.box-consultation h5{
		font-weight: 600;
		font-size: 16px;
		margin: 0 0 30px;
		padding: 0;
	}
	.box-consultation p{
		padding: 0;
		margin: 0 0 30px;
	}

.box-list{
	display: block;
	position: relative;
	font-size: 14px;
	color: #4a4a4a;
}
	.box-list .info,
	.box-list .poster{
		float: left;
		width: 60%;
		position: relative;
	}
	.box-list .poster{
		width: 40%;
		padding: 0 0 0 25px;
	}
		.box-list .poster img{
			width: 100%;
			height: auto;
		}
	.box-list .info{
		padding: 0 25px 0 0;
	}
	.box-list .title{
		text-decoration: none;
		outline: none;
		cursor: pointer;
	}
		.box-list h3{
			font-weight: 600;
			font-size: 16px;
			margin: 0 0 15px;
			padding: 0;
			color: var(--ku-quartz);
		}
		.box-list .title:hover h3{
			color: #A2C03E;
			text-decoration: underline;
		}
	.box-list p{
		padding: 0;
		margin: 0 0 15px;
	}
	.box-list .readmore{
		font-weight: 300;
		color: #BB8370;
		text-decoration: none;
		outline: none;
		cursor: pointer;
	}
		.box-list .readmore:hover{
			text-decoration: underline;
		}

.box-post{
	display: block;
	position: relative;
	font-size: 16px;
	color: #4a4a4a;
}
	.box-post .title{
		font-weight: bold;
		font-size: 32px;
		padding: 0;
		margin: 0 0 30px;
	}
	.box-post .content{
		display: block;
		position: relative;
		margin: 0 0 40px;
		padding: 0;
	}
	.box-post .nav{
		display: block;
		position: relative;
	}
		.box-post .nav a{
			display: inline-block;
			text-decoration: none;
			outline: none;
			font-size: 16px;
			color: #BB8370;
		}
			.box-post .nav a:hover{
				text-decoration: underline;
			}

.paging{
	display: block;
	position: relative;
}
	.paging ul,
	.paging ul li{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.paging ul li{
		display: inline-block;
		position: relative;
		margin: 0 3px;
	}
		.paging ul li a{
			display: block;
			font-size: 16px;
			color: #4a4a4a;
			text-align: center;
			padding: 5px 10px;
			border-radius: 5px;
			background: transparent;
			text-decoration: none;
			outline: none;
		}
		.paging ul li.active a{
			background: #DAEFE0;
			color: #A2C03E;
		}
		.paging ul li.nextprev a{
			color: #BB8370;
		}

.box-service{
	display: block;
	position: relative;
	font-size: 14px;
	color: #000;
	text-align: center;
	background: #F8F8F8;
	margin: 0;
	height: 100%;
}
	.box-service .wrap{
		display: block;
		position: relative;
		text-decoration: none;
		outline: none;
		color: #000;
		padding: 0 20px 20px;
		border: 1px solid transparent;
		transition: all 0.2s ease-in-out;
		height: 100%;
	}
		.box-service .wrap:focus,
		.box-service .wrap:hover{
			color: #000;
			border-color: #ccc;
			box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
		}
	.box-service .poster{
		position: relative;
		margin: 0 -20px 30px;
	}
		.box-service .poster img{
			width: 100%;
			height: auto;
		}
	.box-service h3{
		font-weight: 500;
		font-size: 16px;
		color: var(--ku-mid-green);
		margin: 0 0 15px;
		padding: 0;
	}

.layanan-detail{
	position: relative;
}
	.layanan-detail .poster,
	.layanan-detail .page-content{
		float: left;
		width: 30%;
	}
	.layanan-detail .page-content{
		width: 70%;
	}

.list-psikolog{
	position: relative;
}
	.list-psikolog ul,
	.list-psikolog ul li{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.list-psikolog ul li{
		display: block;
		position: relative;
		background: #f8f8f8;
		transition: all 0.2s ease-in-out;
	}
		.list-psikolog ul li:nth-child(even){
			background: #fff;
		}
		.list-psikolog ul li:hover{
			border-color: #ccc;
			box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
			z-index: 2;
		}
	.list-psikolog ul li a{
		display: block;
		position: relative;
		text-align: left;
		padding: 24px;
		font-size: 16px;
		font-weight: 500;
		color: #4a4a4a;
		text-decoration: none;
		outline: none;
	}
		.list-psikolog ul li a span:nth-child(2){
			float: right;
			color: #8CB658;
		}

.psikolog{
	display: block;
	position: relative;
}
	.psikolog .poster,
	.psikolog .info{
		float: left;
		width: 30%;
	}
	.psikolog .info{
		width: 70%;
		font-size: 16px;
		color: #4a4a4a;
		font-weight: normal;
	}
	.psikolog .name,
	.psikolog .title{
		font-weight: 600;
		font-size: 18px;
		color: #4a4a4a;
		margin: 0 0 6px;
		padding: 0;
	}
	.psikolog .title{
		font-weight: normal;
		font-size: 16px;
		color: var(--ku-mid-green);
		margin-bottom: 30px;
	}
	.psikolog .poster .poster-round{
		width: 220px;
		height: 220px;
	}

.list-psikolog2,
.list-psikolog2 li{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
	.list-psikolog2 .poster-round{
		width: 200px;
		height: 200px;
	}
	.list-psikolog2 li{
		display: block;
		position: relative;
		margin: 0 0 30px;
	}
		.list-psikolog2 li:last-child{
			margin-bottom: 0;
		}
	.list-psikolog2 li a{
		display: block;
		position: relative;
		text-decoration: none;
		outline: none;
		font-weight: 300;
		foont-size: 14px;
		color: #4a4a4a;
		background: transparent;
		padding: 40px;
		transition: all 0.2s ease-in-out;
	}
		.list-psikolog2 li a:hover{
			background: rgb(187, 131, 112, .3);
		}
		.list-psikolog2 li a:after{
			content: "";
			display: block;
			clear: both;
		}
		.list-psikolog2 li a .poster,
		.list-psikolog2 li a .info{
			float: left;
			width: 20%;
		}
		.list-psikolog2 li a .info{
			width: 80%;
			padding: 0 0 0 75px;
		}
	.list-psikolog2 .name,
	.list-psikolog2 .title{
		margin: 0 0 6px;
		padding: 0;
		font-size: 18px;
		font-weight: 500;
		color: #4a4a4a;
	}
	.list-psikolog2 .title{
		font-size: 14px;
		color: #A2C03E;
		margin-bottom: 30px;
	}

.form-kancilku{
	position: relative;
	display: block;
	font-size: 16px;
	color: #4a4a4a;
	text-align: center;
}
	.form-kancilku input:focus,
	.form-kancilku textarea:focus{
		outline: none;
	}
	.form-kancilku .desc{
		text-align: center;
		margin: 0 0 40px;
		padding: 0;
	}
	.form-kancilku .control{
		display: block;
		position: relative;
		text-align: left;
		font-size: 14px;
		color: #4a4a4a;
		padding: 0;
		margin: 0 0 30px;
	}
		.form-kancilku .control label{
			color: #A2C03E;
			display: block;
			padding: 0;
			margin: 0 0 5px;
		}
			.form-kancilku .control label span{
				display: inline-block;
				color: #ca4f4c;
				margin: 0 0 0 5px;
			}
			.form-kancilku .control label.tnc,
			.form-kancilku .control label.tnc span{
				color: #4a4a4a;
			}
			.form-kancilku .control label.tnc span{
				width: 90%;
				margin: 0 0 0 3%;
				vertical-align: top;
			}
			.form-kancilku .control label.tnc .check{
				width: 5%;
				margin: 0;
			}
		.form-kancilku .control .input{
			display: block;
			width: 100%;
			border: none;
			border-bottom: 1px solid var(--ku-mid-green);
			background: transparent;
			padding: 10px 0;
			margin: 0;
			font-size: 14px;
			color: #4a4a4a;
		}
		.form-kancilku .control .input:focus{
			border-color: #A2C03E;
		}
		.form-kancilku .control .input.border-black{
			border-color: #c4c4c4;
		}
	.form-kancilku .info{
		background: #DBEEC3 url(../images/icon_user.png) 15px center no-repeat;
		background-size: 36px 36px;
		padding: 10px 10px 10px 65px;
		text-align: left;
		font-size: 12px;
		margin: 0 0 30px;
	}

.img-konsultasi{
	width: 334px;
}

.form-filter{
	display: block;
	width: 100%;
	position: relative;
}
	.form-filter input{
		display: inline-block;
		width: 85%;
		color: var(--ku-quartz);
		font-size: 16px;
		font-weight: normal;
		padding: 10px 20px;
		border: 1px solid #c4c4c4;
		border-radius: 6px;
		margin: 0 1% 0 0;
	}
	.form-filter .btn-green{
		display: inline-block;
		width: 13%;
		padding: 10px;
		border: 1px solid var(--ku-main-green);
	}

.box-ahli{
	display: block;
	position: relative;
	background: var(--ku-thin-grey);
	padding: 30px;
	text-align: center;
	font-size: 14px;
	color: var(--ku-mid-green);
	height: 100%;
}
	.box-ahli:hover{
		background-color: rgba(245,195,173,.2);
	}
	.box-ahli .poster{
		display: inline-block;
		width: 163px;
		height: 163px;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
		margin: 0 0 30px;
	}
		.box-ahli .poster img{
			display: inline-block;
			width: 100%;
			height: auto;
		}
	.box-ahli h5{
		font-weight: 600;
		font-size: 18px;
		margin: 0 0 16px;
		padding: 0 30px;
		color: var(--ku-quartz);
	}
	.box-ahli a{
		display: inline-block;
		margin: 30px 0 0;
		cursor: pointer;
	}

.table-jadwal{
	background-color: var(--ku-yellow-light);
	border-collapse: collapse;
	font-size: 18px;
	font-weight: normal;
	color: var(--ku-quartz);
	width: 100%;
	table-layout: fixed;
	position: relative;
}
	.table-jadwal tbody,
	.table-jadwal thead{
		width: 100%;
		display: table;
	}
	.table-jadwal th,
	.table-jadwal td{
		width: 42%;
	}
	.table-jadwal th:first-child,
	.table-jadwal td:first-child{
		width: 16%;
		text-align: left;
	}
	.table-jadwal th,
	.table-jadwal td{
		padding: 20px;
		border: 1px solid #e6e6e6;
	}
	.table-jadwal th{
		text-align: center;
	}
	.table-jadwal .time{
		display: inline-block;
		border: 1px solid var(--ku-quartz);
		padding: 5px 15px;
		margin: 0 10px 10px 0;
		font-size: 16px;
	}

.modal-temu .modal-content{
	padding: 30px 50px;
}
	.modal-temu h5{
		font-size: 24px;
		font-weight: 600;
		color: var(--ku-quartz);
		margin: 0 0 30px;
	}
	.modal-temu .btn-green-light{
		width: 100%;
		font-size: 16px;
		font-weight: 400;
		position: relative;
	}
		.modal-temu .btn-green-light .icon{
			position: absolute;
			left: 25px;
			top:  17px;
		}
	.modal-temu .icon-failed{
		background: transparent url(../images/icon-failed.png) no-repeat center;
		background-size: 80px 80px;
		margin: 0 0 30px;
		height: 80px;
	}

.box-yellow{
	background: var(--ku-mustard);
	border-radius: 6px;
	padding: 40px 200px;
}

.search-subtitle{
	font-size: 24px;
	font-weight: 600;
	color: var(--ku-quartz);
	padding: 0;
	margin: 0 0 24px;
}
.search-not-found{
	border: 1px dashed #C4C4C4;
	border-radius: 6px;
	position: relative;
	padding: 40px;
	text-align: center;
}
	.search-not-found .box{
		display: inline-block;
		/*padding: 0 0 0 100px;
		background: transparent url(../images/icon-not-found.png) no-repeat left center;
		background-size: 89.5px 54px;
		*/
		font-size: 18px;
		font-weight: 400;
		color: var(--ku-quartz);
		/*min-height: 54px;*/
	}
		.search-not-found .box img{
			width: 89.5px;
			height: 54px;
			display: inline-block;
			vertical-align: middle;
			margin-right: 10px;
		}
		.search-not-found .box span{
			display: inline-block;
			vertical-align: middle;
		}

.form-group-booking label{
	margin-bottom: 1.5rem;
	font-size: 16px;
	font-weight: 600;
	color: var(--ku-mid-green);
}
	.form-group-booking .date .input-group-text,
	.form-group-booking .time .input-group-text{
		background: #fff url(../images/icon-datepick.png) no-repeat center;
		background-size: 20px 20px;
		padding-left: 20px;
		padding-right: 20px;
		border-left: none;
	}
		.form-group-booking .time .input-group-text{
			background-image: url(../images/icon-select.png);
		}
	.form-group-booking .date input,
	.form-group-booking .time select{
		border-right: none;
	}
	.form-group-booking .form-control:focus {
	    outline:none;
	    border-color: #ced4da;
  		-webkit-box-shadow: none;
  		box-shadow: none;
	}

.box-white{
	box-shadow: 0px 0px 10px #E5E5E5;
	padding: 20px;
	position: relative;
}
	.box-white h5{
		font-weight: 600;
		font-size: 18px;
		color: var(--ku-mid-green);
		margin: 0 0 24px;
	}

.box-booking-confirm{
	position: relative;
	text-align: center;
}
	.box-booking-confirm .box{
		background: var(--ku-thin-grey);
		padding: 24px;
		position: relative;
		text-align: left;
		font-size: 14px;
	}
	.box-booking-confirm .box h5{
		font-weight: 600;
		font-size: 18px;
		margin: 0 0 24px;
	}
	.box-booking-confirm .box .label{
		color: var(--ku-mid-green);
	}
	.box-booking-confirm .box .spacer{
		height: 1px;
		background: #e5e5e5;
		margin: 0 0 24px;
	}

.list-patient{
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 25px;
	text-align: left;
	cursor: pointer;
	background: #fff;
	margin: 0 0 25px;
	box-shadow: 0px 0px 10px #E5E5E5;
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	color: var(--ku-quartz);
	font-weight: 400;
}
	.list-patient.selected{
		border-color: var(--ku-main-green);
	}
	.list-patient p strong{
		color: var(--ku-main-green);
		display: block;
		margin: 0 0 10px;
		padding: 0;
		font-weight: 400;
	}

.box-payment-no{
	background: var(--ku-yellow-light);
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	font-weight: 400;
	width: 400px;
	padding: 25px;
	display: inline-block;
}
	.box-payment-no .code{
		font-weight: 600;
		font-size: 24px;
	}
	.box-payment-no .copy{
		display: inline-block;
		font-weight: 500;
		font-size: 12px;
		padding: 10px;
		border: 1px solid var(--ku-brown);
		color: var(--ku-brown);
		text-decoration: none;
		background: transparent;
	}
		.box-payment-no .copy:hover{
			text-decoration: none;
		}

.select-form-control{
	position: relative;
	display: inline-block;
	width: 100%;
}
	.select-form-control:after{
		content: '';
		display: block;
		position: absolute;
		width: 10px;
		height: 10px;
		border: 2px solid var(--ku-main-green);
		border-top: none;
		border-right: none;
		top: 12px;
		right: 12px;
		transform: rotate(-45deg);
	}

.problems-panel{
	display: block;
	margin: 0 0 20px;
	color: var(--ku-quartz);
}
	.problems-panel header{
		display: block;
		border-radius: 7px;
		background-color: #EAF5FE;
		text-align: left;
		font-weight: bold;
		font-size: 18px;
		padding: 20px;
		border-width: 0 0 1px 0;
		border-color: #888;
		border-style: solid;
		cursor: pointer;
		position: relative;
	}
		.problems-panel header:after{
			content: "+";
			display: block;
			position: absolute;
			top: 12px;
			right: 20px;
			font-size: 32px;
			font-weight: 300;
		}
		.problems-panel.open header:after{
			content: "-";
		}
	.problems-panel content{
		display: none;
		position: relative;
	}
		.problems-panel content ul,
		.problems-panel content ul li{
			display: block;
			margin: 0;
			padding: 0;
			position: relative;
			list-style-type: none;
		}
		.problems-panel content ul li{
			background-color: var(--ku-thin-grey);
			font-size: 18px;
			border-width: 0 0 1px 0;
			border-color: #888;
			border-style: solid;
			border-radius: 7px;
			text-align: left;
		}
		.problems-panel content ul li.is_selected{
			background-color: var(--ku-yellow-light);
		}
			.problems-panel content ul li label{
				display: block;
				cursor: pointer;
				padding: 20px 40px 20px 20px;
			}
				.problems-panel content ul li label input{
					position: absolute;
					left: -2000px;
				}
				.problems-panel content ul li label .box{
					display: block;
					width: 13px;
					height: 14px;
					border: 1px solid var(--ku-quartz);
					position: absolute;
					top: 50%;
					right: 20px;
					transform: translateY(-50%);
				}
					.problems-panel content ul li label .box:after{
					  content: "\2713";
				    top: -5px;
				    position: absolute;
				    left: -1px;
				    font-size: 16px;
				    display: none;
					}
					.problems-panel content ul li label input:checked + .box:after{
						display: block;
					}

@media (min-width:992px){
	.w-lg-auto{
		width: auto !important;
	}
}

@media (min-width:1200px) and (max-width:1399px){
	#navbar .logo img{
		width: 135px;
	}
	#navbar .menu li {
		margin: 0 10px;
	}
	#navbar .btn-green,
	#navbar .btn-green-light{
		padding: 10px;
	}
	#navbar .search {
		top: 0;
		right: 350px;
	}
	.box-yellow {
		padding: 40px 150px;
	}
}