/*==================================================*/
/* 01. HEADER RAPORT */
/*==================================================*/
.raport-header{
	display:flex;
	align-items:center;
	background:#fff;
	padding:8px 15px;
	border-radius:10px;
	box-shadow:0 2px 8px rgba(0,0,0,.08);
	margin-bottom:8px;
}

.logo-raport img{
	width:240px;
	height:auto;
}

.judul-raport h2{
	margin:0;
	font-size:1.1rem;
	font-weight:700;
	color:#123b72;
}

.judul-raport h4{
	margin:2px 0;
	font-size:.95rem;
	color:#1565c0;
}

.judul-raport p{
	margin:0;
	font-size:.75rem;
	color:#777;
}

/*==================================================*/
/* 02. RESPONSIVE HEADER */
/*==================================================*/
@media(max-width:768px){
	.raport-header{
		flex-direction:column;
		text-align:center;
		gap:10px;
	}
	.logo-raport img{
		width:180px;
	}
}

/*==================================================*/
/* 03. CARD RAPORT */
/*==================================================*/
.card-raport{
	background:#fff;
	border-radius:15px;
	padding:20px;
	box-shadow:0 3px 12px rgba(0,0,0,.08);
	height:100%;
	margin-bottom:15px;
}

.card-raport .nilai{
	font-size:2rem;
	font-weight:700;
	color:#123b72;
}

.card-raport .label{
	font-size:.85rem;
	color:#777;
	text-transform:uppercase;
}

/*==================================================*/
/* 04. WELCOME RAPORT */
/*==================================================*/
.welcome-box{
	background:#fff;
	border-radius:15px;
 
	box-shadow:0 3px 15px rgba(0,0,0,.08);
	display:flex;
	gap:20px;
	align-items:center;
	min-height:500px;
}

.welcome-image{
	width:45%;padding:20px;
}

.welcome-image img{
	width:10%;border-radius:20%;
	height:auto;
}

.welcome-content{
	width:100%;
	text-align:center;
}

.welcome-logo{
	width:250px;
}

.welcome-content h1{
	color:#123b72;
	font-size:2rem;
	font-weight:700;
}

.welcome-content h2{
	color:#1565c0;
	font-size:1.3rem;
}

.welcome-content p{
	color:#555;
	line-height:1.6;
}

.welcome-card{
	display:flex;
	justify-content:center;
	gap:15px;
	margin-top:25px;
}

.welcome-card div{
	background:#f2f7ff;
	padding:15px;
	border-radius:12px;
	width:150px;
}

.welcome-card strong{
	display:block;
	font-size:2rem;
	color:#1565c0;
}

.welcome-card span{
	color:#555;
	font-size:.85rem;
}

.welcome-info{
	margin-top:25px;
	padding:15px;
	background:#eef5ff;
	border-radius:10px;
	color:#123b72;
}

@media(max-width:768px){
	.welcome-box{
		flex-direction:column;
	}
	.welcome-image,.welcome-content{
		width:100%;
	}
	.welcome-card{
		flex-direction:column;
	}
	.welcome-card div{
		width:100%;
	}
}

/*==================================================*/
/* 05. SHEET MENU */
/*==================================================*/
.sheet-menu{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:5px 0 12px;
}

.sheet-button{
	display:flex;
	align-items:center;
	gap:6px;
	padding:5px 12px;
	font-size:.75rem;
	border-radius:8px;
	border:1px solid #1565c0;
	background:#fff;
	color:#1565c0;
	cursor:pointer;
	transition:.2s;
}

.sheet-button i{
	font-size:.9rem;
}

.sheet-button:hover,
.sheet-button.active{
	background:#1565c0;
	color:#fff;
	box-shadow:0 3px 8px rgba(21,101,192,.3);
}

/*==================================================*/
/* 06. AREA DATA */
/*==================================================*/
.kontainer-scroll{
	overflow:auto;
}

/*==================================================*/
/* 07. RESPONSIVE */
/*==================================================*/
@media(max-width:768px){
	.sheet-button{
		font-size:.7rem;
		padding:4px 8px;
	}
}

/*==================================================*/
/* 08. CARD RINGKASAN RAPORT */
/*==================================================*/
.card-ringkasan{
	background:linear-gradient(135deg,#123b72,#1565c0);
	color:#fff;
	padding:10px 12px;
	border-radius:10px;
	box-shadow:0 3px 10px rgba(0,0,0,.12);
	height:75px;
}
.card-ringkasan .icon{
	font-size:1.4rem;
	margin-bottom:8px;
}

.card-ringkasan .label{
	font-size:.75rem;
	text-transform:uppercase;
	opacity:.85;
}

.card-ringkasan .nilai{
	font-size:2rem;
	font-weight:700;
	margin-top:5px;
}

.card-ringkasan .nilai.kecil{
	font-size:1.1rem;
}

.card-ringkasan{
	min-height:110px;
	height:auto;
	padding:15px;
	overflow:visible;
}
.card-ringkasan .nilai{
	font-size:1.8rem;
	font-weight:700;
	margin-top:8px;
}
.card-ringkasan{
	min-height:90px;
	height:auto;
	padding:12px;
	overflow:hidden;
}

.card-ringkasan .nilai{
	margin-top:8px;
	font-size:1.8rem;
	font-weight:700;
}

.card-ringkasan .nilai.kecil{
	font-size:1rem;
	white-space:nowrap;
}
.card-ringkasan{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 15px;
	min-height:75px;
}

.card-ringkasan .icon{
	width:38px;
	height:38px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}

.card-ringkasan .label{
	font-size:.75rem;
	text-transform:uppercase;
	margin:0;
}

.card-ringkasan .nilai{
	margin-left:auto;
	font-size:1.5rem;
	font-weight:700;
}

.card-ringkasan .nilai.kecil{
	font-size:1rem;
}

.kab-menu{
	display:flex;
	gap:6px;
	flex-wrap:nowrap;
	margin-top:8px;
}

.kab-menu .pilih-kab{
	background:#f1f6ff;
	color:#1565c0;
	border:1px solid #c8dcff;
	border-radius:8px;
	padding:5px 12px;
	font-size:.72rem;
	font-weight:600;
	white-space:nowrap;
	transition:.2s;
}

.kab-menu .pilih-kab:hover,
.kab-menu .pilih-kab.active{
	background:#1565c0;
	color:#fff;
}