/* ======================= DASHBOARD ================================== */
/* ------------  Embedded dashboard iframe web ------------------------*/
body.embedded #wrapper {
	max-width: 1750px !important;
}
/* ------------  Public dashboard (no login) ------------------------*/
body.public #wrapper {
	max-width: 1650px !important;
}
/* ----- dashboard row container -----------*/
.row.dashboard {
	background-color: #eef5f7;
	padding: 0;
	display: flex;
	flex-direction: row;
}

.row.dashboard > .col-12 {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}
/* ----- dashboard menu -----------*/
.row.dashboard .menu-dashboard {
	display: none;
	width: 15%;
	flex: 0 0 15%;
	max-width: 140px;
	height: 100%;
	background-color: #ffffff;
	justify-content: center;
	padding-top: 20px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
	transition: all 0.4s ease;
}

	.row.dashboard .menu-dashboard .icon-collapse-menu-dashboard {
		display: flex;
		position: absolute;
		width: 34px;
		margin: -10px 6px 8px 6px;
		border: 1px solid transparent;
		border-radius: 5px;
		padding: 4px;
		background-color: transparent;
		justify-content: center;
		align-items: center;
	}

	.row.dashboard .menu-dashboard .icon-collapse-menu-dashboard:hover {
		background-color: #dffffe;
		border: 1px dotted #858585;
		cursor: pointer;
		transition: all 0.4s ease;
	}

		.row.dashboard .menu-dashboard .icon-collapse-menu-dashboard .fa-solid {
			font-size: 18px;
		}

	.row.dashboard .menu-dashboard.collapsed {
		width: 2%;
		flex: 0 0 2%;
		min-width: 40px;
		transition: all 0.4s ease;
	}

	.row.dashboard .menu-dashboard ul {
		display: flex;
		flex-direction: column;
		padding: 0;
		margin: 40px 0 0 0;
		opacity: 1;
		pointer-events: all;
		transition: opacity 0.3s ease;
		transition-delay: 0.3s;
	}

	.row.dashboard .menu-dashboard.collapsed ul {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

		.row.dashboard .menu-dashboard ul li {
			list-style: none;
			width: 120px;
			margin: 8px 6px;
			border: 1px solid transparent;
			border-radius: 5px;
			padding: 4px;
			background-color: transparent;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}

			.row.dashboard .menu-dashboard ul li label {
				font-size: 12px;
				font-weight: bold;
				margin-top: 4px;
				text-align: center;
				pointer-events: none;
				flex: 1 0 100%;
			}

		.row.dashboard .menu-dashboard ul li:hover {
			background-color: #dffffe;
			border: 1px dotted #858585;
			cursor: pointer;
			transition: all 0.4s ease;
		}

			.row.dashboard .menu-dashboard ul li img {
				width: 80%;
				max-width: 32px;
				height: auto;
			}
/* ----- /End dashboard menu -----------*/


/* ----- dashboard wrapper -----------*/
.row.dashboard .dashboard-wrapper {
	width: 100%;
	flex: 1 0 100%;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	height: 100%;
	min-height: 450px;
}

.row.dashboard .nav-tabs li.nav-item a.nav-link,
.row.dashboard .nav-tabs li.nav-item a.nav-link {
	font-size: 17px;
	padding: 5px 20px 7px 20px;
	min-height: 40px;
	min-width: 60px;
	transition: all 0.4s ease;
}

.row.dashboard .nav-tabs .nav-link {
	font-size: 17px;
	padding: 5px 20px 7px 20px;
	border: 0;
}

.row.dashboard .nav-tabs .nav-link.active {
	background-color: transparent;
}

.row.dashboard .tab-content {
	padding: 20px 10px 0 10px;
}

.row.dashboard .placeholder {
	opacity: 1 !important;
	z-index: -1;
	cursor: pointer;
	background-color: transparent !important;
}
/* ---------------- Dashboard widgets group ------------------- */
.row.dashboard .g-widgets {
	padding: 15px 30px 30px 30px;
	position: relative;
	align-items: stretch;
	justify-content: center;
}

	.row.dashboard .g-widgets .widget-col {
		margin-bottom: 40px;
	}

	.row.dashboard.dashboard-detail .g-widgets .widget-col {
		margin-bottom: 0px;
	}
	/* ---------------- Dashboard widgets cols in group ------------------- */
	/* Default col*/
	.row.dashboard .g-widgets .widget-col.col-default {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.row.dashboard.dashboard-detail .col-default {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-1 {
		flex: 0 0 8.33333%;
		max-width: 8.33333%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-5 {
		flex: 0 0 41.6666667%;
		max-width: 41.6666667%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-8 {
		flex: 0 0 66.6666667%;
		max-width: 66.6666667%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-11 {
		flex: 0 0 91.6666667%;
		max-width: 91.6666667%;
	}

	.row.dashboard .g-widgets .widget-col.col-default.col-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}

/* ---------------- Dashboard widget wrapper ------------------- */
	.row.dashboard .g-widgets .widget {
		overflow: hidden;
		width: calc(100% - 20px);
		margin: 10px 10px 25px 10px;
		border-radius: 12px !important;
		padding: 15px 5px 20px 5px;
		background-color: #fff;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
		border: 0;
		min-height: 100%;
		height: auto;
		position: relative;
	}
	/* ---------------- Dashboard widget Inner ------------------- */
	.row.dashboard .g-widgets .widget-col .widget .widget_inner {
		display: flex;
		justify-content: center;
		align-items: start;
		padding: 10px 0;
		min-height: 70%;
		height: 70%;
		min-height:250px;
	}
	.row.dashboard .g-widgets .widget-col .widget.expand .widget_inner{
		max-height: 470px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.row.dashboard .g-widgets .widget-col.widget-table .widget .widget_inner {
		padding-left: 15px;
		padding-right: 15px;
		justify-content: flex-start;
		align-items: flex-start;
		overflow-x: auto;
	}
		.row.dashboard .g-widgets .widget-col .widget.expand .widget_inner > div {
			max-width: 95%;
			max-height: 100%;
			min-height: 450px;
		}

	/* fix titles and inner in col-2 widgets-content */
	.row.dashboard .g-widgets .widget-col.col-default.col-2 .widget .widget-head .widget-title,
	.row.dashboard .g-widgets .widget-col.col-default.col-2 .widget .widget-head .widget-title{
		width: calc(100% - 5px);
	}
		.row.dashboard .g-widgets .widget-col.col-default.col-2 .widget .widget-head .widget-title h3,
		.row.dashboard .g-widgets .widget-col.col-default.col-2 .widget .widget-head .widget-title .h3{
			width: calc(100% - 5px);
		}
	.row.dashboard .g-widgets .widget-col.col-default.col-2 .widget .widget_inner{
		padding: 10px 10px !important;
	}
	/* ---------------- Dashboard widget Head ------------------- */
	.row.dashboard .g-widgets .widget .widget-head {
		border-bottom: 1px solid #ececec;
		padding: 0;
		margin: 0 10px;
		height: 55px;
		align-items: center;
	}
		/* ---------------- Dashboard widget Head expand button ------------------- */
		.row.dashboard .g-widgets .widget .widget-head .expand { /* wraaper */
			width: 75px;
		}
		.row.dashboard .g-widgets .widget .widget-head .btn.btn-filter {
			background-color: transparent;
			color: #4f4f4f;
			border: 0;
			font-size: 20px;
			min-width: 52px;
			text-align: center;
		}
		.row.dashboard .g-widgets .widget .widget-head .btn.btn-filter i{
			margin: 0;
		}
		.row.dashboard .g-widgets .widget .widget-head .btn.btn-filter .fa-expand,
		.row.dashboard .g-widgets .widget.expand .widget-head .btn.btn-filter .fa-compress{
			display: block;
		}
		.row.dashboard .g-widgets .widget.expand .widget-head .btn.btn-filter .fa-expand,
		.row.dashboard .g-widgets .widget .widget-head .btn.btn-filter .fa-compress{
			display: none;
		}
		.row.dashboard .g-widgets .widget .widget-head .btn.btn-filter::after {
			background: #e5f4f6;
		}
		/* ---------------- Dashboard widget Head Title ------------------- */
		.row.dashboard .g-widgets .widget .widget-head .widget-title {
			width: calc(100% - 75px);
		}
		.row.dashboard .g-widgets .widget .widget-head .widget-title h3,
		.row.dashboard .g-widgets .widget .widget-head .widget-title .h3 {
			width: calc(100% - 25px);
			color: #101010;
			padding: 0 0 0 0;
			margin: 0 5px 0 0;
			font-size: 14px;
		}
		.row.dashboard .g-widgets .widget .widget-head .widget-title .h3 {
			font-size: 15px;
		}
		/* ---------------- Dashboard widget Refresh info ------------------- */
		.row.dashboard .g-widgets .widget .widget-head .expand span {
			position:absolute;
			bottom: 15px;
			left: 0;
			top: auto;
			transform: translate(25px, 0);
			max-width: 60%;
			text-wrap: auto;
			text-align: left;
			font-size: 12px;
		}
		.row.dashboard .g-widgets .widget .widget-head .expand span.animate {
			animation: widget-info-refreshed 5s ease-in-out;
		}
		/* ---------------- Dashboard widget head description------------------- */
		.row.dashboard .g-widgets .widget .widget-head .widget-description {
			line-height: 15px;
			font-size: 13px;
		}
	/* ---------------- Dashboard widget footer ------------------- */
	.row.dashboard .g-widgets .widget .widget-footer {
		width: calc(100% - 25px);
		border-top: 1px solid #ececec;
		padding: 10px 0 0 0;
		margin: 0 20px 0 10px;
		text-align: right;
		position: absolute;
		bottom: 10px;
	}
	.row.dashboard .g-widgets .widget.expand .widget-footer {
		position: relative;
		bottom: 0;
	}
	.row.dashboard .g-widgets .widget .widget-footer .btn {
		border:0;
	}


	/* Expand Animation */
	.row.dashboard .g-widgets .widget-col {
		max-width: initial;
		transition: max-width 0.7s ease;
	}
		.row.dashboard .g-widgets .widget-col .widget.expand {
			position: fixed;
			z-index: 11;
			min-height: 100%;
			animation: widget-expand 0.3s cubic-bezier(.42, 0, .58, 1) forwards;
			-webkit-animation: widget-expand 0.3s cubic-bezier(.42, 0, .58, 1) forwards;
		}
		/* fix widget expand animation for embedded dashboard iframe */
		body.embedded .row.dashboard .g-widgets .widget-col .widget.expand{
			position: fixed;
			z-index: 11;
			min-height: 100%;
			animation: widget-expand-embedded 0.3s cubic-bezier(.42, 0, .58, 1) forwards;
			-webkit-animation: widget-expand-embedded 0.3s cubic-bezier(.42, 0, .58, 1) forwards;
		}

		.row.dashboard .g-widgets .widget-col .widget.expand .widget_inner{
			position:relative;
			animation: widget-inner-opacity 1s ease-in-out forwards;
		}

		.row.dashboard .g-widgets .widget-col .widget.expand .widget-head span {
			position: absolute;
			width: auto;
			right: 46px;
			top: 18px;
		}
		/* Curtain for widget expanded */
		.row.dashboard .g-widgets .widget-col .widget ~ .widget_curtain {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
			width: 0;
			height: 0;
			background-color: #ffffff;
			opacity: 0;
			transition: opacity 0.8s ease;
		}

		.row.dashboard .g-widgets .widget-col .widget.expand ~ .widget_curtain {
			width: 100%;
			height: 100%;
			opacity: 0.75;
			transition: opacity 0.8s ease;
		}

	/* ----------------- Widget Rows -------------------*/
	.startRow.widget-row {
		display: flex;
		flex-direction: column;
		justify-content: start;
	}
	.startRow.widget-row .col-default {
		flex: 0 0 calc(50% - 40px) !important;
		width: 100% !important;
		max-width: 100% !important;
		height: calc(50% - 40px) !important;
	}

	.widget-col.col-default.full-height .widget_inner {
		height: 100% !important;
	}

	.widget-col.col-default.full-height .widget_inner > div {
		height: 100vh !important;
		max-height: 100%;
		padding: 0 !important;
	}

	/* ---------- Widget Collapsed ----------*/
	.row.dashboard .g-widgets .widget-col.collapsed {
		height: auto;
		transition: all 0.5s ease;
	}
	.row.dashboard .g-widgets .widget-col.collapsed .widget {
		transition: all 0.5s ease;
		height: auto;
	}
	.row.dashboard .g-widgets .widget-col.collapsed .widget .widget-footer {
		display: none;
	}
	.row.dashboard .g-widgets .widget-col.collapsed .widget-head span {
		display: none;
	}
	.row.dashboard .g-widgets .widget-col.collapsed .widget_inner {
		display: none;
	}
	.row.dashboard .g-widgets .widget-col.collapsed .widget-head .widget-title h3,
	.row.dashboard .g-widgets .widget-col.collapsed .widget-head .widget-title p {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 12px;
	}


/* ---------- Widget Charts  ----------*/
.row.dashboard .g-widgets .widget .widget_inner svg {
	overflow: visible;
	width: 100% !important;
	height: 100% !important;
}

.row.dashboard .g-widgets .widget .widget_inner svg > g {
	width: 100% !important;
	height: 100% !important;
	transform: scale(0.96) translate(30px, 10px);
}

.row.dashboard .g-widgets .widget .widget_inner svg tspan {
	font-size: 12px;
}

/* ----------------- Password dashboard ---------------- */
	.row.dashboard .dashboard-wrapper .pass-dashboard {
		position: relative;
		height: calc(100vh - 180px); /* adjust 70px to your header height */
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	/*  Background image within the section  */
	.row.dashboard .dashboard-wrapper .pass-dashboard::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('/Content/images/dashboard_password_bg.png') center/cover no-repeat;
		filter: blur(8px) grayscale(0.8) opacity(0.5);
		transform: scale(1.05); /* prevents visible edges after blur */
		z-index: 0;
	}
/* ----------  Password Widget Detail --------------*/
	.row.dashboard .widget-detail {
		min-height: 350px !important;
	}
	.row.dashboard .pass-widget-detail {
		min-height: calc(100vh - 180px) !important;
	}

	.row.dashboard .widget-col .pass-widget-detail .pass-widget {
		min-height: calc(100vh - 180px);
	}

/* ----------------- Password widget ---------------- */
	.row.dashboard .widget-col .pass-widget{
		position: absolute;
		margin-top: -10px;
		width: 100%;
		height: 80%;
		min-height: 350px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.row.dashboard .widget-col .expand .pass-widget{
		position: relative;
	}
	.row.dashboard .widget-col .pass-widget::before {
		content: "";
		display: flex;
		justify-content: center;
		align-items: center; /* center vertically within its own box */
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
		background: url('/Content/images/widget_table_password_bg.png') center/cover no-repeat;
		filter: blur(8px) grayscale(0.8) opacity(0.5);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.row.dashboard .widget-col .pass-widget.widget-table::before {
		background: url('/Content/images/widget_table_password_bg.png') center/cover no-repeat;
	}

	.row.dashboard .widget-col .pass-widget.chart-widget::before {
		background: url('/Content/images/widget_chart_password_bg.png') center/cover no-repeat;
	}
	.row.dashboard .widget-col .pass-widget.map-widget::before {
		background: url('/Content/images/widget_map_password_bg.png') center/cover no-repeat;
	}

/* ------------- Responsive Desktops/Laptops ----------------- */
@media (max-width: 1500px) {
	.row.dashboard .g-widgets {
		padding: 15px 5px 30px 5px;
	}
	.row.dashboard .g-widgets .widget {
		width: calc(100% - 0px);
		margin: 10px 0px 5px 0px;
		padding: 15px 0px 20px 0px;
	}
	.row.dashboard .g-widgets .widget-col.col-default {
		margin-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.startRow.widget-row .col-default {
		height: calc(50% - 20px) !important;
	}
	.startRow.widget-col.widget-row,
	.startRow.widget-col.endRow {
		padding-left: 10px;
		padding-right: 10px;
	}
}
/* ------------- Responsive ipad pro ----------------- */
@media (max-width: 1024px) {
	.row.dashboard {
		flex-direction: column;
		margin: 0;
		width: 100%;
	}
	.row.dashboard > .col-12 {
		width: 100%;
		justify-content: flex-end;
	}
	.row-dashboard .dashboard-wrapper > .row {
		margin: 0;
	}
	/* Dashboard Menu */
	.row.dashboard .menu-dashboard {
		width: 100%;
		flex: 1 0 100%;
		max-width: none;
		border-radius: 10px;
		flex-direction: row;
		margin: 0;
		padding: 0;
	}
	.row.dashboard .menu-dashboard ul {
		flex-direction: row;
		padding-top: 0;
		margin: 0;
	}
	.row.dashboard .menu-dashboard ul li {
		flex: 0 18%;
	}
	.row.dashboard .menu-dashboard.collapsed {
		width: 100%;
		flex: 0 0 100%;
		height: 40px;
		transition: all 0.4s ease;
	}
	.row.dashboard .menu-dashboard .icon-collapse-menu-dashboard {
		margin: 6px 6px 8px 6px;
	}
	.row.dashboard .menu-dashboard .icon-collapse-menu-dashboard {
		right: 25px;
	}
	/* Dashboard Widgets Group */
	.row.dashboard .row.g-widgets {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	/* Dashboard Cols */
	.row.dashboard .row.g-widgets .widget-col {
		width: 100%;
		margin: 15px 0;
		padding: 0;
	}
	.row.dashboard .g-widgets .widget-col.col-default.col-1,
	.row.dashboard .g-widgets .widget-col.col-default.col-2,
	.row.dashboard .g-widgets .widget-col.col-default.col-3,
	.row.dashboard .g-widgets .widget-col.col-default.col-4,
	.row.dashboard .g-widgets .widget-col.col-default.col-5,
	.row.dashboard .g-widgets .widget-col.col-default.col-6,
	.row.dashboard .g-widgets .widget-col.col-default.col-7,
	.row.dashboard .g-widgets .widget-col.col-default.col-8,
	.row.dashboard .g-widgets .widget-col.col-default.col-9,
	.row.dashboard .g-widgets .widget-col.col-default.col-10,
	.row.dashboard .g-widgets .widget-col.col-default.col-11,
	.row.dashboard .g-widgets .widget-col.col-default.col-12 {
		flex: 1 0 100%;
		max-width: 100%;
	}
	/* Dashboard Widgets */
	.row.dashboard .row.g-widgets .widget-col .widget {
		max-width: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	/* Widget Head*/
	.row.dashboard .row.g-widgets .widget-col .widget .row.widget-head .widget-title h3 {
		font-size: 13px;
	}
	.row.dashboard .g-widgets .widget-col .widget .widget-head .widget-description {
		line-height: 15px;
		font-size: 13px;
		max-width: 80%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
		/* Hide expand head */
		.row.dashboard .g-widgets .widget .widget-head .btn.btn-filter{
			display:none;
		}

	/* Widget Inner*/
	.row.dashboard .g-widgets .widget-col.widget-table .widget .widget_inner {
		overflow-x: auto;
	}
	/* Widget Footer*/
	.row.dashboard .g-widgets .widget .widget-footer {
		position: relative;
		bottom: 10px;
		margin-bottom: 10px;
	}

	/* fix text size in svg chart */
	.row.dashboard .g-widgets .widget .widget_inner svg tspan {
		font-size: 10px;
	}
}
/* ------------- Responsive ipad  ----------------- */
@media (max-width: 768px) {
	/* Dashboard Menu */
	.row.dashboard .menu-dashboard ul li {
		width: auto;
	}
	.row.dashboard .menu-dashboard ul li img {
		max-width: 26px;
	}
	.row.dashboard .menu-dashboard ul li label {
		font-size: 11px;
	}
}
@media (max-width: 480px) {
	.row.dashboard .g-widgets .widget .widget-head .widget-title{
		margin-top:10px;
	}
	.row.dashboard .g-widgets .widget .widget-head .widget-description {
		margin-top: 5px;
	}
}

/* Expand widget animation */
@keyframes widget-expand {
	0% {
		transform-origin: center;
		left: 50%;
		width: initial;
		top: 50%;
		opacity: 0;
		height: 150px;
		min-height: 150px;
		transform: translate(-50%, 0);
		margin-left: 0;
	}
	2% {
		left: 50%;
		height: 150px;
		min-height: 150px;
	}
	5% {
		left: 50%;
		width: 30%;
		opacity: 1;
	}
	85%{
		left: 50%;
		height: 550px;
		min-height: 450px;
	}
	100% {
		margin-left: 0;
		top: 50%;
		left: 50%;
		width: 86.5%;
		min-height: fit-content;
		height: fit-content;
		transform: translate(-50%, -50%);
		min-height:450px;
	}
}
/* Expand widget animation in embedded iframe*/
@keyframes widget-expand-embedded {
	0% {
		transform-origin: center;
		left: 50%;
		width: initial;
		top: auto;
		opacity: 0;
		height: 150px;
		min-height: 150px;
		transform: translate(-50%, 0);
		margin-left: 0;
	}
	2% {
		left: 50%;
		height: 150px;
		min-height: 150px;
	}
	5% {
		left: 50%;
		width: 30%;
		opacity: 1;
	}
	85%{
		left: 50%;
		height: 550px;
		min-height: 450px;
	}
	100% {
		margin-left: 0;
		top: auto;
		left: 50%;
		width: 86.5%;
		min-height: fit-content;
		height: fit-content;
		transform: translate(-50%, -15%);
		min-height:450px;
	}
}

@keyframes widget-info-refreshed {
	0% {
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
}

@keyframes widget-inner-opacity {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* ----------  Widget Type --------------*/
/* ====================== Default colors for HTML widgets and chart widgets ==================== */
/* Dashboard Color Scheme */
:root {
	--mainColorDashboard: #CCCCCC; /* Principal color ----- Gray */
	--altColorDashboard: #AAAAAA; /* Alternative principal color ----- Dark Gray*/

	--dash-color1: #0000AA; /* Color 1 for charts and html -- Dark Blue */
	--dash-color2: #00AA00; /* Color 2 for charts and html -- Green */
	--dash-color3: #FFFF55; /* Color 3 charts and html ------ Yellow */
	--dash-color4: #FFAA00; /* Color 4 charts and html ------ Orange */
	--dash-color5: #AA0000; /* Color 5 charts and html ------ Red */
	--dash-color6: #AA00AA; /* Color 6 charts and html ------ Purple */
	--dash-color7: #FF55FF; /* Color 7 charts and html ------ Pink */
	--dash-color8: #00AAAA; /* Color 8 charts and html ------ Teal */
	--dash-color9: #55FF55; /* Color 9 charts and html ------ Bright Green */
	--dash-color10: #55FFFF; /* Color 10 charts and html ---- Cyan */
	--dash-color11: #FF5555; /* Color 11 charts and html ---- Bright Red */
	--dash-color12: #BAE37D; /* Color 12 charts and html ---- Lime green*/

	--dash-bg-color1: #E6E6E6; /* Background color 1 for html widget ---- Light Gray */
	--dash-bg-color2: #FAF1E6; /* Background color 2 for html widget ---- Cream */
	--dash-bg-color3: #F8FCF5; /* Background color 3 for html widget ---- Light Green */

	--dash-br-color1: #AEAEAE; /* Border color 1 for html widget / table ---- Gray */
	--dash-br-color2: #737272; /* Border color 2 for html widget / table ---- Dark Gray */
}
		/* -------- Type Table ------------------*/
		.row.dashboard .g-widgets .widget_inner .table{

		}
		.row.dashboard .g-widgets .widget .widget_inner table thead tr {
			border: 1px solid var(--dash-br-color1);
		}
		.row.dashboard .g-widgets .widget .widget_inner table.sue-widget thead tr th:last-child,
		.row.dashboard .g-widgets .widget .widget_inner table.sue-widget tbody tr td:last-child {
			width: 18%;
			right: -15px;
			position: sticky;
			text-align: center;
			border-left: 1px solid var(--dash-br-color1);
			background-color: var(--dash-bg-color1);
		}
		.row.dashboard .g-widgets .widget .widget_inner table.sue-widget thead tr th:last-child {
			background-color: var(--dash-bg-color1);
		}
		.row.dashboard .g-widgets .widget .widget_inner table thead tr th .btn,
		.row.dashboard .g-widgets .widget .widget_inner table tbody tr td .btn {
			width: 80%;
			min-width: 80px;
			min-height: 32px;
		}

		/* -------- Type HTML Content ----------------*/
		/* fix width in widgets number content */
		.row.dashboard .g-widgets .widget-col.widget-content .widget .widget_inner {
			padding-left: 15px;
			padding-right: 15px;
		}
		.row.dashboard .g-widgets .widget-col.widget-content .widget .widget_inner > div {
			width: 80%;
		}
		/* -------- Type HTML Content Number ----------------*/

		.number-widget{
			width: 98%;
			height: 80%;
			padding: 5px 0 30px 0;
		}
		.number-widget .number-widget-inner{
			width: 100%;
			height:100%;
			text-align: center;
			background-color: var(--dash-bg-color1);
			padding: 20px;
			border-radius: 10px;
			min-height:220px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.number-widget .number-widget-inner h3.number-widget-title{
			margin: 0 0 10px 0;
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}
		.number-widget .number-widget-inner .number-widget-number{
			font-size: 48px; font-weight: bold; margin: 10px 0; color: #000;
		}
		@media(max-width:1024px){

		}
		/*--------- Type Pie Html------------------*/
		.pie-widget{
			flex: 1 0 98%;
			text-align: center;
			align-items: center;
			justify-self: center;
			padding-top: 5px !important;
		}
		/* title */
		.pie-widget h3.pie-widget-title{
			margin: 0 0 20px 0;
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}
		/* wrapper */
		.row.dashboard .g-widgets .pie-widget .pie-widget-all,
		.row.dashboard .g-widgets .widget-col.widget-content .widget .widget_inner > .pie-widget .pie-widget-all {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20px !important;
		}
		/* pie */
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .pie{
			position: relative;
			width: 180px;
			height: 180px;
			border-radius: 50%;
			margin-right: 30px;
		}

		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend{
			text-align: left;
		}
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend .legend-item{
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 8px;
		}
		/*<div class="pie" style="background: conic-gradient(var(--dash-color1) 0% %Male_Percentage%%, var(--dash-color2) %Male_Percentage%% 100%);"></div>*/
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend .legend-item:nth-child(1) .legend-point{
			background-color: var(--dash-color1);
		}
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend .legend-item:nth-child(2) .legend-point{
			background-color:var(--dash-color2);
		}
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend .legend-item:nth-child(3) .legend-point{
			background-color:var(--dash-color3);
		}
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend .legend-item:nth-child(4) .legend-point{
			background-color:var(--dash-color4);
		}
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend .legend-item .legend-point{
			width: 16px;
			height: 16px;
			border-radius: 50%;
		}
		.row.dashboard .g-widgets .pie-widget .pie-widget-all .legend .legend-item .legend-txt{
			font-size: 14px; color: #000;
		}
		@media(max-width:1024px){
			.row.dashboard .g-widgets .pie-widget .pie-widget-all .pie{
				width: 180px;
				height: 145px;
			}
		}

		/*--------- Type Chart Pie with Legend------------------*/
		.row.dashboard .g-widgets .widget .widget_inner .pie-chart-legend {
			width: 98%;
			height:100%;
			min-height: 550px;
		}
		@media(max-width:1024px){
			.row.dashboard .g-widgets .widget .widget_inner .pie-chart-legend{
				position: relative;
				width: 96%;
				left: -4%;
				height: 100%;
			}
		}

		/*------- Double Bar Horizontal Chart ----- -*/
		.db-horizontal-chart{
			 width: 98%;
			 height: 100%;
			 min-height:250px;
		 }
		@media(max-width:1024px){
			.db-horizontal-chart{
				position: relative;
				width: 96%;
				left: -4%;
				height: 100%;
				min-height: 250px;
			}
		}
		/*-------  Bar Chart ------------ -*/
		.bar-chart {
			width: 98%;
			height: 100%;
			min-height:470px;
			--column-color: var(--dash-color1);
		}
		@media(max-width:1024px){
			.bar-chart{
				position: relative;
				width: 96%;
				left: -4%;
				height: 100%;
				min-height:550px;
			}
		}
		/*-------  Bar Chart with Legend ------------ -*/
		.bar-chart-legend {
			width: 98%;
			height: 100%;
			min-height:520px;
		}
		@media(max-width:1024px){
			.bar-chart-legend{
				position: relative;
				width: 96%;
				left: -4%;
				height: 100%;
			}
		}


/*-------  SimpleMaps.com credits ------------ -*/
.simplemaps-watermark {
  position: absolute;
  bottom: 75px;
  left: 20px;
  opacity: 0.6;
  display: block;
  color: #bbb;
  transition: opacity .2s;
  pointer-events: auto;
  text-decoration: none;
}
.simplemaps-watermark:hover {
  opacity: 1;
}