:root {
	--primary: #061fd6;
	--accent: #ffc944;
	--dark: #030c49;
	--text-foreground-light: #f1f5f9;
	/*var(--primary) */

	font-size: 16px;
}

body {
	font-family: "Satoshi-Variable", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: unset;
}

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

.auth-full-bg {
	background-color: #eaf2f5 !important;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.auth-full-bg::before {
	background-color: #030c49;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	border-radius: 0;
	opacity: 0.75;
}

.auth-full-page-content::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("../img/bg-pattern.png");
	mix-blend-mode: difference;
	opacity: 0.15;
	z-index: -1;
}

.bg-custom-thead {
	background: url("../img/bg-pattern.png");
}

.bg-theme-custom {
	background-color: var(--dark) !important;
}

.bg-theme-custom-secondary {
	background-color: #a6b0cf !important;
}

.bg-soft-color-custom {
	background-color: #d0e1e8 !important;
}

a.bg-theme-custom,
a.bg-theme-custom,
button.bg-theme-custom,
button.bg-theme-custom {
	background-color: var(--primary) !important;
}

a.bg-theme-custom:focus,
a.bg-theme-custom:hover,
button.bg-theme-custom:focus,
button.bg-theme-custom:hover {
	background-color: var(--primary) !important;
}

.card-aplikasi:hover h4 {
	color: #fff !important;
}


.bg-theme-custom-dark {
	background-color: var(--dark) !important;
	background-image: url("../img/bg-pattern.png");
	color: white;
}

.bg-sidebar {
	background-image: url("../img/bg-pattern.png") !important;
	background-position: left bottom !important;
	background-repeat: repeat !important;
	background-size: 125% !important;
}

.bg-corner {
	background-image: url("../img/bg-corner.png") !important;
	background-position: right top !important;
	background-repeat: no-repeat !important;
	background-size: 20% !important;
}

.rounded-pill-top {
	border-top-left-radius: 1.5rem !important;
	border-top-right-radius: 1.5rem !important;
}

.rounded-pill-bottom {
	border-bottom-left-radius: 1.5rem !important;
	border-bottom-right-radius: 1.5rem !important;
}

.topnav .navbar-nav .dropdown-item.active,
.topnav .navbar-nav .dropdown-item:hover {
	color: var(--primary) !important;
	background-color: #c3d9e2;
}

body[data-sidebar="light"] .navbar-brand-box {
	background: #fff;
}

body[data-sidebar="light"] .vertical-menu {
	background: var(--dark) !important;
}

body[data-sidebar="light"] .mm-active>a {
	color: var(--dark) !important;
}

body[data-sidebar="light"] .menu-title {
	color: #fff !important;
}

body[data-sidebar="dark"] .menu-title {
	color: #a6b0cf !important;
}

body[data-sidebar="light"] #sidebar-menu ul li a i {
	color: #fff !important;
}

body[data-sidebar="light"] #sidebar-menu ul li.mm-active a[aria-expanded="true"] {
	color: var(--dark) !important;
	font-weight: bold;
}

body[data-sidebar="light"] #sidebar-menu ul li.mm-active a i {
	color: var(--primary) !important;
	font-weight: bold;
}

body[data-sidebar="light"] .mm-active {
	background-color: #fff;
}

body[data-sidebar="light"] #sidebar-menu ul li ul.sub-menu li.mm-active {
	background-color: #c3d9e2;
}

body[data-sidebar="light"] #sidebar-menu ul li ul.sub-menu li a {
	color: var(--primary) !important;
}

body #sidebar-menu ul li a {
	display: block;
	padding: .625rem 1.5rem;
	position: relative;
	font-size: 1rem;
	-webkit-transition: all .4s;
	transition: all .4s;
	font-weight: 500;
}

body[data-sidebar="light"] #sidebar-menu ul li a {
	color: #fff !important;
}

