@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Dosis:wght@200;300;400;500;600;700;800&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Manrope:wght@200;300;400;500;600;700;800&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Mukta:wght@200;300;400;500;600;700;800&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pathway+Extreme:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Play:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap);

.sidebar,
.sidebar__menu a {
	transition: transform .4s ease-in-out
}

.search-border input:focus,
.search-btn:focus,
button:focus,
input#discount_code:focus,
select,
select#directionSwitch:focus {
	outline: 0;
	box-shadow: none
}

.check-disable,
.custom-options,
.dot {
	pointer-events: none
}

#title,
.d-tab .c-tabs-nav__link,
.dropdown,
.squre label,
body {
	font-family: var(--global-font)
}

#accordian li,
#navigation li,
.invisible-list li,
summary {
	list-style-type: none
}

.nav-wrap,
.quickview-scrollbar {
	--scrollbarBG: #f3f3f3
}

.layout-wrapper {
	max-width: 1200px !important;
	/*margin-left: 50px;*/
	/*margin-right: 50px;*/
}

.preview-body {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 100;
	display: none;
	opacity: 0
}

.preview-image {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	box-shadow: -2px 3px 12px #444
}

.bg-indigo-blue,
.bg-indigo-blueTwo {
	background-color: #234966;
	color: #fff
}

.preview-image span {
	position: absolute;
	right: -14px;
	top: -15px;
	color: #ffffffba;
	background: #0000004a;
	border-radius: 50%;
	z-index: 101;
	padding: 4px 10px;
	font-weight: 700;
	cursor: pointer
}

.preview-image img {
	max-height: 95vh
}

.preview-image span:hover {
	background: #00000099;
	color: #fff
}

.menu-control,
.none,
form.is-editing .btn-edit,
form.is-readonly .btn-save {
	display: none
}

.notification-modal {
	margin-left: -350px
}

#accordian h3 a,
#accordian li.active>ul,
#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3,
#menu-toggle:checked+#menu,
#navigation h3 a,
#navigation li.active>ul,
#overlay.active,
.c-tab.is-active,
.header-menu-nav li li,
.img-bg-gradient img,
.more-link {
	display: block
}

.browse-tooltip,
.dropdown {
	display: inline-block;
	position: relative
}

.bg-indigo-blueTwo {
	border-bottom: 1px solid #486c88
}

.space-y-6.list-style ul li {
	list-style: disc !important
}

div.payment-product:hover {
	border: 2px solid #d6d6d6;
	-moz-border-radius: 3px;
	border-radius: 3px
}

div.payment-product.selected {
	border: 2px solid #6ee7b7;
	-moz-border-radius: 3px;
	border-radius: 3px
}

.browse-tooltip .browse-tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #e5faf0;
	color: #555;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: -5px;
	left: 194%
}

.browse-tooltip .browse-tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #e5faf0 transparent transparent
}

.browse-tooltip:hover .browse-tooltiptext {
	visibility: visible
}

.error {
	color: red
}

.cart-w {
	width: 32%
}

.border-one {
	border-bottom: 1px solid #e0e0e0;
	position: relative;
	z-index: 1;
	margin-top: 20px;
	padding-top: 20px !important;
	color: #726e97
}

.border-two:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 15px;
	width: 30%;
	border-bottom: 3px solid #64e0ad
}

.border-a:hover {
	box-shadow: 5px 5px 15px rgb(0 0 0 / 5%);
	transition: .3s
}

.cool-link:hover {
	color: #fcca19;
	transition: .3s
}

.cool-link:hover::after {
	width: 100%;
	transition: width .12s
}

.ui-state-active,
.ui-state-active:hover {
	border: none !important;
	margin: 0 !important;
	background: unset !important;
	font-weight: 400;
	color: #10b981 !important
}

.ui-widget.ui-widget-content {
	border: none !important;
	border-top: 1px solid #ddd !important
}

.ui-widget-content {
	border: none !important;
	background: #fff;
	color: #333;
	font-size: 14px !important;
	box-shadow: 0 2px 4px 0 rgb(0 0 0 / 21%)
}

span.choose,
span.msg {
	color: #898989;
	display: inherit
}

.dropdown {
	width: 160px;
	background-color: #fff;
	border-radius: 2px;
	font-size: 12px;
	color: #898989;
	height: 100%;
	text-align: left;
	margin-left: -6%
}

#title,
.accordion__button,
.accordion__title::after,
.address-tab .c-tabs-nav,
.carousel-control,
.carousel-indicators,
.dot-containers,
.mySlidess,
.next,
.prev,
.squre label,
.text {
	text-align: center
}

.dropdown .select {
	cursor: pointer;
	padding: 8px
}

.category-hover:hover,
.see-all:hover {
	padding-left: 7px
}

.c-select select {
	background-image: none
}

.dropdown .select>i {
	font-size: 13px;
	color: #888;
	cursor: pointer;
	transition: .3s ease-in-out;
	float: right;
	line-height: 20px
}

.dropdown:active {
	background-color: #f8f8f8
}

.dropdown.active .select>i,
.group-category li>button svg {
	transform: rotate(-90deg)
}

.dropdown .dropdown-menu {
	position: absolute;
	background-color: #fff;
	width: 100%;
	margin-top: 1px;
	box-shadow: 0 1px 2px #ccc;
	border-radius: 0 1px 2px 2px;
	overflow: hidden;
	display: none;
	overflow-y: auto;
	z-index: 9;
	list-style: none
}

.dropdown .dropdown-menu li {
	padding: 10px;
	cursor: pointer
}

.dropdown .dropdown-menu li:hover,
.next:hover,
.prev:hover {
	background-color: var(--primary-color);
	color: #2c2c2c
}

.dropdown .dropdown-menu li:active {
	background-color: #e2e2e2
}

.language-dropdown {
	z-index: 99999 !important
}

.ltr-btn:dir(rtl) {
	font-size: 66px !important
}

html[dir=rtl] .rtl-direction {
	position: relative;
	top: -6px !important
}

html[dir=rtl] .rtl-direction-space,
html[dir=rtl] span.ml-2.text-sm.text-gray-500 {
	margin-right: 10px
}

html[dir=rtl] .rtl-mr-20 {
	margin-right: 20px !important
}

.hamburger,
html[dir=rtl] .rtl-direction-space-review {
	margin-right: 45px
}

html[dir=rtl] .rtl-direction-space-left {
	margin-left: 10px
}

html[dir=rtl] .rtl-direction-space-left-cart {
	margin-left: 40px
}

html[dir=rtl] .dropdown .select>i {
	float: left !important;
	margin-right: 24%
}

html[dir=rtl] .border-two:before {
	left: unset
}

html[dir=rtl] button.slick-prev.slick-arrow {
	right: unset !important;
	left: auto
}

html[dir=rtl] button.slick-next.slick-arrow {
	right: auto;
	left: unset !important
}

html[dir=rtl] .shipping-radio-button-label {
	margin-right: 8px;
	margin-left: unset
}

html[dir=rtl] #switch span svg,
html[dir=rtl] #switch span:after,
html[dir=rtl] .neg-transition-scale,
html[dir=rtl] .rotate svg {
	transform: scaleX(-1)
}

html[dir=rtl] .radio-star-total {
	left: -62px;
	right: unset
}

html[dir=rtl] .radio-stars {
	direction: ltr
}

html[dir=rtl] .note-float-right {
	float: left !important;
	margin-right: 12px
}

.mg {
	width: 250px !important
}

.side-overflow {
	overflow-y: scroll !important;
	scrollbar-width: none
}

.carousel-inner,
body.noscroll,
html.noscroll {
	overflow: hidden
}

input:checked~.dot,
input:checked~.dot-two {
	transform: translateX(100%);
	background-color: #e6e6e6
}

form.is-readonly input[disabled],
form.is-readonly textarea[disabled] {
	cursor: text;
	background-color: #fff;
	border-color: transparent;
	outline-color: transparent;
	box-shadow: none
}

.user-font {
	font-size: 16px
}

.search-border input::placeholder {
	font-size: 16px
}

.category-color {
	color: #10b981 !important
}

hr {
	height: 0;
	color: inherit
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
	display: block;
	vertical-align: middle
}

*,
::after,
::before {
	--tw-border-opacity: 1;
	border-color: rgba(229, 231, 235, var(--tw-border-opacity))
}

@-webkit-keyframes updown {

	0%,
	100%,
	50% {
		transform: translatey(0)
	}

	20% {
		transform: translatey(5px)
	}

	25% {
		transform: translatey(-20px)
	}

	30% {
		transform: translatey(20px)
	}

	35% {
		transform: translatey(-5px)
	}
}

@keyframes updown {

	0%,
	100%,
	50% {
		transform: translatey(0)
	}

	20% {
		transform: translatey(5px)
	}

	25% {
		transform: translatey(-20px)
	}

	30% {
		transform: translatey(20px)
	}

	35% {
		transform: translatey(-5px)
	}
}

.hamburger {
	position: relative;
	float: right;
	display: block;
	margin-top: -40px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 1
}

.hamburger__icon {
	display: inline-block;
	height: 2px;
	width: 24px;
	background: #000;
	border-radius: 2px
}

.sidebar,
.sidebar__close {
	background: #fff;
	transform: translatex(-100%)
}

.sidebar {
	height: 100vh;
	width: 320px;
	top: 0;
	left: 0;
	padding: 15px;
	display: block;
	position: fixed;
	z-index: 999;
	border-right: 1px solid #cacaca
}

