.full-nav {
	background-color: #00408a;
	display: flex;
	align-items: center;
}

.search {
	display: inline-flex;
	width: 25%;
	height: auto;
	justify-content: space-between;
	align-items: center;
	margin-left: 10%;
	padding: 3px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 500px;
}

.search input {
	display: inline-block;
	border: none;
	margin-left: 5px;
	width: 88%;
	border-radius: 500px;
}

.search input:focus {
	outline: none;
}

.search button {
	display: flex;
	width: 40px;
	height: 40px;
	background-color: #008ecc;
	border-radius: 50%;
	border: none;
}

.search svg {
	margin: auto;
}

.full-nav ul {
	display: inline-flex;
	list-style: none;
	color: white;
	width: 55%;
	font-size: 14px;
	font-weight: 500;
	align-items: center;
	justify-content: flex-end;
}

.full-nav a {
	color: white;
	text-decoration: none;
	padding-left: 4px;
}

.non-cart {
	margin-right: 4rem;
}
.cart {
	background-color: #008ecc;
	padding: 10px 20px;
	border-radius: 500px;
	margin-right: 2.5rem;
	position: relative;
}
.cart-number {
	width: 1.5em;
	height: 1.5em;
	background-color: #008ecc;
	border: 2px solid #00408a;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cart svg {
	position: relative;
	top: -2.5px;
}
.hamburger {
	display: none;
	cursor: pointer;
	background-color: transparent;
	border: none;
}
.phone-view {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: -200%;
	z-index: 999;
	background-color: white;
	transition: all ease-in 0.3s;
}

.phone-nav {
	background-color: #00408a;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.close {
	background-color: transparent;
	border: none;
	margin-right: 1rem;
}
.phone-nav-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.phone-nav-links li {
	padding: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.phone-nav-links li:nth-child(1) {
	background-color: #f1f5fb;
	font-weight: bold;
}

.phone-nav-links a {
	text-decoration: none;
	color: #aaa;
	font-size: 14px;
	font-weight: 500;
	margin-left: 1rem;
}
.phone-nav-links li:nth-child(1) a {
	color: #3e3e3e;
	font-weight: bold;
}

.menu-layer1 > li {
	padding: 0.5rem 1rem;
	color: #aaa;
}

.menu-layer2 > li {
	padding: 0.5rem;
	color: #aaa;
	a {
		margin-left: 0;
	}
}

.menu-layer1 {
	display: none;
}

.menu-layer2 {
	display: none;
	margin-top: 1rem;
}

.menu-active1 {
	display: block !important;
}

.inner-menu > ul {
	padding-left: 0;
}

@media screen and (max-width: 922px) {
	.active {
		left: 0%;
	}
	.full-nav {
		display: flex;
		justify-content: space-between;
		padding: 0.5rem 0.4rem;
	}
	.full-nav ul {
		display: inline-flex;
		list-style: none;
		color: white;
		font-size: 14px;
		font-weight: 500;
		align-items: center;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
		width: fit-content;
	}
	.full-nav {
		.logo {
			display: none;
		}
		.non-cart {
			display: none;
		}
		.hamburger {
			display: inline-block;
		}
		.search {
			display: inline-flex;
			width: 60%;
			height: auto;
			margin: 0;
			padding: 2px;
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 500px;
		}

		.search input {
			display: inline-block;
			border: none;
			font-size: x-small;
			width: 88%;
			border-radius: 500px;
		}

		.search button {
			display: flex;
			width: 1.5rem;
			height: 1.7rem;
			background-color: #008ecc;
			border-radius: 50%;
			border: none;
		}

		.search svg {
			margin: auto;
		}
		.cart {
			background-color: #008ecc;
			padding: 0.5rem 1rem;
			border-radius: 500px;
			font-size: 0.8em;
			margin: 0rem;
		}
	}
}

/* /header.css */

.categories {
	display: inline-flex;
	width: 100%;
	overflow: auto;
}
.categories::-webkit-scrollbar {
	display: none;
}
.categories-section {
	padding: 1rem 7rem;
	border-bottom: 1px solid #ededed;
}
.categories-section-header-3 {
	padding: 1rem 7rem;
}
.category {
	background-color: #008ecc;
	border: 3px solid #008ecc;
	border-radius: 500px;
	color: #fff;
}

.category-buttons {
	border: 3px solid #9d9d9d;
	background-color: #f3f9fb;
	color: #9d9d9d;
}
.category-buttons.active {
	transition: all 0.3s ease-in-out;
	border: 3px solid #008ecc;
	background-color: rgba(0, 142, 204, 0.15);
	color: #008ecc;
}

.category-buttons .unselected {
	display: none;
}

.categories-section svg {
	margin-left: 0.5rem;
}

.categories button {
	border-radius: 500px;
	margin-right: 1rem;
	padding: 0.3rem 0.6rem;
	font-weight: 600;
	display: flex;
	align-items: center;
}

@media screen and (max-width: 768px) {
	.categories button {
		margin-right: 0.5rem;
		padding: 0.2rem 0.4rem;
		font-weight: 500;
		font-size: x-small;
	}
	.category-buttons svg {
		width: 14px;
		height: 14px;
		margin-left: 0.2rem;
	}
}

.jumbo-menu {
	position: absolute;
	z-index: 1;
	background-color: #fff;
	width: 100vw;
	left: 0;
	padding: 2rem 10%;
	display: none;
	justify-content: space-between;
	align-items: center;
}

.jumbo-menu-category > ul {
	list-style-type: none;
	padding-left: 1rem;
}
.jumbo-menu-category > ul > li {
	margin-bottom: 0.5rem;
	color: #9d9d9d;
	font-weight: 500;
}

.jumbo-menu-category > p {
	font-weight: 500;
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #008ecc;
}

.jumbo-menu-active {
	display: flex !important;
	transition: all 1s ease-in-out;
}

@media (max-width: 922px) {
	.categories-section {
		padding: 1rem 1.5rem;
	}
	.categories-section-header-3 {
		padding: 1rem 1.5rem;
	}
}

/* header 3 .categories  */

.header3-categories {
	display: flex;
	padding-top: 2em;
	justify-content: center;
	align-items: center;
	gap: 1em;
}

.header3-category-buttons {
	border: 2px solid #828282;
	border-radius: 18px;
	padding: 0.2em 1.5em;
	color: #828282;
}
.header3-category-buttons.header3-selected-btn {
	border-color: #008ecc;
	background-color: hsl(249, 100%, 78%, 15%);
}

@media (max-width: 570px) {
	.header3-category-buttons {
		font-size: 0.75em;
	}
	.header3-categories {
		gap: 0.3em;
	}
}
@media (max-width: 390px) {
	.header3-category-buttons {
		font-size: 0.7em;
	}
	.header3-categories {
		gap: 0.3em;
	}
	.categories-section-header-3 {
		padding: 0.5em;
	}
}
/* /home.css */

.products-container {
	margin: 1rem 6rem;
}

.product-title {
	display: flex;
	justify-content: space-between;
	align-items: end;
	border-bottom: 2px solid #ededed;
}

.product-name > h3 {
	color: #666;
	font-weight: bold;
	margin-bottom: 1rem;
}

.product-name {
	border-bottom: 3px solid #008ecc;
	padding-right: 3rem;
	position: relative;
	top: 1px;
}

.view-all > a {
	text-decoration: none;
	color: black;
	font-weight: 500;
}

.view-all {
	padding-bottom: 1rem;
}

.product-row {
	display: grid;
	gap: 1em;
	margin-top: 1em;

	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.p-img {
	display: flex;
	padding: 1em 1em;
	justify-content: center;
	align-items: center;
	background-color: #f5f5f5;
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
}
.p-img > img {
	background-position: center;
	background-size: contain;
}
.p-name > p {
	font-size: 1rem;
	font-weight: bold;
	color: #222222;
	margin-bottom: 2px;
}

.new-price {
	font-weight: 800;
}
.old-price {
	text-decoration: line-through;
	margin-left: 5px;
	font-weight: 400;
}
.p-name {
	margin-left: 0.8rem;
	margin-right: 0.8rem;
	border-bottom: 2px solid #ededed;
}
.p-footer > p {
	color: #249b3e;
	font-weight: bold;
	margin-bottom: 10px;
}

.p-footer {
	margin-left: 0.8rem;
	margin-top: 5px;
}

.discount-banner {
	position: absolute;
	top: -2px;
	right: -2px;
	background-color: #008ecc;
	color: #fff;
	padding: 0.3rem 0.6rem;
	border: 2px solid #008ecc;
	font-size: small;
	border-radius: 0 20px 0px 25px;
}

.discount-percentage,
.discount-text {
	display: block;
	font-weight: bold;
}

.p-card {
	display: flex;
	flex-direction: column;
	position: relative;

	border-radius: 25px;
	border: 2px solid #ededed;
}
.p-info {
	margin-top: auto;
	padding: 0.2em;
}
.p-card:hover {
	border: 2px solid #008ecc;
	box-shadow: 0px 10px 20px 0px hsl(0, 0%, 0%, 15%);
	transition: all 0.3s ease-in-out;
}

/* category display */
.category-display {
	background-color: #008ecc;
	color: #fff;
	padding-top: 1rem;
	padding-bottom: 0.5rem;
}

.category-container {
	margin: 3rem 7rem;
}
.category-title {
	display: flex;
	justify-content: space-between;
	align-items: end;
	border-bottom: 2px solid #ffffff;
	margin-bottom: 3rem;
}

.category-name > h3 {
	font-weight: 500;
}

.category-name {
	border-bottom: 3px solid #ffffff;
	padding-right: 3rem;
	position: relative;
	top: 1px;
}

.category-view-all > a {
	text-decoration: none;
	color: rgb(255, 255, 255);
	font-weight: 500;
}

.category-view-all {
	padding-bottom: 0.5rem;
}

.category-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	width: 100%;
	/* height: 100%; */
}

.category-img {
	border-radius: 50%;
	padding: 1.2rem 3rem;
	background-color: #ffffff;
}

.category-info {
	text-align: center;
	margin-top: 1rem;
	font-weight: 500;
}

.category-img > img {
	width: 55px !important;
	height: auto;
}

.owl-prev,
.owl-next {
	background-color: #f1f2f6;
	border: none;
	padding: 0.2rem 1rem;
	border-radius: 5px;
}

.owl-next {
	margin-right: 1rem;
}

@media screen and (max-width: 576px) {
	.category-display {
		padding-top: 0.5rem;
		padding-bottom: 0.25rem;
	}

	.category-container {
		margin: 1.2rem 1.5rem;
	}
	.category-title {
		margin-bottom: 1rem;
	}

	.category-name > h3 {
		font-size: 1rem;
	}

	.category-name {
		padding-right: 1.5rem;
	}

	.category-view-all > a {
		text-decoration: none;
		color: rgb(255, 255, 255);
		font-weight: 500;
	}

	.category-view-all {
		padding-bottom: 0.5rem;
	}

	.category-img {
		padding: 1rem 2rem;
		width: fit-content;
	}

	.category-info {
		margin-top: 0.3rem;
		font-weight: 400;
		font-size: x-small;
	}

	.category-img > img {
		width: 1.8rem !important;
		height: auto;
	}

	.owl-prev,
	.owl-next {
		background-color: #f1f2f6;
		border: none;
		padding: 0.5px 0.6rem;
		border-radius: 3px;
	}

	.owl-next {
		margin-right: 0.5rem;
	}
}

@media (max-width: 450px) {
	.category-img {
		padding: 0.5rem 1.2rem;
		width: fit-content;
	}
}

.footer-container {
	padding-bottom: 3rem;
}

/* @media screen and (max-width: 922px) {
	.discount-banner {
			padding: 0.4rem 0.5rem;
			border-radius: 0 20px 0px 15px;
			font-size: xx-small;
	}

	.products-container {
			margin: 1.2rem 1.5rem;
	}

	.product-title {
			margin-bottom: 1rem;
	}

	.product-name {
			padding-right: 1rem;
	}

	.product-name > h3 {
			font-size: 1rem;
	}

	.view-all {
			display: none;
	}
	.p-img {

			border-top-right-radius: 25px;
			border-top-left-radius: 25px;
	}
	.p-img > img {
			width:65px;
			height: auto;
	}

	.p-name > p {
			font-size: 0.6rem;
	}

	.p-name {
			margin-left: 0.5rem;
			margin-right: 0.5rem;
	}

	.p-footer > p {
			margin-bottom: 5px;
	}

	.p-footer {
			margin-left: 0.5rem;
			margin-top: 3px;
			font-size: 0.5rem;
	}

	.p-card {
			display: inline-block;
			margin-right: 0.3rem;
			margin-top: 0.7rem;
			border-radius: 25px;
			border: 1px solid transparent;
	}

	.p-card:hover {
			border: 1px solid #008ECC;
			transition: all 0.3s ease-in-out;
	}
} */
@media screen and (max-width: 922px) {
	.products-container {
		margin: 1.2rem 1.5rem;
	}
	.product-name > h3 {
		color: #666;
		font-weight: bold;
		margin-bottom: 1rem;
		font-size: 1.1em;
	}
}

@media (max-width: 415px) {
	.product-row {
		display: grid;
		gap: 1em;
		margin-top: 1em;

		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (min-width: 577px) and (max-width: 922px) {
	.category-display {
		padding-top: 0.5rem;
		padding-bottom: 0.25rem;
	}

	.category-container {
		margin: 1.2rem 1.5rem;
	}
	.category-title {
		margin-bottom: 1.5rem;
	}

	.category-name > h3 {
		font-size: 1.5rem;
	}

	.category-name {
		padding-right: 1.5rem;
	}

	.category-view-all > a {
		text-decoration: none;
		color: rgb(255, 255, 255);
		font-weight: 500;
	}

	.category-view-all {
		padding-bottom: 0.5rem;
	}

	.category-img {
		padding: 1rem 2rem;
		width: fit-content;
	}

	.category-info {
		margin-top: 0.4rem;
		font-size: small;
	}

	.category-img > img {
		width: 2.2rem !important;
		height: auto;
	}

	.owl-prev,
	.owl-next {
		background-color: #f1f2f6;
		border: none;
		padding: 0.5px 0.6rem;
		border-radius: 3px;
	}

	.owl-next {
		margin-right: 0.5rem;
	}
}

/* /footer.css */

.footer-container {
	background-color: #202020;
	padding: 2em;
	padding-right: 6.5rem;
	color: white;
}
.footer-head {
	border-bottom: 3px solid white;
	width: fit-content;
}

.whatsapp,
.call {
	display: flex;
	padding-right: 1rem;
	margin-top: 3.5rem;
}

.whatsapp > button,
.call > button {
	border-radius: 10px;
	background-color: #008ecc;
	border: none;
	color: white;
	margin-left: 1.2rem;
	padding: 0.5rem 1rem;
	position: relative;
	top: -0.6rem;
}
.whatsapp > p,
.call > p {
	margin-left: 1rem;
}

.footer-content > ul > li {
	margin-top: 0.5rem;
}
.footer-content > ul {
	margin-top: 1.5rem;
}

.copyright {
	background-color: #008ecc;
	color: white;
	text-align: center;
	padding: 5px 0rem;
	margin-bottom: 0%;
	p {
		margin-bottom: 0%;
	}
}

@media screen and (min-width: 768px) and (max-width: 922px) {
	.footer-container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.footer-head > h5 {
		font-size: 1rem;
	}
	.whatsapp,
	.call {
		margin-top: 2rem;
	}
	.whatsapp > button,
	.call > button {
		margin-left: 0.7rem;
		padding: 0.3rem 0.6rem;
	}
	.whatsapp > p,
	.call > p {
		margin-left: 0.5rem;
	}
}

@media screen and (max-width: 767px) {
	.footer-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.footer-head > h5 {
		font-size: smaller;
	}
	.contact-info {
		display: flex;
	}

	.footer-content > ul {
		margin-top: 1rem;
	}

	.footer-content > ul > li {
		font-size: smaller;
		margin-top: 0.5rem;
	}
	.whatsapp,
	.call {
		margin-top: 2rem;
		display: flex;
		flex-wrap: wrap;
	}

	.whatsapp > button,
	.call > button {
		margin-top: 1rem;
		margin-bottom: 1rem;
		margin-left: 1rem;
		padding: 0.9rem 1.8rem;
	}
	.whatsapp > p,
	.call > p {
		margin-left: 0.3rem;
		font-size: small;
	}
	.copyright {
		font-size: small;
	}
}

/* /admin/login.css */

body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p {
	margin-bottom: 0;
}

main {
	margin-left: 200px;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.dashboard-head {
	display: flex;
	justify-content: space-between;
	background-color: white;
	padding: 2.08rem 2.5rem;
	padding-right: 2rem;
	p {
		margin-bottom: 0%;
	}
}

.dashboard-client {
	p {
		color: #000;
		font-size: 0.9375rem;
		font-weight: 800;
		line-height: 1.625rem; /* 173.333% */
		letter-spacing: 0.02875rem;
		text-transform: uppercase;
		opacity: 0.34;
		margin-right: 2.5rem;
	}
}
.notification-button-div {
	position: relative;
}
.notification-count {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0.8em;
	height: 0.8em;
	padding: 0.5em;

	border: 2px solid white;
	color: white;
	border-radius: 50%;
	background-color: #f54949;
	right: -8px;
	top: -6px;
}
.dashboard-head-name {
	p {
		color: #23272e;
		font-family: 'Poppins';
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 1.375rem; /* 122.222% */
	}
}

.hamburger {
	display: none;
}

.dashboard-client {
	display: flex;
	justify-content: space-between;
	align-items: center;
	p {
		margin-bottom: 0;
	}
	svg {
		width: 20px;
		height: 24px;
	}
}

.save-profile-btn {
	margin-left: auto;
	background-color: rgba(0, 142, 204, 1);
	width: 148px;
	height: 45px;
	border-radius: 10px;
	color: white;
	font-weight: 600;
	border: none;
}

@media screen and (max-width: 992px) {
	main {
		margin-left: 0;
	}
	.hamburger {
		display: flex;
		margin-right: 1rem;
		border: none;
		background-color: white;
		padding: 0;
	}

	.dashboard-head-name {
		display: flex;
		align-items: center;
	}

	.dashboard-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		padding: 1.4rem 1.1rem;
		padding-bottom: 1.1rem;
		padding-right: 1.1rem;
		p {
			margin-bottom: 0%;
		}
	}
	.notification-count {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 0.5em;
		height: 0.5em;
		padding: 0.4em;

		border: 2px solid white;
		color: white;
		border-radius: 50%;
		background-color: #f54949;
		right: -6px;
		top: -3px;
	}
	.dashboard-client {
		p {
			color: #000;
			font-size: 0.48838rem;
			font-weight: 800;
			line-height: 0.8465rem;
			letter-spacing: 0.015rem;
			text-transform: uppercase;
			opacity: 0.34;
			margin-right: 1.5rem;
		}
		svg {
			width: 14px;
			height: 17px;
		}
	}

	.dashboard-head-name {
		p {
			font-size: 0.75rem;
		}
	}
}

.login {
	margin: 3.25rem 1.5rem;
	border-radius: 0.625rem;
	border: 2px solid #9e9e9e;
	background: #f2f7ff;
	overflow: clip;
	display: flex;
}

.login-left {
	width: 15.3125rem;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login-left-part1 {
	margin-top: 2.5rem;
	margin-bottom: 1.37rem;
	svg {
		width: 169px;
		height: 166px;
	}
}

.login-left-part2 {
	text-align: center;
	margin-bottom: 1.38rem;
	p:first-child {
		color: #000;
		font-size: 1.5rem;
		font-weight: 600;
		margin-bottom: 1.12rem;
	}
	p:last-child {
		color: #999;
		font-size: 0.875rem;
		font-weight: 400;
	}
}

.login-left-part3-card {
	width: 13.5rem;
	border-radius: 0.5rem;
	background: #f2f7ff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.12rem;
	padding-bottom: 1.06rem;
	padding-left: 1.44rem;
	padding-right: 1.2rem;
	margin-bottom: 0.38rem;
	p {
		color: #999;
		font-size: 0.875rem;
		font-weight: 400;
		margin-bottom: 0;
	}
	svg {
		width: 8px;
		height: 13px;
	}
}

.login-left-part3-edit {
	margin-top: 8rem;
	margin-bottom: 1.7rem;
	display: flex;
	justify-content: center;
	button {
		border-radius: 0.5rem;
		display: flex;
		align-items: center;
		border: 1px solid #418a7e;
		background: #fff;
		box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.08);
		width: 12.1rem;
		padding: 0.7rem;
		color: #408a7e;
		font-size: 1.125rem;
		font-weight: 600;
		svg {
			margin-left: 1.8rem;
			margin-right: 2rem;
			width: 21px;
			height: 21px;
		}
	}
}

.login-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(100% - 15.3125rem);
	padding-top: 4.19rem;
}

.login-right-card {
	width: 70%;
	margin-bottom: 1.5rem;
	label {
		display: block;
		color: #828282;
		font-family: 'Poppins';
		font-size: 1rem;
		font-weight: 500;
		margin-bottom: 0.5rem;
	}
	input {
		border: none;
		outline: none;
		height: 3.375rem;
		width: 100%;
		padding: 0.81rem 1.44rem;
		color: #9f9e9e;
		font-family: 'Poppins';
		font-size: 1rem;
		font-weight: 400;
		border-radius: 0.5rem;
	}
	input::placeholder {
		color: #9f9e9e;
		font-family: 'Poppins';
		font-size: 1rem;
		font-weight: 400;
	}
}

#login-right-address {
	height: 7.6rem;
}

@media screen and (max-width: 768px) {
	.login {
		margin: 1.5rem 1rem;
		border-radius: 0rem;
		border: none;
		overflow: clip;
		display: block;
	}

	.login-left {
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: end;
		padding-bottom: 1.8rem;
	}

	.login-left-part1 {
		margin-top: 0rem;
		margin-bottom: 0rem;
		margin-left: 1.37rem;
		margin-bottom: 0rem;
		svg {
			width: 102px;
			height: 100px;
		}
	}

	.login-left-part2 {
		text-align: center;
		margin-bottom: 1.6rem;
		p:first-child {
			color: #000;
			font-size: 0.89906rem;
			font-weight: 600;
			margin-bottom: 0.38rem;
		}
		p:last-child {
			color: #999;
			font-size: 0.5245rem;
			font-weight: 400;
			margin-bottom: 0;
		}
	}

	.login-left-part3 {
		display: flex;
		flex-direction: column-reverse;
		align-items: end;
		margin-right: 0.5rem;
	}

	.login-left-part3-card {
		width: 8rem;
		border-radius: 0.29969rem;
		padding-top: 0.67rem;
		padding-bottom: 0.66rem;
		padding-left: 0.86rem;
		padding-right: 0.72rem;
		margin-bottom: 0.22rem;
		p {
			color: #999;
			font-size: 0.5245rem;
			font-weight: 400;
			margin-bottom: 0;
		}
		svg {
			width: 5px;
			height: 8px;
		}
	}

	.save-profile-btn {
		width: 7.2rem;
		padding: 0.56rem 0;
	}

	.login-left-part3-edit {
		margin-top: 1.38rem;
		margin-bottom: 1.2rem;
		button {
			border-radius: 0.29969rem;
			border: 0.599px solid #418a7e;
			background: #fff;
			box-shadow: 0px 2.398px 29.97px 0px rgba(0, 0, 0, 0.08);
			width: 7.2rem;
			padding: 0.56rem 0;
			color: #408a7e;
			font-size: 0.67431rem;
			font-weight: 600;
			svg {
				margin-left: 1.5rem;
				margin-right: 1.2rem;
				width: 14px;
				height: 13px;
			}
		}
	}

	.login-right {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-top: 2.62rem;
	}

	.login-right-card {
		width: 90%;
		margin-bottom: 1.5rem;
		label {
			display: block;
			color: #828282;
			font-family: 'Poppins';
			font-size: 0.625rem;
			font-weight: 500;
			margin-bottom: 0.5rem;
		}
		input {
			border: none;
			outline: none;
			height: 1.89956rem;
			width: 100%;
			padding: 0.46rem 0.81rem;
			color: #9f9e9e;
			font-family: 'Poppins';
			font-size: 0.625rem;
			font-weight: 400;
			border-radius: 0.5rem;
		}
		input::placeholder {
			color: #9f9e9e;
			font-family: 'Poppins';
			font-size: 0.625rem;
			font-weight: 400;
		}
	}

	#login-right-address {
		height: 7.6rem;
	}
}

