.fw-500 {
	font-weight: 500;
}

.br-10 {
	border-radius: 10px !important;
}

.btn-send {
	background-color: #1d548c;
	border-color: #1d548c;
	color: #fff;
}



.btn-send:hover {
	background-color: #4296eb;
	border-color: #4296eb;
	color: #fff;
}

.limit-2-line-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.limit-3-line-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sub-title {
	padding: 5px 30px;
	display: inline-block;
	border-radius: 10px;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 15px;
	color: #2687e7;
	background-color: rgba(81, 151, 255, 0.1);
}

.img-logo {
	max-width: 230px;
}

.site-logo .img-logo {
	max-width: 180px;
}

.infografis-area {
	margin-top: -100px;
}

.infografis-form {
	display: grid;
	grid-template-columns: minmax(auto, 50%) minmax(auto, 15%) 15% 25%;
	grid-template-areas: "input-top input-bottom-1 input-bottom-2 submit";
	gap: 0.7rem;
	margin: 1rem auto;
}

.infografis-form .item-1 {
	grid-area: input-top;
}

.infografis-form .item-2 {
	grid-area: input-bottom-1;
}

.infografis-form .item-3 {
	grid-area: input-bottom-2;
}

.infografis-form .item-4 {
	grid-area: submit;
}

.infografis-desc .title,
.infografis-desc .content {
	color: #fff;
	font-weight: 400;
}

.infografis-desc {
	padding: 0 30px 30px;
}

.infografis-desc .content {
	font-size: 1.5em;
	font-weight: 700;
}

.infografis-desc .img {
	max-width: 150px;
}

.show-jalan-display {
	gap: 1.5em;
	display: flex;
}

.show-jalan-display .jalan-img {
	max-width: 500px;
}

.show-jalan-display .jalan-info .list-data {
	gap: 2em;
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}

.list-data .list-result {
	/* flex: 1 1 auto; */
	gap: 1.5em;
	display: flex;
	align-items: center;
	flex: 1 auto;
}

.list-data .list-result .listing {
	font-size: 1em;
	font-weight: 500;
	border-radius: 10px;
}

.list-data .list-result .listing-img img {
	max-width: 200px;
}

.list-data .list-result span {
	display: block;
	line-height: 1.2;
	color: #0f3964;
}



.list-data .list-result .title {
	font-size: 1em;
	font-weight: 700;
}



.list-data .list-result .number {
	font-size: 2.5em;
	font-weight: 700;
}



.special-link a {
	border: 1px solid #fff;
	background-color: transparent;
}



.btn-perkerasan {
	border-radius: 5px;
	color: #0f3964;
}



.perkerasan-card {
	border-radius: 10px;
	padding: 25px;
	margin-bottom: 30px;
	background-color: #fff;
	border: 1px solid #ededed;
	box-shadow: 0 0 10px 4px rgba(31, 66, 135, .1);
	transition: background 250ms;
	height: fit-content;

	img {
		max-width: 100%;
		height: 100px;
		margin-bottom: 24px;
	}
}



.perkerasan-card:hover {

	background-color: rgba(81, 151, 255, 0.2);

}




.perkerasan-card .body-desc p {

	min-height: 86px;

}



.perkerasan-card .body-desc .link-sec {

	text-align: end;

}



#chart-index {

	height: 400px;

	width: 100%;

	border-radius: 15px;

}



.persebaran-card .body-sect {

	gap: 1.5em;

	display: flex;

	padding: 35px;

	border-radius: 10px;

	box-shadow: 0 0 3px 3px #ededed;

}



.about-us-img-wrap,
.img-faq {

	max-width: 400px;

	margin: 0 auto;

}



.data-detail-wrap {

	gap: 2em;

	display: flex;

}



.data-detail-wrap .map-card {

	width: 100%;

	max-width: 65%;

	position: relative;

}



