/*

Template Name: Syndron Admin
Author: codervent
Email: codervent@gmail.com
File: app.css

*/

[data-bs-theme=dark] body {
	
		color-scheme: dark;
		--bs-body-color: #dee2e6;
		--bs-body-color-rgb: 222, 226, 230;
		--bs-body-bg: #212529;
		--bs-body-bg-2: #181c1f;
		--bs-body-bg-rgb: 33, 37, 41;
		--bs-emphasis-color: #fff;
		--bs-emphasis-color-rgb: 255, 255, 255;
		--bs-secondary-color: rgba(222, 226, 230, 0.75);
		--bs-secondary-color-rgb: 222, 226, 230;
		--bs-secondary-bg: #343a40;
		--bs-secondary-bg-rgb: 52, 58, 64;
		--bs-tertiary-color: rgba(222, 226, 230, 0.5);
		--bs-tertiary-color-rgb: 222, 226, 230;
		--bs-tertiary-bg: #2b3035;
		--bs-tertiary-bg-rgb: 43, 48, 53;
		--bs-primary-text-emphasis: #6ea8fe;
		--bs-secondary-text-emphasis: #a7acb1;
		--bs-success-text-emphasis: #75b798;
		--bs-info-text-emphasis: #6edff6;
		--bs-warning-text-emphasis: #ffda6a;
		--bs-danger-text-emphasis: #ea868f;
		--bs-light-text-emphasis: #f8f9fa;
		--bs-dark-text-emphasis: #dee2e6;
		--bs-primary-bg-subtle: #031633;
		--bs-secondary-bg-subtle: #161719;
		--bs-success-bg-subtle: #051b11;
		--bs-info-bg-subtle: #032830;
		--bs-warning-bg-subtle: #332701;
		--bs-danger-bg-subtle: #2c0b0e;
		--bs-light-bg-subtle: #343a40;
		--bs-dark-bg-subtle: #1a1d20;
		--bs-primary-border-subtle: #084298;
		--bs-secondary-border-subtle: #41464b;
		--bs-success-border-subtle: #0f5132;
		--bs-info-border-subtle: #087990;
		--bs-warning-border-subtle: #997404;
		--bs-danger-border-subtle: #842029;
		--bs-light-border-subtle: #495057;
		--bs-dark-border-subtle: #343a40;
		--bs-heading-color: inherit;
		--bs-link-color: #6ea8fe;
		--bs-link-hover-color: #8bb9fe;
		--bs-link-color-rgb: 110, 168, 254;
		--bs-link-hover-color-rgb: 139, 185, 254;
		--bs-code-color: #e685b5;
		--bs-highlight-color: #dee2e6;
		--bs-highlight-bg: #664d03;
		--bs-border-color: #495057;
		--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
		--bs-form-valid-color: #75b798;
		--bs-form-valid-border-color: #75b798;
		--bs-form-invalid-color: #ea868f;
		--bs-form-invalid-border-color: #ea868f;
	     
	
		color: var(--bs-body-color);
		background-color: var(--bs-body-bg-2);
	

		.bg-light {
			background-color: var(--bs-light-bg-subtle) !important;
		}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	color: var(--bs-body-color);
}


.card {
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%), 0 2px 6px 0 rgb(24 28 31 / 54%);
}

.text-secondary {
    color: #a8aeb3 !important;
}

.wrapper {
	width: 100%;
	position: relative;
}


/* sidebar wrapper */
.sidebar-wrapper {
	background-color: var(--bs-body-bg);
	border-right: 1px solid var(--bs-border-color-translucent);

	.sidebar-header {
		background-color: var(--bs-body-bg);
		border-right: 1px solid var(--bs-border-color-translucent);

		.logo-text {
			color: var(--bs-body-color);
		}

		.mobile-toggle-icon {
			color: var(--bs-body-color);
			background-color: var(--bs-body-bg);
			&:hover,
			&:focus {
				background-color: var(--bs-light-bg-subtle);
				color: var(--bs-emphasis-color);
			}
		}
	}

	.metismenu {
		a {
			color: var(--bs-body-color);
		}

		ul {
			background: var(--bs-body-bg);
		}
	}

	.metismenu .mm-active>a,
	.metismenu a:active,
	.metismenu a:focus,
	.metismenu a:hover {
		color: var(--bs-emphasis-color);
		background-color: rgba(255, 255, 255, 0.1);
	}

}

/* top header */

