/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.CustomtableCss {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	text-align: left;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for softness */
	font-family: 'Open Sans', 'Martel Sans', sans-serif;
	color: #7a858f;
	font-weight: 400;
	background-color: #fff;
	overflow: visible;
}

	.CustomtableCss td {
		font-size: 12px;
		padding: 8px 8px;
		border-bottom: 1px solid #ddd;
		color: #333; /* Soft dark color for text */
	}

	.CustomtableCss th {
		font-size: 14px;
		padding-top: 8px;
		padding-bottom: 8px;
		background-color: #8c8c8c; /* Light background for header */
		font-weight: bold;
		color: white;
		min-height:28px;
	}

	.CustomtableCss tr:nth-child(odd) {
		background-color: #f5f5f5; /* Subtle alternating rows */
	}

	/* Add hover effect */
	.CustomtableCss tr:hover {
		background-color: #f1f1f1;
		cursor: pointer;
	}

	.CustomtableCss td {
		word-break: break-word;
		vertical-align: middle;
		white-space: normal !important;
	}



.waviy {
	position: relative;
	-webkit-box-reflect: below -1.25rem linear-gradient(transparent, rgba(0, 0, 0, 0.2));
}

	.waviy span {
		position: relative;
		display: inline-block;
		font-size: 2.5rem;
		color: #000;
		text-transform: uppercase;
		animation: waviy 1s infinite;
		animation-delay: calc(.1s * var(--i));
	}

@keyframes waviy {
	0%, 40%, 100% {
		transform: translateY(0);
	}

	20% {
		transform: translateY(-1.25rem);
	}
}

#preloader {
	background-color: #fff;
	padding: 0;
	margin: 0;
	height: 100%;
	position: fixed;
	z-index: 99999;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}


@media only screen and (min-width: 1199px) and (max-width: 1920px) {
	.customeoff 
	{
		width: 800px !important;
		background-color: mintcream !important;
		border-radius: 6px;
	}
	.customefs 
	{
		width: 1380px !important;
		background-color: mintcream !important;
		border-radius: 6px;
	}
}

.customeoff .btn-close {
	background: none;
	height: 24px;
	width: 24px;
	background-color: lightblue;
	border-radius: 6px;
	color: red;
	font-size: 18px;
	margin-right: 1rem;
}

.customeoff .offcanvas-header {
	margin-left: 1rem;
	background-color: aliceblue;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}

.customeoff .offcanvas-backdrop.show {
	opacity: 0.7;
	background-color: aliceblue;
}

.navbar-expand-sm .offcanvas {
	position: static;
	z-index: auto;
	flex-grow: 1;
	width: auto !important;
	height: auto !important;
	visibility: visible !important;
	background-color: transparent !important;
	border: 0 !important;
	transform: none !important;
	transition: none;
}

	.navbar-expand-sm .offcanvas .offcanvas-header {
		display: none;
	}

	.navbar-expand-sm .offcanvas .offcanvas-body {
		display: flex;
		flex-grow: 0;
		padding: 0;
		overflow-y: visible;
	}



@media (min-width: 768px) {
		.navbar-expand-md .offcanvas {
			position: static;
			z-index: auto;
			flex-grow: 1;
			width: auto !important;
			height: auto !important;
			visibility: visible !important;
			background-color: lightblue !important;
			border: 0 !important;
			transform: none !important;
			transition: none;
		}

			.navbar-expand-md .offcanvas .offcanvas-header {
				display: none;
			}

			.navbar-expand-md .offcanvas .offcanvas-body {
				display: flex;
				flex-grow: 0;
				padding: 0;
				overflow-y: visible;
			}
}

@media (min-width: 992px) 
{
 

		

			 
 
		
		.navbar-expand-lg .offcanvas {
			position: static;
			z-index: auto;
			flex-grow: 1;
			width: auto !important;
			height: auto !important;
			visibility: visible !important;
			background-color: transparent !important;
			border: 0 !important;
			transform: none !important;
			transition: none;
		}

			.navbar-expand-lg .offcanvas .offcanvas-header {
				display: none;
			}

			.navbar-expand-lg .offcanvas .offcanvas-body {
				display: flex;
				flex-grow: 0;
				padding: 0;
				overflow-y: visible;
			}
}