.sidebar__close {
	position: absolute;
	top: 1%;
	right: 5px;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	box-shadow: 0 0 20px 20px rgb(0 0 0 / 3%);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: transform .4s ease-in-out .2s
}

.sidebar__close::after,
.sidebar__close::before {
	content: "";
	height: 2px;
	background: #898989;
	width: 13px;
	display: block;
	position: absolute
}

.sidebar__close::after {
	transform: rotate(90deg)
}

.sidebar__menu {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: space-around;
	font-size: 36px;
	margin-top: 80px;
	margin-bottom: 80px;
	color: #898989
}

.sidebar__menu a {
	color: currentcolor;
	text-decoration: none;
	transform: translatex(-80%)
}

.sidebar__menu a::before {
	content: "";
	height: 2px;
	background: #898989;
	width: 120px;
	position: absolute;
	bottom: -2px;
	left: 0;
	transform: translatex(-50%);
	opacity: 0;
	transition: transform .4s ease-in-out, opacity .4s linear
}

.sidebar__menu a:hover::before {
	transform: translatex(0);
	opacity: 1
}

.sidebar__menu a:first-child {
	transition-delay: 50ms
}

.sidebar__menu a:nth-child(2) {
	transition-delay: 0.1s
}

.sidebar__menu a:nth-child(3) {
	transition-delay: 0.15s
}

.sidebar__menu a:nth-child(4) {
	transition-delay: 0.2s
}

.sidebar__menu a:nth-child(5) {
	transition-delay: 0.25s
}

.sidebar__social {
	display: flex;
	list-style: none;
	padding: 0
}

.sidebar__social li {
	margin: 4px
}

.sidebar__social a,
.sidebar__social svg {
	display: inline-block;
	height: 18px;
	width: 18px
}

.menu-control:checked+.sidebar,
.menu-control:checked+.sidebar .sidebar__menu a {
	transform: translatex(0)
}

.menu-control:checked+.sidebar .sidebar__close {
	transform: translatex(0) rotate(45deg)
}

.scrollbar-w-2::-webkit-scrollbar {
	width: .25rem;
	height: .25rem
}

.scrollbar-track-blue-lighter::-webkit-scrollbar-track {
	--bg-opacity: 1;
	background-color: #f7fafc;
	background-color: rgba(247, 250, 252, var(--bg-opacity))
}

.scrollbar-thumb-blue::-webkit-scrollbar-thumb {
	--bg-opacity: 1;
	background-color: #edf2f7;
	background-color: rgba(237, 242, 247, var(--bg-opacity))
}

.scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
	border-radius: .25rem
}

.carousel {
	position: relative;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .64);
	margin-top: 26px
}

.carousel-inner {
	position: relative;
	width: 100%
}

.carousel-open:checked+.carousel-item {
	position: static;
	opacity: 100
}

.carousel-item {
	position: absolute;
	opacity: 0;
	transition: opacity .6s ease-out
}

.carousel-item img {
	display: block;
	height: auto;
	max-width: 100%
}

.carousel-control {
	background: rgba(0, 0, 0, .28);
	border-radius: 50%;
	color: #fff;
	display: none;
	font-size: 40px;
	height: 40px;
	line-height: 35px;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	cursor: pointer;
	transform: translate(0, -50%);
	width: 40px;
	z-index: 10
}

.next,
.prev {
	border-radius: 3px;
	background-color: #fff
}

.carousel-control.prev {
	left: 2%
}

.carousel-control.next {
	right: 2%
}

.carousel-control:hover {
	background: rgba(0, 0, 0, .8);
	color: #aaa
}

.carousel-indicators {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 2%;
	left: 0;
	right: 0;
	z-index: 10
}

.carousel-indicators li {
	display: inline-block;
	margin: 0 5px
}

.carousel-bullet {
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 35px
}

.carousel-bullet:hover {
	color: #aaa
}

#carousel-1:checked~.control-1~.carousel-indicators li:first-child .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
	color: #428bca
}

#title {
	width: 100%;
	position: absolute;
	padding: 0;
	margin: 0 auto;
	font-size: 27px;
	color: #fff;
	z-index: 9999;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .33), -1px 0 2px rgba(255, 255, 255, 0)
}

.custom-border,
.sr-only {
	white-space: nowrap
}

.not-sr-only {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal
}

.numbertext,
.text {
	color: #f2f2f2;
	padding: 8px 12px
}

select#directionSwitch {
	background-color: unset !important
}

button:focus,
input:focus {
	outline: 0 !important
}

input#itemSearch {
	border-width: 0 !important
}

.sub-img {
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat
}

@media only screen and (max-width:890px) {
	.sub-img {
		background-size: cover;
		background-position: 0 0;
		background-repeat: no-repeat
	}

	.filter-mobile {
		z-index: 50
	}
}

@media only screen and (min-width:768px) and (max-width:1024px) {
	.linked-in {
		margin-left: 1px !important
	}

	.custom-border::-webkit-scrollbar {
		height: 4px !important
	}

	.custom-border::-webkit-scrollbar-track {
		background-color: #ebebeb
	}

	.custom-border::-webkit-scrollbar-thumb {
		background: #bbb
	}
}

.scroll-options::-webkit-scrollbar {
	height: 4px;
	width: 8px
}

.scroll-options::-webkit-scrollbar-track {
	background-color: #ebebeb
}

.scroll-options::-webkit-scrollbar-thumb {
	background: #bbb
}

.categories-menu:hover,
.category-hover:hover {
	background-color: var(--primary-color);
	color: #000 !important;
	transition: 120ms ease-in-out
}

summary::-webkit-details-marker {
	display: none
}

.categories-menu:hover {
	margin-left: 7px
}

html[dir=rtl] .categories-menu:hover {
	margin-right: 7px;
	margin-left: unset
}

html[dir=rtl] .category-hover:hover {
	padding-right: 7px;
	padding-left: unset
}

.see-all:hover {
	color: #000 !important;
	transition: 120ms ease-in-out
}

.see-all:hover svg {
	margin-left: 12px;
	transition: 120ms ease-in-out
}

.category-svg {
	transform: unset !important
}

.c-tab,
.mySlides,
.radio-container-payment input[type=radio] {
	display: none
}

.align-middle,
img {
	vertical-align: middle
}

.slideshow-container {
	position: relative;
	height: 421px;
	z-index: 1
}

.costume-title,
.inset-center,
.next,
.numbertext,
.prev,
.text {
	position: absolute
}

.next,
.prev {
	cursor: pointer;
	top: 93%;
	right: 64px;
	width: 34.13px;
	height: 33.36px;
	margin-top: -23px;
	font-weight: 700;
	font-size: 18px;
	transition: .1s;
	user-select: none;
	z-index: 9999
}

.dot,
.dots {
	margin: 0 2px
}

.next {
	right: 20px
}

.text {
	font-size: 15px;
	bottom: 8px;
	width: 100%
}

.numbertext {
	font-size: 12px;
	top: 0
}

.dot {
	width: 7.81px;
	height: 7.64px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color .6s;
	z-index: 9999
}

.active.dot {
	width: 30px;
	background: #fcca19;
	border-radius: 53px;
	height: 8px
}

.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s
}

@-webkit-keyframes fade {
	from {
		opacity: .4
	}

	100%,
	to {
		opacity: 1
	}

	0% {
		opacity: 0
	}
}

@keyframes fade {
	from {
		opacity: .4
	}

	100%,
	to {
		opacity: 1
	}

	0% {
		opacity: 0
	}
}

.fade-in {
	-webkit-animation: 10s 4s infinite fade;
	-moz-animation: 10s 4s infinite fade;
	-o-animation: 10s 4s infinite fade;
	animation: 10s 4s infinite fade
}

@media only screen and (max-width:300px) {

	.next,
	.prev,
	.text {
		font-size: 11px
	}
}

.small-title {
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	color: #868686
}

.bold-title,
.bottom-title {
	color: #2c2c2c;
	font-style: normal
}

.bold-title {
	font-size: 40px;
	line-height: 52px
}

.bottom-title {
	font-weight: 400;
	font-size: 26px;
	line-height: 34px
}

.bottom-title span {
	color: #fa886a;
	font-weight: 700
}

.shop-btn:hover {
	background-color: var(--hover-bg-color) !important;
	color: var(--hover-color) !important
}

.title-color {
	color: #fff
}

.title-border {
	border: 1px solid #fff
}

.hero-slide-img {
	height: 452px;
	width: 100%
}

.t-img:hover img {
	margin-top: -21px
}

.social-transition,
.trans-effect {
	transition: .3s
}

.trans-2 {
	transition: .2s
}

@media only screen and (min-width:767px) {
	.rev-img:hover img {
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1)
	}

	html[dir=rtl] .rev-img:hover img {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}

.round label:after,
.rounds label:after {
	top: 6px;
	transform: rotate(-45deg);
	width: 10px;
	content: ""
}

.animi-img:hover img {
	margin-top: -10px;
	transition: 120ms ease-in-out
}