/* /admin/navbar.css */

.fixed-navbar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	width: 200px;
	background: #00022c;
	overflow-y: scroll;
	&::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
	&::-webkit-scrollbar-thumb {
		background-color: transparent;
	}
}

.navbar-head {
	padding: 1.69rem 0;
	text-align: center;
	border-bottom: 4px solid #fff;
	img {
		width: 4.6rem;
		height: auto;
	}
}

.nav-link {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 1.5rem 0;
	padding-top: 0.2rem;
	padding-left: 1.2rem;
	padding-bottom: 0.2rem;
	a {
		text-decoration: none;
		font-weight: 400;
		margin-left: 0.9rem;
		color: #fff;
	}
}

.subscription-banner {
	margin-top: auto;
	position: sticky;
	bottom: 0;
	text-align: center;
	margin-left: 0.75rem;
	margin-right: 0.75rem;
	margin-bottom: 1.2rem;
}

.sub-banner-transparent {
	backdrop-filter: blur(5px);
	width: 60vw;
	height: 1.7rem;
}

.sub-banner {
	background-color: #008ecc;
	border-radius: 8px;
}

.star {
	position: relative;
	top: -20px;
}

.sub-banner-head {
	color: #fff;
	text-align: center;
	font-size: 16px;
	margin-top: -0.8rem;
	font-weight: 700;
	line-height: 20px; /* 125% */
	p {
		margin-bottom: 0;
	}
}

.sub-banner-detail {
	color: #fff;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	line-height: 20px; /* 166.667% */
	margin-top: 0.5rem;
	p {
		margin-bottom: 0;
	}
}

.sub-banner-btn {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border: none;
	background-color: #fff;
	border-radius: 500px;
	padding: 0.2rem 0.9rem;
	color: #008ecc;
	font-size: 10px;
	font-weight: 400;
	line-height: 20px; /* 200% */
}

.nav-link-margin {
	margin-bottom: 0;
}

.sub-links {
	color: #fff;
	border-left: 2px solid #fff;
	font-size: 14px;
	margin-left: 1.7rem;
	margin-bottom: 1.5rem;
	font-weight: 400;
	display: none;
	background-color: #00022c;
}

.sub-link-wrapper {
	position: relative;
	top: 8px;
}

.sub-link-wrapper a {
	margin-bottom: 1rem;
	display: block;
	text-decoration: none;
	color: inherit;
}

.nav-links1 {
	border-bottom: 1px solid #989898;
}

.sub-link-active {
	display: block;
}

.nav-link-active {
	background: linear-gradient(90deg, #008ecc 0%, rgba(0, 142, 204, 0) 100%);
}

.mobile-navbar {
	width: 100vw;
	height: 100vh;
	z-index: 3;
	position: fixed;
	display: none;
}

.mobile-nav-head {
	display: flex;
	padding: 0.7rem 1.5rem;
	background-color: white;
	img {
		width: 4.5rem;
		height: auto;
	}
}

@media screen and (max-width: 992px) {
	.fixed-navbar {
		display: none;
	}

	.mobile-nav-links {
		display: flex;
		flex-wrap: wrap;
	}

	.nav-links1 {
		border-bottom: none;
	}
	.mobile-nav-links {
		width: 65vw;
		background-color: #00022c;
		height: 92vh;
		overflow-y: scroll;
	}
	.nav-blur {
		width: 35vw;
		background: rgba(226, 226, 226, 0.5);
		backdrop-filter: blur(5px);
	}
	.mobile-nav {
		display: flex;
		height: 100%;
	}
	.mobile-nav-active {
		display: block;
		top: 0;
	}

	.mobile-nav-close {
		background: transparent;
		border: none;
		position: absolute;
		left: 57%;
	}
}

/* /admin/dashboard.css */

body {
	margin: 0;
	padding: 0;
}

p {
	margin-bottom: 0;
}

main {
	margin-left: 200px;
	min-height: 100vh;
	background-color: #f4f4f4;
	display: flex;
	flex-direction: column;
}
section:nth-child(1) {
	background-color: #ffffff;
}
section:nth-child(2) {
	background-color: #f4f4f4;
}

.dashboard-dashboard-head {
	display: flex;
	justify-content: space-between;
	padding: 1rem 0.7rem;
	p {
		margin-bottom: 0%;
	}
}

.admin-nav {
	margin-left: 200px;
}

@media screen and (max-width: 992px) {
	.admin-nav {
		box-sizing: border-box;
		margin-left: 0;
	}
}

.dashboard-dashboard-head-name {
	p {
		font-weight: 500;
		margin-left: 2.8rem;
		font-size: 1.125rem;
	}
}

.hamburger {
	display: none;
}

.dashboard-dashboard-client {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-right: 2.8rem;
	p {
		margin-right: 2.5rem;
		margin-bottom: 0;
		font-weight: 800;
		color: hsl(0, 0%, 0%, 34%);
	}
}

.total-data {
	padding-top: 1rem;
}

.total-data-card {
	border-radius: 10px;
	border: 0.674px solid #deebfd;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0em;
	overflow: hidden;
	p {
		margin-bottom: 0;
		color: #fff;
	}
}

.total-card-name {
	font-size: 1.1rem;
	font-weight: 500;
}

.total-data-svg {
	width: 110%;

	/* background-image: url('assets/svg/footerSVGBack.svg'); */
	background-image: url('../svg/footerSVGBack.svg');
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	height: 1.5em;
	bottom: 0;
	left: 0;
}
.total-card-number {
	font-size: 1rem;
	font-weight: 700;
}

.total-card-date {
	font-size: 0.5rem;
	font-weight: 400;
}
.total-data-card > div:nth-child(1) {
	padding: 0.5em;
}
.stats {
	margin-top: 0rem;
}

.order-stats {
	p {
		color: #222943;
		font-size: 1rem;
		font-weight: 400;
		line-height: 20.41px;
		text-transform: capitalize;
		margin-bottom: 16px;
	}
	img {
		width: 100%;
		height: auto;
	}
}

.order-stats-container {
	background-color: #fff;
	padding: 1rem;
	border-radius: 5px;
}

.recent-orders {
	background-color: #fff;
	padding: 1rem;
	border-radius: 5px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.recent-order-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.5rem;
	border: 0.724px solid #f4f4f4;
	background: #f5f9ff;
	padding: 0.6rem 0.8rem;
	p {
		margin-bottom: 0;
		color: #8b909a;
		font-size: 0.75rem;
		font-weight: 500;
		text-transform: uppercase;
		span {
			color: #23272e;
			font-weight: 600;
			line-height: 15.923px; /* 137.5% */
		}
	}
}
.recent-order-head {
	p {
		font-weight: 400;
		margin-bottom: 0%;
	}
}
.recent-order-line {
	border-right: 2px solid #bdbdbd;
	width: 1px;
	height: 1.5rem;
}

.confirmed {
	border-radius: 3.668px;
	background: rgba(3, 170, 145, 0.16);
	padding: 0.2rem 0.5rem;
	p {
		color: #03aa91;
	}
}

.recent-order-button {
	display: flex;
	margin-top: auto;
	margin-top: 1em;
	justify-content: end;

	button {
		border: none;
		border-radius: 10px;
		background: #008ecc;
		padding: 0.7rem 2rem;
		color: #fff;
		font-weight: 400;
	}
}

.feedbacks {
	margin-top: 1rem;
}

.recent-feedbacks-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	p {
		font-weight: 400;
		margin-bottom: 0;
	}
}

.feedbacks-btn {
	border: 2px solid #008ecc;
	border-radius: 4px;
	background: white;
	padding: 0.5rem 1.5rem;
	margin-right: 0.5rem;
	color: #fff;
	font-weight: 400;
	color: #008ecc;
	font-size: 1rem;
	font-weight: 400;
	line-height: 21px; /* 140% */
}

.notification-btn {
	border: 2px solid #8b909a;
	border-radius: 4px;
	background: white;
	padding: 0.5rem 1.5rem;
	color: #fff;
	font-weight: 400;
	color: #8b909a;
	font-size: 1rem;
	font-weight: 400;
	line-height: 21px; /* 140% */
}

#youtube-video {
	padding-top: 1.5rem;
}

.feedback-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.5rem;
	border: 0.724px solid #f4f4f4;
	background: #f5f9ff;
	padding: 0.6rem 0.8rem;
	button {
		border: none;
		padding: none;
	}
}

.feedback-name {
	display: inline-flex;
	align-items: center;
	p {
		margin-bottom: 0;
		color: #515151;
		font-size: 0.8rem;
		font-weight: 400;
		line-height: 19.156px;
		margin-left: 1rem;
	}
}