@media (min-width: 1200px) {
 


	 

		.navbar-expand-xl .offcanvas {
			position: static;
			z-index: auto;
			flex-grow: 1;
			width: auto !important;
			height: auto !important;
			visibility: visible !important;
			background-color: lightblue !important;
			border: 0 !important;
			transform: none !important;
			transition: none;
		}

			.navbar-expand-xl .offcanvas .offcanvas-header {
				display: none;
			}

			.navbar-expand-xl .offcanvas .offcanvas-body {
				display: flex;
				flex-grow: 0;
				padding: 0;
				overflow-y: visible;
			}
}

@media (min-width: 1440) {
	.navbar-expand-xxl .offcanvas {
		position: static;
		width: 1440px !important;
		z-index: auto;
		flex-grow: 1;
		width: auto !important;
		height: auto !important;
		visibility: visible !important;
		background-color: lightgrey !important;
		border: 0 !important;
		transform: none !important;
		transition: none;
	}

			.navbar-expand-xxl .offcanvas .offcanvas-header {
				display: none;
			}

			.navbar-expand-xxl .offcanvas .offcanvas-body {
				display: flex;
				flex-grow: 0;
				padding: 0;
				overflow-y: visible;
			}
}

 

  

	.navbar-expand .offcanvas {
		position: static;
		z-index: auto;
		flex-grow: 1;
		width: auto !important;
		height: auto !important;
		visibility: visible !important;
		background-color: lightblue !important;
		border: 0 !important;
		transform: none !important;
		transition: none;
	}

		.navbar-expand .offcanvas .offcanvas-header {
			display: none;
		}

		.navbar-expand .offcanvas .offcanvas-body {
			display: flex;
			flex-grow: 0;
			padding: 0;
			overflow-y: visible;
		}

.offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl, .offcanvas {
	--bs-offcanvas-zindex: 1045;
	--bs-offcanvas-width: 400px;
	--bs-offcanvas-height: 30vh;
	--bs-offcanvas-padding-x: 1rem;
	--bs-offcanvas-padding-y: 1rem;
	--bs-offcanvas-color:black;
	--bs-offcanvas-bg: #fff;
	--bs-offcanvas-border-width: 1px;
	--bs-offcanvas-border-color: var(--bs-border-color-translucent);
	--bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

@media (max-width: 575.98px) {
	.offcanvas-sm {
		position: fixed;
		bottom: 0;
		z-index: var(--bs-offcanvas-zindex);
		display: flex;
		flex-direction: column;
		max-width: 100%;
		color: var(--bs-offcanvas-color);
		visibility: hidden;
		background-color: lightblue;
		background-clip: padding-box;
		outline: 0;
		transition: transform 0.3s ease-in-out;
	}
}

@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
	.offcanvas-sm {
		transition: none;
	}
}

@media (max-width: 575.98px) {
	.offcanvas-sm.offcanvas-start {
		top: 0;
		left: 0;
		width: var(--bs-offcanvas-width);
		border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(-100%);
	}

	.offcanvas-sm.offcanvas-end {
		top: 0;
		right: 0;
		width: var(--bs-offcanvas-width);
		border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(100%);
	}

	.offcanvas-sm.offcanvas-top {
		top: 0;
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(-100%);
	}

	.offcanvas-sm.offcanvas-bottom {
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(100%);
	}

	.offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
		transform: none;
	}

	.offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
		visibility: visible;
	}
}

@media (min-width: 576px) {
	.offcanvas-sm {
		--bs-offcanvas-height: auto;
		--bs-offcanvas-border-width: 0;
		background-color: lightblue !important;
	}

		.offcanvas-sm .offcanvas-header {
			display: none;
		}

		.offcanvas-sm .offcanvas-body {
			display: flex;
			flex-grow: 0;
			padding: 0;
			overflow-y: visible;
			background-color: transparent !important;
		}
}