.topbar {
	background-color: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);

	.navbar {
		.navbar-nav {
			.nav-link {
				color: var(--bs-body-color);
				&:hover,
				&:focus {
					background-color: var(--bs-light-bg-subtle);
					color: var(--bs-emphasis-color);
				}
			}
		}

		.dropdown-app {
			.dropdown-menu {
				border: 1px solid var(--bs-border-color-translucent);
				box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
				.app-box {
					&:hover {
						background-color: var(--bs-light-bg-subtle);
					}
				}

				.app-name {
					color: var(--bs-body-color);
				}
			}
		}

		.dropdown-large {
			.dropdown-menu {
				&::after {
					content: '';
					background: var(--bs-body-bg);
					border-top: 1px solid var(--bs-border-color-translucent);
					border-left: 1px solid var(--bs-border-color-translucent);
				}
			}
		}

		.dropdown-menu {
			&::after {
				content: '';
				background: var(--bs-body-bg);
				border-top: 1px solid var(--bs-border-color-translucent);
				border-left: 1px solid var(--bs-border-color-translucent);;
			}
		}
	}
}

.user-info {
	.user-name {
		color: var(--bs-body-color);
	}

	.designattion {
		color: var(--bs-secondary-text-emphasis);
	}
}

.user-box {
	border-left: 1px solid var(--bs-border-color-translucent);
	border-right: 1px solid var(--bs-border-color-translucent);
}

.dropdown-large {

	.dropdown-menu {
		border: 1px solid var(--bs-border-color-translucent);
		.dropdown-item {
			border-bottom: 1px solid var(--bs-border-color-translucent);
		}
	}

	.msg-header {
		border-bottom: 1px solid var(--bs-border-color-translucent);
		background-color: var(--bs-body-bg);
		.msg-header-title {
			color: var(--bs-body-color);
		}

		.msg-header-clear {
			color: var(--bs-secondary-text-emphasis);
		}
	}

	.msg-footer {
		color: var(--bs-body-color);
		border-top: 1px solid var(--bs-border-color-translucent);
	}

	.user-online {
		&:after {
			background: #16e15e;
		}
	}

	.msg-name {
		color: var(--bs-body-color);
	}

	.msg-info {
		color: var(--bs-secondary-text-emphasis);
	}

	.msg-time {
		color: var(--bs-secondary-text-emphasis);
	}

	.notify {
		background-color: var(--bs-secondary-bg-subtle);
	}

	.cart-product-title {
		color: var(--bs-body-color);
	}

	.cart-product-price {
		color: var(--bs-body-color);
	}

	.cart-product-cancel {
		background-color: var(--bs-body-bg);
		border: 1px solid var(--bs-border-color-translucent);
	}

	.cart-product {
		border: 1px solid var(--bs-border-color-translucent);
		background-color: var(--bs-body-bg);
	}
}

.dropdown-menu {
	-webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	border: 1px solid var(--bs-border-color-translucent);
}

.dropdown-item:hover{
	background-color: var(--bs-light-bg-subtle);
	color: var(--bs-body-color);
}



/* search */

.search-bar a.btn,
.search-bar a.btn:focus {
	color: var(--bs-light-text-emphasis);
	background-color: var(--bs-body-bg);
}

.mobile-toggle-menu {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	&:hover,
		&:focus {
			background-color: var(--bs-light-bg-subtle);
			color: var(--bs-emphasis-color);
		}
}

/* switcher */
.switcher-wrapper {
	background: var(--bs-body-bg-2);
	border-left: 1px solid var(--bs-border-color-translucent);
}

.switcher-btn {
	background: #008cff;
	box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .13);
	color: #fff;
}


.header-colors-indigators {
	.indigator {
		background-color: var(--bs-light-bg-subtle);
	}
}

.highcharts-background {
    fill: var(--bs-body-bg);
}
.highcharts-title {
	fill: var(--bs-body-color);
}
.highcharts-axis-labels {
    fill: var(--bs-secondary-text-emphasis);
}
.highcharts-legend-item > text,
.highcharts-data-label text,
text.highcharts-data-label {
	fill: var(--bs-secondary-text-emphasis);
}

/* footer */

.page-footer {
	background-color: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color-translucent);
}


/* back to top button */
.back-to-top {
	color: #fff;
	background-color: #008cff;

	&:hover {
		color: #fff;
		background-color: #000;
	}

}


/* breadcrumb */
.breadcrumb-title {
	border-right: 1.5px solid var(--bs-border-color-translucent);
}

.page-breadcrumb {

	.breadcrumb-item {
		&+.breadcrumb-item {
			&::before {
				color: var(--bs-secondary-text-emphasis);
			}
		}
	}
}


/* theme components */

.product-discount {
	background-color: var(--bs-light-bg-subtle);
}

.imageuploadify {
	background-color: var(--bs-light-bg-subtle);
}

.bootstrap-tagsinput {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
}

.input-group-text {
	background-color: var(--bs-body-bg);
}

