@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap');

:root {
	--primary: #4664E6;
	--primaryDark: #2244E1;
	--primaryLight: #0096FF;
	--accent: #8FD9A8;
	--accentDark: #28B5B5;

	--light: #FFF;
	--dark: #333;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Sen", sans-serif;
	text-rendering: optimizeLegibility;
	font-size: 15px;
	font-weight: 400;
}

a,
a:link,
a:visited {
	color: #333;
	text-decoration: none;
	transition: all .2s linear;
	cursor: pointer;
}

.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 78px;
	background: #11101D;
	padding: 6px 14px;
	z-index: 99;
	transition: all 0.5s ease;
}

.sidebar.open {
	width: 250px;
}

.sidebar .logo-details {
	height: 60px;
	display: flex;
	align-items: center;
	position: relative;
}

.sidebar .logo-details .icon {
	opacity: 0;
	border-radius: 8px;
	transition: all 0.5s ease;
}

.sidebar .logo-details .logo_name {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	opacity: 0;
	transition: all 0.5s ease;
}

.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
	opacity: 1;
}

.sidebar .logo-details .open-menu {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-size: 22px;
	transition: all 0.4s ease;
	font-size: 23px;
	text-align: center;
	cursor: pointer;
	transition: all 0.5s ease;
}

.sidebar.open .logo-details .open-menu {
	text-align: right;
}

.sidebar i {
	color: #fff;
	height: 60px;
	min-width: 50px;
	font-size: 28px;
	text-align: center;
	line-height: 60px;
}

.sidebar .nav-list {
	margin-top: 20px;
	margin-bottom: 0;
	padding-left: 0px;
	height: 100%;
}

.sidebar li {
	position: relative;
	margin: 8px 0;
	list-style: none;
}

.sidebar li .tooltip-menu {
	position: absolute;
	top: -20px;
	left: calc(100% + 25px);
	z-index: 3;
	background: #fff;
	box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 400;
	opacity: 0;
	white-space: nowrap;
	pointer-events: none;
	transition: 0s;
}

.sidebar li:hover .tooltip-menu {
	opacity: 1;
	pointer-events: auto;
	transition: all 0.4s ease;
	top: 50%;
	transform: translateY(-50%);
}

.sidebar .divider {
	display: block;
	width: 100%;
	height: 1px;
	background-color: #EEEEEE30;
}

.sidebar.open li .tooltip-menu {
	display: none;
}

.sidebar input {
	font-size: 15px;
	color: #FFF;
	font-weight: 400;
	outline: none;
	height: 50px;
	width: 100%;
	width: 50px;
	border: none;
	border-radius: 12px;
	transition: all 0.5s ease;
	background: #1d1b31;
}

.sidebar.open input {
	padding: 0 20px 0 50px;
	width: 100%;
}

.sidebar .bx-search {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: 22px;
	background: #1d1b31;
	color: #FFF;
}

.sidebar.open .bx-search:hover {
	background: #1d1b31;
	color: #FFF;
}

.sidebar .bx-search:hover {
	background: #FFF;
	color: #11101d;
}

.sidebar li a {
	display: flex;
	height: 100%;
	width: 100%;
	border-radius: 10px;
	align-items: center;
	text-decoration: none;
	transition: all 0.4s ease;
	background: #11101D;
}

.sidebar li a:hover,
.sidebar li a.active {
	background: #FFF;
}

.sidebar li a .links_name {
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: 0.4s;
}

.sidebar.open li a .links_name {
	opacity: 1;
	pointer-events: auto;
}

.sidebar li a:hover .links_name,
.sidebar li a:hover i,
.sidebar li a.active .links_name,
.sidebar li a.active i {
	transition: all 0.5s ease;
	color: #11101D;
}

.sidebar li i {
	height: 42px;
	line-height: 42px;
	font-size: 18px;
	border-radius: 12px;
}

.sidebar li.profile {
	position: fixed;
	height: 60px;
	width: 78px;
	left: 0;
	bottom: -8px;
	padding: 10px 14px;
	background: #1d1b31;
	transition: all 0.5s ease;
	overflow: hidden;
}

.sidebar.open li.profile {
	width: 250px;
}