@media (max-width: 767.98px) {
	.offcanvas-md {
		position: fixed;
		bottom: 0;
		z-index: var(--bs-offcanvas-zindex);
		display: flex;
		flex-direction: column;
		max-width: 100%;
		color: var(--bs-offcanvas-color);
		visibility: hidden;
		background-color: var(--bs-offcanvas-bg);
		background-clip: padding-box;
		outline: 0;
		transition: transform 0.3s ease-in-out;
	}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	.offcanvas-md {
		transition: none;
	}
}

@media (max-width: 767.98px) {
	.offcanvas-md.offcanvas-start {
		top: 0;
		left: 0;
		width: var(--bs-offcanvas-width);
		border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(-100%);
	}

	.offcanvas-md.offcanvas-end {
		top: 0;
		right: 0;
		width: var(--bs-offcanvas-width);
		border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(100%);
	}

	.offcanvas-md.offcanvas-top {
		top: 0;
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(-100%);
	}

	.offcanvas-md.offcanvas-bottom {
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(100%);
	}

	.offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
		transform: none;
	}

	.offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
		visibility: visible;
	}
}

@media (min-width: 768px) {
	.offcanvas-md {
		--bs-offcanvas-height: auto;
		--bs-offcanvas-border-width: 0;
		background-color: transparent !important;
	}

		.offcanvas-md .offcanvas-header {
			display: none;
		}

		.offcanvas-md .offcanvas-body {
			display: flex;
			flex-grow: 0;
			padding: 0;
			overflow-y: visible;
			background-color: transparent !important;
		}
}

@media (max-width: 991.98px) {
	.offcanvas-lg {
		position: fixed;
		bottom: 0;
		z-index: var(--bs-offcanvas-zindex);
		display: flex;
		flex-direction: column;
		max-width: 70%;
		color: var(--bs-offcanvas-color);
		visibility: hidden;
		background-color: lightblue;
		background-clip: padding-box;
		outline: 0;
		transition: transform 0.3s ease-in-out;
	}
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
	.offcanvas-lg {
		transition: none;
	}
}

@media (max-width: 991.98px) {
	.offcanvas-lg.offcanvas-start {
		top: 0;
		left: 0;
		width: var(--bs-offcanvas-width);
		border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(-100%);
	}

	.offcanvas-lg.offcanvas-end {
		top: 0;
		right: 0;
		width: var(--bs-offcanvas-width);
		border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(100%);
	}

	.offcanvas-lg.offcanvas-top {
		top: 0;
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(-100%);
	}

	.offcanvas-lg.offcanvas-bottom {
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(100%);
	}

	.offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
		transform: none;
	}

	.offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
		visibility: visible;
	}
}

@media (min-width: 992px) {
	.offcanvas-lg {
		--bs-offcanvas-height: auto;
		--bs-offcanvas-border-width: 0;
		background-color: transparent !important;
	}

		.offcanvas-lg .offcanvas-header {
			display: none;
		}

		.offcanvas-lg .offcanvas-body {
			display: flex;
			flex-grow: 0;
			padding: 0;
			overflow-y: visible;
			background-color: transparent !important;
		}
}

@media (max-width: 1199.98px) {
	.offcanvas-xl {
		position: fixed;
		bottom: 0;
		z-index: var(--bs-offcanvas-zindex);
		display: flex;
		flex-direction: column;
		max-width: 100%;
		color: var(--bs-offcanvas-color);
		visibility: hidden;
		background-color: var(--bs-offcanvas-bg);
		background-clip: padding-box;
		outline: 0;
		transition: transform 0.3s ease-in-out;
	}
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
	.offcanvas-xl {
		transition: none;
	}
}

@media (max-width: 1199.98px) {
	.offcanvas-xl.offcanvas-start {
		top: 0;
		left: 0;
		width: var(--bs-offcanvas-width);
		border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(-100%);
	}

	.offcanvas-xl.offcanvas-end {
		top: 0;
		right: 0;
		width: var(--bs-offcanvas-width);
		border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(100%);
	}

	.offcanvas-xl.offcanvas-top {
		top: 0;
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(-100%);
	}

	.offcanvas-xl.offcanvas-bottom {
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(100%);
	}

	.offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
		transform: none;
	}

	.offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
		visibility: visible;
	}
}

