.invoice {
	width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    height: 100%;
    border-radius: 16px;
}
.invoice-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.invoice-header-left {
	flex: 1;
}

.invoice-header-right {
	flex: 1;
	text-align: right;
}

.invoice-table {
	width: 100%;
	border-collapse: collapse;
}
.invoice-table th,
.invoice-table td {
	border: 1px solid #000;
	padding: 10px;
	text-align: center;
}
.invoice-table th {
	background-color: #E64A19;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.invoice-total {
	float: right;
}
.btn.btn-sm i, .btn-group-sm > .btn i {
    font-size: 16px;
    padding-right: 0;
}
.mainpage {
	height: 100%;
	padding: 15px;
}
/* =========================================
   CURRENT ACTIVATION CARD
========================================= */

.activation-current-card {
    border-radius: 20px !important;
    overflow: hidden;
    background: #ffffff;
    transition: all .3s ease;
    border: 1px solid #dddddd96;
}

.activation-current-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08) !important;
}


/* Activation Icon */

.activation-icon {
    width: 52px;
    height: 52px;

    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #6f42c1,
        #9b6df2
    );

    color: #fff;

    font-size: 24px;

    box-shadow: 0 8px 20px rgba(111, 66, 193, .20);
}


/* Active Badge */

.active-badge {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 7px 12px;

    border-radius: 30px;

    background: #eaf8f0;

    color: #198754;

    font-size: 11px;

    font-weight: 600;
}


/* Main Package */

.activation-main {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #f7f4ff,
        #faf9ff
    );

    border: 1px solid #eee9ff;
}


.activation-current-card h4 {
    color: #5b32a8;
}


/* Check Icon */

.activation-check {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e9f8ef;

    color: #198754;

    font-size: 24px;
}


/* Activated Member */

.activated-member {
    padding: 15px;

    border: 1px solid #edf0f5;

    border-radius: 14px;

    background: #fff;
}


.activated-user-img {
    width: 46px;
    height: 46px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #fff;

    box-shadow: 0 3px 12px rgba(0,0,0,.12);
}


/* Details */

.activation-details {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}


.activation-detail {
    padding: 12px;

    border-radius: 12px;

    background: #f8f9fb;
}


.activation-detail span {
    display: block;

    font-size: 10px;

    color: #8b929d;

    margin-bottom: 5px;
}


.activation-detail span i {
    margin-right: 4px;
}


.activation-detail strong {
    font-size: 12px;

    color: #343a40;
}


/* Transaction */

.transaction-box {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 15px;

    border-radius: 12px;

    background: #f8f9fa;

    border: 1px dashed #dee2e6;
}


.transaction-box > i {
    font-size: 18px;

    color: #6f42c1;

    cursor: pointer;
}


/* Mobile */