.promote-img {
	height: 178px;
	background-size: cover !important;
	background-position: center !important;
	padding: 20px;
	background-image: linear-gradient(to right, #fdfdfd 21.44%, rgba(223, 223, 223, 0) 70.79%), url("./../frontend/assets/img/product/promote.png")
}

.inset-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.grow {
	transition-duration: .3s;
	transition-property: transform;
	-webkit-tap-highlight-color: transparent;
	transform: translateZ(0);
	box-shadow: 0 0 1px transparent
}

.grow:hover {
	transform: scale(1.2)
}

.mySlidess {
	display: none;
	height: 415px;
	position: relative
}

.c-tabs-nav,
.dots {
	display: inline-block
}

.nexts,
.prevs {
	cursor: pointer;
	position: absolute;
	top: 100px;
	width: auto;
	padding: 0 60px;
	color: #fff;
	font-weight: 400;
	user-select: none
}

.nexts {
	position: absolute;
	right: 0;
	border-radius: 2px 0 0 2px
}

.dot-containers {
	padding: 20px;
	background: #ddd
}

.dots {
	cursor: pointer;
	height: 15px;
	width: 15px;
	background-color: #bbb;
	border-radius: 50%;
	transition: background-color .6s
}

.c-tabs-nav {
	list-style: none;
	padding-bottom: 9px;
	position: relative;
	margin-bottom: 10px;
	border-bottom: 1px solid #dfdfdf
}

.active-border {
	border-bottom: 3px solid var(--primary-color);
	color: #2c2c2c !important;
	font-size: 22px !important;
	line-height: 29px
}

.c-tabs-nav__link {
	text-decoration: none;
	font-style: normal;
	font-weight: 500;
	font-size: 15px;
	color: #2c2c2c;
	opacity: .7;
	padding: 10px 17px
}

.slider-big-cards__item,
.slider__item {
	display: inline-flex;
	color: #fff;
	font-size: 30px;
	border-radius: 6px
}

.d-tab,
.homepage-menu-tab {
	padding-bottom: 6px;
	overflow: auto;
	white-space: nowrap;
	overflow-y: hidden
}

.d-tab .c-tabs-nav__link {
	text-decoration: none;
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	color: #2c2c2c;
	opacity: .7;
	padding: 10px 0;
	margin-right: 26px
}

.homepage-menu-tab .c-tabs-nav__link {
	text-decoration: none;
	font-style: normal;
	font-weight: 500 !important;
	font-size: 15px !important;
	color: #9c9c9c;
	opacity: 1 !important;
	padding: 10px 0
}

.homepage-menu-tab .c-tabs-nav__link.is-active {
	color: #2c2c2c;
	opacity: 1 !important
}

.address-tab .c-tabs-nav {
	display: grid !important;
	padding-bottom: 1px
}

#file-container div:hover .close-button,
#switch:hover span:after,
.c-tabs-nav__link.is-active,
.product-hover:hover .hover-icon,
.round input[type=checkbox]:checked+label:after,
.squre input[type=checkbox]:checked+label:after {
	opacity: 1
}

.o-video {
	width: 100%;
	height: 164px;
	position: relative
}

.o-video>iframe {
	width: 100%;
	height: 164px;
	position: absolute;
	border-radius: 4px
}

.img-bg-gradient:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 34%;
	display: inline-block;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 100%)
}

.c-tab__content {
	position: relative;
	animation: .3s ease-in-out both showTab
}

@keyframes showTab {
	from {
		opacity: 0;
		top: 5px
	}

	to {
		opacity: 1;
		top: 0
	}
}

.c-tab-nav-marker {
	min-height: 4px;
	background-color: var(--primary-color);
	position: absolute;
	bottom: -2px;
	transition: .3s ease-out
}

.accordion__des,
.accordion__desc,
.accordion__details {
	transition: max-height .5s;
	max-height: 0;
	overflow: hidden
}

.slider {
	max-width: 900px;
	margin: 0 auto 100px;
	overflow: hidden
}

.slider__item {
	width: 300px;
	height: 280px;
	margin-left: 20px;
	background-color: green;
	align-items: center;
	justify-content: center
}

.slider .slick-list {
	padding: 0 20% 0 0
}

.slider-big-cards {
	margin-bottom: 100px;
	overflow: hidden
}

.slider-big-cards__item {
	width: 160px;
	height: 160px;
	background-color: #f3f3f3;
	margin-left: 20px;
	justify-content: center;
	padding: 40px
}

.swiper-button-next,
.swiper-button-prev {
	height: 55px !important;
	top: 22px !important
}

.search-placeholder input::placeholder {
	font-family: var(--global-font);
	color: #898989 !important;
	font-weight: 400 !important;
	font-style: normal;
	font-size: 14px
}

.bg-opacity {
	background: rgba(255, 255, 255, .9)
}

#file-container div,
.custom-bottom-border,
.header-menu-nav li>a,
.round,
.squre {
	position: relative
}

.round label {
	border: 1px solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	height: 25px;
	position: absolute;
	width: 25px
}

.round label:after {
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	height: 6px;
	left: 6px;
	opacity: 0;
	position: absolute
}

.rounds label {
	border: 1px solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	height: 22px;
	position: absolute;
	width: 22px
}

.rounds label:after {
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	height: 5px;
	left: 5px;
	opacity: 0;
	position: absolute
}

.round input[type=checkbox],
.squre input[type=checkbox] {
	visibility: hidden
}

.round input[type=checkbox]:checked+label {
	border-color: #676867
}

.rounds input[type=checkbox] {
	visibility: hidden !important
}

.round input[type=checkbox]:checked+.bg-custom-white:after,
.rounds input[type=checkbox]:checked+.bg-white:after,
.rounds input[type=checkbox]:checked+label:after {
	opacity: 1 !important
}

.squre label {
	border: 1px solid #dfdfdf;
	border-radius: 4px;
	cursor: pointer;
	position: absolute;
	width: 66px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-weight: 500;
	font-size: 14px;
	color: #2c2c2c
}

.squre input[type=checkbox]:checked+label {
	background-color: #fcca19;
	border-color: #fff
}

.check-disable {
	background-color: #f3f3f3;
	color: #898989 !important
}

.c-check input {
	border: 1px solid #dfdfdf;
	height: 16px;
	width: 16px;
	border-radius: 2px;
	color: #2c2c2c
}

.c-label textarea,
.option-select select:focus {
	border-color: #dfdfdf !important
}

input#discount_code {
	border-width: 0
}

.svg-bg {
	fill: var(--primary-color)
}

input:focus {
	box-shadow: none !important
}

.custom-swiper .next:hover,
.custom-swiper .prev:hover,
.custom-swiper-full .next:hover,
.custom-swiper-full .prev:hover,
.next:hover,
input#cart-select-all,
input.form-checkbox.cart-item-single,
input.form-checkbox.cart-shop {
	color: #2c2c2c !important
}

.arrow-hover:hover,
.bread-hover li a:hover,
.cate-hover li a:hover,
.selected .selected,
.shipping-radio-button-custom [type=radio],
.ui-menu .ui-widget .ui-widget-content .ui-autocomplete .ui-front:hover {
	color: #2c2c2c
}

.process-visit:hover svg {
	right: -35px
}

.process-visit svg {
	transition: right .3s;
	right: -25px
}

.process-goto:hover svg {
	right: -5px !important
}

html[dir=rtl] .process-goto:hover svg {
	right: 5px !important
}

.process-goto svg {
	transition: right .2s !important;
	right: 0 !important
}

.arrow-hover:hover svg,
.custom-bottom-border:before {
	left: 0
}

.arrow-hover svg {
	transition: left .3s;
	left: 8px
}

html[dir=rtl] .arrow-hover:hover svg {
	right: 0
}

html[dir=rtl] .arrow-hover svg {
	transition: right .3s;
	right: 8px
}

.process-hover:hover svg {
	right: 30px
}

.process-hover svg {
	transition: right .3s;
	right: 42px
}

@media only screen and (max-width:1400px) and (min-width:1200px) {
	.process-hover:hover svg {
		right: 20px
	}

	.process-hover svg {
		transition: right .3s;
		right: 40px
	}
}

@media only screen and (max-width:1199px) and (min-width:768px) {
	.process-hover:hover svg {
		right: 10px
	}

	.process-hover svg {
		transition: right .3s;
		right: 20px
	}
}

.process-next:hover svg {
	right: -14px
}

html[dir=rtl] .process-next:hover svg {
	left: -14px;
	right: unset
}

.process-next:hover svg path {
	fill: #2c2c2c
}

.process-next svg {
	transition: right .3s;
	right: -8px
}

html[dir=rtl] .process-next svg {
	transition: left .3s;
	left: -8px;
	right: unset
}

.process-prev:hover svg {
	right: 54px
}

html[dir=rtl] .process-prev:hover svg {
	left: 78px;
	right: unset
}

.process-prev svg {
	transition: right .3s;
	right: 48px
}

html[dir=rtl] .process-prev svg {
	transition: right .3s;
	right: -28px;
	transform: scaleX(-1)
}

.pro-hover:hover svg {
	right: 20px
}

.pro-hover svg {
	transition: right .3s;
	right: 27px
}

.process-hovers:hover svg {
	right: 96px
}

.process-hovers svg {
	transition: right .3s;
	right: 110px
}

.option-select select:focus {
	outline: 0 !important;
	box-shadow: none !important
}

.radio-container-payment {
	font-size: 24px
}

.radio-container-payment label {
	position: relative;
	cursor: pointer;
	padding-right: 32px
}

.radio-container-payment label:last-child {
	padding-right: 0
}

.radio-container-payment label::before {
	content: "";
	border: 1px solid #898989;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: -4px 10px -4px 0;
	border-radius: 50%
}

html[dir=rtl] .radio-container-payment label::before {
	margin-right: 0;
	margin-left: 10px
}

.radio-container-payment label::after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 10px;
	height: 10px;
	background: rgba(34, 34, 34, 0);
	left: 4px;
	top: 10px;
	margin: -4px 10px -4px 0;
	border-radius: 50%;
	transition: .4s
}