.data-detail-wrap .map-card #map-detail-data {

	width: 100%;

	height: 500px;

	border-radius: 15px;

	position: relative;

}



.detail-section .jalan-doc {

	margin-bottom: 30px;

}



.navigation {

	position: absolute;

	display: flex;

	gap: 1em;

	bottom: 1em;

	right: 1em;

	z-index: 500;

	padding: 12px;

	border-radius: 10px;

	flex-direction: column;

}



.navigation .navigation-btn {

	padding: 10px;

	border-radius: 10px;

	line-height: 1.5;

	background-color: #fff;

	border: 1px solid #1d548c;

}



.navigation .navigation-btn:hover {

	background-color: #1d548c;

	color: #fff;

}



.data-detail-wrap .detail-data {

	max-width: 35%;

	width: 100%;

}



.jalan-doc input,
.jalan-doc textarea {

	height: 45px;

	border-radius: 5px;

}



#peta-chart {

	width: 100%;

	height: 700px;

	border-radius: 10px;

}



.detail-chart {

	position: absolute;

	left: 2em;

	top: 2em;

	z-index: 500;

	padding: 35px;

	border-radius: 15px;

	background-color: rgba(255, 255, 255, 0.85);

}



.detail-chart .form-group {

	margin-top: 30px;

}



.detail-chart .form-group ul {

	list-style: none;

	max-height: 200px;

	overflow-y: auto;

}



#login-section {

	min-height: 100vh;

	background-color: #f8f8f8;

	display: flex;

	align-items: center;

}



.card-wrap {

	gap: 1.5em;

	display: flex;

	min-height: 95vh;

	border-radius: 15px;

	background-color: #fff;

	box-shadow: 0 0 15px 5px #ededed;

}



.card-wrap .illust {

	width: 60%;

	padding: 25px;

	display: flex;

	align-items: center;

	justify-content: center;

	background-color: #1d548c;

	position: relative;

	border-radius: 15px 0 0 15px;

}



.card-wrap .illust img {

	width: 100%;

	height: auto;

	max-width: 800px;

}



.card-wrap .illust .logo {

	position: absolute;

	top: 2em;

	left: 2em;

	max-width: 300px;

	z-index: 2;

}



.card-wrap .form {

	padding: 50px;

}



.card-wrap .auth-full-page-content {

	width: 40%;

	padding: 50px;

}



.card-wrap .auth-full-page-content .greet {

	margin-top: 40px;

}



.card-wrap .auth-full-page-content .form-group {

	margin-bottom: 15px;

}

.card-wrap .auth-full-page-content .form-control {

	margin-top: 10px;

	border-radius: 10px;

	height: 55px;

}



.card-wrap .auth-full-page-content button {

	padding: 15px;

	width: 100%;

	border-radius: 10px;

}



.forget-link {

	color: #2687e7;

	font-weight: 600;

}



.forget-link:hover {

	color: #0F3964;

}



.bg-breadcrumb {

	background-size: 400px;

	background-position: right;

}



.btn-submit {

	color: #fff;

	padding: 10px 20px;

	background-color: #2687e7;

	border-radius: .5em;

	transition: 150ms;

}



.btn-submit:hover {

	background-color: #1d548c;

}



.btn-data {

	display: inline-block;

	color: #fff;

	padding: .5em 1.5em;

	background-color: #4296eb;

	border-radius: 10px;

	text-align: center;

}



.btn-data:hover {

	color: #fff;

	background-color: #2687e7;

}



.menu-color-white .ltn__main-menu>ul>li:hover>a {

	color: #2687e7;

}



.ltn__sticky-bg-primary {

	background-color: #0f3964;

}



.ltn__breadcrumb-inner {

	padding: 110px 0;

}



.nice-select {

	height: 65px;

	line-height: 55px;

}



.form-control {

	width: 100% !important;

}



.footer-nih ul li a:hover {

	color: #fff;

}