.feedback-name-symbol {
	border-radius: 50%;
	background-color: #28c76f;
	padding: 0.3rem 0.6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	p {
		color: #fff;
		font-size: 0.8rem;
		font-weight: 700;
		line-height: 19.156px; /* 150% */
		margin-bottom: 0;
		margin-left: 0;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.recent-order-detail {
		p {
			font-size: 0.6rem;
		}
	}
}

@media screen and (max-width: 992px) {
	main {
		margin-left: 0;
	}
	.hamburger {
		display: inline-block;
		margin-right: 1rem;
		border: none;
		background-color: white;
		padding: 0;
	}

	.dashboard-dashboard-head-name {
		display: flex;
		align-items: center;
		p {
			margin-left: 0;
			font-size: 1rem;
		}
	}

	.dashboard-dashboard-client {
		margin-right: 0;
		p {
			margin-right: 1rem;
		}
	}

	.recent-order-detail {
		padding: 0.2rem 0.1rem 0.2rem 0.5rem;
		p {
			font-size: 0.5rem;
		}
	}
	.recent-order-line {
		border-right: 1px solid #bdbdbd;
		width: 1px;
		height: 1rem;
	}

	.recent-orders {
		margin-top: 0rem;
		padding: 0.75rem;
	}
	.confirmed {
		border-radius: 3.668px;
		background: rgba(3, 170, 145, 0.16);
		padding: 0.2rem 0.3rem;
		p {
			color: #03aa91;
		}
	}
	.recent-order-head,
	.order-stats {
		p {
			font-size: 0.8rem;
		}
	}
	.recent-order-button {
		button {
			border: none;
			border-radius: 5px;
			background: #008ecc;
			padding: 0.5rem 1.3rem;
			color: #fff;
			font-weight: 400;
			font-size: 0.55rem;
		}
	}
	.feedbacks-btn {
		border: 1px solid #008ecc;
		border-radius: 4px;
		background: white;
		padding: 0.34rem 0.88rem;
		margin-right: 0.5rem;
		color: #fff;
		font-weight: 400;
		color: #008ecc;
		font-size: 0.625rem;
		font-weight: 400;
		line-height: 0.83944rem; /* 140% */
	}
	.notification-btn {
		border: 1px solid #8b909a;
		border-radius: 4px;
		background: white;
		padding: 0.34rem 0.67rem;
		color: #fff;
		font-weight: 400;
		color: #8b909a;
		font-size: 0.625rem;
		font-weight: 400;
		line-height: 0.83944rem; /* 140% */
	}
}

/* footer  */

.dashboard-footer-div {
	/* background-image: url('assets/images/footerBackAdminDashboard.png'); */
	background-image: url('../images/footerBackAdminDashboard.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: contain;
}

.dashboard-footer-section {
	margin-top: 1rem;
	margin-bottom: 1rem;
	background-color: #f4f4f4;
}
.dashboard-footer-section > div {
	background-color: #008ecc;
	border-radius: 0.4em;
	color: white;
}
.dashboard-text-container {
	width: 70%;
	padding: 1em;
}
.dashboard-text-container > p {
	margin: 0;
}
.dashboard-text-container > p:nth-child(1) {
	font-size: 2em;
}
.dashboard-text-container > p:nth-child(2) {
	color: hsl(0, 0%, 100%, 70%);
}
.order-for-retailer-btn > button {
	background-color: white;
	border: none;
	color: #008ecc;
	border-radius: 0.4em;
	padding: 0.5em 1em;
}
.order-for-retailer-btn {
	width: 30%;
	padding: 1em;
}
@media (max-width: 994px) {
	section:nth-child(1) {
		order: 1;
	}
	section:nth-child(2) {
		order: 3;
	}
	.dashboard-footer-section {
		order: 2;
		padding: 0 !important;
		margin-top: 0;
	}
	.dashboard-text-container > p:nth-child(1) {
		font-size: 1.5em;
	}
	.dashboard-footer-section > div {
		border-radius: 0px;
	}
	.order-for-retailer-btn > button {
		font-size: 0.8em;
	}
}
@media (max-width: 800px) {
	.order-for-retailer-btn > button {
		font-size: 0.7em;
	}
	.dashboard-text-container > p:nth-child(1) {
		font-size: 1em;
	}
	.dashboard-text-container > p:nth-child(2) {
		color: hsl(0, 0%, 100%, 70%);
		font-size: 0.7em;
	}
	.order-for-retailer-btn {
		width: 20%;
		padding: 0.5em !important;
	}
	.dashboard-text-container {
		width: 80%;
		padding: 0.5em !important;
	}
}

/* notification btn  */

.notification-button-div {
	position: relative;
}
.notification-count {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0.8em;
	height: 0.8em;
	padding: 0.7em;
	font-size: 0.8em;
	font-weight: bold;
	border: 2px solid white;
	color: white;
	border-radius: 50%;
	background-color: #f54949;
	right: -9px;
	top: -6px;
}

@media (max-width: 992px) {
	.notification-count {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 1em;
		height: 1em;
		padding: 0.6em;
		font-size: 0.8em;
		border: 2px solid white;
		color: white;
		border-radius: 50%;
		font-weight: bold;
		background-color: #f54949;
		right: -6px;
		top: -3px;
	}
}

.done-process {
	background-color: hsl(198, 100%, 40%);
}
.done-process > p {
	color: white !important;
}
.active-process {
	background-color: hsl(198, 100%, 40%, 20%);
}

@media (max-width: 500px) {
	.dashboard-dashboard-head-name {
		p {
			font-weight: 500;

			font-size: 0.8em;
		}
	}
	.dashboard-dashboard-client {
		display: flex;
		justify-content: space-between;
		align-items: center;

		p {
			font-size: 0.8em;
			margin-bottom: 0;
			font-weight: 800;
			color: hsl(0, 0%, 0%, 34%);
		}
	}
}

/* /admin/themeConfiguration1.css */

.theme {
	background: #f4f4f4;
}
section:nth-child(2) {
	background-color: #f4f4f4;
}

.theme-head {
	background-color: white;
	padding: 1rem 1rem;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.theme-name {
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		margin-left: 1rem;
		color: #6a6a6a;
	}
	svg {
		width: 23px;
		height: 19px;
	}
}

.theme-bar {
	display: flex;
	align-items: center;
}

.theme-number {
	text-align: center;
	p {
		color: #008ecc;
		font-size: 11.974px;
		font-weight: 500;
		line-height: 15.567px; /* 130% */
		text-transform: capitalize;
		margin-bottom: 0;
	}
}

.theme-num-icon {
	padding: 0.35rem 1rem;
	border-radius: 50%;
	border: 2px solid #008ecc;
	margin-bottom: 0.45rem;
	p {
		color: #008ecc;
		margin-bottom: 0%;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 31.134px; /* 130% */
		text-transform: capitalize;
	}
}

.theme-line {
	height: 1px;
	width: 9rem;
	display: inline;
	position: relative;
	top: -10px;
	margin-left: 1rem;
	margin-right: 1rem;
	background-color: #008ecc;
	border-bottom: 2px solid #008ecc;
}
.theme-line::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}
.theme-line::before {
	content: '';
	position: absolute;
	right: -7px;
	bottom: -5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}

.theme-content {
	margin-top: 2.5rem;
}

.theme-color-card {
	border-radius: 0.625rem;
	border: 2px solid #a8a8a8;
	background: #d8d8d8;
	overflow: auto;
}

.theme-color-card:hover {
	border: 2px solid #008ecc;
}

.theme-colors {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	div {
		height: 13rem;
	}
}

/* .themeConfiguration-dashboard-head {
	display: flex;
	justify-content: space-between;
	background-color: white;
	padding: 1.08rem 3.5rem;
	padding-right: 2rem;
	p {
		margin-bottom: 0%;
	}
} */

.theme-color-bottom {
	padding-top: 1.7rem;
	padding-bottom: 0.8rem;
	background: #d8d8d8;
	display: flex;
	justify-content: center;
	div {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		margin: 0 0.5rem;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.theme-line {
		width: 5rem;
	}
}

@media screen and (max-width: 992px) {
	.theme-head {
		background-color: white;
		padding: 0.6rem 1rem;
		display: block;
	}
	.theme-name {
		margin-bottom: 1.5rem;
		p {
			margin-bottom: 0;
			margin-left: 0.8rem;
			font-size: 14px;
		}
		svg {
			width: 13px;
			height: 10px;
		}
	}
	.theme-number {
		text-align: center;
		p {
			color: #008ecc;
			font-size: 11.974px;
			font-weight: 500;
			line-height: 15.567px; /* 130% */
			text-transform: capitalize;
			margin-bottom: 0;
		}
	}

	.theme-num-icon {
		padding: 0.2rem 0.7rem;
		border-radius: 50%;
		border: 2px solid #008ecc;
		margin-bottom: 0.45rem;
		p {
			color: #008ecc;
			margin-bottom: 0%;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			line-height: 19.624px; /* 130% */
			text-transform: capitalize;
		}
	}

	.theme-line {
		height: 1px;
		width: 4rem;
		display: inline;
		position: relative;
		top: -10px;
		margin-left: 1rem;
		margin-right: 1rem;
		background-color: #008ecc;
		border-bottom: 2px solid #008ecc;
	}
	.theme-line::after {
		content: '';
		position: absolute;
		top: -2px;
		left: -5px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}
	.theme-line::before {
		content: '';
		position: absolute;
		right: -5px;
		bottom: -4px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}

	.theme-content {
		margin-top: 1rem;
	}

	.theme-color-card {
		margin-top: 1rem;
	}
	.theme-colors {
		display: flex;
		div {
			width: 5rem;
			height: 9rem;
		}
	}

	.theme-color-bottom {
		padding-top: 1rem;
		padding-bottom: 0.5rem;
		background: #d8d8d8;
		display: flex;
		justify-content: center;
		div {
			width: 1.7rem;
			height: 1.7rem;
			border-radius: 50%;
			margin: 0 0.2rem;
		}
	}
}

/* notification btn  */

.notification-button-div {
	position: relative;
}
.notification-count {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0.8em;
	height: 0.8em;
	padding: 0.7em;
	font-size: 0.8em;
	font-weight: bold;
	border: 2px solid white;
	color: white;
	border-radius: 50%;
	background-color: #f54949;
	right: -9px;
	top: -6px;
}

@media (max-width: 992px) {
	.notification-count {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 1em;
		height: 1em;
		padding: 0.6em;
		font-size: 0.8em;
		border: 2px solid white;
		color: white;
		border-radius: 50%;
		font-weight: bold;
		background-color: #f54949;
		right: -6px;
		top: -3px;
	}
}

/* select theme btn  */
.select-theme-btn > div {
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 100%;
	font-size: 1.1em;
	border: none;
	border-radius: 0.4em;
	background-color: #008ecc;
}

.select-theme-btn > div > a{
	width: 100%;
	text-align: center;
	padding: 0.5rem 0;
	cursor: pointer;
}

/* /admin/themeConfiguration2.css */

.theme {
	background: #f4f4f4;
	/* background: #000000; */
}
section:nth-child(2) {
	background-color: #f4f4f4;
}

.theme-head {
	background-color: white;
	padding: 1rem 2rem;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.theme-name {
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		margin-left: 1rem;
		color: #6a6a6a;
	}
	svg {
		width: 23px;
		height: 19px;
	}
}

.theme-bar {
	display: flex;
	align-items: center;
}

.theme-number {
	text-align: center;
	p {
		color: #008ecc;
		font-size: 11.974px;
		font-weight: 500;
		line-height: 15.567px; /* 130% */
		text-transform: capitalize;
		margin-bottom: 0;
	}
}

.theme-num-icon {
	padding: 0.35rem 1rem;
	border-radius: 50%;
	border: 2px solid #008ecc;
	margin-bottom: 0.45rem;
	p {
		color: #008ecc;
		margin-bottom: 0%;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 31.134px; /* 130% */
		text-transform: capitalize;
	}
}

.theme-line {
	height: 1px;
	width: 9rem;
	display: inline;
	position: relative;
	top: -10px;
	margin-left: 1rem;
	margin-right: 1rem;
	background-color: #008ecc;
	border-bottom: 2px solid #008ecc;
}
.theme-line::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}
.theme-line::before {
	content: '';
	position: absolute;
	right: -7px;
	bottom: -5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}

.theme-content {
	margin-top: 2.5rem;
}

.theme-font-card {
	border-radius: 0.625rem;
	border: 2px solid #a2a6ad;
	background: #d8d8d8;
	font-weight: 500;
	display: flex;
	justify-content: center;
	color: #939393;
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding: 1rem;
	overflow: auto;
}

.theme-card-active {
	border: 2px solid #008ecc;
	background-color: #008ecc;
	color: white;
	transition: all 0.3s ease-in-out;
}

.theme-font1 {
	font-size: 2rem;
	margin-bottom: 2rem;
}

.theme-font2 {
	font-size: 1.3rem;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.theme-line {
		width: 5rem;
	}
}

@media screen and (max-width: 992px) {
	.theme-head {
		background-color: white;
		padding: 0.6rem 1rem;
		display: block;
	}
	.theme-name {
		margin-bottom: 1.5rem;
		p {
			margin-bottom: 0;
			margin-left: 0.8rem;
			font-size: 14px;
		}
		svg {
			width: 13px;
			height: 10px;
		}
	}
	.theme-number {
		text-align: center;
		p {
			color: #008ecc;
			font-size: 11.974px;
			font-weight: 500;
			line-height: 15.567px; /* 130% */
			text-transform: capitalize;
			margin-bottom: 0;
		}
	}

	.theme-num-icon {
		padding: 0.2rem 0.7rem;
		border-radius: 50%;
		border: 2px solid #008ecc;
		margin-bottom: 0.45rem;
		p {
			color: #008ecc;
			margin-bottom: 0%;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			line-height: 19.624px; /* 130% */
			text-transform: capitalize;
		}
	}

	.theme-line {
		height: 1px;
		width: 4rem;
		display: inline;
		position: relative;
		top: -10px;
		margin-left: 1rem;
		margin-right: 1rem;
		background-color: #008ecc;
		border-bottom: 2px solid #008ecc;
	}
	.theme-line::after {
		content: '';
		position: absolute;
		top: -2px;
		left: -5px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}
	.theme-line::before {
		content: '';
		position: absolute;
		right: -5px;
		bottom: -4px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}

	.theme-content {
		margin-top: 1rem;
	}

	.theme-font-card {
		margin-top: 1rem;
	}

	.theme-font-card {
		border-radius: 0.37044rem;
		border: 1.185px solid #a2a6ad;
		background: #d8d8d8;
		font-weight: 500;
		display: flex;
		justify-content: center;
		color: #939393;
		padding-top: 1.2rem;
		padding-bottom: 1.7rem;
		overflow: auto;
	}

	.theme-card-active {
		border: 2px solid #008ecc;
		background-color: #008ecc;
		color: white;
		transition: all 0.3s ease-in-out;
	}

	.theme-font1 {
		font-size: 1.2rem;
		margin-bottom: 1rem;
	}

	.theme-font2 {
		font-size: 0.8rem;
		margin-bottom: 0.6rem;
	}
}


/* /admin/themeConfiguration3.css */

.theme {
	background: #f4f4f4;
	position: relative;
}
section:nth-child(2) {
	background-color: #f4f4f4;
}

.theme-head {
	background-color: white;
	padding: 1rem 2rem;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.theme-name {
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		margin-left: 1rem;
		color: #6a6a6a;
	}
	svg {
		width: 23px;
		height: 19px;
	}
}

.theme-bar {
	display: flex;
	align-items: center;
}

.theme-number {
	text-align: center;
	p {
		color: #008ecc;
		font-size: 11.974px;
		font-weight: 500;
		line-height: 15.567px; /* 130% */
		text-transform: capitalize;
		margin-bottom: 0;
	}
}

.theme-num-icon {
	padding: 0.35rem 1rem;
	border-radius: 50%;
	border: 2px solid #008ecc;
	margin-bottom: 0.45rem;
	p {
		color: #008ecc;
		margin-bottom: 0%;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 31.134px; /* 130% */
		text-transform: capitalize;
	}
}

.theme-line {
	height: 1px;
	width: 9rem;
	display: inline;
	position: relative;
	top: -10px;
	margin-left: 1rem;
	margin-right: 1rem;
	background-color: #008ecc;
	border-bottom: 2px solid #008ecc;
}
.theme-line::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}
.theme-line::before {
	content: '';
	position: absolute;
	right: -7px;
	bottom: -5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}

.theme-content {
	margin-top: 1rem;
}

.prebuild-banner {
	display: flex;
	align-items: center;
	p {
		color: #6a6a6a;
		font-size: 1.1rem;
		font-weight: 400;
		margin-bottom: 0;
	}
	button {
		border-radius: 0.625rem;
		background: #008ecc;
		color: white;
		border: none;
		padding: 0.5rem 3.4375rem;
		margin-left: 1rem;
	}
}

.banner-size-text {
	display: flex;
	align-items: center;
	margin-top: 2rem;
	p {
		margin-bottom: 0;
		color: #a2a6ad;
		font-size: 1.125rem;
		margin-left: 1rem;
	}
	svg {
		width: 23px;
		height: 19px;
	}
}

.banner-img1 {
	border-radius: 0.92156rem;
	border: 2.949px dashed #818181;
	background: #fff;
	padding: 1rem;
	margin-top: 1.7rem;
	position: relative;
	p {
		margin-bottom: 0;
		color: #a2a6ad;
		font-size: 1.125rem;
	}
}

.banner-img1-l1 {
	text-align: center;
}

.banner-img1-l2 {
	/* margin-top: 3.9rem;
	margin-bottom: 3.4rem; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	div {
		text-align: center;
		p {
			margin-top: 2.3rem;
			color: #c1c1c1;
			font-size: 0.9rem;
			font-weight: 500;
		}
		svg {
			width: 59px;
			height: 62px;
		}
	}
}

.banner-img1-l3 {
	text-align: center;
}

.banner-img2 {
	border-radius: 0.92156rem;
	border: 2.949px dashed #818181;
	background: #fff;
	position: relative;
	margin-top: 0.8rem;
	margin-bottom: 2rem;
	text-align: center;
	p {
		margin-bottom: 0;
		color: #c1c1c1;
		font-size: 0.9rem;
		font-weight: 500;
		margin-top: 2.3rem;
	}
}

.banner-img2-l {
	margin-top: 6.3rem;
	margin-bottom: 5.69rem;
	svg {
		width: 59px;
		height: 62px;
	}
}

.banner-num {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: rgba(0, 142, 204, 0.71);
	border-radius: 50%;
	padding: 0 0.8rem;
	width: 3em;
	height: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
	p {
		color: #fff;
		font-feature-settings: 'clig' off, 'liga' off;
		font-size: 1.6rem;
		font-weight: 700;
		padding: 0;
		margin: 0;
		text-transform: uppercase;
	}
}

.banner-upload {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 4rem;
}

.banner-add {
	border-radius: 0.22394rem;
	cursor: pointer;
	display: flex;
	padding: 0.5rem 1rem;
	border: 1px solid #0094ff;
	background: #f6f7fb;
	p {
		color: #0094ff;
		font-size: 0.75rem;
		font-weight: 500;
		margin-bottom: 0;
	}
	div {
		margin-left: 0.7rem;
		padding: 0.08rem;
		display: flex;
		background-color: #0094ff;
		border-radius: 50%;
	}
}

.banner-upload-btn {
	button {
		border-radius: 0.625rem;
		background: #008ecc;
		color: #fff;
		padding: 1rem 7rem;
		border: none;
	}
}

.file-input {
	display: none;
}

.update_product_upload_level {
	p {
		position: relative;
	}
}

#banner-img1-l3_bottom_txt {
	margin-top: 1.5em;
}

.upload_level {
	padding: 2.5em;
}

label {
	display: inline-block;
	cursor: pointer;
}

label svg {
	width: 100px;
	height: 100px;
}

label p {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.theme-line {
		width: 5rem;
	}
}

@media screen and (max-width: 992px) {
	.theme-head {
		background-color: white;
		padding: 0.6rem 1rem;
		display: block;
	}
	.theme-name {
		margin-bottom: 1.5rem;
		p {
			margin-bottom: 0;
			margin-left: 0.8rem;
			font-size: 14px;
		}
		svg {
			width: 13px;
			height: 10px;
		}
	}
	.theme-number {
		text-align: center;
		p {
			color: #008ecc;
			font-size: 11.974px;
			font-weight: 500;
			line-height: 15.567px; /* 130% */
			text-transform: capitalize;
			margin-bottom: 0;
		}
	}

	.theme-num-icon {
		padding: 0.2rem 0.7rem;
		border-radius: 50%;
		border: 2px solid #008ecc;
		margin-bottom: 0.45rem;
		p {
			color: #008ecc;
			margin-bottom: 0%;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			line-height: 19.624px; /* 130% */
			text-transform: capitalize;
		}
	}

	.theme-line {
		height: 1px;
		width: 4rem;
		display: inline;
		position: relative;
		top: -10px;
		margin-left: 1rem;
		margin-right: 1rem;
		background-color: #008ecc;
		border-bottom: 2px solid #008ecc;
	}
	.theme-line::after {
		content: '';
		position: absolute;
		top: -2px;
		left: -5px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}
	.theme-line::before {
		content: '';
		position: absolute;
		right: -5px;
		bottom: -4px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}

	.theme-content {
		margin-top: 1rem;
	}
}

@media screen and (max-width: 768px) {
	.prebuild-banner {
		display: flex;
		justify-content: space-between;
		p {
			font-size: 0.75rem;
		}
		button {
			border-radius: 0.36181rem;
			font-size: 0.5rem;
			padding: 0.4rem 1.8rem;
		}
	}

	.banner-size-text {
		display: flex;
		align-items: center;
		margin-top: 1.87rem;
		p {
			margin-bottom: 0;
			font-size: 0.625rem;
			margin-left: 0.46rem;
		}
		svg {
			width: 0.6rem;
			height: 0.5rem;
		}
	}

	.banner-img1 {
		border-radius: 0.32044rem;
		border: 1.025px dashed #818181;
		background: #fff;
		padding: 0.3rem;
		margin-top: 1rem;
		position: relative;
		p {
			margin-bottom: 0;
			color: #a2a6ad;
			font-size: 0.375rem;
		}
	}

	.banner-img1-l2 {
		margin-top: 1.76rem;
		margin-bottom: 2.58rem;
		div {
			p {
				margin-top: 0.41rem;
				font-size: 0.37rem;
			}
			svg {
				width: 21px;
				height: 22px;
			}
		}
	}

	.banner-img2 {
		border-radius: 0.32044rem;
		border: 1.025px dashed #818181;
		margin-top: 1rem;
		margin-bottom: 1rem;
		p {
			margin-top: 0.41rem;
			font-size: 0.375rem;
			font-weight: 500;
		}
	}

	.banner-img2-l {
		margin-top: 2.5rem;
		margin-bottom: 3.2rem;
		svg {
			width: 21px;
			height: 22px;
		}
	}

	.banner-num {
		display: none;
	}

	.banner-upload {
		display: block;
		padding-bottom: 4rem;
	}

	.banner-add {
		width: fit-content;
	}

	.banner-upload-btn {
		text-align: center;
		button {
			margin-top: 6rem;
		}
	}

	.pb-upload {
		position: static !important;
		text-align: center;
		margin-top: 4rem;
		margin-left: auto !important;
	}
}

.prebuild-banner-overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: rgba(35, 35, 35, 0.2);
	backdrop-filter: blur(4px);
	width: 100%;
	height: 100%;
	justify-content: end;
}

.prebuild-active {
	display: flex;
}

.pb-overlay-main {
	width: 25rem;
	background-color: #fff;
	margin-top: 0.3rem;
}

.pb-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.9rem 1.1rem;
	background-color: #f4f4f4;
	p {
		color: #6a6a6a;
		font-size: 1.125rem;
		font-weight: 400;
		margin-bottom: 0;
	}
	button {
		padding: none;
		background-color: transparent;
		border: none;
	}
}

.pb-images {
	padding: 1.1rem;
	img {
		width: 100%;
		height: auto;
	}
}

.pb-image {
	margin-bottom: 2rem;
	border-radius: 10px;
	overflow: clip;
}

.pb-upload {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	margin-left: 2.6rem;
	button {
		border-radius: 0.625rem;
		background: #008ecc;
		color: #fff;
		width: 20rem;
		height: 3rem;
		border: none;
	}
}

/* /admin/themeConfiguration4.css */

.theme {
	background: #f4f4f4;
}
section:nth-child(2) {
	background-color: #f4f4f4;
}

.theme-head {
	background-color: white;
	padding: 1rem 2rem;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.theme-name {
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		margin-left: 1rem;
		color: #6a6a6a;
	}
	svg {
		width: 23px;
		height: 19px;
	}
}

.theme-bar {
	display: flex;
	align-items: center;
}

.theme-number {
	text-align: center;
	p {
		color: #008ecc;
		font-size: 11.974px;
		font-weight: 500;
		line-height: 15.567px; /* 130% */
		text-transform: capitalize;
		margin-bottom: 0;
	}
}

.theme-num-icon {
	padding: 0.35rem 1rem;
	border-radius: 50%;
	border: 2px solid #008ecc;
	margin-bottom: 0.45rem;
	p {
		color: #008ecc;
		margin-bottom: 0%;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 31.134px; /* 130% */
		text-transform: capitalize;
	}
}

.theme-line {
	height: 1px;
	width: 9rem;
	display: inline;
	position: relative;
	top: -10px;
	margin-left: 1rem;
	margin-right: 1rem;
	background-color: #008ecc;
	border-bottom: 2px solid #008ecc;
}
.theme-line::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}
.theme-line::before {
	content: '';
	position: absolute;
	right: -7px;
	bottom: -5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #008ecc;
}

.theme-content {
	margin-top: 2.5rem;
}

.theme-variant-card1,
.theme-variant-card2,
.theme-variant-card3 {
	border-radius: 0.625rem;
	border: 2px solid #b3b3b3;
	background: #fff;
	position: relative;
	height: 18.8rem;
}

.theme-variant-card1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.theme-variant-l1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.9rem;
	width: 100%;
	div:first-child {
		border-bottom: 0.4rem solid #008ecc;
		p {
			color: #008ecc;
			padding: 0 0.5rem;
		}
	}
	p {
		margin-bottom: 0;

		color: #a8a8a8;
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 2.35263rem; /* 209.121% */
		text-transform: uppercase;
	}
	div {
		border-bottom: 0.4rem solid transparent;
	}
}

.theme-variant-l2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 1.3rem;
	margin-right: 1.9rem;
	border-bottom: 1px solid #e1e1e1;
	div:first-child {
		border-bottom: 0.25rem solid #008ecc;
		margin-left: 0;
		p {
			color: #008ecc;
		}
	}
	p {
		margin-bottom: 0;
		padding: 0 1rem;
		color: #a8a8a8;
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 2.35263rem; /* 313.681% */
	}
	div {
		border-bottom: 0.25rem solid transparent;
	}
}
.theme-variant-l3 {
	margin-top: 0.4rem;
	margin-bottom: 0.5rem;
	display: flex;
	text-align: center;
	justify-content: space-between;
	padding-left: 1.3rem;
	padding-right: 1.9rem;
	width: 100%;
	div:first-child {
		p:first-child {
			color: #008ecc;
		}
	}
	p {
		margin-bottom: 0.5rem;
		padding: 0 1rem;
		color: #a8a8a8;
		font-size: 0.75rem;
		font-weight: 400; /* 313.681% */
	}
	div {
		margin-top: 0.5rem;
	}
}

.theme-variant-card2,
.theme-variant-card3 {
	padding-top: 5.5rem;
}

.theme-card-variant-active {
	border: 2px solid #008ecc;
	.theme-variant-level {
		border-color: #008ecc;
		background: rgba(0, 142, 204, 0.18);
		p {
			color: #008ecc;
		}
	}
}

.theme-variant-level {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 2.1rem;
	border-radius: 0rem 0.6rem;
	border: 1px solid #a8a8a8;
	border-top: none;
	border-right: none;
	background: #fff;
	p {
		color: #a8a8a8;
		margin-bottom: 0;
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 2.35263rem;
	}
}