html[dir=rtl] .radio-container-payment label::after {
	margin-right: 0;
	margin-left: unset;
	right: 4px;
	left: unset
}

.radio-container-payment input[type=radio]:checked+label::after {
	background: #2c2c2c
}

.address-textarea textarea:focus {
	box-shadow: unset
}

.product-thumbs {
	margin-top: 23px !important;
	transform: initial !important
}

.product-thumbs .swiper-slide img {
	border: 1px solid #dfdfdf;
	border-radius: 4px;
	object-fit: contain;
	cursor: pointer;
	width: 58px !important;
	height: 53px;
	padding: 8px
}

.product-thumbs .swiper-slide-active img,
[type=text]:focus {
	border-color: #2c2c2c
}

.product-slider .swiper-button-next:after,
.product-slider .swiper-button-prev:after {
	font-size: 20px;
	color: #000;
	font-weight: 700
}

.zoom {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
	width: 100%;
	object-fit: contain
}

.anim,
.hover-icon,
.zoom img:hover {
	opacity: 0
}

.zoom img {
	transition: opacity .5s;
	display: block;
	height: 370px;
	object-fit: cover;
	background-color: #fff
}

.swiper-button-next:after,
.swiper-button-prev:after {
	font-size: 0px !important
}

.swiper-button-next {
	right: -12px !important
}

.swiper-button-prev {
	left: -10px !important
}

.slide-wrapper {
	margin-left: calc(-34% - 5px)
}

.arrow-hover-right:hover {
	cursor: pointer;
	color: #2c2c2c
}

.title-text-decoration:hover {
	text-decoration: underline;
	text-decoration-color: var(--primary-color);
	text-decoration-thickness: 2px
}

.arrow-hover-right:hover svg {
	transition: left 3s ease-in;
	left: 5px
}

html[dir=rtl] .arrow-hover-right:hover svg {
	left: unset;
	right: 5px
}

.w-508px {
	width: 508px
}

.auth-active-btn {
	background-color: var(--primary-color)
}

.w-212px {
	width: 212px
}

.w-340 {
	width: 340px
}

.h-240 {
	height: 240px
}

.w-120 {
	width: 120px
}

.w-89 {
	width: 89px
}

.description-product ul li,
.word-custom {
	word-break: break-all
}

.accordion__header::after {
	content: url("./../frontend/assets/img/be-seller/archieve_arrow.svg");
	transform: rotate(0);
	transition: transform .3s;
	text-align: center;
	justify-content: center;
	color: #898989;
	align-items: center
}

.accordion__header--active::after,
.group:hover .group-hover\:-rotate-180 {
	transform: rotate(180deg)
}

.accordion__desc {
	border: #b22222
}

@media only screen and (min-width:769px) and (max-width:1024px) {
	.blog-image-width-height {
		width: 100%;
		height: 100%
	}
}

.w-833 {
	width: 833px
}

.h-152 {
	height: 152px
}

.w-152 {
	width: 152px
}

.require-profile::after {
	content: "*";
	color: #2c2c2c
}

.address-edit rect {
	fill: #fef8e7;
	border-color: #fcca19
}

.address-edit rect:hover {
	fill: #fcca19;
	border-color: #fcca19
}

.select2-results__option--highlighted {
	color: #fff !important;
	background-color: #fcca19 !important
}

.select2.select2-container,
.swiper-slide-img {
	width: 100% !important
}

.select2-selection__rendered {
	line-height: 45px !important
}

.select2-container .select2-selection--single {
	height: 45px !important;
	border: 1px solid #dfdfdf !important;
	border-radius: 2px !important;
	font-weight: 500 !important
}

.select2-container .select2-selection--single:focus {
	border: 1px solid #2c2c2c !important
}

.select2-selection__arrow {
	height: 45px !important
}

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

.accordion__button::after {
	content: url("./../frontend/assets/img/dashboard/setting-arrow.svg");
	transform: rotate(-180deg);
	margin-top: 8px
}

.accordion__button--active::after {
	transform: rotate(0)
}

.help-tip,
.help-tip p {
	transition: .5s cubic-bezier(.55, 0, .1, 1)
}

@media only screen and (min-width:280px) and (max-width:1024px) {
	.accordion__button::after {
		content: url("./../frontend/assets/img/dashboard/small-setting-arrow.svg");
		transform: rotate(-180deg);
		margin-top: 0;
		margin-bottom: 30px
	}
}

.p-42 {
	padding-top: 42px
}

.custom-radio input:checked+.radio-btn {
	border: 1px solid #2c2c2c;
	color: #2c2c2c
}

.custom-radio input:checked+.radio-btn>svg {
	opacity: 1;
	transform: translateX(-50%) scale(1)
}

html[dir=rtl] .custom-radio input:checked+.radio-btn>svg {
	opacity: 1;
	transform: translateX(50%) scaleX(-1)
}

.modal-h-w {
	width: 568px;
	height: 195px
}

.w-417 {
	width: 417px;
	box-shadow: 0 5px 10px -2px;
	margin-right: 70px
}

html[dir=rtl] .w-417 {
	margin-right: unset;
	margin-left: 70px
}

.middle-sidebar-scroll::-webkit-scrollbar {
	display: none
}

.w-190 {
	width: 190px
}

.h-197 {
	height: 197px
}

.w-168 {
	width: 168px
}

.refund-message-box-scroll::-webkit-scrollbar {
	width: 3px
}

.refund-message-box-scroll::-webkit-scrollbar-track {
	border-radius: 10px
}

.refund-message-box-scroll::-webkit-scrollbar-thumb {
	background: #dfdfdf;
	border-radius: 10px
}

.w-572 {
	width: 572px
}

@media only screen and (min-width:280px) and (max-width:768px) {

	.image-width-height,
	.left-side {
		width: 100%;
		height: 154px
	}

	.refund-details {
		width: 100%;
		height: 100%
	}
}

@media only screen and (min-width:1280px) {
	.h-591-w-708 {
		height: 591px;
		width: 708px
	}

	.w-833-h-744 {
		width: 833px !important;
		height: 744px
	}

	.m-290 {
		margin-bottom: -290px
	}
}

.bg-image {
	background-image: url("./../frontend/assets/img/be-seller/seller-bg-img-1.svg")
}

.bg-photo {
	background-image: url("./../frontend/assets/img/be-seller/seller-bg-img-2.svg")
}

.w-580 {
	width: 580px
}

.max-h-0 {
	max-height: 0
}

.w-851 {
	width: 851px
}

.h-521 {
	height: 521px
}

.w-180 {
	width: 180px
}

.w-441 {
	width: 441px
}

.w-216 {
	width: 216px
}

.w-543 {
	width: 543px
}

.w-421-h-376 {
	width: 421px;
	height: 376px
}

.w-215 {
	width: 215px
}

.accordion__title {
	display: flex;
	justify-content: space-between
}

.accordion__title::after {
	content: url("./../frontend/assets/img/be-seller/drop-down-arrow-2.svg");
	transform: rotate(-180deg);
	border: 1px solid #dfdfdf;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	justify-content: center;
	align-items: center
}

.accordion__title--active::after {
	transform: rotate(0);
	background-color: var(--primary-color);
	border-radius: 4px
}

.mx-470 {
	margin-left: 469px;
	margin-right: 469px
}

.style-select select:focus {
	outline: 0;
	border-color: #2c2c2c;
	outline-offset: 0px;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: none;
	--tw-ring-offset-shadow: none;
	--tw-ring-shadow: none;
	box-shadow: none
}

.help-tip:hover,
.pointer,
option:hover {
	cursor: pointer
}

.help-tip:before {
	content: url("./../frontend/assets/img/be-seller/Subtract.svg")
}

.help-tip p {
	visibility: hidden;
	opacity: 0;
	width: 280px;
	transform: scale(.7);
	transform-origin: 100% 0%
}

.help-tip:hover p {
	cursor: default;
	visibility: visible;
	opacity: 1;
	transform: scale(1)
}

.help-tip p:after {
	width: 100%;
	content: ""
}

.custom-bottom-borders:after,
.custom-bottom-borders:before {
	content: "";
	position: absolute;
	width: 0%;
	height: 2px;
	bottom: -9px;
	background: var(--primary-color)
}

.bg-custom-white:after,
.bg-white:after {
	content: "" !important;
	opacity: 0 !important;
	position: absolute !important;
	top: 6px !important;
	transform: rotate(-45deg) !important;
	width: 10px !important
}

.custom-bottom-border:hover:before,
.custom-bottom-borders:hover:before {
	background: var(--primary-color);
	width: 100%;
	transition: width .5s cubic-bezier(.22, .61, .36, 1)
}

.custom-bottom-border:hover:after,
.custom-bottom-borders:hover:after {
	background: 0 0;
	width: 100%;
	transition: none
}

.w-467 {
	width: 467px
}

.h-200 {
	height: 200px
}

.h-420 {
	height: 420px
}

.bg-white:after {
	border: 2px solid #000 !important;
	border-top: none !important;
	border-right: none !important;
	height: 5px !important;
	left: 5px !important
}

.bg-custom-white:after {
	border: 2px solid #000 !important;
	border-top: none !important;
	border-right: none !important;
	height: 6px !important;
	left: 6px !important
}

.header-div {
	border-bottom-left-radius: 20px;
	height: 507px;
	width: 848px;
	animation: .7s linear .5s forwards mymove
}

html[dir=rtl] .header-div {
	border-bottom-right-radius: 20px
}