body[data-sidebar="light"] #sidebar-menu ul li a:hover::after,
body[data-sidebar="light"] #sidebar-menu ul li.mm-active a::after {
	opacity: 1;
	transition: all .4s;
}

body[data-sidebar="light"] #sidebar-menu ul li a::after {
	content: "";
	position: absolute;
	top: 0;
	opacity: 0;
	right: 0;
	width: 7px;
	height: 100%;
	background-color: var(--accent);
}

body[data-sidebar="light"] #sidebar-menu ul li a:hover {
	color: var(--dark) !important;
	background-color: rgba(255, 255, 255, 0.75);
	background-image: url("../img/bg-pattern.png") !important;
	background-position: left bottom !important;
	background-repeat: repeat !important;
	background-size: 100% !important;

}

body[data-sidebar="light"] #sidebar-menu ul li a:hover i {
	color: var(--dark) !important;
}

body[data-sidebar="light"].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
	color: #c3d9e2 !important;
	background-color: var(--primary) !important;
}

body[data-sidebar="light"].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a i {
	color: #c3d9e2 !important;
}

body[data-sidebar="light"] .navbar-brand-box {
	border-bottom: 4px solid var(--accent);
}

.topnav .navbar-nav .dropdown.active>a,
.topnav .navbar-nav .dropdown.active>a>i {
	color: var(--primary) !important;
	font-weight: bold;
}

.topnav .navbar-nav .nav-link:focus,
.topnav .navbar-nav .nav-link:hover {
	color: var(--primary) !important;
}

.menu-title {
	padding: 12px 20px !important;
	letter-spacing: .05em;
	pointer-events: none;
	cursor: default;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
}

body[data-topbar="dark"] #page-topbar {
	background-color: var(--primary);
}

.select2-container .select2-selection--single {
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	height: calc(1.5em + .94rem + 2px) !important;
	user-select: none;
	-webkit-user-select: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #444;
	line-height: calc(1.5em + .94rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: calc(1.5em + .94rem + 2px) !important;
	position: absolute;
	top: 1px;
	right: 1px;
	width: 30px !important;
}

.select2-container--default .select2-selection--single {
	background-color: #fff;
	border: 1px solid #ced4da !important;
	border-radius: .25rem !important;
}

.select2-dropdown {
	background-color: #fff;
	border: 1px solid #ced4da !important;
	border-radius: .25rem !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid #ced4da !important;
	border-radius: .25rem !important;
}

body.swal2-shown>[aria-hidden="true"] {
	transition: 0.1s filter;
	filter: blur(10px);
}

#peta {
	width: 100%;
	height: 400px;
	background-color: #eee;
	border-radius: 30px;
	box-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.86);
	-webkit-box-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.86);
	-moz-box-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.86);
}

body[data-sidebar="light"] .table-hover tbody tr:hover {
	background-color: #e7eff5;
}

body[data-sidebar="dark"] .table-hover tbody tr:hover {
	background-color: #003549;
}

.logo-lg-custom {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 10px;
}

body[data-sidebar="light"] .logo-lg-custom span {
	color: var(--primary);
	line-height: 1.2;
	text-align: start;
	font-size: 1.15em;
	font-weight: 600;
}

body[data-sidebar="dark"] .logo-lg-custom span {
	color: #fff;
	line-height: 1.2;
	text-align: start;
	font-size: 1.15em;
	font-weight: 600;
}

.badge-custom {
	color: #fff;
	background-color: var(--primary);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	color: #fff;
	background-color: var(--primary);
}

.card-child,
.card-single {
	background-color: transparent;
	box-shadow: none;
}

.card-child .card-header a,
.card-single .card-header a {
	display: block;
	padding: .75rem 2.25rem .75rem 1.25rem;
}

.card-child a {
	position: relative;
}

.card-child a::after {
	font-family: "Material Design Icons";
	content: "\F0140";
	font-size: 16px;
	position: absolute;
	top: 8px;
	right: 15px;
}