.banner-size-text {
	display: flex;
	align-items: center;
	margin-top: 1.8rem;
	margin-bottom: 1.38rem;
	p {
		margin-bottom: 0;
		color: #a2a6ad;
		font-size: 1.125rem;
		margin-left: 1rem;
	}
	svg {
		width: 23px;
		height: 19px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.theme-line {
		width: 5rem;
	}
}

@media screen and (max-width: 992px) {
	.theme-head {
		background-color: white;
		padding: 0.6rem 1rem;
		display: block;
	}
	.theme-name {
		margin-bottom: 1.5rem;
		p {
			margin-bottom: 0;
			margin-left: 0.8rem;
			font-size: 14px;
		}
		svg {
			width: 13px;
			height: 10px;
		}
	}
	.theme-number {
		text-align: center;
		p {
			color: #008ecc;
			font-size: 11.974px;
			font-weight: 500;
			line-height: 15.567px; /* 130% */
			text-transform: capitalize;
			margin-bottom: 0;
		}
	}

	.theme-num-icon {
		padding: 0.2rem 0.7rem;
		border-radius: 50%;
		border: 2px solid #008ecc;
		margin-bottom: 0.45rem;
		p {
			color: #008ecc;
			margin-bottom: 0%;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			line-height: 19.624px; /* 130% */
			text-transform: capitalize;
		}
	}

	.theme-line {
		height: 1px;
		width: 4rem;
		display: inline;
		position: relative;
		top: -10px;
		margin-left: 1rem;
		margin-right: 1rem;
		background-color: #008ecc;
		border-bottom: 2px solid #008ecc;
	}
	.theme-line::after {
		content: '';
		position: absolute;
		top: -2px;
		left: -5px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}
	.theme-line::before {
		content: '';
		position: absolute;
		right: -5px;
		bottom: -4px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #008ecc;
	}

	.theme-content {
		margin-top: 1rem;
	}

	.theme-font-card {
		margin-top: 1rem;
	}

	.theme-variant-card {
		border-radius: 0.37044rem;
		border: 1.185px solid #a2a6ad;
		background: #d8d8d8;
		font-weight: 500;
		display: flex;
		justify-content: center;
		color: #939393;
		padding-top: 1.2rem;
		padding-bottom: 1.7rem;
		overflow: auto;
	}

	.theme-card-variant-active {
		border: 2px solid #008ecc;
	}

	.banner-size-text {
		display: flex;
		align-items: center;
		margin-top: 1.87rem;
		p {
			margin-bottom: 0;
			font-size: 0.625rem;
			margin-left: 0rem;
		}
		svg {
			display: none;
		}
	}

	.theme-variant-card1,
	.theme-variant-card2,
	.theme-variant-card3 {
		border-radius: 0.625rem;
		border: 2px solid #b3b3b3;
		background: #fff;
		position: relative;
		height: 11rem;
	}

	.theme-vc-wrapper1,
	.theme-vc-wrapper3 {
		padding-right: 0.6rem !important;
	}

	.theme-vc-wrapper2 {
		padding-left: 0.6rem !important;
	}

	.theme-variant-l1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.9rem;
		width: 100%;
		div:first-child {
			border-bottom: 0.25rem solid #008ecc;
			p {
				color: #008ecc;
				padding: 0 0.3rem;
			}
		}
		p {
			margin-bottom: 0;

			color: #a8a8a8;
			font-size: 0.66681rem;
			font-weight: 500;
			line-height: 1.39444rem; /* 209.121% */
			text-transform: uppercase;
		}
		div {
			border-bottom: 0.25rem solid transparent;
		}
	}

	.theme-variant-l2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 0.78rem;
		margin-right: 0.9rem;
		border-bottom: 1px solid #e1e1e1;
		div:first-child {
			border-bottom: 0.14rem solid #008ecc;
			margin-left: 0;
			p {
				color: #008ecc;
			}
		}
		p {
			margin-bottom: 0;
			padding: 0 0.4rem;
			color: #a8a8a8;
			font-size: 0.44456rem;
			font-weight: 500;
			line-height: 1.39rem; /* 313.681% */
		}
		div {
			border-bottom: 0.14rem solid transparent;
		}
	}
	.theme-variant-l3 {
		margin-top: 0rem;
		margin-bottom: 0.5rem;
		display: flex;
		text-align: center;
		justify-content: space-between;
		padding-left: 0.78rem;
		padding-right: 0.9rem;
		width: 100%;
		div:first-child {
			p:first-child {
				color: #008ecc;
			}
		}
		p {
			margin-bottom: 0.3rem;
			padding: 0 0.5rem;
			color: #a8a8a8;
			font-size: 0.44456rem;
		}
		div {
			margin-top: 0.3rem;
		}
	}

	.theme-variant-card2,
	.theme-variant-card3 {
		padding-top: 3.26rem;
	}

	.theme-card-variant-active {
		border: 2px solid #008ecc;
		.theme-variant-level {
			border-color: #008ecc;
			background: rgba(0, 142, 204, 0.18);
			p {
				color: #008ecc;
			}
		}
	}

	.theme-variant-level {
		position: absolute;
		top: 0;
		right: 0;
		padding: 0 1.3rem;
		border-radius: 0rem 0.37rem;
		border: 1px solid #a8a8a8;
		border-top: none;
		border-right: none;
		background: #fff;
		p {
			color: #a8a8a8;
			margin-bottom: 0;
			font-size: 0.4rem;
			font-weight: 500;
			line-height: 1.39444rem;
		}
	}
}
.dropdown-design-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
	.dropdown-design-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 993px) {
	.dropdown-design-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

/* /admin/themeConfiguration5.css */

.selected-themes {
	display: flex;
	justify-content: space-between;
	margin-left: 1.38rem;
	margin-right: 5.5rem;
	margin-top: 1.12rem;
}

#selected-themes-card,
#theme-variant-card1,
#theme-font-card {
	width: 30%;
}

.selected-banner {
	border-radius: 0.90475rem;
	border: 2.895px dashed #818181;
	background: #fff;
	padding: 4rem 1.5rem;
	margin-top: 1.5rem;
	margin-left: 1rem;
	margin-right: 5.5rem;
	display: flex;
}

.selected-banner1 {
	margin-right: 1rem;
}
.selected-banner1,
.selected-banner2 {
	margin-right: 1rem;
	width: 50%;
	position: relative;
	img {
		width: 100%;
		height: auto;
	}
	.selected-banner-num {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 3px;
		right: 3px;
		width: 1.4rem;
		height: 1.4rem;
		border-radius: 50%;
		background-color: rgba(0, 142, 204, 0.71);
		p {
			color: #fff;
			font-feature-settings: 'clig' off, 'liga' off;
			font-size: 0.86794rem;
			font-weight: 700;
			margin-bottom: 0;
		}
	}
}

.build-theme {
	margin-left: 1rem;
	background-color: #fff;
	margin-top: 1.8rem;
}

.build-theme1 {
	padding-left: 6rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: 0.24rem solid #f6f7fb;
	p {
		color: #a2a6ad;
		font-size: 1.25rem;
		font-weight: 400;
		margin-bottom: 0;
	}
}

.build-theme2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 6rem;
	padding-top: 1.5rem;
	padding-right: 4rem;
	padding-bottom: 1.3rem;
}

.build-theme2-left {
	display: inline-flex;
	align-items: center;
	p {
		margin-left: 1rem;
		margin-bottom: 0;
		color: #a2a6ad;
		font-size: 1.25rem;
	}
	svg {
		width: 23px;
		height: 19px;
	}
}

.build-theme2-right {
	display: inline-flex;
	button:first-child {
		margin-right: 1rem;
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #fff;
		color: #008ecc;
		font-size: 1rem;
		padding: 1rem 4rem;
	}
	button:last-child {
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #008ecc;
		color: #fff;
		font-size: 1rem;
		padding: 1rem 4rem;
	}
}
.theme-head-conf-5 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	padding: 1em 2em;
}

@media (max-width: 1230px) {
	#theme-variant-l1 {
		padding: 0 0.7rem;
		div {
			p {
				font-size: 0.6rem;
				line-height: 0.8rem;
			}
		}
	}
}
@media screen and (max-width: 992px) {
	.selected-themes {
		margin-left: 0;
		margin-right: 0;
	}
	.theme-head-conf-5 {
		display: block;
	}
	.theme-bar {
		margin-bottom: 1em;
	}
	#selected-themes-card,
	#theme-variant-card1,
	#theme-font-card {
		width: 30%;
	}
	#theme-colors {
		div {
			height: 5.7rem;
		}
	}
	#theme-color-bottom {
		padding-top: 0.5rem;
		div {
			width: 1rem;
			height: 1rem;
		}
	}

	#theme-font1 {
		font-size: 0.76rem;
		margin-bottom: 0.84rem;
	}
	#theme-font2 {
		font-size: 0.5rem;
		margin-bottom: 0.44rem;
	}
	#theme-variant-card1 {
		margin-top: 1rem;
		height: 8rem;
	}
	#theme-variant-l1 {
		padding: 0 0.7rem;
		div {
			p {
				font-size: 0.41rem;
				line-height: 0.8rem;
			}
		}
	}
	#theme-variant-level {
		padding: 0 0.7rem;
		border-radius: 0rem 0.23294rem;
		p {
			font-size: 0.27rem;
			line-height: 0.8rem;
		}
	}
	#theme-font-card {
		padding-bottom: 1.1rem;
	}

	.selected-banner {
		border-radius: 0.65019rem;
		border: 2.081px dashed #818181;
		background: #fff;
		padding: 1.38rem 0.62rem;
		margin-left: 0rem;
		margin-right: 0rem;
		display: block;
	}

	.selected-banner1 {
		margin-bottom: 1.3rem;
	}
	.selected-banner1,
	.selected-banner2 {
		margin-bottom: 1.3rem;
		width: 100%;
		.selected-banner-num {
			top: 3px;
			right: 3px;
			width: 1rem;
			height: 1rem;
			p {
				font-size: 0.62375rem;
				font-weight: 700;
			}
		}
	}
	.build-theme {
		margin-left: 0rem;
		background-color: #fff;
		margin-top: 2rem;
	}

	.build-theme1 {
		padding-left: 0.5rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-bottom: 0.08519rem solid #f6f7fb;
		p {
			font-size: 0.75rem;
		}
	}

	.build-theme2 {
		display: block;
		padding-left: 0.5rem;
		padding-top: 1.8rem;
		padding-right: 0.5rem;
		padding-bottom: 0rem;
	}

	.build-theme2-left {
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
		p {
			margin-left: 0.3rem;
			font-size: 0.75rem;
		}
		svg {
			width: 11px;
			height: 10px;
		}
	}

	.build-theme2-right {
		display: flex;
		justify-content: space-between;
		button:first-child {
			margin-right: 1rem;
			border-radius: 0.625rem;
			border: 2px solid #008ecc;
			background: #fff;
			color: #008ecc;
			font-size: 1rem;
			padding: 1rem 4rem;
		}
		button:last-child {
			border-radius: 0.625rem;
			border: 2px solid #008ecc;
			background: #008ecc;
			color: #fff;
			font-size: 1rem;
			padding: 1rem 4rem;
		}
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.build-theme1,
	.build-theme2 {
		padding-left: 1rem;
	}

	.build-theme2 {
		padding-right: 1rem;
	}
}

@media (max-width: 461px) {
	.theme-font-card {
		padding: 0.5rem !important;
	}
	.theme-variant-l1 {
		padding: 0.2rem !important;
	}
}
/* preview btn  */
.theme-preview-btn {
	display: flex;
	justify-content: flex-end;
}
.theme-preview-btn > button {
	background-color: #008ecc;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5em 1em;
	gap: 1em;
	border: none;
	border-radius: 0.4em;
}
.theme-preview-btn > button > p {
	margin: 0;
}

/* /admin/deliveryCharges.css */

.delivery-charges-theme-content {
	padding-left: 2rem;
}

.theme {
	background-color: white !important;
}

.banner-size-text {
	p {
		color: #6a6a6a;
		font-size: 1.125rem;
		font-weight: 400;
	}
}

.charges-types {
	margin-top: 2.8rem;
}

.delivery-charge {
	margin-bottom: 2rem;
}

.delivery-charge-checkbox {
	display: inline-flex;
	align-items: center;
	margin-bottom: 1rem;
	input {
		height: 1.4rem;
		width: 1.4rem;
		accent-color: #0094ff;
	}
	label {
		color: #828282;
		font-size: 0.875rem;
		font-weight: 500;
		margin-left: 1rem;
	}
}

.delivery-charge-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 30rem;
	padding: 0.8rem 1rem;
	border-radius: 0.5rem;
	background: #f2f7ff;
	p {
		color: #9f9e9e;
		margin-bottom: 0;
		font-size: 0.75rem;
		font-weight: 400;
	}
	div {
		display: flex;
	}
	button {
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 50%;
		border: 1px solid #b0b0b0;
		color: #008ecc;
		font-size: 1.125rem;
		background-color: transparent;
		font-weight: 500;
		line-height: 150%; /* 1.6875rem */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	button:first-child {
		margin-right: 0.5rem;
	}
}

.delivery-charge-add {
	border: none;
	border-radius: 0.625rem;
	background: #008ecc;
	color: white;
	padding: 1rem 3rem;
}

@media screen and (max-width: 768px) {
	.theme-content {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}
	.charges-types {
		margin-top: 4rem;
	}
	.delivery-charge-checkbox {
		margin-bottom: 1.31rem;
		label {
			margin-left: 0.76rem;
		}
	}

	.delivery-charge-price {
		width: 100%;
	}
}

/* /admin/couponCode.css */

.theme-content {
	padding-left: 1rem;
	padding-right: 1rem;
}

.banner-size-text {
	padding-left: 1.6rem;
}

.coupon-code-card {
	padding: 1.6rem 1.8rem;
	margin: 1.3rem 0;
	background: #fff;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.coupon-field {
	margin-bottom: 1rem;
	label {
		display: block;
		color: #828282;
		font-size: 0.875rem;
		font-weight: 500;
		margin-bottom: 0.5rem;
	}
	input {
		border-radius: 0.5rem;
		background: #f2f7ff;
		border: none;
		outline: none;
		padding: 1rem;
		width: 30rem;
	}
}

.coupon-button {
	button:first-child {
		margin-right: 0.44rem;
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #fff;
		width: 11.6rem;
		padding: 1rem 0;
		color: #008ecc;
	}
	button:last-child {
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #008ecc;
		width: 11.6rem;
		padding: 1rem 0;
		color: #fff;
	}
}