@keyframes mymove {
	0% {
		width: 0%
	}

	100% {
		width: 100%
	}
}

.w-382-h-491 {
	width: 382px;
	height: 491px
}

.border-animation {
	width: 0;
	position: relative;
	left: 0;
	border-bottom: 1px solid #dfdfdf;
	animation: 1s linear .7s forwards border_anim
}

@keyframes border_anim {
	0% {
		width: 0%
	}

	100% {
		width: 475px
	}
}

@media only screen and (min-width:1920px) {
	.m-365 {
		margin-left: 365px;
		margin-right: 365px
	}

	.margin-top-124 {
		margin-top: 124px
	}

	.-mt-364 {
		margin-top: -364px
	}

	.w-848 {
		width: 848px
	}
}

.-mt-492 {
	margin-top: -492px
}

.card-grow {
	transition: margin-top .2s ease-in-out
}

.card-grow:hover {
	margin-top: -12px;
	box-shadow: 0 25px 60px -29px rgba(0, 0, 0, .22)
}

.cards-grow,
.purple-box {
	transition: margin-top .3s ease-in-out
}

.cards-grow:hover {
	margin-top: -2px;
	box-shadow: 0 25px 60px -29px rgba(255, 204, 0, .22)
}

.purple-box:hover {
	margin-top: -12px;
	box-shadow: 0 25px 60px -29px rgba(151, 71, 255, .22)
}

.custom-select-trigger:after,
.custom-select-trigger:before {
	content: "";
	margin-top: -3px;
	border-right: 1px solid #c7d1d6;
	transition: .35s ease-out
}

@media screen and (min-width:769px) and (max-width:1023px) {
	.header-div {
		height: 400px
	}

	@keyframes border_anim {
		0% {
			width: 0%
		}

		100% {
			width: 100%
		}
	}
}

@media screen and (min-width:1024px) and (max-width:1279px) {
	.header-div {
		height: 400px
	}
}

#shopping_bag {
	transition: box-shadow .1s, transform .1s
}

#sidenav,
#sidenav.active {
	transition: .3s ease-in-out
}

.errors {
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #2c2c2c
}

@media screen and (min-width:280px) and (max-width:768px) {
	.border-animation {
		width: 100%
	}

	@keyframes border_anim {
		0% {
			width: 0%
		}

		100% {
			width: 100%
		}
	}

	.header-div {
		height: 270px
	}

	@keyframes mymove {
		0% {
			width: 0%
		}

		100% {
			width: 80%
		}
	}

	.w-219-h-262 {
		width: 219px;
		height: 262px
	}

	.errors {
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: #2c2c2c
	}

	.leading-21px {
		line-height: 21px
	}
}

@media screen and (min-width:280px) and (max-width:320px) {
	.leading-17px {
		line-height: 17px
	}
}

@media screen and (min-width:1024px) {
	.w-147 {
		width: 147px
	}

	.mt-174 {
		margin-top: 174px
	}

	.mt-288 {
		margin-top: 288px
	}

	.leading-30px {
		line-height: 30px
	}

	.leading-26px {
		line-height: 26px
	}
}

.w-186 {
	width: 186px
}

.item_view-bg_img {
	background-image: url("./../frontend/assets/img/product/drawer.png")
}

.h-60s {
	height: 60%
}

.padding-bottom-150p {
	padding-bottom: 150px
}

.cart-scrollbar::-webkit-scrollbar {
	width: 5px;
	height: 45px
}

.cart-scrollbar::-webkit-scrollbar-thumb {
	background: #dfdfdf;
	border-radius: 76px;
	max-height: 10px
}

.delivery-content {
	border: 1px solid #dfdfdf;
	box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .1);
	border-radius: 4px;
	background-color: #fff;
	position: absolute;
	display: none;
	margin-left: -12px
}

html[dir=rtl] .delivery-content {
	margin-right: -12px;
	margin-left: unset
}

.delivery-scrollbar::-webkit-scrollbar {
	width: 5px;
	height: 5px
}

.delivery-scrollbar::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 76px;
	max-height: 10px
}

select {
	z-index: 999;
	float: left;
	width: 200px
}

.custom-select-wrapper {
	position: relative;
	display: inline-block;
	user-select: none;
	cursor: pointer
}

#accordian ul ul,
#navigation ul ul,
#overlay,
.custom-select-wrapper select,
.more-content span,
[x-cloak] {
	display: none
}

.custom-select {
	position: relative;
	display: inline-block;
	font: 13px/1.5 Roboto, sans-serif
}

.custom-select-trigger {
	position: relative;
	display: block;
	min-width: 130px;
	padding: 0 104px 0 25px;
	font-weight: 100;
	color: #6e7c83;
	line-height: 50px;
	background-color: #fff;
	border-radius: 3px;
	cursor: pointer;
	transition: .2s ease-in-out
}

.custom-select-trigger:hover {
	-webkit-box-shadow: 0 10px 50px 0 rgba(43, 111, 246, .1);
	box-shadow: 0 10px 50px 0 rgba(43, 111, 246, .1)
}

.custom-select-trigger:before {
	position: absolute;
	display: block;
	width: 1px;
	height: 50px;
	top: 3px;
	right: 50px;
	transform-origin: 50% 0
}

.custom-select-trigger:after {
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	top: 50%;
	right: 20px;
	border-bottom: 1px solid #c7d1d6;
	transform: rotate(45deg) translateY(-50%);
	transform-origin: 50% 0
}

.custom-select.opened .custom-select-trigger:after {
	margin-top: 3px;
	transform: rotate(-135deg) translateY(-50%)
}

.custom-options {
	position: absolute;
	display: block;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	margin: 10px 0;
	border-radius: 5px;
	box-sizing: border-box;
	background: #fff;
	transition: .2s ease-in-out;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-15px);
	border: 0
}

.custom-select.opened .custom-options {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: translateY(-8px);
	-webkit-box-shadow: 0 10px 50px 0 rgba(43, 111, 246, .1);
	box-shadow: 0 10px 50px 0 rgba(43, 111, 246, .1)
}

.box-shadow-dropdown,
.notific-contnet {
	box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .1)
}

.option-hover:before {
	background: #f9f9f9
}

.custom-option {
	position: relative;
	display: block;
	padding: 0 22px;
	font: 600 13px/47px Roboto, sans-serif;
	color: #b5b5b5;
	cursor: pointer;
	transition: 50ms ease-in-out
}

.custom-border li a,
.radio-star,
.radio-stars {
	display: inline-block
}

.custom-option:first-of-type {
	border-radius: 5px 5px 0 0
}

.custom-option:last-of-type {
	border-bottom: 0;
	border-radius: 0 0 5px 5px
}

.custom-option.selection,
.custom-option:hover {
	color: #fff;
	background-color: #49e2bb
}

.show-list li {
	padding: unset !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding-left: unset !important;
	cursor: pointer;
	text-align: center !important
}

.showing-width {
	width: 39px !important
}

.height-437p {
	height: 437px
}

.tran {
	transition: .7s ease-in-out !important
}

.radio-stars {
	position: relative;
	unicode-bidi: bidi-override;
	direction: rtl;
	counter-reset: star-rating;
	font-size: 0
}

.radio-star::before,
.radio-stars:hover .radio-star::before,
.radio-stars:hover .radio-star:hover::before,
.radio-stars:hover .radio-star:hover~.radio-star::before,
input:checked~.radio-star::before {
	content: "★"
}

.radio-star {
	overflow: hidden;
	cursor: pointer;
	width: 35px;
	direction: ltr;
	color: rgba(0, 0, 0, .25);
	font-size: 29px;
	white-space: nowrap
}

.radio-star:hover,
.radio-star:hover~.radio-star,
input:checked~.radio-star {
	color: var(--primary-color)
}

input:checked~.radio-star {
	counter-increment: star-rating
}

.radio-star-total {
	pointer-events: none;
	direction: ltr;
	unicode-bidi: bidi-override;
	position: absolute;
	right: -62px;
	bottom: .5em;
	color: #898989;
	font-size: 15px
}

.lang-dropdown,
.msg-color span {
	color: unset !important
}

.radio-star-total::before {
	content: counter(star-rating) ""
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: -1px;
	padding: 0;
	clip: rect(0, 0, 0, 0);
	border: 0
}

.lang-dropdown,
.swiper-thumbsnail {
	position: relative !important
}

@media only screen and (max-width:1160px) {
	.radio-star-total {
		right: -62px
	}

	.radio-star {
		width: 25px;
		font-size: 29px
	}
}

@media only screen and (max-width:960px) {
	.radio-star-total {
		right: -52px;
		font-size: 12px
	}

	.radio-star {
		width: 18px;
		font-size: 22px
	}
}

