.page-head {

	h1,
	h2,
	h3 {
		font-weight: 600;
		line-height: 1.35;
	}
}

.author-profile {
	text-align: center;

	.card-body {
		padding: 0;
	}

	.author-media {
		position: relative;
		margin-#{$ic-pos-left}: auto;
		margin-#{$ic-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;
		#{$ic-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;
			#{$ic-pos-left}: 0;
			height: 100%;
		}
	}
}

.ic-chart-card {
	.chart-offset {
		margin-top: -25px;
	}
}

.ic-blog-bx {
	.ic-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;
}

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

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

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

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


			}


		}
	}
}

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

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

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

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


	}


}

.ic-blog-grid {

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

	}

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

.ic-meta {
	ul {
		li {
			display: inline-block;
			position: relative;
			font-size: 14px;
			font-weight: 400;
			margin-right: 15px;

			&:not(:last-child)::after {
				content: "";
				height: 6px;
				width: 6px;
				position: absolute;
				right: -13px;
				top: 50%;
				border-radius: 50%;
				background-color: var(--text);
				transform: translate(0%, -50%);
			}


		}

	}
}

.ic-chart-card {
	.data-value {
		font-size: 40px;
		color: #738293;
	}
}

// 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-profile {
	position: relative;
	padding-#{$ic-pos-left}: 1.875rem;
	@include transitionMedium;

	.nav-link {
		position: relative;
		border-radius: $radius;
		padding: 0.1875rem;
		background-color: var(--primary);
		padding: 5px !important;
		padding-right: 11px !important;

		img {
			height: 40px;
			width: 40px;
			border-radius: $radius;

			@include respond('laptop') {
				height: 2.1875rem;
				width: 2.1875rem;
			}
		}

		@include respond ('phone') {
			padding: 3px !important;
			padding-right: 3px !important;
		}
	}

	.header-info {
		span {
			color: white;
		}
	}

	.profile-detail {
		@include transitionMedium;
		top: 65px;
		position: absolute;
		background-color: var(--primary);
		width: 375px;
		right: 0;
		border-radius: 60px 0px 6px 6px;
		border: 0;
		display: none;
		height: auto;

		.profile-media {
			.icon-box {
				height: 40px;
				width: 40px;
				background: rebeccapurple;
				text-align: center;
				line-height: 40px;
				border-radius: 6px;
				background-color: rgba(255, 255, 255, 0.1);
			}

			h4,
			p {
				color: white;
			}

			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			padding: 1.25rem;

		}

		@include respond ('phone-land') {
			top: 53px;
			width: 330px;
		}

	}

	&:hover {
		.profile-detail {
			display: block;
		}

		.nav-link {
			border-radius: $radius $radius 0 0;
		}
	}
}

.process1 {
	h2 {
		font-size: 2rem;
		font-weight: 700;
	}
}

.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-#{$ic-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-#{$ic-pos-right}-color: var(--primary);
	/* Set arrow color to red */
	box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.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;
	}
}

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

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

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

		}
	}
}

/* Companies End*/
.avtar-list {
	display: flex;
	align-items: center;

	li {
		display: inline-block;
		position: relative;

		&:not(:first-child) {
			margin-left: -15px;
		}

		&:hover {
			z-index: 1;
			transform: scale(1.1);
		}
	}
}

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

	@include custommq ($max: 100rem) {
		height: 35px;
		width: 35px;
		min-width: 35px;
	}

	&.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: var(--primary-light);
}

.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;
}

.bg-purple-light {
	background: lighten($purple, 45%);
}

.bg-cream-light {
	background: lighten($cream, 10%);
}

.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;
		#{$ic-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-#{$ic-pos-right}: 0;
		padding-#{$ic-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;
			#{$ic-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: #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-#{$ic-pos-left}: -4px;
						#{$ic-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-#{$ic-pos-right}: 15px;
		}

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


// folder

.ic-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;
	background-size: cover;

	.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);
		}
	}
}

.product {
	height: 100%;

	img {
		width: 100%;
		margin-bottom: 20px;
	}

	.product-imfo {
		span {
			font-size: 11px;
			font-weight: 500;
		}

		h6 {
			margin-bottom: 0;
		}
	}
}

.product-details {
	margin-top: 1.5rem;

	p {
		width: 20rem;
		color: white;
	}

	h4,
	span {
		color: white;
	}
}

.ttl-project {
	display: flex;
	justify-content: space-around;
	text-align: center;
	border-top: 1px solid var(--border);
	padding: 15px 0;
	overflow: hidden;

	.pr-data {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: -20px;
			right: -50px;
			width: 1px;
			height: 100px;
			background: rgba(0, 0, 0, 0.1);
		}
	}

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

