//heart Blast Effect

.heart-blast {
	background-position: -1680px 0 !important;
	transition: background 1s steps(28);
}

.heart {
	width: 60px;
	height: 60px;
	display: inline-block;
	background: url('../images/like.png');
	cursor: pointer;
	margin: -25px -15px;
}


.header-left {
	.search-area {

		.form-control,
		.input-group-text {
			background: #F6F6F6;
		}
	}
}

.form-3 {
	border-radius: 0.5rem 0 0 0.5rem;
}

.bg-gradient1 {
	background: linear-gradient(90deg, #AC39D4 50%, #F04CF3 100%);
}

.bg-gradient2 {
	background: linear-gradient(89.77deg, #58BF8E 50.2%, #32CA65 105.91%);
}

.bg-gradient3 {
	background: linear-gradient(221.17deg, #FF827A 5.91%, #FFA825 97.67%);
}

.bg-gradient4 {
	background: linear-gradient(75.23deg, #461EE7 10.89%, #1EB6E7 111.39%);
}

.bg-gradient5 {
	background: linear-gradient(90deg, #5A45AA 50%, #3F9FD6 100%);
}

.ck.ck-editor__main>.ck-editor__editable {
	height: 250px;
}

.invoices-btn {
	a {
		font-size: 1.125rem;
		font-weight: 700;
		border-width: 2px;
		border-radius: 20px;
	}
}

.logo-abbr {
	path {
		fill: var(--primary);
	}

	.logo-text {
		fill: $white;
	}
}

.round {
	position: relative;

	span {
		margin: 0 1.25rem;
		font-size: 1rem;
		font-weight: 600;
	}
}

.round .form-check-input {
	background-color: #fff;
	border: 0.0625rem solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	height: 1.5rem;
	left: 0;
	position: absolute;
	top: 0rem;
	width: 1.5rem;

	&:after {
		border: 0.125rem solid var(--primary);
		border-top: none;
		border-right: none;
		content: "";
		height: 0.375rem;
		left: 0.375rem;
		opacity: 0;
		position: absolute;
		top: 0.4375rem;
		transform: rotate(-45deg);
		width: 0.75rem;
	}
}

.round input[type="checkbox"] {
	visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
	background-color: $white;
	border-color: var(--primary);
}

.round input[type="checkbox"]:checked+label:after {
	opacity: 1;
}

.donut-chart-sale small {
	font-size: 18px;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	display: flex;
	align-items: center;
	top: 0;
	justify-content: center;
	font-weight: 600;
}

.default-progress {
	height: 10px;
	border-radius: $radius;

	.progress-bar {
		border-radius: $radius;
	}
}

.login-social a {
	background: var(--rgba-primary-1);
}

.sign-in-your {
	padding: 50px 30px;

	@include respond('phone') {
		padding: 20px 10px;
	}
}

.sign .education-img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;

	@include respond('phone-land') {
		position: unset;
	}
}

.sign {
	background: var(--rgba-primary-1);
	position: relative;
}

.user-bx {
	background: var(--rgba-primary-1);
	border-radius: $radius;
	display: flex;
	align-items: center;
	padding: 0.625rem 1.125rem;
	margin: 0 -0.125rem;

	img {
		height: 3.125rem;
		width: 3.125rem;
		margin-right: 0.5rem;
		border-radius: $radius;
		border: 3px solid var(--card);
	}

	&>div {
		flex: 1;
	}

	.check-icon {
		height: 1.875rem;
		width: 1.875rem;
		line-height: 1.875rem;
		font-size: 1rem;
		background: var(--primary);
		color: $white;
		border-radius: 50%;
		text-align: center;
	}

	@include respond ('phone') {
		margin: 0;
	}
}

.user-list {
	display: flex;
	overflow: hidden;

	li {
		height: 45px;
		width: 45px;
		overflow: hidden;
		border: 3px solid var(--card);
		border-radius: 50%;
		margin-right: -15px;

		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			border-radius: $radius;
		}
	}
}

.amount-input {
	font-size: 26px;
	font-weight: 600;
	color: var(--text-dark);
	border: 0;
	text-align: center;

	&:hover,
	&:focus {
		color: var(--text-dark);
	}
}

.tbl-img {
	border-radius: $radius;
}

.card-table {
	tr {
		td {
			border: 0;
		}
	}
}

.invoice {
	input[type="date"] {
		position: relative;

		&::-webkit-calendar-picker-indicator {
			background: transparent;
			bottom: 0;
			color: transparent;
			cursor: pointer;
			height: auto;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: auto;
		}
	}

	.cal-input {
		position: relative;

		i {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 16px;
			font-size: 22px;
			pointer-events: none;
		}
	}
}

.inv {
	padding: 2rem 6rem;

	.invoice-tbl {
		tr {
			th {
				font-size: 20px;
				font-weight: 700;
			}
		}
	}

	.billing-add {
		div {
			font-size: 1.07rem;
			font-weight: 600;
			color: black;
		}
	}

	@include respond('phone-land') {
		padding: 2rem 1rem;
	}
}

.table> :not(:first-child) {
	border-color: #d1d1d1;
}

.custome-check {
	.form-check-input[type="checkbox"] {
		border-radius: 1.25em;
	}

}

.sd-shape7 {
	position: absolute;
	-webkit-animation: movedelement 10s linear infinite;
	animation: movedelement 10s linear infinite;

}

@keyframes movedelement {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}

	25% {
		-webkit-transform: translate(10px, 10px);
		transform: translate(10px, 10px);
	}

	50% {
		-webkit-transform: translate(5px, 5px);
		transform: translate(5px, 5px);
	}

	75% {
		-webkit-transform: translate(10px, -5px);
		transform: translate(10px, -5px);
	}

	to {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}

.drp-profile {
	padding: 0 15px;

	img {
		height: 50px;
		width: 50px;
		border-radius: 50% !important;
		margin-right: 10px;
	}

	.img-thumbnail {
		padding: 0.25rem;
		background-color: #fff;
		border: 1px solid #dee2e6;
		max-width: 100%;
	}

	.ai-icon {
		padding: 10px 0;

		span {
			font-size: 1rem;
		}
	}
}

.header-profile2 {
	.dropdown-menu.show {
		right: 0px !important;
	}

	.dropdown-menu {
		min-width: 15rem;
	}
}

.was-validated .form-control+.nice-select.form-control {
	border-color: #FC2E53;
	padding-right: calc(1.5em + 0.75rem);
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}


.tooltip-inner {
	background-color: var(--rgba-primary-1);
	box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
	color: var(--primary);
	font-weight: 400;
	width: auto;
	border-radius: $radius;

	&:before {
		background-color: $white !important;
	}

}

.tooltip .arrow {
	border-top-color: #008ec3 !important;
	background-color: $white !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: var(--primary);
	/* Set arrow color to red */
	box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: var(--primary);
	/* Set arrow color to red */
	box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
	border-#{$dz-pos-left}-color: var(--primary);
	/* Set arrow color to red */
	box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
	border-#{$dz-pos-right}-color: var(--primary);
	/* Set arrow color to red */
	box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.text-justify {
	text-align: justify;
}

.order-list {
	li {
		list-style-type: unset;
	}
}

.product-grid-card {
	padding: 15px;
}

/* edit */
.author-profile {
	text-align: center;

	.card-body {
		padding: 0;
	}

	.author-media {
		position: relative;
		margin-#{$dz-pos-left}: auto;
		margin-#{$dz-pos-right}: auto;
		margin-bottom: 1.25rem;
		display: inline-block;

		img {
			width: 8.125rem;
			border-radius: 100%;
		}
	}

	.author-info {
		.title {
			font-size: .9375rem;
			font-weight: 500;
			margin-bottom: 0;
		}

		span {
			display: block;
			color: var(--text);
		}
	}

	.info-list {
		li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: .9375rem;
			border-top: .0625rem solid var(--border);
			padding: 1.125rem 1.875rem;
			color: var(--text);

			a {
				color: var(--text);
			}

			span {
				color: var(--text);
				font-weight: 500;
			}
		}
	}

	.card-footer {
		padding: 1.875rem;
		display: block;

		.form-control {
			height: 2.8125rem;
			border-color: var(--border);
			overflow: hidden;
			line-height: 2.125rem;
		}
	}

	.upload-link {
		position: absolute;
		width: 2.1875rem;
		height: 2.1875rem;
		line-height: 2rem;
		background: var(--primary);
		bottom: 0;
		#{$dz-pos-left}: 0rem;
		box-shadow: 0 0 .625rem 0 rgba(0, 24, 128, 0.1);
		border-radius: 100%;
		color: #fff;
		overflow: hidden;
		border: .125rem solid #fff;

		.update-flie {
			position: absolute;
			opacity: 0;
			z-index: 0;
			width: 100%;
			cursor: pointer;
			#{$dz-pos-left}: 0;
			height: 100%;
		}
	}
}

// messsages



@include respond ('tab-land') {
	.chat-left-body {
		width: 33.33%;
		position: fixed;
		height: 100vh;
		z-index: 2;
		transition: all 0.5s;
		#{$dz-pos-left}: -25rem;
		top: 0px;
		z-index: 999;

		&.active {
			#{$dz-pos-left}: 0;
			background: $white;
			transition: all 0.5s;
			overflow-y: scroll;
		}

		@include respond ('tab-port') {
			#{$dz-pos-left}: -29rem;
			width: 50%;
		}

		@include respond ('phone-land') {
			width: 60%;
		}

		@include respond ('phone') {
			width: 88%;
		}
	}
}

.chat-toogle {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	text-align: center;
	background-color: var(--rgba-primary-1);
	border-radius: $radius;
	color: var(--primary);

	&.active {
		background-color: var(--primary);
		color: $white;
	}

	display:none !important;

	@include respond ('tab-land') {
		display: inline-block !important;
		margin-#{$dz-pos-left}: auto;
	}

	&.active {
		&:before {
			content: '';
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: #000;
			opacity: 0.2;
			border-radius: 0;
			z-index: 4;
		}
	}
}



.profile-statistics {
	position: sticky;
	top: 7rem;
	height: calc(100% - 140px);
}

.btn-profrle {

	margin-#{$dz-pos-left}: 60px;

	@include respond('tab-port') {
		margin-#{$dz-pos-left}: 15px;
	}

	@include respond('phone-land') {
		display: none;
	}
}



.range-slider {
	&.style-1 {
		.noUi-horizontal {
			height: 4px;

			.noUi-handle {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 2px solid var(--primary);
				background-color: var(--body-bg);
				box-shadow: none;
				top: -8px;
				right: 0;
				cursor: pointer;

				&:before,
				&:after {
					content: none;
				}

				.noUi-tooltip {
					display: none;
					border: 0px;
					background: var(--primary);
					color: rgb(255, 255, 255);
					border-radius: 4px;
					font-size: 13px;
					bottom: -35px;
					font-weight: 600;
					padding: 2px 5px;

					&:after {
						content: "";
						position: absolute;
						background-color: inherit;
						width: 10px;
						height: 10px;
						top: 4px;
						margin-#{$dz-pos-left}: -4px;
						#{$dz-pos-left}: 50%;
						transform: rotate(45deg) translate(-50%, -50%);
					}
				}
			}
		}

		.noUi-target {
			background: #D7D7D7;
			border-radius: 0;
			border: 0;
			box-shadow: none;

			.noUi-connect {
				background: var(--primary);
			}
		}

		span {
			margin-#{$dz-pos-right}: 15px;
		}

		.example-val {
			font-size: 14px;
			color: var(--text-dark);
		}
	}
}


.upload-img .dropzone {
	border: 0.0625rem dashed var(--border);
	background-color: var(--card);
	min-height: 6.325rem;
	position: relative;
	border-radius: 0.375rem;
	text-align: center;
	padding: 14px 0;
}

.upload-img .dz-button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.upload-img .dz-success-mark,
.upload-img .dz-error-mark {
	display: none;
}


// edit-cata

.check-cate,
.check-sub-bx {
	border: 1px dashed var(--border);
	padding: 20px;
	border-radius: $radius;

}

.check-sub-bx {
	&.dismiss {
		display: block !important;
	}
}

.check-sub-bx-1 {
	padding: 20px;
}

.check-cate {
	&.active {
		border-color: var(--primary);
	}
}



// folder

.dz-folder-bx,
.quick-bx-inner {
	background-color: var(--rgba-primary-1);
	border-radius: $radius;
	padding: 10px 15px;
}

.quick-bx {
	border-top: 1px dashed var(--border);
	margin-top: 30px;
	padding-top: 20px;

	.quick-bx-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

// blog
.dz-blog-bx {
	.dz-media {
		position: relative;
		margin-bottom: 30px;
		border-radius: $radius;
		overflow: hidden;

		img {
			width: 100%;
			height: 300px;
			object-fit: cover;
		}

		&:after {
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			background-color: #000;
			left: 0;
			top: 0;
			opacity: 0.7;
		}
	}



}

.small-post {
	height: 1.275rem !important;
	width: 1.275rem !important;
}

.dz-blog-grid {
	&.style-1 {
		.dz-blog-media {
			position: relative;
			overflow: hidden;
			border-radius: $radius;
			height: auto;
			object-fit: cover;
			transition: all 0.5s;

			.dz-post {
				transition: all 0.5s;
			}

			&:after {
				position: absolute;
				content: "";
				background-color: #000;
				opacity: 0.6;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}

			.dz-blog-info {
				position: absolute;
				bottom: 10px;
				z-index: 1;
				left: 19px;


			}


		}
	}
}

.dz-blog-media {
	position: relative;
	overflow: hidden;
	border-radius: $radius;
	height: auto;
	object-fit: cover;
	transition: all 0.5s;

	.dz-post {
		transition: all 0.5s;
	}

	&:after {
		position: absolute;
		content: "";
		background-color: #000;
		opacity: 0.6;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.dz-blog-info {
		position: absolute;
		bottom: 10px;
		z-index: 1;
		left: 19px;


	}


}

.dz-blog-grid {

	&:hover {
		.dz-post {
			transform: scale(1.1);
		}

	}

	&.style-1 {
		&:hover {
			.dz-post {
				transform: rotate(-20deg) scale(1.5);
			}
		}
	}
}


// pricing


.ds-prise {
	margin-top: 28px;

	li {
		font-size: 0.938rem;
		font-weight: 400;
		color: var(--text-dark);
	}
}

.d-team {
	margin-top: 75px;
}

.upgrade {
	position: relative;
	overflow: hidden;

	&:after {
		position: absolute;
		content: "";
		height: 200px;
		width: 200px;
		background-color: var(--rgba-primary-1);
		border-radius: 50%;
		bottom: -44px;
		#{$dz-pos-right}: -44px;
	}

	@include custommq($max: 100rem) {
		img {
			width: 100%;
		}
	}

}

.m-prise {
	justify-content: center;
	border-bottom: 1px solid var(--border);
	padding: 12px 0;
	margin-bottom: 20px;

	h4 {
		font-size: 30px;
		margin-bottom: 0;
		font-weight: 700;
		color: var(--primary);
	}
}

.prise-list {
	li {

		padding-top: 8px;
		padding-bottom: 8px;
		padding-#{$dz-pos-right}: 0;
		padding-#{$dz-pos-left}: 40px;

		text-align: start;

		position: relative;

		&:after {
			content: "\f00c";
			font-family: 'Font Awesome 6 Free';
			font-weight: 700;
			font-size: 12px;
			width: 20px;
			height: 20px;
			background: var(--rgba-primary-1);
			display: block;
			position: absolute;
			#{$dz-pos-left}: 0;
			color: var(--primary);
			border-radius: 35px;
			text-align: center;
			top: 10px;
			line-height: 20px;
		}
	}

	.disable {

		text-decoration: line-through;

		&::after {
			content: "\f00d" !important;
			color: $danger !important;
			border: 1px solid var(--border);
			background: rgba($danger, 0.1) !important;
		}
	}
}

.upgrad-plan {
	min-height: 530px;

	&:hover {
		box-shadow: 0px 12px 56px 0px #061C3D1F;

		a {
			background-color: var(--primary);
			color: $white;

		}
	}
}

/* Companies */

.companies-inner {
	padding-bottom: 50px;

	.companies-media {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--card);
		height: 100%;
		overflow: hidden;
		width: 100%;
		float: right;
		min-height: 60px;
		border-radius: 10px;

		&:hover {
			img {
				-webkit-animation: toBottomFromTop 0.5s forwards;
				-moz-animation: toBottomFromTop 0.5s forwards;
				animation: toBottomFromTop 0.5s forwards;
			}
		}
	}
}

@include respond ("tab-port") {
	.companies-inner {
		display: unset;

		.section-head.style-2 {
			display: block;
			max-width: 450px;
			margin: auto auto 20px;
			text-align: center;
		}
	}
}

@include respond ("phone-land") {

	.companies-inner {
		justify-content: center;
	}

}

.pricing-title {
	text-align: center;
	max-width: 509px;
	margin: 30px auto;

}

@keyframes toBottomFromTop {
	49% {
		-webkit-transform: translateY(-100%);
	}

	50% {
		opacity: 0;
		-webkit-transform: translateY(100%);

	}

	51% {
		opacity: 1;


	}
}

/* Companies End*/


// new

.grid-bx {
	border: 1px dashed var(--border);
	padding: 10px;
	border-radius: $radius;
	text-align: center;
	cursor: pointer;
	transition: all 0.5s;

	&:hover {
		background-color: var(--light);
	}

	img {
		width: 1.5rem;
		height: 1.5rem;
	}
}

.invoice-icon {
	width: 3.125rem;
	height: 3.125rem;
	line-height: 3.125rem;
	display: inline-block;
	text-align: center;
	border-radius: 50%;


}

.fire-img {
	width: 8%;
}

.card-tabs {
	.nav-tabs {
		border: 0;
		border-radius: $radius;
		background-color: var(--rgba-primary-1);
		padding: 4px;
		white-space: nowrap;

		.nav-item {
			flex: 1;

			.nav-link {
				border: 0;
				border-radius: $radius;
				margin: 0;
				color: var(--text-gray);
				padding: 0.5rem 1.125rem;
				font-weight: 500;
				text-align: center;

				&.active {
					background: var(--primary);
					color: $white;

					&:hover {
						color: $white;
					}
				}

				&:hover {
					color: var(--primary);
				}

				@include respond ('phone') {
					padding: 0.5rem 0.825rem;
				}
			}
		}

		&.style-1 {
			background-color: var(--card);
		}
	}
}


@keyframes tilt-shaking {
	0% {
		transform: skewX(-15deg);
	}

	5% {
		transform: skewX(15deg);
	}

	10% {
		transform: skewX(-15deg);
	}

	15% {
		transform: skewX(15deg);
	}

	20% {
		transform: skewX(0deg);
	}

	100% {
		transform: skewX(0deg);
	}
}

.card-table {
	thead {
		tr {
			th {
				background-color: transparent;
			}
		}
	}
}

// jpbs
.search-job {
	border-radius: $radius;
	padding: 0.5rem 0.5rem;

	@include respond ('tab-land') {
		.form-control {
			height: auto;

		}

		.bootstrap-select .btn {
			height: auto;
		}
	}

	.search-dropdown {
		@include respond ('tab-port') {
			margin-bottom: 0.625rem;
		}
	}

	@include respond('tab-port') {
		border-radius: $radius;

		.dashboard-select-1,
		.dashboard-select-2 {
			width: 100% !important;
		}
	}

	.form-control.default-select {
		.list {
			width: 100%;
			padding: 10px 0;
			box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);

			.option {
				padding: 8px 20px;
				font-weight: 400;
				font-size: 14px;
				line-height: 2;
				color: $black;
			}

			.option.selected.focus {
				background-color: var(--primary);
				color: $white;
				padding: 8px 20px;
				font-weight: 400;
				font-size: 14px;
				line-height: 2;
			}

			&:hover {
				.option.selected.focus {
					background-color: var(--primary) !important;
				}
			}

		}

		&:after {
			border-width: 2px;
		}
	}

	.search-dropdown {
		position: relative;

		&:after {
			content: "";
			position: absolute;
			top: 0.375rem;
			#{$dz-pos-right}: 0;
			width: 1px;
			height: 2rem;
			background: var(--border);
		}

		@include respond ('tab-port') {
			&:nth-child(2) {
				&:after {
					content: none;
				}
			}
		}

		@include respond ('phone') {
			&:after {
				content: none;
			}
		}
	}

	.job-title-search {
		.search-box {
			margin-#{$dz-pos-left}: 1rem;

			.form-control {
				border: 0;

				&:focus {
					background-color: transparent;
				}
			}
		}

		@include respond ('tab-port') {
			border-top: 1px solid var(--border);
			padding-top: .5rem;

			.search-box {
				margin-#{$dz-pos-left}: 0;
			}
		}
	}
}

.grid-tabs {
	.nav-link {
		padding: 0;
		height: 40px;
		width: 40px;
		line-height: 35px;
		text-align: center;
		border-radius: $radius;
		border: 1px solid var(--primary);
		margin-right: 15px;

		svg {
			path {
				fill: var(--primary);
			}
		}

		&.active {
			background-color: var(--primary);

			svg {
				path {
					fill: $white;
				}
			}
		}
	}
}

.search-row {
	padding: 0 20px;

	.title {
		font-size: 20px;
		font-weight: 600;
	}

}

.like-btn {
	.checkmark {
		&:before {
			content: "\f02e";
			font-size: 26px;
			font-weight: 900;
			color: var(--primary);
		}
	}
}

.search-job {
	background-color: var(--card);
}

.dashboard-select-1,
.dashboard-select-2 {
	width: 235px !important;
	background: transparent;
	text-transform: capitalize;

	.btn {
		color: var(--primary) !important;
		border: 0 !important;
		font-weight: 500;
		background-color: transparent !important;
	}
}

.dashboard-select-2 {
	width: 100% !important;
	border: 1px solid $border !important;

	@include custommq ($max: 1600px) {
		height: 42px !important;
		line-height: 2.7rem;
	}

	@include respond ('laptop') {
		height: 39px !important;
	}


	@include respond ('laptop') {
		height: 2.8rem;
		line-height: 2.9rem;
	}

	@include respond('phone-land') {
		line-height: 2.6rem;
	}
}


.icon-btn {
	height: 2.5rem;
	width: 2.5rem;
	border-radius: $radius;
	background-color: $secondary;
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	justify-content: center;
	color: $white;

	&:hover {
		color: $white;
	}
}

.action-buttons .btn {
	padding: 0;
	border: 0;
	margin: 0 4px;
	height: 40px;
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
}

.custom-label {
	min-width: 140px;
	display: inline-block;
	color: #000;
}

.action-btn {
	span {
		a {
			padding: 0 1rem;
		}
	}
}

.listline-wrapper {
	display: flex;
	flex-wrap: wrap;

	@include custommq($min : 575px) {
		.item:not(:last-child) {
			border-#{$dz-pos-right}: 1px solid var(--border);
			margin-#{$dz-pos-right}: 10px;
			padding: 2px 0;
			padding-#{$dz-pos-right}: 10px;
		}
	}

	.item {
		display: flex;
		align-items: center;
		color: var(--text-dark);

		svg {
			padding-#{$dz-pos-right}: 8px;
			height: 1.2rem;
			width: 1.6rem;
		}

		i {
			color: #a0a0a0;
			padding-#{$dz-pos-right}: 8px;
		}

		@include respond('phone') {
			width: 50%;
			padding: 4px 15px;
		}
	}

	@include respond('phone') {
		margin: 0 -15px;
	}
}


//chat

.chat-body {
	@include respond ('phone-land') {
		min-height: auto !important;
	}
}

.chat-wrapper {
	display: flex;
	overflow: hidden;
	position: relative;

	.chat-left-sidebar {
		width: 320px;
		min-width: 320px;
		@include transitionFast;

		.chat-fix-search {
			padding: 12px 20px;
			border-bottom: 1px solid $border-color;
			border-right: 1px solid $border-color;

			img {
				height: 42px;
				width: 42px;
			}

			.message-search-area {
				.form-control {
					border-right: 0;
					height: 42px;
					border-top-left-radius: 42px;
					border-bottom-left-radius: 42px;
				}

				.input-group-text {
					height: 42px;
					background: transparent;
					border-left: 0;
					border: 1px solid $border-color;
					border-top-right-radius: 42px;
					border-bottom-right-radius: 42px;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;

					i {
						font-weight: 600;
					}
				}
			}
		}

		@include respond ('tab-land') {
			width: 280px;
			min-width: 280px;
		}
	}

	.chart-right-sidebar {
		flex: 1;
	}

	.chat-box-header {
		padding: 12px 20px;

		.main-img {
			height: 42px;
			width: 42px;
		}
	}

	.chat-hamburger {
		display: none;
	}

	.chat {
		display: none;

		&.active-chat {
			display: block;
		}
	}

	@include respond ('phone-land') {
		.chat-left-sidebar {
			position: absolute;
			left: -280px;
			background: #fff;
			z-index: 5;

			&.show {
				left: 0;
			}
		}

		.chat-hamburger {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			height: 45px;
			width: 45px;
			line-height: 45px;
			text-align: center;
			background-color: $secondary;
			color: #fff;
			border-radius: 50%;
			right: 10px;
			top: 75px;
			z-index: 5;

			span {
				display: block;
				height: 2px;
				margin: 2px auto;
				width: 20px;
				border-radius: 3px;
				background-color: #fff;
			}
		}
	}
}


//message box

.message-bx {
	.tab-content {
		height: 624px;

		@include respond ('phone-land') {
			height: calc(100vh - 380px);
		}
	}

	.image-bx {
		position: relative;
		display: inline-block;

		.img-1 {
			width: 42px;
			height: 42px;
			height: 42px;

			@include respond ('phone') {
				height: 45px;
				width: 45px;
			}
		}

		span.active {
			position: absolute;
			bottom: -2px;
			right: 1px;
			height: 12px;
			width: 12px;
			background: $success;
			border: 2px solid $white;
			border-radius: 3rem;

			@include respond ('phone') {
				bottom: 0px;
				right: 0px;
				height: 15px;
				width: 15px;
				border: 3px solid $white;
			}
		}
	}

	p {
		font-size: 14px;

		@include respond ('tab-land') {
			font-size: 12px;
		}
	}
}


//chat box
.chat-box {
	.message-sent {
		width: 62%;
		text-align: right;

		p {
			background: #8850FF;
			text-align: left;
			border-radius: $radius $radius 0 $radius;
			padding: 10px 20px;
			color: $white;
			font-size: 14px;
			font-weight: 300;
			display: inline-block;
		}

		span {
			display: block;
		}

		@include respond ('phone') {
			width: 100%;

		}
	}

	.message-received {
		width: 62%;
		text-align: left;

		p {
			background: $white;
			text-align: left;
			font-size: 14px;
			display: inline-block;
			border-radius: 0 $radius $radius $radius;
			padding: 10px 20px;
			color: $black;
			font-weight: 400;
			box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
		}

		span {
			display: block;
		}

		@include respond ('phone') {
			width: 100%;

		}
	}

	.type-massage {
		margin: 15px 15px;
		padding: 5px;
		border-radius: $radius;
		border-width: 1px !important;
		border-style: dashed !important;

		.form-control {
			border: 0;
			height: 43px;
			resize: none;
			padding: 10px;
		}

		.btn:focus {
			box-shadow: none;
		}

		.send-btn {
			border-radius: $radius;
			padding: 10px 18px;
		}

		@include respond ('phone') {
			margin: 5px 15px 15px;
			padding: 5px 8px;

			textarea {
				font-size: 12px;
				padding: 11px 5px;
				height: 40px;
			}
		}
	}

	.title-nm {
		font-size: 20px;

		@include respond ('tab-land') {
			font-size: 16px;
		}
	}
}

//chat-box-area
.chat-box-area {
	position: relative;
	padding: 20px 20px;
	background: var(--light);
	z-index: 1;
	height: 630px;
	background-size: 30%;
	background-position: bottom;

	@include respond ('phone-land') {
		height: calc(100vh - 380px);
	}
}

//chat-list-area
.chat-list-area {
	@include transitionMedium;
	padding: 20px 20px;
	cursor: pointer;

	.image-bx {
		float: left;
		margin-right: 10px;
	}

	p {
		margin-bottom: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	&.active {
		background: var(--rgba-primary-1);
	}

	&:hover {
		background: #f7f7f7;
	}

	@include respond ('tab-land') {
		.user-name {
			font-size: 14px !important;
		}
	}

	@include respond ('phone') {
		padding: 15px 15px;
	}
}

.card-tabs {
	.nav-tabs {
		&.style-3 {
			border-bottom: 3px solid $border-color;

			.nav-link {
				font-size: 14px;
				border: 0;
				margin-bottom: -2px;
				border-radius: 0;
				position: relative;
				padding: 12px 20px;
				@include transitionMedium;

				&:after {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					content: "";
					border-radius: 5px;
					height: 3px;
					width: 0px;
					background: var(--primary);
					@include transitionMedium;
				}

				@include respond('tab-land') {
					padding: 12px 14px;
				}

				&.active {
					background: transparent;
					color: var(--primary);

					&:after {
						width: 100%;
					}
				}
			}
		}
	}
}

.swMain {
	width: 100%;

	.stepContainer div.content {
		width: 100%;
		height: 100%;
		position: relative;
	}

}

.swMain ul.anchor {
	background-color: var(--card);
	border-radius: $radius;
	padding: 15px;
}

.swMain ul.anchor li a.selected {
	box-shadow: unset;
}

.swMain ul.anchor li a .stepNumber {
	font-size: 12px;
	width: 40px;
	height: 40px;
	background: var(--light);
	border-radius: 50%;
	color: #000;
	line-height: 40px;
	margin-bottom: 0;
	position: relative;

	&:after {
		position: absolute;
		content: "";
		background-color: var(--light);
		width: 2px;
		height: 57px;
		left: 20px;
		top: 0;
		z-index: -1;
	}
}

.swMain ul.anchor li a.selected {
	box-shadow: unset;
	background: transparent;
	border-color: transparent;
	color: #000;
	height: 50px;
	display: flex;
	align-items: center;
}

.swMain ul.anchor li a .stepDesc {
	font-size: 12px;
	font-family: 'Poppins';
	color: var(--text-dark);
}

.swMain ul.anchor li a.disabled {
	background-color: transparent;
	border-color: transparent;
	height: 50px;
	display: flex;
	align-items: center;

	&:hover {
		background-color: transparent;
		color: var(--text-dark);
	}
}

.swMain ul.anchor li a.selected:hover {
	box-shadow: unset;
	background: transparent;
	border-color: transparent;
	color: #000;

}

.swMain .stepContainer div.content {
	border: 0;
	background-color: transparent;
	padding: 0;
}

.swMain .stepContainer {
	height: 100% !important;
}

.smartWizard-list {
	li {
		padding: 5px 0;
	}
}

.question-list {
	padding-left: 20px;

	ul {
		li {
			margin-bottom: 8px;
			list-style-type: disc;

			a {
				font-size: 1rem;
				color: var(--text-dark);
				font-weight: 500;
			}
		}
	}
}

.swMain div.actionBar {
	background-color: transparent;
	border-color: transparent;
}

.swMain .buttonNext {
	padding: 0.65rem 1.25rem;
	border-radius: 8px;
	--bs-body-color: var(--text);
	font-size: 0.9375rem;
}

// chat-modal

.main-img {
	width: 32px;
	height: 32px;
}

.main-img-lg {
	width: 92px;
	height: 92px;
	object-fit: cover;

}

.moadl-chat-icon {
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: var(--rgba-primary-1);
	border-radius: $radius;
	display: inline-block;
	text-align: center;

	i {
		color: var(--primary);
		font-size: 16px;
		font-weight: 900;
		line-height: 47px;

	}
}

.chat-modal {
	.chat-box-area {
		height: 24rem;
		background-color: var(--card);
		padding: 0;
	}

	.message-received,
	.message-sent {
		width: 48%;

		p {
			background-color: var(--light);
			color: var(--text-dark);
			border-radius: 0 $radius $radius $radius;
			padding: 0.625rem;
			font-size: 0.775rem;
			font-weight: 500;
			width: fit-content;
		}
	}

	.message-sent p {
		background-color: var(--rgba-primary-8);
		color: $white;
	}

	.chat-line {
		text-align: center;
		margin-bottom: 15px;
		background: var(--light);
		margin-left: auto;
		margin-right: auto;
		max-width: 104px;
		padding: 5px 10px;
		border-radius: 8px;
		color: var(--primary);
		font-size: 0.7rem;

	}

}


.setting-tabs {
	.nav-tabs {
		flex-direction: column;
		border-bottom: 0;

		.nav-item {
			margin-bottom: 8px;

			.nav-link {
				width: 100%;
				border-radius: 8px;
				padding: 10px;
				background-color: var(--rgba-primary-1);
				color: var(--primary);
				margin-bottom: 8px;
				text-align: left;

				&:hover {
					border-color: transparent;
				}

				&.active {
					background-color: var(--primary);
					color: $white;
					border-color: transparent;



				}

				.setting-icon {
					width: 30px;
					height: 30px;
					display: inline-block;
					line-height: 30px;
					font-size: 1rem;
					background: var(--card);
					border-radius: 50%;
					color: var(--primary);
					margin-right: 8px;
					text-align: center;

				}
			}
		}


	}
}

.income-data {
	background-color: var(--body-bg);
	padding: 10px;
	border-radius: $radius;
	margin-bottom: 30px;

	.income-sub-menu {
		display: flex;
		align-items: center;


	}
}

.rating-container .star {
	font-size: 18px;
}

.rating-container .caption .label {
	background-color: var(--primary);
	color: $white;
}

.rating-md {
	font-size: 28px;
	line-height: 18px;
	display: flex;
	align-items: baseline;
}

.dz-toolbar {
	.btn {
		margin-right: 8px;

		&:last-child {
			margin-right: 0px;
		}
	}
}




/* Code */
.code {
	padding: 6px 12px;
	background-color: #232323;
	margin: 10px 0;
	display: block;
	color: #fff;
}

.jstree-default .jstree-anchor {
	color: #3F4254;
	padding: 0 8px 0 4px;
}

.jstree-default .jstree-icon {
	color: #ffad0e;
	font-size: 1.3rem;
}

.jstree-default .jstree-icon.fa {
	font-size: 1.2rem;
}

.jstree-default .jstree-icon.la {
	font-size: 1.5rem;
}

.jstree-default .jstree-disabled {
	line-height: auto;
	opacity: 0.7;
	height: auto;
	cursor: not-allowed;
}

.jstree-default .jstree-disabled .jstree-icon {
	color: #3F4254;
}

.jstree-default .fa-file-text {
	color: #969696;
}

.jstree-default .jstree-clicked {
	border: 0;
	box-shadow: none;
	background: #F3F6F9;
	-webkit-box-shadow: none;
}

.jstree-default .jstree-hovered {
	box-shadow: none;
	border: 0;
	background-color: var(--light);
	-webkit-box-shadow: none;
}

.jstree-default .jstree-wholerow-clicked,
.jstree-default .jstree-wholerow-clicked {
	box-shadow: none;
	background: #EBEDF3;
	-webkit-box-shadow: none;
}

.jstree-default .jstree-wholerow-hovered,
.jstree-default.jstree-wholerow .jstree-wholerow-hovered {
	border: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
	background-color: #F3F6F9;
}

.jstree-open>.jstree-anchor>.fa-folder:before {
	content: "\f07c";
	color: #ffad0e;
	margin-left: 2px;
}

.jstree-open>.jstree-anchor>.la-folder:before {
	margin-left: 2px;
	color: #ffad0e;
	content: "\f200";
}

.jstree-default .jstree-clicked {
	background: transparent;
}

.jstree-anchor {
	background: transparent;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--text-dark) !important;
}

.dashed-bottom {
	border-bottom: 1px dashed var(--border);
}

.jp-seek-bar {
	position: relative;
	background-color: rgba(0, 0, 0, 0.2);
	height: 6px;
	border-radius: 10px;
	margin-top: 10px;
}

.jp-play-bar {
	background-color: var(--primary);
}

.icon-bx {
	width: 2.813rem;
	height: 2.813rem;
	background-color: var(--primary);
	display: inline-block;
	text-align: center;
	line-height: 2.813rem;
	min-width: 2.813rem;
	border-radius: $radius;
	margin-left: 8px;


}

.recentOrderTable {
	.custom-dropdown {
		&:hover {
			g [fill] {
				fill: $white;
			}
		}
	}


}

.task-table {
	tbody {
		tr {
			white-space: nowrap;
		}
	}
}

.chat-modal {
	.chat-box-area .media .message-received p {
		background-color: var(--light);
	}
}

.dz-sales-bx {
	text-align: center;
	padding: 15px;
	border: 1px dashed var(--border);
	border-radius: $radius;

}

.dz-spending {
	height: 340px;
}

.gallery-grid {
	width: 100%;
	height: 600px;
	display: grid;
	grid-gap: 5px;
	margin: 0 0 15px;

	@include respond("phone-land") {
		height: 480px;
	}

	@include respond("phone") {
		height: 300px;
	}

	&.rows-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.rowspan-2 {
		grid-row: span 2 / auto;
	}

	.grid-item {
		position: relative;
		overflow: hidden;
		grid-column: span 1;
		grid-row: span 1;
	}

	img {
		display: block;
		width: 100%;
		height: 100%;
		max-height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.colspan-3 {
		grid-column: span 3 / auto;
	}

	.colspan-2 {
		grid-column: span 2 / auto;
	}

	.rowspan-3 {
		grid-row: span 3 / auto;
	}

	.gallery-more:after {
		content: attr(data-more);
		position: absolute;
		top: 0;
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 200%;
	}
}

.to-dodroup {
	height: 362px;

	.sub-card {
		border-bottom: 1px solid var(--border);
		margin-bottom: 2px;

		.d-items {
			padding: 15px 20px;
			background-color: #fff;

			@at-root [data-theme-version="dark"] & {
				background: var(--card);
			}

			@include respond ('tab-port') {
				padding: 15px 18px;
			}

			.d-items-2 {
				display: flex;
				align-items: baseline;

				svg {
					margin-right: 10px;
				}

				label {
					font-size: 14px;
					font-weight: 400;
					color: var(--text-dark);
				}
			}

			&.style-1 {
				padding: 14px 15px;
			}
		}

		&:last-child {
			border-bottom: 0;

			.d-items {
				padding-bottom: 0;
			}
		}
	}
}

.post-quote {
	min-height: 280px;
	vertical-align: middle;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
	position: relative;

	.quote-inner {
		z-index: 1;
		position: relative;
	}
}

.bg-purple {
	background: #BB6BD9;
}

.post-quote-img {
	position: relative;
	overflow: hidden;

	&:after {
		content: "";
		background-color: #000;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.3;
	}
}

.account-profile {
	.avatar-preview {
		width: 160px;
		height: 160px;
		position: relative;

		>div {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	.upload-link {
		position: absolute;
		width: 35px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background: var(--primary);
		bottom: 0;
		right: 0px;
		border-radius: 6px;
		color: #fff;
		overflow: hidden;

		.update-flie {
			position: absolute;
			opacity: 0;
			z-index: 0;
			width: 100%;
			cursor: pointer;
			// left: 0;
			height: 100%;
		}
	}
}

.normal-select {
	.btn {
		padding: 7px 10px;
		font-size: 13px;
		color: var(--primary) !important;
	}

	.dropdown-toggle::after {
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		content: "\f078";
		border: 0;
		font-size: 0.7rem;
	}
}

//Profile
.profile-overview-wide {
	margin-left: -2.575rem;
	margin-right: -2.575rem;
	margin-top: -2.575rem;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-radius: 0;
	height: auto;
	border-bottom: 1px solid var(--border);
	border-top: 1px solid var(--border);

	.card-header,
	.card-footer {
		margin-left: 1.875rem;
		margin-right: 1.875rem;
	}

	.card-body {
		padding: 1.875rem;
	}

	.card-header,
	.card-footer {
		padding-left: 1.875rem;
		padding-right: 1.875rem;
	}

	@include respond ('phone-land') {
		margin-left: -1.25rem;
		margin-right: -1.25rem;
		margin-top: -1.25rem;

		.card-header,
		.card-footer {
			margin-left: 1.25rem;
			margin-right: 1.25rem;
		}

		.card-body {
			padding: 1.25rem;
		}

		.card-header,
		.card-footer {
			padding-left: 1.25rem;
			padding-right: 1.25rem;
		}
	}

	@include respond ('phone') {
		margin-left: -0.9375rem;
		margin-right: -0.9375rem;
		margin-top: -0.9375rem;

		.card-header,
		.card-footer {
			margin-left: 0.9375rem;
			margin-right: 0.9375rem;
		}

		.card-body {
			padding: 0.9375rem;
		}

		.card-header,
		.card-footer {
			padding-left: 0.9375rem;
			padding-right: 0.9375rem;
		}
	}
}

.profile-overview {
	.profile-avatar {
		width: 160px;
		min-width: 160px;
		height: 160px;

		@include respond ('tab-port') {
			width: 100px;
			min-width: 100px;
			height: 100px;
		}

		@include respond ('phone') {
			width: 80px;
			min-width: 80px;
			height: 80px;
		}
	}

	.nav#tabMyProfileBottom {
		margin-bottom: -4px;
	}

	.card-footer .btn {
		width: 45px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		padding: 0;
	}
}

.avatar {
	height: 40px;
	width: 40px;
	min-width: 40px;
	border-radius: $radius;

	&.avatar-lg {
		height: 55px;
		width: 55px;
		min-width: 55px;
		font-size: 20px;
		font-weight: 600;
	}

	&.avatar-sm {
		height: 32px;
		width: 32px;
		min-width: 32px;
	}

	&-circle {
		border-radius: 50% !important;
	}

	&.borderd {
		border: 2px solid white;
	}
}

.avatar-label {
	width: 40px;
	height: 40px;
	overflow: hidden;
	font-size: 14px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	border-radius: $radius;

	.avatar-label-lg {
		height: 50px;
		width: 50px;
		min-width: 50px;
	}

	.avatar-label-sm {
		height: 32px;
		width: 32px;
		min-width: 32px;
	}
}

.avatar-primary {
	background-color: var(--primary);
	color: #fff;
}

.avatar-light {
	background-color: #F9F9FB;
	color: $secondary;
}


.avatar-card {
	@include transitionMedium;

	&:hover {
		border-color: var(--primary) !important;
		border-style: solid;
		background-color: var(--primary-light);
	}
}

.border-dashed {
	border: 1px dashed var(--border);
}


.bg-primary-light {
	background: #bcb0eb;
}

.bg-secondary-light {
	background: $secondary-light;
}

.bg-success-light {
	background: $success-light;
}

.bg-warning-light {
	background: $warning-light;
}

.bg-danger-light {
	background: $danger-light;
}

.bg-info-light {
	background: $info-light;
}

.icon-box {
	position: relative;
	display: inline-block;
	text-align: center;

	&.icon-box-md {
		height: 1.75rem;
		width: 1.75rem;
		line-height: 1.55rem;
		border-radius: 4px;
	}

	&.icon-danger {
		background: rgba(255, 46, 46, 0.2);
	}
}

.apexcharts-tooltip.apexcharts-theme-light {
	background-color: rgba(0, 0, 0, 0.9) !important;
	border: 0 !important;
	box-shadow: 0 10px 20px rgba(197, 202, 220, 0.1);
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
	background: transparent !important;
	border-bottom: 0 !important;
	padding: 6px 10px 0;
	margin-bottom: 0;
	color: #fff;
	text-transform: capitalize;
}

.apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip-series-group:last-child {
	padding: 0 10px 4px;
	color: #fff;
}

.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-z-value {
	margin-left: 5px;
	color: var(--primary);
}

.apexcharts-tooltip .apexcharts-tooltip-marker {
	width: 8px;
	height: 8px;
	margin-right: 5px;
	background-color: #fff !important;
}

// pricing


.ds-prise {
	margin-top: 28px;

	li {
		font-size: 0.938rem;
		font-weight: 400;
		color: var(--text-dark);
	}
}

.d-team {
	margin-top: 75px;
}

.upgrade {
	position: relative;
	overflow: hidden;

	&:after {
		position: absolute;
		content: "";
		height: 200px;
		width: 200px;
		background-color: var(--rgba-primary-1);
		border-radius: 50%;
		bottom: -44px;
		#{$dz-pos-right}: -44px;
	}

	@include custommq($max: 100rem) {
		img {
			width: 100%;
		}
	}

}

.m-prise {
	justify-content: center;
	border-bottom: 1px solid var(--border);
	padding: 12px 0;
	margin-bottom: 20px;

	h4 {
		font-size: 30px;
		margin-bottom: 0;
		font-weight: 700;
		color: var(--primary);
	}
}

.prise-list {
	li {

		padding-top: 8px;
		padding-bottom: 8px;
		padding-#{$dz-pos-right}: 0;
		padding-#{$dz-pos-left}: 40px;

		text-align: start;

		position: relative;

		&:after {
			content: "\f00c";
			font-family: 'Font Awesome 6 Free';
			font-weight: 700;
			font-size: 12px;
			width: 20px;
			height: 20px;
			background: var(--rgba-primary-1);
			display: block;
			position: absolute;
			#{$dz-pos-left}: 0;
			color: var(--primary);
			border-radius: 35px;
			text-align: center;
			top: 10px;
			line-height: 20px;
		}
	}

	.disable {

		text-decoration: line-through;

		&::after {
			content: "\f00d" !important;
			color: $danger !important;
			border: 1px solid var(--border);
			background: rgba($danger, 0.1) !important;
		}
	}
}

.card-carousel-dots {
	.owl-dots {
		position: absolute;
		right: 0;
		top: 0;

		.owl-dot {
			width: 9px;
			height: 9px;
			border-radius: 50%;
			background-color: var(--text-dark);
			opacity: 0.2;
			@include transitionMedium;
			display: inline-block;
			margin: 0 4px;

			&.active {
				transform: scale(1.3);
				opacity: 1;
			}
		}
	}
	.owl-nav{
		display: none;
	}
}
.upgrad-plan {
	min-height: 530px;
	&:hover {
		box-shadow: 0px 12px 56px 0px #061C3D1F;

		a {
			background-color: var(--primary);
			color: $white;

		}
	}
}

/* Companies */
.companies-inner {
	padding-bottom: 50px;
	.companies-media {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		height: 100%;
		overflow: hidden;
		width: 100%;
		float: right;
		min-height: 60px;
		border-radius: 10px;

		&:hover {
			img {
				-webkit-animation: toBottomFromTop 0.5s forwards;
				-moz-animation: toBottomFromTop 0.5s forwards;
				animation: toBottomFromTop 0.5s forwards;
			}
		}
	}
}

@include respond ("tab-port") {
	.companies-inner {
		display: unset;

		.section-head.style-2 {
			display: block;
			max-width: 450px;
			margin: auto auto 20px;
			text-align: center;
		}
	}
}

@include respond ("phone-land") {

	.companies-inner {
		justify-content: center;
	}

}

.pricing-title {
	text-align: center;
	max-width: 509px;
	margin: 30px auto;

}

@keyframes toBottomFromTop {
	49% {
		-webkit-transform: translateY(-50%);
	}

	50% {
		opacity: 0;
		-webkit-transform: translateY(10%);

	}

	51% {
		opacity: 1;


	}
}

.bootstrap-select .btn {
	line-height: 1.5 !important;
}

/* Companies End*/

.range-slider {
	&.style-1 {
		.noUi-horizontal {
			height: 4px;

			.noUi-handle {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				border: 2px solid var(--primary);
				background-color: var(--body-bg);
				box-shadow: none;
				top: -8px;
				right: 0;
				cursor: pointer;

				&:before,
				&:after {
					content: none;
				}

				.noUi-tooltip {
					display: none;
					border: 0px;
					background: var(--primary);
					color: rgb(255, 255, 255);
					border-radius: 4px;
					font-size: 13px;
					bottom: -35px;
					font-weight: 600;
					padding: 2px 5px;

					&:after {
						content: "";
						position: absolute;
						background-color: inherit;
						width: 10px;
						height: 10px;
						top: 4px;
						margin-#{$dz-pos-left}: -4px;
						#{$dz-pos-left}: 50%;
						transform: rotate(45deg) translate(-50%, -50%);
					}
				}
			}
		}

		.noUi-target {
			background: #D7D7D7;
			border-radius: 0;
			border: 0;
			box-shadow: none;

			.noUi-connect {
				background: var(--primary);
			}
		}

		span {
			margin-#{$dz-pos-right}: 15px;
		}

		.example-val {
			font-size: 14px;
			color: var(--text-dark);
		}
	}
}


// folder

.dz-folder-bx,
.quick-bx-inner {
	background-color: var(--rgba-primary-1);
	border-radius: $radius;
	padding: 10px 15px;
}

.quick-bx {
	border-top: 1px dashed var(--border);
	margin-top: 30px;
	padding-top: 20px;

	.quick-bx-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

///
.redia-date {
	h4 {
		font-size: 20px;
		color: #222B40;
		font-weight: 600;
	}

	p {
		font-size: 15px;
		width: 11rem;
		margin: auto;
	}
}

.blance {
	h4 {
		font-size: 24px;
		font-weight: 600;
	}
}

.saller {
	background-image: url(../images/sellpattern.png);
	background-position: bottom;

	.seller-slider {
		position: relative;



		&::after {
			position: absolute;
			content: "";
			bottom: 0;
			left: 0;
			height: 1px;
			left: -20px;
			width: 260px;
			height: 1px;
			//background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 97%,rgba(255,255,255,1) 100%);
			background: rgba(0, 166, 255, 0.2);
		}
	}
}

.gallery-grid .grid-item {
	padding: 0;
	border-radius: 0;
}