option:active,
option:checked,
option:focus,
option:hover {
	background: linear-gradient(#ffffd4, #ffffd4);
	position: relative
}

select:focus>option:checked:before {
	color: brown;
	position: absolute;
	content: attr(data-content)
}

option {
	padding: 5px 10px
}

.category-hover,
.category-list-decoration,
.see-all {
	list-style: none
}

.main {
	display: block;
	width: 100%;
	min-height: 100vh
}

.group-category li>ul {
	transform: translatex(100%) scale(0)
}

.group-category li:hover>ul {
	transform: translatex(101%) scale(1)
}

html[dir=rtl] .group-category li:hover>ul {
	transform: translatex(-101%) scale(1)
}

.group:hover .group-hover\:scale-100 {
	transform: scale(1)
}

.scale-0 {
	transform: scale(0)
}

.ul-mr {
	margin-right: 1px;
	margin-top: -1px
}

.custom-bottom-border:after,
.custom-bottom-border:before {
	content: "";
	position: absolute;
	width: 0%;
	height: 2px;
	bottom: -2px;
	background: var(--primary-color)
}

html[dir=rtl] .custom-bottom-border:before {
	left: unset;
	right: 0
}

.custom-bottom-border:after {
	right: 0;
	background: var(--primary-color)
}

html[dir=rtl].custom-bottom-border:after {
	left: 0;
	right: unset
}

.custom-border li:not(:last-child) .first-list:after {
	content: " ";
	position: relative;
	border-left: 1px solid #dfdfdf;
	top: 0;
	right: -18px;
	height: 100%;
	margin-top: auto;
	margin-bottom: auto
}

html[dir=rtl] .custom-border li:not(:last-child) .first-list:after {
	right: unset;
	border-right: 1px solid #dfdfdf;
	border-left: unset;
	left: -18px
}

#sidenav {
	height: 100vh;
	max-width: 70vw;
	min-width: 232px;
	transform: translate(-150%, 0);
	-webkit-transform: translate(-150%, 0);
	-ms-transform: translate(-150%, 0)
}

#sidenav.active {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	box-shadow: 0 4px 6px rgba(0, 0, 0, .4)
}

#overlay {
	width: 100vw;
	height: 100vh;
	animation: 5s fade;
	-webkit-animation: .5s fade;
	-moz-animation: .5s fade;
	-o-animation: .5s fade
}

@-moz-keyframes fade {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-o-keyframes fade {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.burger {
	height: 16px
}

.burger span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 3px
}

.close {
	width: 23px;
	height: 23px
}

.cross.left {
	transform: rotate(45deg)
}

.cross.right {
	transform: rotate(-45deg)
}

.bg-darken-4 {
	background-color: rgba(0, 0, 0, .5)
}

#accordian,
#navigation {
	overflow-y: auto;
	overflow-x: hidden
}

#accordian h4,
#accordian ul ul li a {
	text-decoration: none;
	font-size: 13px;
	line-height: 37px;
	display: flex;
	padding: 0 15px;
	transition: .15s;
	position: relative;
	font-family: var(--global-font)
}

#accordian ul ul ul {
	margin-left: 15px;
	border-left: 1px dotted rgba(0, 0, 0, .5)
}

#accordian a:not(:only-child):after {
	content: "\f104";
	font-family: fontawesome;
	position: absolute;
	right: 10px;
	top: 0;
	font-size: 14px
}

#accordian .active>a:not(:only-child):after {
	content: "\f107"
}

.rotate,
.rotates {
	-moz-transition: .2s linear;
	-webkit-transition: .2s linear;
	transition: .2s linear
}

.down {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}

html[dir=rtl] .down {
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg)
}

@media only screen and (min-width:1539px) and (max-width:1679px) {
	.other-slider-images {
		height: calc(var(--slider-height) * .9) !important
	}

	.template-title-y {
		font-size: calc(var(--sliderSubTitle-fontSize) * .7) !important
	}

	.template-title-z {
		font-size: calc(var(--sliderDes-fontSize) * .7) !important
	}

	.template-title-x {
		font-size: calc(var(--sliderTitle-fontSize) * .7) !important
	}
}

@media only screen and (min-width:1400px) and (max-width:1540px) {
	.other-slider-images {
		height: calc(var(--slider-height) * .8) !important
	}
}

@media only screen and (min-width:1025px) and (max-width:1399px) {
	.other-slider-images {
		height: calc(var(--slider-height) * .7) !important
	}

	.template-title-y {
		font-size: calc(var(--sliderSubTitle-fontSize) * .7) !important
	}

	.template-title-z {
		font-size: calc(var(--sliderDes-fontSize) * .7) !important
	}

	.template-title-x {
		font-size: calc(var(--sliderTitle-fontSize) * .7) !important
	}
}

@media only screen and (max-width:1025px) and (min-width:769px) {
	.other-slider-images {
		height: calc(var(--slider-height) * .7) !important
	}
}

@media only screen and (max-width:768px) and (min-width:639px) {
	.other-slider-images {
		height: calc(var(--slider-height) * .5) !important
	}
}

@media only screen and (max-width:640px) and (min-width:481px) {
	.other-slider-images {
		height: calc(var(--slider-height) * .4) !important
	}
}

@media only screen and (max-width:480px) {
	.other-slider-images {
		height: calc(var(--slider-height) * .4) !important
	}
}

@media only screen and (min-width:768px) and (max-width:1025px) {
	.template-title-y {
		font-size: calc(var(--sliderSubTitle-fontSize) * .5) !important
	}

	.template-title-z {
		font-size: calc(var(--sliderDes-fontSize) * .5) !important
	}

	.template-title-x {
		font-size: calc(var(--sliderTitle-fontSize) * .5) !important
	}
}

@media only screen and (max-width:280px) {
	.c-flex {
		flex-direction: column
	}
}

@media only screen and (max-width:767px) {
	.radio-star-total {
		right: -64px;
		font-size: 16px
	}

	.radio-star {
		width: 29px;
		font-size: 29px
	}

	.modal-h::-webkit-scrollbar {
		display: none;
		scrollbar-width: none
	}

	.modal-h {
		width: 335px;
		overflow: auto;
		max-height: 100vh;
		margin-left: auto;
		margin-right: auto
	}

	.active-border,
	.text-y-title {
		font-size: 18px !important
	}

	.vendor-info {
		display: none
	}

	.zoom img {
		height: 337px
	}

	.d-tab .c-tabs-nav__link {
		font-size: 16px
	}

	.rating-stars ul>li.star>i.fa {
		font-size: 15px !important
	}

	.process-visit:hover svg {
		right: -27px
	}

	.process-visit svg {
		transition: right .3s;
		right: -17px
	}

	.process-hover:hover svg {
		right: 56px
	}

	.process-hover svg {
		transition: right .3s;
		right: 58px
	}

	.text-x-title {
		font-size: 12px !important
	}

	.text-z-title {
		font-size: 14px !important
	}

	.hero-slide-img,
	.slideshow-container {
		height: 180px !important
	}

	.bold-title {
		line-height: 23px
	}

	.bottom-title {
		line-height: 17px !important
	}

	.zoom .zm-img {
		height: 355px
	}
}

@media only screen and (min-width:280px) and (max-width:640px) {
	.zoom .zm-img {
		height: 186px !important
	}
}

.filter-dropdown {
	width: max-content !important
}

div#swal2-html-container {
	margin: 16px -2px
}

.lang-p {
	padding: 0 !important
}

.lang-dropdown {
	background-color: unset !important;
	height: unset !important;
	width: auto !important
}

.lang-dropdown .dropdown-menu li {
	padding: 2px 10px 2px 20px !important
}

.lang-dropdown .dropdown-menu {
	width: 130px !important
}

.swiper-slidee {
	width: 53px !important
}

.rotated-view {
	transform: rotate(-180deg)
}

.zoom .zm-img {
	height: 355px
}

#filter-nav {
	transform: translateX(100%);
	transition: transform .3s linear
}

#filter-nav.act {
	transform: translateX(0)
}

.hover_variable:hover {
	color: var(--textHoverColor) !important;
	background-color: var(--bgHoverColor) !important
}

.reset-password-anim {
	display: flex;
	justify-content: center
}

.reset-password-anim .animation {
	display: block;
	color: var(--primary-color);
	display: flex;
	justify-content: center
}

.reset-password-anim .animation .circle {
	stroke-dasharray: 76;
	stroke-dashoffset: 76;
	-webkit-animation: 1s forwards draw;
	animation: 1s forwards draw
}

.reset-password-anim .animation .tick {
	color: #2c2c2c;
	stroke-dasharray: 18;
	stroke-dashoffset: 18;
	-webkit-animation: 1s 1s forwards draw;
	animation: 1s 1s forwards draw
}

@-webkit-keyframes draw {
	to {
		stroke-dashoffset: 0
	}
}

@keyframes draw {
	to {
		stroke-dashoffset: 0
	}
}

.active-vendor:before {
	background: var(--primary-color);
	width: 100%
}

.color_switch_borders:hover {
	border: 1px solid var(--primary-color)
}

.blockUI.blockOverlay {
	background: #fff !important;
	opacity: .8 !important
}

.rounded.bg-white.dark\:bg-gray-2.w-full.border.checked-loader {
	z-index: 0
}

.delete-button-tooltip .delete-button-tooltiptext {
	visibility: hidden;
	width: 200px;
	text-align: center;
	right: 0;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 150%
}

.delete-button-tooltip:hover .delete-button-tooltiptext {
	visibility: visible;
	transition: .3s cubic-bezier(.55, 0, .1, 1)
}

.invisible-list li {
	font-size: 14px
}

.invisible-list li:before {
	content: "\2022";
	font-size: 35px;
	line-height: 28px;
	vertical-align: middle;
	margin-right: 10px
}

.search-name::placeholder {
	color: #898989
}

@media screen and (min-width:1920px) {
	.header-searchbar-margin {
		margin-left: 25px
	}
}

@media screen and (min-width:1367px) and (max-width:1600px) {
	.header-searchbar-margin {
		margin-left: 96px
	}
}

@media screen and (max-width:1366px) {
	.header-searchbar-margin {
		margin-left: 90px
	}
}

@media screen and (max-width:800px) {
	.header-searchbar-margin {
		margin-left: 30px
	}
}