.mix-chart-tab {
	.nav-item {
		.nav-link {
			padding: 8px 12px;
			border: 1px solid var(--border);
			margin: 0 4px;
			background-color: #F9F9FB;
			color: var(--secondary);
			font-weight: 500;
			box-shadow: none;
			border-radius: $radius-sm;
			font-size: 13px;

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

			}
		}

	}

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

.blance-media {
	h4 {
		font-size: 24px;
		color: #738293;
		display: flex;
		align-items: center;

		.badge {
			margin-left: 10px;
		}
	}
}

#chartBarRunning {
	padding: 1.25rem;

	.apexcharts-text tspan {
		stroke: var(--secondary);
		font-size: 13px;
	}
}

.search-area {
	&.style-1 {
		width: 200px;

		.input-group-text,
		.form-control {
			height: 32px;
			background-color: #F9F9FB;
			border-radius: 4px !important;
		}

		.input-group-text {
			line-height: 8px;
			border-right: 0;
			padding: 0;

			i {
				color: var(--secondary);
			}
		}

		.form-control {
			border-left: 0;
			padding-left: 0;

			&:focus {
				border-color: var(--border);
			}

			&::placeholder {
				color: var(--secondary);
			}
		}

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

.transaction {
	a {
		border-color: var(--border);
		background-color: #F9F9FB;
		padding: 0.3rem 0.85rem;
		margin-left: 4px;
		color: var(--secondary);
		border-radius: $radius-sm;

		svg {
			stroke: var(--secondary);
		}

		&:hover {
			border-color: var(--border);
			background-color: #F9F9FB;
		}

		@include respond ('phone') {
			margin-top: 0.6rem;
		}


	}
}

.custome-d {
	height: 25px;
	width: 25px;
	background-color: #F9F9FB;
	text-align: center;
	border-radius: $radius-sm;
	line-height: 23px;
}

.transaction-tbl {
	&.dataTable {
		border-spacing: 0 0.5em;

		thead {
			tr {
				th {
					background-color: #F9F9FB;
					padding: 0.5rem 0.9375rem;
					color: #738293;
					font-size: 13px;
					font-weight: 400;
				}
			}
		}

		tbody {
			tr {
				td {
					font-size: 13px;
					font-weight: 400;
					padding: 0.5rem 0.9375rem;
					white-space: nowrap;

					&:last-child {
						text-align: -webkit-center;
					}
				}
			}
		}
	}

	&.dataTable tbody td,
	&.dataTable thead th {
		border: 1px solid var(--border);
		border-width: 1px 0 1px 0;

		&:first-child {
			border-width: 1px 0 1px 1px;
			border-radius: $radius-sm 0 0 $radius-sm ;

		}

		&:last-child {
			border-width: 1px 1px 1px 0;
			border-radius: 0 $radius-sm $radius-sm 0;

		}
	}
}

.swiper-center,
.swiper-lr {
	margin: 0 -20px;
	padding: 0 20px;

}

.dz-scroll {
	overflow-y: scroll;
	overflow-x: hidden;
}

.active-map-main {
	position: relative;

	&:after {
		content: "";
		position: absolute;
		top: -91px;
		right: 0;
		height: 417px;
		background: #E6E6E6;
		width: 1px;
	}

	.active-map {
		height: 17rem !important;
	}
}

.active-country {
	margin-top: -65px;
	position: relative;
	height: 350px;
	padding-right: 1.25rem;

	.country-list {
		padding: 9px 0;
		display: flex;
		border-bottom: 1px solid var(--border);

		.progress-box {
			flex: 1;

			.c-name {
				color: var(--secondary);
				white-space: nowrap;
			}
		}

		img {
			margin-right: 12px;
			border-radius: 50%;
		}

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

	&:after {
		content: "";
		position: absolute;
		top: -50px;
		left: -10px;
		height: 500px;
		background: $border;
		width: 1px;
	}

	@include respond ('tab-land') {
		margin-top: 0;
	}

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

.progress-box {
	.progress {
		height: 5px;
	}
}

.best-selling-slider {
	.card {
		&:hover {
			border-color: var(--primary);
		}
	}
}

.media-box {
	padding: 1.25rem;
	position: relative;

	.icon-box-lg {
		height: 90px;
		width: 105px;
		display: block;
		line-height: 56px;
		text-align: center;
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: $radius;

		p {
			color: white;
			margin-bottom: 0;
		}

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

	&::after {
		position: absolute;
		top: 50px;
		left: 60px;
		content: "";
		height: 133px;
		width: 133px;
		filter: blur(70px);
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 50%;
	}
}

//Profile
.profile-overview-wide {
	margin-left: -1.875rem;
	margin-right: -1.875rem;
	margin-top: -1.875rem;
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-radius: 0;
	height: auto;
	border-bottom: 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: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		padding: 0;
	}
}

.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;
		padding: 0;
	}

	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;
	}
}

.status-select {
	width: auto !important;
	border: 0;

	.btn {
		padding: 0.325rem 0.6rem;
		font-size: 12px;
		font-weight: 500;
		border: 0 !important;
		border-radius: $radius;
	}
}

.normal-select {
	.btn {
		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;
	}
}

.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: $radius-sm;
	}

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

