@import
	url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'poppins', sans-serif;
	color: #FFFFFF;
}
/* color */
.view {
	color: #FF8E45;
}

.view-transaction {
	color: #FF8E45;
}

.edit {
	color: #5FC0FF;
}

.inactive-user {
	color: #FF685F;
}

.active-user {
	color: #00c795;
}

/* btn-custom */
.btn-custom-profile {
	color: #FFF1F1;
	text-align: center;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	text-transform: capitalize;
}
/* end */
/* profile-circle */
.profile-circle {
	border-radius: 32px;
	background: var(--Colour-Codes-Text-White, #FFF);
	flex-shrink: 0;
	color: #495275;
	text-align: center;
	padding: .5rem;
}
/* end */
/* active-tab */
.nav-underline .nav-link.custom-active-all {
	color: #6594FE;
	font-size: 1rem;
	font-weight: 400;
}

a.nav-link.custom-tab {
	color: #FFF;
	font-size: 1rem;
	font-weight: 400;
}
/* end */
.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 90px 0 0;
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
	background-color: #000D44;
	z-index: 9;
}
/* logo */
.custom-logo {
	max-width: 260px;
}

.custom-toggler {
	background-color: #21a3da;
	border: none;
}

.navbar-toggler:focus {
	box-shadow: none;
	border: none;
}
/* icon */
i.fa-solid.fa-asterisk {
	font-size: 12px;
	color: #F44336;
}
/* filter */
.custom-filter .form-control {
	font-size: .87rem;
}

.custom-filter {
	border-radius: 10px;
	box-shadow: none;
	border: 0.5px solid rgba(255, 255, 255, 0.20);
	background-color: #191c24;
	padding: 1rem;
}

.custom-nav {
	background-color: #000D44;
}

.custom-space {
	margin-left: auto;
	background-color: #111;
	border-radius: 2rem;
}

.navbar {
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	--bs-navbar-brand-padding-y: 0;
}

.sidebar .nav-link {
	color: #fff;
}

.navbar-brand {
	z-index: 99;
}

.custom-background {
	background-color: #000D44;
}

.breadcrumb-item.active {
	color: white;
}

li.breadcrumb-item a {
	color: white;
}

.breadcrumb-item+.breadcrumb-item::before {
	color: white;
}

a.nav-link svg {
	fill: #fff;
}

a.nav-link.custom-active {
	font-weight: 500;
	margin: 10px 20px;
	border-radius: 9px;
	background: #4940FF;
}

.nav-link:focus, .nav-link:hover {
	color: #ffffff;
}

a.nav-link.custom-nav.active.custom-sub-active {
	color: rgb(35, 169, 223);
}
/* tab */
.custom-nav-tab {
	color: #fff;
}

#pills-all-tab.active {
	color: #fff;
	background-color: #6594FE;
}

#pills-active-tab.active {
	color: #fff;
	background-color: #008000;
}

#pills-pending-tab.active {
	color: #fff;
	background-color: #DC3545;
}

#pills-inactive-tab.active {
	color: #fff;
	background-color: #808080;
}

#pills-expired-tab.active {
	color: #fff;
	background-color: #808080;
}

#pills-deleted-tab.active {
	color: #fff;
	background-color: #DC3545;
}

#pills-approved-tab.active {
	color: #fff;
	background-color: #008000;
}

#pills-denied-tab.active {
	color: #fff;
	background-color: #DC3545;
}

/* end */
/* modal border */
.custom-popup-border {
	border: .1rem solid #58606683;
}

.table.table-custom-dark {
	font-size: 0.875rem;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
	table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
	border-top: 5px solid transparent;
	border-left: 10px solid rgb(255 255 255/ 50%);
	border-bottom: 5px solid transparent;
	border-right: 0px solid transparent;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before,
	table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before
	{
	border-top: 10px solid rgb(255, 255, 255);
	border-left: 5px solid transparent;
	border-bottom: 0px solid transparent;
	border-right: 5px solid transparent;
}

.table.table-custom-dark select#dt-length-0 label {
	font-size: .6rem;
}

.custom-label {
	color: #cccccc;
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
	box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);
}

.table-custom-dark {
	--bs-table-bg: #191C24;
	--bs-table-color: #fff;
	--bs-table-border: 1px solid #191C24;
	--bs-table-striped-color: white;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
	table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
	text-align: left;
}

table.dataTable td.dt-type-numeric {
	text-align: left;
}

.table-custom-dark.table-striped>tbody>tr:nth-child(2n+1)>td,
	.table-striped>tbody>tr:nth-child(2n+1)>th {
	background-color: #0D1018;
}
/* table-label, placeholder */
#example-all_wrapper label, #example-active_wrapper label,
	#example_pending label, #example_inactive label, #example_expired label,
	#admin-example_approved label, #vendor-example_approved label,
	#admin-example_denied label, #vendor-example_denied label,
	#example-all_info, #example-active_info, #example-pending_info,
	#example-inactive_info, #example-expired_info, #example_deleted label,
	#admin-example-approved_info, #vendor-example-approved_info,
	#admin-example-denied_info, #vendor-example-denied_info {
	font-size: .7rem;
}

