/*Apex Chart*/
.apexcharts-legend {
	.apexcharts-legend-marker {
		margin-right: 0.625rem;
	}
}

.apexcharts-toolbar {
	max-width: inherit !important;

	.apexcharts-zoom-icon,
	.apexcharts-zoomin-icon,
	.apexcharts-zoomout-icon,
	.apexcharts-reset-icon,
	.apexcharts-pan-icon,
	.apexcharts-selection-icon,
	.apexcharts-menu-icon,
	.apexcharts-toolbar-custom-icon {
		height: auto;
		width: auto;
		color: $black_2;
		@include transform(scale(1));
		margin-left: 1rem;
		margin-right: 0;
	}

	svg {
		fill: none !important;
		height: 18px;
		width: 18px;
	}

	.apexcharts-menu {
		@extend .dropdown-menu;
		min-width: 10rem;
		padding: 0.5rem 0;
		margin: 0.125rem 0 0;

		.apexcharts-menu-item {
			padding: 0.25rem 1.5rem;
			text-align: left;
			color: $black_2;
			font-size: 1rem;

			&:hover {
				background-color: $gray_light_5;
			}
		}
	}
}

.apexcharts-canvas {

	.apexcharts-xaxistooltip,
	.apexcharts-yaxistooltip {
		font-size: 0.75rem;
		background: $black_2;
		color: $white;
		border-radius: 0.5rem;
		max-width: 200px;
		padding: 0.25rem 0.5rem;
		text-align: center;

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

	.apexcharts-tooltip.apexcharts-theme-dark {
		border-radius: 0.5rem;
		max-width: 200px;
		text-align: center;
		font-size: 0.75rem;
	}

	.apexcharts-tooltip.apexcharts-theme-light {
		border-radius: 0.5rem;
		font-size: 1rem;
		color: $gray_dark_3;
		border: none;
		box-shadow: 0 0px 10px 5px rgba(0, 0, 0, 0.1);

		.apexcharts-tooltip-title {
			color: $white;
			background-color: $primary;
			border-bottom: none;
			padding: 0.65rem 0.75rem;
			border-radius: 0.5rem 0.5rem 0 0;
		}

		.apexcharts-tooltip-series-group {
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}
	}
}

#chart_year,
#chart_quarter {
	width: 96%;
	max-width: 48%;
	box-shadow: none;
	padding-left: 0;
	padding-top: 1.25rem;
	background: $white;
}

#chart_year {
	float: left;
	position: relative;
	@include transition(1s ease transform);
	z-index: 3;
}

#chart_year.chart_quarter-activated {
	transform: translateX(0);
	@include transition(1s ease transform);
}

#chart_quarter {
	float: left;
	position: relative;
	z-index: -2;
	@include transition(1s ease transform);
}

#chart_quarter.active {
	@include transition(1.1s ease-in-out transform);
	@include transform(translateX(0));
	z-index: 1;
}

.apexcharts-datalabel-value {
	fill: $black_2 !important;
}

@media screen and (min-width: 480px) {
	#chart_year {
		@include transform(translateX(50%));
	}

	#chart_quarter {
		@include transform(translateX(-50%));
	}
}

/*charts*/
.hk-charts-pg {
	.hk-container-mwlg .card {
		.card-footer {
			@include transition(all 0.2s ease);
			min-height: 139px;
		}

		&:hover {
			.card-footer {
				background: $gray_light_5;
			}
		}
	}
}

/*Nestable*/
.dd-handle {
	@extend .form-control;
	font-weight: 500;
	margin: 0 0 0.375rem;
	padding: 0.5rem 1rem;
	background: $white;
	color: $black_2;
	height: 37px;
	border-width: 1px;
	border-color: $gray_light_3;

	&:hover,
	&:focus,
	&:active {
		color: $black_2;
		background: $gray_light_5;
	}
}

.dd-item>button {
	margin: 0;
	height: 37px;
	font-size: 1.5rem;
	width: 42px;
	color: $gray;
	outline: none;

	&.dd-expand:before,
	&.dd-collapse:before {
		font-family: "Line Awesome Free";
		font-weight: 900;
		line-height: 1;
	}

	&.dd-expand::before {
		content: "\f067";
	}

	&.dd-collapse::before {
		content: "\f068";
	}

	&:hover,
	&:focus,
	&:active {
		outline: none;
	}
}

.dd-placeholder {
	background: transparent;
	border-color: $gray_light_3;
}

.dd3-content {
	display: block;
	width: 100%;
	border-radius: 0.5rem;
	font-weight: 500;
	margin: 0 0 0.375rem;
	font-size: 0.875rem;
	padding: 0.5rem 1rem 0.5rem 4rem;
	background: $white;
	color: $black_2;
	border: 1px solid $gray_light_3;

	&:hover,
	&:focus,
	&:active {
		color: $black_2;
		background: $gray_light_5;
	}
}

.dd-dragel>.dd3-item>.dd3-content {
	margin: 0;
}

.dd3-item>button {
	margin-left: 2.625rem;
}

.dd3-handle {
	position: absolute;
	margin: 0;
	left: 0;
	top: 0;
	cursor: grab;
	color: $gray;
	width: 42px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	padding: 1.125rem;
	border-color: $gray_light_3;
	border-radius: 0.5rem 0 0 0.5rem;

	&:before {
		font-family: "Line Awesome Free";
		font-weight: 900;
		color: $gray;
		content: "\f2a1";
		font-size: 1.625rem;
		color: $gray_light_3;
		display: block;
		position: absolute;
		left: 0;
		top: 8px;
		width: 100%;
		text-align: center;
		text-indent: 0;
	}
}

/*Treeview*/
.jstree-default {

	.jstree-clicked,
	.jstree-hovered {
		background: none;
		box-shadow: none;
		color: $blue;
	}
}

/*Modals*/
.modal-content,
.modal-header,
.modal-footer {
	border-color: $gray_light_3;
}