@media screen and (max-width:1024px) {
	.header-searchbar-margin {
		margin-left: 60px
	}
}

@media screen and (max-width:768px) {
	.header-searchbar-margin {
		margin-left: 0
	}
}

.blog-page-description ol,
.blog-page-description ul {
	list-style: revert
}

.blog-page-description blockquote {
	border-left: .25rem solid #eaeaea;
	padding: .5rem 1rem;
	font-size: 1.25rem
}

.blog-page-description h1,
.blog-page-description h2,
.blog-page-description h3,
.blog-page-description h4,
.blog-page-description h5,
.blog-page-description h6,
.blog-page-description p {
	font-size: revert;
	font-weight: revert;
	margin: revert
}

.blog-page-description table {
	width: 100%;
	text-align: center
}

.blog-page-description td,
.blog-page-description th {
	padding: 10px;
	border: 1px solid #dee2e6
}

@media screen and (min-width:1520px) {
	.h-85-percentage {
		height: 85% !important
	}
}

.dashed-border-left {
	border-left: 2px dashed #c7c7c7 !important
}

.animate {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

.fadeInRight,
html[dir=ltr] .LtrfadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}

html[dir=rtl] .RtlfadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft
}

#switch {
	height: 40px;
	line-height: 40px;
	position: relative;
	overflow: hidden;
	transition: .4s
}

#switch span {
	position: relative;
	top: 0;
	transition: .4s
}

#switch span:after {
	content: url(../frontend/assets/img/icon/arrow-btn.png);
	display: block;
	opacity: 0;
	transition: .4s
}

#switch:hover {
	border-color: #a49a87
}

#switch:hover:before {
	color: #a49a87
}

#switch:hover span {
	top: -40px
}

@media screen and (min-width:1366px) and (max-width:1600px) {
	.margin-left-260 {
		margin-left: 260px
	}
}

.gallery-thumbs .swiper-slide-thumb-active,
.gallery-thumbsV .swiper-slide-thumb-active {
	border: 1px solid #2c2c2c;
	border-radius: 4px
}

.swiper-slide-thumbs {
	border: 1px solid #dfdfdf;
	border-radius: 4px;
	height: 48px !important
}

.product-slider {
	width: 88% !important
}

.filter-anim {
	-webkit-animation: .5s forwards slide-down;
	animation: .5s forwards slide-down
}