.bs-stepper-line, .bs-stepper .line {
	background-color: var(--bs-light-bg-subtle);
}

.bs-stepper-circle {
	color: var(--bs-body-color);
    background-color: var(--bs-light-bg-subtle);
}

.bs-stepper.vertical .bs-stepper-header {
	background-color: var(--bs-body-bg-2);
	border-right: 1px solid  var(--bs-border-color);
}

/* select2 */

.select2-container--bootstrap-5 .select2-selection {
	color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.select2-container--bootstrap-5 .select2-dropdown {
	color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
	color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
	color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color);
}


.alert {
	background-color: #292f34;
}

.color-indigator-item {
	background-color: var(--bs-body-bg);
}

.icon-badge {
	background-color: var(--bs-body-bg);
}


.widgets-icons {
	background-color: var(--bs-body-bg);
}


.widgets-icons-2 {
	background-color: var(--bs-body-bg);
}

.more-options {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	&:hover {
		background-color: var(--bs-light-border-subtle);
		color: var(--bs-emphasis-color);
	}
}

.apexcharts-datalabel,
      .apexcharts-datalabel-label,
      .apexcharts-datalabel-value,
      .apexcharts-datalabels,
      .apexcharts-pie-label {
        fill: #fff
      }

.product-img-2 {
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
}

.product-list {
	.row {
		background-color: var(--bs-body-bg);
	}
}

@media (min-width:992px) {
	.product-list {
		.row {
			&:hover {
				background-color: var(--bs-body-bg);
			}
		}
	}

}


.recent-product-img {
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
}

.theme-icons {
	background-color: var(--bs-body-bg)
}

.fm-menu {
	.list-group {
		a {
			color: var(--bs-secondary-text-emphasis);

			&:hover {
				background-color: #008cff;
				color: #fff;
			}
		}
	}
}

.fm-file-box {
	background-color: var(--bs-light-bg-subtle);
}

.fm-icon-box {
	background-color: var(--bs-body-bg);
}

.user-plus {
	background-color: var(--bs-body-bg);
	border: 1px dotted var(--bs-border-color-translucent);
	color: var(--bs-secondary-text-emphasis);
}

.user-groups {
	img {
		border: 1px solid var(--bs-border-color-translucent);
	}
}

.contacts-social {
	a {
		background-color: var(--bs-body-bg);
		border: 1px solid var(--bs-border-color-translucent);
		color: var(--bs-body-color);
	}
}

.customers-contacts {
	a {
		background-color: var(--bs-light-bg-subtle);
		border: 1px solid var(--bs-border-color-translucent);
		color: var(--bs-body-color);
	}
}

.order-actions {
	a {
		background-color: var(--bs-light-bg-subtle);
		border: 1px solid var(--bs-border-color-translucent);
		color: var(--bs-body-color);
		
	}
}

.auth-cover-left {
	background-color: var(--bs-body-bg-2);
}

.auth-cover-right {
	background-color: var(--bs-body-bg);
}

@media (min-width:992px) {
	.customers-list {
		.customers-list-item {
			&:hover {
				background-color: var(--bs-light-bg-subtle);
			}
		}
	}

}

.w_chart {
	color: var(--bs-body-color);
}

.chip {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
}


.invoice {
	background-color: var(--bs-body-bg);


	main {
		.notices {
			background-color: var(--bs-body-bg);
		}
	}

	table {
		.no {
			color: var(--bs-body-color);
		}

		.unit {
			background-color: var(--bs-light-bg-subtle);
		}

		tfoot {
			td {
				border-top: 1px solid var(--bs-border-color-translucent);
			}
		}
	}

	footer {
		color: var(--bs-body-color);
	}
}

.invoice table td,
.invoice table th {
	background-color: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);
}


/* chat process */
.chat-wrapper {
	background-color: var(--bs-body-bg);
}

.chat-sidebar {
	background-color: var(--bs-body-bg);
	border-right: 1px solid var(--bs-border-color-translucent);
}

.chat-sidebar-header {
	background-color: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);
	border-right: 0 solid var(--bs-border-color-translucent);

	.chat-user-online {
		&:before {
			box-shadow: 0 0 0 2px var(--bs-body-bg);
		}
	}
}


.chat-list {
	.chat-user-online {
		&:before {
			box-shadow: 0 0 0 2px var(--bs-border-color-translucent);
		}
	}

	.list-group-item {
		border: 1px solid rgb(0 0 0 / 0%);

		&:hover {
			border: 1px solid rgb(0 0 0 / 0%);
			background-color: rgb(13 110 253 / .12);
		}

		&.active {
			background-color: rgb(13 110 253 / .12);
		}
	}
}

.chat-header {
	background: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);
}

.chat-footer {
	background-color: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color-translucent);
}