.modal-content {
	border-radius: 0.5rem;
	overflow: hidden;
	border: none;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.modal-header {
	border-top-left-radius: calc(0.5rem - 1px);
	border-top-right-radius: calc(0.5rem - 1px);
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	&.header-wth-bg {
		background: $gray_light_5;
		border-bottom: 0;
	}

	&.header-wth-bg-inv {
		background: $primary;
		border-bottom: 0;

		.modal-title {
			color: $white;
		}
	}
}

.modal-body {
	>.btn-close {
		position: absolute;
		right: 1.5rem;
		top: 1.25rem;

		~ :is(h1, h2, h3, h4, h5, h6) {
			padding-right: 1.5rem;
			margin-top: 0.5rem;
		}
	}
}

// .modal-footer {
// 	border-bottom-right-radius: calc(0.5rem- 1px);
// 	border-bottom-left-radius: calc(0.5rem - 1px);
// }

.modal-backdrop {
	background-color: $black_2;
}

/*Close*/
.btn-close {
	color: $black_2;
	opacity: 0.6;
	outline: none;
	height: auto;
	width: auto;
	text-shadow: none;
	font: normal normal normal 0/1 "Material-Design-Iconic-Font";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&:before {
		content: "\f136";
		font-size: 1rem;
	}

	&:focus {
		box-shadow: none;
	}

	&:not(:disabled):not(.disabled):not(.btn-close-white):focus,
	&:not(:disabled):not(.disabled):not(.btn-close-white):hover {
		color: $gray_dark_3;
		opacity: 1;
	}

	span {
		display: none;
	}
}

.close-over {
	.btn-close {
		height: 22px;
		width: 22px;
		background: $gray_dark_3;
		color: $white !important;
		border-radius: 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		cursor: pointer;
		position: absolute;
		right: -11px;
		top: -11px;
		opacity: 1;

		&:before {
			content: "\f136";
			font-size: 1rem;
			line-height: 0;
		}

		&:hover {
			background: $black_2;
		}
	}
}

/*Sweet-alert*/
.swal2-container {
	.swal2-content {
		color: $gray_dark_3;
	}

	.swal2-title {
		color: $black_2;
	}

	.swal2-popup {
		border-radius: 0.5rem;

		.swal2-validation-message {
			background: transparent;
			align-items: start;
			border: none;
			color: $red;

			&:before {
				content: "\ED77";
				font-family: remixicon !important;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				background: transparent;
				color: $red;
				min-width: auto;
			}
		}

		.swal2-image {
			border-radius: 2rem;
		}

		.swal2-progress-steps {
			.swal2-progress-step {
				background: $green;

				&.swal2-active-progress-step {
					background: $blue;
				}

				&.swal2-active-progress-step~.swal2-progress-step {
					background: $gray_light_3;
				}
			}

			.swal2-progress-step-line {
				height: 0.2rem;
				background: $blue;
			}
		}

		.swal2-close {
			outline: none;
		}
	}

	.swal2-title {
		font-size: 1.1rem;

		span {
			display: -ms-flexbox;
			display: flex;
		}
	}

	&.swal2-has-header {
		.swal2-popup {
			.swal2-header {
				padding-right: 1rem;
				padding-left: 1rem;
				padding-bottom: 1rem;
				margin-left: -1rem;
				margin-right: -1rem;
				margin-bottom: 1rem;
				border-bottom: 1px solid $gray_light_3;
			}
		}
	}

	&.swal2-has-footer {
		.swal2-popup.swal2-modal {
			padding-bottom: 0;

			.swal2-footer {
				margin-left: -1rem;
				margin-right: -1rem;
				border-top: 1px solid $gray_light_3;
			}
		}
	}

	&.swal2-has-bg {
		.swal2-popup {
			.swal2-html-container {
				background: $gray_light_5;
				margin: 0;
				padding: 2rem 1rem;
				border-radius: 0.5rem 0.5rem 0 0;
			}

			.swal2-actions {
				width: 100% !important;

				.btn {
					flex: 1;
					border: 0;
					padding: 0;

					&:hover,
					&:focus {
						background: transparent;
						color: $gray;
					}
				}
			}
		}
	}

	// .swal2-actions{
	// 	width: "100%";
	// }
}

.swal2-shown {
	padding-right: 0 !important;
}

/*Notification*/
.alert {
	color: $black_2;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;

	.alert-link {
		font-weight: normal;
		color: inherit;
		text-decoration: underline;
	}

	&.alert-dismissible .btn-close {
		padding: 0.9rem 1rem;
		color: inherit;

		&:before {
			position: relative;
			top: -2px;
		}

		&:hover {
			opacity: 1;
			color: inherit;
		}
	}

	&.alert-primary {
		color: $primary;
		background: $primary_light_5;
		@include border-opacity($primary_light_4, 0.3);
	}

	&.alert-success {
		color: $success;
		background: $success_light_5;
		@include border-opacity($success_light_4, 0.3);
	}

	&.alert-info {
		color: $info_dark_1;
		background: $info_light_5;
		@include border-opacity($info_light_4, 0.3);
	}

	&.alert-danger {
		color: $danger;
		background: $danger_light_5;
		@include border-opacity($danger_light_4, 0.3);
	}

	&.alert-warning {
		color: $warning_dark_2;
		background: $warning_light_5;
		@include border-opacity($warning_light_4, 0.3);
	}

	&.alert-secondary {
		color: $secondary;
		background: $secondary_light_5;
		@include border-opacity($secondary_light_4, 0.3);
	}

	&.alert-light {
		color: $gray_dark_4;
		background: $gray_light_5;
		@include border-opacity($gray_light_4, 1);
	}

	&.alert-dark {
		color: $white;
		background: $black_2;

		&.alert-dismissible {

			.btn-close:not(:disabled):not(.disabled):focus,
			.btn-close:not(:disabled):not(.disabled):hover {
				color: $white;
				text-decoration: none;
				opacity: 1;
			}
		}

		border-color: $black_2;
	}

	&.alert-inv {
		color: $white;

		&.alert-inv-primary {
			background: $primary;
			color: $primary_light_5;

			&.alert-dismissible {

				.btn-close:not(:disabled):not(.disabled):focus,
				.btn-close:not(:disabled):not(.disabled):hover {
					color: $white;
					text-decoration: none;
					opacity: 1;
				}
			}
		}

		&.alert-inv-info {
			background: $info;
			color: $info_light_5;

			&.alert-dismissible {

				.btn-close:not(:disabled):not(.disabled):focus,
				.btn-close:not(:disabled):not(.disabled):hover {
					color: $white;
					text-decoration: none;
					opacity: 1;
				}
			}
		}

		&.alert-inv-success {
			background: $success;
			color: $success_light_5;

			&.alert-dismissible {

				.btn-close:not(:disabled):not(.disabled):focus,
				.btn-close:not(:disabled):not(.disabled):hover {
					color: $white;
					text-decoration: none;
					opacity: 1;
				}
			}
		}

		&.alert-inv-warning {
			background: $warning;
			color: $warning_light_5;

			&.alert-dismissible {

				.btn-close:not(:disabled):not(.disabled):focus,
				.btn-close:not(:disabled):not(.disabled):hover {
					color: $white;
					text-decoration: none;
					opacity: 1;
				}
			}
		}

		&.alert-inv-danger {
			background: $danger;
			color: $danger_light_5;

			&.alert-dismissible {

				.btn-close:not(:disabled):not(.disabled):focus,
				.btn-close:not(:disabled):not(.disabled):hover {
					color: $white;
					text-decoration: none;
					opacity: 1;
				}
			}
		}

		&.alert-inv-secondary {
			background: $secondary;
			color: $secondary_light_5;

			&.alert-dismissible {

				.btn-close:not(:disabled):not(.disabled):focus,
				.btn-close:not(:disabled):not(.disabled):hover {
					color: $white;
					text-decoration: none;
					opacity: 1;
				}
			}
		}
	}

	&.alert-border-primary {
		border-color: $primary;
		color: $primary;
	}

	&.alert-border-info {
		border-color: $info;
		color: $info;
	}

	&.alert-border-success {
		border-color: $success;
		color: $success;
	}

	&.alert-border-warning {
		border-color: $warning;
		color: $warning;
	}

	&.alert-border-danger {
		border-color: $danger;
		color: $danger;
	}

	&.alert-border-secondary {
		border-color: $secondary;
		color: $secondary;
	}

	&.alert-wth-icon {
		padding-left: 3.375rem;
		position: relative;

		.alert-icon-wrap {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			font-size: 1.5rem;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			height: 100%;
			width: 54px;
			left: 0;
			top: 0;
			position: absolute;
		}
	}

	&.alert-square {
		border-radius: 0;
	}
}

.alert-dismissible {
	padding-right: 3rem;
}

.jq-toast-wrap {
	width: 300px;

	.jq-toast-single {
		color: $black_2;
		border-radius: 0.5rem;
		margin: 0;
		border: none;
		background: $white;
		@extend .main-font;
		font-size: 0.875rem;
		line-height: 1.3;

		.jq-toast-loader {
			border-radius: 2px 2px 0 0;
			height: 2px;
		}

		a {
			color: inherit;
			text-decoration: underline;
			font-weight: inherit;
			border-bottom: none;
			padding-bottom: 0;
			font-size: inherit;
		}

		.close-jq-toast-single {
			font-size: 1.5rem;
			top: 0;
		}

		.jq-toast-heading {
			font-size: 1rem !important;
			color: inherit;
			font-weight: 500;
			@extend .main-font;
		}

		&.jq-toast-primary {
			background: $primary_light_5;
			color: $primary;
			border: 1px solid;
			@include border-opacity($primary_light_4, 0.3);
		}

		&.jq-toast-secondary {
			background: $secondary_light_5;
			color: $secondary;
			border: 1px solid;
			@include border-opacity($secondary_light_4, 0.3);
		}

		&.jq-toast-info {
			background: $info_light_5;
			color: $info;
			border: 1px solid;
			@include border-opacity($info_light_4, 0.3);
		}

		&.jq-toast-success {
			background: $success_light_5;
			color: $success;
			border: 1px solid;
			@include border-opacity($success_light_4, 0.3);
		}

		&.jq-toast-warning {
			background: $warning_light_5;
			color: $warning;
			border: 1px solid;
			@include border-opacity($warning_light_4, 0.3);
		}

		&.jq-toast-danger {
			background: $danger_light_5;
			color: $danger;
			border: 1px solid;
			@include border-opacity($danger_light_4, 0.3);
		}

		&.jq-toast-light {
			background: $gray_light_5;
			color: $gray_dark_4;
			border: 1px solid;
			@include border-opacity($gray_light_3, 1);
		}

		&.jq-toast-dark {
			background: $black_2;
			color: $white;
			border: 1px solid;
			@include border-opacity($black_1, 1);
		}

		&.jq-has-icon {
			padding: 0.75rem 1.5rem 0.875rem 2.75rem;

			.jq-toast-icon {
				position: absolute;
				font-size: 1rem;
				left: 11px;
				top: 14px;
			}
		}

		&.jq-toast-inv {
			color: $white;
			border: none;
			background: $black_2;

			&.jq-toast-inv-primary {
				background: $primary;
				color: $primary_light_5;
			}

			&.jq-toast-inv-danger {
				background: $danger;
				color: $danger_light_5;
			}

			&.jq-toast-inv-warning {
				background: $warning;
				color: $warning_light_5;
			}

			&.jq-toast-inv-info {
				background: $info;
				color: $info_light_5;
			}

			&.jq-toast-inv-success {
				background: $success;
				color: $success_light_5;
			}
		}
	}
}

.bottom-center-fullwidth {
	.jq-toast-wrap {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		bottom: 0 !important;

		.jq-toast-single {
			border-radius: 0;
		}
	}
}

.top-center-fullwidth {
	.jq-toast-wrap {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		top: 2px !important;

		.jq-toast-single {
			border-radius: 0;
		}
	}
}

@media (max-width: 576px) {
	.jq-toast-wrap {

		&.top-right,
		&.top-left,
		&.bottom-right,
		&.bottom-left {
			left: 0;
			right: 0;
			width: 100%;
		}
	}
}

/*Toast*/
.toast {
	border: none;
	border-radius: 0.5rem;
}

/*Bootstrap Notify*/
span[data-notify="icon"] {
	position: relative;
	top: 3px;
	line-height: 0;
	font-size: 1rem;
}

/*Tooltop*/
.tooltip {
	font-size: 0.75rem;
	font-family: var(--bs-body-font-family);
	inset: auto auto 0px 0px;
	position: absolute;

	.tooltip-inner {
		background: $black_2;
		border-radius: 0.5rem;
	}

	&.show {
		opacity: 1;
	}

	.tooltip-arrow {
		display: none;
	}
}

@media (max-width: 1024px) {
	.tooltip {
		display: none !important;
	}
}

/*Images*/
.img-thumbnail {
	border-color: $gray_light_3;
	border-radius: 0;
}

.img-background {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/*Icons*/
.font-icons-wrap {
	li {
		text-align: center;
		vertical-align: middle;
		padding: 1.875rem 0.625rem 1.875rem 0.625rem;
		height: 100px;
		width: 100px;
		margin: 0.625rem;
		min-height: 60px;
		border: solid 1px #eee;
		border-radius: 0.5rem;
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		cursor: pointer;

		a {
			color: $black_2;
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			font-size: 1.25rem;

			>i {
				font-size: 1.625rem;
				line-height: 20px;
			}

			span {
				display: inline-block;
				position: absolute;
				background-color: $blue;
				color: $white;
				padding: 0.25rem 0.5rem;
				font-size: 0.75rem;
				white-space: nowrap;
				top: 45px;
				left: 50%;
				min-width: 98px;
				display: none;
				border-radius: 0.25rem;
				@include transform(translateX(-50%));
			}
		}

		&:hover {
			background: $black_2;

			a {
				color: $white;

				span {
					display: block;
				}
			}
		}
	}
}

.feather {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.svg-icon {
	line-height: 0 !important;
}

.feather-icon {
	line-height: 0 !important;

	&.fe-x {
		>svg {
			height: 16px;
			width: 16px;
		}
	}

	&.fe-2x {
		>svg {
			height: 32px;
			width: 32px;
		}
	}
}

.feather-icon>svg,
.svg-icon>svg {
	height: 1em;
	width: 1em;
}

.flag-icon {
	height: 20px;
	width: 20px;
}

/*Carousel*/
.carousel-control-prev,
.carousel-control-next {
	opacity: 1;

	&:hover {

		.carousel-control-next-icon,
		.carousel-control-prev-icon {
			@include border-opacity($white, 1);
		}
	}
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
	height: 50px;
	width: 50px;
	border: 2px solid;
	@include border-opacity($white, 0.5);
	border-radius: 50%;
	background: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	font-size: 1.25rem;

	&:before {
		display: inline-block;
		font: normal normal normal 22px/1 "Material-Design-Iconic-Font";
		text-rendering: auto;
		padding-left: 0.25rem;
		// speak: none;
		text-transform: none;
		text-rendering: auto;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

.carousel-control-next-icon:before {
	content: "\f2fb";
}

.carousel-control-prev-icon:before {
	content: "\f2fa";
}

.custom-carousel-nav {
	.carousel-text-nav {
		position: static;
		color: $black_2;

		&:hover,
		&:focus {
			color: $black_2;
		}
	}

	.carousel-indicators {
		position: static;
	}
}

.carousel-indicators {
	bottom: 20px;

	li[data-bs-target] {
		width: 6px;
		height: 6px;
		margin-right: .25rem;
		margin-left: .25rem;
		border: 1px solid $white;
		border-radius: 50%;
		background: transparent;
		font-size: 0;

		&.active {
			@include background-opacity($gray_light_1, 1);
		}
	}

	&.dark-indicators {
		li {
			border-color: $black_2;

			&.active {
				@include background-opacity($black, 1);
			}
		}
	}

	&.theme-indicators {
		li {
			border-color: $primary;

			&.active {
				@include background-opacity($primary, 1);
			}
		}
	}
}

.carousel-caption {
	bottom: 30px;
}

.carousel-caption {
	bottom: 30px;
}

.swiper-carousel {
	.swiper-item {
		height: auto;
	}

	.swiper-content {
		background-size: cover;
	}

	.swiper-slide {
		margin-bottom: 20px;
	}

	.swiper-button-next,
	.swiper-button-prev {
		color: $white;
	}

	.swiper-pagination-bullet {
		opacity: 0.5;
		background: $black_2;
	}

	.swiper-pagination-bullet-active {
		opacity: 1;
		background: $black_2;
	}

	.swiper-horizontal>.swiper-pagination-bullets,
	.swiper-pagination-bullets.swiper-pagination-horizontal,
	.swiper-pagination-custom,
	.swiper-pagination-fraction {
		bottom: -5px;
	}
}

.owl-carousel {
	.item-video {
		height: auto;
	}

	.owl-video-tn {
		background-size: cover;
	}

	.owl-dots .owl-dot {
		span {
			width: 8px;
			height: 8px;
			margin: 0 0.25rem;
			background: transparent;
			border: 1px solid $black_2;
		}

		&:focus {
			outline: none;
		}

		&:hover {
			span {
				background: $black_2;
			}
		}

		&.active {
			span {
				background: $black_2;
			}
		}
	}

	&.light-owl-dots {
		.owl-dots .owl-dot {
			span {
				border: 1px solid $white;
			}

			&:focus {
				outline: none;
			}

			&:hover {
				span {
					background: $white;
				}
			}

			&.active {
				span {
					background: $white;
				}
			}
		}
	}

	&.theme-owl-dots {
		.owl-dots .owl-dot {
			span {
				border: 1px solid $primary;
			}

			&:focus {
				outline: none;
			}

			&:hover {
				span {
					background: $primary;
				}
			}

			&.active {
				span {
					background: $primary;
				}
			}
		}
	}

	.owl-video-play-icon {
		@include background-opacity($white, 0.8);
		left: 20px;
		bottom: 20px;
		margin: 0;
		height: 35px;
		width: 35px;
		border-radius: 50%;
		top: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		color: $blue;

		&:before {
			display: inline-block;
			font: normal normal normal 22px/1 "Material-Design-Iconic-Font";
			text-rendering: auto;
			padding-left: 0.25rem;
			// speak: none;
			text-transform: none;
			text-rendering: auto;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			content: "\f3aa";
		}

		&:hover {
			@include transform(scale(1.1, 1.1));
		}
	}

	&.dots-on-item {
		.owl-dots {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 15px;
		}
	}
}

@media (max-width: 991px) {

	.carousel-control-next-icon,
	.carousel-control-prev-icon {
		height: 30px;
		width: 30px;
		font-size: 1rem;
	}
}

/*Twitter slider*/
.twitter-slider-wrap {
	.twitter-icon {
		font-size: 1.875rem;
		color: $white;
	}

	.swiper-carousel {
		text-align: center;

		.user,
		.interact {
			display: none;
		}

		.tweet {
			font-size: 1rem;
			color: $white;
			margin-bottom: 1.875rem;

			>a {
				color: $white;
			}
		}

		.timePosted {
			>a {
				font-size: 0.75rem;
				color: $white;
			}
		}
	}
}

.product-detail-slider {

	// react-responsive carousel css added for react version
	.carousel {
		border-radius: 0.5rem;
		overflow: hidden;
		@include boxshadow($black);

		.thumbs-wrapper {
			margin: 0;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			justify-content: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;

			.thumb {
				// border: 0 !important;
				// display: block;
				box-shadow: 0 0.25rem 0.3125rem rgba(47, 52, 58, 0.1) !important;
				height: 52px;
				max-width: 100px !important;
				width: auto !important;
				border-radius: 0.5rem;
				margin: 0 0.625rem;
				margin-top: 1rem;
				border: 1px solid transparent;
				-webkit-transition: all 0.2s ease;
				-moz-transition: all 0.2s ease;
				transition: all 0.2s ease;
				overflow: hidden;
				padding: 0;

				&.selected {
					border: 1px solid $blue;
				}

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

			.thumbs {
				display: flex;
				padding: 0;
				margin: 0;
			}
		}
	}

	.carousel-root {
		.carousel {
			&:last-child {
				box-shadow: none !important;
			}
		}
	}
}

/*Color Pickr*/
.form-control-color {
	padding: 0.375rem;
}

.colorpicker-input-addon {
	padding: 0;

	i {
		height: 100%;
		width: 100%;
	}

	.form-control-color {
		border-color: transparent !important;
	}
}

.pickr {
	.pcr-app {
		z-index: 1035;

		.pcr-interaction {
			input {
				padding: 0.3em 0.5em;
				letter-spacing: inherit;
				border-radius: 0.25rem;
				background: $gray_light_5;
				color: $gray_light_1;
			}

			.pcr-save {
				background: $blue;
				color: $white;
			}

			.pcr-clear {
				background: $red;
				color: $white;
			}

			.pcr-type.active {
				background: $blue_light_5;
				color: $blue;
			}

			.pcr-result {
				color: $black_2;
				border: 1px solid $gray_light_3;
				background: $white;
				border-radius: 0.5rem;

				&:focus {
					box-shadow: none;
					border-color: $blue;
				}
			}
		}
	}

	.pcr-button {
		width: 100%;
		border-radius: 0;
	}
}

@media (max-width: 414px) {
	.pcr-app {
		max-width: 310px;
	}
}

/*Range Slider*/
.irs-line {
	height: 7px;
	background: $gray_light_5;
	border: none;
}

.irs-bar {
	height: 7px;
	border: none;
	background: $primary;
}

.irs-slider {
	top: 24px;
	width: 25px;
	height: 25px;
	border: none;
	background: $primary;
	border-radius: 50%;

	&.state_hover,
	&:hover {
		background: $primary;
	}
}

.irs-bar-edge {
	height: 7px;
	top: 33px;
	width: 14px;
	border: none;
	background: $primary;
}

.irs-from,
.irs-to,
.irs-single {
	font-size: 0.75rem;
	font-weight: 500;
	background: $black_2;
	line-height: 1.5;
	padding: 0.0625rem 0.5rem;
	border-radius: 0.5rem;
}

.irs-min,
.irs-max {
	color: inherit;
	font-size: 0.75rem;
	background: none;
	line-height: 1.5;
	border-radius: 0.25rem;
	-moz-border-radius: 0.25rem;
	font-weight: 500;
}

.irs.irs-sm {
	.irs-line {
		height: 3px;
	}

	.irs-bar {
		height: 3px;
	}

	.irs-slider {
		top: 25px;
		width: 18px;
		height: 18px;
	}

	.irs-bar-edge {
		height: 3px;
	}
}

/*Daterangepicker*/
.daterangepicker {
	font-family: inherit;
	border-color: $gray_light_3;

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

	.drp-buttons .btn {
		margin-left: .5rem;
		padding: .25rem .5rem;
		font-size: .875rem;
		font-weight: 400;
	}

	td {

		&.active,
		&.active:hover {
			background-color: $primary;

			&.available:hover {
				background-color: $primary;
			}
		}

		&.in-range {
			background-color: $primary_light_5;
			color: $black_2;

			&.active,
			&.active:hover {
				background-color: $primary;
			}
		}

		&.available:hover {
			background-color: $gray_light_5;
		}
	}

	th {
		&.available:hover {
			background-color: transparent;
		}
	}

	.calendar-table {

		th,
		td {
			min-width: 33px;
			width: 33px;
			height: 33px;
			font-size: 0.875rem;
			position: relative;
			border: none;

			&.active,
			&.active:hover {
				color: $white;

				&.available:hover {
					color: $white;
				}
			}
		}

		th {

			&.next span,
			&.prev span {
				border-color: $gray_light_1;
			}

			&:hover {

				&.next span,
				&.prev span {
					border-color: $black_2;
				}
			}
		}
	}

	th.month {
		width: auto;
		font-size: 0.875rem;
		color: $black_2;
		letter-spacing: .5px;
		text-transform: uppercase;
		font-weight: 600;
	}

	.drp-selected {
		font-size: 0.875rem;
		padding-right: .25rem;
		color: $black_2;
		font-weight: 500;
		letter-spacing: 0.5px;
	}

	td.off,
	td.off.in-range,
	td.off.start-date,
	td.off.end-date {
		color: $gray_light_3;
	}

	select.hourselect,
	select.minuteselect,
	select.secondselect,
	select.ampmselect {
		background: $white;
		width: 60px;
		margin: .625rem auto;
		border: 1px solid $gray_light_3;
		padding: .25rem;
		border-radius: .25rem;
		font-size: 0.875rem;
		color: $black_2;
	}

	select.monthselect,
	select.yearselect {
		background: $white;
		border: 1px solid $gray_light_3;
		padding: .25rem;
		border-radius: .25rem;
		font-size: 0.875rem;
		color: $black_2;
	}

	.ranges li {
		font-size: 0.875rem;
		padding: .625rem .75rem;

		&:hover {
			background-color: $gray_light_5;
		}

		&.active {
			background-color: $primary;
		}
	}

	&.show-ranges .drp-calendar.left {
		border-color: $gray_light_3;
	}

	.drp-calendar.single {
		.calendar-time {
			padding-right: 8px;
		}
	}
}

@media (max-width: 767px) {
	.daterangepicker {
		width: 281px;

		&.show-ranges {
			.drp-calendar.left {
				border: none;
			}
		}

		.drp-buttons {
			text-align: left;

			.btn {
				margin-left: 0;
				margin-right: .5rem;
			}

			.drp-selected {
				display: block;
				margin-bottom: .625rem;
			}
		}

		&.ltr .ranges {
			width: 100%;

			ul {
				width: 100%;
			}
		}

		&.ltr .drp-calendar {
			width: 100%;

			&.left .calendar-table {
				padding-right: 0;
			}
		}
	}
}

/*Profile*/
.profile-wrap {
	.profile-intro {
		position: relative;
		z-index: 1;
		margin-top: -6rem;
	}

	.profile-img-wrap {
		height: 10rem;
		position: relative;

		>img {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}

	header.profile-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-flex-pack: space-between;
		height: 65px;
		background: $white;
		border-bottom: 1px solid $gray_light_3;
		position: relative;

		.profile-options-wrap {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;

			>a {
				margin-left: 0.5rem;
				display: inline-block;

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}

	.comment-block {
		.media {
			.media-head {
				margin-right: 1rem;
			}

			.media-body {
				>div {
					&:first-child {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						margin-bottom: 0.25rem;

						.cm-name {
							font-weight: 500;
							color: $black_2;
						}

						.badge {
							margin-left: 0.625rem;
							flex-shrink: 0;
						}
					}
				}

				.comment-action-wrap {

					span,
					a {
						color: $gray_dark_3;
						font-size: 0.75rem;
					}

					.comment-dot-sep {
						margin: 0 0.25rem;
						color: $gray_light_3;
					}
				}

				>.media {
					margin-top: 1.875rem;
				}
			}
		}
	}

	.comment-block {
		.media {
			.media-head {
				margin-right: 1rem;
			}

			.media-body {
				>div {
					&:first-child {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						margin-bottom: 0.25rem;

						.cm-name {
							font-weight: 500;
							color: $black_2;
						}

						.badge {
							margin-left: 0.625rem;
							flex-shrink: 0;
						}
					}
				}

				.comment-action-wrap {

					span,
					a {
						color: $gray_dark_3;
						font-size: 0.75rem;
					}

					.comment-dot-sep {
						margin: 0 0.25rem;
						color: $gray_light_3;
					}
				}

				>.media {
					margin-top: 1.875rem;
				}
			}
		}
	}

	.card.card-profile-feed {
		.btn-pg-link {
			position: absolute;
			bottom: 25px;
			left: 25px;
		}

		.feed-img-layout {
			.row {
				margin-right: -0.25rem;
				margin-left: -0.25rem;

				>[class*="col-"] {
					padding-right: 0.25rem;
					padding-left: 0.25rem;
				}
			}

			.feed-img {
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				width: 100%;
			}
		}

		.btn-video-link {
			@include background-opacity($black, 0.5);
			height: 45px;
			width: 45px;
			position: absolute;
			border-radius: 50%;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			color: $white;

			&:before {
				display: inline-block;
				font: normal normal normal 1.5rem/1 "Material-Design-Iconic-Font";
				padding-left: 0.25rem;
				font-style: normal;
				font-weight: normal;
				font-variant: normal;
				text-transform: none;
				text-rendering: auto;
				line-height: 1;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				content: "\f3aa";
			}
		}

		.card-footer {
			>div {
				a {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					color: $gray;
					font-size: 0.875rem;

					>i {
						line-height: 1;
						margin-right: 0.5rem;
					}
				}

				&:last-child {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;

					a {
						margin-right: 0.625rem;

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

.edit-profile-wrap {
	.nav-profile {
		.nav-header {
			font-size: 0.75rem;
			text-transform: uppercase;
			font-weight: 600;
			color: $gray;
		}

		.nav {
			margin: 1rem 0;
			font-size: 0.875rem;
			flex-wrap: nowrap;
			border: 0;

			.nav-item {
				margin-bottom: 0.25rem;

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

				a.nav-link {
					@include color-opacity($black_2, 1);
					border: 0;

					&:hover,
					&:focus {
						@include color-opacity($black_2, 0.8);
					}

					padding: 0;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					&.active {
						color: $primary;
					}
				}
			}
		}
	}
}

/*Activity*/
.activity-list {
	.list-group-item {
		padding: 0;
		border: none;

		.media {
			position: relative;
			align-items: inherit;

			.media-head {
				position: relative;
				margin-right: 1rem;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				flex-flow: column;
				min-width: 48px;
				align-items: center;

				>.avatar {
					flex-shrink: 0;
				}
			}

			.media-body {
				padding-bottom: 1.5rem;

				.last-activity-time {
					font-size: 0.75rem;
					margin-top: 0.25rem;
				}
			}
		}

		&.toggle-activity {
			.media .media-body {
				padding-bottom: 0;
				display: flex;
				align-items: center;
			}
		}

		&:last-child {
			.media {
				.media-head {
					&:after {
						display: none;
					}
				}
			}
		}
	}

	&.activity-wth-line {
		.list-group-item {
			.media {
				.media-head {
					&:after {
						content: "";
						background: $gray_light_3;
						width: 2.5px;
						height: 100%;
						border-radius: 50rem;
						margin: 0.5rem auto;
						min-height: 25px;
					}
				}
			}
		}
	}
}

.activity-list-h {
	flex-direction: row;

	.list-group-item {
		padding: 0;
		border: none;
		display: flex;
		flex-direction: column;
		padding-bottom: 6.25rem;
		align-items: center;

		.media {
			flex-flow: column;
			align-items: center;
			flex: 1;

			.media-body {
				width: 400px;
				padding: 0 0.625rem;
				display: flex;

				.last-activity-time {
					font-size: 0.75rem;
					margin-top: 0.25rem;
				}

				.card {
					width: 100%;
				}
			}

			.media-head {
				width: 100%;
				display: flex;
				justify-content: center;
				position: relative;
				min-height: 48px;
				align-items: center;
				position: absolute;
				bottom: 45px;

				&:after,
				&:before {
					content: "";
					height: 2.5px;
					background: $gray_light_3;
					width: 100%;
					position: absolute;
					margin: 0.5rem auto;
					right: 0;
					width: 50%;
					top: 0;
					bottom: 0;
					margin: auto 0;
				}

				&:before {
					left: 0;
				}

				.avatar {
					z-index: 1;
					outline: 7px solid $white;
				}
			}
		}

		&:first-child {
			.media {
				.media-head {
					&:before {
						display: none;
					}
				}
			}
		}

		&:last-child {
			.media {
				.media-head {
					&:after {
						display: none;
					}
				}
			}
		}

		.activity-time {
			text-align: center;
			font-size: 0.875rem;
			font-weight: 500;
			padding: 0.5rem 0;
			color: $primary;
			text-align: center;
			position: absolute;
			bottom: 0;
		}
	}
}

.user-activity {
	.media {
		position: relative;
		padding-bottom: 1.25rem;
		margin-left: 1.25rem;

		.media-head {
			position: absolute;
			left: -20px;
		}

		&:after {
			content: "";
			position: absolute;
			width: 1px;
			height: calc(100% - 77px);
			background: $gray_light_3;
			top: 60px;
		}

		.media-body {
			padding-bottom: 1.875rem;
			margin-left: 2.5rem;
			min-width: 0;
		}

		&:last-child {
			.media-body {
				border-bottom: none;
			}
		}
	}

	&.user-activity-sm {
		.media {
			padding-bottom: 0.625rem;
			margin-left: 1rem;

			.media-head {
				left: -16px;
			}

			.media-body {
				padding-bottom: 0.625rem;
				margin-left: 1.875rem;
			}
		}
	}
}

@media (max-width: 576px) {
	.user-activity .media .media-body {
		margin-left: 2.125rem;
	}
}

/*Wizards*/
.hk-wizard {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-variant: tabular-nums;
	line-height: 1.5715;
	list-style: none;
	font-feature-settings: "tnum";
	display: flex;
	width: 100%;
	font-size: 0;
	text-align: initial;

	.hk-wizard-item {
		&:not(.hk-wizard-item-active) {
			>.hk-wizard-item-container[role="button"] {
				cursor: pointer;

				.hk-wizard-item-title,
				.hk-wizard-item-subtitle,
				.hk-wizard-item-description,
				.hk-wizard-item-icon {
					.hk-wizard-icon {
						@include transition(color 0.3s);
					}
				}

				&:hover {

					.hk-wizard-item-title,
					.hk-wizard-item-subtitle,
					.hk-wizard-item-description {
						color: $primary;
					}
				}
			}

			&:not(.hk-wizard-item-process) {
				>.hk-wizard-item-container[role="button"] {
					&:hover {
						.hk-wizard-item-icon {
							border-color: $primary;

							.hk-wizard-icon {
								color: $primary;
							}
						}
					}
				}
			}
		}
	}

	&:not(.hk-wizard-vertical) {
		.hk-wizard-item-custom {
			.hk-wizard-item-icon {
				width: auto;
				background: 0 0;
			}
		}
	}
}

.hk-wizard-item {
	position: relative;
	display: inline-block;
	flex: 1;
	overflow: hidden;
	vertical-align: top;

	&:last-child {
		flex: none;

		>.hk-wizard-item-container {
			>.hk-wizard-item-tail {
				display: none;
			}

			>.hk-wizard-item-content {
				>.hk-wizard-item-title {
					&:after {
						display: none;
					}
				}
			}
		}
	}
}

.hk-wizard-item-container {
	outline: none;
}

.hk-wizard-item-icon {
	display: inline-block;
	vertical-align: top;
	width: 32px;
	height: 32px;
	margin: 0 0.5rem 0 0;
	font-size: 1rem;
	line-height: 32px;
	text-align: center;
	border: 1px solid $gray_light_2;
	border-radius: 2rem;
	transition: background-color 0.3s, border-color 0.3s;

	.hk-wizard-icon {
		position: relative;
		top: -0.5px;
		color: $primary;
	}
}

.hk-wizard-item-content {
	display: inline-block;
	vertical-align: top;
}

.hk-wizard-item-tail {
	position: absolute;
	top: 12px;
	left: 0;
	width: 100%;
	padding: 0 0.625rem;

	&:after {
		display: inline-block;
		width: 100%;
		height: 1px;
		background: $gray_light_3;
		border-radius: 1px;
		@include transition(background 0.3s);
		content: "";
	}
}

.hk-wizard-item-title {
	position: relative;
	display: inline-block;
	padding-right: 1rem;
	font-size: 1rem;
	line-height: 32px;
	color: $black_2;

	&:after {
		position: absolute;
		top: 16px;
		left: 100%;
		display: block;
		width: 9999px;
		height: 1px;
		background: $gray_light_3;
		content: "";
	}
}

.hk-wizard-item-subtitle {
	display: inline;
	margin-left: 0.5rem;
	font-weight: 400;
	font-size: 0.875rem;
}

.hk-wizard-item-description {
	font-size: 0.875rem;
}

.hk-wizard-item-wait {
	>.hk-wizard-item-container>.hk-wizard-item-content>.hk-wizard-item-title {
		color: $gray_dark_3;
	}

	.hk-wizard-item-icon {
		background-color: $white;
		border-color: $gray_light_2;

		>.hk-wizard-icon {
			color: $gray_light_2;

			.hk-wizard-icon-dot {
				background: $gray_light_2;
			}
		}
	}

	>.hk-wizard-item-container {
		>.hk-wizard-item-content {
			>.hk-wizard-item-title {
				&:after {
					background-color: $gray_light_3;
				}
			}
		}

		>.hk-wizard-item-tail {
			&:after {
				background-color: $gray_light_3;
			}
		}
	}
}

.hk-wizard-item-process {
	.hk-wizard-item-icon {
		background-color: $white;
		border-color: $primary;

		>.hk-wizard-icon {
			color: $primary;

			.hk-wizard-icon-dot {
				background: $primary;
			}
		}
	}

	>.hk-wizard-item-container {
		>.hk-wizard-item-content {
			>.hk-wizard-item-title {
				color: $black_2;

				&:after {
					background-color: $gray_light_3;
				}
			}

			>.hk-wizard-item-description {
				color: $black_2;
			}
		}

		>.hk-wizard-item-tail {
			&:after {
				background-color: $gray_light_3;
			}
		}

		>.hk-wizard-item-icon {
			background: $primary;

			.hk-wizard-icon {
				color: $white;
			}
		}

		>.hk-wizard-item-title {
			font-weight: 500;
		}
	}
}

.hk-wizard-item-finish {
	.hk-wizard-item-icon {
		background-color: $white;
		border-color: $primary;

		>.hk-wizard-icon {
			color: $primary;

			.hk-wizard-icon-dot {
				background: $primary;
			}
		}
	}

	>.hk-wizard-item-container {
		>.hk-wizard-item-content {
			>.hk-wizard-item-title {
				color: $black_2;

				&:after {
					background-color: $primary;
				}
			}
		}

		>.hk-wizard-item-tail {
			&:after {
				background-color: $primary;
			}
		}
	}
}

// added for next js
.hk-wizard-item-completed {
	.hk-wizard-item-icon {
		background-color: $white;
		border-color: $success;

		>.hk-wizard-icon {
			color: $success;

			.hk-wizard-icon-dot {
				background: $success;
			}
		}
	}

	>.hk-wizard-item-container {
		>.hk-wizard-item-content {
			>.hk-wizard-item-title {
				color: $success;

				&:after {
					background-color: $success;
				}
			}
		}

		>.hk-wizard-item-tail {
			&:after {
				background-color: $success;
			}
		}
	}
}

.hk-wizard-item-error {
	.hk-wizard-item-icon {
		background-color: $white;
		border-color: $red;

		>.hk-wizard-icon {
			color: $red;

			.hk-wizard-icon-dot {
				background: $red;
			}
		}
	}

	>.hk-wizard-item-container {
		>.hk-wizard-item-content {
			>.hk-wizard-item-title {
				color: $red;

				&:after {
					background-color: $gray_light_3;
				}
			}

			>.hk-wizard-item-description {
				color: $red;
			}
		}

		>.hk-wizard-item-tail {
			&:after {
				background-color: $gray_light_3;
			}
		}
	}
}

.hk-wizard-item.hk-wizard-next-error {
	.hk-wizard-item-title {
		&:after {
			background: $red;
		}
	}
}

.hk-wizard-item-disabled {
	cursor: not-allowed;
}

.hk-wizard-horizontal {
	&:not(.hk-wizard-label-vertical) {
		.hk-wizard-item {
			padding-left: 1rem;
			white-space: nowrap;

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				.hk-wizard-item-title {
					padding-right: 0;
				}
			}
		}

		.hk-wizard-item-tail {
			display: none;
		}

		.hk-wizard-item-description {
			max-width: 140px;
			white-space: normal;
		}
	}
}

.hk-wizard-item-custom {
	>.hk-wizard-item-container {
		>.hk-wizard-item-icon {
			height: auto;
			background: 0 0;
			border: 0;

			>.hk-wizard-icon {
				top: 0;
				left: 0.5px;
				width: 32px;
				height: 32px;
				font-size: 1.5rem;
				line-height: 32px;
			}
		}
	}
}

.hk-wizard-item-custom.hk-wizard-item-process {
	.hk-wizard-item-icon {
		>.hk-wizard-icon {
			color: $primary;
		}
	}
}

.hk-wizard-sm.hk-wizard-horizontal {
	&:not(.hk-wizard-label-vertical) {
		.hk-wizard-item {
			padding-left: 0.75rem;

			&:first-child {
				padding-left: 0;
			}
		}
	}
}

.hk-wizard-sm {
	.hk-wizard-item-icon {
		width: 24px;
		height: 24px;
		margin: 0 0.5rem 0 0;
		font-size: 0.75rem;
		line-height: 24px;
		text-align: center;
		border-radius: 1.5rem;
	}

	.hk-wizard-item-title {
		padding-right: 0.75rem;
		font-size: 0.875rem;
		line-height: 24px;

		&:after {
			top: 12px;
		}
	}

	.hk-wizard-item-description {
		font-size: 0.875rem;
	}

	.hk-wizard-item-tail {
		top: 8px;
	}

	.hk-wizard-item-custom {
		.hk-wizard-item-icon {
			width: inherit;
			height: inherit;
			line-height: inherit;
			background: 0 0;
			border: 0;
			border-radius: 0;

			>.hk-wizard-icon {
				font-size: 1.5rem;
				line-height: 24px;
				transform: none;
			}
		}
	}
}

.hk-wizard-vertical {
	display: flex;
	flex-direction: column;

	>.hk-wizard-item {
		display: block;
		flex: 1 0 auto;
		padding-left: 0;
		overflow: visible;

		.hk-wizard-item-icon {
			float: left;
			margin-right: 1rem;
		}

		.hk-wizard-item-content {
			display: block;
			min-height: 48px;
			overflow: hidden;
		}

		.hk-wizard-item-title {
			line-height: 32px;
		}

		.hk-wizard-item-description {
			padding-bottom: 0.75rem;
		}

		>.hk-wizard-item-container {
			>.hk-wizard-item-tail {
				position: absolute;
				top: 0;
				left: 16px;
				width: 1px;
				height: 100%;
				padding: 2.375rem 0 0.375rem;

				&:after {
					width: 1px;
					height: 100%;
				}
			}

			>.hk-wizard-item-content {
				>.hk-wizard-item-title {
					&:after {
						display: none;
					}
				}
			}
		}

		&:not(:last-child) {
			>.hk-wizard-item-container {
				>.hk-wizard-item-tail {
					display: block;
				}
			}
		}
	}
}

.hk-wizard-vertical.hk-wizard-sm {
	.hk-wizard-item-container {
		.hk-wizard-item-tail {
			position: absolute;
			top: 0;
			left: 12px;
			padding: 1.875rem 0 0.375rem;
		}

		.hk-wizard-item-title {
			line-height: 24px;
		}
	}
}

.hk-wizard-label-vertical {
	.hk-wizard-item {
		overflow: visible;
	}

	.hk-wizard-item-tail {
		margin-left: 3.625rem;
		padding: 0.25rem 1.5rem;
	}

	.hk-wizard-item-content {
		display: block;
		width: 116px;
		margin-top: 0.5rem;
		text-align: center;
	}

	.hk-wizard-item-icon {
		display: inline-block;
		margin-left: 2.625rem;
	}

	.hk-wizard-item-title {
		padding-right: 0;
		padding-left: 0;

		&:after {
			display: none;
		}
	}

	.hk-wizard-item-subtitle {
		display: block;
		margin-bottom: 4px;
		margin-left: 0;
		line-height: 1.5715;
	}
}

.hk-wizard-label-vertical.hk-wizard-sm {
	&:not(.hk-wizard-dot) {
		.hk-wizard-item-icon {
			margin-left: 2.875rem;
		}
	}
}

.hk-wizard-dot {
	.hk-wizard-item-title {
		line-height: 1.5715;
	}

	.hk-wizard-item-tail {
		top: 2px;
		width: 100%;
		margin: 0 0 0 4.375rem;
		padding: 0;

		&:after {
			width: calc(100% - 20px);
			height: 3px;
			margin-left: 0.75rem;
		}
	}

	.hk-wizard-item {
		&:first-child {
			.hk-wizard-icon-dot {
				left: 2px;
			}
		}
	}

	.hk-wizard-item-icon {
		width: 8px;
		height: 8px;
		margin-left: 4.25rem;
		padding-right: 0;
		line-height: 8px;
		background: 0 0;
		border: 0;

		.hk-wizard-icon-dot {
			position: relative;
			float: left;
			width: 100%;
			height: 100%;
			border-radius: 6.25rem;
			transition: all 0.3s;

			&:after {
				position: absolute;
				top: -12px;
				left: -26px;
				width: 60px;
				height: 32px;
				content: "";
			}
		}
	}

	.hk-wizard-item-content {
		width: 140px;
	}

	.hk-wizard-item-process {
		.hk-wizard-item-icon {
			position: relative;
			top: -1px;
			width: 10px;
			height: 10px;
			line-height: 10px;
			background: 0 0;
		}

		.hk-wizard-icon {
			&:first-child {
				.hk-wizard-icon-dot {
					left: 0;
				}
			}
		}
	}
}

.hk-wizard-dot.hk-wizard-sm {
	.hk-wizard-item-title {
		line-height: 1.5715;
	}

	.hk-wizard-item-tail {
		top: 2px;
		width: 100%;
		margin: 0 0 0 4.375rem;
		padding: 0;

		&:after {
			width: calc(100% - 20px);
			height: 3px;
			margin-left: 0.75rem;
		}
	}

	.hk-wizard-item {
		&:first-child {
			.hk-wizard-icon-dot {
				left: 2px;
			}
		}
	}

	.hk-wizard-item-icon {
		width: 8px;
		height: 8px;
		margin-left: 4.25rem;
		padding-right: 0;
		line-height: 8px;
		background: 0 0;
		border: 0;

		.hk-wizard-icon-dot {
			position: relative;
			float: left;
			width: 100%;
			height: 100%;
			border-radius: 6.25rem;

			&:after {
				position: absolute;
				top: -12px;
				left: -26px;
				width: 60px;
				height: 32px;
				content: "";
			}
		}
	}

	.hk-wizard-item-content {
		width: 140px;
	}

	.hk-wizard-item-process {
		.hk-wizard-item-icon {
			position: relative;
			top: -1px;
			width: 10px;
			height: 10px;
			line-height: 10px;
			background: 0 0;
		}

		.hk-wizard-icon {
			&:first-child {
				.hk-wizard-icon-dot {
					left: 0;
				}
			}
		}
	}
}

.hk-wizard-vertical.hk-wizard-dot {
	.hk-wizard-item-icon {
		margin-top: 0.75rem;
		margin-left: 0;
		background: 0 0;
	}

	.hk-wizard-item {
		>.hk-wizard-item-container {
			>.hk-wizard-item-tail {
				top: 6.5px;
				left: -9px;
				margin: 0;
				padding: 1.375rem 0 0.25rem;
			}
		}

		&:first-child {
			.hk-wizard-icon-dot {
				left: 0;
			}
		}
	}

	.hk-wizard-item-content {
		width: inherit;
	}

	.hk-wizard-item-process {
		.hk-wizard-item-container {
			.hk-wizard-item-icon {
				.hk-wizard-icon-dot {
					top: -1px;
					left: -1px;
				}
			}
		}
	}
}

/*Pricing Table*/
.hk-pricing-table-1 {
	.table {
		th {
			font-size: 1rem;
			white-space: inherit !important;
		}

		thead tr th {
			h5 {
				padding: 0.75rem 1.25rem;
				margin: 0 -1.25rem;
				border-bottom: 1px solid $gray_light_3;
			}

			&.pricing-highlighted {
				h5 {
					background: $primary;
					color: $white;
				}
			}
		}

		tbody {
			.monthly-price {
				text-align: center;

				.money {
					display: inline-block;
					vertical-align: top;
					padding-top: 1rem;
				}

				.price {
					sup {
						display: inline-block;
						vertical-align: top;
						padding-top: 1.5rem;
						font-size: 1.125rem;
					}

					.price-number {
						font-size: 3.3rem;
						font-weight: 500;
					}
				}

				.duration {
					position: relative;
					top: 10px;
				}
			}
		}
	}
}

.hk-pricing-table-2 {
	.table-responsive {
		padding-top: 3.125rem;
	}

	.table {
		th {
			font-size: 1rem;
			white-space: inherit !important;
		}

		.pricing-highlighted {
			@include background-opacity($primary, 0.15);
		}

		thead tr th {
			position: relative;

			&.pricing-highlighted {
				h5 {
					padding: 0.75rem 1.25rem;
					top: -47px;
					position: absolute;
					border-bottom: 1px solid $gray_light_3;
					background: $primary;
					color: $white;
					left: -1px;
					right: -1px;
				}
			}
		}

		tbody {
			.monthly-price {
				text-align: center;

				.money {
					display: inline-block;
					vertical-align: top;
					padding-top: 1rem;
				}

				.price {
					sup {
						display: inline-block;
						vertical-align: top;
						padding-top: 1.5rem;
						font-size: 1.125rem;
					}

					.price-number {
						font-size: 3.3rem;
						font-weight: 500;
					}
				}

				.duration {
					position: relative;
					top: 10px;
				}
			}
		}
	}
}

.hk-pricing-table-3 {
	text-align: center;

	.table-responsive {
		padding-top: 3.125rem;
	}

	.table {
		th {
			font-size: 1rem;
			white-space: inherit !important;

			.icon-wrap {
				margin-top: 1.5rem;
				font-size: 2.5rem;
			}
		}

		tbody {
			.monthly-price {
				.money {
					display: inline-block;
					vertical-align: top;
					padding-top: 1rem;
				}

				.price {
					sup {
						display: inline-block;
						vertical-align: top;
						padding-top: 1.5rem;
						font-size: 1.125rem;
					}

					.price-number {
						font-size: 2.6rem;
						font-weight: 500;
					}
				}

				.duration {
					display: inline-block;
					vertical-align: top;
					padding-top: 1.125rem;
				}
			}
		}
	}
}

/*Dropdown*/
.dropdown-toggle {
	&.no-caret {
		&:after {
			display: none;
		}
	}

	&:after {
		content: "\f2f9";
		font: normal normal normal 1rem/1 "Material-Design-Iconic-Font";
		border: none !important;
		vertical-align: 0 !important;
		margin-left: 0.4em;
	}

	&.dropdown-toggle-split {

		&:after,
		&:before {
			margin: 0 !important;
		}
	}
}

.dropup .dropdown-toggle::after {
	content: "\f2fc";
	margin-left: 0.4em;
}

.dropstart {
	.dropdown-toggle::before {
		content: "\f2fa";
		vertical-align: 0 !important;
		font: normal normal normal 1rem/1 "Material-Design-Iconic-Font";
		border: none !important;
		margin-right: 0.4em;
	}

	.dropdown-toggle::after {
		display: none;
	}
}

.dropend .dropdown-toggle::after {
	content: "\f2fb";
	vertical-align: 0;
	margin-left: 0.4em;
}

.btn {

	&.btn-lg,
	&.btn-sm,
	&.btn-xs {
		&.dropdown-toggle {

			&:after,
			&:before {
				font-size: inherit;
			}
		}
	}
}

.dropdown-menu {
	color: $gray_dark_3;
	border: none;
	border-radius: 0.5rem;
	padding: 0.5rem;
	box-shadow: 0px 6px 16px rgba(47, 52, 58, 0.1);

	.dropdown-item-text {
		color: $gray_dark_3;
		padding: 0.5rem 0.75rem;
	}

	.dropdown-header {
		color: $gray;
		padding: 0.5rem 0.75rem;
		font-weight: 500;

		&.dropdown-header-bold {
			font-size: 0.75rem;
			text-transform: uppercase;
			font-weight: 600;
		}

		&.header-wth-bg {
			background: $black_2;
			color: $white;
			margin-top: -0.5rem;
			margin-left: -0.5rem;
			margin-right: -0.5rem;
			margin-bottom: 0.5rem;
			border-top-left-radius: 0.5rem;
			border-top-right-radius: 0.5rem;
			padding-top: 0.8rem;
			padding-bottom: 0.8rem;
		}
	}

	&.dropdown-bordered {
		border: 1px solid $gray_light_3;
		box-shadow: none;
	}

	&.dropdown-menu-icon-text {
		.dropdown-item {
			.dropdown-item-text {
				padding: 0;
			}
		}
	}

	&.dropdown-menu-avatar {
		.dropdown-item {
			padding-top: 0.3rem;
			padding-bottom: 0.3rem;

			.dropdown-item-text {
				padding: 0;
			}

			.avatar {
				margin-right: 1rem;
			}
		}
	}

	.dropdown-item {
		color: $black_2;
		cursor: pointer;
		border-radius: 0.25rem;
		padding: 0.25rem 0.75rem;

		.dropdown-icon {
			font-size: 1.125rem;
			margin-right: 0.625rem;
			width: 21px;
			position: relative;
			top: 2px;

			&.feather-icon,
			.svg-icon {
				top: -2px;
			}
		}

		&.active,
		&:active {
			background-color: $primary;
			color: $white;
		}

		&:focus:not(.active):not(.disabled),
		&:hover:not(.active):not(.disabled) {
			background-color: $gray_light_5;
			color: $black_2;
		}

		&:disabled,
		&.disabled {
			color: $gray_light_1;
			background-color: transparent;
		}
	}

	.sub-dropdown-menu {
		position: relative;

		.dropdown-menu {

			&:before,
			&:after {
				display: none !important;
			}

			top: 0;

			&.open-left-side {
				right: 100% !important;
				left: auto !important;
			}

			&.open-right-side {
				left: 100% !important;
			}
		}
	}

	&.dropdown-menu-dark {
		background: $black_2;
		border-color: $black_2;
		color: $white;

		.dropdown-header,
		.dropdown-item-text {
			color: $gray_dark_3;
		}

		.dropdown-item {
			color: $gray_light_4;

			&:focus:not(.active):not(.disabled),
			&:hover:not(.active):not(.disabled) {
				background-color: $gray_dark_5;
				color: $white;
			}

			&.active,
			&:active {
				color: $white;
			}

			&:disabled,
			&.disabled {
				color: $gray_dark_4;
			}
		}

		.dropdown-divider {
			border-color: $black_2;
		}
	}
}

.dropdown-divider {
	border-color: $gray_light_4;
	margin-right: -0.5rem;
	margin-left: -0.5rem;
}

.show-on-hover {
	&:hover>.dropdown-menu {
		display: block;
	}

	>.dropdown-toggle:active {
		pointer-events: none;
	}
}

.dropdown-menu.animated {
	-webkit-animation-duration: 0.55s;
	animation-duration: 0.55s;

	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

.custom-caret {
	svg {
		height: 19px;
		width: 19px;
	}
}

.btn-sm {
	.custom-caret {
		svg {
			height: 17px;
			width: 17px;
		}
	}
}

.btn-group-lg>.btn+.dropdown-toggle-split,
.btn-lg+.dropdown-toggle-split {
	padding-right: 1.3rem;
	padding-left: 1.3rem;
}

.btn-group-sm>.btn+.dropdown-toggle-split,
.btn-sm+.dropdown-toggle-split {
	padding-right: 0.8rem;
	padding-left: 0.8rem;
}

/*Avatar*/
.avatar {
	position: relative;
	display: inline-block;
	width: 4rem;
	height: 4rem;
	vertical-align: middle;
	background-color: transparent;

	.avatar-img,
	.initial-wrap {
		width: 100%;
		height: 100%;
		border-radius: 0.5rem;
		-o-object-fit: cover;
		object-fit: cover;
	}

	>.initial-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		font-size: 1.1rem;
		font-weight: 600;
	}

	&.avatar-rounded {

		.avatar-img,
		.initial-wrap {
			border-radius: 50%;
		}
	}

	&.avatar-square {

		.avatar-img,
		.initial-wrap {
			border-radius: 0;
		}
	}

	&.avatar-xxxl {
		width: 9rem;
		height: 9rem;

		>.initial-wrap {
			font-size: 2.25rem;
		}
	}

	&.avatar-xxl {
		width: 8rem;
		height: 8rem;

		>.initial-wrap {
			font-size: 2rem;
		}
	}

	&.avatar-xl {
		width: 7rem;
		height: 7rem;

		>.initial-wrap {
			font-size: 1.75rem;
		}
	}

	&.avatar-lg {
		width: 6rem;
		height: 6rem;

		>.initial-wrap {
			font-size: 1.5rem;
		}
	}

	&.avatar-md {
		width: 5rem;
		height: 5rem;

		>.initial-wrap {
			font-size: 1.25rem;
		}
	}

	&.avatar-sm {
		width: 3rem;
		height: 3rem;

		>.initial-wrap {
			font-size: 1rem;
		}
	}

	&.avatar-xs {
		width: 2rem;
		height: 2rem;

		>.initial-wrap {
			font-size: 0.75rem;
		}
	}

	&.avatar-xxs {
		width: 1.5rem;
		height: 1.5rem;

		>.initial-wrap {
			font-size: 0.6rem;
		}
	}

	&.avatar-icon {
		>.initial-wrap {
			font-size: 1.5rem;
			font-weight: inherit;
		}

		&.avatar-xxxl {
			>.initial-wrap {
				font-size: 2.75rem;
			}
		}

		&.avatar-xxl {
			>.initial-wrap {
				font-size: 2.5rem;
			}
		}

		&.avatar-xl {
			>.initial-wrap {
				font-size: 2.25rem;
			}
		}

		&.avatar-lg {
			>.initial-wrap {
				font-size: 2rem;
			}
		}

		&.avatar-md {
			>.initial-wrap {
				font-size: 1.75rem;
			}
		}

		&.avatar-sm {
			>.initial-wrap {
				font-size: 1.25rem;
			}
		}

		&.avatar-xs {
			>.initial-wrap {
				font-size: 1.25rem;
			}
		}

		&.avatar-xxs {
			>.initial-wrap {
				font-size: 1rem;
			}
		}
	}

	&.avatar-logo {
		>.initial-wrap {
			background: $gray_light_5;

			>img {
				height: 50%;
				width: 50%;
			}
		}
	}

	&.avatar-cyan {
		>.initial-wrap {
			background-color: $cyan !important;
			color: $white;
		}
	}

	&.avatar-info {
		>.initial-wrap {
			background-color: $info !important;
			color: $white;
		}
	}

	&.avatar-sky {
		>.initial-wrap {
			background-color: $sky !important;
			color: $white;
		}
	}

	&.avatar-green {
		>.initial-wrap {
			background-color: $green !important;
			color: $white;
		}
	}

	&.avatar-success {
		>.initial-wrap {
			background-color: $success !important;
			color: $white;
		}
	}

	&.avatar-red {
		>.initial-wrap {
			background-color: $red !important;
			color: $white;
		}
	}

	&.avatar-danger {
		>.initial-wrap {
			background-color: $danger !important;
			color: $white;
		}
	}

	&.avatar-yellow {
		>.initial-wrap {
			background-color: $yellow !important;
			color: $white;
		}
	}

	&.avatar-warning {
		>.initial-wrap {
			background-color: $warning !important;
			color: $white;
		}
	}

	&.avatar-pink {
		>.initial-wrap {
			background-color: $pink !important;
			color: $white;
		}
	}

	&.avatar-purple {
		>.initial-wrap {
			background-color: $purple !important;
			color: $white;
		}
	}

	&.avatar-violet {
		>.initial-wrap {
			background-color: $violet !important;
			color: $white;
		}
	}

	&.avatar-indigo {
		>.initial-wrap {
			background-color: $indigo !important;
			color: $white;
		}
	}

	&.avatar-blue {
		>.initial-wrap {
			background-color: $blue !important;
			color: $white;
		}
	}

	&.avatar-primary {
		>.initial-wrap {
			background-color: $primary !important;
			color: $white;
		}
	}

	&.avatar-teal {
		>.initial-wrap {
			background-color: $teal !important;
			color: $white;
		}
	}

	&.avatar-neon {
		>.initial-wrap {
			background-color: $neon !important;
			color: $white;
		}
	}

	&.avatar-lime {
		>.initial-wrap {
			background-color: $lime !important;
			color: $white;
		}
	}

	&.avatar-sun {
		>.initial-wrap {
			background-color: $sun !important;
			color: $black_2;
		}
	}

	&.avatar-orange {
		>.initial-wrap {
			background-color: $orange !important;
			color: $white;
		}
	}

	&.avatar-pumpkin {
		>.initial-wrap {
			background-color: $pumpkin !important;
			color: $white;
		}
	}

	&.avatar-brown {
		>.initial-wrap {
			background-color: $brown !important;
			color: $white;
		}
	}

	&.avatar-gold {
		>.initial-wrap {
			background-color: $gold !important;
			color: $white;
		}
	}

	&.avatar-dark {
		>.initial-wrap {
			background-color: $black_2 !important;
			color: $white;
		}
	}

	&.avatar-light {
		>.initial-wrap {
			background-color: $gray_light_4 !important;
			color: $black_2;
		}
	}

	&.avatar-grey {
		>.initial-wrap {
			background-color: $gray !important;
			color: $white;
		}
	}

	&.avatar-secondary {
		>.initial-wrap {
			background-color: $secondary !important;
			color: $white;
		}
	}

	&.avatar-soft-cyan {
		>.initial-wrap {
			background-color: $cyan_light_5 !important;
			color: $cyan;
		}
	}

	&.avatar-soft-info {
		>.initial-wrap {
			background-color: $info_light_5 !important;
			color: $info;
		}
	}

	&.avatar-soft-sky {
		>.initial-wrap {
			background-color: $sky_light_5 !important;
			color: $sky;
		}
	}

	&.avatar-soft-green {
		>.initial-wrap {
			background-color: $green_light_5 !important;
			color: $green;
		}
	}

	&.avatar-soft-success {
		>.initial-wrap {
			background-color: $success_light_5 !important;
			color: $success;
		}
	}

	&.avatar-soft-red {
		>.initial-wrap {
			background-color: $red_light_5 !important;
			color: $red;
		}
	}

	&.avatar-soft-danger {
		>.initial-wrap {
			background-color: $danger_light_5 !important;
			color: $danger;
		}
	}

	&.avatar-soft-yellow {
		>.initial-wrap {
			background-color: $yellow_light_5 !important;
			color: $yellow;
		}
	}

	&.avatar-soft-warning {
		>.initial-wrap {
			background-color: $warning_light_5 !important;
			color: $warning;
		}
	}

	&.avatar-soft-pink {
		>.initial-wrap {
			background-color: $pink_light_5 !important;
			color: $pink;
		}
	}

	&.avatar-soft-purple {
		>.initial-wrap {
			background-color: $purple_light_5 !important;
			color: $purple;
		}
	}

	&.avatar-soft-violet {
		>.initial-wrap {
			background-color: $violet_light_5 !important;
			color: $violet;
		}
	}

	&.avatar-soft-indigo {
		>.initial-wrap {
			background-color: $indigo_light_5 !important;
			color: $indigo;
		}
	}

	&.avatar-soft-blue {
		>.initial-wrap {
			background-color: $blue_light_5 !important;
			color: $blue;
		}
	}

	&.avatar-soft-primary {
		>.initial-wrap {
			background-color: $primary_light_5 !important;
			color: $primary;
		}
	}

	&.avatar-soft-teal {
		>.initial-wrap {
			background-color: $teal_light_5 !important;
			color: $teal;
		}
	}

	&.avatar-soft-neon {
		>.initial-wrap {
			background-color: $neon_light_5 !important;
			color: $neon;
		}
	}

	&.avatar-soft-lime {
		>.initial-wrap {
			background-color: $lime_light_5 !important;
			color: $lime;
		}
	}

	&.avatar-soft-sun {
		>.initial-wrap {
			background-color: $sun_light_5 !important;
			color: $sun;
		}
	}

	&.avatar-soft-orange {
		>.initial-wrap {
			background-color: $orange_light_5 !important;
			color: $orange;
		}
	}

	&.avatar-soft-pumpkin {
		>.initial-wrap {
			background-color: $pumpkin_light_5 !important;
			color: $pumpkin;
		}
	}

	&.avatar-soft-brown {
		>.initial-wrap {
			background-color: $brown_light_5 !important;
			color: $brown;
		}
	}

	&.avatar-soft-gold {
		>.initial-wrap {
			background-color: $gold_light_5 !important;
			color: $gold;
		}
	}

	&.avatar-soft-dark {
		>.initial-wrap {
			background-color: $gray_light_3 !important;
			color: $black_2;
		}
	}

	&.avatar-soft-light {
		>.initial-wrap {
			background-color: $gray_light_5 !important;
			color: $gray_dark_3;
		}
	}

	&.avatar-soft-grey {
		>.initial-wrap {
			background-color: $gray_light_5 !important;
			color: $gray;
		}
	}

	&.avatar-soft-secondary {
		>.initial-wrap {
			background-color: $secondary_light_5 !important;
			color: $secondary;
		}
	}
}

.avatar-group {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;

	.avatar {
		width: 2.625rem;
		height: 2.625rem;

		.avatar-img,
		>.initial-wrap {
			border: 2px solid $white;
			font-size: 0.9rem;
		}
	}

	&.avatar-group-overlapped {
		.avatar {
			margin-right: -0.875rem;

			&:hover {
				z-index: 1;
			}
		}
	}

	&.avatar-group-lg {
		.avatar {
			width: 3.25rem;
			height: 3.25rem;

			>.initial-wrap {
				font-size: 0.95rem;
			}
		}

		&.avatar-group-overlapped .avatar {
			margin-right: -1rem;
		}
	}

	&.avatar-group-sm {
		.avatar {
			width: 2rem;
			height: 2rem;

			>.initial-wrap {
				font-size: 0.6rem;
			}
		}

		&.avatar-group-overlapped .avatar {
			margin-right: -0.625rem;
		}
	}
}

/*Pagination*/
.pagination-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.page-link {
	color: $black_2;
	border-color: $gray_light_3;
	min-width: 40px;
	min-height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;

	&:focus,
	&:hover {
		color: $black_2;
		box-shadow: none;
		background-color: $gray_light_4;
		border-color: $gray_light_3;
	}
}

.pagination {
	--bs-pagination-disabled-bg: "transporent";

	.page-item {
		&.active {
			.page-link {
				background: $primary;
				border-color: $primary;
				color: $white;
			}
		}

		&.disabled {
			.page-link {
				color: $gray_light_1;
			}
		}

		&:first-child .page-link {
			border-top-left-radius: 0.5rem;
			border-bottom-left-radius: 0.5rem;
		}

		&:last-child .page-link {
			border-top-right-radius: 0.5rem;
			border-bottom-right-radius: 0.5rem;
		}
	}

	&.custom-pagination {
		.page-item {
			+.page-item {
				padding-left: 0.5rem;
				margin: 0;
			}
		}

		.page-link {
			padding: 0.5rem 0.8rem;
			border-radius: 0.5rem;
		}

		&.pagination-rounded {
			.page-link {
				border-radius: 50rem;
			}

			.page-item:first-child,
			.page-item:last-child {
				.page-link {
					border-radius: 50rem;
				}
			}
		}

		&.pagination-filled {
			.page-item:not(.active) {
				.page-link {
					background: $gray_light_5;
					border-color: $gray_light_5;
				}

				&:hover {
					.page-link {
						background-color: $gray_light_4;
					}
				}
			}
		}

		&.pagination-simple {
			.page-item:not(.active) {
				.page-link {
					border-color: transparent;
				}
			}
		}
	}

	&.pagination-sm {
		.page-link {
			padding: 0.3rem 0.6rem;
			min-height: 30px;
			min-width: 30px;
		}
	}
}

/*Badge*/
.badge {
	font-weight: 500;
	border-radius: 0.5rem;
	padding: 0.5rem 0.625rem;
	font-size: 70%;
	min-width: 25px;
	letter-spacing: 0.3px;
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	text-transform: capitalize;

	&.badge-indicator {
		width: 10px;
		height: 10px;
		min-width: initial;
		border: 2px solid $white;
		border-radius: 50%;
		padding: 0;
		position: relative;

		&:empty {
			display: inline-block;
		}

		&.badge-indicator-sm {
			width: 7px;
			height: 7px;
		}

		&.badge-indicator-lg {
			width: 12px;
			height: 12px;
		}

		&.badge-indicator-xl {
			width: 16px;
			height: 16px;
		}

		&.badge-indicator-nobdr {
			width: 8px;
			height: 8px;
			border: none;
		}

		&.badge-indicator-nobdr-sm {
			width: 5px;
			height: 5px;
			border: none;
		}

		@-webkit-keyframes ripple {
			0% {
				transform: scale(0.8);
				opacity: 0.5;
			}

			to {
				transform: scale(2.4);
				opacity: 0;
			}
		}

		@keyframes ripple {
			0% {
				transform: scale(0.8);
				opacity: 0.5;
			}

			to {
				transform: scale(2.4);
				opacity: 0;
			}
		}

		&.badge-indicator-processing {
			position: relative;

			&::after {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border: 1px solid;
				border-radius: 50%;
				-webkit-animation: ripple 1.2s infinite ease-in-out;
				animation: ripple 1.2s infinite ease-in-out;
				content: "";
			}
		}
	}

	>span {
		display: flex;
		align-items: center;

		.icon {
			display: flex;
			font-size: 0.875rem;
			margin-right: 0.25rem;
		}

		.badge-dot {
			display: flex;
			font-size: 8px;
			margin-right: 0.25rem;
		}
	}

	&.badge-sm {
		font-size: 60%;
		padding: 0.25rem 0.5rem;
		min-width: 19px;

		>span {
			.badge-dot {
				font-size: 0.375rem;
			}

			.icon {
				font-size: 0.75rem;
			}
		}
	}

	&.badge-cyan {
		background: $cyan;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $cyan;
		}
	}

	&.badge-info {
		background: $info;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $info;
		}
	}

	&.badge-sky {
		background: $sky;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $sky;
		}
	}

	&.badge-green {
		background: $green;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $green;
		}
	}

	&.badge-success {
		background: $success;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $success;
		}
	}

	&.badge-red {
		background: $red;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $red;
		}
	}

	&.badge-danger {
		background: $danger;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $danger;
		}
	}

	&.badge-yellow {
		background: $yellow;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $yellow;
		}
	}

	&.badge-warning {
		background: $warning;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $warning;
		}
	}

	&.badge-pink {
		background: $pink;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $pink;
		}
	}

	&.badge-purple {
		background: $purple;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $purple;
		}
	}

	&.badge-violet {
		background: $violet;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $violet;
		}
	}

	&.badge-indigo {
		background: $indigo;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $indigo;
		}
	}

	&.badge-blue {
		background: $blue;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $blue;
		}
	}

	&.badge-primary {
		background: $primary;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $primary;
		}
	}

	&.badge-teal {
		background: $teal;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $teal;
		}
	}

	&.badge-neon {
		background: $neon;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $neon;
		}
	}

	&.badge-lime {
		background: $lime;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $lime;
		}
	}

	&.badge-sun {
		background: $sun;
		color: $black_2;

		&.badge-indicator-processing:after {
			border-color: $sun;
		}
	}

	&.badge-orange {
		background: $orange;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $orange;
		}
	}

	&.badge-pumpkin {
		background: $pumpkin;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $pumpkin;
		}
	}

	&.badge-smoke {
		background: $smoke;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $smoke;
		}
	}

	&.badge-brown {
		background: $brown;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $brown;
		}
	}

	&.badge-gold {
		background: $gold;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $gold;
		}
	}

	&.badge-grey {
		background: $gray;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $gray;
		}
	}

	&.badge-secondary {
		background: $secondary;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $secondary;
		}
	}

	&.badge-light {
		background: $gray_light_4;
		color: $black_2;

		&.badge-indicator-processing:after {
			border-color: $gray_light_4;
		}
	}

	&.badge-dark {
		background: $black_2;
		color: $white;

		&.badge-indicator-processing:after {
			border-color: $black_2;
		}
	}

	&.badge-outline {
		background: transparent;
		border: 1px solid;

		&.badge-cyan {
			border-color: $cyan;
			color: $cyan;
		}

		&.badge-info {
			border-color: $info;
			color: $info;
		}

		&.badge-sky {
			border-color: $sky;
			color: $sky;
		}

		&.badge-green {
			border-color: $green;
			color: $green_dark_2;
		}

		&.badge-success {
			border-color: $success;
			color: $success_dark_2;
		}

		&.badge-red {
			border-color: $red;
			color: $red_dark_1;
		}

		&.badge-danger {
			border-color: $danger;
			color: $danger_dark_1;
		}

		&.badge-yellow {
			border-color: $yellow;
			color: $yellow_dark_2;
		}

		&.badge-warning {
			border-color: $warning;
			color: $warning_dark_2;
		}

		&.badge-grey {
			border-color: $gray;
			color: $gray;
		}

		&.badge-secondary {
			border-color: $secondary;
			color: $secondary;
		}

		&.badge-light {
			border-color: $gray_light_4;
			color: $black_2;
		}

		&.badge-dark {
			border-color: $black_2;
			color: $black_2;
		}

		&.badge-pink {
			border-color: $pink;
			color: $pink;
		}

		&.badge-purple {
			border-color: $purple;
			color: $purple;
		}

		&.badge-violet {
			border-color: $violet;
			color: $violet;
		}

		&.badge-indigo {
			border-color: $indigo;
			color: $indigo;
		}

		&.badge-blue {
			border-color: $blue;
			color: $blue;
		}

		&.badge-primary {
			border-color: $primary;
			color: $primary;
		}

		&.badge-teal {
			border-color: $teal;
			color: $teal;
		}

		&.badge-neon {
			border-color: $neon;
			color: $neon;
		}

		&.badge-lime {
			border-color: $lime;
			color: $lime;
		}

		&.badge-sun {
			border-color: $sun;
			color: $sun;
		}

		&.badge-orange {
			border-color: $orange;
			color: $orange;
		}

		&.badge-pumpkin {
			border-color: $pumpkin;
			color: $pumpkin;
		}

		&.badge-smoke {
			border-color: $smoke;
			color: $smoke;
		}

		&.badge-brown {
			border-color: $brown;
			color: $brown;
		}

		&.badge-gold {
			border-color: $gold;
			color: $gold;
		}
	}

	&.badge-soft-cyan {
		background: $cyan_light_5;
		color: $cyan;

		&.badge-indicator-processing:after {
			border-color: $cyan_light_5;
		}
	}

	&.badge-soft-info {
		background: $info_light_5;
		color: $info;

		&.badge-indicator-processing:after {
			border-color: $info_light_5;
		}
	}

	&.badge-soft-sky {
		background: $sky_light_5;
		color: $sky;

		&.badge-indicator-processing:after {
			border-color: $sky_light_5;
		}
	}

	&.badge-soft-green {
		background: $green_light_5;
		color: $green_dark_2;

		&.badge-indicator-processing:after {
			border-color: $green_light_5;
		}
	}

	&.badge-soft-success {
		background: $success_light_5;
		color: $success_dark_2;

		&.badge-indicator-processing:after {
			border-color: $success_light_5;
		}
	}

	&.badge-soft-red {
		background: $red_light_5;
		color: $red_dark_1;

		&.badge-indicator-processing:after {
			border-color: $red_light_5;
		}
	}

	&.badge-soft-danger {
		background: $danger_light_5;
		color: $danger_dark_1;

		&.badge-indicator-processing:after {
			border-color: $danger_light_5;
		}
	}

	&.badge-soft-yellow {
		background: $yellow_light_5;
		color: $yellow_dark_2;

		&.badge-indicator-processing:after {
			border-color: $yellow_light_5;
		}
	}

	&.badge-soft-warning {
		background: $warning_light_5;
		color: $warning_dark_2;

		&.badge-indicator-processing:after {
			border-color: $warning_light_5;
		}
	}

	&.badge-soft-pink {
		background: $pink_light_5;
		color: $pink;

		&.badge-indicator-processing:after {
			border-color: $pink_light_5;
		}
	}

	&.badge-soft-purple {
		background: $purple_light_5;
		color: $purple;

		&.badge-indicator-processing:after {
			border-color: $purple_light_5;
		}
	}

	&.badge-soft-violet {
		background: $violet_light_5;
		color: $violet;

		&.badge-indicator-processing:after {
			border-color: $violet_light_5;
		}
	}

	&.badge-soft-indigo {
		background: $indigo_light_5;
		color: $indigo;

		&.badge-indicator-processing:after {
			border-color: $indigo_light_5;
		}
	}

	&.badge-soft-blue {
		background: $blue_light_5;
		color: $blue;

		&.badge-indicator-processing:after {
			border-color: $blue_light_5;
		}
	}

	&.badge-soft-primary {
		background: $primary_light_5;
		color: $primary;

		&.badge-indicator-processing:after {
			border-color: $primary_light_5;
		}
	}

	&.badge-soft-teal {
		background: $teal_light_5;
		color: $teal;

		&.badge-indicator-processing:after {
			border-color: $teal_light_5;
		}
	}

	&.badge-soft-neon {
		background: $neon_light_5;
		color: $neon;

		&.badge-indicator-processing:after {
			border-color: $neon_light_5;
		}
	}

	&.badge-soft-lime {
		background: $lime_light_5;
		color: $lime;

		&.badge-indicator-processing:after {
			border-color: $lime_light_5;
		}
	}

	&.badge-soft-sun {
		background: $sun_light_5;
		color: $sun;

		&.badge-indicator-processing:after {
			border-color: $sun_light_5;
		}
	}

	&.badge-soft-orange {
		background: $orange_light_5;
		color: $orange;

		&.badge-indicator-processing:after {
			border-color: $orange_light_5;
		}
	}

	&.badge-soft-pumpkin {
		background: $pumpkin_light_5;
		color: $pumpkin;

		&.badge-indicator-processing:after {
			border-color: $pumpkin_light_5;
		}
	}

	&.badge-soft-smoke {
		background: $smoke_light_5;
		color: $smoke;

		&.badge-indicator-processing:after {
			border-color: $smoke_light_5;
		}
	}

	&.badge-soft-brown {
		background: $brown_light_5;
		color: $brown;

		&.badge-indicator-processing:after {
			border-color: $brown_light_5;
		}
	}

	&.badge-soft-gold {
		background: $gold_light_5;
		color: $gold;

		&.badge-indicator-processing:after {
			border-color: $gold_light_5;
		}
	}

	&.badge-soft-grey {
		background: $gray_light_5;
		color: $gray;

		&.badge-indicator-processing:after {
			border-color: $gray_light_5;
		}
	}

	&.badge-soft-secondary {
		background: $secondary_light_5;
		color: $secondary;

		&.badge-indicator-processing:after {
			border-color: $secondary_light_5;
		}
	}

	&.badge-soft-light {
		background: $gray_light_5;
		color: $gray_dark_3;

		&.badge-indicator-processing:after {
			border-color: $gray_light_5;
		}
	}

	&.badge-soft-dark {
		background: $gray_light_3;
		color: $black_2;

		&.badge-indicator-processing:after {
			border-color: $gray_light_3;
		}
	}

	&.badge-pill {
		border-radius: 50rem;
	}
}