.add-card {
	border-radius: 0.3125rem;
	border: 1px solid #a2a6ad;
	background: #fff;
	padding: 1.19rem 1.3rem;
	button {
		border-radius: 0.22394rem;
		border: 0.896px solid #0094ff;
		background: #f6f7fb;
		padding: 0.5rem 0.38rem;
		display: flex;
		align-items: center;
		color: #0094ff;
		font-size: 0.75rem;
		font-weight: 500;
		div {
			background-color: #0094ff;
			border-radius: 50%;
			width: 1.1rem;
			height: 1.1rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

@media screen and (max-width: 768px) {
	.coupon-code-variants {
		width: 100% !important;
	}
	.theme-content {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.banner-size-text {
		padding-left: 0rem;
	}

	.coupon-code-card {
		padding: 0.5rem;
		padding-bottom: 1.4rem;
		margin: 1rem 0;
	}

	.coupon-field {
		margin-bottom: 1rem;
		input {
			border-radius: 0.5rem;
			background: #f2f7ff;
			border: none;
			outline: none;
			padding: 1rem;
			width: 100%;
		}
	}

	.coupon-button {
		display: flex;
		button:first-child {
			margin-right: 0.44rem;
			border-radius: 0.625rem;
			border: 2px solid #008ecc;
			background: #fff;
			width: 50%;
			padding: 1rem 0;
			color: #008ecc;
		}
		button:last-child {
			border-radius: 0.625rem;
			border: 2px solid #008ecc;
			background: #008ecc;
			width: 50%;
			padding: 1rem 0;
			color: #fff;
		}
	}
}

/* /admin/product1.html */

.product-card {
	margin-top: 0.5em;
	background-color: white;
	border-radius: 0.9375rem;
	padding-top: 1.5rem;
	padding-left: 3.6rem;
	padding-bottom: 1rem;
	padding-right: 1.5rem;
	label {
		display: block;
		color: #828282;
		font-size: 0.875rem;
		font-weight: 500;
		/* margin-bottom: 0.5rem; */
	}
	.checkbox{
		margin-bottom: 0.5rem;
		.color-circ{
			width: 25px;
			height: 25px;
			border-radius: 50%;
		}
	}
}

.product-field {
	margin-bottom: 1rem;
}

.product-name-input {
	input,
	textarea {
		border-radius: 7px;
		border: none;
		background: #f2f7ff;
		color: #008ecc;
		outline: none;
		padding: 0.75rem;
		width: 100%;
		/* color: #9f9e9e; */
		font-size: 0.75rem;
	}
	input::-webkit-input-placeholder {
		color: #9f9e9e;
	}
}

.product-name-input > input:focus {
	border-color: #008ecc;
}

.product-category-btns {
	display: flex;
	select {
		border-radius: 7px;
        background: #f2f7ff;
        /* border: 1px solid transparent; */
        border: none;
        width: 100%;
        padding: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9f9e9e;
        font-size: 0.75rem;
        font-weight: 400;
        margin-right: 1.25rem;
        color: #008ecc;
	}
}

#choose-supplier {
	display: flex;
	flex-direction: column;
	select {
		border-radius: 0.5rem;
		background: #f2f7ff;
		/* border: 1px solid transparent; */
		border: 1px solid #008ECC;
		width: 100%;
		padding: 1rem 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9f9e9e;
		font-size: 0.75rem;
		font-weight: 400;
		margin-right: 1.25rem;
		color: #008ecc;
	}
}

.product-category-btns > input:focus {
	border-color: #008ecc;
	outline: none;
}

.product-variant-btns {
	display: flex;
	flex-wrap: wrap;
	fieldset{
		margin-top: 0.5rem;
	}
	select {
		border-radius: 0.5rem;
		border: 1px solid #b0b0b0;
		background: #f2f7ff;
		padding: 1rem;
		width: 9.6rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 1.19rem;
		/* color: #b0b0b0; */
		color: #008ecc;
		font-size: 0.75rem;
		font-weight: 400;
	}
}

.product-variant-btns > input:focus {
	border-color: #008ecc;
	outline: none;
}

select {
	color: #828282;
	font-size: 0.825rem;
}

.product-upload1-btn {
	display: flex;
	justify-content: end;
	margin-top: 3.5rem;
	button {
		border: none;
		background: #008ecc;
		padding: 1rem 3.3rem;
		color: white;
		border-radius: 0.625rem;
	}
}

.product-info-upload{
	max-width: 992px;
}

@media screen and (max-width: 768px) {
	.product-card {
		padding-left: 0.94rem;
		padding-right: 0.56rem;
		padding-top: 3rem;
		border-radius: 0;
	}
	.product-name-input {
		input {
			width: 100%;
		}
	}
	.product-category-btns {
		button {
			width: 6rem;
		}
	}
	.product-variant-btns {
		button {
			width: 35%;
			text-wrap: nowrap;
			margin-right: 0.22rem;
		}
		button:last-child {
			margin-right: 0;
		}
	}
	.product-upload1-btn {
		margin-top: 12rem;
		justify-content: center;
	}
}

@media (max-width: 994px) {
	section:nth-child(1) {
		order: 0 !important;
	}
	section:nth-child(2) {
		order: 0 !important;
	}
}

/* /admin/product2.css */

.excel-upload-card {
	margin: 0 1rem;
	padding-top: 4.8rem;
	padding-bottom: 8.5rem;
	border-radius: 0.625rem;
	border: 2px solid #008ecc;
	background: #f2f7ff;
	box-shadow: -4px 4px 25px 0px rgba(0, 0, 0, 0.15);
	display: flex;
	justify-content: center;
	position: relative;
	div {
		width: 70%;
	}
}

.excel-upload {
	max-width: 50em;
	min-width: 100%;
	height: 25rem;
	border-radius: 0.92156rem;
	border: 2.949px dashed #818181;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	div {
		text-align: center;
	}
	p {
		color: #c1c1c1;
		font-size: 0.92156rem;
		font-weight: 500;
		margin-top: 1.27rem;
	}
	svg {
		width: 59px;
		height: 62px;
	}
}

.excel-card-head {
	display: flex;
	align-items: center;
	margin-bottom: 2.5rem;
	p {
		color: #4a4a4a;
		font-size: 1.54544rem;
		font-weight: 400;
		margin-left: 0.7rem;
		margin-bottom: 0;
	}
	svg {
		width: 22px;
		height: 17px;
	}
}

.excel-upload-btn {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
	button {
		display: flex;
		width: 23rem;
		height: 3.6rem;
		justify-content: center;
		align-items: center;
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #fff;
		color: #008ecc;
		font-size: 1rem;
		svg {
			margin-right: 0.5rem;
		}
	}
}

.excel-upload-close {
	position: absolute;
	top: 2.25rem;
	right: 2rem;
	border: none;
	background: transparent;
	svg {
		width: 18px;
		height: 18px;
	}
}

@media screen and (max-width: 768px) {
	.excel-upload-card {
		margin: 0;
		padding-top: 2rem;
		padding-bottom: 6rem;
		border-radius: 0;
		border: none;
		background: #f2f7ff;
		box-shadow: -4px 4px 25px 0px rgba(0, 0, 0, 0.15);
		display: block;
		padding-left: 0.94rem;
		padding-right: 0.94rem;
		div {
			width: 100%;
		}
	}

	.excel-upload {
		width: 100%;
		height: 18rem;
		border-radius: 0.6rem;
		border: 2.123px dashed #818181;
		p {
			font-size: 0.66rem;
			margin-top: 1rem;
		}
		svg {
			width: 43px;
			height: 45px;
		}
	}

	.excel-card-head {
		margin-bottom: 2.8rem;
		p {
			font-size: 1.125rem;
			margin-left: 0.44rem;
		}
		svg {
			width: 20px;
			height: 15px;
		}
	}

	.excel-upload-btn {
		margin-top: 10rem;
		button {
			width: 90%;
		}
	}

	.excel-upload-close {
		top: 2rem;
		right: 1rem;
		svg {
			width: 15px;
			height: 15px;
		}
	}
}

@media (max-width: 430px) {
	.dashboard-head {
		p {
			font-size: 0.7em;
		}
	}
}

/* /admin/product3.css */

.product3-upload-head {
	display: flex;
	margin-top: 2.31rem;
	margin-left: 3.69rem;
}

.product3-data-wrapper {
	background-color: white;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border: 1px solid black;
    margin: 2rem;
}

.product3-name {
	padding: 1rem;
	margin-right: 2.06rem;
	p {
		margin-bottom: 0;
		color: black;
		font-size: 0.75rem;
	}
}

.product3-level {
	border-radius: 0.5rem;
	border: 1px solid #008ecc;
	background: #f2f7ff;
	text-align: center;
	width: 6rem;
	padding: 1rem;
	p {
		margin-bottom: 0;
		color: #008ecc;
		font-size: 0.75rem;
	}
}

.product3-table {
	margin: 1rem;
	background: #fff;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
	overflow-x: scroll;
}

.product-details-table {
	display: flex;
	width: 100%;
	justify-content: space-around;
}

.product3-table-head {
	background-color: #f5f9ff;
	padding: 0.69rem 0;
	text-align: center;
	height: 3.75rem;
}

.product3-table-name {
	padding-top: 0.31rem;
	padding-bottom: 0.69rem;
	p {
		color: #8b909a;
		font-feature-settings: 'clig' off, 'liga' off;
		font-size: 14px;
		margin-bottom: 0;
		font-weight: 500;
		text-transform: uppercase;
	}
	span {
		color: #23272e;
		font-feature-settings: 'clig' off, 'liga' off;
		font-weight: 600;
		line-height: 1.375rem; /* 137.5% */
	}
}

#product3-table-head-border {
	border-right: 1px solid #bdbdbd;
	border-left: 1px solid #bdbdbd;
}

.product3-table-data {
	text-align: center;
	padding-bottom: 2.44rem;
	p {
		margin-top: 0.75rem;
		margin-bottom: 0;
		color: #000;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.125rem; /* 128.571% */
	}
}

.product3-table-confirm1 {
	text-align: center;
	button {
		display: block;
        margin: 0 auto;
        border-radius: 0.29744rem;
        background: #008ecc;
        border: none;
        color: #fff;
        width: 5.56rem;
        height: 1.5rem;
        font-size: 10px;
        margin-top: 0.5rem;
	}
}

.product3-table-confirm2 {
	display: none;
}

.popup-wrapper{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: #80808087;
	backdrop-filter: blur(3px);
	z-index: 99999;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}

.popup{
	margin: auto;
	width: 70%;
	position: relative;
}
.cross {
	position: absolute;
	top: -10px;
	right: -10px;
	background-color: red;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    padding: 1px 7px;
    line-height: 20px;
    font-weight: 900;
	cursor: pointer;
}

@media screen and (max-width: 1200px){
	.popup{
		width: 95%;
	}
}

@media screen and (max-width: 768px) {
	.popup{
		width: 90%;
	}
	.product3-upload-head {
		margin-top: 1.19rem;
		margin-left: 0.94rem;
		margin-right: 1rem;
	}

	.product3-name {
		width: 75%;
		padding: 1rem;
		margin-right: 0.81rem;
	}

	.product3-level {
		width: 25%;
		padding: 1rem;
	}

	.product3-table {
		margin: 0rem;
		margin-top: 1.62rem;
	}

	.product3-table-head {
		background-color: #f5f9ff;
		padding: 0.31rem 0;
		text-align: center;
		height: 3.06rem;
	}

	.product3-table-name {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		p {
			font-size: 0.75rem;
			margin-bottom: 0;
			font-weight: 500;
			text-transform: uppercase;
		}
		span {
			color: #23272e;
			font-feature-settings: 'clig' off, 'liga' off;
			font-weight: 600;
			line-height: 1.375rem; /* 137.5% */
		}
	}

	#product3-table-head-border {
		border-right: 1px solid #bdbdbd;
		border-left: 1px solid #bdbdbd;
	}

	.product3-table-data {
		text-align: center;
		padding-bottom: 2.44rem;
		p {
			margin-top: 1.5rem;
			margin-bottom: 0;
			color: #000;
			font-size: 0.635rem;
			font-weight: 500;
			line-height: 1.125rem; /* 128.571% */
		}
	}

	.product3-table-name-right {
		position: relative;
		left: 15px;
	}
	.product3-table-confirm1 {
		display: none;
	}

	.product3-table-confirm2 {
		display: block;
		padding-top: 0.5rem;
		button {
			padding: 0;
			border: none;
			display: block;
			margin: 0.8rem auto;
		}
	}
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------- */

.product3-upload {
	background-color: white;
	/* padding-bottom: 4rem; */
}

.product3-title {
	padding-top: 1rem;
	margin-left: 4rem;
	p {
		color: #000;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.125rem;
		margin-bottom: 0;
	}
}

.product3-content {
	margin-left: 4rem;
}

.product3-content-head {
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		color: #828282;
		font-size: 0.875rem;
		font-weight: 500;
		span {
			color: #6a6a6a;
			font-size: 0.75rem;
			font-weight: 500;
			margin-left: 0.38rem;
		}
	}
	button {
		margin-left: 1.19rem;
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		color: #008ecc;
		background-color: white;
		width: 7.1875rem;
		height: 2.4375rem;
	}
}

.product3-main-content {
	display: flex;
	margin-top: 1rem;
}

.product3-content-left {
	display: flex;
	width: 40%;
}

@media screen and (max-width: 1200px){
	.product3-content-left{
		width: max-content;
	}
}

.product3-content-upload {
	button {
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #fff;
		width: 23.4375rem;
		height: 2.5rem;
		color: #008ecc;
		font-size: 0.95531rem;
		font-weight: 400;
		margin-top: 1.25rem;
		svg {
			margin-right: 0.5rem;
		}
	}
}

.product3-content-upload-area {
	border-radius: 0.92156rem;
	border: 2.949px dashed #818181;
	background: #f6f6f6;
	width: 100%;
	height: 17.6875rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	p {
		margin-top: 2.3rem;
		margin-bottom: 0;
		color: #c1c1c1;
		font-size: 0.92156rem;
		font-weight: 500;
	}
}

.product3-content-imgs {
	margin-left: 2.28rem;
}

.product3-content-img {
	width: 70px;
	height: 100px;
	border-radius: 0.54306rem;
	background: #eeecec;
	position: relative;
	margin-bottom: 1rem;
}

.product3-content-img-number {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: -0.9rem;
	right: -0.8rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: #eeecec;
	z-index: 1;
	border: 3px solid white;
	p {
		color: #7a7a7a;
		font-size: 0.70175rem;
		margin-bottom: 0;
	}
}

.product3-content-right {
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
	p {
		color: #828282;
		font-size: 0.875rem;
		font-weight: 500;
		margin-bottom: 0.5rem;
	}
}

.product3-content-right-card {
	margin-bottom: 1rem;
	width: 80%;
}

.product3-card-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border-radius: 0.5rem;
	border: none;
	background: #f2f7ff;
	padding: 0.4rem 1rem;
	input {
		border: none;
		background: #f2f7ff;
		outline: none;
		color: #9f9e9e;
		font-size: 0.75rem;
		width: 100%;
	}
	input::placeholder {
		color: #9f9e9e;
		font-size: 0.75rem;
	}
	button {
		width: 1.8125rem;
		height: 1.8125rem;
		border: 1px solid #b0b0b0;
		border-radius: 50%;
		color: #008ecc;
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 150%;
		background: #f2f7ff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 0.5rem;
	}
	div {
		display: flex;
	}
}

.product3-upload-mobile {
	display: none;
}

.product3-upload-btns-wrapper {
	display: flex;
	justify-content: end;
	/* margin-top: 0.37rem; */
	padding: 1rem 2rem;
	background-color: white;
}

.product3-upload-btns > button:first-child {
	border-radius: 0.625rem;
	border: 2px solid #008ecc;
	background: #fff;
	width: 6.5rem;
	height: 2.5rem;
	color: #008ecc;
}

.product3-upload-btns > button:last-child {
	border-radius: 0.625rem;
	background: #008ecc;
	width: 6.5rem;
	height: 2.5rem;
	color: #fff;
	margin-left: 0.8rem;
	border: none;
}

@media screen and (max-width: 768px) {
	.product3-upload {
		background-color: white;
		padding-bottom: 4rem;
	}

	.product3-title {
		padding-top: 0.56rem;
		margin-left: 1rem;
	}

	.product3-content {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.product3-content-head {
		justify-content: space-between;
		p {
			span {
				display: none;
			}
		}
		button {
			margin-left: 0;
		}
	}

	.product3-main-content {
		display: block;
		margin-top: 1.94rem;
	}

	.product3-content-left {
		width: 100% !important;
		display: block;
	}

	.product3-content-upload {
		button {
			display: none;
		}
	}

	.product3-content-upload-area {
		width: 100%;
		height: 17.6875rem;
	}

	.product3-content-imgs {
		margin-left: 0rem;
		margin-right: 0.5rem;
		margin-top: 2rem;
		display: flex;
		justify-content: space-between;
	}

	.product3-content-img {
		width: 4.83344rem;
		height: 4.72481rem;
		border-radius: 0.54306rem;
		background: #eeecec;
		position: relative;
		margin-bottom: 1rem;
	}

	.product3-upload-mobile {
		display: block;
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #fff;
		width: 100%;
		height: 3.6875rem;
		color: #008ecc;
		font-size: 0.95531rem;
		font-weight: 400;
		margin-top: 2rem;
		margin-bottom: 1.87rem;
		svg {
			margin-right: 0.5rem;
		}
	}

	.product3-content-right {
		width: 100%;
		margin-top: 5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		p {
			color: #828282;
			font-size: 0.875rem;
			font-weight: 500;
			margin-bottom: 0.5rem;
		}
	}

	.product3-content-right-card {
		margin-bottom: 1rem;
		width: 100%;
	}

	.product3-card-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-radius: 0.5rem;
		border: none;
		background: #f2f7ff;
		padding-top: 0.8rem;
		padding-left: 1rem;
		padding-bottom: 0.8rem;
		padding-right: 0.56rem;
		input {
			border: none;
			background: #f2f7ff;
			outline: none;
			color: #9f9e9e;
			font-size: 0.75rem;
		}
		input::placeholder {
			color: #9f9e9e;
			font-size: 0.75rem;
		}
		button {
			width: 1.8125rem;
			height: 1.8125rem;
			border: 1px solid #b0b0b0;
			border-radius: 50%;
			color: #008ecc;
			font-size: 1.125rem;
			font-weight: 500;
			line-height: 150%;
			background: #f2f7ff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 0.5rem;
		}
		div {
			display: flex;
		}
	}

	.product3-upload-btns-wrapper {
		display: flex;
		justify-content: space-between;
		margin-top: 2.4rem;
		margin-bottom: 3rem;
		padding: 0rem 1.3rem;
		background-color: transparent;
	}
	.product3-upload-btns {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.product3-upload-btns > button:first-child {
		border-radius: 0.625rem;
		border: 2px solid #008ecc;
		background: #fff;
		width: 50%;
		height: 3.6875rem;
		color: #008ecc;
	}

	.product3-upload-btns > button:last-child {
		border-radius: 0.625rem;
		background: #008ecc;
		width: 50%;
		height: 3.6875rem;
		color: #fff;
		margin-left: 0.8rem;
		border: none;
	}
}

@media (min-width: 1400px) {
	.product3-content {
		margin: 0;
		padding: 1em;
	}
	.product3-content-left {
		width: 60%;
	}
}

@media (max-width: 360px) {
	.product3-content-img {
		width: 3.5rem;
		height: 3.5rem;
	}
	.product3-name {
		width: 60%;
	}
	.product3-level {
		width: 40%;
	}
}

/* /admin/product4.css */

.product4-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2px;
	background-color: white;
	padding: 1rem 2rem;
}

.product4-search {
	border-radius: 0.25rem;
	padding: 0.5rem 1rem;
	display: flex;
	border: 1px solid #8b909a;
	input {
		border: none;
		width: 9rem;
		outline: none;
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
	}
	input::placeholder {
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
	}
	button {
		border: none;
		outline: none;
		padding: 0;
		display: flex;
		align-items: center;
		background-color: transparent;
		margin-left: 0.3rem;
	}
}

.product4-filter {
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	border: 1px solid #8b909a;
	input {
		border: none;
		width: 9rem;
		outline: none;
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
	}
	input::placeholder {
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
	}
	svg {
		margin-left: 0.3rem;
	}
}

.product4-main-wrapper {
	background-color: white;
	padding: 1rem 2rem;
	margin-top: 0.63rem;
}