.chat-footer-menu {
	a {
		color: var(--bs-body-color);
		background-color: var(--bs-body-bg);
		border: 1px solid var(--bs-border-color-translucent);
	}
}

.chat-tab-menu {
	li {
		a {
			&.nav-link {
				color: var(--bs-body-color);
			}
		}
	}
}

.chat-title {
	color: var(--bs-body-color);
}

.chat-msg {
	color: var(--bs-secondary-text-emphasis);
}

.chat-time {
	color: var(--bs-secondary-text-emphasis);
}

.chat-top-header-menu {
	a {
		color: var(--bs-body-color);
		background-color: var(--bs-body-bg);
		border: 1px solid var(--bs-border-color-translucent);
	}
}

.chat-content-leftside {
	.chat-left-msg {
		background-color: var(--bs-light-bg-subtle);
	}
}

.chat-content-rightside {
	.chat-right-msg {
		background-color: var(--bs-secondary-bg-subtle);
	}
}

.chat-toggle-btn {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent); 
}

/* email */
.email-wrapper {
	background-color: var(--bs-body-bg);
}

.email-sidebar {
	background-color: var(--bs-body-bg);
	border-right: 1px solid var(--bs-border-color-translucent);
}

.email-sidebar-header {
	background-color: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);
	border-right: 0 solid var(--bs-border-color-translucent);
}

.email-navigation {
	border-bottom: 1px solid var(--bs-border-color-translucent);

	a {
		&.list-group-item {
			color: var(--bs-body-color);
			background-color: var(--bs-body-bg);
		}
		&:hover {
			color: var(--bs-emphasis-color);
			background-color: var(--bs-light-bg-subtle);
		}
	}
}

.email-header {
	background-color: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);
}

.email-content {
	background-color: var(--bs-border-color-translucent);
}

.email-meeting {

	a {
		&.list-group-item {
			color: var(--bs-body-color);
			background-color: var(--bs-body-bg);
		}
	}
}

.email-hangout {
	.chat-user-online {
		&:before {
			box-shadow: 0 0 0 2px var(--bs-body-bg);
		}
	}
}

.email-toggle-btn {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: 0 solid var(--bs-border-color-translucent);
}


.email-time {
	color: var(--bs-secondary-text-emphasis);
}

.email-list {

	div {
		&.email-message {
			background-color: var(--bs-body-bg);
			border-bottom: 1px solid var(--bs-border-color-translucent);
			color: var(--bs-body-color);

			&:hover {
				transition: all .2s ease-out;
				background-color: var(--bs-light-bg-subtle);
			}
		}
	}
}

.email-star {
	color: var(--bs-secondary-text-emphasis);
}

.email-read-box {
	background-color: var(--bs-body-bg);
}

.compose-mail-close {
	background-color: rgb(255 255 255 / 0%);

	&:hover {
		background-color: var(--bs-light-bg-subtle)
	}
}

.fc-theme-standard td, 
.fc-theme-standard th {
    border: 1px solid var(--bs-border-color);
    border: 1px solid var(--fc-border-color, var(--bs-border-color));
}

.fc-non-business {
    background-color: var(--bs-light-bg-subtle);
}

.nav-search {
	input {
		&.form-control {
			background-color: var(--bs-light-bg-subtle);
			border: 1px solid var(--bs-border-color-translucent);
			color: var(--bs-body-color);

			&::placeholder {
				opacity: .5 !important;
				color: #fff !important;
			}

			&::-ms-input-placeholder {
				color: #fff !important;
			}
		}
	}

	button[type=submit] {
		 background-color: var(--bs-light-bg-subtle);
		 border: 1px solid var(--bs-border-color-translucent);
		 color: #fff;
	}
}


.error-social {
	a {
		color: var(--bs-body-color);
	}
}

.login-separater {
	span {
		background-color: var(--bs-body-bg);
		color: var(--bs-body-color);
	}
}

.btn-light {
	color: var(--bs-body-color);
	background-color: var(--bs-light-bg-subtle);
	border-color: var(--bs-border-color);
}
.btn-white {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
}

.gmaps,
.gmaps-panaroma {
	background-color: var(--bs-light-bg-subtle);
}


.pricing-table {
	.card {
		ul {
			li {
				&.list-group-item {
					color: var(--bs-body-color);
				}
			}
		}
	}
}

input {
	&::placeholder {
		color: #fff !important;
	}
}

@media screen and (max-width:1024px) {

	.wrapper {
		&.toggled {
			
			.overlay {
				background: #fff;
			}
		}
	}

	
	.chat-toggled {
		.overlay {
			background: #fff;
		}
	}

	.email-toggled {
		.overlay {
			background-color: #fff;
		}
	}

}


}