a {
	&.badge {
		@include transition(all 0.15s ease);

		&:hover,
		&:focus {
			@include transform(translateY(-3px));
			@include boxshadow-badge-link($black);
		}
	}

	&.badge-sky {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($sky);
		}
	}

	&.badge-cyan {

		&:hover,
		&:focus {
			background: $cyan;
			color: $white;
			@include boxshadow-badge-link($cyan);
		}
	}

	&.badge-info {

		&:hover,
		&:focus {
			background: $info;
			color: $white;
			@include boxshadow-badge-link($info);
		}
	}

	&.badge-blue {

		&:hover,
		&:focus {
			background: $blue;
			color: $white;
			@include boxshadow-badge-link($blue);
		}
	}

	&.badge-primary {

		&:hover,
		&:focus {
			background: $primary;
			color: $white;
			@include boxshadow-badge-link($primary);
		}
	}

	&.badge-green {

		&:hover,
		&:focus {
			background: $green;
			color: $white;
			@include boxshadow-badge-link($green);
		}
	}

	&.badge-success {

		&:hover,
		&:focus {
			background: $success;
			color: $white;
			@include boxshadow-badge-link($success);
		}
	}

	&.badge-red {

		&:hover,
		&:focus {
			background: $red;
			color: $white;
			@include boxshadow-badge-link($red);
		}
	}

	&.badge-danger {

		&:hover,
		&:focus {
			background: $danger;
			color: $white;
			@include boxshadow-badge-link($danger);
		}
	}

	&.badge-yellow {

		&:hover,
		&:focus {
			background: $yellow;
			color: $white;
			@include boxshadow-badge-link($yellow);
		}
	}

	&.badge-warning {

		&:hover,
		&:focus {
			background: $warning;
			color: $white;
			@include boxshadow-badge-link($warning);
		}
	}

	&.badge-grey {

		&:hover,
		&:focus {
			background: $gray;
			color: $white;
			@include boxshadow-badge-link($gray);
		}
	}

	&.badge-secondary {

		&:hover,
		&:focus {
			background: $secondary;
			color: $white;
			@include boxshadow-badge-link($secondary);
		}
	}

	&.badge-pink {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($pink);
		}
	}

	&.badge-purple {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($purple);
		}
	}

	&.badge-violet {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($violet);
		}
	}

	&.badge-indigo {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($indigo);
		}
	}

	&.badge-teal {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($teal);
		}
	}

	&.badge-neon {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($neon);
		}
	}

	&.badge-lime {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($lime);
		}
	}

	&.badge-sun {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($sun);
		}
	}

	&.badge-orange {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($orange);
		}
	}

	&.badge-pumpkin {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($pumpkin);
		}
	}

	&.badge-smoke {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($smoke);
		}
	}

	&.badge-brown {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($brown);
		}
	}

	&.badge-gold {

		&:hover,
		&:focus {
			@include boxshadow-badge-link($gold);
		}
	}

	&.badge-light {

		&:hover,
		&:focus {
			background: $gray_light_4;
			color: $black_2;
			@include boxshadow-badge-link($gray_light_3, 1);
		}
	}

	&.badge-dark {

		&:hover,
		&:focus {
			background: $black_2;
			color: $white;
			@include boxshadow-badge-link($black_2);
		}
	}

	&.badge-outline {

		&:hover,
		&:focus {
			background: transparent;
			box-shadow: none;
		}
	}
}