.product4-main {
	background: #fff;
	display: flex;
	flex-direction: column;

	padding-bottom: 1rem;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.product4-data {
	display: flex;
	justify-content: space-around;
}

.product4-data-col-head {
	padding: 1rem;
	border-bottom: 1px solid #f4f4f4;
	background: #f9fafc;
	p {
		color: #8b909a;
		font-feature-settings: 'clig' off, 'liga' off;
		font-size: 0.8125rem;
		font-weight: 500;
		text-transform: uppercase;
		margin-bottom: 0;
	}
}
.product4-data-col {
	text-align: center;
	text-wrap: nowrap;
}

.product4-data-col:nth-child(1) > .product4-data-col-body > p {
	font-weight: 600;
}
.product4-data-col-body {
	p,
	a {
		margin-top: 1.75rem;
		margin-bottom: 0;
		color: #23272e;
		font-size: 0.9375rem;

		line-height: 1.375rem; /* 146.667% */
	}
	/* .p-btn {
		margin-top: 1.75rem;
		margin-bottom: 0;
		color: #23272e;
		font-size: 0.9375rem;

		background-color: #0094ff;
		border-radius: 5px;
		padding: 5px;
		border: none;
	} */
}

.product4-edit-btn {
	margin-top: 3rem;
	margin-bottom: 3rem;
	text-align: end;
	margin-right: 2.7rem;
	button {
		border-radius: 0.625rem;
		background: #008ecc;
		height: 2.81rem;
		width: 9.25rem;
		color: #fff;
		border: none;
	}
}

.pagination-div {
	margin-top: auto;
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 1em;
}
.down-arrow {
	background-image: url('../svg/Arrow---Down-2.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 1em;
	height: 1em;
}

.current-pages-div {
	display: flex;
	justify-content: center;
	gap: 0.2em;
	align-items: center;
}
.prev-page-btn {
	content: '<';
	background-color: #f1f2f6;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	border-radius: 0.2em;
	height: 2em;
	padding: 0.5em;
}
.pages {
	background-color: #f1f2f6;
	color: #8b909a;
	border-radius: 0.2em;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	padding: 0.2em;
}
.current-page {
	background-color: #008ecc;
	color: white;
}
.next-page-btn {
	border-radius: 0.2em;
	width: 2em;
	height: 2em;
	padding: 0.5em;
	content: '<';
	background-color: #f1f2f6;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.no-of-pages-shown {
	div {
		display: flex;
		gap: 1em;
		align-items: center;
	}
}
.no-of-pages-shown > div > div {
	padding: 0.5em;
	border-radius: 0.4em;
	align-items: center;
	border: 1px solid rgb(208, 208, 208);
}

.down-arrow {
	filter: brightness(0%);
}

.product4-mobile-wrapper {
	display: none;
}
.product4-data-col {
	width: 100%;
}
@media screen and (max-width: 768px) {
	.product4-desktop {
		display: none;
	}
	.product4-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2px;
		background-color: #f4f4f4;
		padding: 1rem;
		padding-bottom: 1.6rem;
	}

	.product4-mobile-wrapper {
		display: block;
	}
	.product4-search {
		border-radius: 0.25rem;
		padding: 0.5rem;
		width: 55%;
		display: flex;
		background-color: white;
		justify-content: space-between;
		border: 1px solid #8b909a;
		input {
			border: none;
			width: 9rem;
			outline: none;
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		input::placeholder {
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		button {
			border: none;
			outline: none;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: transparent;
			margin-left: 0.3rem;
		}
	}

	.product4-filter {
		border-radius: 0.5rem;
		padding: 0.5rem 1rem;

		display: flex;
		width: 40%;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		border: 1px solid #8b909a;
		input {
			border: none;
			width: 6rem;
			outline: none;
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		input::placeholder {
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		svg {
			margin-left: 0.3rem;
		}
	}

	.product4-mobile-head {
		display: flex;
		justify-content: space-between;
		padding: 0.63rem 0.75rem 0.69rem 0.94rem;
		border: 0.675px solid #f4f4f4;
		background: #ddd;
		p {
			margin-bottom: 0;
		}
	}

	.product4-mobile-head-side {
		display: flex;
	}
	.product4-mobile-head1 {
		p {
			color: #8b909a;
			font-size: 0.875rem;
			font-weight: 500;
			text-transform: uppercase;
		}
		p:first-child {
			margin-right: 0.88rem;
			margin-bottom: 1.38rem;
		}
		p:last-child {
			margin-right: 0.88rem;
		}
	}
	.product4-mobile-head2 {
		p {
			color: #23272e;
			font-size: 0.875rem;
			font-weight: 600;
		}
		p:first-child {
			margin-bottom: 1.38rem;
		}
	}

	.product4-mobile-body {
		display: flex;
		justify-content: space-between;
		padding: 1.31rem 0.94rem;
		background-color: white;
		margin-bottom: 1.38rem;
	}

	.product4-mobile-body-side1 {
		width: fit-content;
		p {
			color: #8b909a;
			font-size: 0.875rem;
			font-weight: 500;
			text-transform: uppercase;
			span {
				color: #23272e;
				font-size: 0.9375rem;
			}
		}
	}

	.product4-mobile-body-side2 {
		display: flex;
		text-wrap: nowrap;
		width: 55%;
	}

	.product4-mobile-body1 {
		p {
			color: #8b909a;
			font-size: 0.875rem;
			font-weight: 500;
			text-transform: uppercase;
		}
		p:first-child {
			margin-bottom: 2rem;
		}
	}
	.product4-mobile-body2 {
		width: 100%;
		text-align: center;
		p {
			color: #23272e;
			font-size: 0.9375rem;
		}
		p:first-child {
			margin-bottom: 2rem;
		}
	}
}

@media (max-width: 1320px) {
	.product4-data-col-head {
		p {
			font-size: 0.55em;
		}
	}
}
@media (max-width: 400px) {
	.product4-filter {
		input {
			font-size: 0.75em;
			width: 70%;
		}
		input::placeholder {
			color: #8b909a;
			font-size: 0.75em;
			line-height: 1.3125rem;
		}
	}
	.product4-search {
		input {
			width: 70%;
		}
		input::placeholder {
			font-size: 0.75em;
		}
	}
}

/* /admin/order.css */

.orders-main {
	background-color: #f4f4f4;
}

#whatever {
	background-color: #f4f4f4;
}

.product4-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2px;
	padding: 1rem 1rem;
}
.product4-right {
	display: flex;
	position: relative;
}

.product4-search {
	border-radius: 0.25rem;
	padding: 0.5rem 1rem;
	display: flex;
	border: 1px solid #8b909a;
	input {
		border: none;
		width: 9rem;
		outline: none;
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
		background-color: transparent;
	}
	input::placeholder {
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
	}
	button {
		border: none;
		outline: none;
		padding: 0;
		display: flex;
		align-items: center;
		background-color: transparent;
		margin-left: 0.3rem;
	}
}

.product4-filter {
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	border: 1px solid #8b909a;
	input {
		border: none;
		width: 6.6rem;
		outline: none;
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
		background-color: transparent;
	}
	input::placeholder {
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
	}
	svg {
		margin-left: 0.3rem;
	}
}

.product4-report-btn {
	border: none;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 500;
	background-color: #008ecc;
	padding: 0.5rem 1rem;
	letter-spacing: 0.02688rem;
	border-radius: 0.5rem;
	margin-right: 0.62rem;
}

.product4-dropdown {
	position: absolute;
	display: none;
	top: 3rem;
	z-index: 1;
	right: 0;
	width: 23rem;
	border-radius: 0.3125rem;
	border: 1px solid #8b909a;
	background: #fff;
	box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
}

.product4-dropdown-active {
	display: block;
}

.product4-dropdown-head {
	display: flex;
	align-items: center;
	margin-top: 0.31rem;
	margin-left: 0.31rem;
	width: 15rem;
	border-radius: 0.50331rem;
	background: rgba(0, 148, 255, 0.09);
	padding: 0.5rem 0.7rem;
	p {
		color: #008ecc;
		font-family: 'Poppins';
		font-size: 0.75494rem;
		font-weight: 500;
		margin-bottom: 0;
	}
}

.product4-dropdown-head-svg {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0094ff30;
	border-radius: 0.42rem;
	margin-right: 0.59rem;
}

.product4-dropdown-body-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 1rem;
	margin-bottom: 1.63rem;
}

.product4-dropdown-left {
	display: flex;
	align-items: center;
	input {
		margin-right: 0.5rem;
		width: 1.4rem;
		height: 1.4rem;
		background-color: #0094ff;
	}
	p {
		color: #000;
		font-family: 'Poppins';
		font-size: 0.75rem;
		font-weight: 500;
		margin-bottom: 0;
	}
}

.product4-dropdown-right {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 10.4rem;
	padding: 0.5rem 1rem;
	padding-right: 0.2rem;
	border-radius: 0.375rem;
	border: 1px solid #8b909a;
	background: #e8f5ff;
	input {
		width: 100%;
		background-color: transparent;
		border: none;
		outline: none;
	}
}

.product4-dropdown-btn {
	margin-top: 6rem;
	margin-bottom: 1rem;
	width: 90%;
	height: 2.75rem;
	border-radius: 0.625rem;
	background: #008ecc;
	margin-left: 1rem;
	margin-right: 1.3rem;
	border: none;
	color: #fff;
	line-height: 1.25rem;
}

@media screen and (max-width: 768px) {
	.product4-dropdown {
		width: 23.5rem;
	}
	.product4-head {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 2px;
		background-color: #f4f4f4;
		padding: 1rem;
		padding-bottom: 0rem;
	}

	.product4-right {
		display: flex;
		flex-direction: row-reverse;
	}

	.product4-search {
		border-radius: 0.25rem;
		padding: 0.5rem;
		padding-right: 0.1rem;
		width: fit-content;
		display: flex;
		justify-content: space-between;
		border: 1px solid #8b909a;
		input {
			border: none;
			width: 30vw;
			outline: none;
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		input::placeholder {
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		button {
			border: none;
			outline: none;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: transparent;
			margin-left: 0.3rem;
		}
	}

	.product4-filter {
		border-radius: 0.5rem;
		padding: 0.5rem 1rem;
		padding-right: 1rem;
		display: flex;
		align-items: center;
		margin: 0 2vw;
		border: 1px solid #8b909a;
		input {
			border: none;
			width: 10vw;
			outline: none;
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		input::placeholder {
			color: #8b909a;
			font-size: 0.9375rem;
			line-height: 1.3125rem;
		}
		svg {
			margin-left: 0.3rem;
		}
	}
	.product4-report-btn {
		border: none;
		color: #fff;
		font-size: 0.625rem;
		font-weight: 500;
		background-color: #008ecc;
		padding: 0.5rem 0;
		width: 26vw;
		letter-spacing: 0.02688rem;
		border-radius: 0.5rem;
		margin-right: 0;
		text-wrap: nowrap;
	}
}

.product4-card {
	margin: 1rem;
	background: #fff;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.product4-card-head {
	background: #f5f9ff;
	padding: 0.69rem 0;
	text-wrap: nowrap;
	p {
		margin-bottom: 0;
		color: #8b909a;
		font-size: 1rem;
		font-weight: 500;
		text-transform: uppercase;
		span {
			color: #23272e;
			font-size: 1rem;
			font-weight: 600;
			line-height: 1.375rem;
		}
	}
}

.product4-card-head1 {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.product4-card-head2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-right: 1.5rem;
}

.product4-line {
	background: #bdbdbd;
	width: 0.0625rem;
	height: 2.375rem;
}

@media screen and (max-width: 1400px) {
	.product4-line {
		display: none;
	}
	.product4-card-head1 {
		justify-content: space-between;
		margin: 0 1rem 0.81rem 1rem;
	}

	.product4-card-head2 {
		margin: 0 1rem;
	}
}

.product4-card-body {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.69rem 1.25rem;
	p {
		margin-bottom: 0;
	}
}

.product4-card-body-main {
	display: flex;
	align-items: center;
}

.product4-card-body-left {
	display: flex;
	align-items: center;
	p {
		margin-right: 2rem;
	}
}

.product4-card-body-right {
	display: flex;
	align-items: center;
}

.product4-card-body-end {
	display: flex;
	align-items: center;
}

.product4-status-select {
	display: flex;
	align-items: center;
	border-radius: 0.375rem;
	background: rgba(0, 142, 204, 0.16);
	padding: 0.47rem 0.94rem;
	position: relative;
	p {
		color: #008ecc;
		font-size: 1.21875rem;
		font-weight: 600;
		line-height: 1.3125rem;
		margin-right: 0.94rem;
	}
}
.product4-status-select-options {
	display: none;
	flex-direction: column;
	top: 110%;
	position: absolute;
	width: 100%;
	left: 0;
	z-index: 999;
	padding: 0.3em;
	background-color: white;
	border-radius: 0.4em;
	box-shadow: 0px 4px 10px 0px rgb(185, 185, 185);
}

.status-options-div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6em 0.8em;
}
.status-options-div:hover {
	background-color: #f1f5fb;
	cursor: pointer;
}

.status-options {
	display: flex;
	gap: 0.4em;
	align-items: center;
}
.status-options > div:nth-child(1) {
	color: #8b909a;
}
.status-options-circle {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	border: 2px solid #c0c0c0;
}
.status-options-div:hover > .status-options > div {
	color: #008ecc;
}
.status-options-div:hover > .status-options > .circle {
	background-color: #008ecc;
}
.status-options-div:hover > .status-options-circle {
	border-color: #008ecc;
}
.circle {
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background-color: #8b909a;
}
.product4-card-body-wrap {
	width: 13.6rem;
	text-wrap: wrap;
	position: relative;
	top: 2px;
}
.product4-light {
	color: #8b909a;
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
}

.product4-dark {
	color: #23272e;
	font-family: poppins;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.375rem;
}

@media screen and (max-width: 1200px) {
	.product4-card {
		margin: 1rem 0;
	}

	.product4-card-head {
		padding: 0.69rem 0;
		p {
			font-size: 0.625rem;
			span {
				font-size: 0.625rem;
			}
		}
	}

	.product4-card-body {
		display: block;
	}
	.product4-card-body-main {
		display: block;
	}

	.product4-card-body-left {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.88rem;
		p:last-child {
			margin-right: 1rem;
		}
	}

	.product4-card-body-right {
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
	}

	.product4-card-body-end {
		display: flex;
		align-items: center;
		justify-content: end;
		.product4-light {
			display: none;
		}
	}

	.product4-status-select {
		display: flex;
		align-items: center;
		border-radius: 0.375rem;
		background: rgba(0, 142, 204, 0.16);
		padding: 0.47rem 0.94rem;
		p {
			color: #008ecc;
			font-size: 1.21875rem;
			font-weight: 600;
			line-height: 1.3125rem;
			margin-right: 0.94rem;
		}
	}

	.product4-card-body-wrap {
		width: auto;
		text-wrap: wrap;
		position: relative;
		top: 0px;
	}
	.product4-light {
		color: #8b909a;
		font-size: 0.75rem;
		font-weight: 500;
		text-transform: uppercase;
	}

	.product4-dark {
		color: #23272e;
		font-family: poppins;
		font-size: 0.75rem;
		font-weight: 400;
		line-height: 1.375rem;
	}
}

/* /admin/request.css */

.user-request-product4-head {
	display: flex;
	align-items: center;
	padding: 1rem 1.3rem;
	padding-bottom: 1.69rem;
	background: #f4f4f4;
}

.product4-search {
	border-radius: 0.25rem;
	padding: 0.5rem 1rem;
	display: flex;
	border: 1px solid #8b909a;
	input {
		border: none;
		width: 9rem;
		outline: none;
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
		background-color: transparent;
	}
	input::placeholder {
		color: #8b909a;
		font-size: 0.9375rem;
		line-height: 1.3125rem;
	}
	button {
		border: none;
		outline: none;
		padding: 0;
		display: flex;
		align-items: center;
		background-color: transparent;
		margin-left: 0.3rem;
	}
}

.product4-head-unsolved {
	width: 7.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 1.2rem;
	background: #008ecc;
	padding: 0.56rem 0.56rem 0.56rem 0.88rem;
	color: #fff;
	font-family: 'Poppins';
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.125rem;
	border: 2px solid #008ecc;
	margin-left: 1.69rem;
}

.product4-head-solved {
	width: 7.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 1.2rem;
	background: white;
	padding: 0.56rem 0.56rem 0.56rem 0.88rem;
	color: #8b909a;
	font-family: 'Poppins';
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.125rem;
	border: 2px solid #8b909a;
	margin-left: 0.88rem;
}

@media screen and (max-width: 768px) {
	.user-request-product4-head {
		padding: 1.56rem 0.9rem;
		padding-bottom: 2rem;
	}

	.product4-search {
		border-radius: 0.25rem;
		padding: 0.5rem 0.3rem;
		input {
			width: 8rem;
		}
	}

	.product4-head-unsolved {
		width: 7rem;
		margin-left: 0.5rem;
	}

	.product4-head-solved {
		width: 7rem;
		margin-left: 0.13rem;
	}
}

.request-cards {
	padding-left: 1.13rem;
	padding-right: 1.5rem;
	background: #f4f4f4;
}

.request-card {
	margin-bottom: 1.19rem;
	border-radius: 0.625rem;
	overflow: clip;
	background: #fff;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
	p {
		margin-bottom: 0;
	}
}

.request-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #008ecc;
	padding: 0.69rem 0;
}

.request-head-field {
	display: flex;
	align-items: center;
	p {
		color: #fff;
		font-size: 1rem;
		font-weight: 500;
		text-transform: uppercase;
		max-width: 13rem;
	}
	p:last-child {
		font-weight: 700;
	}
}

.request-card-head1 {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 29%;
}

.request-card-head2 {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 71%;
	div:first-child {
		position: relative;
		right: 10px;
	}
}

.request-card-head3 {
	display: none;
}

.request-head-line {
	width: 0.0625rem;
	height: 2.375rem;
	background-color: #fff;
}

.request-card-body {
	padding: 0.6rem;
}

.request-card-body1 {
	width: 7rem;
	border-radius: 0.09375rem;
	background: rgba(0, 142, 204, 0.2);
	text-align: center;
	margin-bottom: 0.8rem;
	p {
		color: #008ecc;
		font-family: 'Poppins';
		font-size: 0.75rem;
		font-weight: 500;
	}
}

.request-card-body2 {
	display: flex;
	align-items: center;
	p:first-child {
		color: #8b909a;
		font-size: 1rem;
		font-weight: 500;
		text-transform: uppercase;
		margin-right: 1.25rem;
	}
	p:last-child {
		color: #23272e;
		font-family: 'Poppins';
		font-size: 1rem;
		line-height: 1.375rem;
		width: 75%;
	}
}

.request-card-body-btn {
	display: flex;
	justify-content: end;
	margin-right: 0.4rem;
	button {
		border-radius: 0.3125rem;
		background: #008ecc;
		color: #fff;
		border: none;
		width: 9.25rem;
		padding: 0.75rem 0rem;
		line-height: 1.25rem; /* 125% */
	}
}

@media screen and (max-width: 1200px) {
	.request-cards {
		padding-left: 0rem;
		padding-right: 0rem;
		background: #f4f4f4;
	}

	.request-card {
		margin-bottom: 1.19rem;
		border-radius: 0.625rem;
	}

	.request-head-field-kill {
		display: none !important;
	}

	.request-card-head {
		display: block;
		padding: 1rem 1.25rem;
	}

	.request-head-field {
		display: flex;
		align-items: center;
		p {
			color: #fff;
			font-size: 0.75rem;
			font-weight: 500;
			text-transform: uppercase;
			max-width: 50rem;
		}
		p:last-child {
			font-weight: 700;
		}
	}

	.request-card-head1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 1rem;
	}

	.request-card-head2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 1rem;
		div:first-child {
			position: static;
		}
	}

	.request-card-head3 {
		display: flex;
		margin-top: 1.63rem;
	}

	.request-head-line {
		display: none;
	}

	.request-card-body {
		padding: 0.9rem;
	}

	.request-card-body2 {
		display: flex;
		align-items: start;
		p:first-child {
			color: #8b909a;
			font-size: 0.875rem;
			font-weight: 500;
			text-transform: uppercase;
			margin-right: 1.25rem;
		}
		p:last-child {
			color: #23272e;
			font-family: 'Poppins';
			font-size: 0.875rem;
			line-height: 1.375rem;
			width: auto;
		}
	}

	.request-card-body-btn {
		margin-top: 2.25rem;
		button {
			border-radius: 0.3125rem;
			background: #008ecc;
			color: #fff;
			border: none;
			width: 9.25rem;
			padding: 0.75rem 0rem;
			line-height: 1.25rem; /* 125% */
		}
	}
}

/* /admin/support.css */

.support {
	background: #f4f4f4;
}

.support-part1 {
	margin: 0.81rem 2.13rem;
	display: flex;
	padding: 0.81rem 1rem;
	background-color: white;
	img {
		width: 50%;
		height: auto;
	}
	img:first-child {
		margin-right: 1.1rem;
	}
}

.support-part2 {
	padding: 0rem 2rem;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.support-left {
	width: 51%;
	h2 {
		color: #3e3e52;
		font-family: 'Poppins';
		font-size: 1.63338rem;
		font-weight: 600;
	}
}

.support-left-card {
	width: 100%;
	border-radius: 0.20419rem;
	margin: 0.8rem 0;
	border: 1.454px solid #cbcbcb;
	background: #fff;
	border-radius: 0.20419rem;
	border: 1.454px solid #cbcbcb;
}

.support-lc-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.56rem;
	padding-bottom: 0.56rem;
	padding-left: 0.8rem;
	padding-right: 2.2rem;
	p {
		margin-bottom: 0;
		color: #3e3e52;
		font-family: 'Poppins';
		font-size: 0.71463rem;
		font-weight: 400;
	}
	.support-lc-head-btn1 {
		display: none;
		border: none;
		padding: 0;
		background-color: transparent;
	}
	.support-lc-head-btn2 {
		display: none;
		border: none;
		padding: 0;
		background-color: transparent;
	}
}

.support-lc-head-active {
	background-color: #008ecc;
	p {
		color: #fff;
	}
}

.support-lc-head-btn-active {
	display: block !important;
}

.support-lc-body {
	display: none;
	padding: 1rem 0.8rem;
	padding-bottom: 1.29rem;
	p {
		color: #3e3e52;
		font-family: 'Poppins';
		font-size: 0.71463rem;
		font-weight: 400;
		margin-bottom: 0;
	}
}

.support-right {
	width: 46%;
	margin-top: 2.7rem;
}

.support-right1 {
	border-radius: 0.625rem;
	background: #fff;
	margin-bottom: 0.69rem;
	padding-top: 1.44rem;
	padding-bottom: 1.44rem;
	padding-left: 0.75rem;
	padding-right: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	p {
		color: #9f9e9e;
		font-family: 'Poppins';
		font-size: 1rem;
		margin-bottom: 0;
	}
	button {
		border: none;
		padding: 0.5rem 1rem;
		color: #fff;
		font-size: 0.9375rem;
		font-weight: 500;
		background-color: #008ecc;
		border-radius: 0.5rem;
		letter-spacing: 0.02688rem;
	}
}

.support-right2 {
	border-radius: 0.625rem;
	background: #fff;
	padding: 0.69rem 0.81rem;
}

.support-right2-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.44rem;
	border-radius: 0.375rem;
	border: 1px solid #8b909a;
	background: #e8f5ff;
	padding-top: 0.81rem;
	padding-bottom: 0.81rem;
	padding-left: 0.52rem;
	padding-right: 0.88rem;
	p {
		color: #828282;
		font-family: 'Poppins';
		font-size: 1rem;
		font-weight: 500;
		margin-bottom: 0;
	}
	div {
		width: 1.9rem;
		height: 1.9rem;
		border-radius: 50%;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		p {
			color: #008ecc;
			font-family: 'Poppins';
			font-size: 1rem;
			font-weight: 700;
			margin-bottom: 0;
		}
	}
}

.notification-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 25rem;
	height: 100vh;
	z-index: 1;
	background-color: #fff;
	overflow: auto;
	display: none;
}

.notification-panel-active {
	display: block;
}

.np-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0.88rem;
	background: #ecf0fa;
	p {
		color: #242f48;
		margin-bottom: 0;
		font-family: 'Poppins';
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.3125rem; /* 150% */
		text-transform: uppercase;
	}
	button {
		border: none;
		padding: 0;
		background-color: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.np-part1 {
	padding-top: 1.44rem;
	padding-bottom: 2.13rem;
	padding-left: 1.3rem;
	padding-right: 0.88rem;
	border-bottom: 0.125rem solid #eee;
}

.np-part1-feedbacks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0.7rem;
	margin-bottom: 0.62rem;
	border-radius: 0.1875rem;
	border: 1px solid #ebeaf1;
	background: #008ecc;
	p {
		margin-bottom: 0;
		color: #fff;
		font-family: 'Poppins';
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.3125rem; /* 150% */
	}
}
.np-part1-notifications {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0.7rem;
	border-radius: 0.1875rem;
	border: 1px solid #ebeaf1;
	background: #ecf0fa;
	p {
		margin-bottom: 0;
		color: #000;
		font-family: 'Poppins';
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.3125rem; /* 150% */
	}
}

.np-part2-head {
	margin-top: 1.5rem;
	margin-left: 0.44rem;
	margin-bottom: 0.5rem;
	p {
		color: #515151;
		font-family: 'Poppins';
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.3125rem; /* 150% */
	}
}

.np-part2-card {
	display: flex;
	justify-content: space-between;
	padding-left: 0.6rem;
	padding-top: 1.25rem;
	padding-bottom: 1rem;
	padding-right: 1.3rem;
	background: #ecf0fa;
	margin-bottom: 0.25rem;
}

.np-part2-card-left {
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		color: #515151;
		font-family: 'Poppins';
		font-size: 1.08138rem;
		font-weight: 400;
		line-height: 1.62206rem; /* 150% */
	}
}

.np-part2-card-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #28c76f;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 1.18rem;
	p {
		color: #fff;
		font-family: 'Poppins';
		font-size: 1.08138rem;
		font-weight: 700;
		line-height: 1.62206rem; /* 150% */
		margin-bottom: 0;
	}
}

@media screen and (max-width: 768px) {
	.support-part1 {
		flex-direction: column;
		margin: 0.81rem 1rem;
		padding: 0.75rem 0.5rem;
		img {
			width: 100%;
			height: auto;
		}
		img:first-child {
			margin-right: 0;
			margin-bottom: 0.5rem;
		}
	}
	.support-part2 {
		flex-direction: column;
		padding: 0rem;
	}

	.support-left {
		width: auto;
		margin: 0rem 1rem;
	}
	.support-right {
		width: 100%;
		margin-top: 1.25rem;
	}
	.support-right1 {
		p {
			font-size: 0.875rem;
		}
	}
	.support-right2 {
		padding: 0.69rem 1rem;
		p {
			font-size: 0.875rem;
		}
	}
	.support-lc-head {
		padding-left: 0.76rem;
		padding-right: 0.52rem;
	}

	.notification-panel {
		width: 100vw;
		padding: 0 0.69rem;
	}
}

