*, ::before, ::after {
	margin: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none !important;
}

ul {
	list-style: none;
	padding: 0;
}

button {
	cursor: pointer;
	padding: 0;
}

label {
	display: block;
}

img {
	vertical-align: bottom;
}

body {
	background-color: #fff !important;
	overflow: hidden !important;
}



/* Wrap-2 left side */
.wraps-2 {
	margin-top: 58px;
}

	.wraps-2 .background {
		background-color: #fff;
	}

	.wraps-2 .left-sidebar ul li {
		margin: 10px;
		width: 80px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

		.wraps-2 .left-sidebar ul li a {
			font-weight: 600;
			font-size: 14px;
			color: #1f1f1f;
			padding: 8px 22px;
			border-top-left-radius: 15px;
			border-end-start-radius: 15px;
		}

			.wraps-2 .left-sidebar ul li a.active {
				background-color: #D1F0A2;
			}

			.wraps-2 .left-sidebar ul li a i {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				border: 1px solid;
				line-height: 32px;
				color: #8DC32F;
				background-color: #f8fcf0;
			}

	.wraps-2 .nav-flyout {
		position: absolute;
		background-color: #fff;
		top: 0;
		left: 100%;
		border-left: 2px solid #96B75C;
		z-index: 100;
		height: 590px;
		overflow-y: auto;
	}

	.wraps-2 ul.nav-flyout li {
		margin: 0 8px 0 0;
		width: 152px;
	}

		.wraps-2 ul.nav-flyout li a {
			color: #505358;
			display: block;
			width: 100%;
			padding: 18px 0;
			border-radius: 0;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			text-align: left;
			padding: 13px 9px;
		}

			.wraps-2 ul.nav-flyout li a:hover {
				background-color: #f2f2f2;
				border: 1px solid #f2f2f2;
			}

			.wraps-2 ul.nav-flyout li a.Sub-active {
				color: #010508;
				background-color: #E8F3D3;
				border: 1px solid #96B75C;
			}


	/* Right side */
	.wraps-2 .right-side {
		background-color: #fff;
	}

	.wraps-2 .right-side-overflow {
		height: 600px;
		overflow-y: scroll;
		background-color: #f3f3f3;
	}

	.wraps-2 .right-side-top .back {
		font-weight: 600;
		font-size: 16px;
		color: #1F1F1F;
	}

	.wraps-2 .dropdown .btn {
		background-color: #8DC428 !important;
		border-color: transparent !important;
	}


.common-heading {
	font-weight: 700;
	font-size: 22px;
	color: #1F1F1F;
}

.order-summary .form-select {
	max-width: 320px;
	max-height: 50px !important;
	overflow-y: auto;
}

.order-summary-box {
	width: 100%;
	height: 100%;
	background-color: #E8F3D3;
	padding: 2rem;
	border-radius: 5px;
}

	.order-summary-box h3 {
		color: #429397;
		font-weight: 600;
		font-size: 22px;
	}

	.order-summary-box h4 {
		font-weight: 600;
		font-size: 16px;
		color: #454D58;
	}

	.order-summary-box h5 {
		font-weight: 600;
		font-size: 16px;
		color: #B7B7C3;
	}

.pos-breakdown ul {
	padding: 25px 0;
	display: flex;
	flex-flow: row wrap;
	background-color: #E8F3D3
}

	.pos-breakdown ul li {
		flex: 1 0 auto;
		min-width: 130px;
		max-width: 182px;
		height: 100%;
		border-right: 1px solid #E2E2E2;
		padding: 25px;
	}

		.pos-breakdown ul li:last-child {
			border-right: none;
		}

		.pos-breakdown ul li h3 {
			font-weight: 600;
			font-size: 18px;
			color: #343434;
		}

		.pos-breakdown ul li h4 {
			font-weight: 600;
			font-size: 16px;
			color: #343434;
		}

		.pos-breakdown ul li h5 {
			font-weight: 600;
			font-size: 14px;
			color: #8DC32F;
		}

/* Graph */
.wraps-2 .sub-headings {
	font-weight: 500;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	color: #181c32;
}

.wraps-2 .graph-space {
	width: 100%;
	height: 310px;
	background: #fff;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/* Bar Chart */
.wraps-2 .bar-chart .bar-chartBody {
	background-color: #fff !important;
	padding: 15px;
	border-radius: 5px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.wraps-2 .search-btn {
	background-color: #8DC428 !important;
	border: none !important;
	color: #fff;
	padding: 8px 10px;
	border-radius: 8px;
}

.wraps-2 .form-select:focus {
	outline: none;
	box-shadow: none;
	border-color: #ced4da;
}

.wraps-2 .bar-chart-show {
	width: 100%;
	height: 350px;
	padding: 30px;
}



/* Media Query */
@media screen and (max-width: 460px) {
	.pos-breakdown ul li {
		flex: 1 1 50%;
	}
}

@media screen and (max-width: 460px) {
	.wrap-1 ul {
		display: flex;
		flex-flow: column wrap;
		gap: 5px;
	}
}

/* Salon */
.customer-details {
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	background-color: #fff;
	margin-top: 5px;
}

	.customer-details label {
		color: #000;
	}

.asterisk {
	color: #d50909;
}

.customer-details input, .customer-details input:focus, .customer-details input:active {
	outline: none;
	border: none;
	box-shadow: none;
	background: #f6f6f6;
	border-bottom: 2px solid #b5b4b4;
	border-radius: 0;
}

.middle-page select, .middle-page select:focus, .middle-page select:active {
	outline: none !important;
	border: none !important;
	border-bottom: 1px solid !important;
	;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.customer-details .btn, .middle-page .btn, .payment-methods .btn {
	background-color: #EEE5FF !important;
	color: #8952F8 !important;
	border: none;
}

.customer-details .active {
	background-color: #8952F8 !important;
	color: #fff1ff !important;
}

.customer-details .back {
	background-color: #F4F5FA !important;
	color: #8C92A8 !important;
}

/* middle-page */
.middle-page {
	background-color: #fff;
}

	.middle-page .info {
		border-bottom: 4px solid #8952F8;
	}

		.middle-page .info i {
			font-size: 40px;
			line-height: 50px;
			color: #C7C7C9;
		}

	.middle-page .first-span {
		font-weight: 500;
		font-size: 14px;
		color: #43434B;
	}

	.middle-page .second-span {
		font-weight: 600;
		font-size: 16px;
		color: #43434B;
	}

	.middle-page .view {
		color: #8952F8;
	}

	/* product-info */
	.middle-page .product-info {
		height: 356px !important;
		overflow: auto;
	}

	.middle-page .indexing {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: inline-block;
		border: 1px solid #b5b4b4;
		display: grid;
		place-items: center;
		color: #757575;
	}

	.middle-page table thead tr th {
		font-weight: 500;
		font-size: 14px;
		padding: 24px 0 !important;
		color: #000;
	}

	.middle-page .background-color {
		background: #F2F6F9 !important;
	}

		.middle-page .background-color .input-group {
			width: 120px;
		}

		.middle-page .background-color input, .middle-page .background-color input:focus, .middle-page .background-color input:active {
			outline: none;
			border: none;
			box-shadow: none;
			background: #f6f6f6;
			border-bottom: 1px solid !important;
			border-radius: 0;
			background: transparent;
		}

	.middle-page .input-width {
		width: 80px;
	}

	.middle-page .background-color .input-group input {
		border-bottom: none !important;
		width: 0px !important;
	}

	/* billing-summary */
	.middle-page .form-check-inline {
		margin-right: 12px;
	}

	.middle-page .billing-summary {
		border-left: 1px solid #CCCCCC;
	}

		.middle-page .billing-summary h2 {
			font-weight: 600;
			font-size: 22px;
			color: #000;
		}

	.middle-page .total-amount p {
		font-weight: 500;
		font-size: 14px;
		margin: 5px 0;
		color: #444349;
	}

	.middle-page .discount {
		font-weight: 500;
		font-size: 14px;
		color: #8952F8;
		border-bottom: 1px dashed #8952F8;
		text-decoration: none;
	}

	.middle-page .list-group-item {
		border: none !important;
		padding-left: 0;
		color: #444349;
		font-weight: 500;
		font-size: 14px;
	}

	.middle-page .payable-amount {
		padding: 10px 0;
		background-color: #F5F5F5;
	}

		.middle-page .payable-amount p {
			margin: 0;
			padding: 0 16px;
			font-weight: 500;
			font-size: 18px;
		}

/* payment-methods */
.payment-methods {
	background-color: #fff;
}

	.payment-methods h2 {
		font-size: 20px;
	}

	.payment-methods .btn-danger {
		background-color: #F76A7B !important;
		color: #fff1ff !important;
	}

/* Media Query */
@media screen and (max-width:460px) {
	.btn {
		font-size: 12px;
		padding: 8px 6px;
	}
}


/* Adding Staff info */
.staff-info {
	background-color: #fff;
	padding: 10px 20px;
	margin-top: 1rem;
	height: 516px !important;
	overflow-y: scroll;
}

.wraps-2 .common-heading {
	font-size: 18px;
	color: #1F1F1F;
}

.wraps-2 .total-list-info {
	font-weight: 500;
	font-size: 14px;
	color: #9C9C9E;
}

.wraps-2 .add-btn {
	background-color: #8A50FA !important;
	color: #FFF1FF !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

	.wraps-2 .add-btn i {
		font-size: 18px;
	}

.wraps-2 .staff-member-table {
	white-space: nowrap;
}

	.wraps-2 .staff-member-table .table thead tr th {
		font-weight: 600;
		font-size: 14px;
		color: #BDB9B8;
	}

	.wraps-2 .staff-member-table .table tbody tr td i {
		font-size: 35px;
		color: #8E69EA;
	}

	.wraps-2 .staff-member-table .table tbody tr td {
		font-weight: 600;
		font-size: 15px;
		color: #4A424D;
	}

		.wraps-2 .staff-member-table .table tbody tr td.active {
			color: #54915E !important;
		}

		.wraps-2 .staff-member-table .table tbody tr td button.edit {
			background-color: #FFF4DE !important;
			color: #E3AA3F;
			border: none;
		}

		.wraps-2 .staff-member-table .table tbody tr td button.details {
			background-color: #EEE5FF !important;
			color: #7767BF;
			border: none;
		}


/* Membership Wallet */
.wraps-2 .membership-summary {
	background-color: #fff;
	padding: 12px 18px;
	border-radius: 5px;
	margin: 20px 0;
}

	.wraps-2 .membership-summary h2 {
		font-size: 18px;
		color: #443b45;
		margin: 0;
	}

	.wraps-2 .membership-summary form {
		border-bottom: 1px solid #ff0000;
	}

		.wraps-2 .membership-summary form input, .membership-summary form input:focus, .membership-summary form input:active {
			border: none;
			box-shadow: none;
		}

	.wraps-2 .membership-summary h3 {
		font-weight: 600;
		font-size: 15px;
		color: #443b45;
		margin: 0;
	}

	.wraps-2 .membership-summary p {
		font-weight: 600;
		font-size: 14px;
	}
/* Membership Button */
.wraps-2 .membership-btn {
	background-color: #fff;
	padding: 12px 18px;
	border-radius: 5px;
	margin: 20px 0;
}

	.wraps-2 .membership-btn i {
		color: #A0A2AD !important;
		font-size: 16px;
	}

	.wraps-2 .membership-btn .btn {
		color: #A0A2AD;
		font-weight: 600;
		font-size: 14px;
	}

		.wraps-2 .membership-btn .btn.active {
			color: #000;
			border: none;
			border-radius: 0;
			border-bottom: 1px solid;
			font-weight: 600;
			font-size: 14px;
		}
	/* Membership right side btn */
	.wraps-2 .membership-btn .right .btn {
		background-color: #8DC428 !important;
		color: #F3F3F3 !important;
		font-size: 13px;
	}

		.wraps-2 .membership-btn .right .btn.light {
			background-color: #F6FEE7 !important;
			color: #9BBA53 !important;
			border: transparent;
		}

/* Membership Search from */
.wraps-2 .search input:focus, .search input:active {
	box-shadow: none;
	border: 1px solid #b6b6b6;
}

.wraps-2 .search .btn {
	background-color: #DBDBE3;
	border-radius: 0;
}

/* Membership Table */
.wraps-2 .customer-details {
	background-color: #fff;
	padding: 12px 18px;
	margin: 12px 0;
	white-space: nowrap;
	height: 210px;
	overflow-y: scroll;
}

	.wraps-2 .customer-details .table thead tr th {
		font-weight: 600;
		font-size: 14px;
		color: #050003;
	}

	.wraps-2 .customer-details .table tbody tr td {
		font-weight: 600;
		font-size: 14px;
		color: #4A424D;
	}

	.wraps-2 .customer-details .table .left {
		color: #178c1c;
	}

	.wraps-2 .customer-details .table .used {
		color: #ff0000;
	}

	.wraps-2 .customer-details .table tbody tr td button.edit {
		background-color: #FFF4DE !important;
		color: #E3AA3F !important;
		border: none;
	}

	.wraps-2 .customer-details .table tbody tr td button.history {
		background-color: #ebf8d4 !important;
		color: #9BBA53 !important;
		border: none;
	}

/* Inventory */
/* inventory-table */
.wraps-2 .inventory-table .btn:active, .inventory-table .btn:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

.wraps-2 .inventory-table input:active, .inventory-table input:focus {
	border: none;
	box-shadow: none !important;
	outline: none !important;
}

.wraps-2 .inventory-table input {
	border: 1px solid #ccc !important;
}

.wraps-2 .inventory-table .btn {
	background-color: #9066F6 !important;
	color: #fff;
	border: transparent !important;
}

/* inventory-table-item */
.wraps-2 .inventory-table-item {
	white-space: nowrap;
	height: 380px;
	overflow-y: scroll;
}

/* Perfume Page */
.perfume .left-side-background {
	background-color: #131212;
}

.perfume .sidenavbar .logo {
	color: #fff;
	font-weight: 700;
	font-size: 22px;
}

.perfume .sidenavbar ul {
	list-style: none;
}

	.perfume .sidenavbar ul li .btn {
		color: #fff;
		width: 100%;
	}

	.perfume .sidenavbar ul li .btn-toggle::before {
		width: 1.25em;
		display: inline-block;
		text-align: center;
		line-height: 0;
		content: ">";
		transition: transform 0.35s ease;
		transform-origin: center;
	}

.perfume .btn-toggle[aria-expanded="true"]::before {
	transform: rotate(90deg);
}

.perfume .sidenavbar ul li a {
	color: #fff !important;
	font-weight: 500;
	font-size: 14px;
	padding: 10px 22px;
	width: 100%;
}

	.perfume .sidenavbar ul li a:hover {
		background-color: #5f5e5e;
		color: aqua;
	}

.wraps-2 .right-side-overflow.perfume-center {
	height: 656px;
	overflow-y: scroll;
}

/* Form Page */
.grid-box .box {
	height: 400px;
	border: 1px solid #e1e0e0;
}
