@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');

:root{
	--primary-color: rgba(0, 115, 230, 1);
	--background-color: rgba(221, 241, 255, 1);
	--paragraph-text-color: rgba(95, 94, 94, 1);

	--main-font: "Kumbh Sans", sans-serif;
}

body{
	font-family: var(--main-font);
}

p, span{
	color: var(--paragraph-text-color);
}

label{
	color: #414141!important;
	font-weight: 600!important;
}

label[required]::after{
	content: ' *';
	color: red;
}

input, textarea{
	caret-color: var(--primary-color);
}

input, text-area{
	outline-color: #B3BDD2;
}

table thead tr th{
	background-color: #F2F3F4!important;
	font-weight: 600;
}

input::placeholder, textarea::placeholder{
	font-size: 0.875rem;
	color: rgb(190, 190, 190)!important;
	font-weight: 400!important;
}

.table>:not(caption)>*>*{
	padding: .8rem;
}

::selection{
	color: white;
	background-color: var(--primary-color);
}

::-webkit-scrollbar{
	width: 0.4rem;
	height: 0.35rem;
	border-radius: 0.5rem;
	background-color: hsl(228, 8%, 76%);
}

::-webkit-scrollbar-thumb{
	background-color: hsl(228, 8%, 64%);
	border-radius: 0.5rem;
}

.text-primary {
	color: var(--primary-color) !important;
}

.text-dark{
	color: #414141!important;
}

.text-gray{
	color: #5F5E5E!important;
}

.bg-primary{
	color: white;
	background-color: var(--primary-color)!important;
}

.bg-main{
	background-color: var(--primary-color);
}

.btn{
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 5px;
}

.btn-primary{
	color: white;
	background-color: var(--primary-color);
}

.section-title{
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 16px;
}

.section-desc{
	font-size: 1rem;
	margin-bottom: 16px;
}
.text-small{
	font-size: 1rem;
}

.card{
	background-color: #FAFAFA;
}

.card-title{
	font-size: 1.5rem;
}

header{
	max-width: 100vw;
	background-color: rgba(255, 255, 255, .4);
	backdrop-filter: blur(6px);
}

header .logo img{
	height: 60px;
}

header.navbar {
	z-index: 100;
	width: 100%;
	padding: 4px 0;
}

section{
	margin-bottom: 80px;
}

footer{
	color: rgba(95, 94, 94, 1);
	background-color: var(--background-color);
}

.footer-desc{
	max-width: 435px;
}

.footer-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 25px;
	min-width: 25px;
	min-height: 25px;
	border-radius: 50%;
	background-color: var(--primary-color);
	transition: .3s;
}

.footer-icon i{
	font-size: 0.7rem;
	color: white;
}

.footer-icon:hover{
	transform: translateX(3px);
}

.sub-footer{
	font-size: 0.875rem;
	color: white;
	text-align: center;
	background-color: var(--primary-color);
}

.social-media-icon{
	color: white;
	background-color: var(--primary-color);
	border-radius: 4px;
	padding: 6px 8px;
	transition: .4s;
}

.social-media-icon:hover{
	color: #54a8c7;
	background-color: white;
}


.hero{
	min-height: 100vh;
}