/* /admin/product5.css */

.main-div {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.product5-head {
	margin-top: 0.2rem;
	background-color: #fff;
	padding: 1em;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.product5-body {
	background-color: rgba(244, 244, 244, 1);
	display: flex;
	padding: 1em;
	flex-direction: column;
	gap: 1em;
}
.product5-head-level {
	width: 6.8rem;
	border-radius: 3.125rem;
	border: 1px solid #008ecc;
	background: rgba(0, 142, 204, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.63rem;
	p {
		color: #008ecc;
		font-size: 0.75rem;
		font-style: normal;
		font-weight: 500;
		line-height: 2.35263rem; /* 313.681% */
		text-transform: capitalize;
		margin-bottom: 0;
	}
}

.product5-head-btn {
	padding: 0;
	border: 0;
	background-color: transparent;
	color: #6a6a6a;
	font-size: 1.125rem;
	font-weight: 400;
}

.product5-card1 {
	border-radius: 0.625rem;
	border: 1px solid #a2a6ad;
	background: #f6f7fb;
	padding: 1.19rem 0 0.67rem 1.19rem;
	max-width: 900px;
	position: relative;
}

.product5-card-category1 {
	border-radius: 0.22394rem;
	border: 2px solid #008ecc;
	position: relative;
	z-index: 1;
	background: #fff;
	/* padding: 0.5rem 1.06rem; */
	width: 12.625rem;
	p {
		margin-bottom: 0;
		color: #008ecc;
		font-family: 'Poppins';
		font-size: 0.75rem;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}
}

.product5-card-category-white{
	background-color: white!important;
}

.product5-card1-body {
	display: inline-flex;
	border-top: 1px solid #008ecc;
	position: relative;
}

.product5-card1-body1 {
	margin-right: 1.22rem;
	position: relative;
}

.product5-card-category2 {
	margin-top: 1.81rem;
	border-radius: 0.22394rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #008ecc;
	background-color: rgb(223, 241, 249);
	width: 12.65256rem;
	padding: 0.6em;
	position: relative;
	z-index: 2;
	/* p {
		margin-bottom: 0;
		color: #008ecc;
		font-family: 'Poppins';
		font-size: 0.61581rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	} */
	input {
		margin-bottom: 0;
		color: #008ecc;
		font-family: 'Poppins';
		font-size: 0.61581rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		background-color: transparent;
		outline: none;
		border: none;
	}
}

.product5-card1-body1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 6rem;
	width: 1px;
	height: 100%;
	z-index: 0;
	background-color: #008ecc;
}

.product5-card1-line {
	position: absolute;
	top: -1px;
	right: 0;
	width: 7.8rem;
	height: 3px;
	background-color: #f6f7fb;
}

.product5-card-category3 {
	position: relative;
	z-index: 2;
	margin-top: 0.48rem;
	border-radius: 0.22394rem;
	border: 1px dashed #008ecc;
	background-color: rgb(223, 241, 249);
	width: 12.65256rem;
	padding: 0.6em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	input {
		margin-bottom: 0;
		color: #008ecc;
		font-family: 'Poppins';
		font-size: 0.61581rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		border: none;
		background: transparent;
		outline: none;
	}
}

.product5-card-category4 {
	margin-top: 0.48rem;
	border-radius: 0.22394rem;
	border: 1px dashed #aaa;
	background: #fff;
	position: relative;
	z-index: 10;
	width: 12.65256rem;
	padding: 0.55rem 0 0.45rem 1.57rem;
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		margin-right: 1.49rem;
		color: #8691b5;
		font-family: 'Poppins';
		font-size: 0.61581rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
}
.product5-card-create-new-category {
	border-radius: 0.22394rem;
	border: 1px dashed #aaa;
	background: #fff;
	width: 12.65256rem;
	padding: 0.55rem 0 0.45rem 1.57rem;
	display: flex;
	align-items: center;
	p {
		margin-bottom: 0;
		margin-right: 1.49rem;
		color: #8691b5;
		font-family: 'Poppins';
		font-size: 0.61581rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
}

.product5-card-main {
	display: flex;
	/* Enable vertical scrolling */

	/* Enable horizontal scrolling only if necessary */
	overflow-x: auto;
}

.product5-new-category {
	margin-top: 1.81rem;
	p {
		margin-right: 2.56rem;
	}
}

#product5-card-category-border {
	border: 1px solid #008ecc;
}

.product5-card2 {
	border-radius: 0.625rem;
	border: 1px solid #a2a6ad;
	background-color: rgba(244, 244, 244, 1);
	padding: 1rem 0.94988rem 1.07488rem 1.1875rem;
	max-width: 900px;

	display: flex;
	align-items: center;
	justify-content: space-between;
}

.product5-card-minus {
	position: absolute;
	top: 0.7rem;
	right: 0.95rem;
}

.product5-card-new-section {
	border-radius: 0.22394rem;
	border: 0.896px solid #0094ff;
	display: flex;
	background: #fff;
	padding: 0.5rem 0.4rem;
	width: 12.625rem;
	p {
		margin-bottom: 0;
		color: #0094ff;
		font-family: 'Poppins';
		font-size: 0.75rem;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		margin-right: 0.75rem;
	}
	div {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0094ff;
		border-radius: 50%;
		width: 1.11969rem;
		height: 1.11969rem;
	}
}

/* card 1  */

.product5-1-card {
	width: 100%;
	padding: 1em;
	border-radius: 0.4em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	background-color: #f6f7fb;
	border: 1px solid black;
}
.product5-1-card-head-div {
	display: flex;
	justify-content: flex-start;
	position: relative;
	z-index: 120;
}
.product5-1-card-head {
	width: 20%;
	padding: 0.5em 1em;
	border-radius: 0.2em;
	border: 2px solid #008ecc;
	background-color: white;
	color: #008ecc;
}
.product5-1-card-grid {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.product5-cards {
	border-radius: 0.2em;
	border: 1px solid #008ecc;
	background-color: hsl(198, 100%, 40%, 8%);
	padding: 0.5em 1em;
	position: relative;
}
.product5-grid-items {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1em;
	z-index: 99;
}
.product5-cards {
	position: relative;
	z-index: 10;
}
.horizontal-line {
	height: 100%;
	z-index: 5;
	width: 1px;
	background-color: #008ecc;

	left: 50%;
	top: -10%;
	position: absolute;
}
.product5-cards:nth-child(2) {
	color: #008ecc;
	background-color: rgb(223, 241, 249);
}
.product5-cards:nth-child(3) {
	border: 1px dashed #008ecc;
	color: #008ecc;
	background-color: rgb(223, 241, 249);
}
.product5-cards:nth-child(4) {
	color: #008ecc;
	border: 1px dashed #008ecc;
	background-color: rgb(223, 241, 249);
}
.product5-cards:nth-child(5) {
	display: flex;
	justify-content: space-between;
	color: #8691b5;
	border: 1px dashed #aaaaaa;
	background-color: white;
}

/* action btns style  */

.action-icons-div {
	display: flex;
	align-items: center;
	gap: 0.3em;
}
.delete-icon {
	width: 1em;
	height: 1em;
	background-image: url('../svg/deleteIcon.svg');
	filter: invert(37%) sepia(60%) saturate(1179%) hue-rotate(163deg)
		brightness(101%) contrast(104%);
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
}
.edit-icon {
	width: 1em;
	height: 1em;
	cursor: pointer;

	background-image: url('../svg/editIcon.svg');
	filter: invert(37%) sepia(60%) saturate(1179%) hue-rotate(163deg)
		brightness(101%) contrast(104%);
	background-repeat: no-repeat;
	background-size: contain;
}

@media (max-width: 730px) {
	.product5-card1 {
		padding: 1em;
		padding-top: 4em;
	}
	.product5-card1-body1 {
		padding: 0;
		margin: 0;
	}
	.product5-card1-body {
		border: none;
		flex-direction: column;
	}
	.product5-card-main {
		flex-direction: column;
	}
	.product5-card-category1 {
		width: 100%;
	}
	.product5-card-category2 {
		width: 100%;
	}
	.product5-card-category3 {
		width: 100%;
	}
	.product5-card-category4 {
		width: 100%;
	}
	.product5-card1-body1::before {
		left: 50%;
	}
	.product5-card-create-new-category {
		width: 100%;
	}
}

.footer-section {
	margin-top: auto;
	width: 100%;
	background-color: white;
}

/* assign variants pop up  */
.assign-variants-section {
	width: 100%;
	position: absolute;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.122);
	display: none;
	flex-direction: column;
	min-height: 100vh;
	right: 0;
}
.assign-variants-div {
	position: absolute;
	box-shadow: 0px 0px 5px 0px gray;
	padding: 1em;
	height: auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 1em;
	right: 0;
	background-color: white;
	min-width: 25em;
}
@media (max-width: 400px) {
	.assign-variants-div {
		min-width: 100%;
	}
}
.assign-variants-header {
	padding: 1em;
	display: flex;
	align-items: center;
	border-radius: 0.4em;
	color: #008ecc;
	background-color: hsl(205, 100%, 50%, 9%);
	p {
		font-weight: 501;
		margin: 0;
	}
}
.assign-variants-options-div {
	display: flex;
	gap: 1em;
	justify-content: space-between;
	align-items: center;
}
.assign-variants-option {
	padding: 0.5em 1em;
	color: #008ecc;
	width: 100%;
	border: 1px solid #008ecc;
	display: flex;
	border-radius: 0.4em;
	align-items: center;
	background-color: hsl(205, 100%, 50%, 9%);
	justify-content: space-between;
	p {
		margin: 0;
	}
	select {
		cursor: pointer;
		border: none;
		outline: none;
		background-color: transparent;
	}
	select::disabled {
		background-color: red;
		cursor: not-allowed;
	}
}

.down-arrow {
	background-image: url('../svg/Arrow---Down-2.svg');
	background-position: center;
	background-size: contain;
	width: 0.8em;
	height: 0.8em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
}
.variants-div {
	display: flex;
	flex-direction: column;
	gap: 1em;
	p {
		margin: 0;
	}
}
.variant-name {
	width: 100%;
	border: 2px solid #008ecc;
	color: #008ecc;
	padding: 0.5em;
	border-radius: 0.4em;
	font-weight: 501;
}
.variant-sub-divs {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5em;
}
.variant-sub {
	width: calc(100% - 1em);
	border: 1px dashed #008ecc;
	color: #008ecc;
	background-color: hsl(198, 100%, 40%, 8%);
	padding: 0.5em;
	border-radius: 0.4em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin-top: 8px;
	input {
		background-color: transparent;
		width: 90%;
		height: 100%;
		border: none;
		outline: none;
	}
}

.sub-variant-container {
	width: 95.5%;
	height: 100%;
}
.variant-sub::before {
	width: 1em;
	content: '';
	left: calc(-1em - 1px);
	top: -70%;
	border-left: 2px solid #008ecc;
	border-bottom: 2px solid #008ecc;
	height: 3.5em;
	position: absolute;
}
.cross-btn {
	width: 1em;
	height: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url('../svg/deleteIcon-red.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}
.variants-div > p {
	font-weight: 501;
	margin: 0;
	color: #a2a6ad;
}
.add-new-sub-variant-btn {
	width: calc(100% - 1em);
	border: 1px solid #008ecc;
	border-radius: 0.4em;
	padding: 0.5em;
	color: #8691b5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
.plus-btn {
	width: 0.8em;
	height: 0.8em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url('../svg/plus-icon.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.plus-btn-div {
	border-radius: 50%;
	background-color: white;
	padding: 0.2em;
	cursor: pointer;
}
.create-new-variant-btn {
	border-radius: 0.4em;
	background-color: #008ecc;
	padding: 0.5em;
	color: white;
	display: flex;

	justify-content: space-between;
	align-items: center;
	p {
		margin: 0;
	}
}

.create-new-variant-btn2 {
	border-radius: 0.4em;
	background-color: #008ecc;
	padding: 0.5em;
	color: white;
	display: flex;
	margin-top: 10px;
	width: 90%;

	justify-content: space-between;
	align-items: center;
	p {
		margin: 0;
	}
}

.sub-variants-options-div {
	width: calc(100% - 1em);
	border: 1px solid #008ecc;
	display: none;
	flex-direction: column;
	gap: 0.1em;
	border-radius: 0.4em;
	padding: 0.2em;
}

.sub-variants-options {
	padding: 0.5em;
	border-radius: 0.4em;
	border: 0.4em;
	color: #8691b5;
	border: 1px solid #8691b5;
}
.sub-variants-options:hover {
	color: #008ecc;
	border: 1px solid #008ecc;
	cursor: pointer;
	background-color: hsl(198, 100%, 40%, 8%);
}
.variant-action-btns {
	margin-top: auto;
	display: flex;
	gap: 1em;
	justify-content: space-between;
}
.cancle-btn {
	border: 2px solid #008ecc;
	background-color: white;
	color: #008ecc;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	width: 100%;
	border-radius: 0.4em;
	cursor: pointer;
}
.add-variants-btn {
	background-color: #008ecc;

	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 100%;
	padding: 1em;
	border-radius: 0.4em;
	cursor: pointer;
}

.add-variants-btn2 {
	background-color: #008ecc;

	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 200px;
	padding: 1em;
	border-radius: 0.4em;
	cursor: pointer;
	margin-top: 20px;
	margin-bottom: 20px;
}

.update-variants-btn2 {
	background-color: #fbad28;

	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 200px;
	padding: 1em;
	border-radius: 0.4em;
	cursor: pointer;
	margin-top: 20px;
	margin-bottom: 20px;
}

.build-clicked {
	display: flex;
}

/* /retailerForm.css */

.plus-btn {
	width: 1.5em;
	height: 1.5em;
	font-size: 1.1em;

	background-color: white;
	color: #008ecc;
	border: 1px solid #008ecc;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.form-icons-div {
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background-color: #008ecc;
	display: flex;
	justify-content: center;
	align-items: center;
}
.form-icons {
	display: flex;
	justify-content: center;
	align-items: center;
}
.retailer-Form-Options {
	width: 75%;
	padding: 1em;
	background-color: #f1f2f4;
	color: #008ecc;
}
.form-options {
	display: flex;
	align-items: center;
	gap: 5px;
}
@media (max-width: 1173px) {
	.retailer-Form-Options {
		p {
			font-size: 0.65em;
		}
	}
}
@media (max-width: 787px) {
	.retailer-Form-Options {
		width: 100% !important;
		background-color: white;
		padding: 0;
		p {
			font-size: 0.65em;
		}
	}
	.retailer-Form-Options-inner-div {
		width: 100% !important;
	}
	.retailerForm-heading {
		width: 100% !important;
	}
}
@media (max-width: 461px) {
	.form-options {
		flex-direction: column;
		justify-content: center;
	}
	.retailer-Form-Options-inner-div {
		align-items: flex-start !important;
		gap: 0.5em !important;
	}
}

/* retailer 2 form  */
.retailer-form-divs {
	position: relative;
}
.retailer-form-divs-number {
	width: 1em;
	height: 1em;
	background-color: #008ecc;
	color: white;
	position: absolute;
	padding: 1em;
	font-size: 1.2em;
	right: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 5px;
	border-radius: 50%;
}

.checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}
.label-1 {
	display: flex !important;
	gap: 0.5em;
	align-items: center;
	padding: 0.5em;
	justify-content: space-between;
	cursor: pointer;
	position: relative;
	padding-left: 35px;
	margin-right: 15px;
	font-size: 16px;
	font-weight: 501;
}
.add-btn {
	background-color: #008ecc;
	color: white;
	padding: 0.2em 0.8em;
	border-radius: 0.4em;
}
.check-details-input {
	border: 1px solid #008ecc;
	border-radius: 0.4em;
	background-color: hsl(198, 100%, 40%, 8%);
	color: #008ecc;
	padding: 0.5em;
}
.label-1::before {
	content: '';
	display: flex;
	justify-content: center;
	align-items: center;

	width: 20px;
	height: 20px;
	border-radius: 0.2em;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 35%;
	margin-left: 0.5em;

	background-color: hsl(198, 100%, 40%, 8%);
	border: 1px solid #008ecc;
}

.input-1 {
	display: none;
}
.checkbox .label-1:before {
	border-radius: 3px;
}

.input-1:checked + .label-1::before {
	content: '\2713';

	font-size: 16px;
	color: black;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.input-2 {
	display: none;
}

.label-2 {
	display: flex !important;
	gap: 0.5em;
	align-items: center;
	padding: 0.5em;
	justify-content: space-between;
	cursor: pointer;
	position: relative;
	padding-left: 35px;
	margin-right: 15px;
	font-size: 16px;
	font-weight: 501;
}
.label-2::before {
	content: '';
	display: flex;
	justify-content: center;
	align-items: center;

	width: 20px;
	height: 20px;
	border-radius: 50% !important;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 35%;
	margin-left: 0.5em;

	background-color: hsl(198, 100%, 40%, 8%);
	border: 1px solid #008ecc;
}
.input-2:checked + .label-2::before {
	content: '\2713';

	font-size: 16px;
	color: black;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.upload-icon {
	background-image: url('');
}

.action-btns-retailer-form {
	margin-top: auto;
	padding: 1em;
	display: flex;
	gap: 1em;
	justify-content: center;
	width: 100%;
	background-color: white;
}

@media (max-width: 1223px) {
	.retailer-form-divs {
		padding: 1em !important;
	}
}
@media (max-width: 787px) {
	.retailer-form-container {
		padding: 0 !important;
	}
	.retailer-form-divs {
		width: 100% !important;
		background-color: white !important;
	}
	.main-section {
		background-color: #f4f4f4 !important;
	}
}
@media (max-width: 600px) {
	.retailer-form-container {
		p {
			font-size: 0.8em !important;
		}
	}
	.file-size-div {
		width: 100% !important;
	}
	.upload-media-space {
		padding: 0.4em !important;
	}
}
@media (max-width: 400px) {
	.retailer-form-container {
		p {
			font-size: 0.7em !important;
		}
	}
	.retailer-form-divs {
		padding: 0.2em !important;
	}
	.retailer-Form-Options-inner-div {
		padding: 0.4em !important;
	}
	.file-size-container {
		padding: 0 !important;
	}
}

/* /admin/manageRetailer.css */

section:nth-child(1) {
	order: 0 !important;
}
.outer-pagination-div {
	display: none;
	margin-top: auto;
	background-color: white;
	width: 100%;

	justify-content: space-between;
	padding: 1em;
}
td {
	position: relative;
}
.edit-drop-down-retailer {
	position: absolute;
	left: -1px;
	display: none;
	padding: 0.2em;
	background-color: white;
	z-index: 999;
	border-radius: 0.4em;
}
.drop-down-retailer-option:hover {
	color: #008ecc;
	cursor: pointer;
	background-color: #f1f5fb;
}
@media (max-width: 380px) {
	.outer-pagination-div {
		font-size: 0.7em;
	}
}

@media (max-width: 768px) {
	.outer-pagination-div {
		display: flex;
	}
	.pagination-div {
		display: none !important;
	}
}
section:nth-child(2) {
	order: 0 !important;
}
table {
	border-collapse: collapse;
	width: 100%;
	background-color: white;
}
thead {
	background-color: #f4f4f4;
	border: 1px solid #f9fafc;
}
th {
	color: #8b909a;
	text-align: center !important;
	font-weight: 400;
}
th,
td {
	padding: 8px;
	text-align: center;
}

/* /admin/testSignup.css */

/* retailerLogin.css */
.retailer-login-image {
	/* background-image: url('../images/campaign.png'); */
	background-image: url('../images/logo.png');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: contain; */
	position: absolute;
	bottom: 0%;
	left: 0;
}

.login-main {
	display: flex;
	flex-direction: row;
	margin-left: 0px;
	height: 100vh;
}

.login-credentails-div {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 1em;

	justify-content: center;
	align-items: center;
	div {
		width: 80%;
	}
}

.login-credentails-div > div:nth-child(1) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1em;
	align-items: center;
	input {
		width: calc(68% + 1em);
		padding: 1em;
		border: 1px solid #a4a4a4;
		border-radius: 15px;
	}
}
@media (max-width: 1000px) {
	.retailer-login-image {
		/* background-image: url('../images/campaign.png'); */
		background-image: url('../images/logo.png');
		width: 100%;
		height: 80%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		bottom: 10%;
		left: 0;
	}

	.login-main {
		flex-direction: column;
	}
}
@media (max-width: 630px) {
	.login-credentails-div > div:nth-child(1) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 1em;
		align-items: center;
		input {
			width: 100%;
			padding: 1em;
			border: 1px solid #a4a4a4;
			border-radius: 15px;
		}
	}
	.login-credentails-div {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 1em;

		justify-content: center;
		align-items: center;
		div {
			width: 100%;
		}
	}
}

/* retailerLoginAs.css */

.login-image {
	width: 100%;
	height: 100%;
}
.login-image-section {
	width: 45%;
}

.image-back {
	height: 100%;
	width: 100%;
	position: relative;

	background-color: #0094ff;
}

/* .login-section */
.login-section {
	width: 55%;
}
.login-div {
	width: 100%;
	height: 99vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 3em;
	overflow-y: scroll;
	font-size: 0.8rem;	
}

.create-account-supplier-btn {
	width: 50%;
	border: 1px solid #a4a4a4;
	padding: 1em 0.5em;
	border-radius: 15px;
	background-color: #0094ff;
	color: white;
}

.login-header {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
	align-items: center;
	justify-content: center;
}
.logo1 {
	display: none;
	width: 10em;
	height: 5em;
	background-image: url('../images/logo.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.logo2 {
	width: 10em;
	height: 5em;
	/* background-image: url('../images/logo.png'); */
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.login-heading {
	display: flex;
	flex-direction: column;

	width: 100%;
	align-items: center;
	justify-content: center;
}

.google-icon {
	background-image: url('../svg/googleIcon.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 1em;
	height: 1em;
}

.login-bottom {
	width: 70%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
}
.other-providers {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	button {
		width: 80%;

		font-weight: 600;

		border: 1px solid #a4a4a4;
		padding: 1em 0.5em;
		border-radius: 15px;
	}
}
.google-btn {
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	color: #0094ff;
	border: 1px solid #aaaaaa;
}
.create-account-btn {
	background-color: #0094ff;
	color: white;
}
.privacy-policy {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 1000px) {
	.image {
		/* background-image: url('../svg/ecommerceCampaignFull.svg'); */
		background-image: url('../images/logo.png');
		width: 100%;
		height: 70%;
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: contain;
		position: absolute;
		bottom: 0%;
		left: 0;
	}

	.image-back {
		display: flex;
		padding: 1em;
		width: 100%;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	main {
		flex-direction: column;
		height: auto !important;
		width: 100%;
	}
	.login-section {
		width: 100%;
		height: 55%;
	}
	.login-image-section {
		height: 50vh;
		width: 100%;
	}
	.logo1 {
		display: block;
	}
	.logo2 {
		display: none;
	}
	.login-div {
		padding: 1em;
	}
}
@media (max-width: 630px) {
	.login-btns-div {
		button {
			width: 100%;
		}
	}
	.privacy-policy {
		p {
			width: 100% !important;
		}
	}
	.other-providers {
		button {
			width: 100%;
		}
	}
	.login-bottom {
		width: 100%;
	}
}
@media (max-width: 430px) {
	.login-image-section {
		height: 40vh;
	}
}

/* signup.css */

.retailer-signup-image {
	/* background-image: url('../svg/RetailerSignUp.svg'); */
	background-image: url('../images/logo.png');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: contain; */
	position: absolute;
	bottom: 0%;
	left: 0;
}

.signup-credentails-div {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 1em;

	justify-content: center;
	align-items: center;
	div {
		width: 80%;
	}
}
.signup-credentails-div > div:nth-child(1) {
	display: flex;
	justify-content: center;
	gap: 1em;
	align-items: center;
	input {
		width: 34%;
		padding: 1em;
		border: 1px solid #a4a4a4;
		border-radius: 15px;
	}
}
.signup-credentails-div > div:nth-child(2) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1em;
	align-items: center;
	input {
		width: calc(68% + 1em);
		padding: 1em;
		border: 1px solid #a4a4a4;
		border-radius: 15px;
	}
}

@media (max-width: 1000px) {
	.retailer-signup-image {
		/* background-image: url('../svg/RetailerSignUp.svg'); */
		background-image: url('../images/logo.png');
		width: 100%;
		height: 80%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		bottom: 10%;
		left: 0;
	}
}

@media (max-width: 630px) {
	.signup-credentails-div > div:nth-child(1) {
		display: flex;
		justify-content: center;
		gap: 1em;
		align-items: center;
		input {
			width: 100%;
			padding: 1em;
			border: 1px solid #a4a4a4;
			border-radius: 15px;
		}
	}
	.signup-credentails-div > div:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 1em;
		align-items: center;
		input {
			width: 100%;
			padding: 1em;
			border: 1px solid #a4a4a4;
			border-radius: 15px;
		}
	}
	.signup-credentails-div {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 1em;

		justify-content: center;
		align-items: center;
		div {
			width: 100%;
		}
	}
}

.image {
	/* background-image: url('../svg/Ecommerce\ campaign-pana.svg'); */
	background-image: url('../images/logo.png');
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: contain; */
	position: absolute;
	bottom: 0%;
	left: 0;
}

.login-btns-div {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 1em;
	button {
		width: 55%;
		box-shadow: 0px 0px 5px 0px hsl(0, 0%, 0%, 25%);
		font-weight: 600;
		color: #666666;
		border: 1px solid #a4a4a4;
		padding: 1em 0.5em;
		border-radius: 15px;
		background-color: white;
	}
}

.save-category,
.add-variants {
	width: 15px;
	cursor: pointer;
	filter: invert(37%) sepia(60%) saturate(1179%) hue-rotate(45deg)
		brightness(101%) contrast(104%);
}

.update-variants {
	width: 15px;
	cursor: pointer;
	filter: invert(37%) sepia(60%) saturate(1179%) hue-rotate(11deg)
		brightness(101%) contrast(104%);
}

.color-input-txt {
	display: flex;
	justify-content: center;
	align-items: center;
}

.color-input-box {
	border: none;
	width: 30px;
	height: 30px;
}

/* ----------variant checkbox---------- */

fieldset {
	color: #828282;
	font-size: 0.875rem;
	font-weight: 500;
	width: auto;
	border: 1px solid #b0b0b0;
	border-radius: 0.5em;
	padding: 10px;
	background-color: #f2f7ff;
	margin-right: 20px;
	min-width: 200px;
}

.legend {
	color: #828282;
	font-size: 0.875rem;
	font-weight: 500;
}

.checkbox {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 1em;
	align-items: center;
}

.image-upload {
	max-width: 50em;
	/* margin-left: auto;
	margin-right: auto; */
	margin-top: 20px;
	width: 50%;
	height: 25rem;
	border-radius: 0.92156rem;
	border: 2.949px dashed #818181;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	div {
		text-align: center;
	}
	p {
		color: #c1c1c1;
		font-size: 0.92156rem;
		font-weight: 500;
		margin-top: 1.27rem;
	}
	svg {
		width: 59px;
		height: 62px;
	}
}

.image-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid #008ecc;
	background: #ffffff;
	border-radius: 10px;
	margin-top: 30px;
	margin-bottom: 30px;
	width: 90%;
	min-height: 200px;
}

.img-box {
	height: 100%;
	width: 98%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.empty-img-box {
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.img-btn-cintainer {
	min-width: 150px;
	display: flex;
	justify-content: space-between;
}

.xs-screen {
	border: 1px solid #008ecc;
	width: 60%;
	min-height: 100px;
	border-radius: 10px;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sm-screen,
.sm2-screen {
	border: 1px solid #008ecc;
	width: 60%;
	min-height: 100px;
	border-radius: 10px;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dialog {
	background-color: #ffffff;
	border: 1px solid white;
	border-radius: 20px;
	height: 500px;
	width: 600px;
	z-index: 9999;
	box-sizing: content-box;
	margin-top: 100px;

	.dialog-nav {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 2px solid black;
		margin-bottom: 10px;

		span {
			font-weight: 600;
			cursor: pointer;
		}
	}
}

.dialog-product-box {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-bottom: 2px solid black;
	height: 130px;
	overflow-x: scroll;
	margin-top: 5px;
}

.dialog-img-box {
	width: 80px;
	height: 90px;
	border-radius: 10px;
}

.dialog-product-div {
	width: 90%;
	height: 340px;
	overflow-y: scroll;
}

.cancel-dialog-btn {
	background-color: #008ecc;
	border: none;

	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 200px;
	padding: 1em;
	border-radius: 0.4em;
	cursor: pointer;
	margin-top: 20px;
	margin-bottom: 20px;
}

.delete-dialog-btn {
	background-color: red;
	border: none;

	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 200px;
	padding: 1em;
	border-radius: 0.4em;
	cursor: pointer;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* ----------Supplier Form---------- */

.header-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.suppliers-request {
	width: 70%;
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	margin-bottom: 20px;
}
.header-container > div:nth-child(2) {
	width: 70%;
}
.header-bar {
	width: 70%;
	height: 40px;
	display: flex;
	justify-content: start;
	align-items: center;
	background: #0094ff17;
}

.header-bar-2 {
	width: 70%;
	height: 100px;
	margin-top: 40px;
	margin-bottom: 50px;
	background-color: #e5e7eb;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-bar-txt {
	color: #008ecc;
	font-weight: 600;
	font-size: 15px;
	margin-left: 10px;
}

.bar-2-box {
	width: 92%;
	height: 50px;
	background-color: #ffffff;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.sm-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.paragraph-container,
.checkList-container,
.multiple-choice-container,
.file-container {
	width: 70%;
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.media-upload-main-container {
	display: flex;
	background-color: #e5e7eb;
	width: 100%;
	padding: 1em;
	padding-top: 0em;
	gap: 1em;
	justify-content: space-between;
}

.paragraph-top-box {
	background-color: #e5e7eb;
	width: 100%;
	display: flex;
	padding: 1rem;
	gap: 1em;
	justify-content: space-between;
}
.paragraph-top-box > div:nth-child(2) {
	display: flex;
	justify-content: space-between;
}
.paragraph-top-box > textarea {
	border: none;
	border-radius: 5px;
	padding: 0.5em;
	outline: none;
}
.mcq-top-box {
	display: flex;
	max-width: 500px;
	flex-direction: column;
}
.mcq-top-box > textarea {
	border: none;
	border-radius: 5px;
	padding: 0.5em;
	outline: none;
}
.paragraph-bottom-box {
	background-color: #e5e7eb;
	width: 100%;
	height: 48px;
	display: flex;
	justify-content: end;
	align-items: center;
}

.delete-btn {
	width: 100px;
	border-radius: 5px;
	height: 40px;
	border: none;
	padding: 5px;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	background-color: #008ecc;
	margin-right: 10px;
}

.delete-btn2 {
	width: 150px;
	border-radius: 5px;
	height: 40px;
	border: none;
	padding: 5px;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	background-color: red;
	margin-right: 10px;
}

.delete-btn-container {
	width: 70%;
	margin-top: 10px;
	height: 40px;
	margin-bottom: 50px;
	display: flex;
	justify-content: flex-end;
	display: none;
}

.sm-box {
	border: 2px solid #e5e7eb;
	background-color: #ffffff;
	width: 250px;
	height: 50px;
	margin-right: 15px;
}

.form-number {
	background-color: #008ecc;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	margin-top: 10px;
	font-weight: 600;
	color: #ffffff;
	font-size: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sm-box-txt {
	font-weight: 600;
	color: #c0c2c6;
	margin-left: 15px;
	font-size: 15px;
}

.sm-sub-box {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: start;
	align-items: center;
}

.mcq-txt {
	display: flex;
	flex-direction: column;
	max-width: 400px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.q-create-box {
	padding-left: 10px;
	border-radius: 5px;
	width: 100%;
	height: 70px;
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
}

.q-create-input {
	margin-right: auto;
	margin-left: 10px;
	padding: 10px;
	width: 300px;
	border: none;
	color: rgba(0, 142, 204, 1);
	border-radius: 5px;
	background-color: rgba(0, 148, 255, 0.09);
}

.file-upload-box {
	background-color: #ffffff;
	width: 50%;
	height: 130px;
	margin-top: 10px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.file-upload-box {
	span {
		font-size: 1em;
	}
}
.limit-box {
	margin-top: 20px;
	display: flex;
	width: 130px;
	border: 1px solid #c0c2c6;
	height: 60px;
	border-radius: 10px;
	background-color: #ffffff;
}
.limit-box {
	span {
		font-size: 1em;
	}
}
.sub-limit-box {
	width: 70%;
	border-right: 2px solid #c0c2c6;
	display: flex;
	justify-content: center;
	align-items: center;
}

.right-limit-box {
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ----------Business Type----------*/

.business-main {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.business-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.business-item {
	border: 1px solid black;
	width: 250px;
	height: 250px;
	cursor: pointer;
}

.business-item:hover {
	border: 3px solid #0094ff;
}

.business-active {
	border: 5px solid #008ecc;
}

@media screen and (max-width: 768px) {
	.business-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.business-container {
		display: flex;
		flex-direction: column;
		grid-template-columns: repeat(6, 1fr);
	}
}

.select-btn {
	width: 100px;
	border-radius: 5px;
	height: 40px;
	border: none;
	padding: 5px;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	background-color: #008ecc;
	margin-bottom: 50px;
}
@media (max-width: 1430px) {
	.header-container > div {
		width: 90%;
	}
	#form-container > div {
		width: 90%;
	}
	.header-container > div:nth-child(2) {
		width: 90%;
	}
}
@media (max-width: 1160px) {
	.paragraph-top-box {
		flex-direction: column-reverse;
	}
	.mcq-top-box {
		width: 100%;
	}
}

@media (max-width:600px){
	.file-upload-box{
		width: 100%;
	}
}

@media (max-width: 530px) {
	.limit-box {
		width: 100px;
	}
	.sm-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.bar-2-box {
		width: 98%;
		height: 60px;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.checkList-container {
		font-size: 0.8em;
	}
	.paragraph-container {
		font-size: 0.8em;
	}
	.file-container {
		font-size: 0.8em;
	}
	.multiple-choice-container {
		font-size: 0.8em;
	}
	.delete-btn {
		font-size: 0.8em;
	}
	.file-upload-box {
		span {
			font-size: 0.8em;
		}
	}
	.limit-box {
		span {
			font-size: 0.8em;
			text-align: center;
		}
	}
}

#my-products-container {
	overflow-x: auto;
}


/* image upload crop and rearrange  */


.section-2-add-room{
    width: 100%;
    display: flex;
    padding: 1em;
    flex-direction: column;
    gap: 1em;
}
.section-2-add-room>p{
    color: var(--dark-font-color);
}
.upload-icon{
    background-image: url("../utils/icons/uploadIcon.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.5em;
    height: 2.5em;

}
.drag-and-drop-area-div{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.drag-and-drop-area{
    background-color: 
    rgba(246, 246, 246, 1);
    color: var(--icon-color);
    width: 100%;
    gap: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px dashed #818181 ;
    border-radius: 0.4em;
   min-height: 20em;

}

.images-list{
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.images{
    width: 4em;
    height: 4em;
    gap: 1em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    background-color: #EEECEC;
    border-radius: 0.4em;
    position: relative;
}
.delete-images-btn{
    width: 1em;
    height: 1em;
    position: absolute;
    left: -0.5em;
    display: none;
    justify-content: center;
    align-items: center;
    top: -0.5em;
    border-radius: 50%;
    background-color: red;


}
.delete-images-btn.show{
    display: flex;
}
.images.dragging{
    opacity: 0.5;
}
.image-number{
    width: 1em;
    height: 1em;
    color: var(--icon-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    font-size: 0.8em;
    padding: 1em;
    justify-content: center;
    right: -0.5em;
    top: -0.5em;
    position: absolute;
    background-color: #EEECEC;
    border: 1px white solid;

}
.upload-button-div{
    width: 100%;
}
.upload-icon-2{
    background-image: url("../utils/icons/uploadIcon2.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5em;
    height: 1.5em;
}
.upload-btn-add-room-images{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-color);
    gap: 1em;
    border: 1px solid var(--main-color);
    width: 100%;
    padding: 1em;
    border-radius: 0.4em;
    background-color: white;

}








/* Notification css  */

.error-notif {
	position: fixed;
	top: 10px;
	right: 20px;
	z-index: 9;
	width: 300px;
}

.notif-box{
	width: 300px;
	color: white;
    font-weight: 600;
    border-radius: 3px;
    margin: 10px 0;
}

.error-message {
    padding: 0.75rem;
}
.line-div {
    width: 100%;
    height: 3px;
}
.line-runner {
    width: 0%;
    height: 100%;
    background-color: white;
    animation: runner 3.7s ease-in 200ms 1;
}

.error{
	background-color: #FF1717;
}

.success{
	background-color: #5cb85c;
}

.wait{
	background-color: #EED202;
}

@keyframes runner {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.select-cat-card{
	width: fit-content;
	max-width: 80vw;
	overflow-x: auto;
	border-radius: 10px;
	border: 1px solid #D8D8D8;
	padding: 1rem;
	display: flex;
}

.select-cat-card .input-wrappers{
	width: 500px;
}

.select-cat-card p{
	font-family: 'Poppins';
	font-size: 14px;
	font-weight: 500;
}

.select-cat-card .category-inputs{
	margin: 0.75rem 0;
}
.select-cat-card .category-inputs select{
	width: 150px;
	padding: 0.5rem;
	border: 1px solid #008ECC;
	border-radius: 8px;
	margin-right: 6px;
	color: #008ECC;
	font-weight: 500;
	font-family: 'Poppins';
}

.adding-var-pro{
	display: flex;
}
.adding-var-pro fieldset{
	border: none;
	background-color: none;
	display: flex;
	flex-direction: column;
	padding: 0;
	font-family: 'Poppins';
	font-size: 12px;
	color: #008ECC;
}

.adding-var-pro fieldset input{
	width: 250px;
	padding: 0.5rem;
	border: 2px solid #008ECC;
	border-radius: 5px;
}

.adding-var-pro fieldset select{
	width: 200px;
	padding: 0.47rem;
	border: 2px solid #008ECC;
	border-radius: 5px;
}

.show-variants{
	display: flex;
}

.show-variants .single-var{
	min-width: 200px;
	margin: 0 0.4rem;
}

.show-variants .single-var .var-head span{
	color: #008ECC;
	font-weight: 600;
}

.option-icns{
	margin: 0.5rem 0;
	display: flex;
}
.option-icns span{
	background-color: #E8EBED;
	padding: 10px;
	margin: 0 10px 0 0;
	border-radius: 50%;
	display: block;
}

.option-icns span img{
	width: 15px;
	height: 15px;
}

.single-var .variant-value{
	padding: 0.75rem;
	font-size: 13px;
	color: #008ECC;
	margin: 0.4rem 0;
	border: 1px solid #008ECC;
	border-radius: 5px;
	display: flex;
}

.new-product-card{
	width: 30%;
	min-width: 500px;
	padding: 1rem;
	border: 1px solid black;
	border-radius: 2px;
	margin: 5px;
}

.color-cr{
	width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
	border: 1px solid black;
	margin-right: 10px;
}

.adding-var-two{
	margin-top: 0.75rem;
}

.adding-var-two .new-var-opts{
	display: flex;
	width: 100%;
	position: relative;

}
.adding-var-two .new-var-opts input{
	margin: 0.5rem 0.75rem;
	width: 75%;
	border: 1px solid #008ECC;
	border-radius: 5px;
	background-color: #008ECC14;
	color: #008ECC;
	font-size: 14px;
	padding: 0.25rem 0.5rem;
}

.adding-car-two .new-var-opts button{
	margin: 0.5rem 0.75rem;
	width: 75%;
	border: 1px dotted #008ECC;
	border-radius: 5px;
	color: #008ECC;
	font-size: 12px;
	padding: 0.5rem 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.adding-car-two .new-var-opts .icn{
	line-height: 10px;
	display: block;
	margin-left: 10px;
}

.color-pick{
	margin: 0 0.75rem;
	width: 100%;
}
.color-cls{
	padding-left: 3rem!important;
}
.color-circle {
	position: absolute;
	background-color: #000;
	top: 13px;
	left: 20px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
#clr-picker{
	width: 75%;
}

.hide-div{
	display: none!important;
}

.cat-submit-div {
	display: flex;
    justify-content: flex-end;
}

.cat-submit-div button {
	margin: 2rem 2rem 0 2rem;
	padding: 0.75rem 2.5rem;
	border-radius: 7px;
	background-color: #008ECC;
	color: white;
	border: none;
	font-size: 13px;
}