.footer-nih .footer-alamat .ltn__social-media a {

	/* padding: 15px; */

	width: 35px;

	height: 35px;

	border-radius: 5px;

	text-align: center;

	display: inline-block;

	transition: all .2s ease-in-out;

}

.footer-nih .footer-alamat ul li a:hover {

	color: #2687e7;

}



.footer-nih .footer-alamat .ltn__social-media a i {

	line-height: 35px;

}



.footer-nih .footer-alamat .ltn__social-media a:hover {

	background-color: #2687e7;

	color: #fff;

}



.custom-shape-divider-top-1635229766 {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	overflow: hidden;

	line-height: 0;

}



.custom-shape-divider-top-1635229766 svg {

	position: relative;

	display: block;

	width: calc(100% + 1.3px);

	height: 100px;

	transform: rotateY(180deg);

}



.custom-shape-divider-top-1635229766 .shape-fill {

	fill: #0F3964;

}



.custom-shape-divider-bottom-1635233032 {

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	overflow: hidden;

	line-height: 0;

	transform: rotate(180deg);

}



.custom-shape-divider-bottom-1635233032 svg {

	position: relative;

	display: block;

	width: calc(150% + 1.3px);

	height: 100px;

	transform: rotateY(180deg);

}



.custom-shape-divider-bottom-1635233032 .shape-fill {

	fill: #0F3964;

}



@media (max-width: 1600px) {

	#peta-chart {

		height: 500px;

	}



	.detail-chart {

		padding: 15px;

	}



	.detail-chart h2 {

		font-size: 1em;

	}



	.detail-chart h4 {

		font-size: .8em;

	}



	.detail-chart input {

		height: 45px;

	}



	.card-wrap .illust .ilustrasi {

		max-width: 600px;

	}



	.card-wrap .auth-full-page-content {

		padding: 1.5em;

	}

}



@media (min-width: 1200px) {

	.perkerasan-sect .col-lg-4:nth-child(4) {

		margin-top: -180px;

	}

}



@media (max-width: 1200px) {

	.ltn__hero {

		padding-top: 150px;

	}

}



@media (max-width: 768px) {

	.infografis-area {

		padding-top: 75px;

	}



	.infografis-form {

		gap: 1em;

		grid-template-areas:

			"input-top input-top"

			"input-bottom-1 input-bottom-2"

			"submit submit"

		;

		grid-template-columns: 49% 49%;

	}



	.perkerasan-card .body-desc p {

		min-height: 76px;

	}



	.persebaran-card .body-sect {

		flex-direction: column;

		gap: 2.5em;

	}



	.list-data .list-result {

		flex-direction: column;

	}



	.data-detail-wrap {

		flex-direction: column;

	}



	.data-detail-wrap .map-card,

	.data-detail-wrap .detail-data {

		max-width: 100%;

	}



	.data-detail-wrap .map-card #map-detail-data {

		height: 300px;

	}



	.peta-section .navigation {

		top: 1em;

	}



	.detail-chart {

		margin-top: 30px;

		position: relative;

		top: 0;

		left: 0;

	}



	.card-wrap {

		margin: 15px 0;

		flex-direction: column;

	}



	.card-wrap .illust {

		border-radius: 15px 15px 0 0;

	}



	.card-wrap .illust .ilustrasi {

		opacity: .7;

	}



	.card-wrap .illust,
	.card-wrap .auth-full-page-content {

		width: 100%;

	}



	.card-wrap .auth-full-page-content .greet {

		margin-top: 0;

	}

}



@media only screen and (max-width: 480px) {

	.infografis-form {

		grid-template-columns: 48% 48%;

	}



	.persebaran-card .body-sect {

		padding: 0;

		box-shadow: none;

	}



	.bg-breadcrumb {

		background-size: 300px;

		background-position: center;

	}



	.card-wrap .illust .logo {

		max-width: 200px;

	}

}