/* ============ Basic Setup ============ */
@media all
{
	.f-upper{text-transform: uppercase; }
	.f-spacing-1{ letter-spacing: 1px; }
	.f-spacing-2{ letter-spacing: 2px; }
	.f-spacing-3{ letter-spacing: 3px; }
	.trans-02
	{
		-moz-transition: all .2s ease;
		-webkit-transition: all .2s ease;
		-o-transition: all .2s ease;
		-ms-transition: all .2s ease;
		transition: all .2s ease;
	}
	.trans-04
	{
		-moz-transition: all .4s ease;
		-webkit-transition: all .4s ease;
		-o-transition: all .4s ease;
		-ms-transition: all .4s ease;
		transition: all .4s ease;
	}
	a{ text-decoration: none !important;}
	.fty-2{}
	.fty-3{}

	body .bd-breadcumbs .bread-size{ font-size: 13px !important; }

	body header.header
	{

	}
	
	body.pre-header header.header 
	{
		position: fixed;
		top: -150px;
		right: 0;
		left: 0;
		z-index: 1030;
	}
	body.pre-header
	{
		margin-top:72px;
	}
	body.append-header header.header 
	{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
	}
	.select2
	{
		width:100% !important;
	}

	/* ============ Custom ScrollBar ============ */
	div::-webkit-scrollbar {
	  width: 6px;               /* width of the entire scrollbar */
	  height: 6px;               /* width of the entire scrollbar */
	}
	
	div::-webkit-scrollbar-track {
	  background: transparent;        /* color of the tracking area */
	}
	
	div::-webkit-scrollbar-thumb {
	  background-color: rgb(var(--bs-primary-rgb)) !important;
	  border-radius: 20px;       /* roundness of the scroll thumb */
	  border: 0px solid white;  /* creates padding around scroll thumb */
	}

	/* ============ Action Bar ============ */
	.action-bar.pre-fixed
	{
		bottom:-200px;
	}
	.action-bar.fixed-bottom
	{
		text-align: center;
		bottom:0px;
		left:50px;
		right: 50px;
	}
	.action-bar-space.fixed-bottom
	{
		height: 64px;
		position: relative !important;
	}
}
/* ============ Sidebar ============ */
@media all 
{
	header{z-index: 50;}
	@media (min-width: 991px)
	{
		body.sidebar .bd-sidebar 
		{
			-moz-transition: all .2s ease;
			-webkit-transition: all .2s ease;
			-o-transition: all .2s ease;
			-ms-transition: all .2s ease;
			transition: all .2s ease;
		}
	}
	body.sidebar .bd-footer-sidebar
	{
		background-color:rgb(var(--bs-primary-rgb)) !important;
		background-color: var(--bs-primary-bg-subtle) !important;
		background-color:rgb(var(--bs-secondary-bg-rgb)) !important;	
	}
	body.sidebar .bd-sidebar:after
	{
		content: ' ';
		background-color:rgb(var(--bs-primary-rgb)) !important;
		background-color: var(--bs-primary-bg-subtle) !important;
		background-color:rgb(var(--bs-secondary-bg-rgb)) !important;
		position: absolute;
		width: 280px;
		height: calc(100vh - 80px);
		top: 0;
	}
	/*
	@media (max-width: 992px)
	{
		body.sidebar .bd-sidebar , .bd-footer-sidebar
		{
			display: none;
		}
	}
	@media (min-width: 992px)
	{}
	*/
	body.sidebar .bd-layout
	{
		position: relative;
	}
	body.sidebar .bd-sidebar
	{
		display: block;
		position:absolute;
		width: 279px;
		z-index: 1000;
		left: 0;
		height: 100%;
		z-index:10;
	}
	body.sidebar .bd-footer-sidebar
	{
		position: absolute;
		width: 279px;
		left: 0;
		top: -0px;
		bottom: 0px;
	}

	/* ============ Menu Internal Style / Color============ */
	body.sidebar .bd-sidebar .nav-sidebar .nav-link
	{
		font-size: 14px; 
	}
	body.sidebar .bd-sidebar .nav-sidebar .nav-link.active
	{
		/*
		color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
		background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
		*/
		background-color: var(--bs-dark-bg-subtle)!important;
	}
	body.sidebar .bd-sidebar .nav-sidebar .nav-link:hover ,
	body.sidebar .bd-sidebar .nav-sidebar .dropdown-item:hover
	{
		/*
		color: var(--bs-nav-pills-link-active-color);
		background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
		*/
		/*
		color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
		background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
		*/
		background-color: var(--bs-dark-bg-subtle)!important;
	}
	/* ============ Auto Drop ============ */
	body.sidebar .bd-sidebar .dropend:hover .dropdown-menu ,
	body.sidebar .bd-sidebar .dropend .show.dropdown-menu
	{
		display: block;
		opacity: 1;
		visibility: visible;
		position: absolute;
		inset: 0px auto auto 0px;
		margin: 0px;
		transform: translate(265px, 0px);
	}
	body.sidebar .bd-sidebar  .dropend .dropdown-menu:after
	{
		left: -20px;
		content: ' ';
		position: absolute;
		top: 0;
		width: 20px;
		height: 100%;
		background: transparent;
	}


	/* ============ Desktop Variation ============ */
	@media (max-width: 991px)
	{
		body.sidebar.open .bd-sidebar .sticky-top , body.sidebar.open .bd-sidebar , body.sidebar.open .bd-footer-sidebar
		{
			width: 100% !important;
		}
		body.sidebar.close .bd-sidebar .sticky-top , body.sidebar.close .bd-sidebar
		{
			width: 280px !important;
		}
	}
	@media (min-width: 992px)
	{
		body.sidebar .bd-main , body.sidebar .bd-breadcumbs
		{
			margin-left: 280px;
		}
		body.sidebar .footer
		{
			padding-left: 280px;
		}
	}

	/* ============ Open Close ============ */
	body.sidebar.close .bd-main , body.sidebar.close .footer , body.sidebar.close .bd-breadcumbs 
	{
		margin-left:0px;
		padding-left:0px;
	}
	body.sidebar.close .bd-sidebar , body.sidebar.close .bd-footer-sidebar
	{
		left: -280px;
	}
	.collapsing 
	{
    	-webkit-transition: none;
    	transition: none;
    	display: none;
    	transition: none !important;
	}
}
/* ============ Menu ============ */
@media all 
{
	/* ============ Mega Menu General ============ */
	.navbar-system .logo{max-width: 50px;}
	.navbar-system .nav-link.active{font-weight: 800;}
	.navbar-system .nav-link{font-size: 16px; font-weight: 500;}
	/* ============ Mega Menu ============ */
	.navbar .megamenu{ padding: 1rem; }
	/* ============ desktop view ============ */
	@media all and (min-width: 992px) 
	{
		.navbar .has-megamenu{position:static!important;}
		.navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
	}	
	/* ============ desktop view .end// ============ */
	/* ============ mobile view ============ */
	@media(max-width: 991px)
	{
		.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse
		{
			overflow-y: auto;
			max-height: 90vh;
			margin-top:10px;
		}
	}
	/* ============ mobile view .end// ============ */
	@media all and (min-width: 1200px) 
	{
		.navbar-system .dropdown .dropdown-menu
		{
			opacity: 0;
			display: block;
			top: 120% !important;
			right: 0% !important; /*END*/
			-moz-transition: all .2s ease;
			-webkit-transition: all .2s ease;
			-o-transition: all .2s ease;
			-ms-transition: all .2s ease;
			transition: all .2s ease;
			visibility: hidden;
		}
		.navbar-system .dropdown .dropdown-menu.dropdown-menu-center
		{
			right: 50% !important; /*center*/
    		transform: translate(50%,0); /*center*/
		}

	    /*
	    */
	    .navbar-system  .dropdown:hover .dropdown-menu ,
	    .navbar-system .dropdown .show.dropdown-menu
	    {
	        display: block;
	        top: 100% !important;
	        opacity: 1;
	        visibility: visible;

	    }
	    .navbar-system  .dropdown > .dropdown-toggle:active {pointer-events: none;}
	    /*
	    */
	    /*prevent close hover*/
	    .navbar-system  .dropdown-menu.dropdown-menu-margin{margin-top: 22px;}
	    .navbar-system  .dropdown-menu:after{left: 0;content: '';position: absolute;top: -24px;width: 100%;height: 24px;background:transparent;}
	
		/*Underline Style*/
		.navbar-system .nav-link{position: relative;}
		.navbar-system .nav-link.active::before ,  
		.navbar-system .nav-link:hover::before , 
		.navbar-system .nav-link:focus::before
		{
			content: ' ';
			position: absolute;
			border:0px solid red;
			border-bottom: 3px solid var(--bs-border-color);
			bottom:-16px;
			left: 0px;
			right: 0px;
		}
		.navbar-system .nav-link.active::before
		{
			border-bottom: 3px solid var(--bs-primary);
		}
		/* Separator Left - right */

		.navbar-system .nav-item .nav-link span.lr-separator 
		{
			position: absolute;
			border-right: 1px solid var(--bs-border-color);
			top:0;
			bottom: 0;
			right:-8px
		}

	}
}
/* ============ External Component Adjustment ============ */
@media all 
{	
	/* ============ Select2 BS Margin ============ */
	body .select2-container .select2-selection--single ,
	body .select2-container--default .select2-selection--single .select2-selection__arrow
	{
		height: 38px;
	}
	body .select2-container .select2-selection--single .select2-selection__rendered
	{
		padding: 0 10px;
		line-height: 36px;
	}
	/* ============ Select2 BS Color ============ */
	body .select2-container--default .select2-selection--single
	{
		border: var(--bs-border-width) solid var(--bs-border-color) !important;
		background-color: var(--bs-body-bg) !important;
	}
	body .select2-search--dropdown
	{
		background-color: var(--bs-body-bg);
	}
	body .select2-container--default .select2-search--dropdown .select2-search__field
	{
		border: var(--bs-border-width) solid var(--bs-border-color) !important;
	}
	body .select2-container--default .select2-results__option--selected
	{
		background-color: var(--bs-body-bg);
	}
	body .select2-container--default .select2-selection--single .select2-selection__rendered
	{
		color: var(--bs-body-color);
	}
	body .select2-results__options
	{
		background-color: var(--bs-body-bg);
		color: var(--bs-body-color);
	}
	/* ============ Tafgy BS SPACE ============ */
	body .form-control.form-control-sm.tagify .tagify__input
	{
		line-height: 12px !important;
	}
	body .form-control.form-control-lg.tagify .tagify__input
	{
		margin:8;
		line-height: 24px !important;
	}
	/* ============ Tafgy BS COLOR ============ */
	body .form-control.tagify .tagify__input::before , 
	body .form-control.tagify .tagify--empty .tagify__input::before
	{
		color:  var(--bs-secondary-color);
	}
	body .form-control.tagify
	{
		border: var(--bs-border-width) solid var(--bs-border-color);
		color:  var(--bs-body-color);
		background-color: var(--bs-body-bg);
	}
	body .tagify__dropdown__wrapper
	{
		color:  var(--bs-body-color);
		background-color: var(--bs-body-bg);
	}
}
/* ============ Custom Lazy Load ============ */
img[data-src] { opacity: 0; }
div[data-bg] { opacity: 0; }
.lazy.loaded { -webkit-transition:  opacity 0.3s;    -o-transition:  opacity 0.3s;   transition:  opacity 0.3s; opacity: 1;}
.lazy.initial { -webkit-transition:  opacity 0.3s;   -o-transition:  opacity 0.3s;   transition:  opacity 0.3s; opacity: 1;}
@-webkit-keyframes AnimationName 
{
	0%{background-position:0% 14%}
	50%{background-position:100% 87%}
	100%{background-position:0% 14%}
}
@-moz-keyframes AnimationName 
{
	0%{background-position:0% 14%}
	50%{background-position:100% 87%}
	100%{background-position:0% 14%}
}
@keyframes AnimationName 
{ 
	0%{background-position:0% 14%}
	50%{background-position:100% 87%}
	100%{background-position:0% 14%}
}