@-webkit-keyframes slide-down {
	from {
		opacity: 0;
		transform: translateY(-50px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes slide-down {
	from {
		opacity: 0;
		transform: translateY(-50px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.ui-menu .ui-menu-item:first-child {
	color: #898989 !important;
	font-size: 12px;
	pointer-events: none
}

.header-menu-nav li ul li,
.header-menu-nav li ul li ul li .header-menu-nav li ul li ul li ul li,
.ui-menu .ui-menu-item:hover {
	color: #898989
}

.ui-menu .ui-menu-item:first-child:hover {
	color: #898989 !important;
	cursor: auto
}

.ui-state-active:hover {
	color: inherit !important
}

.ui-menu-item {
	padding-left: 15px !important
}

@media only screen and (min-width:640px) {
	.width-93-percentage {
		width: 93%
	}
}

.quickview-scrollbar::-webkit-scrollbar {
	width: 4px
}

.quickview-scrollbar::-webkit-scrollbar-track {
	background: #f3f3f3
}

.quickview-scrollbar::-webkit-scrollbar-thumb {
	background-color: #fcca19;
	border-radius: 6px
}

.grows img {
	transition: .4s ease-in-out
}

.grows img:hover {
	transform: scale(1.5)
}

html[dir=rtl] .grows img:hover {
	transform: scale(-1.5, 1.5)
}

.nav-wrap {
	overflow-y: auto;
	white-space: normal;
	scrollbar-width: thin
}

.header-menu-nav {
	display: flex
}

.header-menu-nav li {
	display: block;
	text-align: left
}

html[dir=rtl] .header-menu-nav li {
	text-align: right
}

.header-menu-nav li:focus,
.header-menu-nav li:hover,
.header-menu-nav>li>a:focus,
.header-menu-nav>li>a:hover {
	z-index: 5
}

.first-list {
	display: block;
	margin: 7px 10px 20px;
	text-decoration: none;
	position: relative
}

.first-dropdown-menu {
	display: block;
	text-decoration: none;
	position: relative;
	width: 200px
}

.box-shadow-dropdown {
	border-radius: 0 0 4px 4px;
	border: 1px solid #dfdfdf
}

html[dir=rtl] .error-status-message,
html[dir=rtl] .pass-status-svg,
html[dir=rtl] .status-message-svg {
	border-right-width: 0 !important;
	border-left-width: 1px !important;
	padding-left: 12px !important
}

.first-dropdown {
	position: absolute;
	z-index: 1;
	left: -999em;
	transition: .2s ease-in-out;
	top: 0;
	opacity: 0;
	margin-left: -5px
}

html[dir=rtl] .first-dropdown {
	right: -999em;
	left: unset;
	transition: .2s ease-in-out;
	margin-right: -5px;
	margin-left: unset
}

.first-dropdown-li:hover>.first-dropdown {
	left: auto;
	top: auto;
	opacity: 1
}

html[dir=rtl] .first-dropdown-li:hover>.first-dropdown {
	right: auto;
	left: unset
}

.child-dropdown {
	display: none;
	position: absolute;
	top: -1px;
	float: left;
	padding: 0;
	margin-left: 100%
}

.line-clamp,
.line-clamp-double,
.line-clamp-single {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical
}

html[dir=rtl] .child-dropdown {
	float: right;
	margin-right: 100%;
	margin-left: unset
}

.first-dropdown li {
	width: 200px;
	float: none;
	display: list-item;
	position: relative
}

.header-menu-nav ul li:hover>ul {
	display: inherit
}

.header-menu-nav li a:first-child:not(:last-child) {
	margin-right: 20px
}

html[dir=rtl] .header-menu-nav li a:first-child:not(:last-child) {
	margin-left: 20px;
	margin-right: 7px
}

.header-menu-nav ul.dropdown {
	left: -999em;
	opacity: 0
}

html[dir=rtl] .header-menu-nav ul.dropdown {
	right: -999em;
	left: unset
}

.nav-wrap::-webkit-scrollbar {
	height: 4px
}

.nav-wrap::-webkit-scrollbar-thumb {
	background-color: #dfdfdf;
	border-radius: 6px
}

.menuss-hover:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color) !important;
	color: #2c2c2c !important;
	margin-left: 7px;
	transition: 120ms ease-in-out
}

html[dir=rtl] .menuss-hover:hover {
	margin-right: 7px;
	transition: 120ms ease-in-out;
	margin-left: unset
}

.header-menu-nav li ul li ul li:hover .header-menu-nav li ul li ul li ul li:hover,
.header-menu-nav li ul li:hover {
	color: #2c2c2c;
	background: var(--primary-color);
	transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	-webkit-transition: .35s ease-in-out
}

.active-border-bottom {
	border-bottom: 2px solid var(--primary-color);
	margin-bottom: 18px
}

.custom-swiper .swiper-button-next,
.custom-swiper .swiper-button-prev {
	cursor: pointer;
	color: #919191 !important;
	top: 93% !important;
	right: 20px !important;
	width: 28.13px !important;
	height: 28.36px !important;
	margin-top: -23px !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	transition: .1s;
	user-select: none;
	z-index: 9999 !important;
	left: unset !important
}

html[dir=rtl] .custom-swiper .swiper-button-next,
html[dir=rtl] .custom-swiper .swiper-button-prev {
	left: 20px !important;
	right: unset !important
}

.custom-swiper .swiper-button-prev {
	right: 56px !important
}

html[dir=rtl] .custom-swiper .swiper-button-prev {
	left: 56px !important;
	right: unset !important
}

.custom-swiper .swiper-pagination-bullet-active,
.custom-swiper-full .swiper-pagination-bullet-active {
	width: 30px !important;
	background: var(--primary-color) !important;
	border-radius: 53px !important;
	height: 8px !important
}

.custom-swiper .swiper-pagination-bullet,
.custom-swiper-full .swiper-pagination-bullet {
	cursor: pointer;
	width: 7px;
	height: 7px;
	margin: 0 2px;
	background: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color .6s;
	z-index: 9999
}

.swiper-slide-active .sliders-animation[data-animation=fadeIn] {
	animation-name: fadeIn
}

.swiper-slide-active .sliders-animation[data-animation=fadeInDown] {
	animation-name: fadeInDown
}

.swiper-slide-active .sliders-animation[data-animation=fadeInLeft] {
	animation-name: fadeInLeft
}

.swiper-slide-active .sliders-animation[data-animation=fadeInRight] {
	animation-name: fadeInRight
}

.swiper-slide-active .sliders-animation[data-animation=fadeInUp] {
	animation-name: fadeInUp
}

.swiper-slide-active .sliders-animation[data-animation=flip] {
	animation-name: flip
}

.swiper-slide-active .sliders-animation[data-animation=flipInX] {
	animation-name: flipInX
}

.swiper-slide-active .sliders-animation[data-animation=flipInY] {
	animation-name: flipInY
}

.swiper-slide-active .sliders-animation[data-animation=slideInUp] {
	animation-name: slideInUp
}

.swiper-slide-active .sliders-animation[data-animation=slideInDown] {
	animation-name: slideInDown
}

.swiper-slide-active .sliders-animation[data-animation=slideInLeft] {
	animation-name: slideInLeft
}

.swiper-slide-active .sliders-animation[data-animation=slideInRight] {
	animation-name: slideInRight
}

.swiper-slide-active .sliders-animation[data-animation=rollIn] {
	animation-name: rollIn
}

.primary-text-color,
.primary-text-hover:hover {
	color: var(--primary-color) !important
}

.primary-bg-color,
.primary-bg-hover:hover {
	background-color: var(--primary-color) !important
}

.primary-border-color,
.primary-border-hover:hover {
	border-color: var(--primary-color) !important
}

.semi-primary-bg-color {
	background-color: var(--semi-primary-color) !important
}

.line-clamp,
.line-clamp-double {
	-webkit-line-clamp: 2
}

.line-clamp-single {
	-webkit-line-clamp: 1
}

.z-index-negative {
	z-index: -9999
}

.custom-swiper-full .swiper-button-next,
.custom-swiper-full .swiper-button-prev {
	cursor: pointer;
	color: #919191 !important;
	top: 93% !important;
	right: 375px !important;
	width: 28.13px !important;
	height: 28.36px !important;
	margin-top: -23px !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	transition: .1s;
	user-select: none;
	z-index: 9999 !important;
	left: unset !important
}

.custom-swiper-full .swiper-button-prev {
	right: 409px !important
}

@media only screen and (min-width:1536px) and (max-width:1919px) {

	.custom-swiper-full .swiper-button-next,
	.custom-swiper-full .swiper-button-prev {
		right: 256px !important
	}

	.custom-swiper-full .swiper-button-prev {
		right: 292px !important
	}
}

@media only screen and (min-width:1280px) and (max-width:1535px) {

	.custom-swiper-full .swiper-button-next,
	.custom-swiper-full .swiper-button-prev {
		right: 127px !important
	}

	.custom-swiper-full .swiper-button-prev {
		right: 163px !important
	}
}

@media only screen and (max-width:1279px) {

	.custom-swiper-full .swiper-button-next,
	.custom-swiper-full .swiper-button-prev {
		right: 20px !important
	}

	.custom-swiper-full .swiper-button-prev {
		right: 56px !important
	}
}

.h-16p {
	height: 16px !important
}

.categories-image {
	background: linear-gradient(to right, #fdfdfd 21.44%, rgba(223, 223, 223, 0) 70.79%) no-repeat, url("./../frontend/assets/img/notification/banner.png") no-repeat
}

.rotates.down {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	margin-top: -5px;
	margin-left: 10px
}

.iconbox-image-icons {
	height: 60px;
	width: 100px;
	object-fit: contain
}

html[dir=rtl].header-margin-right {
	margin-right: 0;
	margin-left: unset
}

@media only screen and (min-width:768px) and (max-width:1023px) {
	html[dir=rtl].header-margin-right {
		margin-right: 20px;
		margin-left: unset
	}
}

@media only screen and (min-width:1024px) {
	html[dir=rtl].header-margin-right {
		margin-right: 0;
		margin-left: unset
	}
}

.height-63px {
	height: 63px
}

html[dir=rtl] .margin-right {
	margin-right: 20px;
	margin-left: unset
}

html[dir=rtl] .hero-slide-img,
html[dir=rtl] .other-slider-images {
	transform: scaleX(-1);
	z-index: -1
}

html[dir=rtl] .status-message {
	margin-right: 49px !important;
	margin-left: unset !important
}

html[dir=rtl] .status-message-svg {
	padding-right: 6px !important;
	right: 4px !important;
	left: unset !important
}

html[dir=rtl] .error-status-message {
	margin-right: 4px !important;
	margin-left: unset !important;
	padding-right: unset !important
}

html[dir=rtl] .error-message {
	margin-right: 16px !important;
	margin-left: unset !important
}

html[dir=rtl] .pass-status-mes {
	margin-right: 44px !important;
	margin-left: unset !important
}

html[dir=rtl] .pass-status-svg {
	right: 12px !important;
	left: unset !important;
	padding-right: 2px !important
}

@-webkit-keyframes dot-keyframes {

	0%,
	100% {
		opacity: .4;
		transform: scale(1, 1)
	}

	50% {
		opacity: 1;
		transform: scale(1.2, 1.2)
	}
}

@keyframes dot-keyframes {

	0%,
	100% {
		opacity: .4;
		transform: scale(1, 1)
	}

	50% {
		opacity: 1;
		transform: scale(1.2, 1.2)
	}
}

.loading-dots {
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px
}

.loading-dots--dot {
	-webkit-animation: 1.5s ease-in-out infinite dot-keyframes;
	animation: 1.5s ease-in-out infinite dot-keyframes;
	background-color: #bbb9b9;
	border-radius: 10px;
	display: inline-block;
	height: 8px;
	width: 8px
}

.loading-dots--dot:nth-child(2) {
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
	height: 7px;
	width: 7px
}

.loading-dots--dot:nth-child(3) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	height: 5px;
	width: 5px
}

#category_suggestion_list li:hover,
#popular_suggestions_list li a:hover,
#product_search_list li:hover,
#shop_search_list li:hover {
	background-color: #f0f0f079;
	transition: .3s
}

.notific-contnet {
	display: none;
	border-radius: 4px;
	border: 1px solid #ededed;
	background: #fff
}

.select2-container--default .selection .select2-selection--single .select2-selection__arrow b {
	border: none;
	content: url('./../frontend/assets/img/dashboard/small-setting-arrow.svg');
	display: inline-block;
	width: 10px;
	height: 10px;
	position: relative;
	top: 9px;
	left: 5px
}

.day-sorting .select2-container {
	width: 140px !important;
	border-radius: 4px !important
}

.select2-results__option {
	font-size: 14px !important
}

.gender-container .select2-container,
.set-dial .iti--inline-dropdown {
	margin-top: 6px
}

.file-container {
	padding-top: 12px
}

.close-button {
	background: rgba(20, 20, 20, .6);
	width: 80px;
	height: 80px;
	top: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	border-radius: 4px;
	transition: .3s ease-in-out;
	margin-top: 12px
}

.sidebar-scrollbar::-webkit-scrollbar {
	width: 5px;
	height: 5px
}

.sidebar-scrollbar::-webkit-scrollbar-thumb {
	background: rgba(137, 137, 137, .5);
	border-radius: 76px;
	max-height: 10px
}

.z-99999 {
	z-index: 999999
}

.modal-box-shadow {
	box-shadow: 0 24px 40px -10px rgba(20, 20, 20, .15)
}

.customer-table tbody tr:nth-child(odd),
.order-table:nth-of-type(odd) {
	background-color: #f3f3f3
}

.sidebar-nav::before {
	content: "";
	position: absolute;
	height: 100%;
	top: 0;
	left: 100%
}

@media only screen and (min-width:768px) {
	.custom-border::-webkit-scrollbar {
		height: 4px !important
	}

	.custom-border::-webkit-scrollbar-track {
		background-color: #ebebeb
	}

	.custom-border::-webkit-scrollbar-thumb {
		background: #bbb
	}

	.m-unset {
		margin: unset
	}

	html[dir=rtl] .pass-status-meg,
	html[dir=rtl] .status-message {
		margin-right: 52px !important;
		margin-left: unset !important
	}

	html[dir=rtl] .status-message-svg {
		right: 10px !important;
		left: unset !important
	}

	html[dir=rtl] .error-status-message {
		margin-right: 10px !important;
		margin-left: unset !important
	}

	html[dir=rtl] .pass-status-svg {
		padding-right: 6px !important
	}

	#sidenavbar {
		transition: .4s ease-in-out
	}
}

@media only screen and (max-width:767px) {
	#sidenavbar {
		height: 100vh;
		max-width: 70vw;
		min-width: 232px;
		transition: .3s ease-in-out;
		transform: translate(-150%, 0);
		-webkit-transform: translate(-150%, 0);
		-ms-transform: translate(-150%, 0)
	}

	#sidenavbar.active {
		transition: .3s ease-in-out;
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		box-shadow: 0 4px 6px rgba(0, 0, 0, .4)
	}

	#overlay {
		width: 100vw;
		height: 100vh;
		display: none;
		animation: 5s fade;
		-webkit-animation: .5s fade;
		-moz-animation: .5s fade;
		-o-animation: .5s fade
	}

	#overlay.active {
		display: block
	}

	@keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	@-moz-keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	@-webkit-keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	@-o-keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	.sidebar-nav {
		position: fixed !important
	}
}

textarea:focus {
	border-color: #fff !important;
	box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff !important
}


/* Custom CSs By Aditya */

.first-list {
    display: block;
    margin: 7px 15px 20px !important;
    text-decoration: none;
    position: relative;
}

    .category-slider-wrapper {
        position: relative;
    }

    .categorySwiper {
        padding: 0 35px;
        overflow: hidden;
    }

    .categorySwiper .swiper-wrapper {
        align-items: stretch;
    }

    .categorySwiper .swiper-slide {
        height: auto;
    }

    /* CARD */
    .category-card {
        text-align: center;
    }

    /* IMAGE BOX */
.category-image-wrapper {
    background: #f5efe7;
    border-radius: 14px;
    overflow: hidden;
    height: 195px;
    position: relative;
    transition: .3s ease;
}

/* IMAGE */
.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s ease;
    display: block;
}

.category-card:hover .category-image {
    transform: scale(1.08);
}

    /* TITLE */
    .category-title {
        font-size: 14px;
        font-weight: 600;
        color: #111;
        margin-top: 14px;
        line-height: 2.4;
    }