.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%;
		}
	}
}

.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;
	}
}

.rtl .card-carousel {
	direction: ltr;
}

.card-video,
.card-audio {
	iframe {
		height: 425px;

		@include respond("laptop") {
			height: 310px;
		}

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

.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;
			}
		}
	}
}

.active-projects {
	thead {
		tr {
			th {
				font-size: 13px;
				padding: 0.625rem 1.25rem !important;
				font-weight: 500;
				background-color: var(--rgba-primary-1) !important;
				border: 0;
				vertical-align: middle;
				color: var(--primary);

				&:last-child {
					text-align: right;
				}

				&:first-child {
					padding-right: 0;

					@include respond ('phone') {
						padding-left: 1.3rem !important;
					}
				}
			}
		}
	}

	tbody {
		tr {
			td {
				font-size: 13px;
				font-weight: 400;
				padding: 0.625rem 1.25rem;
				border-bottom: 1px solid rgba(0, 0, 0, 0.10);

				&:last-child {
					text-align: right;
				}

				&:first-child {
					padding-right: 0;
					padding-left: 1rem;

					@include respond ('phone') {
						padding-left: 1.4rem;
					}
				}
			}
		}
	}

	.tbl-caption {
		padding: 20px 16px;
	}

	.dt-buttons {
		float: unset;

		.dt-button {
			position: absolute;
			top: -44px;
			right: 14px;
			font-size: 13px !important;
			color: var(--primary);
			font-weight: 400;
			padding: 6px 12px;
			border-radius: $radius-sm;
			background: var(--rgba-primary-1) !important;

			@include respond ('phone') {
				right: -26rem;
			}

			&:hover {
				background: var(--primary) !important;
				color: $white;
			}
		}
	}

	.dataTables_info {
		padding-left: 20px;
		font-size: 12px;
		padding-top: 1rem;
		color: var(--text-dark);

		@include respond ('phone') {
			text-align: center;
		}
	}

	.dataTables_wrapper .dataTables_paginate {
		padding-top: 1rem;
		padding-bottom: 0;

		@include respond ('phone') {
			justify-content: center !important;
		}
	}

	&.selling-product {
		tbody {
			tr {
				td {
					border-bottom: 1px solid var(--border);

				}
			}

		}
	}

	&.style-1 {
		.tbl-caption {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-flow: wrap;
		}

		.dt-buttons {
			.dt-button {
				top: -52px;
				right: 320px;
			}

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

		}

		tbody {
			tr {
				td {
					border-bottom: 1px solid var(--border);

				}
			}

		}

		.heading {
			@include respond ('phone') {
				margin-bottom: 10px !important;
			}
		}
	}

	&.attendance-tbl {
		.dt-buttons {
			.dt-button {
				right: 180px;
			}
		}

		thead {
			span {
				font-size: 13px;
				margin-bottom: 0;
				color: var(--secondary);

			}

			p {
				font-size: 10px;
				color: var(--primary);
				margin-bottom: 0;
			}

			tr {
				th {
					&:not(:first-child) {
						padding: 15px 5px;
					}

					vertical-align: middle;

					&:last-child {
						padding-left: 25px;
					}
				}
			}
		}

		tbody {
			tr {
				td {
					&:not(:first-child) {
						padding: 15px 7px;
					}

					color:var(--secondary);
					padding: 0.375rem 1.25rem;

					i {
						font-weight: 900;
					}

					&:last-child {
						padding-left: 25px;
					}
				}
			}
		}
	}

	&.task-table {
		tbody {
			td {
				border-bottom: 1px solid var(--border);
			}
		}
	}

	&.manage-client {
		tbody {
			tr {
				td {
					border-bottom: 1px solid var(--border);
					padding: 1.125rem 1.25rem;

					&:last-child {
						text-align: right;
					}
				}

			}
		}

		thead {
			tr {
				th {
					&:last-child {
						text-align: right;
					}
				}

			}
		}
	}
}

@include respond ('phone') {
	.ic-theme-mode {
		display: none;
	}
}
.light.btn-primary:hover,
.light.btn-danger:hover{
	svg{
		path{
			stroke:white;
		}
	}
}