.badge-status {
	.badge-label {
		margin-left: 0.25rem;
		font-size: 0.875rem;
	}
}

.badge-on-text {
	.badge {
		position: relative;
		top: -5px;
		right: 0;
	}
}

.badge-on-text-end {
	.badge {
		margin-left: 0.5rem;
		position: relative;
		top: -1px;
	}
}

/*List Group*/
.list-group-item {
	border-color: $gray_light_3;

	&:first-child {
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
	}

	&:last-child {
		border-bottom-right-radius: 0.5rem;
		border-bottom-left-radius: 0.5rem;
	}

	&.active {
		background-color: $primary;
		border-color: $primary;

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			color: $white;
		}
	}

	&.disabled,
	&:disabled {
		color: $gray_light_1;
	}

	&.list-group-item-action:not(.active):focus,
	&.list-group-item-action:not(.active):hover {
		background-color: $gray_light_5;
	}

	&.list-group-item-primary:not(.active) {
		color: $primary;
		background-color: $primary_light_5;
	}

	&.list-group-item-info:not(.active) {
		color: $info;
		background-color: $info_light_5;
	}

	&.list-group-item-success:not(.active) {
		color: $success;
		background-color: $success_light_5;
	}

	&.list-group-item-warning:not(.active) {
		color: $warning;
		background-color: $warning_light_5;
	}

	&.list-group-item-danger:not(.active) {
		color: $danger;
		background-color: $danger_light_5;
	}

	&.list-group-item-secondary:not(.active) {
		color: $secondary;
		background-color: $secondary_light_5;
	}

	&.list-group-item-light:not(.active) {
		color: $gray_dark_4;
		background-color: $gray_light_5;
	}

	&.list-group-item-dark:not(.active) {
		color: $white;
		background-color: $black_2;
	}

	&.list-group-inv {
		color: $white;

		&.list-group-inv-primary:not(.active) {
			background-color: $primary;
			border-color: $primary;
		}

		&.list-group-inv-info:not(.active) {
			background-color: $info;
			border-color: $info;
		}

		&.list-group-inv-success:not(.active) {
			background-color: $success;
			border-color: $success;
		}

		&.list-group-inv-warning:not(.active) {
			background-color: $warning;
			border-color: $warning;
		}

		&.list-group-inv-danger:not(.active) {
			background-color: $danger;
			border-color: $danger;
		}

		&.list-group-inv-secondary:not(.active) {
			background-color: $secondary;
			border-color: $secondary;
		}
	}
}