@media (max-width: 576px) {

    .activation-details {
        grid-template-columns: 1fr;
    }

    .activation-main {
        padding: 15px;
    }

}
.refer-link-bg {
    background-image: url('../../img/refer-link-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* ================================
   TOPBAR USER
================================ */

.topbar-user {
	height: 64px;
	padding: 6px 12px 6px 16px;
	border: 0 !important;
	background: #0d6efd;
	gap: 10px;
	transition: all .25s ease;
}

.topbar-user:hover,
.topbar-user:focus {
	background: #0b5ed7;
	box-shadow: none !important;
}

.topbar-user-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
	margin-right: 2px;
}

.topbar-user-info strong {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.topbar-user-info small {
	font-size: 10px;
	color: rgba(255,255,255,.75);
	margin-top: 3px;
}

.topbar-user-info small i {
	font-size: 9px;
	margin-right: 2px;
}

.topbar-avatar {
	width: 35px !important;
	height: 35px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid rgba(255,255,255,.8) !important;
	box-shadow: 0 3px 10px rgba(0,0,0,.15) !important;
}

.profile-arrow {
	font-size: 11px;
	color: rgba(255,255,255,.8);
	transition: transform .25s ease;
}

.topbar-item.show .profile-arrow {
	transform: rotate(180deg);
}


/* ================================
   PROFILE DROPDOWN
================================ */

.profile-dropdown {
	width: 330px !important;
	padding: 0 !important;
	margin-top: 10px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: #fff;
	box-shadow: 0 15px 45px rgba(0,0,0,.15) !important;
	overflow: hidden;
}


/* ================================
   PROFILE HEADER
================================ */

.profile-dropdown-header {
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(
		135deg,
		#f8faff 0%,
		#ffffff 100%
	);
	border-bottom: 1px solid #eef0f4;
}

.profile-dropdown-avatar {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 4px 15px rgba(0,0,0,.12);
}

.profile-dropdown-info {
	min-width: 0;
}

.profile-dropdown-info h6 {
	margin: 0 0 7px;
	font-size: 15px;
	font-weight: 700;
	color: #1f2937;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.role-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: 20px;
	background: #eaf2ff;
	color: #0d6efd;
	font-size: 10px;
	font-weight: 600;
	text-transform: capitalize;
}


/* ================================
   MENU
================================ */

.profile-menu {
	padding: 8px;
}

.profile-menu-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 10px;
	border-radius: 9px;
	text-decoration: none !important;
	color: #343a40 !important;
	transition: all .2s ease;
}

.profile-menu-item:hover {
	background: #f5f8ff;
	transform: translateX(2px);
}

.profile-menu-icon {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #f1f5ff;
	color: #0d6efd;
	font-size: 16px;
}

.profile-menu-item > span:nth-child(2) {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.profile-menu-item strong {
	font-size: 12px;
	font-weight: 600;
	color: #343a40;
	line-height: 1.4;
}

.profile-menu-item small {
	font-size: 10px;
	color: #9aa1ac;
	margin-top: 2px;
}

.menu-arrow {
	font-size: 10px;
	color: #adb5bd;
	transition: all .2s ease;
}

.profile-menu-item:hover .menu-arrow {
	color: #0d6efd;
	transform: translateX(2px);
}


/* ================================
   FOOTER / LOGOUT
================================ */

.profile-dropdown-footer {
	padding: 8px;
	border-top: 1px solid #eef0f4;
	background: #fafbfc;
}

.logout-btn {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 10px;
	border-radius: 9px;
	text-decoration: none !important;
	transition: all .2s ease;
}

.logout-btn:hover {
	background: #fff0f0;
}

.logout-icon {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #fff0f0;
	color: #dc3545;
	font-size: 16px;
}

.logout-btn > span:nth-child(2) {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.logout-btn strong {
	font-size: 12px;
	color: #dc3545;
}

.logout-btn small {
	font-size: 10px;
	color: #a0a6ad;
	margin-top: 2px;
}

.logout-btn .menu-arrow {
	color: #dc3545;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 575.98px) {

	.topbar-user-info {
		display: none;
	}

	.topbar-user {
		padding: 6px 8px;
	}

	.profile-dropdown {
		width: 300px !important;
		max-width: calc(100vw - 20px);
	}

}
@media (max-width: 575.98px) {
    .mainpage {
        padding: 10#px !important;
        margin: 0 !important;
		max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .container {
        padding: 0 !important;
        margin: 0 !important;
		max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
		max-width: 100% !important;
        overflow-x: hidden !important;
    }
}
@media (max-width: 991.98px) {
    .header-mobile-fixed .header-mobile {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 97;
        height: 58px !important;
        min-height: 58px !important;
        background: #fff;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
}
@media (max-width: 991.98px) {
    .topbar {
        height: 65px !important;
    }
}
@media (max-width: 991.98px) {
    .header-mobile-fixed .topbar {
        position: fixed;
        z-index: 96;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    }
}
/* ================================
   PERFORMANCE CARD
================================ */

.performance-card {
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.performance-header {
	background: linear-gradient(
		135deg,
		#0d6efd 0%,
		#1455c0 100%
	);
	border: 0;
}


/* ================================
   GRAPH
================================ */

.performance-graph-wrapper {
	width: 100%;
	overflow-x: auto;
}

.performance-graph {
	position: relative;
	height: 300px;
	min-width: 500px;
	padding: 20px 20px 55px 55px;
}


/* ================================
   Y AXIS
================================ */

.graph-y-axis {
	position: absolute;
	left: 0;
	top: 20px;
	bottom: 55px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	font-size: 11px;
	color: #94a3b8;
}


/* ================================
   GRID
================================ */

.graph-grid {
	position: absolute;

	left: 55px;
	right: 20px;
	top: 20px;
	bottom: 55px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	pointer-events: none;
}

.graph-grid div {
	width: 100%;
	height: 1px;
	border-top: 1px dashed #e9ecef;
}


/* ================================
   BARS AREA
================================ */

.graph-bars {
	position: absolute;

	left: 55px;
	right: 20px;
	top: 20px;
	bottom: 55px;

	display: flex;
	align-items: flex-end;
	justify-content: space-around;

	gap: 18px;
}


/* ================================
   BAR ITEM
================================ */

.graph-bar-item {
	height: 100%;
	flex: 1;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;

	position: relative;
}


/* ================================
   VALUE
================================ */

.graph-value {
	font-size: 12px;
	font-weight: 700;
	color: #334155;

	margin-bottom: 7px;

	white-space: nowrap;
}


/* ================================
   BAR CONTAINER
================================ */

.graph-bar-container {
	width: 100%;
	max-width: 55px;
	height: calc(100% - 30px);

	display: flex;
	align-items: flex-end;
	justify-content: center;
}


/* ================================
   BAR
================================ */

.graph-bar {
	width: 100%;

	border-radius: 10px 10px 4px 4px;

	min-height: 4px;

	cursor: pointer;

	transition:
		height 0.8s cubic-bezier(.22,1,.36,1),
		transform 0.25s ease,
		filter 0.25s ease;

	position: relative;

	box-shadow:
		0 6px 15px rgba(0, 0, 0, 0.10);
}


/* ================================
   BAR HOVER
================================ */

.graph-bar:hover {
	transform: translateY(-7px);
	filter: brightness(1.08);

	box-shadow:
		0 12px 25px rgba(0, 0, 0, 0.16);
}


/* ================================
   LABEL
================================ */

.graph-label {
	position: absolute;

	bottom: -42px;

	width: 100%;

	text-align: center;

	font-size: 11px;
	font-weight: 600;

	color: #64748b;

	white-space: nowrap;

	overflow: hidden;
	text-overflow: ellipsis;
}


/* ================================
   STATS
================================ */

.performance-stat {
	padding: 12px 14px;

	border: 1px solid #edf0f4;

	border-radius: 12px;

	background: #fafbfc;

	transition: all 0.25s ease;
}

.performance-stat:hover {
	background: #ffffff;

	transform: translateY(-2px);

	box-shadow:
		0 7px 20px rgba(0, 0, 0, 0.06);
}


/* ================================
   DOT
================================ */

.performance-dot {
	width: 10px;
	height: 10px;

	border-radius: 50%;

	flex-shrink: 0;
}


/* ================================
   LABEL
================================ */

.performance-stat-label {
	font-size: 11px;

	color: #94a3b8;

	font-weight: 600;

	margin-bottom: 2px;
}


/* ================================
   VALUE
================================ */

.performance-stat-value {
	font-size: 16px;

	font-weight: 700;

	color: #1e293b;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 575px) {

	.performance-graph {
		min-width: 430px;
	}

	.performance-stat-value {
		font-size: 14px;
	}

	.performance-stat-label {
		font-size: 10px;
	}

}