@media (min-width: 1200px) {
	.offcanvas-xl {
		--bs-offcanvas-height: auto;
		--bs-offcanvas-border-width: 0;
		background-color: transparent !important;
	}

		.offcanvas-xl .offcanvas-header {
			display: none;
		}

		.offcanvas-xl .offcanvas-body {
			display: flex;
			flex-grow: 0;
			padding: 0;
			overflow-y: visible;
			background-color: transparent !important;
		}
}

@media (max-width: 1439.98) {
	.offcanvas-xxl {
		position: fixed;
		bottom: 0;
		z-index: var(--bs-offcanvas-zindex);
		display: flex;
		flex-direction: column;
		max-width: 100%;
		color: var(--bs-offcanvas-color);
		visibility: hidden;
		background-color: var(--bs-offcanvas-bg);
		background-clip: padding-box;
		outline: 0;
		transition: transform 0.3s ease-in-out;
	}
}

@media (max-width: 1439.98) and (prefers-reduced-motion: reduce) {
	.offcanvas-xxl {
		transition: none;
	}
}

@media (max-width: 1439.98) {
	.offcanvas-xxl.offcanvas-start {
		top: 0;
		left: 0;
		width: var(--bs-offcanvas-width);
		border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(-100%);
	}

	.offcanvas-xxl.offcanvas-end {
		top: 0;
		right: 0;
		width: var(--bs-offcanvas-width);
		border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateX(100%);
	}

	.offcanvas-xxl.offcanvas-top {
		top: 0;
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(-100%);
	}

	.offcanvas-xxl.offcanvas-bottom {
		right: 0;
		left: 0;
		height: var(--bs-offcanvas-height);
		max-height: 100%;
		border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
		transform: translateY(100%);
	}

	.offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
		transform: none;
	}

	.offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
		visibility: visible;
	}
}

@media (min-width: 1440) {
	.offcanvas-xxl {
		--bs-offcanvas-height: auto;
		--width:1400;
		--bs-offcanvas-border-width: 0;
		background-color: transparent !important;

	}

		.offcanvas-xxl .offcanvas-header {
			display: none;
		}

		.offcanvas-xxl .offcanvas-body {
			display: flex;
			flex-grow: 0;
			padding: 0;
			overflow-y: visible;
			background-color: transparent !important;
		}
}

.offcanvas {
	position: fixed;
	bottom: 0;
	z-index: var(--bs-offcanvas-zindex);
	display: flex;
	flex-direction: column;
	max-width: 100%;
	color: var(--bs-offcanvas-color);
	visibility: hidden;
	background-color: var(--bs-offcanvas-bg);
	background-clip: padding-box;
	outline: 0;
	transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.offcanvas {
		transition: none;
	}
}

.offcanvas.offcanvas-start {
	top: 0;
	left: 0;
	width: var(--bs-offcanvas-width);
	border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
	transform: translateX(-100%);
}

.offcanvas.offcanvas-end {
	top: 0;
	right: 0;
	width: var(--bs-offcanvas-width);
	border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
	transform: translateX(100%);
}

.offcanvas.offcanvas-top {
	top: 0;
	right: 0;
	left: 0;
	height: var(--bs-offcanvas-height);
	max-height: 100%;
	border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
	transform: translateY(-100%);
}

.offcanvas.offcanvas-bottom {
	right: 0;
	left: 0;
	height: var(--bs-offcanvas-height);
	max-height: 100%;
	border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
	transform: translateY(100%);
}

.offcanvas.showing, .offcanvas.show:not(.hiding) {
	transform: none;
}

.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
	visibility: visible;
}

.offcanvas-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	background-color: lightgrey;
}

	.offcanvas-backdrop.fade {
		opacity: 0;
	}

	.offcanvas-backdrop.show {
		opacity: 0.5;
	}

.offcanvas-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}

	.offcanvas-header .btn-close {
		padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
		margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));
		margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));
		margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y));
	}

.offcanvas-title {
	margin-bottom: 0;
	line-height: 1.5;
}

.offcanvas-body {
	flex-grow: 1;
	padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
	overflow-y: auto;
}






.offcanvas .offcanvas-header {
	display: none;
}

.navbar-expand-lg .offcanvas .offcanvas-body {
	display: flex;
	flex-grow: 0;
	padding: 0;
	overflow-y: visible;
}