.bg-hero{
	position: absolute;
	width: 100%;
	height: 75%;
	top: 0;
	z-index: -1;
	background: linear-gradient(180deg, #FFFFFF 0%, #E7F7FF 45.99%, #F1F8FF 91.98%);
}

.bg-hero::after{
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 75px;
	background-color: white;
	border-top-left-radius: 50% 100%;
	border-top-right-radius: 50% 100%;
}

.hero-title{
	font-size: 2.25rem;
}

.hero-desc{
	margin: 0 auto;
	max-width: 675px
}

.tracking > div{
	/* background-color: rgba(175, 217, 255, 1); */
	background: radial-gradient(ellipse at bottom, rgb(134, 192, 247) 0%, rgb(194, 224, 255) 100%);
}

.tracking-status:not(:last-child){
	margin-bottom: 18px;
}

.tracking-status i{
	margin-top: 4px;
}

.tracking-status-title{
	color: #414141;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0;
}

.tracking-status-time{
	color: #414141;
	font-size: 1rem;
	margin-bottom: 0;
}

.header-aduan{
	position: relative;
	background: linear-gradient(180deg, #FFFFFF 0%, #E7F7FF 45.99%, #F1F8FF 91.98%);
}

.header-aduan::after{
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 15px;
	background-color: white;
	border-top-left-radius: 50% 100%;
	border-top-right-radius: 50% 100%;
}

@media screen and (min-width: 1400px){
	.bg-hero{
		height: 65%;
	}

	section.hero{
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 768px) {
	section{
		margin-bottom: 100px;
	}
	.section-title{
		font-size: 1.75rem;
	}

	.section-desc{
		font-size: 0.938rem;
	}

	.section-img{
		width: 50%;
	}

	.text-small{
		font-size: .875rem;
	}

	.btn{
		font-size: 0.9rem;
	}

	header .logo img {
		height: 50px;
	}

	.card-title {
		font-size: 1.5rem;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero img{
		width: 65%;
	}

	.hero-desc{
		font-size: .9rem;
	}

	.tracking-status-title, .tracking-status-time{
		font-size: 1rem;
	}

	footer p{
		font-size: 0.9rem;
	}

	.footer-desc{
		max-width: max-content;
	}

	.sub-footer{
		font-size: 0.8rem;
	}

	.aduan-section .section-img{
		height: 270px;
	}
}

@media screen and (max-width: 425px) {
	label{
		font-size: 0.875rem;
	}

	input::placeholder{
		font-size: 0.85rem;
	}

	.table>:not(caption)>*>* {
		font-size: 0.875rem;
	}

	.section-title{
		font-size: 1.5rem;
	}

	.section-desc{
		font-size: 0.9rem;
	}

	.section-img {
		width: 75%;
	}

	.card-title{
		font-size: 1.25rem;
	}

	.hero-title {
		font-size: 1.7rem;
	}

	.hero img {
		width: 85%;
	}

	.hero-desc {
		font-size: .85rem;
	}

	.bg-hero{
		height: 70%;
	}

	.bg-hero::after {
		height: 55px;
	}

	.aduan-section .section-img {
		height: 180px;
	}
}

/* Modal Wellcome */
.information-image img{
	width: 230px;
	height: 250px;
	object-fit: contain;
}

.information-title{
	font-size: 1.5rem;
	margin-bottom: 12px;
}

.information-desc{
	font-size: 0.95rem;
	line-height: 140%;
	margin-bottom: 10px;
}

/* ================================================= */

.table td{
	font-size: 14px;
	border-color: #f5f5f5;
}
.table thead tr:last-child th{
	border: none!important;
}
.table.no-footer{
	border: none!important;
}
.table .btn{
	padding-left: .5rem;
	padding-right: .5rem;
}
.note-toolbar.card-header{
	flex-wrap: wrap;
}
.bg-transparent-white{
	background: #fff1;
}

/* DATATABLE CUSTOM */
.dataTables_wrapper .dataTables_paginate .paginate_button{
	padding: 0!important;
	background: none!important;
	border: none!important;
}
.page-item.active .page-link{
	background: var(--primary-color);
	border-color: var(--primary-color);
}
.py-6{
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.bg-dot{
	background-size: 0.75rem 0.75rem;
	background-image: radial-gradient(#54a8c7 2px,transparent 2.5px);
	opacity: .4;
}
.bg-dark a{
	color: #fffa;
}
.bg-dark a:hover{
	color: #fff;
}
.map-sidebar{
	background: #1D2635;
	overflow: auto;
}
.map-content-header{
	background: #fff;
	padding: 15px;
	box-shadow: 0px 5px 10px -8px #0001;
	position: relative;
	z-index: 10;
}
.map-content-body{
	position: relative!important;
	z-index: 1!important;
}
.map-container{
	width: 100%;
	min-height: 400px;
}
.map-info .table td{
	font-size: .8rem;
}
.map-info.collapse{
	background: #fff;
}
.map-info.collapse.show{
	transform: translateX(0);
	opacity: 1;
}

.layer-list .list-group-item{
	border: none;
	margin-bottom: 1px;
	background: #fff1;
}
.layer-list .list-group-item .action a{
	color: #fff;
}
.layer-list .action a.active{
	color: var(--tblr-primary);
}
.layer-list .action a.disable{
	color: #fff3;
}
.nav-basemap li{
	width: 100%;
}
.basemap-radio{
	position: relative;
	width: 100%;
	height: 50px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
}
.basemap-radio input{
	position: absolute;
	visibility: hidden;
}
.basemap-radio img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 4px solid #fff3;
	filter: grayscale(1);
	opacity: 0.3;
}
.basemap-radio input:checked ~ img{
	border-color: var(--tblr-primary);
	filter: grayscale(0);
	opacity: 1;
}
.jenjang-checkbox{
	padding: 10px;
	border-radius: 5px;
	margin: 0 0 5px;
	position: relative;
}
.jenjang-checkbox .title,
.jenjang-checkbox .input,
.jenjang-checkbox .badge{
	position: relative;
	z-index: 2;
}
.jenjang-checkbox .bg{
	position: absolute;
	inset: 0;
	background: #fff1;
	border-radius: 5px;
}
.jenjang-checkbox input:checked ~ .bg{
	background: var(--tblr-primary);
	opacity: 0.3;
	z-index: 0;
}

@media (min-width: 800px){
	.map-wrapper{
		min-height: calc(100vh - 60px);
		display: grid;
		grid-template-columns:300px 1fr;
	}	
	.map-info.collapse{
		width: 250px;
		position: absolute;
		inset: 0 0 0 auto;
		overflow: auto;
		z-index: 10000;
	}
	#long,#lat{
		min-width: 160px;
	}
	.map-content{
		display: grid;
		grid-template-rows: auto 1fr;
	}
	.map-container{
		position: absolute;
		inset: 0;
	}
}

#map {
	height: 100%;
	min-height: 200px;
}

.leaflet-control-attribution {
	display: none;
}