.list-group-horizontal-xxl,
.list-group-horizontal-xl,
.list-group-horizontal-lg,
.list-group-horizontal-md,
.list-group-horizontal-sm,
.list-group-horizontal {
	>.list-group-item:first-child {
		border-bottom-left-radius: 0.5rem;
	}

	>.list-group-item:last-child {
		border-top-right-radius: 0.5rem;
	}
}

.list-group {
	&.active-info {
		.list-group-item {
			&.active {
				background-color: $info;
				border-color: $info;
			}
		}
	}

	&.active-success {
		.list-group-item {
			&.active {
				background-color: $success;
				border-color: $success;
			}
		}
	}

	&.active-warning {
		.list-group-item {
			&.active {
				background-color: $warning;
				border-color: $warning;
			}
		}
	}

	&.active-danger {
		.list-group-item {
			&.active {
				background-color: $danger;
				border-color: $danger;
			}
		}
	}

	&.active-primary {
		.list-group-item {
			&.active {
				background-color: $primary;
				border-color: $primary;
			}
		}
	}

	&.active-secondary {
		.list-group-item {
			&.active {
				background-color: $secondary;
				border-color: $secondary;
			}
		}
	}
}

/*Google Map*/
.infowindow-wrap {
	.infowindow-header {
		color: $black_2;
		padding: 0 5px;
		@extend .main-font;
	}

	.infowindow-body {
		padding: 0 0.25rem;
		color: $gray_dark_3;
		font-size: 1rem;
		@extend .main-font;
	}
}

