/* Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Datatable */
@import url('https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css');
@import url('https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css');
@import url('https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css');

/* Select2 */
@import url('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');

/* Choiches */
@import url('https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css');

/* Quill */
@import url('../../vendor/template/velzon/assets/libs/quill/quill.core.css');
@import url('../../vendor/template/velzon/assets/libs/quill/quill.bubble.css');
@import url('../../vendor/template/velzon/assets/libs/quill/quill.snow.css');

/* jsvectormap */
@import url('../../vendor/template/velzon/assets/libs/jsvectormap/css/jsvectormap.min.css');

/* JsTree */
@import url('https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css');

/* SweetAlert */
@import url('../../vendor/template/velzon/assets/libs/sweetalert2/sweetalert2.min.css');

/* Swiper */
@import url('../../vendor/template/velzon/assets/libs/swiper/swiper-bundle.min.css');

/* Grid */
@import url('../../vendor/template/velzon/assets/libs/gridjs/theme/mermaid.min.css');

/* Dropzone */
@import url('../../vendor/template/velzon/assets/libs/dropzone/dropzone.css');

/* FilePound */
@import url('../../vendor/template/velzon/assets/libs/filepond/filepond.min.css');
@import url('../../vendor/template/velzon/assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.css');

/* Layout CSS */
@import url('../../vendor/template/velzon/assets/css/bootstrap.min.css');

/* Icons */
@import url('../../vendor/template/velzon/assets/css/icons.min.css');

/* App */
@import url('../../vendor/template/velzon/assets/css/app.min.css');

/* Template Custom */
@import url('../../vendor/template/velzon/assets/css/custom.min.css');

/* Animate */
@import url('animate.min.css');

/* Your Own Custom CSS */
@import url('custom.css');

/* Flatpickr CSS */
@import url('https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css');

/* X Editable */
@import url('../lib/jquery-tabledit/css/bootstrap-editable.css');

/* Style untuk Choices */
.choices__inner {
	min-height: 38px;
	padding: 5px 10px;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
}

.choices__list--multiple .choices__item {
	background-color: #6c757d;
	border: 1px solid #6c757d;
	margin-right: 5px;
	margin-bottom: 5px;
}

.choices__list--multiple .choices__item .choices__button {
	border-left: 1px solid rgba(255, 255, 255, 0.5);
}

/* .loader-custom {
	width: 120px;
	height: 20px;
	-webkit-mask: linear-gradient(90deg, #8e3f8a 70%, #0000 0) 0/20%;
	background: linear-gradient(#8e3f8a 0 0) 0/0% no-repeat #ddd;
	animation: l4 2s infinite steps(6);
}
@keyframes l4 {
	100% {
		background-size: 120%;
	}
} */

.chart-tabs {
	display: flex;
	gap: 5px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.chart-tabs .chart-tab {
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
}

.chart-tabs .chart-tab.active {
	background-color: #6c757d;
	color: white;
}

.chart-content {
	position: relative;
	height: 400px;
}

.chart-content .chart-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}

.chart-content .chart-item.active {
	display: block;
}

#chartdiv {
	width: 100%;
}

/* Tambahkan style untuk pesan ketika tidak ada data */
.no-data-message {
	padding: 20px;
	text-align: center;
	color: #6c757d;
	font-style: italic;
}

.card .card-header h5.section-custom-title {
	background: #8e3f8a;
	color: #fff !important;
	padding: 10px;
	margin-top: 5px;
}

.btn-outline-green.btn-border,
.btn-soft-green.btn-border,
.btn-green.btn-border {
	border-bottom: 2px solid #5ef131;
}

.btn-green {
	background-color: #5ef131;
	border-color: #5ef131 !important;
	color: #363d48;
}

.btn-green:hover,
.btn-green:active {
	background-color: #5ef131 !important;
	border-color: #5ef131 !important;
	color: #363d48 !important;
}

.bg-purple {
	background: #8e3f8a;
}

.loading-custom {
	display: block;
	position: relative;
	height: 20px;
	width: 140px;
	background-image: linear-gradient(#fff 20px, transparent 0),
		linear-gradient(#fff 20px, transparent 0),
		linear-gradient(#fff 20px, transparent 0),
		linear-gradient(#fff 20px, transparent 0);
	background-repeat: no-repeat;
	background-size: 20px auto;
	background-position:
		0 0,
		40px 0,
		80px 0,
		120px 0;
	animation: pgfill 1s linear infinite;
}
@keyframes pgfill {
	0% {
		background-image: linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0);
	}
	25% {
		background-image: linear-gradient(#8e3f8a 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0);
	}
	50% {
		background-image: linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#8e3f8a 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0);
	}
	75% {
		background-image: linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#8e3f8a 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0);
	}
	100% {
		background-image: linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#fff 20px, transparent 0),
			linear-gradient(#8e3f8a 20px, transparent 0);
	}
}

@media print {
	body * {
		visibility: hidden;
	}
	#print-section,
	#print-section * {
		visibility: visible;
	}
	#print-section {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	.no-print {
		display: none !important;
	}
	.print-table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 15px;
	}
	.print-table,
	.print-table th,
	.print-table td {
		border: 1px solid black;
		padding: 5px;
	}
	.print-table th {
		background-color: #f2f2f2;
		text-align: center;
	}
	.text-center {
		text-align: center;
	}
	.page-break {
		page-break-after: always;
	}
}