a.page-link {
	font-size: .7rem;
}

select#dt-length-0, input#dt-search-0 {
	font-size: .7rem;
}
/* end */
/* scroll */
.custom-read-only {
	background-color: #c1c1c1;
	color: #111;
	font-weight: 500;
}

.custom-read-only:focus {
	color: #111;
	background-color: #c1c1c1;
	border-color: none;
	outline: 0;
	box-shadow: none;
}

/* spacing */
.custom-spacing {
	display: flex;
	justify-content: space-between;
}
/* end */
.btn:first-child:active, .btn.show {
	border-color: none;
	border: none;
}

.custom-breadcrumb {
	font-size: .8rem;
}

.btn-custom-primary {
	color: #fff;
	background-color: #0A165A;
	border-color: #0A165A;
}

.btn:first-child:active, .btn-custom-primary:active {
	color: #fff;
	background-color: #000D44;
	border-color: none;
	border: none;
}
/* modal */
.custom-modal-header {
	background-color: #191C24;
	border-bottom: none;
}

.custom-modal-body {
	background-color: #0D1018;
	border-bottom: none;
	--bs-modal-footer-border-color: #586066;
}

.custom-modal-footer {
	background-color: #0D1018;
	border-top: 0.5px solid rgba(255, 255, 255, 0.20);
}

.custom-modal-content {
	border-radius: 10px;
	box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.25);
	border: 0.5px solid rgba(255, 255, 255, 0.20);
}

.custom-form-control {
	font-size: .87rem;
}

tbody, td, tfoot, th, thead, tr {
	border-style: none;
}

.btn.custom-primary {
	font-size: 1rem;
}

.custom-text-area {
	font-size: .87rem;
	border: none;
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
}
/* badges */
.badge-status {
	min-width: 4rem;
}

.bg-success.custom-active {
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 0.2rem;
}

.bg-danger.custom-pending {
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 0.2rem;
}

.bg-success.custom-approved {
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 0.2rem;
}

.bg-danger.custom-denied {
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 0.2rem;
}
/* error-page */
.heading-color {
	color: #9FD5CB;
	font-size: 4rem;
}

.error-color {
	color: #FF7115;
	font-size: 2rem;
}

.custom-text-light {
	color: #F8F8F8;
}

.deactivation-reason {
	position: relative;
	max-width: 5ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.deactivation-reason:hover .full-reason {
	display: block;
}

.full-reason {
	display: none;
	position: relative;
	background-color: #0D1018;
	padding: 5px;
	border-radius: 10px;
	box-shadow: none;
	border: 0.5px solid rgba(255, 255, 255, 0.20);
	z-index: 10;
	white-space: normal;
	max-width: 300px;
}

.location-label-group {
	display: flex;
	align-items: center;
}

.location-label-group label {
	margin-bottom: 0;
}

.location-label-group button {
	margin-left: 10px;
	padding: 0.25rem 0.5rem;
	font-size: 0.6rem;
}

.pointer-column {
	cursor: pointer;
	text-decoration: underline;
}

#profile-button:hover {
	color: #FFF1F1;
}

.delete-message {
	color: #FF0000;
}

.paginationWrapper {
	display: flex;
	justify-content: space-between;
	margin: 10px auto;
	flex-wrap: wrap;
}

.information {
	font-size: .7rem;
}

.pagination {
	font-family: 'Segoe UI', Roboto, sans-serif;
}

.page-btn {
	padding: 4px 10px;
	border: 1px solid #e1e4e8;
	background: #fafbfc;
	color: #24292e;
	cursor: pointer;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	min-width: 28px;
	height: 30px;
	text-align: center;
	transition: all 0.2s;
}

.page-btn.active {
	background: #0969da;
	color: white;
	border-color: #0969da;
}

.page-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ellipsis {
	padding: 0.6px;
	color: #888;
	font-size: 14px;
	user-select: none;
}

#saveBtn:disabled {
	background-color: transparent; /* Background color when disabled */
	color: white; /* Change text color when disabled */
	cursor: not-allowed;
	/* Cursor indicating the button is not clickable */
}

.btn-close {
	background-color: #FFFFFF; /* Set a white background */
	opacity: 0.3; /* Set semi-transparency */
	border: none; /* Remove border */
	border-radius: 50%; /* Make it circular */
	padding: 5px; /* Add some padding */
}

.btn-close:hover {
	background-color: #FFFFFF; /* Change background to white on hover */
	opacity: 0.5; /* Increase opacity on hover for better visibility */
}

#alertPopup {
	z-index: 1060; /* Bootstrap default modal is 1050 */
}

#loadingActiveTable {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
	text-align: center;
}

#loadingInactiveTable {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
	text-align: center;
}

#loadingPendingTable {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
	text-align: center;
}

#loadingExpiredTable {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
	text-align: center;
}

#loadingDeletedTable {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
	text-align: center;
}

#loadingApprovedTable {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
	text-align: center;
}

#loadingDeniedTable {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
	font-weight: bold;
	color: #007bff;
	text-align: center;
}