.card-child a.collapsed::after {
	transform: rotate(270deg);
}

.card-child .card-body {
	padding: 0;
	padding-top: 1.25rem;
	padding-left: 1.25rem;
}

.card-single .card-header {
	padding: .75rem 1.25rem !important;
}

#sidebar-layers,
#sidebar-info {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 300px;
	max-width: 400px;
	background-color: var(--primary);
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 5px;
	border-radius: 15px;
}


.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled] {
	background-color: var(--primary) !important;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
	background-color: #006dcc !important;
	background-image: -moz-linear-gradient(to bottom, #08c, var(--primary)) !important;
	background-image: -ms-linear-gradient(to bottom, #08c, var(--primary)) !important;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(var(--primary))) !important;
	background-image: -webkit-linear-gradient(to bottom, #08c, var(--primary)) !important;
	background-image: -o-linear-gradient(to bottom, #08c, var(--primary)) !important;
	background-image: linear-gradient(to bottom, #08c, var(--primary)) !important;
	background-repeat: repeat-x !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08c', endColorstr='var(--primary)', GradientType=0) !important;
}

#status.status-preloader {
	width: 90px !important;
	height: 90px !important;
	left: 47% !important;
	top: 43% !important;
}

.spinner-chase {
	width: 90px !important;
	height: 90px !important;
}

.chase-dot::before {
	width: 40% !important;
	height: 40% !important;
	background-color: var(--primary);
}

table.table-for-detail tr td:nth-child(1) {
	width: 20%;
}

table.table-for-detail tr td:nth-child(2) {
	width: 1%;
}

table.table-for-detail tr td:nth-child(3) {
	width: 79%;
}

table.table-for-form tr td:nth-child(1) {
	width: 25%;
}

table.table-for-form tr td:nth-child(2) {
	width: 75%;
}

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
	background-color: #c3d9e2 !important;
}

.table-striped tbody tr:nth-of-type(2n+1) {
	background-color: #f3f4f6;
}

body[data-sidebar=dark] .table-striped tbody tr:nth-of-type(2n+1) {
	background-color: #191e2e;
}


.table-bordered td,
.table-bordered th {
	border: 2px solid #d0e1e8;
}

body[data-sidebar=dark] .table-bordered td,
body[data-sidebar=dark] .table-bordered th {
	border: 2px solid #4f525c;
}

.table-bordered {
	border: 2px solid #d0e1e8;
}

body[data-sidebar=dark] .table-bordered {
	border: 2px solid #4f525c;
}

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

input:focus {
	border: 2px solid var(--primary) !important;
}

.bg-overlay {
	opacity: .3 !important;
	background-color: var(--primary) !important;
}

.auth-form-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-width: 400px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

/* btn */
.btn {
	font-size: 1rem;
	border-radius: 8px;
}

/* card */
.card {
	box-shadow: 0px 0px 0px rgba(3, 12, 73, 0.01),
		0px 1px 2px rgba(3, 12, 73, 0.01),
		0px 3px 4px rgba(3, 12, 73, 0.01),
		0px 5px 7px rgba(3, 12, 73, 0.01),
		0px 8px 11px rgba(3, 12, 73, 0.00),
		0px 12px 16px rgba(3, 12, 73, 0.00);

}

.card-header {
	padding: 1rem 2rem;
}

/* dropdown */
.dropdown-menu {
	border-radius: 12px;
	font-size: 1rem;
}

.dropdown-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* input */

input,
select,
textarea,
.form-control {
	font-size: 1rem;
	border-radius: 8px;
	padding: 12px 16px;
	height: 46px;
}

/* badge */
.badge {
	font-size: 14px;
	border-radius: 8px;
	padding: 4px 6px;
}

@media screen and (min-width: 992px) {

	.auth-full-bg,
	.auth-full-page-content {
		height: 100vh;
	}
}