@import url('poppins.css');
:root{
	--text-color: rgb(3, 122, 255);
	--bg-color: #cde4ff;
	--bg-color-hover: #e6eff9;
	--scroll-thumb: #090911;
	--scroll-track: #0c0c2e69;
	--scroll-size: 8px;
	--bs-success-rgb: 29, 200, 50;
	--bs-danger-rgb: 255, 0, 24;
	--bs-primary-rgb: 0, 161, 238;
	--bs-warning-rgb: 255, 170, 0;
	--bs-light-rgb: 248,249,250;
	--bs-dark-rgb: 33,37,41;
	--bs-white-rgb: 255,255,255;
	--bs-black-rgb: 0,0,0;
	--bs-bg-opacity: 1;
}
@media print {
	.page-footer, .back-to-top, .topbar, .sidebar-wrapper, .no-print {
		display: none !important;
	}
	.page-wrapper {
		margin: 0 !important;
	}
}
a {
	text-decoration: none;
}
label.error {
	color: red;
	font-size: 14px;
	font-weight: 400;
}
.gradient-0 {
	background: radial-gradient(rgb(17 45 81 / 50%), rgb(3 112 184 / 50%));
}

.gradient-1 {
	background: #a2acca;
	background: -webkit-linear-gradient(to right, #93afff, #a2acca);
	background: linear-gradient(to right, #93afff, #a2acca);
}

.gradient-2 {
	background: radial-gradient(#9497ef, #2d1fff);
}
.bg-glass {
	background-color: rgb(255 255 255 / 75%) !important;
	backdrop-filter: saturate(10%) blur(5px);
}
.navbar-toggler-icon.icon-white {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")
}
.header-notifications-list-new {
	overflow-y: auto !important;
	max-height: 400px;
}
.shadow-end:not(.td-1-sticky) {
	position: relative;
}
input[readonly],
.form-control[readonly] {
	background-color: #e9ecef;
}
.shadow-end:not(.td-1-sticky):after {
	content: '';
	width: 5px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(90deg, #dee2e64a, #efefef29, transparent);
}
@media screen {
	table.td-1-sticky tr td:nth-child(1),
	table.td-1-sticky tr th:nth-child(1) {
		position: sticky;
		left: 0;
		background-color:#fff;
		z-index: 1;
	}
	table.td-1-sticky.shadow-end tr td:nth-child(1):after,
	table.td-1-sticky.shadow-end tr th:nth-child(1):after {
		content: '';
		width: 5px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background: linear-gradient(90deg, #dee2e64a, #efefef29, transparent);
	}
	table.dataTable>thead .sorting:before, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_desc_disabled:before {
		content: "";
		right: 0.6em;
		top: 0.6em;
		width: 0px;
		height: 0px;
		border-width: 4px;
		border-color: transparent;
		border-bottom-color: #090911;
		border-style: solid;
	}
	table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:after {
		content: "" !important;
		right: 0.6em !important;
		top: 1.35em !important;
		width: 0px !important;
		height: 0px !important;
		border-width: 4px;
		border-color: transparent;
		border-top-color: #090911;
		border-style: solid;
	}
}
body {
	background-color:#ffffff;
}
body:has(.loader.loading) {
	overflow: hidden;
}
.loader {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	margin-top: -60px;
	display: none;
}
.loader.loading {
	display: block;
	cursor: wait;
}
.loader.loading:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #0000002b;
	z-index: 2000;
}
.loader.loading:before {
	z-index: 2000;
	content: "\eb45";
	font-family: 'boxicons';
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: transparent;
	font-size: 3em;
	color: #0a152e;
	line-height: 100vh;
	text-align: center;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}
/*@-webkit-keyframes spin
{
    0%
    {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin
{
    0%
    {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}*/
*{
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
*::-webkit-scrollbar {
	width: var(--scroll-size);
	height: var(--scroll-size);
}
*::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb);
	border-radius: calc(var(--scroll-size) / 2);
}
*::-webkit-scrollbar-track {
	background: var(--scroll-track);
	border-radius: calc(var(--scroll-size) / 2);
}
.scrollbar-hidden {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar {
	display: none;
}
.social-icon {
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	transition: background-color 0.3s ease-in-out, color 0.4s ease-in-out;
}
.social-icon:hover {
	background-color: #f8f9fa;
	color: #212529 !important;
	text-shadow: 0px 1px 1px #212529;
	box-shadow: 0 0 5px 0 #5c5d5e;
}
.max-h-82vh {
	max-height: 82vh !important;
	overflow-y: auto !important;
}
.max-h-73vh {
	max-height: 73vh !important;
	overflow-y: auto !important;
}
.max-h-72vh {
	max-height: 72vh !important;
	overflow-y: auto !important;
}
.max-h-71vh {
	max-height: 71vh !important;
	overflow-y: auto !important;
}
.max-h-70vh {
	max-height: 70vh !important;
	overflow-y: auto !important;
}
.max-h-63vh {
	max-height: 63vh !important;
	overflow-y: auto !important;
}
input[type="time"].hide-icon::-webkit-calendar-picker-indicator {
	background: none;
	display:none;
}
/*.sidebar-wrapper .metismenu .mm-active>a, .sidebar-wrapper .metismenu a:active, .sidebar-wrapper .metismenu a:focus, .sidebar-wrapper .metismenu a:hover {
	border-radius: 10px;
}*/
/* Timepicker */
.picker--time .picker__holder {
	box-shadow: 0 5px 5px 0px rgb(65 96 108 / 27%) !important;
	border-radius: 5px;
	max-width: 220px;
	max-height: 220px;
}
.picker__input:disabled {
	background-color: #e9ecef !important;
}
/* Datepicker Plugin */
.datepicker + .picker {
	min-width: 250px;
}
.picker__holder {
	display: none;
	box-shadow: 0 5px 5px 0px rgb(65 96 108 / 27%);
	border-radius: 10px;
	max-width: 350px;
}
.picker--opened .picker__holder {
	display: block;
}
.picker__holder * {
	font-family: 'Poppins';
	font-weight: 400;
}
.picker__select--year {
	width: 25%;
	border: none;
	outline: none;
	cursor: pointer;
}
.picker__select--month {
	width: 38%;
	border: none;
	outline: none;
	cursor: pointer;
}
.picker__nav--prev,
.picker__nav--next {
	padding: .5em;
}
.picker__nav--prev {
	left: 0;
}
.picker__nav--next {
	right: 0;
}
@media (min-width: 24.5em) {
	.picker__nav--prev,
	.picker__nav--next {
		padding: .5em;
	}
}
.picker__day {
	border-radius: 5px;
}
.picker__day--highlighted {
	border-color: #0a152e;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
	color:#fff;
	background: #212529;
}
.picker__day--infocus:not(.picker__day--highlighted):hover,
.picker__day--outfocus:not(.picker__day--highlighted):hover {
	color: #000;
	background: #f2f2f7;
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
    border-radius: 5px;
	background: #f2f2f7;
}
.picker__button--today:hover, .picker__button--clear:hover, .picker__button--close:hover {
	background: #f2f2f7;
	border-bottom-color: #f2f2f7;
	font-weight: 500;
	border-radius: 5px;
}
.picker__day--today:before,
.picker__button--today:before {
	border-top-color: #b9c0c7;
}
/* Bs tooltip */
.tooltip-inner:has(*) {
	padding: 0;
	text-align: start;
	background-color:#fff;
	color: #000;
	border: 1px solid #dbdbdb;
}
.tooltip-inner > * {
	font-weight: 400;
	font-size: .9em;
	padding: 0.3em 0.6em;
}
.tooltip-inner > *:nth-child(1) {
	display: block;
	font-weight: 600;
	border-bottom: 1px solid #dbdbdb;
	background-color: #efefef;
}
.tooltip-inner > *:nth-child(2) {
	display: block;
	margin: 0;
	color: #606060;
	line-height: 1.3;
}
.bs-tooltip-auto[data-popper-placement^=bottom]:has(.tooltip-inner *) .tooltip-arrow::before,
.bs-tooltip-bottom:has(.tooltip-inner *) .tooltip-arrow::before {
	border-bottom-color: #efefef;
}
.bs-tooltip-auto[data-popper-placement^=top]:has(.tooltip-inner *) .tooltip-arrow::before,
.bs-tooltip-top:has(.tooltip-inner *) .tooltip-arrow::before {
	border-top-color: #efefef;
}
.bs-tooltip-auto[data-popper-placement^=left]:has(.tooltip-inner *) .tooltip-arrow::before,
.bs-tooltip-left:has(.tooltip-inner *) .tooltip-arrow::before {
	border-left-color: #efefef;
}
.bs-tooltip-auto[data-popper-placement^=right]:has(.tooltip-inner *) .tooltip-arrow::before,
.bs-tooltip-right:has(.tooltip-inner *) .tooltip-arrow::before {
	border-right-color: #efefef;
}
.tooltip:has(.tooltip-inner *).show {
	opacity: 1;
}
/*-------------------------------{ Slide Animation CSS start }-------------------------------*/
.slideLeft,
.slideRight,
.slideDown,
.slideUp {
	transition: transform 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.slideLeft,
	.slideRight,
	.slideDown,
	.slideUp {
		transition: none;
	}
}
.slideDown:not(.show) {
	transform: translateY(-100%);
}
.slideUp:not(.show) {
	transform: translateY(100%);
}
.slideLeft:not(.show) {
	transform: translateX(100%);
}
.slideRight:not(.show) {
	transform: translateX(-100%);
}
.modal.slideLeft:not(.show) .modal-dialog {
	transition: transform 0.3s ease-out;
	transform: translate(-50px, 0);
}
.modal.slideRight:not(.show) .modal-dialog {
	transition: transform 0.3s ease-out;
	transform: translate(-50px, 0);
}
.modal.slideDown:not(.show) .modal-dialog {
	transition: transform 0.3s ease-out;
	transform: translate(0, 50px);
}
.modal.slideUp:not(.show) .modal-dialog {
	transition: transform 0.3s ease-out;
	transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
	.modal.slideLeft .modal-dialog,
	.modal.slideRight .modal-dialog,
	.modal.slideDown .modal-dialog,
	.modal.slideUp .modal-dialog {
		transition: none;
	}
}
/*-------------------------------{ Slide Animation CSS End }-------------------------------*/

/*-------------------------------{ Utility Classes CSS start }-------------------------------*/
.btn-close.dark {
    background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.btn-close.white {
    background: #000 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.text-justify {
	text-align: justify;
}
.modal .btn-close.btn-start {
	margin: -.5rem auto -.5rem -.5rem;
}
.dropdown-item {
	transition: all 0.1s ease-in-out;
}
/*.dropdown-item:hover {*/
/*	color:#fff;*/
/*	background-color: #212529;*/
/*}*/
.bg-warning {
	background-color: var(--bs-orange);
}
.text-warning,
.link-warning {
	color: var(--bs-orange);
}
.dropdown-item.text-primary:hover,
.dropdown-item.link-primary:hover {
	background-color: #0d6efd;
	color:#fff !important;
}
.dropdown-item.text-success:hover,
.dropdown-item.link-success:hover {
	background-color: #198754;
	color:#fff !important;
}
.dropdown-item.text-danger:hover,
.dropdown-item.link-danger:hover {
	background-color: #e04d5b;
	color:#fff !important;
}
.dropdown-item.text-warning:hover,
.dropdown-item.link-warning:hover {
	background-color: var(--bs-orange);
	color:#fff !important;
}
.dropdown-item.text-dark:hover,
.dropdown-item.link-dark:hover {
	background-color: #212529;
	color:#fff !important;
}
.dropdown-item.text-muted:hover,
.dropdown-item.link-muted:hover {
	background-color: #6c757d;
	color: #e7e7e7 !important;
}
.sidebar-close-btn{
	display: block;
	background-color: #090911;
	color:#fff;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	padding: 5px;
	line-height: 50%;
	font-weight: 500;
	position: absolute;
	top: 10px;
	left: calc(100% - (30px / 2));
	border: none;
	box-shadow: 0px 0px 4px 0px #36363680;
}
/* Nav-Tabs/ Nav-Pills Color */
.nav-pills .nav-link.active.dark {
    background-color: #212529;
}
.nav-pills .nav-link.outline-dark {
	border: 1px solid #212529;
	color: #212529;
}
.nav-pills .nav-link.outline-dark:hover,
.nav-pills .nav-link.active.outline-dark {
	border: 1px solid #212529;
	color:#fff;
	background-color: #212529;
}
/* View Password Icons */
.view-password {
    position: relative;
}
.view-password input {
    padding-right: 3em;
}
.view-password .view-password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    background-color: transparent;
}
/* Symbols After/Before */
.rupee:before {
	font-family: 'boxicons' !important;
	content: '\ebf2';
	vertical-align: top;
}
.times-x:before {
	content: '\00D7';
	margin-right: 2px;
}
.square:after {
	content: '\00B2';
	margin-left: 2px;
	font-size: calc(100% * 1.2);
}
.cube:after {
	content: '\00B3';
	margin-left: 2px;
	font-size: calc(100% * 1.2);
}
.hours:after {
	content: 'Hours';
	margin-left: 2px;
	font-weight: 600;
	font-size: 0.9em;
}
.percent:after {
	content: '%';
	margin-left: 2px;
	font-weight: 600;
	font-size: 0.9em;
}
.card-header, .card-body {
	padding: 8px;
}
/* Custom Radio Button like Checkbox Check */
.form-check:has(.radio-check-mark) {
	padding-left: 2em;
}
.form-check .radio-check-mark {
	margin-left: -2em;
}
.check-md[type="checkbox"],
.radio-check-mark[type=radio] {
	border-radius: 5px;
	width: 20px;
	height: 20px;
	margin-top: 0;
	margin-right: 8px;
}
.check-md:checked[type="checkbox"],
.radio-check-mark:checked[type=radio] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22%23ffffff%22%20class%3D%22bi%20bi-check%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M10.97%204.97a.75.75%200%200%201%201.07%201.05l-3.99%204.99a.75.75%200%200%201-1.08.02L4.324%208.384a.75.75%200%201%201%201.06-1.06l2.094%202.093%203.473-4.425a.267.267%200%200%201%20.02-.022z%22%2F%3E%3C%2Fsvg%3E");
	background-color: #0d6efd;
	border-color: #0d6efd;
}
.check-md.check-dark:checked[type="checkbox"],
.radio-check-mark.check-dark:checked[type=radio],
.check-md.check-dark[type=checkbox]:indeterminate,
.radio-check-mark.check-dark[type=checkbox]:indeterminate {
	background-color: #212529;
	border-color: #212529;
}
.check-md.check-success:checked[type="checkbox"],
.radio-check-mark.check-success:checked[type=radio],
.check-md.check-success[type=checkbox]:indeterminate,
.radio-check-mark.check-success[type=checkbox]:indeterminate {
	background-color: #198754;
	border-color: #198754;
}
.check-md.check-danger:checked[type="checkbox"],
.radio-check-mark.check-danger:checked[type=radio],
.check-md.check-danger[type=checkbox]:indeterminate,
.radio-check-mark.check-danger[type=checkbox]:indeterminate {
	background-color: #dc3545;
	border-color: #dc3545;
}
.has-arrow {
    position: relative;
    cursor: pointer;
}
.has-arrow:after {
    content: '';
    width: 25px;
    height: 18px;
    position: absolute;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b5b5b5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-90deg);
    background-repeat: no-repeat;
    right: 0;
    top: calc(50% - 9px);
}
.has-arrow.arrow-down:after {
    transform: rotate(0deg);
}
.active-mark:before,
.inactive-mark:before {
	content: '\ec9b';
	font-family: 'boxicons';
	vertical-align: middle;
	margin-right: 5px;
	line-height: normal;
}
.sent-mark:before,
.delivered-mark:before,
.failed-mark:before,
.pending-mark:before {
	content: '\ea46';
	font-family: 'boxicons';
	vertical-align: middle;
	margin-right: 5px;
	line-height: normal;
}
.failed-mark:before {
	content: '\eac7';
	font-family: 'boxicons';
	vertical-align: middle;
	margin-right: 5px;
	line-height: normal;
}
.pending-mark:before {
	content: '\edee';
	font-family: 'boxicons';
	vertical-align: middle;
	margin-right: 5px;
	line-height: normal;
}
.sent-mark,
.delivered-mark,
.active-mark {
	color: #07d707;
}
.pending-mark,
.inactive-mark {
	color: #b7b6b6;
}
.failed-mark {
	color: #ff0018;
}
.btn:focus,
.form-select:focus,
.form-check:focus,
.form-control:focus {
	box-shadow: none !important;
}
/* Input group button border */
.border-input {
    border-color: #ced4da;
}
.form-control:focus + .border-input {
	border-color: #86b7fe !important;
}
/* BS Switch */
.form-check-input:focus {
    box-shadow: none;
}
.form-switch .form-check-input.switch-md {
	height: 1.3em;
	width: 2.5em;
	margin-top: 0.1em;
}
/* Switch Dark */
.form-check-input.switch-dark:focus{
    border-color: #202529;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23212529'/></svg>");
}
.form-check-input.switch-dark:checked {
    background-color: #202529;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
    border-color: #202529;
}
/* Switch Danger */
.form-check-input.switch-danger:focus{
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23dc3545'/></svg>");
}
.form-check-input.switch-danger:checked {
    background-color: #dc3545;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
    border-color: #dc3545;
}
/* Floating Label */
.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
	opacity: 1;
	transform: scale(.85) translateY(-1rem) translateX(0.5rem);
	background-color:#fff;
	padding: 5px;
	height: fit-content;
}
/* Image Thumb & Image Upload Preview */
.img-thumb {
	user-select: none;
    position: relative;
    padding: 4px;
    border: 1px solid #00000066;
    border-radius: 10px;
    box-shadow: 1px 1px 4px -1px #000000ad;
}
.img-thumb > img,
.img-thumb > video {
    border-radius: 6px;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.img-thumb > .thumb-action {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	font-size: 1.2em;
	z-index: 1;
}
.img-thumb > .thumb-action.bright{
	color:#fff;
	font-size: 0.9em;
}
.img-thumb > .thumb-action.bright:before {
	content: '';
	position: absolute;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	margin: 4px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 6px;
	z-index: -1;
	backdrop-filter: brightness(0.5);
	background-color: #000;
	opacity: 0.5;
}
.img-thumb:hover > .thumb-action,
.img-thumb.hover > .thumb-action {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 5px;
	opacity: 1;
	backdrop-filter: blur(1px);
}
.img-thumb .thumb-action .thumb-action-btn {
	cursor: pointer;
	background-color:#ffffff;
	border-radius: 5px;
	padding: 1px 5px;
	color: #090911;
	box-shadow: 0px 0px 5px 0px #090911;
}
.img-thumb .thumb-action .thumb-action-btn:hover {
	background-color: #090911;
	color:#fffcfc;
	box-shadow: 0px 0px 5px 1px#ffffff;
}
.img-thumb .thumb-action .thumb-action-btn.danger:hover {
	background-color: #fb1515;
	color:#fffcfc;
	box-shadow: 0px 0px 5px 1px #ff0000;
}
.img-thumb.thumb-add{
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    font-size: 80%;
    line-height: 1;
}
.img-thumb.thumb-add:before {
    position: absolute;
    content: '';
    background-color: #12405a9c;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    opacity: 10%;
    border-radius: 6px;
}
.img-thumb.thumb-add input[type="file"]{
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
}
.img-thumb.thumb-add i {
    font-size: 30px;
}
.img-thumb.thumb-add .thumb-add-progress {
    opacity: 1;
    position: absolute;
    border: none;
    width: 90%;
    margin: auto;
    height: 5px;
    transition: opacity 0.1s ease-out;
}
.img-thumb.thumb-add .thumb-add-progress::-webkit-progress-bar{
    background-color: var(--scroll-track);
    border-radius: 5px;
}
.img-thumb.thumb-add .thumb-add-progress::-webkit-progress-value{
    background-color: var(--scroll-thumb);
    border-radius: 5px;
}
.img-thumb.thumb-add .thumb-add-progress[value=""],
.img-thumb.thumb-add .thumb-add-progress[value="0"]{
    opacity: 0;
}
.img-thumb.thumb-add .thumb-add-progress[value="100"]::-webkit-progress-value{
    background-color: #2ab552;
}
.img-thumb.thumb-add .thumb-add-progress[value="100"]{
    transition-delay: 3s;
    opacity: 0;
}
/* Cursor */
[cursor-pointer],
.cursor-pointer{
	cursor: pointer!important;
}
[cursor-default],
.cursor-default{
	cursor: default!important;
}
[cursor-move],
.cursor-move{
	cursor: move!important;
}
.btn-online,
.btn-offline {
	position: relative;
	border-radius: 2em;
}
.btn-online:hover {
	color:#fff;
}
.btn-offline:hover {
	color: #8b8888;
}
.btn-online {
	padding: 0.25em 1.8em 0.25em 0.5em;
	background-color: #33c333;
	border: 1px solid #049107;
	color:#fff;
	box-shadow: inset -2px 0px 7px -2px #00000087;
}
.btn-offline {
	padding: 0.25em 0.5em 0.25em 1.8em;
	background-color: #646363;
	border: 1px solid #646363;
	color: #8b8888;
	box-shadow: inset 2px 0px 7px -2px #000000b0;
	text-shadow: 0 0 5px #0e0e0e;
}
.btn-offline:after, .btn-online:after {
	--btn-size: 15px;
	content: '';
	width: var(--btn-size);
	height: var(--btn-size);
	position: absolute;
	border-radius: 50%;
	top: calc(50% - (var(--btn-size) / 2) );
}
.btn-online:after {
	background-color: #2dff00;
	right: 7px;
	box-shadow: inset 0px 0px 5px -1px #020202a8;
}
.btn-offline:after {
	background-color: #5f625f;
	left: 5px;
	box-shadow: inset 0px 0px 5px -1px #000000ad;
}
/* Hover Background Color */
.hover-bg-success,
.hover-bg-danger,
.hover-bg-primary,
.hover-bg-warning,
.hover-bg-dark,
.hover-bg-white,
.hover-bg-light,
.hover-success,
.hover-danger,
.hover-primary,
.hover-warning,
.hover-dark,
.hover-white,
.hover-light,
.hover-text-danger,
.hover-text-warning,
.hover-text-success,
.hover-text-primary,
.hover-text-dark,
.hover-text-white,
.hover-text-light {
	transition: all 0.2s ease-in-out;
}
.bg-danger.btn-hover:hover,
.btn-danger.btn-hover:hover {
	--bs-danger-rgb: 215, 0, 50;
	/*box-shadow: inset 1px 1px 3px -1px #a30112, 1px 1px 2px 0px #b90f0b;*/
	box-shadow: inset 1px 1px 3px -1px #a30112;
}
.bg-success.btn-hover:hover,
.btn-success.btn-hover:hover {
	--bs-success-rgb: 0, 165, 0;
	/*box-shadow: inset 1px 1px 3px -1px #035600, 1px 1px 2px 0px #098704;*/
	box-shadow: inset 1px 1px 3px -1px #035600;
}
.hover-bg-success:hover,
.hover-success:hover {
	background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important;
	color: #212529!important;
	border-color: #198754 !important;
}
.hover-bg-danger:hover,
.hover-danger:hover{
	background-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important;
	color: #f8f9fa!important;
	border-color: #dc3545 !important;
}
.hover-bg-primary:hover,
.hover-primary:hover{
	background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important;
	color: #f8f9fa!important;
	border-color: #0d6efd !important;
}
.hover-bg-warning:hover,
.hover-warning:hover{
	background-color: rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important;
	color: #f8f9fa!important;
	border-color: #ffaa00 !important;
}
.hover-bg-dark:hover,
.hover-dark:hover{
	background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important;
	color: #f8f9fa!important;
	border-color: #212529 !important;
}
.hover-bg-white:hover,
.hover-white:hover{
	background-color: rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important;
	color: #212529!important;
	border-color:#ffffff !important;
}
.hover-bg-light:hover,
.hover-light:hover{
	background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
	color: #212529!important;
	border-color: #f8f9fa !important;
}
/* Hover Text Color */
.hover-text-danger:hover{
  color: #dc3545!important;
}
.hover-text-warning:hover{
  color: #fd7e14!important;
}
.hover-text-success:hover{
  color: #198754!important;
}
.hover-text-primary:hover{
  color: #0d6efd!important;
}
.hover-text-dark:hover{
  color: #212529!important;
}
.hover-text-white:hover{
  color:#ffffff!important;
}
.hover-text-light:hover{
	color: #f8f9fa!important;
}
/* Same Width & height */
[class^="wh-"] {
	overflow: hidden;
	text-align: center;
}
.wh-10 {
	width: 10px !important;
	height: 10px !important;
}
.wh-15 {
	width: 15px !important;
	height: 15px !important;
}
.wh-20 {
	width: 20px !important;
	height: 20px !important;
}
.wh-25 {
	width: 25px !important;
	height: 25px !important;
}
.wh-30 {
	width: 30px !important;
	height: 30px !important;
}
.wh-35 {
	width: 35px !important;
	height: 35px !important;
}
.wh-40 {
	width: 40px !important;
	height: 40px !important;
}
.wh-45 {
	width: 45px !important;
	height: 45px !important;
}
.wh-50 {
	width: 50px !important;
	height: 50px !important;
}
.wh-60 {
	width: 60px !important;
	height: 60px !important;
}
.wh-70 {
	width: 70px !important;
	height: 70px !important;
}
.wh-80 {
	width: 80px !important;
	height: 80px !important;
}
.wh-90 {
	width: 90px !important;
	height: 90px !important;
}
.wh-100 {
	width: 100px !important;
	height: 100px !important;
}
.wh-110 {
	width: 110px !important;
	height: 110px !important;
}
.wh-120 {
	width: 120px !important;
	height: 120px !important;
}
.wh-140 {
	width: 140px !important;
	height: 140px !important;
}
.wh-150 {
	width: 150px !important;
	height: 150px !important;
}
.wh-200 {
	width: 200px !important;
	height: 200px !important;
}
/* Aspect Ratio */
.as-ratio-1x1 {
	aspect-ratio: 1/1 !important;
}
.as-ratio-4x3 {
	aspect-ratio: 4/3 !important;
}
.as-ratio-3x4 {
	aspect-ratio: 3/4 !important;
}
.as-ratio-16x9 {
	aspect-ratio: 16/9 !important;
}
.as-ratio-9x16 {
	aspect-ratio: 9/16 !important;
}
/* object-fit */
.object-fit-none {
	object-fit: none !important;
}
.object-fit-cover {
	object-fit: cover !important;
}
.object-fit-contain {
	object-fit: contain !important;
}
.object-fit-fill {
	object-fit: fill !important;
}
.object-fit-scale-down {
	object-fit: scale-down !important;
}
/* min-width */
.min-w-50 {
	min-width: 50px!important;
}
.min-w-100 {
	min-width: 100px!important;
}
.min-w-150 {
	min-width: 150px!important;
}
.min-w-200 {
	min-width: 200px!important;
}
.min-w-250 {
	min-width: 250px!important;
}
.min-w-300 {
	min-width: 300px!important;
}
.min-w-350 {
	min-width: 350px!important;
}
.min-w-400 {
	min-width: 400px!important;
}
.min-w-450 {
	min-width: 450px!important;
}
.min-w-500 {
	min-width: 500px!important;
}
.min-w-550 {
	min-width: 550px!important;
}
/* max-width */
.max-w-none {
	max-width: unset !important;
}
.max-w-50 {
	max-width: 50px!important;
}
.max-w-100 {
	max-width: 100px!important;
}
.max-w-150 {
	max-width: 150px!important;
}
.max-w-200 {
	max-width: 200px!important;
}
.max-w-250 {
	max-width: 250px!important;
}
.max-w-300 {
	max-width: 300px!important;
}
.max-w-350 {
	max-width: 350px!important;
}
.max-w-400 {
	max-width: 400px!important;
}
.max-w-450 {
	max-width: 450px!important;
}
.max-w-500 {
	max-width: 500px!important;
}
.max-w-550 {
	max-width: 550px!important;
}
.max-w-600 {
	max-width: 600px!important;
}
.max-w-700 {
	max-width: 700px!important;
}
.max-w-800 {
	max-width: 800px!important;
}
.max-w-900 {
	max-width: 900px!important;
}
.max-w-1000 {
	max-width: 1000px!important;
}
/* min-heigth */
.min-h-50 {
	min-height: 50px!important;
}
.min-h-100 {
	min-height: 100px!important;
}
.min-h-150 {
	min-height: 150px!important;
}
.min-h-200 {
	min-height: 200px!important;
}
.min-h-250 {
	min-height: 250px!important;
}
.min-h-300 {
	min-height: 300px!important;
}
.min-h-350 {
	min-height: 350px!important;
}
.min-h-400 {
	min-height: 400px!important;
}
.min-h-450 {
	min-height: 450px!important;
}
.min-h-500 {
	min-height: 500px!important;
}
.min-h-550 {
	min-height: 550px!important;
}
/* max-heigth */
.max-h-none {
	max-height: unset !important;
}
.max-h-50 {
	max-height: 50px!important;
}
.max-h-100 {
	max-height: 100px!important;
}
.max-h-150 {
	max-height: 150px!important;
}
.max-h-200 {
	max-height: 200px!important;
}
.max-h-250 {
	max-height: 250px!important;
}
.max-h-300 {
	max-height: 300px!important;
}
.max-h-350 {
	max-height: 350px!important;
}
.max-h-400 {
	max-height: 400px!important;
}
.max-h-450 {
	max-height: 450px!important;
}
.max-h-500 {
	max-height: 500px!important;
}
.max-h-550 {
	max-height: 550px!important;
}
.max-h-600 {
	max-height: 600px!important;
}
.max-h-700 {
	max-height: 700px!important;
}
.max-h-800 {
	max-height: 800px!important;
}
.max-h-900 {
	max-height: 900px!important;
}
.max-h-1000 {
	max-height: 1000px!important;
}
/* overflow-x */
.ox-scroll{
	overflow-x: scroll !important;
}
.ox-clip{
	overflow-x: clip !important;
}
.ox-hidden{
	overflow-x: hidden !important;
}
.ox-auto{
	overflow-x: auto !important;
}
.ox-none{
	overflow-x: unset !important;
}

.oy-scroll{
	overflow-y: scroll !important;
}
.oy-clip{
	overflow-y: clip !important;
}
.oy-hidden{
	overflow-y: hidden !important;
}
.oy-auto{
	overflow-y: auto !important;
}
.oy-none{
	overflow-y: unset !important;
}

.o-scroll{
	overflow: scroll !important;
}
.o-clip{
	overflow: clip !important;
}
.o-hidden{
	overflow: hidden !important;
}
.o-auto{
	overflow: auto !important;
}
.o-none{
	overflow: unset !important;
}
/* z-index */
.zi-0{
	z-index: 0 !important;
}
.zi-1{
	z-index: 1 !important;
}
.zi-2{
	z-index: 2 !important;
}
.zi-3{
	z-index: 3 !important;
}
.zi-4{
	z-index: 4 !important;
}
/* negative z-index */
.zi-n1{
	z-index: -1 !important;
}
.zi-n2{
	z-index: -2 !important;
}
.zi-n3{
	z-index: -3 !important;
}
.zi-n4{
	z-index: -4 !important;
}
/* Negative margin all sides */
.m-n1 {
	margin: -.25rem!important;
}
.m-n2 {
	margin: -.5rem!important;
}
.m-n3 {
	margin: -1rem!important;
}
.m-n4 {
	margin: -1.5rem!important;
}
.m-n5 {
	margin: -3rem!important;
}
/* Negative margin left and right sides */
.mx-n1 {
	margin-left: -.25rem!important;
	margin-right: -.25rem!important;
}
.mx-n2 {
	margin-left: -.5rem!important;
	margin-right: -.5rem!important;
}
.mx-n3 {
	margin-left: -1rem!important;
	margin-right: -1rem!important;
}
.mx-n4 {
	margin-left: -1.5rem!important;
	margin-right: -1.5rem!important;
}
.mx-n5 {
	margin-left: -3rem!important;
	margin-right: -3rem!important;
}
/* Negative margin top and bottom sides */
.my-n1 {
	margin-top: -.25rem!important;
	margin-bottom: -.25rem!important;
}
.my-n2 {
	margin-top: -.5rem!important;
	margin-bottom: -.5rem!important;
}
.my-n3 {
	margin-top: -1rem!important;
	margin-bottom: -1rem!important;
}
.my-n4 {
	margin-top: -1.5rem!important;
	margin-bottom: -1.5rem!important;
}
.my-n5 {
	margin-top: -3rem!important;
	margin-bottom: -3rem!important;
}
/* Negative margin left sides */
.ms-n1 {
	margin-left: -.25rem!important;
}
.ms-n2 {
	margin-left: -.5rem!important;
}
.ms-n3 {
	margin-left: -1rem!important;
}
.ms-n4 {
	margin-left: -1.5rem!important;
}
.ms-n5 {
	margin-left: -3rem!important;
}
/* Negative margin right sides */
.me-n1 {
	margin-right: -.25rem!important;
}
.me-n2 {
	margin-right: -.5rem!important;
}
.me-n3 {
	margin-right: -1rem!important;
}
.me-n4 {
	margin-right: -1.5rem!important;
}
.me-n5 {
	margin-right: -3rem!important;
}
/* Negative margin top sides */
.mt-n1 {
	margin-top: -.25rem!important;
}
.mt-n2 {
	margin-top: -.5rem!important;
}
.mt-n3 {
	margin-top: -1rem!important;
}
.mt-n4 {
	margin-top: -1.5rem!important;
}
.mt-n5 {
	margin-top: -3rem!important;
}
/* Negative margin bottom sides */
.mb-n1 {
	margin-bottom: -.25rem!important;
}
.mb-n2 {
	margin-bottom: -.5rem!important;
}
.mb-n3 {
	margin-bottom: -1rem!important;
}
.mb-n4 {
	margin-bottom: -1.5rem!important;
}
.mb-n5 {
	margin-bottom: -3rem!important;
}
/* Small -sm*/
@media (min-width: 576px) {}
/* Medium -md*/
@media (min-width: 768px) {
	/* Negative margin all sides */
	.m-md-n1 {
		margin: -.25rem!important;
	}
	.m-md-n2 {
		margin: -.5rem!important;
	}
	.m-md-n3 {
		margin: -1rem!important;
	}
	.m-md-n4 {
		margin: -1.5rem!important;
	}
	.m-md-n5 {
		margin: -3rem!important;
	}
	/* Negative margin left and right sides */
	.mx-md-n1 {
		margin-left: -.25rem!important;
		margin-right: -.25rem!important;
	}
	.mx-md-n2 {
		margin-left: -.5rem!important;
		margin-right: -.5rem!important;
	}
	.mx-md-n3 {
		margin-left: -1rem!important;
		margin-right: -1rem!important;
	}
	.mx-md-n4 {
		margin-left: -1.5rem!important;
		margin-right: -1.5rem!important;
	}
	.mx-md-n5 {
		margin-left: -3rem!important;
		margin-right: -3rem!important;
	}
	/* Negative margin top and bottom sides */
	.my-md-n1 {
		margin-top: -.25rem!important;
		margin-bottom: -.25rem!important;
	}
	.my-md-n2 {
		margin-top: -.5rem!important;
		margin-bottom: -.5rem!important;
	}
	.my-md-n3 {
		margin-top: -1rem!important;
		margin-bottom: -1rem!important;
	}
	.my-md-n4 {
		margin-top: -1.5rem!important;
		margin-bottom: -1.5rem!important;
	}
	.my-md-n5 {
		margin-top: -3rem!important;
		margin-bottom: -3rem!important;
	}
	/* Negative margin left sides */
	.ms-md-n1 {
		margin-left: -.25rem!important;
	}
	.ms-md-n2 {
		margin-left: -.5rem!important;
	}
	.ms-md-n3 {
		margin-left: -1rem!important;
	}
	.ms-md-n4 {
		margin-left: -1.5rem!important;
	}
	.ms-md-n5 {
		margin-left: -3rem!important;
	}
	/* Negative margin right sides */
	.me-md-n1 {
		margin-right: -.25rem!important;
	}
	.me-md-n2 {
		margin-right: -.5rem!important;
	}
	.me-md-n3 {
		margin-right: -1rem!important;
	}
	.me-md-n4 {
		margin-right: -1.5rem!important;
	}
	.me-md-n5 {
		margin-right: -3rem!important;
	}
	/* Negative margin top sides */
	.mt-md-n1 {
		margin-top: -.25rem!important;
	}
	.mt-md-n2 {
		margin-top: -.5rem!important;
	}
	.mt-md-n3 {
		margin-top: -1rem!important;
	}
	.mt-md-n4 {
		margin-top: -1.5rem!important;
	}
	.mt-md-n5 {
		margin-top: -3rem!important;
	}
	/* Negative margin bottom sides */
	.mb-md-n1 {
		margin-bottom: -.25rem!important;
	}
	.mb-md-n2 {
		margin-bottom: -.5rem!important;
	}
	.mb-md-n3 {
		margin-bottom: -1rem!important;
	}
	.mb-md-n4 {
		margin-bottom: -1.5rem!important;
	}
	.mb-md-n5 {
		margin-bottom: -3rem!important;
	}
}
/* Large -lg*/
@media (min-width: 992px) {}
/* Extra Large -xl*/
@media (min-width: 1200px) {}
/* Extra Extra Large -xxl*/
@media (min-width: 1400px) {}
.rounded-4 {
	border-radius: 1em;
}
.btn-outline-grey {
	color: grey;
	border-color: grey;
}
.btn-outline-grey:hover {
	color: #000;
	background-color: #ced4da;
	border-color: #000;
}
.btn-dark-hover{
	border: 1px solid #dee2e6 !important;
	color: #212529;
	background-color: transparent;
}
.btn-dark-hover:hover{
	border-color: #101928 !important;
}
.btn-dark-hover:active{
	background-color: #101928;
	border-color: #101928;
	color:#fff;
}
.border-dash {
	border: 1px dashed #d1cbcb;
}
.scale-90{
	transform: scale(0.9);
}
.scale-80{
	transform: scale(0.8);
}
.scale-70{
	transform: scale(0.7);
}
.scale-60{
	transform: scale(0.6);
}
.scale-50{
	transform: scale(0.5);
}
/* trasnform-origin */
.tr-origin-start{
	transform-origin: left;
}
.tr-origin-end{
	transform-origin: right;
}
.tr-origin-top{
	transform-origin: top;
}
.tr-origin-bottom{
	transform-origin: bottom;
}
.tr-origin-center{
	transform-origin: center;
}
/* Font Size */
.fs-7 {
	font-size: 0.75rem!important;
}
.fs-8 {
	font-size: 0.50rem!important;
}
.fs-9 {
	font-size: 0.25rem!important;
}
.fs-10 {
	font-size: 0.15rem!important;
}
/* Font Weight */
[class^="fw-"] .fw-400,
.fw-400,
.fw-400 *{
	font-weight: 400;
}
[class^="fw-"] .fw-500,
.fw-500,
.fw-500 *{
	font-weight: 500;
}
/* Border Radius */
.rounded-05{
	border-radius: 5px !important;
}
.rounded-10{
	border-radius: 10px !important;
}
.rounded-15{
	border-radius: 15px !important;
}
.rounded-20{
	border-radius: 20px !important;
}
.rounded-30{
	border-radius: 30px !important;
}
.rounded-40{
	border-radius: 40px !important;
}
.rounded-50{
	border-radius: 50px !important;
}
.rounded-start-05{
	border-top-left-radius: 5px !important;
	border-bottom-left-radius: 5px !important;
}
.rounded-start-10{
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}
.rounded-start-15{
	border-top-left-radius: 15px !important;
	border-bottom-left-radius: 15px !important;
}
.rounded-start-20{
	border-top-left-radius: 20px !important;
	border-bottom-left-radius: 20px !important;
}
.rounded-start-30{
	border-top-left-radius: 30px !important;
	border-bottom-left-radius: 30px !important;
}
.rounded-start-40{
	border-top-left-radius: 40px !important;
	border-bottom-left-radius: 40px !important;
}
.rounded-start-50{
	border-top-left-radius: 50px !important;
	border-bottom-left-radius: 50px !important;
}
.rounded-end-05{
	border-top-right-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
}
.rounded-end-10{
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}
.rounded-end-15{
	border-top-right-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
}
.rounded-end-20{
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
}
.rounded-end-30{
	border-top-right-radius: 30px !important;
	border-bottom-right-radius: 30px !important;
}
.rounded-end-40{
	border-top-right-radius: 40px !important;
	border-bottom-right-radius: 40px !important;
}
.rounded-end-50{
	border-top-right-radius: 50px !important;
	border-bottom-right-radius: 50px !important;
}
.rounded-top-05{
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
}
.rounded-top-10{
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
}
.rounded-top-15{
	border-top-left-radius: 15px !important;
	border-top-right-radius: 15px !important;
}
.rounded-top-20{
	border-top-left-radius: 20px !important;
	border-top-right-radius: 20px !important;
}
.rounded-top-30{
	border-top-left-radius: 30px !important;
	border-top-right-radius: 30px !important;
}
.rounded-top-40{
	border-top-left-radius: 40px !important;
	border-top-right-radius: 40px !important;
}
.rounded-top-50{
	border-top-left-radius: 50px !important;
	border-top-right-radius: 50px !important;
}
.rounded-bottom-05{
	border-bottom-left-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
}
.rounded-bottom-10{
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}
.rounded-bottom-15{
	border-bottom-left-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
}
.rounded-bottom-20{
	border-bottom-left-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
}
.rounded-bottom-30{
	border-bottom-left-radius: 30px !important;
	border-bottom-right-radius: 30px !important;
}
.rounded-bottom-40{
	border-bottom-left-radius: 40px !important;
	border-bottom-right-radius: 40px !important;
}
.rounded-bottom-50{
	border-bottom-left-radius: 50px !important;
	border-bottom-right-radius: 50px !important;
}
.rounded-start-pill {
	border-top-left-radius: 50rem!important;
	border-bottom-left-radius: 50rem!important;
}
.rounded-end-pill {
	border-top-right-radius: 50rem!important;
	border-bottom-right-radius: 50rem!important;
}
.rounded-top-inherit{
	border-top-left-radius: inherit !important;
	border-top-right-radius: inherit !important;
}
.rounded-bottom-inherit{
	border-bottom-left-radius: inherit !important;
	border-bottom-right-radius: inherit !important;
}
/*-------------------------------{ Utility Classes CSS end }-------------------------------*/

/*----------------------------{ DataTable Responsive CSS start }----------------------------*/
.dataTables_wrapper .row:nth-child(2) {
    overflow-x: auto;
}
.modal-body{
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/*-----------------------------{ DataTable Responsive CSS end }-----------------------------*/

/*-------------------------------{ Sidebar CSS start }-------------------------------*/
.bg-sidebar{
	background-color:#80b3ff;
	color:#fff;
}
.bg-sidebar * {
    color:#fff;
}
.paginate_button .page-link {
	border-radius: 0 !important;
}
/*
.sidebar-wrapper {
	width: 80px;
	overflow-y: auto;
	overflow-x: hidden;
}
.page-wrapper{
	margin-left: 80px;
	transition: margin-left .3s ease-in-out;
}
.page-footer{
	left: 80px;
	transition: left .3s ease-in-out;
}
.sidebar-header {
	height: 60px;
	border-bottom: none;
	-webkit-box-shadow: -5px 2px 6px 0 rgb(218 218 253 / 65%), -5px 0px 6px 0 rgb(206 206 238 / 54%);
	box-shadow: -5px 2px 6px 0 rgb(218 218 253 / 65%), -5px 0px 6px 0 rgb(206 206 238 / 54%);
}
.close-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: calc(50% - (25px / 2));
	width: 30px;
	height: 30px;
	border-radius: 50%;
	line-height: 25px;
	text-align: center;
	background-color: #000;
	color:#fff;
	font-size: 20px;
	cursor: pointer;
	border: 2px solid #4b4b4d;
	box-shadow: 0 0 2px 0 #828384;
}
.simplebar-track.simplebar-horizontal{
	display: none;
}
.sidebar-wrapper .metismenu{
	position: relative;
	width: 80px;
}
.metismenu .has-arrow:after{
	right: 0;
}
.metismenu .has-arrow[aria-expanded=true]:after, .metismenu .mm-active>.has-arrow:after {
	transform: rotate(135deg);
}
.sidebar-wrapper .metismenu ul {
	border: 1px solid #ededed;
	background:#fff;
	border-width: 0 0 0 2px;
}
.sidebar-wrapper .metismenu>li {
	position: unset; 
}
.metismenu li .menu-title{
	display: none;
}
.mm-collapsing,.mm-collapse{
	display: none;
}
.metismenu li ul.mm-collapse{
	position: absolute;
	top: 0;
	left: 80px;
	width: 170px;
	height: 0px;
}
.metismenu li ul.mm-collapse.mm-show{
	display: block;
	bottom: 0;
	height: 100vh;
}
*/
/* change when vw > 1024px */
/*
@media (max-width: 1024px){
	.page-wrapper{
		margin-left: 0px;
	}
	.page-footer{
		left: 0px;
	}
}
.menu-icons{
	width: 30px;
	aspect-ratio: 1;
}
*/
/*------------------------------- { Sidebar CSS end } -------------------------------*/

/*------------------------------ { Customers CSS start } ------------------------------*/
.profile-image {
    position: relative;
    user-select: none;
}
.btn-action {
    position: absolute;
    width: 15px;
    aspect-ratio: 1;
    height: 15px;
    font-size: 16px;
    line-height: 5px;
    border-radius: 50%;
    padding: 5px 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    text-align: center;
    color:#fff;
    background-color: #0a8ffd;
    outline: 3px solid#fff;
}
.profile-image.dark {
    color: #090911;
}
.profile-image.dark .text {
    background-color: #f1f1f1;
}
.profile-image.dark .btn-action {
    background-color: #090911;
    color:#fff;
    outline-color:#fff;
}
.modal .nav .nav-link.dark{
    color: #212529;
}
.modal .nav .nav-link.dark.active{
    color:#fff;
}
/*------------------------------- { Customers CSS end } -------------------------------*/

/*-------------------------------{ Calendar CSS start }-------------------------------*/
.booking-calendar {
	position: relative;
}
.booking-calendar:after {
	content: '';
	position: absolute;
	right: 12px;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 20px;
	box-shadow: inset -14px 0px 16px -9px #e7e8e9;
}
.current-time-row .current-time{
	--position: 0px;
	position: relative;
}
.current-time-row .current-time:before,
.current-time-row .current-time:after{
	position: absolute;
	z-index: 1;
}
.current-time-row .current-time:before{
	left: -10px;
	top: var(--position);
	content: '';
	height: 2px;
	width: calc(100% + 10px);
	background-color: #dd0000;
}
.current-time-row .current-time:after{
	content: attr(current-time);
	left: -55px;
	top: calc(var(--position) - 10px);
	height: fit-content;
	border: 2px solid #dd0000;
	border-radius: 50px;
	padding: 0 5px;
	font-size: 12px;
	font-weight: bold;
	color: #dd0000;
	background-color: rgb(255 255 255 / 90%);
}
.booking-slot{
	color: #0d6efd;
	padding: 0 3px;
	border-style: solid;
	border-width: 0.5px;
	border-top: none;
	border-color: #d5e1ed;
}
.booking-slot:first-child{
	border-top: 0.5px solid #d5e1ed;
}
.time-overlay{
	cursor: cell;
	display: block;
	opacity: 0;
	padding: 0 8px;
	transition: opacity 0.1s ease-in;
}
.time-overlay.disabled {
	cursor: no-drop;
	opacity: 1;
	position: relative;
	background-color: transparent !important;
}
.time-overlay.disabled::after {
	content: 'Blocked';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: transparent;
	opacity: 0.8;
	background-size: 10px 10px;
	background-image: repeating-linear-gradient(-45deg, #cecbcc 0, #f09782 1px, #e5e5f700 0, #e5e5f700 50%);
	z-index: 0;
	text-align: center;
	color: darkgrey;
	backdrop-filter: sepia(1);
}
.booking-slot:has(.time-overlay.disabled) {
	padding-right: 0px;
	padding-left: 0px;
}
.booking-slot.active{
	height: 25px;
	position: relative;
}
.booking-slot.active .time-overlay, .booking-slot:hover .time-overlay{
	opacity: 1;
	background-color: #d5e1ed;
}
.booking-slot.active .time-overlay{
	color: black;
}
.booking-slot.active .time-overlay{
	position: absolute;
	width: calc(100% - 6px);
}
.booking-slot.active:hover .time-overlay{
	box-shadow: 0px 0px 3px rgb(45 89 133);
}
/*.booking-wrapper:has(div.active) .booking-slot:hover .time-overlay:not(:has(:not(appointment))) {
	opacity: 0;
}*/
.time-overlay.appointment{
	z-index: 1;
	cursor: pointer;
	position: relative;
}
.staff-name {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.staff-name:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 7px;
	background: linear-gradient(to bottom, #e7e8e9, rgba(231, 232, 233, 0));
}
.time-overlay.appointment .appointment-details {
	display: none;
}
.time-overlay.appointment:hover .appointment-details {
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	padding: 5px;
	background-color: white;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 0px #5a739d;
}
.appointment-details:before,
.appointment-details:after {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	transform: rotate(45deg);
	border-bottom-left-radius: 5px;
	z-index: -1;
	top: 50%;
}
.appointment-details:before {
	left: calc(0px - (15px / 2));
	background-color: #c3bfbf;
	box-shadow: -1px 1px 2px -1px #62728dc4;
}
.appointment-details:after {
	left: calc(1px - (15px / 2));
	background-color: white;
}
/*-------------------------------{ Calendar CSS end }-------------------------------*/

/*-------------------------------{ Services Page CSS start }-------------------------------*/
button[aria-controls="categorized-services-list"],
button[aria-controls="not-categorized-services-list"] {
	display: none;
}
.accordion-button:focus,
.accordion-button:not(.collapsed) {
    color: #212529;
    background-color: transparent;
    box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}
.home-wedding-icon {
    width: 30px;
    aspect-ratio: 1;
    object-fit: contain;
    padding: 0.25rem;
    border: 1px solid;
    background-color: white;
    border-radius: 50%;
}
.home-wedding-icon.icon-sm {
    width: 20px;
    border: none;
    border-radius: 0.25rem;
    padding: 0.125rem;
}
.table-fixed-width {
    table-layout: fixed;
}
/**
 * Multi Step Form
 **/
.multi-step-form-s,
.multi-step-form {
    padding: 1rem;
    /*border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem 0.5rem;
    margin: 0.25rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);*/
}
.multi-step-form-nav {
	/**/
}
.multi-step-form-nav-s .multi-step-form-nav-link-s,
.multi-step-form-nav .multi-step-form-nav-link {
	transition: all 0.1s ease-in-out;
}
.multi-step-form-title-s,
.multi-step-form-title {
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    align-items: center;
    margin: 5px auto;
    user-select: none;
    position: relative;
}
.multi-step-form-title-s .tab-number,
.multi-step-form-title .tab-number {
    width: 30px;
    height: 30px;
    background-color: #b7b5b5   ;
    color:#fff;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    z-index: 1;
}
.multi-step-form-title-s .tab-number:after,
.multi-step-form-title .tab-number:after {
    margin: auto;
    content: '';
    width: 50%;
    height: 2px;
    background-color: #b7b5b5   ;
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    z-index: -1;
    border-radius: 3px;
}
.multi-step-form-s .form-step-tab-s:not(.active),
.multi-step-form .form-step-tab:not(.active) {
    display: none;
}
/*.multi-step-form-s .form-step-tab-s.active,
.multi-step-form .form-step-tab.active {
    display: block;
}*/
.multi-step-form-toggles-s,
.multi-step-form-toggles {
    display: flex;
    justify-content: space-between;
    padding: 20px 8px;
    position: sticky;
    bottom: -15px;
    background-color:#fff;
}
.form-toggle-prev-s, .form-toggle-next-s,
.form-toggle-prev, .form-toggle-next {
    user-select: none;
    border: 1px solid #dee2e6;
    cursor: pointer;
    padding: 0.375rem 1rem;
    font-size: .875rem;
    border-radius: 0.2rem;
    box-shadow: inset 0 .125rem .25rem rgba(0,0,0,.075);
}
.form-toggle-prev-s,
.form-toggle-prev {
    background-color: #212529;
    color:#fff;
    border-color: #212529;
}
.form-toggle-prev-s:hover,
.form-toggle-prev:hover {
    background-color: #37383a;
    border-color: #313234;
}
.form-toggle-next-s,
.form-toggle-next {
    margin-left: auto;
    background-color: #0d6efd;
    color:#fff;
    border-color: #0d6efd;
}
.form-toggle-next-s:hover,
.form-toggle-next:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
.form-toggle-submit-s,
.form-toggle-submit {
    display: none;
    margin-left: auto;
}

#addServiceModal input[type="checkbox"]:not([role="switch"]) {
    border-radius: 5em !important;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    margin-top: 0;
    margin-right: 0.5em;
}
#addServiceModal input:checked[type="checkbox"]:not([role="switch"]) {
    background-color: #0db4fd;
    border-color: #0db4fd;
}
.color-selector.select-circle {
	max-height: 30px;
	max-width: 30px;
	width: 30px;
	height: 30px;
	padding: 0;
	caret-color: transparent;
	text-align: center;
	border-radius: 15px!important;
	border: 1px solid #8fbad7;
	background-image: none;
}
.color-selector.rounded .color-option {
	text-align: left;
}
.color-option {
	padding: 2px 5px;
	font-size: 1.2rem;
}
/*-------------------------------{ Services Page CSS ends }-------------------------------*/

/*-------------------------------{ Image Upload Preview CSS start }-------------------------------*/
.sticky-top {
	top: 60px;
	z-index: 1;
}
.sticky-top.top-75px {
	top: 75px;
}
.ms-20{
	margin-left: 20px;
}
.upload-preview-holder{
	padding: 30px;
}
.upload-preview > *:not(:last-child){
	padding: 0 7px 15px;
}
.upload-preview > *:last-child{
	padding: 0 7px 0;
}
.upload-preview .image-container{
	position: relative;
	aspect-ratio:  1 / 1;
	border: 1px solid transparent;
	background-color: var(--bg-color);
}
.image-container{
	position: relative;
}
.image-container, .overlay{
	border-radius: 10px;
	box-shadow: 1px 1px 4px 0px rgb(158 172 191 / 75%);
}
.image-container .action{
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	color: #000;
	background-color:#fff;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 0px rgb(137 141 149 / 75%);
	cursor: pointer;
	z-index: 1;
}
.col-12 .image-container .action{
	font-size: 1.5rem;
	height: 35px;
	width: 35px;
}
.col-6 .image-container .action{
	font-size: 1.2rem;
	height: 25px;
	width: 25px;
	right: 8px;
	top: 8px;
}
.image-container:hover .action{
	display: block;
}
.image-container:hover img{
	filter: blur(1px) grayscale(1);
}
.image-container img{
	border-radius: inherit;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.upload-preview .image-container:hover{
	background-color: var(--bg-color-hover);
}
.upload-select{
	aspect-ratio: 1 / 1;
	position: relative;
}
.upload-select .form-control{
	opacity: 0;
	cursor: pointer;
}
.upload-select .overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
}
.upload-select .overlay svg{
	width: 25px;
	height: 25px;
}
.upload-select .overlay .body .text{
	color: var(--text-color);
	margin: 0;
	padding: 0;
}
.col-6 .upload-select .overlay .body .text {
	font-size: 0.75em;
}
.upload-select:hover .overlay{
	background-color: var(--bg-color-hover);
}
/*-------------------------------{ Image Upload Preview CSS end }-------------------------------*/
/* EMI ICON */
.emi {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-style: solid;
	border-width: 2px;
	border-radius: 10px;
	padding: 5px 10px;
	font-family: helvetica;
	font-weight: bold;
	vertical-align: middle;
	font-size: 15px;
	line-height: 15px;
	margin-bottom: 5px;
	font-style: normal;
}
.emi:before {
	content: 'EMI';
}
/*-------------------------------{ Profile Image CSS start }-------------------------------*/
.profile-image {
	width: 60px;
	height: 60px;
	color: #0a8ffd;
	font-weight: bold;
	border-radius: 50%;
	text-align: center;
	font-size: 25px;
	line-height: 50px;
	padding: 3px;
	border: 2px solid;
	margin: auto;
}
.profile-image.primary{
	--profile-image-bg-color: var(--bs-primary-rgb);
	color: rgba(var(--bs-primary-rgb), 1);
}
.profile-image.black{
	--profile-image-bg-color: var(--bs-black-rgb);
	color: rgba(var(--bs-black-rgb), 1);
}
.profile-image.dark{
	--profile-image-bg-color: var(--bs-dark-rgb);
	color: rgba(var(--bs-dark-rgb), 1);
}
.profile-image.warning{
	--profile-image-bg-color: var(--bs-warning-rgb);
	color: rgba(var(--bs-warning-rgb), 1);
}
.profile-image.success{
	--profile-image-bg-color: var(--bs-success-rgb);
	color: rgba(var(--bs-success-rgb), 1);
}
.profile-image.danger{
	--profile-image-bg-color: var(--bs-danger-rgb);
	color: rgba(var(--bs-danger-rgb), 1);
}
.profile-image.sm {
	width: 32px;
	height: 32px;
	font-size: 20px;
	line-height: 26px;
	padding: 2px;
	border: 1px solid;
}
.profile-image.normal {
	width: 45px;
	height: 45px;
	font-size: 20px;
	line-height: 37px;
	padding: 3px;
	border: 1px solid;
}
.profile-image.md {
	width: 90px;
	height: 90px;
	font-size: 50px;
	line-height: 78px;
	padding: 4px;
	border: 2px solid;
}
.profile-image.lg {
	width: 128px;
	height: 128px;
	font-size: 70px;
	line-height: 105px;
	padding: 5px;
	border: 3px solid;
}
.profile-image .text,
.profile-image img {
	background-color: rgba(var(--profile-image-bg-color), 0.2);
	border-radius: inherit;
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}
/*-------------------------------{ Profile Image CSS ends }-------------------------------*/

/*-------------------------------{ Appointment CSS start }-------------------------------*/
/* Payment mod Modal */
.pay-method[pay-method-selected="true"],
.pay-method[pay-method-selected="true"]:hover {
	background-color: #4c5258 !important;
	border-color: #4c5258 !important;
	color:#fff !important;
}
.rel-scroll-y {
	position: relative;
	max-height: 400px;
	overflow-y: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #44454e #e3e4e5;
}
.rel-scroll-y::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
.rel-scroll-y::-webkit-scrollbar-thumb {
	background: #44454e;
	border-radius: 2px;
}
.rel-scroll-y::-webkit-scrollbar-track {
	background: #e3e4e5;
	border-radius: 2px;
}
.rel-scroll-y .nav-pills .nav-link{
	color: #000;
	text-align: left;
}
.rel-scroll-y .nav-pills .nav-link.active,
.nav-pills .show >.nav-link {
	background-color: #e2edff;
}
.rel-scroll-y .nav-pills .nav-link.active:hover,
.nav-pills .show >.nav-link:hover{
	background-color: #eff2f7;
}
.p-sticky-top-0 {
	z-index: 1;
	position: sticky;
	top: 0;
}
.hover-pointer:hover{
	cursor: pointer;
	background-color: #ebebeb !important;
}
/*-------------------------------{ Appointment CSS ends }-------------------------------*/

/*----------------------------{ Foods Dashboard CSS starts }----------------------------*/
.food-table {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 15px;
	cursor: pointer;
}
.table-color-circle{
	margin-right: 10px;
}
.table-color-circle.blank{
	border: 1px dashed #a1a1a1;
	background-color: #ededed;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}
.table-color-circle.running {
	border: 1px dashed #195c7a;
	background-color: #a7cee1;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}
.table-color-circle.kitchenorder {
	border: 1px dashed #c9a008;
	background-color:#fffcae;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}
.table-color-circle.paid {
	border: 1px dashed #bd6b6b;
	background-color: #fdc8c8;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}
.food-table.blank{
	border: 1px dashed #a1a1a1;
	background-color: #ededed;
	color: #a1a1a1;
}
.food-table.running {
	border: 1px dashed #195c7a;
	background-color: #a7cee1;
	color: #195c7a;
}
.food-table.kitchenorder {
	border: 1px dashed #c9a008;
	background-color:#fffcae;
	color: #c9a008;
}
.food-table.paid {
	border: 1px dashed #bd6b6b;
	background-color: #fdc8c8;
	color: #bd6b6b;
}
.food-table-title {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica;
	color: inherit;
}
.nav-food-checkout{
	overflow-y: auto;
	max-height: 475px;
}
.nav-food-checkout .nav-link {
	border: none;
	text-align: start;
	color: inherit;
	background-color: #ededed;
}
.nav-food-checkout .nav-link.active {
	background-color: #e58282;
	color:#fff;
	font-weight: 500;
}
.food-menu {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 75px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.food-menu.selected {
	background-color: #c1dae9 !important;
	color: #8f939b;
}
.food-veg,
.food-nonveg{
	position: absolute;
	top: 0;
	right: 3px;
}
.food-veg{
	color: green;
}
.food-nonveg{
	color: red;
}
.food-menu.selected .food-veg{
	color: #73a173;
}
.food-menu.selected .food-nonveg{
	color: #cd6666;
}
[class*="paymod-"].mod-selected {
	background-color: #0278af36 !important;
	color: #4e7254 !important;
}
/*-----------------------------{ Foods Dashboard CSS ends }-----------------------------*/
/*-----------------------------{ Online Dashboard CSS starts }-----------------------------*/
.order-details.loading {
	position: relative;
	overflow: hidden !important;
	padding: 16px 8px;
}
.order-details.loading .loader {
	border-radius: 10px;
	width: 100%;
	height: 100%;
	background-color: #0000005c;
	margin: 0;
	display: block;
	z-index: 2;
}
.order-details.loading .loader:after {
	--size: 40px;
	content: '';
	width: var(--size);
	height: var(--size);
	background-color: transparent;
	position: absolute;
	top: calc(50% - (var(--size) /2));
	left: calc(50% - (var(--size) /2));
	border-radius: 50%;
	border: 6px dotted #d7cbcb;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}
.order-filter {
	position: relative;
}
.order-filter.active {
	color: #22bdff;
}
.order-filter.active:after {
	position: absolute;
	content: '';
	background-color: #22bdff;
	width: 100%;
	height: 4px;
	left: 0;
	bottom: 0;
	border-radius: 2px;
}
.order-filter .count {
    margin-left: 2px;
	border-radius: 10px;
	padding: 0px 6px;
	font-weight: 600;
	font-size: .75em;
	background-color: #6c757d;
	color: white;
}
.order-filter.active .count{
	background-color: #22bdff;
}
.order-status {
	display: flex;
	justify-content: space-between;
}
.order-status .status{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: .8em;
	width: 100%;
	color: #989b9d;
}
.order-status .status.active{
	color: #212529;
}
.order-status .status.canceled{
	color: #c1c5c9;
}
.order-status .status.completed{
	color: #66bf7e;
}
.order-status .status:first-child {
	align-items: flex-start;
}
.order-status .status:last-child {
	align-items: flex-end;
}
.status .status-icon {
	position: relative;
	width: 100%;
	height: 25px;
}
.status .status-icon:before {
	content: '';
	position: absolute;
	left: calc(50% - 10px);
	width: 20px;
	height: 20px;
	background-color: white;
	border-radius: 50%;
	border: 4px solid #989b9d;
	z-index: 2;
	outline: 2px solid white;
}
.status.canceled:not(:first-child):not(:last-child) .status-text {
	display: none;
}
.status.canceled:last-child .status-text {
	color: #f72f2f;
}
.status.completed:last-child .status-text {
	color: #41bd63;
}
.status:first-child .status-icon:before {
	left: 0;
}
.status:last-child .status-icon:before {
	right: 0;
	left: unset;
}
.status.active .status-icon:before {
	border-color: #22bdff;
}
.status.canceled .status-icon:before {
	border-color: #fd6262;
}
.status.completed .status-icon:before {
	border-color: #41bd63;
}
.status:not(:first-child) .status-icon:after {
	content: '';
	position: absolute;
	right: calc(50% - 0px);
	top: calc(50% - 5px);
	height: 5px;
	width: 100%;
	background-color: #989b9d;
	z-index: 1;
}
.status:nth-child(2) .status-icon:after {
	width: 145%;
}
.status:last-child .status-icon:after {
	right: 0;
	width: 145%;
}
.status.active .status-icon:after {
	background-color: #22bdff;
}
.status.canceled .status-icon:after {
	background-color: #fd6262;
}
.status.completed .status-icon:after {
	background-color: #41bd63;
}