/* tambah data sopir css */
body {
	background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
	font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

.page-content {
	background: rgba(34, 40, 49, .92);
	border-radius: 24px;
	margin-top: 30px;
	padding: 32px 24px;
	box-shadow: 0 4px 32px 0 #0c25342e;
	border: 1px solid #21e6c1;
}

.record-title {
	font-size: 2em;
	font-weight: 700;
	color: #21e6c1;
	letter-spacing: 2px;
	text-shadow: 0 2px 14px #21e6c189;
}

.table thead th,
.table tfoot th {
	background: rgba(12, 36, 97, .7) !important;
	color: #21e6c1 !important;
	font-weight: 600;
	border: none !important;
	font-size: 1.05em;
	text-shadow: 0 1px 4px #16213e45;
}

.table-striped tbody tr {
	background: rgba(44, 62, 80, .7);
	color: #fafbfd;
	transition: box-shadow 0.2s;
}

.table-striped tbody tr:hover {
	box-shadow: 0 4px 18px #21e6c138;
	background: #1b1f25ea;
}

.form-control,
.dropzone-input {
	background: #23272f !important;
	border: 1px solid #21e6c180;
	border-radius: 12px;
	color: #21e6c1;
	font-size: 1em;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-shadow: none;
}

.form-control:focus,
.dropzone-input:focus {
	border: 1.7px solid #278ea5;
	outline: none;
	box-shadow: 0 0 0 4px #21e6c13d;
	background: #232343 !important;
	color: #f8f7ff;
}

.dropzone {
	background: rgba(35, 39, 47, 0.73);
	border: 1.5px dashed #278ea5;
	border-radius: 13px;
	color: #c7efcf;
	padding: 12px;
	margin: 0;
	min-width: 190px;
	text-align: center;
	transition: border-color 0.25s;
}

.dropzone .dz-file-limit {
	color: #e94560 !important;
}

.form-ajax-status {
	color: #f8e71c;
}

.btn-primary {
	background: linear-gradient(120deg, #009ffd 0%, #21e6c1 100%);
	border: none;
	color: #212529;
	border-radius: 10px;
	font-size: 1.2em;
	font-weight: 600;
	padding: 10px 36px;
	box-shadow: 0 2px 12px #21e6c151;
	transition: background 0.25s, color 0.18s, transform 0.16s;
}

.btn-primary:hover {
	background: linear-gradient(120deg, #21e6c1 0%, #009ffd 100%);
	color: #112034;
	transform: translateY(-2px) scale(1.03);
}

.btn-light.btn-add-table-row {
	background: linear-gradient(95deg, #21e6c1 0%, #009ffd 90%);
	color: #212529;
	border-radius: 7px;
	border: none;
	transition: background .2s, color .2s;
}

.btn-light.btn-add-table-row:hover {
	background: #278ea5;
	color: #f7f7f7;
}

.btn-remove-table-row {
	background: transparent;
	border: none;
	color: #e94560;
	font-size: 2em;
	font-weight: 700;
	padding: 0 5px;
	transition: color .2s, background .1s;
	border-radius: 4px;
}

.btn-remove-table-row:hover {
	background: #1b2836;
	color: #fff;
	box-shadow: 0 2px 8px #e9456055;
}

label {
	font-weight: 600;
	color: #21e6c1;
	letter-spacing: .04em;
}

@media (max-width: 767px) {
	.page-content {
		padding: 12px 3px;
	}

	.record-title {
		font-size: 1.2em;
	}

	.table label,
	label {
		font-size: 0.95em;
	}

	.form-control,
	.dropzone-input {
		font-size: 0.98em;
	}
}

/* data sopir css */

body,
	.page {
		background: linear-gradient(135deg, #21242b 0%, #293749 100%);
		font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
		color: #dfe6f3;
	}

	.table-responsive {
		max-height: 70vh;
		overflow-y: auto;
		border-radius: 1.1rem;
		box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
		backdrop-filter: blur(2px);
	}

	.card.page-content {
		background: linear-gradient(120deg, rgba(17, 38, 78, 0.7) 80%, rgba(1, 194, 197, 0.09) 100%);
		border-radius: 1.3rem;
		box-shadow: 0 12px 40px rgba(60, 89, 255, 0.12), 0 1.5px 13px rgba(1, 194, 197, 0.10);
		border: none;
	}

	.table {
		background: transparent;
		border-radius: 0.7rem;
		margin-bottom: 0;
		overflow: hidden;
	}

	.table-header.bg-info {
		background: linear-gradient(90deg, #049798 0, #011832 65%);
		color: #fff !important;
		text-shadow: 0 0 3px #1fcbe7, 0 1px 1px #1f2d59;
		border-radius: 0.7rem 0.7rem 0 0;
		border-bottom: 2px solid #04e4f7 !important;
	}

	.table thead th,
	.table th {
		position: sticky;
		top: 0;
		z-index: 10;
		background: transparent !important;
		border-color: #02b5be !important;
		font-weight: 600;
		letter-spacing: 0.7px;
		padding-top: 1.07rem;
		padding-bottom: 1.01rem;
		font-size: 1.01rem;
		transition: background 0.3s;
	}

	.table .sortedby {
		color: #1f90ea;
		text-decoration: underline;
		background: rgba(73, 161, 255, 0.09) !important;
	}

	.table-striped tbody tr:nth-of-type(odd) {
		background-color: rgba(1, 194, 197, 0.08);
	}

	.table tbody tr {
		background: linear-gradient(90deg, #242f40 0%, #1e2233 100%);
		border-bottom: 1.3px solid #213b63;
		transition: background 0.22s;
	}

	.table tbody tr:hover {
		background: linear-gradient(90deg, #263b57 0%, #15accb 100%);
		box-shadow: 0 0 10px #007bff24;
	}

	.table td,
	.table th {
		color: #e8edff;
		border-top: 1px solid #113856;
		vertical-align: middle;
	}

	a,
	.table a {
		color: #21bee5;
		transition: color .18s, box-shadow .23s;
	}

	a:hover,
	.table a:hover {
		color: #16fff2;
		text-shadow: 0 0 7px #14e3ff99;
		text-decoration: none;
	}

	.btn,
	.btn-info,
	.btn-primary,
	.btn-danger {
		border-radius: 0.9em;
		font-weight: 500;
		box-shadow: 0 2px 13px rgba(1, 194, 197, 0.10);
		letter-spacing: .04em;
		border: none;
	}

	.btn-info {
		background: linear-gradient(95deg, #0167c5 10%, #16e3e8 120%);
		color: #fff;
	}

	.btn-info:hover,
	.btn-info:focus {
		background: linear-gradient(110deg, #13eff9 30%, #015db3 100%);
		color: #fff;
		box-shadow: 0 0 15px #14e3ff99;
	}

	.btn-primary {
		background: linear-gradient(96deg, #1e303c 0, #2dd 80%);
		color: #fff;
	}

	.btn-primary:hover,
	.btn-primary:focus {
		background: linear-gradient(90deg, #08a8c9 0, #2daeeb 100%);
		color: #fff;
		box-shadow: 0 0 8px #22f1ff9a;
	}

	.btn-danger {
		background: linear-gradient(100deg, #db2a63 38%, #801c3e 80%);
		color: #fff;
	}

	.btn-danger:hover,
	.btn-danger:focus {
		background: linear-gradient(100deg, #f33 20%, #d9134c 90%);
		color: #fff;
		box-shadow: 0 0 18px #ff3958a0;
	}

	.page-list-action .dropdown-menu {
		left: 0 !important;
		right: auto !important;
		box-shadow: 0 8px 32px 0 rgba(60, 130, 255, 0.18);
		background: linear-gradient(93deg, #011f2a 77%, #08c9d6 108%);
		color: #fff;
		border: none;
		border-radius: 0.6em;
	}

	.breadcrumb {
		background: rgba(13, 19, 44, 0.29);
		border-radius: 1em;
		box-shadow: 0 1px 5px #01bec60c;
	}

	.breadcrumb .breadcrumb-item,
	.breadcrumb .breadcrumb-item a {
		color: #31e6fd;
		text-shadow: 0 1px 2px #30457419;
		font-size: 1.03em;
		font-weight: 500;
	}

	.breadcrumb .breadcrumb-item.active {
		color: #fff;
		font-weight: 700;
		background: linear-gradient(90deg, #1fcbe777 0, #1c2db7 45%);
		border-radius: 0.5em;
		padding: 2px 10px;
	}

	.form-control.ajax-page-search {
		background: #101d2c;
		color: #f3feff;
		border: 1.6px solid #13a6d6;
		border-radius: 1.3em;
		box-shadow: 0 0 10px #13e2ff20;
		font-weight: 500;
		letter-spacing: .03em;
		transition: border-color 0.2s, background 0.2s;
	}

	.form-control.ajax-page-search:focus {
		border: 1.6px solid #20fff0;
		background: #17283e;
		box-shadow: 0 0 25px #14e3ff60;
		color: #fff;
	}

	hr.sm {
		border-top: 2px solid #12deff64;
	}

	.bg-light.text-center {
		background: linear-gradient(90deg, #23313e 33%, #124e67 100%);
		border-radius: 0.9em;
		color: #a7bdcc !important;
	}

	.animated.bounceInDown {
		animation: futuristic-bounce-in 0.75s cubic-bezier(.68, -0.55, .27, 1.55) both;
	}

	@keyframes futuristic-bounce-in {
		0% {
			transform: translateY(-55px) scaleY(.9);
			opacity: 0;
		}

		70% {
			transform: translateY(8px) scaleY(1.07);
		}

		100% {
			transform: translateY(0) scaleY(1);
			opacity: 1;
		}
	}

	.export-link-btn img {
		width: 1.3rem;
		filter: drop-shadow(0 0 7px #0ff1);
		vertical-align: middle;
		margin-right: 8px;
	}

	@media (max-width: 990px) {

		.table-header.bg-info,
		.table thead th,
		.table th {
			font-size: 1.01rem;
			padding-top: .8rem;
			padding-bottom: .8rem;
		}

		.card.page-content {
			padding: .3rem !important;
			border-radius: 1.1em;
		}

		.table-responsive {
			border-radius: 0.7rem;
		}
	}

	/* ubah data sopir */

	body,
	.page {
		background: linear-gradient(135deg, #181d2f 0%, #1d283a 100%);
		font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
		color: #e0fbfc;
	}

	.page-content {
		background: rgba(21, 26, 44, 0.97);
		border-radius: 18px;
		margin-top: 32px;
		padding: 32px 22px;
		box-shadow: 0 6px 36px 0 #147ef32e;
		border: 1.7px solid #21e6c1aa;
		animation: glow 1.7s infinite alternate;
	}

	@keyframes glow {
		0% {
			box-shadow: 0 0 16px #21e6c148, 0 8px 28px #278ea520;
		}

		100% {
			box-shadow: 0 2px 29px #21e6c190, 0 1.5px 13px #278ea582;
		}
	}

	.record-title {
		font-size: 2.1em;
		font-weight: 700;
		color: #21e6c1;
		letter-spacing: 2px;
		text-shadow: 0 2px 16px #21e6c189;
	}

	.form-group {
		margin-bottom: 1.6rem;
	}

	.form-control,
	.dropzone-input {
		background: #23273a !important;
		border: 1.6px solid #21e6c168;
		border-radius: 11px;
		color: #21e6c1;
		font-size: 1em;
		transition: border-color 0.22s, box-shadow 0.23s;
		box-shadow: 0 0 0 0 #21e6c180;
	}

	.form-control:focus,
	.dropzone-input:focus {
		border: 2.1px solid #278ea5;
		outline: none;
		box-shadow: 0 0 0 4px #21e6c125;
		background: #222e43 !important;
		color: #f8f7ff;
	}

	.label,
	.control-label {
		color: #75ffea;
		font-weight: 600;
		text-shadow: 0 1.5px 9px #3af8fd33;
		padding-top: 5px;
	}

	.dropzone {
		border: 2px dashed #5799fc99 !important;
		background: linear-gradient(120deg, #12162b 30%, #243b55 100%);
		padding: 22px 14px;
		border-radius: 10px;
		box-shadow: 0 2px 8px #009ffd25;
		color: #7bcef7;
		font-size: 1.01em;
		margin-bottom: 7px;
	}

	.dz-file-limit {
		margin-top: 4.5px;
		font-size: 0.99em;
	}

	textarea.form-control {
		resize: vertical;
		min-height: 100px;
		max-height: 350px;
	}

	.btn-primary {
		background: linear-gradient(120deg, #009ffd 0%, #21e6c1 100%);
		border: none;
		color: #212529;
		border-radius: 10px;
		font-size: 1.19em;
		font-weight: 600;
		padding: 11px 41px;
		box-shadow: 0 2px 12px #21e6c151;
		transition: background 0.27s, color 0.16s, transform 0.1s;
	}

	.btn-primary:hover {
		background: linear-gradient(120deg, #21e6c1 0%, #009ffd 100%);
		color: #18212a;
		transform: translateY(-2px) scale(1.022);
		box-shadow: 0 8px 30px #42fff081;
	}

	.form-group.text-center {
		margin-top: 22px;
	}

	::-webkit-input-placeholder {
		color: #73c9ffbb;
	}

	::-moz-placeholder {
		color: #73c9ffbb;
	}

	:-ms-input-placeholder {
		color: #73c9ffbb;
	}

	::placeholder {
		color: #73c9ffbb;
	}