.sidebar li .profile-details {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.sidebar li img {
	height: 45px;
	width: 45px;
	object-fit: cover;
	border-radius: 6px;
	margin-right: 10px;
}

.sidebar li.profile .name,
.sidebar li.profile .job {
	font-size: 15px;
	font-weight: 400;
	color: #fff;
	white-space: nowrap;
}

.sidebar li.profile .job {
	font-size: 12px;
}

.sidebar .profile .logout {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background: #1d1b31;
	width: 100%;
	height: 60px;
	line-height: 60px;
	border-radius: 0px;
	cursor: pointer;
	transition: all 0.5s ease;
}

.sidebar.open .profile .logout {
	width: 50px;
	background: none;
}

.home-section {
	position: relative;
	background: #E4E9F7;
	min-height: 100vh;
	top: 0;
	left: 78px;
	width: calc(100% - 78px);
	transition: all 0.5s ease;
	z-index: 2;
}

.sidebar.open ~ .home-section {
	left: 250px;
	width: calc(100% - 250px);
}

.home-section .text {
	display: inline-block;
	color: #11101d;
	font-size: 25px;
	font-weight: 500;
	margin: 18px
}

@media (max-width: 420px) {
	.sidebar li .tooltip-menu {
		display: none;
	}
}

/* mystyle */
.input-icon {
	position: relative;
}

.input-icon > i {
	position: absolute;
	top: 0.55rem;
	left: 0.7rem;
	color: #888;
	font-size: 18px;
}

.input-icon > input {
	padding-left: 2.2rem;
}

.card-custom {
	border: 0;
	background-color: #FFF;
	box-sizing: border-box;
	padding: 20px;
	min-height: 100px;
	margin-bottom: 15px;
	border-radius: 10px;
	box-shadow: 0 2px 5px #88888810;
	overflow: hidden;
	cursor: default;
	transition: all .2s ease-in-out;
}

.card-height {
	min-height: unset;
}

/* Table on card */
.card-table {
	padding-left: 0;
	padding-right: 0;
}

.card-table .table th,
.card-table .table td {
	vertical-align: middle;
	cursor: default;
	color: #666;
}

.card-table .table.table-link tbody td {
	cursor: pointer;
}

.card-table .table tr:hover > td {
	color: #000;
}

.card-table .table th {
	cursor: pointer;
	user-select: none;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #00000070;
}

.card-table .table th:first-child,
.card-table .table td:first-child {
	padding-left: 1.5rem;
}

.card-table .table th:last-child,
.card-table .table td:last-child {
	padding-right: 1.5rem;
}

.card-table .table tbody.list tr:last-child td {
	border-color: transparent;
}

.card-table .card-header,
.card-table .wrap-filter {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	margin-bottom: 1.6rem;
}

.card-table .table .btn-action {
	font-size: 1rem !important;
	color: #00000050;
	height: 32px;
	width: 32px;
	line-height: 32px;
	padding: 0;
	margin-left: 6px;
	transition: all .4s ease;
}

.card-table .table .btn-whatsapp {
	width: 33px;
	height: 33px;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-table .table .btn-action:first-child {
	margin-left: 0;
}

.card-table .table .btn-action:hover {
	background-color: #00000010;
	color: var(--primary);
}

.card-table > .px-3 {
	padding-left: 1.4rem !important;
	padding-right: 1.4rem !important;
}

.category {
	position: relative;
	height: 35px;
	line-height: 35px;
	border-bottom: solid 1px #EEE;
}

.category:last-child {
	border-bottom: 0;
}

.category > span {
	padding-left: 16px;
}

.potensi-1:before,
.potensi-2:before,
.potensi-3:before,
.potensi-4:before,
.potensi-5:before {
	content: "";
	position: absolute;
	left: 0;
	width: 6px;
	height: 50%;
	background-color: red;
	outline: solid 2px #CE000080;
	border-radius: 3px;
	/*margin-left: -10px;*/
	top: 50%;
	transform: translateY(-50%);
}

.potensi-2:before {
	background-color: yellow;
	outline-color: #b7b70050;
}

.potensi-3:before {
	background-color: #FFF;
	outline-color: #f2f2f2;
}

.potensi-4:before {
	background-color: #808080;
	outline-color: #67676780;
}

.potensi-5:before {
	background-color: #000;
	outline-color: #00000060;
}

.summary h5 {
	display: inline-block;
	height: 35px;
	line-height: 35px;
	padding: 0 14px !important;
	border-radius: 8px;
	margin-left: -3px;
}

/* List.js */
.sort::after {
	position: absolute;
	margin-left: 6px;
	font-family: boxicons, sans-serif !important;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	font-variant: normal;
	line-height: 1;
}

.sort::after {
	content: "\ed3b";
	margin-left: 6px;
	margin-top: 0;
	font-size: 16px;
	color: #00000030;
}

.sort.asc::after {
	content: "\ed35" !important;
}

.sort.desc::after {
	content: "\ed42" !important;
}

.sort.asc,
.sort.desc,
.sort.asc::after,
.sort.desc::after {
	color: var(--primary) !important;
	margin-top: 0;
	margin-left: 6px;
	font-size: 16px;
}

.wrap-pagination {
	display: flex;
	align-items: center;
	background-color: #EEE;
	border-radius: 10px;
	overflow: hidden;
}

.pagination li {
	display: inline-block;
	padding: 0;
	border-radius: 10px;
	box-sizing: border-box;
	transition: all .3s linear;
}

.wrap-pagination > button.disabled {
	color: #7e829950;
}

.wrap-pagination > button,
.pagination li > a {
	position: relative;
	height: 34px;
	min-width: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	color: #7e8299;
	border: 0;
	outline: 0;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1rem;
	user-select: none;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pagination li:hover > a {
	color: #000;
}

.pagination li.active {
	background-color: var(--primary);
}

.pagination li.active > a {
	color: #fff;
	min-width: 34px;
}

.pagination-show {
	height: 2rem;
	color: #7e8299;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
	padding: 0 3px 0 3px;
	border: 0 !important;
	margin-right: 10px;
	outline: 0;
	background-color: transparent;
	border-radius: 10px;
	transition: all .3s ease;
}

.pagination-show:hover {
	background-color: #4664E620;
}

/* bootstrap custom */
.btn {
	font-size: 15px !important;
	border-radius: 10px;
	padding-left: .8rem;
	padding-right: .8rem;
	padding-bottom: 0.35rem;
}

.btn-sm {
	padding: 0.25rem 0.6rem;
	font-size: 0.8rem !important;
	border-radius: 8px;
}

.breadcrumb {
	--bs-breadcrumb-padding-x: 1rem;
	--bs-breadcrumb-padding-y: .4rem;
	--bs-breadcrumb-margin-bottom: 1rem;
	--bs-breadcrumb-bg: #d5ddf4;
	--bs-breadcrumb-border-radius: 10px;
}

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--bs-breadcrumb-divider-color);
	content: "\ea50";
	position: relative;
	top: 1px;
	font-family: boxicons, sans-serif !important;
}

.dropdown-menu {
	margin-top: 10px;
	border-radius: 12px;
	border-color: #00000010;
	box-shadow: 1px 2px 20px 5px #00000010;
}

.dropdown-menu li .dropdown-item,
.dropdown-menu li.dropdown-item {
	font-size: 15px;
	padding: 0 1rem;
	height: 40px;
	line-height: 40px;
	border-bottom: solid 1px #f6f6f6;
	cursor: pointer;
}

.dropdown-menu li:last-child .dropdown-item,
.dropdown-menu li.dropdown-item:last-child {
	border: 0;
}

.dropdown-item:focus, .dropdown-item:hover {
	color: #FFF;
	background-color: var(--primary);
}

.dropdown-toggle::after {
	content: "\ea4a";
	border: 0;
	font-family: 'boxicons', cursive;
	top: 2px;
	position: relative;
	margin-left: .20em;
	vertical-align: unset;
}

.form-control,
.form-select {
	font-size: 15px;
	border-radius: 10px;
	border-color: #E5E5E5;
	transition: all .3s ease-in-out;
}

.input-group-text {
	border-radius: 10px;
	border-color: #E5E5E5;
}

.form-control:hover,
.form-select:hover {
	border-color: #4664E670;
	box-shadow: 0 0 0 0.20rem #4664E620;
}

.form-control:focus,
.form-select:focus {
	border-color: #2244E1AA;
	box-shadow: 0 0 0 0.20rem #2244E140;
}

.form-control[readonly] {
	background-color: unset;
}

.form-select {
	color: #6C757D;
	transition: all .15s ease-in-out;
}

.modal-content {
	border-radius: 12px;
}

tbody, td, tfoot, th, thead, tr {
	border-color: #f2f2f2;
}

.table tr th .input-icon > i {
	top: 0.55rem;
	font-size: 18px;
}

.table tr th .input-icon + .sort {
	height: 30px;
}

.table tr th .input-icon + .sort::after {
	font-size: 12px;
	margin-top: 8px;
}

.table tr th .input-icon + .sort.asc,
.table tr th .input-icon + .sort.desc,
.table tr th .input-icon + .sort.asc::after,
.table tr th .input-icon + .sort.desc::after {
	margin-top: 3px;
	margin-left: 4px;
	font-size: 20px !important;
}

.table > :not(:last-child) > :last-child > * {
	border-bottom-color: #DDD;
	border-bottom-width: 2px;
	height: 45px;
}

.table-dashboard > :not(:last-child) > :last-child > * {
	height: unset;
}

.table-hover > tbody > tr {
	transition: all .4s ease;
}

.table-hover > tbody > tr:hover {
	--bs-table-accent-bg: unset;
	background-color: var(--bs-table-hover-bg);
}

.table-striped > tbody > tr:nth-of-type(odd) {
	--bs-table-accent-bg: #00000008;
	color: var(--bs-table-striped-color);
}


/* bg light */
.bg-light-light {
	color: #181c32;
	background-color: #f3f6f9;
}

.bg-light-success {
	color: #0bb783;
	background-color: #d7f9ef;
}

.bg-light-primary {
	color: #5c96fc;
	background-color: #ddeaff;
}

.bg-light-info {
	color: #8950fc;
	background-color: #eee5ff;
}

.bg-light-warning {
	color: #ffa800;
	background-color: #fff4de;
}

.bg-light-danger {
	color: #f64e60;
	background-color: #ffe2e5;
}

/* btn light */
.btn-light {
	color: #181c32;
	background-color: #f3f6f9;
	border-color: #f3f6f9;
	box-shadow: none;
}

.btn-light:hover,
.btn-light:focus {
	color: #181c32;
	background-color: #dae3ec;
	border-color: #d1dde8;
}

.btn-light:focus {
	box-shadow: 0 0 0 .2rem rgba(210, 213, 219, .5);
}

.btn.btn-light-success {
	color: #0bb783 !important;
	background-color: #d7f9ef !important;
	border-color: transparent;
}

.btn.btn-light-success:hover,
.btn.btn-light-success:focus {
	color: #fff !important;
	background-color: #0bb783 !important;
}

.btn.btn-light-success:focus {
	box-shadow: 0 0 0 .2rem rgba(11, 183, 131, .3);
}

.btn.btn-light-primary {
	color: #5c96fc;
	background-color: #ddeaff;
	border-color: transparent;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus {
	color: #fff;
	background-color: #5c96fc;
}

.btn.btn-light-primary:focus {
	box-shadow: 0 0 0 .2rem #5c96fc50;
}

.btn.btn-light-info {
	color: #8950fc;
	background-color: #eee5ff;
	border-color: transparent
}

.btn.btn-light-info:hover,
.btn.btn-light-info:focus,
.btn.btn-light-info.hovered {
	color: #fff;
	background-color: #8950fc;
}

.btn.btn-light-info:focus {
	box-shadow: 0 0 0 .2rem #8950fc50;
}

.btn.btn-light-warning {
	color: #ffa800;
	background-color: #fff4de;
	border-color: transparent
}

.btn.btn-light-warning:hover,
.btn.btn-light-warning:focus {
	color: #fff;
	background-color: #ffa800;
}

.btn.btn-light-warning:focus {
	box-shadow: 0 0 0 .2rem #ffa80050;
}

.btn.btn-light-danger {
	color: #f64e60;
	background-color: #ffe2e5;
	border-color: transparent
}

.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus {
	color: #fff;
	background-color: #f64e60;
}

.btn.btn-light-danger:focus {
	box-shadow: 0 0 0 .2rem #f64e6050;
}

/* toast */
.toast {
	width: auto;
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1em;
	border-radius: 10px;
	background-color: #FFF;
	overflow: hidden;
	z-index: -1;
}

.toast.show,
.toast.hide {
	z-index: 1111;
}

.toast-body {
	padding: 1em 2em 1em 1.6em;
}

.toast .btn-close {
	width: 5px;
	height: 5px;
	box-shadow: none;
}

.toast-body:before {
	content: "";
	width: 6px;
	height: 42px;
	background-color: var(--primary);
	border-radius: 6px;
	position: absolute;
	left: 6px;
	top: 5px;
}

.danger .toast-body:before {
	background-color: #FD6161;
}

.warning .toast-body:before {
	background-color: #FFAC2B;
}

.success .toast-body:before {
	background-color: #2ECC71;
}

.primary .toast-body:before {
	background-color: #2F80ED;
}