/*Vecotor Map*/
.jvectormap-zoomin,
.jvectormap-zoomout {
	line-height: 9px;
	background: $black_2;
	padding: 0.25rem;
	width: 0.75rem;
	height: 13px;
	border-radius: 0;
}

.jvectormap-zoomout {
	top: 31px;
}

.jvectormap-goback {
	padding: 0.15rem 0.4rem;
	font-size: 0.75rem;
	background: $primary;
	border-radius: 0.2rem;
}

.jvectormap-legend-cnt-h {
	.jvectormap-legend-tick-sample {
		height: 23px;
	}

	.jvectormap-legend {
		background: $black_2;
		padding: 0.25rem;
		border-radius: 0.125rem;

		&.jvectormap-legend-icons {
			color: $black_2;
			background: $white;
			border: $gray_light_2 1px solid;
		}

		.jvectormap-legend-title {
			font-weight: 500;
			margin-bottom: 0.625rem;
		}

		.jvectormap-legend-tick {
			width: 55px;

			.jvectormap-legend-tick-text {
				font-size: 0.75rem;
				font-weight: 500;
				text-transform: capitalize;
				margin-top: 0.25rem;
			}
		}
	}
}

/*Progressbar*/
.progress {
	border-radius: 0;

	&.progress-bar-rounded {
		border-radius: 50rem;

		.progress-bar {
			border-radius: 50rem;
		}
	}

	&.progress-bar-xs {
		height: 5px;
	}

	&.progress-bar-sm {
		height: 9px;
	}

	&.progress-bar-md {
		height: 13px;
	}

	&.progress-bar-lg {
		height: 18px;
	}

	&.progress-bar-xl {
		height: 20px;
	}

	.progress-bar {
		background-color: $primary;

		.progress-tooltip {
			position: absolute;
			right: 0-20px;
			width: 50px;
			background: $black_2;
			bottom: 25px;
			border-radius: 0.3rem;
			padding: 0.25rem 0.625rem;
			font-size: 0.75rem;
			height: 30px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			justify-content: center;
			-webkit-justify-content: center;

			&:after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				bottom: -10px;
				left: -5px;
				right: 0;
				margin: auto;
				box-sizing: border-box;
				border: 0.6em solid rgba(240, 210, 210, 0.1);
				border-color: transparent transparent $black_2 $black_2;
				transform-origin: 0 0;
				@include transform(rotate(-45deg));
			}
		}
	}

	&.progress-width-animated {
		overflow: visible !important;

		.progress-bar {
			overflow: visible !important;
			position: relative;
		}
	}
}

.progress-label {
	text-transform: capitalize;
	font-size: 0.875rem;
	font-weight: 400;
	margin-bottom: 0.5rem;
}

.progress-wrap {
	&.lb-side-left {
		.progress-lb-wrap {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;

			.progress-label {
				display: inline-block;
				padding-right: 1rem;
				flex: 0 0 auto;
				-ms-flex: 0 0 auto;
				margin-bottom: 0;
			}

			.progress {
				flex: 1 1 100%;
				-ms-flex: 1 1 100%;
				max-width: 100%;
			}
		}
	}
}

/*Togglable*/
.hk-sidebar-togglable {
	height: 25px;
	width: 25px;
	left: -12.5px;
	border-radius: 50%;
	top: 52px;
	position: absolute;
	background: $white;
	cursor: pointer;
	border: 1px solid $gray_light_3;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	@include boxshadow-sm($black);
	@include transition(transform 0.3s ease-in-out);
	z-index: 2;

	&:after {
		content: "\ea62";
		font-family: remixicon;
		text-rendering: auto;
	}

	&.active {
		@include transform(translateX(32px));

		&:after {
			content: "\ea6c";
		}
	}
}

/*Advance List*/
.advance-list {
	padding-left: 0;

	>li {
		margin-bottom: 1.25rem;

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

.advance-list-item {
	padding: 0.5rem 1.25rem;
	min-height: 50px;
	border: 1px solid $gray_light_3;
	border-radius: 0.5rem;
	list-style: none;
	background: $white;
	position: relative;
	@include transition(all 0.3s cubic-bezier(0.4, 0, 0.2, 1));

	&:hover {
		@include transform(scale(1.02, 1.02));
		z-index: 1;
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	&.drp-open {
		z-index: 4;
	}
}