/* Copyricht to Leroy Cochlovius */

/* Define color variables */
:root {
	/* Body and container colors */
	--html-background-color: #f9f9f9;
	--body-background-color: #f9f9f9;
	--body-background-color-accent: #dfdfdf;
	--body-background-color-accent-border: #d1d1d1;
	--container-background-color: #f3f3f3;
	--text-color-dark: #1f1f1e;
	--product-filter-background-color: #e9e9e9;
	--modal-background-color: #000000b3;

	/* Top bar colors */
	--topbarinfo-background-color: #c6429c;
	--navbar-background-color: #ffffff;
	--navbar-mb-color: #a85291;
	--navbar-mb-color-hover: #b45397;
	--navbar-mb-color-active: #964b81;
	--navbar-border-background-color: #fbd3e6;
	--navbar-button-color: #c6429c;
	--navbar-button-hover-color: #d6458d;
	--navbar-button-active-color: #bf4090;
	--navbar-text-color: #141414;
	--dropdown-link-hover-background-color: #f0f0f0;
	--dropdown-link-active-background-color: #e4e4e4;
	--dropdown-shadow-background-color: #2424242d;

	/* Footer colors */

	/* Tone 1: Green colors */
	--T1-normal-color-accent: #673d61;
	--T1-normal-color: #c6429c;
	--T1-dark-color: #3a2235;
	--T1-light-color: #543149;
	--T1-hover-color: #4e2d45;
	--T1-active-color: #3d2336;
	--T1-focus-color: #3d232d93;

	/* Tone 2:  Yellow colors */
	--T2-normal-color: #faa1e5;
	--T2-vibrant-color: #d645a8;
	--T2-dark-color: #d7abcf;
	--T2-light-color: #fae7f6;
	--T2-hover-color: #fbd3f4;
	--T2-active-color: #f3ceea;
	--T2-focus-color: #bf40b263;

	/* Alt colors */
	--white-color: #ffffff;
	--white-color-accent: #f5f4f4;
	--light-gray-color: #dadada;
	--light-gray-color-accent: #e2e1e1;
	--gray-color: #8e8a8a;
	--gray-color-shadow: #c2c0c06d;
	--dark-gray-color: #403f3f;
	--light-black-color: #222121;
	--black-color: #1b1a1a;
	--dark-black-color: #000000;
	--dark-red: #5f2323;
	--red: #c41f1f;

	/* Cart bubble */
	--cart-bubble-background-color: #f03d3d;

	/* Succes message */
	--succesmessage-background-color: #72dd52;
	--succesmessage-border-color: #5bc03c;

	/* Error message */
	--cartmessage-background-color: #ffbebe;
	--cartmessage-text-color: #723535;
	--text-color-red-button: #ac1717;
	--text-color-red-button-active: #991212;
	--text-color-red-button-focus: #a807077a;
}

* {
	box-sizing: border-box;
}

html {
	font-family: Arial;
	font-size: 1em;
	width: 100%;
	height: auto;
	background-color: var(--html-background-color);
	color: var(--text-color-dark);
	scroll-behavior: smooth;
}

body {
	margin: auto;
	width: 100%;
	height: auto;
	background-color: var(--body-background-color);
	color: var(--text-color-dark);
}

.container {
	margin: auto;
	width: 1295px;
	height: auto;
	color: var(--text-color-dark);
    padding: 12px;
}

.disable-by-responsive {
	display: block;
}

.enabled-by-responsive {
	display: none;
}

@media screen and (max-width: 1399px) {
    .container {
        margin: auto;
        width: 1115px;
        height: auto;
        color: var(--text-color-dark);
        padding: 12px;
    }

	.enabled-by-responsive {
		display: none;
	}
}

@media screen and (max-width: 1205px) {
    .container {
        margin: auto;
        width: 935px;
        height: auto;
        color: var(--text-color-dark);
        padding: 12px;
    }

	.enabled-by-responsive {
		display: none;
	}
}

@media screen and (max-width: 995px) {
    .container {
        margin: auto;
        width: 695px;
        height: auto;
        color: var(--text-color-dark);
        padding: 12px;
    }

    .disable-by-responsive {
		display: none;
	}

	.enabled-by-responsive {
		display: block;
	}
}

@media screen and (max-width: 768px) {
    .container {
        margin: auto;
        width: 515px;
        height: auto;
        color: var(--text-color-dark);
        padding: 12px;
    }

    .disable-by-responsive {
		display: none;
	}

	.enabled-by-responsive {
		display: block;
	}
}

@media screen and (max-width: 580px) {
    .container {
        margin: auto;
        width: 100%;
        height: auto;
        color: var(--text-color-dark);
        padding: 12px;
    }

    .disable-by-responsive {
		display: none;
	}

	.enabled-by-responsive {
		display: block;
	}
}

/* Top bar */
.top-bar-info {
    background-color: var(--topbarinfo-background-color);
    margin: auto;
    width: 100%;
	height: auto;
    font-size: 0.8em;
}

.top-bar-info .container {
	color: var(--container-background-color);
}

/* Navigation */
.logo {
	width: 140px;
	height: auto;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
	position: absolute;
	z-index: 9;
}

.logo:hover {
    cursor: pointer;
	user-select: none;
}

.mobile-logo {
	width: 140px;
	height: auto;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
}

.mobile-logo:hover {
    cursor: pointer;
	user-select: none;
}

.navbar {
    background-color: var(--navbar-background-color);
    margin: auto;
    width: 100%;
	height: 135px;
    font-size: 1em;
    border-bottom: 1px solid var(--navbar-border-background-color);
	user-select: none;
}

.nav-button a {
    padding: 10px 24px 10px;
    background-color: var(--navbar-button-color);
    color: var(--navbar-text-color);
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.nav-button a:hover {
    padding: 10px 24px 10px;
    background-color: var(--navbar-button-hover-color);
    color: var(--navbar-text-color);
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.nav-button a:active {
    padding: 10px 24px 10px;
    background-color: var(--navbar-button-active-color);
    color: var(--navbar-text-color);
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

ul {
    margin: auto;
    width: 100%;
    height: auto;
    padding: 0px;
	list-style-type: none;
    vertical-align: middle;
    float: left;
}

li {
	float: left;
    vertical-align: middle;
    margin: 0px;
    padding: 0px 6px 0px;
}

li a, .dropdown-button {
	display: inline-block;
	color: var(--T2-normal-color);
	text-align: center;
	padding: 14px 10px;
	text-decoration: none;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

li a:hover, .dropdown-button {
	color: var(--navbar-button-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

li.dropdown {
	display: inline-block;
}

li.right {
	float: right;
	color: var(--T2-normal-color);
}

li.right i {
	color: var(--T2-normal-color);
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

li.right i:hover {
	color: var(--navbar-button-color);
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.cart-bubble {
	clear: both;
	position: absolute;
	margin-top: -8px;
	margin-left: -8px;
	z-index: 3;
	font-size: 12px;
	color: var(--white-color);
	background-color: var(--cart-bubble-background-color);
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
	border-radius: 50%;
}

@media screen and (max-width: 995px) {
	.navbar {
		background-color: var(--navbar-background-color);
		margin: auto;
		width: 100%;
		height: 75px;
		font-size: 1em;
		border-bottom: 1px solid var(--navbar-border-background-color);
	}

	.logo {
		width: 75px;
		height: auto;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		user-select: none;
		position: absolute;
		z-index: 9;
	}
}

@media screen and (max-width: 768px) {
	.navbar {
		background-color: var(--navbar-background-color);
		margin: auto;
		width: 100%;
		height: 75px;
		font-size: 1em;
		border-bottom: 1px solid var(--navbar-border-background-color);
	}

	.logo {
		width: 75px;
		height: auto;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		user-select: none;
		position: absolute;
		z-index: 9;
	}
}

@media screen and (max-width: 580px) {
	.navbar {
		background-color: var(--navbar-background-color);
		margin: auto;
		width: 100%;
		height: 75px;
		font-size: 1em;
		border-bottom: 1px solid var(--navbar-border-background-color);
	}

	.logo {
		width: 75px;
		height: auto;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		user-select: none;
		position: absolute;
		z-index: 9;
	}
}

.side-menu-button {
	font-size: 1.7em;
	margin-top: -4px;
}

.hidden-icon {
    color: transparent;
}

/* Manage variations block */
.manage-variations-block {
	padding: 18px;
	border-radius: 12px;
	border: 1px solid var(--T1-normal-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.manage-variations-block h3 {
	margin: 0px;
	padding: 0px;
}

/* Navigation dropdown content */
.dropdown-content {
	display: none;
	position: absolute;
	background: var(--white-color);
    box-shadow: 0px 4px 5px var(--dropdown-shadow-background-color);
    border: 1px solid var(--light-gray-color);
    color: var(--text-color-dark);
    border-radius: 8px;
	min-width: 150px;
    text-align: left;
	z-index: 3;
    padding: 3px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.dropdown-content a {
	color: var(--text-color-dark);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--white-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

.dropdown-content a:hover {
	color: var(--dark-gray-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-hover-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

.dropdown-content a:active {
	color: var(--dark-gray-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-active-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.nav-item {
    position: relative;
    display: block;
	padding: 0px;
	margin: 0px;
	top: 0px;
	margin-bottom: 0;
}

.nav-item * {
    margin: 0;
    padding: 0;
}

.sub-dropdown-button {
    position: relative;
    display: block;
}

.sub-dropdown-content {
    display: none;
    position: absolute;
    background: var(--white-color);
    box-shadow: 0px 4px 5px var(--dropdown-shadow-background-color);
    border: 1px solid var(--light-gray-color);
    color: var(--text-color-dark);
    border-radius: 8px;
    min-width: 150px;
    text-align: left;
    z-index: 3;
    padding: 3px;
    top: 0%;
    left: 98%;
}

.nav-item:hover .sub-dropdown-content {
    display: block;
}

/* Mobile side menu bar */
.mobile-bar {
	height: 100%;
	width: 0px;
	position: fixed;
	z-index: 5;
	top: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.41);
	overflow-x: hidden;
	transition: 0.4s;
	user-select: none;
	z-index: 12;
}

.mobile-bar-container {
	top: 0px;
	left: 0px;
	width: 100%;
	max-width: 350px;
	height: 100%;
	background: var(--navbar-background-color);
	margin: 0px;
	padding: 0px;
	border-right: solid 1px var(--navbar-button-color);
	overflow-x: hidden;
}

.mobile-bar a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 1.3em;
	color: var(--navbar-button-color);
	display: block;
	text-align: left;
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
}

.mobile-bar a:hover {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 1.3em;
	color: var(--navbar-button-hover-color);
	display: block;
	text-align: left;
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
}

.mobile-bar a:active {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 1.3em;
	color: var(--navbar-button-active-color);
	display: block;
	text-align: left;
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
}

.side-menu-link {
	padding: 4px;
	width: 98%;
	text-decoration: none;
	font-size: 1.3em;
	color: var(--navbar-button-color);
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
	background-color: var(--navbar-background-color);
	border-radius: 4px;
	margin: 3px;
}

.side-menu-link:hover {
	padding: 4px;
	width: 98%;
	text-decoration: none;
	font-size: 1.3em;
	color: var(--navbar-button-hover-color);
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
	background-color: var(--navbar-background-color);
	border-radius: 4px;
	margin: 3px;
}

.mobile-bar .mobile-menu-close-icon {
	font-size: 2em;
	float: right;
	margin-right: 15px;
	margin-top: 5px;
}

.mobile-bar .mobile-menu-close-icon:hover {
	font-size: 2em;
	float: right;
	margin-right: 15px;
	margin-top: 5px;
}

/* Style for mobile menu collapsibles */
.mm-collapsible {
	width: 98%;
	text-decoration: none;
	text-align: left;
	font-size: 1.3em;
	margin: 0px;
	padding: 0px;
	padding: 8px 8px 8px 32px;
	border: 0px;
	color: var(--navbar-mb-color);
	background-color: var(--navbar-background-color);
	font-style: italic;
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
	cursor: pointer;
}

.mm-collapsible:hover {
	width: 98%;
	text-decoration: none;
	text-align: left;
	font-size: 1.3em;
	margin: 0px;
	padding: 0px;
	padding: 8px 8px 8px 32px;
	border: 0px;
	font-style: italic;
	color: var(--navbar-mb-color-hover);
	background-color: var(--navbar-background-color);
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
	cursor: pointer;
}

.mm-collapsible:active {
	width: 98%;
	text-decoration: none;
	text-align: left;
	font-size: 1.3em;
	margin: 0px;
	padding: 0px;
	padding: 8px 8px 8px 32px;
	border: 0px;
	color: var(--navbar-mb-color-active);
	background-color: var(--navbar-background-color);
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
	cursor: pointer;
}

.mm-collapsible:focus {
	width: 98%;
	text-decoration: none;
	text-align: left;
	font-size: 1.3em;
	margin: 0px;
	padding: 0px;
	padding: 8px 8px 8px 32px;
	border: 0px;
	color: var(--navbar-mb-color-active);
	background-color: var(--navbar-background-color);
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
	cursor: pointer;
}

.mm-content {
	margin: 0px;
	padding: 0px;
	padding: 0 18px;
	display: none;
	overflow: hidden;
}

/* Accordion */
.myaccordion {
	cursor: pointer;
	border: none;
	outline: none;
}

.myaccordionpanel {
	display: none;
	overflow: hidden;
}

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	background-color: var(--black-color);
	color: var(--white-color);
	padding: 6px;
	border-radius: 12px;
	border-bottom: 1px dotted var(--white-color); /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 350px;
	background-color: var(--dropdown-link-active-background-color);
	color: var(--black-color);
	text-align: center;
	padding: 8px;
	border-radius: 8px;
	position: absolute;
	z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
}

/* Brands */
.brands {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 1rem;
	user-select: none;
	margin-bottom: 25px;
}

.brands-item {
	padding: 4px;
	text-align: center;
}

.brands-item img {
	display: block;
	object-fit: contain;
	width: 100%;
	height: 130px;
	object-fit: contain;
	user-select: none;
	text-align: center;
}

.brands-item a {
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	text-align: center;
}

/* Links */
.custom-link {
    color: var(--T1-normal-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.custom-link:hover {
    color: var(--T1-hover-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.custom-light-link {
    color: var(--white-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.custom-light-link:hover {
    color: var(--white-color-accent);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.custom-dark-link {
    color: var(--black-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.custom-dark-link:hover {
    color: var(--light-black-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Red danger link */
.custom-dangerlink {
	color: #642c2c;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.custom-dangerlink:hover {
    color: #9c3d3d;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Box link */
.custom-boxlink {
	color: var(--white-color);
	background-color: var(--T1-light-color);
	border: 1px solid var(--T1-normal-color);
	border-radius: 8px;
	padding: 8px;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* List block */
.list-block {
	padding: 8px;
	border-radius: 8px;
	color: var(--white-color);
	background-color: var(--body-background-color);
	border: 1px solid var(--light-black-color);
}

/* Order discount box */
.order-discount-box {
	overflow: auto;
	max-height: 300px;
}

.order-discount-box p {
	margin-right: 10px;
}

/* Google icon color */
.home-icon {
	color: var(--T1-normal-color);
}

/* Alignments */
.middle-center {
    vertical-align: middle;
}

/* Colors */
.black {
	color: var(--text-color-dark);
}

.white {
    color: var(--T2-normal-color);
}

.light-gray {
    color: var(--light-gray-color);
}

.gray {
	color: var(--gray-color);
}

.green {
	color: var(--T1-normal-color);
}

/* Sizes */
.small_size {
	font-size: 0.8em;
}

.medium_size {
	font-size: 1em;
}

.big_size {
	font-size: 2em;
}

/* Switch input */
.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}

.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--light-gray-color);;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 4px;
	bottom: 4px;
	background-color: var(--white-color);
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: var(--T1-hover-color);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--T1-hover-color);
}

input:checked + .slider:before {
	-webkit-transform: translateX(18px);
	-ms-transform: translateX(18px);
	transform: translateX(18px);
}
  
/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

/* Category card grid */
.category-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: minmax(200px, auto);
	grid-gap: 0.8rem;
	user-select: none;
}

.category-card a {
	text-decoration: none;
}

.category-card {
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	color: var(--text-color-dark);
	text-align: left;
	background-color: var(--white-color);
    border-radius: 10px;
    border: 1px solid var(--dark-gray-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
    padding: 12px;
}

.category-card:hover {
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	color: var(--text-color-dark);
	text-align: left;
	background-color: var(--white-color);
    border-radius: 10px;
    border: 1.3px solid var(--T1-normal-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
    box-shadow: var(--T1-light-color) 0px 1px 4px, var(--T1-light-color) 0px 0px 0px 3px;
    padding: 12px;
}

.category-card:active {
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	color: var(--text-color-dark);
	text-align: left;
	background-color: var(--white-color);
    border-radius: 10px;
    border: 1.3px solid var(--T1-normal-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
    box-shadow: var(--T1-hover-color) 0px 1px 4px, var(--T1-hover-color) 0px 0px 0px 3px;
    padding: 12px;
}

.category-card-content {
	display: flex;
	flex-direction: column;
}

.category-card-content-item {
	align-self: auto;
	margin: 0px auto;
}

.category-card .category-card-content-item img {
	width: 181.95px;
	height: 181.95px;
	background-size: cover;
	object-fit: contain;
}

.category-card .category-card-content-item .title {
	font-size: 1.10em;
	font-weight: bold;
	color: var(--light-black-color);
	margin-bottom: 7px;
	padding: 0px;
	text-align: center;
}

/* Products card grid */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: minmax(200px, auto);
	grid-gap: 0.8rem;
	user-select: none;
}

.card a {
	text-decoration: none;
}

.card {
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	color: var(--text-color-dark);
	text-align: left;
	background-color: var(--white-color);
    border-radius: 10px;
    border: 1px solid var(--dark-gray-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
    padding: 12px;
}

.card:hover {
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	color: var(--text-color-dark);
	text-align: left;
	background-color: var(--white-color);
    border-radius: 10px;
    border: 1.3px solid var(--T1-light-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
    box-shadow: var(--T1-light-color) 0px 1px 4px, var(--T1-light-color) 0px 0px 0px 3px;
    padding: 12px;
}

.card:active {
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	color: var(--text-color-dark);
	text-align: left;
	background-color: var(--white-color);
    border-radius: 10px;
    border: 1.3px solid var(--T1-hover-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
    box-shadow: var(--T1-hover-color) 0px 1px 4px, var(--T1-hover-color) 0px 0px 0px 3px;
    padding: 12px;
}

.badge-new {
    border-radius: 4px;
    color: #99d1e2;
	background-color: #0990b9;
	position: absolute;
    font-size: 0.65em;
    font-weight: bold;
    padding: 3px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
	z-index: 1;
}

.badge-hot {
    border-radius: 4px;
    color: #e29999;
	background-color: #b90909;
	position: absolute;
    font-size: 0.65em;
    font-weight: bold;
    padding: 3px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
	z-index: 1;
}

.badge-sale {
    border-radius: 4px;
    color: #dbe299;
	background-color: #b9b609;
	position: absolute;
    font-size: 0.65em;
    font-weight: bold;
    padding: 3px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
	z-index: 1;
}

.badge-viewed {
    border-radius: 4px;
    color: #1a1a18;
	background-color: #fcf926;
	position: absolute;
    font-size: 0.8em;
    font-weight: bold;
    padding: 3px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
	z-index: 1;
}

.badge-percentage {
    border-radius: 4px;
    color: #9be299;
	background-color: #09b918;
	position: absolute;
    font-size: 0.65em;
    font-weight: bold;
    padding: 3px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
	z-index: 1;
}

.card-content {
	display: flex;
	flex-direction: column;
}

.card-content-item {
	align-self: auto;
}

.card-content-box {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.card-content-box-item {
	align-self: auto;
}

.card .card-content-item img {
	width: 100%;
	height: 100%;
	max-height: 190px;
	object-fit: contain;
}

.card .card-content-item .category {
	font-size: 0.87em;
	color: var(--gray-color);
	margin-top: 10px;
}

.card .card-content-item .title {
	font-size: 1.15em;
	font-weight: bold;
	color: var(--black-color);
	margin-bottom: 7px;
}

.card .card-content-item .price {
	font-size: 1.1em;
	color: var(--T1-normal-color);
	font-weight: bold;
}

.card .card-content-item .old-price {
	font-size: 0.8em;
	color: var(--gray-color);
	text-decoration: line-through;
	font-weight: bold;
}

.card .card-content-item .marked-gray {
	font-size: 0.8em;
	color: var(--gray-color);
	font-weight: bold;
	padding: 5px;
	border-radius: 6px;
	background-color: var(--light-gray-color);
	border: solid 1px var(--light-gray-color);
}

.card .card-content-item .add-to-cart-button {
	width: 98px;
	padding: 4px;
	font-size: 1em;
	color: var(--white-color);
	text-align: center;
	background-color: var(--T1-normal-color);
    border-radius: 7px;
    border: 1.3px solid var(--T1-active-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
	text-decoration: none;
	float: right;
}

.card .card-content-item .add-to-cart-button:hover {
	width: 98px;
	padding: 4px;
	font-size: 1em;
	color: var(--white-color);
	text-align: center;
	background-color: var(--T1-hover-color);
    border-radius: 7px;
    border: 1.3px solid var(--T1-active-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
	text-decoration: none;
	float: right;
}

.card .card-content-item .add-to-cart-button:focus {
	width: 98px;
	padding: 4px;
	font-size: 1em;
	color: var(--white-color);
	text-align: center;
	background-color: var(--T1-active-color);
    border-radius: 7px;
    border: 1.3px solid var(--T1-normal-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
	box-shadow: var(--T1-focus-color) 0px 1px 4px, var(--T1-focus-color) 0px 0px 0px 3px;
	text-decoration: none;
	float: right;
}

/* Image box */
.image-box {
	min-width: 50px;
	min-height: 50px;
	width: 100%;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	object-fit: contain;
}

.image-box img {
	min-width: 50px;
	min-height: 50px;
	width: 100%;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	object-fit: contain;
}

/* Modal image box */
.modal-image-box {
	min-width: 50px;
	min-height: 50px;
	width: 100%;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	object-fit: contain;
	padding: 8px;
	cursor: pointer;
}

.modal-image-box img {
	min-width: 50px;
	min-height: 50px;
	width: 100%;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	object-fit: contain;
	padding: 8px;
	cursor: pointer;
}

/* Image zoom product page */
.zoom-image:hover {
	cursor: zoom-in;
}

.zoom-image {
	transition: transform 0s ease;
}

.zoomed {
	transform: scale(2);
}

/* Flexbox */
.flexbox {
	display: flex;
	user-select: none;
	flex-direction: row; /* column */
	width: 100%;
	overflow: auto;
}

.flexbox > .flexbox-block {
	margin: auto;
	border-radius: 6px;
	margin: 8px;
	padding: 8px;
}

@media screen and (max-width: 768px) {
	.flexbox {
		display: flex;
		user-select: none;
		flex-direction: column;
		width: 100%;
		overflow: auto;
	}
}

/* Flex box array */
.flex-block-array {
	display: flex;
	user-select: none;
}

.flex-block-array > .flex-block {
	margin: auto;
	padding: 8px;
	width: 50%;
	border-radius: 6px;
	padding: 28px;
	margin: 8px;
}

.flex-block-array > .flex-cleanblock:first-child {
	width: 35%;
}

.flex-block-array > .flex-cleanblock {
	margin: auto;
	padding: 0px;
	width: 100%;
	border-radius: 6px;
	padding: 0px;
	margin: 0px;
}

.flex-block-array > .flexorder-block {
	margin: auto;
	padding: 0px;
	width: 100%;
	border-radius: 6px;
	padding: 0px;
	margin: 0px;
}

.flex-block-array > .flex-adressblock {
	margin: auto;
	padding: 0px;
	width: 47%;
	border-radius: 6px;
	padding: 0px;
	margin: 3px;
}

.flex-block-title {
	color: var(--T1-dark-color);
	font-size: 1.3em;
}

.flex-block-array p {
	color: var(--T1-normal-color);
	font-size: 1.1em;}

@media screen and (max-width: 768px) {
	.flex-block-array > .flex-adressblock {
		margin: auto;
		padding: 0px;
		width: 100%;
		border-radius: 6px;
		padding: 0px;
		margin: 3px;
	}

	.flex-block-array {
		display: flex;
		flex-direction: column;
	}

	.flex-block-array > .flex-cleanblock:first-child {
		width: 100%;
	}

	.flex-block-array > .flex-block {
		margin: auto;
		padding: 8px;
		width: 100%;
		border-radius: 6px;
		padding: 28px;
		margin: 8px;
	}
}

/* Flex box array single image */
.flex-block-array-single-image {
	display: flex;
	user-select: none;
}

.flex-block-array-single-image > .flex-block-image {
	margin: auto;
	padding: 8px;
	width: 100%;
	border-radius: 6px;
	padding: 38px;
	margin: 8px;
}

/* Flex box array image */
.flex-block-array-image {
	display: flex;
	user-select: none;
}

.flex-block-array-image > .flex-block-image {
	margin: auto;
	padding: 8px;
	width: 50%;
	border-radius: 6px;
	padding: 28px;
	margin: 8px;
}

.flex-block-title-image {
	color: var(--T1-dark-color);
	font-size: 1.3em;
	text-shadow: -1px 0 var(--white-color), 0 1px var(--white-color), 1px 0 var(--white-color), 0 -1px var(--white-color);
}

.flex-block-array-image p {
	color: var(--white-color);
	font-size: 1.1em;
	text-shadow: -1px 0 var(--T1-dark-color), 0 1px var(--T1-dark-color), 1px 0 var(--T1-dark-color), 0 -1px var(--T1-dark-color);
}

@media screen and (max-width: 768px) {
	.flex-block-array-image {
		display: flex;
		flex-direction: column;
	}

	.flex-block-array-image > .flex-block-image {
		margin: auto;
		padding: 8px;
		width: 100%;
		border-radius: 6px;
		padding: 28px;
		margin: 8px;
	}
}

@media screen and (max-width: 580px) {
	.flex-block-array-image {
		display: flex;
		flex-direction: column;
	}

	.flex-block-array-image > .flex-block-image {
		margin: auto;
		padding: 8px;
		width: 97%;
		border-radius: 6px;
		padding: 28px;
		margin: 8px;
	}
}

/* Account page address box */
.adressbox {
	width: 100%;
	border-radius: 6px;
	padding: 10px;
	background-color: var(--light-gray-color-accent);
	border: 1px solid var(--light-gray-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
}

.adressbox:hover {
	width: 100%;
	border-radius: 6px;
	padding: 10px;
	background-color: var(--light-gray-color);
	border: 1px solid var(--light-gray-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
}

/* Favorite icon style for product page */
.favorite_icon {
	color: var(--red);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
}

.favorite_icon:hover {
	color: var(--dark-red);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
}

.favorite_icon:active {
	color: var(--red);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
}

/* Flex box for product page */
.product-flex {
	display: flex;
	user-select: none;
}

.product-flex > .product-flex-block {
	margin: auto;
	width: 50%;
}

.product-flex-block img {
	width: 420px;
	border-radius: 12px;
	object-fit: contain;
	padding: 8px;
}

.product-flex-block .divider-line-up {
	border: none;
	border-top: 1px solid var(--light-gray-color);
	padding: 10px;
}

.product-flex-block .divider-line-down {
	border: none;
	border-bottom: 1px solid var(--light-gray-color);
	padding: 10px;
}

.product-flex-block .add-padding {
	padding-left: 15px;
}

.product-flex-block table {
	padding: 8px;
	width: 100%;
	border-radius: 8px;
}

.product-flex-block table td {
	padding: 8px;
	color: var(--dark-gray-color);
}

.product-flex-block h2 {
    background-color: var(--product-filter-background-color);
	padding: 40px 40px;
	border-radius: 12px;
	color: var(--dark-gray-color);
	margin: 0px;
}

.product-flex-block h2 span a {
	color: var(--T1-normal-color);
	font-size: 0.55em;
	font-weight: unset;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
}

.product-flex-block h2 span a:hover {
	color: var(--T1-hover-color);
	font-size: 0.55em;
	font-weight: unset;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
}

.product-flex-block .price {
    font-size: 1.5em;
	font-weight: bold;
	color: var(--T1-normal-color);
}

.product-flex-block .old-price {
    font-size: 0.8em;
	color: var(--dark-gray-color);
	text-decoration: line-through;
	font-weight: bold;
}

@media screen and (max-width: 995px) {
	.product-flex {
		display: flex;
		flex-direction: column;
	}

	.product-flex > .product-flex-block {
		margin: auto;
		width: 100%;
	}

	.product-flex-block img {
		width: 100%;
		border-radius: 12px;
		object-fit: contain;
		padding: 8px;
	}
}

@media screen and (max-width: 768px) {
	.product-flex {
		display: flex;
		flex-direction: column;
	}

	.product-flex > .product-flex-block {
		margin: auto;
		width: 100%;
	}

	.product-flex-block img {
		width: 100%;
		border-radius: 12px;
		object-fit: contain;
		padding: 8px;
	}
}

.product-flex-block .addtocart {
	outline: 0;
	border: 0;
    padding: 10px 24px 10px;
    background-color: var(--T1-normal-color);
    color: var(--white-color);
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-decoration: none;
}

.product-flex-block .addtocart:hover {
	outline: 0;
	border: 0;
    padding: 10px 24px 10px;
    background-color: var(--T1-hover-color);
    color: var(--white-color);
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-decoration: none;
	cursor: pointer;
}

.product-flex-block .addtocart:active {
	outline: 0;
	border: 0;
    padding: 10px 24px 10px;
    background-color: var(--T1-active-color);
    color: var(--white-color);
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-decoration: none;
}

.product-flex-block .addtocart:focus {
	outline: 0;
	border: 0;
    padding: 10px 24px 10px;
    background-color: var(--T1-active-color);
    color: var(--white-color);
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
	box-shadow: var(--T1-focus-color) 0px 1px 4px, var(--T1-focus-color) 0px 0px 0px 3px;
	text-decoration: none;
}

/* Carousel */
.carousel-slides {
	display: none;
	width: 100%;
	min-height: 290px;
	max-height: 500px;
	user-select: none;
}

.carousel-slides img {
	width: 100%;
	min-height: 290px;
	max-height: 500px;
	object-fit: cover;
	border-radius: 8px;
	user-select: none;
}

.carousel-container {
	width: 100%;
	max-height: 555px;
	position: relative;
	margin: auto;
	z-index: 1;
	user-select: none;
}

.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 44%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: var(--T2-normal-color);
	font-weight: bold;
	font-size: 18px;
	transition: 0.2s;
	user-select: none;
	border-radius: 8px;
	margin: 6px;
	z-index: 2;
	user-select: none;
}

.next {
	right: 0;
}

.prev:hover, .next:hover {
	background-color: var(--navbar-button-color);
	opacity: .8;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.carousel-textarea {
	position: absolute;
	width: 90%;
	height: 100%;
	top: 0px;
	user-select: none;
	z-index: 2;
}

.carousel-text {
	color: var(--T2-normal-color);
	font-size: 1em;
	padding-left: 62px;
	position: absolute;
	text-align: left;
	top: 31%;
	font-weight: bold;
	z-index: 2;
	user-select: none;
}

.carousel-text h2 {
	margin: 0px;
	color: var(--T1-hover-color);
	font-size: 2.5em;
	text-align: left;
	font-weight: bold;
	max-width: 320px;
	text-shadow: -1px 0 var(--white-color), 0 1px var(--white-color), 1px 0 var(--white-color), 0 -1px var(--white-color);
	user-select: none;
}

.carousel-text p {
	margin: 0px;
	margin-top: 12px;
	color: var(--white-color);
	text-shadow: 0px 0.5px 3px black;
	font-size: 1.2em;
	text-align: left;
	font-weight: bold;
	max-width: 420px;
	width: auto;
	user-select: none;
}

.carousel-text a {
	color: var(--T2-normal-color);
	font-size: 1em;
	padding: 14px;
	padding-left: 17px;
	padding-right: 17px;
	position: absolute;
	text-align: center;
	background-color: var(--navbar-button-color);
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-shadow: none;
	text-decoration: none;
	z-index: 2;
	user-select: none;
}

.carousel-text a:hover {
	color: var(--white-color);
	font-size: 1em;
	padding: 14px;
	padding-left: 17px;
	padding-right: 17px;
	position: absolute;
	text-align: center;
	background-color: var(--T2-vibrant-color);
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-shadow: none;
	text-decoration: none;
	z-index: 2;
	user-select: none;
}

.carousel-text a:focus {
	color: var(--white-color);
	font-size: 1em;
	padding: 14px;
	padding-left: 17px;
	padding-right: 17px;
	position: absolute;
	text-align: center;
	background-color: var(--navbar-button-active-color);
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	box-shadow: var(--T2-focus-color) 0px 1px 4px, var(--T2-focus-color) 0px 0px 0px 3px;
	text-shadow: none;
	text-decoration: none;
	z-index: 2;
	user-select: none;
}

@media screen and (max-width: 1205px) {
	.carousel-slides {
		width: 100%;
		min-height: 500px;
		max-height: 500px;
	}
	
	.carousel-slides img {
		width: 100%;
		min-height: 500px;
		max-height: 500px;
	}
	
	.carousel-container {
		width: 100%;
		min-height: 500px;
		max-height: 500px;
	}
}

@media screen and (max-width: 995px) {
	.carousel-slides {
		width: 100%;
		min-height: 338px;
		max-height: 338px;
	}
	
	.carousel-slides img {
		width: 100%;
		min-height: 338px;
		max-height: 338px;
	}
	
	.carousel-container {
		width: 100%;
		min-height: 338px;
		max-height: 338px;
	}

    .carousel-text {
		color: var(--white-color);
		font-size: 1em;
		padding-left: 62px;
		position: absolute;
		text-align: left;
		top: 24%;
		font-weight: bold;
		z-index: 2;
		user-select: none;
	}
	
	.carousel-text h2 {
		margin: 0px;
		color: var(--T1-hover-color);
		font-size: 1.9em;
		text-align: left;
		font-weight: bold;
		max-width: 320px;
		text-shadow: -1px 0 var(--white-color), 0 1px var(--white-color), 1px 0 var(--white-color), 0 -1px var(--white-color);
		user-select: none;
	}
	
	.carousel-text p {
		margin: 0px;
		margin-top: 12px;
		color: var(--white-color);
		text-shadow: 0px 0.5px 3px black;
		font-size: 1em;
		text-align: left;
		font-weight: bold;
		max-width: 420px;
		user-select: none;
	}

	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 41%;
		width: auto;
		padding: 16px;
		margin-top: -22px;
		color: var(--white-color);
		font-weight: bold;
		font-size: 18px;
		transition: 0.2s;
		user-select: none;
		border-radius: 8px;
		margin: 6px;
		z-index: 2;
		user-select: none;
	}
}

@media screen and (max-width: 768px) {
	.carousel-slides {
		width: 100%;
		min-height: 327px;
		max-height: 327px;
	}
	
	.carousel-slides img {
		width: 100%;
		min-height: 327px;
		max-height: 327px;
	}
	
	.carousel-container {
		width: 100%;
		min-height: 327px;
		max-height: 327px;
	}

	.carousel-text {
		color: var(--white-color);
		font-size: 1em;
		padding-left: 62px;
		position: absolute;
		text-align: left;
		top: 27%;
		font-weight: bold;
		z-index: 2;
		user-select: none;
	}
	
	.carousel-text h2 {
		margin: 0px;
		color: var(--T1-hover-color);
		font-size: 1.7em;
		text-align: left;
		font-weight: bold;
		max-width: 320px;
		text-shadow: -1px 0 var(--white-color), 0 1px var(--white-color), 1px 0 var(--white-color), 0 -1px var(--white-color);
		user-select: none;
	}
	
	.carousel-text p {
		margin: 0px;
		margin-top: 12px;
		color: var(--white-color);
		text-shadow: 0px 0.5px 3px black;
		font-size: 0.9em;
		text-align: left;
		font-weight: bold;
		max-width: 420px;
		user-select: none;
	}

	.carousel-text a {
		color: var(--T2-normal-color);
		font-size: 0.8em;
		padding: 14px;
		padding-left: 17px;
		padding-right: 17px;
		position: absolute;
		text-align: center;
		background-color: var(--navbar-button-color);
		border-radius: 8px;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		text-shadow: none;
		text-decoration: none;
		z-index: 2;
		user-select: none;
	}
	
	.carousel-text a:hover {
		color: var(--white-color);
		font-size: 0.8em;
		padding: 14px;
		padding-left: 17px;
		padding-right: 17px;
		position: absolute;
		text-align: center;
		background-color: var(--T2-vibrant-color);
		border-radius: 8px;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		text-shadow: none;
		text-decoration: none;
		z-index: 2;
		user-select: none;
	}

	.carousel-text a:focus {
		color: var(--white-color);
		font-size: 0.8em;
		padding: 14px;
		padding-left: 17px;
		padding-right: 17px;
		position: absolute;
		text-align: center;
		background-color: var(--navbar-button-active-color);
		box-shadow: var(--T2-focus-color) 0px 1px 4px, var(--T2-focus-color) 0px 0px 0px 3px;
		border-radius: 8px;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		text-shadow: none;
		text-decoration: none;
		z-index: 2;
		user-select: none;
	}

	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 39%;
		width: auto;
		padding: 16px;
		margin-top: -22px;
		color: var(--white-color);
		font-weight: bold;
		font-size: 18px;
		transition: 0.2s;
		user-select: none;
		border-radius: 8px;
		margin: 6px;
		z-index: 2;
		user-select: none;
	}
}

@media screen and (max-width: 580px) {
	.carousel-text {
		color: var(--white-color);
		font-size: 1em;
		padding-left: 62px;
		position: absolute;
		text-align: left;
		top: 28%;
		font-weight: bold;
		z-index: 2;
		user-select: none;
	}
	
	.carousel-text h2 {
		margin: 0px;
		color: var(--T1-hover-color);
		font-size: 1.5em;
		text-align: left;
		font-weight: bold;
		max-width: 320px;
		text-shadow: -1px 0 var(--white-color), 0 1px var(--white-color), 1px 0 var(--white-color), 0 -1px var(--white-color);
		user-select: none;
	}
	
	.carousel-text p {
		margin: 0px;
		margin-top: 12px;
		color: var(--white-color);
		text-shadow: 0px 0.5px 3px black;
		font-size: 0.8em;
		text-align: left;
		font-weight: bold;
		max-width: 420px;
		user-select: none;
	}

	.carousel-text a {
		color: var(--T2-normal-color);
		font-size: 0.6em;
		padding: 14px;
		padding-left: 17px;
		padding-right: 17px;
		position: absolute;
		text-align: center;
		background-color: var(--navbar-button-color);
		border-radius: 8px;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		text-shadow: none;
		text-decoration: none;
		z-index: 2;
		user-select: none;
	}
	
	.carousel-text a:hover {
		color: var(--white-color);
		font-size: 0.6em;
		padding: 14px;
		padding-left: 17px;
		padding-right: 17px;
		position: absolute;
		text-align: center;
		background-color: var(--T2-vibrant-color);
		border-radius: 8px;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		text-shadow: none;
		text-decoration: none;
		z-index: 2;
		user-select: none;
	}

	.carousel-text a:focus {
		color: var(--white-color);
		font-size: 0.6em;
		padding: 14px;
		padding-left: 17px;
		padding-right: 17px;
		position: absolute;
		text-align: center;
		background-color: var(--navbar-button-active-color);
		box-shadow: var(--T2-focus-color) 0px 1px 4px, var(--T2-focus-color) 0px 0px 0px 3px;
		border-radius: 8px;
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
		text-shadow: none;
		text-decoration: none;
		z-index: 2;
		user-select: none;
	}

	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 39%;
		width: auto;
		padding: 16px;
		margin-top: -22px;
		color: var(--white-color);
		font-weight: bold;
		font-size: 18px;
		transition: 0.2s;
		user-select: none;
		border-radius: 8px;
		margin: 6px;
		z-index: 2;
		user-select: none;
	}
}

/* Website settings */
.websettings {
	background-color: var(--white-color);
	padding: 8px;
	border-radius: 8px;
	border: solid 1px var(--gray-color);
}

/* Products images slider */
#productimages-slider-container {
	width: 97%;
}

@media screen and (max-width: 995px) {
	#productimages-slider-container {
		width: 100%;
	}
}

#product-slider-container {
	width: 100%;
	margin: auto;
	padding: 0px;
	overflow: hidden;
	position: relative;
	border-radius: 8px;
}

#product-image-slider {
	display: flex;
	transition: transform 0.5s ease-in-out;
	border-radius: 8px;
	padding: 0px;
}

.product-slide {
	min-width: 100%;
	box-sizing: border-box;
	border-radius: 8px;
	padding: 0px;
	background-size: cover;
	object-fit: contain;
}

#product-image-slider img {
	width: 100%;
	height: 100%;
	max-height: 490px;
	justify-content: center;
	background-size: cover;
	object-fit: contain;
	border-radius: 8px;
	padding: 0px;
}

#product-is-prev, #product-is-next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: var(--T1-normal-color);
	font-weight: bold;
	font-size: 18px;
	transition: 0.3s ease;
	border-radius: 8px;
	user-select: none;
}

#product-is-next {
	right: 0;
	border-radius: 8px;
}

#product-is-prev:hover, #product-is-next:hover {
	color: var(--T2-vibrant-color);
	background-color: var(--T1-light-color);
}

#product-thumbnail-container {
	width: 100%;
	overflow-y: hidden;
    overflow-x: auto; /* Enable horizontal scrollbar if necessary */
    white-space: nowrap; /* Prevent thumbnails from wrapping to the next line */
}

.product-thumbnail {
	display: inline-block;
	width: 90px;
	height: 60px;
	margin: 0 3px;
	cursor: pointer;
	border: 1px solid var(--T1-normal-color);
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.product-thumbnail:hover {
	width: 90px;
	height: 60px;
	margin: 0 3px;
	cursor: pointer;
	border: 1px solid var(--T2-vibrant-color);
	background-color: var(--T1-light-color);
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.product-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* Discountcode container */
.discountcode-container {
	width: 100%;
	background: var(--cartmessage-background-color);
	border-radius: 8px;
	padding: 15px 0px;
	color: var(--cartmessage-text-color);
	text-align: center;
}

.discountcode-container .discountcode-code {
	border: 2px dashed var(--cartmessage-text-color);
	padding: 5px;
	border-radius: 3px;
}

/* Website message container */
.website-message-container {
	width: 100%;
	background: var(--cartmessage-background-color);
	border-radius: 8px;
	padding: 15px 0px;
	color: var(--cartmessage-text-color);
	text-align: center;
}

/* Live search */
#livesearch {
	display: none;
	position: absolute;
	z-index: 4;
	background: var(--white-color);
    box-shadow: 0px 4px 5px var(--dropdown-shadow-background-color);
    border: 1px solid var(--light-gray-color);
    color: var(--text-color-dark);
    border-radius: 8px;
	min-width: 150px;
    text-align: left;
    padding: 3px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

#livesearch a {
	color: var(--text-color-dark);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--white-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#livesearch a:hover {
	color: var(--dark-gray-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-hover-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#livesearch a:active {
	color: var(--black-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-active-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#livesearch .small-category {
	font-size: 0.7em;
	color: var(--gray-color);
	margin-left: 32px;
	float: right;
}

#mlivesearch {
	display: none;
	position: absolute;
	z-index: 4;
	background: var(--white-color);
    box-shadow: 0px 4px 5px var(--dropdown-shadow-background-color);
    border: 1px solid var(--light-gray-color);
    color: var(--text-color-dark);
    border-radius: 8px;
	min-width: 150px;
    text-align: left;
    padding: 3px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

#mlivesearch a {
	color: var(--text-color-dark);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--white-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#livesearch a:hover {
	color: var(--dark-gray-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-hover-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#mlivesearch a:active {
	color: var(--black-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-active-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#mlivesearch .small-category {
	font-size: 0.7em;
	color: var(--gray-color);
	margin-left: 32px;
	float: right;
}

#livesearch-main {
	display: none;
	position: absolute;
	z-index: 4;
	background: var(--white-color);
    box-shadow: 0px 4px 5px var(--dropdown-shadow-background-color);
    border: 1px solid var(--light-gray-color);
    color: var(--text-color-dark);
    border-radius: 8px;
	min-width: 150px;
    text-align: left;
    padding: 3px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

#livesearch-main a {
	color: var(--text-color-dark);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--white-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#livesearch-main a:hover {
	color: var(--dark-gray-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-hover-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#livesearch-main a:active {
	color: var(--black-color);
    margin: 0px;
	padding: 10px 17px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	background: var(--dropdown-link-active-background-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
    border-radius: 6px;
}

#livesearch-main .small-category {
	font-size: 0.7em;
	color: var(--dark-gray-color);
	margin-left: 32px;
	float: right;
}

/* Paginate */
.paginate {
	width: 100%;
	background-color: var(--T2-dark-color);
	text-align: center;
	font-weight: bold;
	padding: 10px;
}

.paginate a {
	color: var(--dark-gray-color);
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.paginate a:hover {
	color: var(--light-black-color);
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.paginate a:focus {
	color: var(--light-black-color);
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	box-shadow: var(--T1-focus-color) 0px 1px 4px, var(--T1-focus-color) 0px 0px 0px 3px;
}

.pp-active {
	color: var(--T1-light-color) !important;
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.pp-active:focus {
	color: var(--T1-light-color) !important;
	text-decoration: none;
	padding-left: 8px;
	padding-right: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	box-shadow: var(--T1-focus-color) 0px 1px 4px, var(--T1-focus-color) 0px 0px 0px 3px;
}

.paginate .p-previous {
	float: left;
}

.paginate .p-next {
	float: right;
}

/* Collapsible container */
.collapsible {
	background-color: transparent;
	color: var(--dark-black-color);
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1em;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
}

.active, .collapsible:hover {
	background-color: transparent;
	color: var(--dark-black-color);
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1em;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
}

.collapsible-content {
	padding: 0px;
	margin: 0px;
	max-height: 0px;
	overflow: hidden;
	text-align: left;
	transition: max-height 0.3s ease-out;
	background-color: transparent;
}

/* Mobile side menu bar */
.mobile-filter-bar {
	height: 100%;
	width: 0px;
	position: fixed;
	z-index: 5;
	top: 0px;
	left: 0px;
	background: transparent;
	overflow-x: hidden;
	transition: 0.3s;
	user-select: none;
	margin: 0px;
	padding: 0px;
	z-index: 11;
}

.mobile-filter-bar-container {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: var(--white-color);
	margin: 0px;
	padding: 0px;
	border-right: solid 1px var(--dark-gray-color);
	overflow-x: hidden;
	font-size: 0.8em;
}

.mobile-filter-bar h3 {
	padding: 20px;
}

.mobile-filter-bar a {
	padding: 0px 0px 10px 32px;
	text-decoration: none;
	font-size: 1.3em;
	color: var(--light-black-color);
	display: block;
	text-align: left;
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
}

.mobile-filter-bar a:hover {
	color: var(--black-color);
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
}

.side-filter-link {
	padding: 4px;
	width: 98%;
	text-decoration: none;
	font-size: 1.3em;
	color: var(--light-black-color);
	transition: all .4s cubic-bezier(0.175,0.885,0,1);
	background-color: transparent;
	border-radius: 4px;
	margin: 3px;
}

.mobile-filter-bar .mobile-filter-close-icon {
	font-size: 2em;
	float: right;
	margin-right: 15px;
	margin-top: 5px;
}

.filter-title {
	font-size: 1.2em;
	font-weight: bold;
}

.filter-contentbox {
	padding: 12px;
}

.filter-bar-collapsible {
	cursor: pointer;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1em;
	user-select: none;
}

.active, .filter-bar-collapsible:hover {
	color: inherit;
}

.filter-bar-collapsible-content {
	max-height: 0px;
	overflow: hidden;
	transition: 0.4s;
}

.filter-bar-collapsible-content a {
	margin-left: 12px;
	color: var(--dark-black-color);
	width: 95%;
}

.filter-bar-collapsible-content a:hover {
	margin-left: 12px;
	color: var(--light-black-color);
}

.filter-bar-container {
	margin: 0px;
	padding: 0px 15px 0px 15px;
}

/* Filter container */
.flex-filter-container {
    display: flex;
	flex-direction: row;
}

.flex-filter-container a {
    color: var(--black-color);
    padding: 0px;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.flex-filter-container a:hover {
    color: var(--T1-normal-color);
    padding: 0px;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.flex-filter-child {
    flex: 1;
}

.flex-filter-child:first-child {
    margin-right: 12px;
	max-width: 220px;
}

.flex-filter-child h2 {
    background-color: var(--product-filter-background-color);
	padding: 35px 40px;
	border-radius: 12px;
	color: var(--dark-gray-color);
}

.filter-settings {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	user-select: none;
}

.mobile-filter-button {
	display: none;
}

@media screen and (max-width: 995px) {
	.flex-filter-child:first-child {
		display: none;
	}

	.mobile-filter-button {
		display: block;
	}
}

/* Cookie collabse filter */
.collabse {
	background-color: transparent;
	color: var(--dark-black-color);
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1em;
	user-select: none;
	cursor: default;
}

.collabse:hover {
	background-color: transparent;
	color: var(--dark-black-color);
	cursor: pointer;
	padding: 0px;
	margin: 0px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1em;
	user-select: none;
	cursor: pointer;
}

.collabse-content {
	overflow: hidden;
	display: none;
	margin: 0px;
	padding: 0px;
	user-select: none;
}

/* Table link */
.table_link {
	color: var(--dark-gray-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.table_link:hover {
	color: var(--dark-black-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.table_link:active {
	color: var(--dark-black-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Price slider */
.price-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 25px;
	background: var(--light-gray-color);
	outline: none;
	user-select: none;
	border-radius: 9px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.price-slider:hover {
	background: var(--dark-gray-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.price-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: pointer;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.price-slider::-webkit-slider-thumb:hover {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grab;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.price-slider::-webkit-slider-thumb:active {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grabbing;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.price-slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: pointer;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.price-slider::-moz-range-thumb:hover {
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grab;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.price-slider::-moz-range-thumb:active {
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grabbing;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Price slider filter mobile */
.filter-price-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 25px;
	background: var(--light-gray-color);
	outline: none;
	border-radius: 9px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.filter-price-slider:hover {
	background: var(--dark-gray-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.filter-price-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: pointer;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.filter-price-slider::-webkit-slider-thumb:hover {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grab;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.filter-price-slider::-webkit-slider-thumb:active {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grabbing;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.filter-price-slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: pointer;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.filter-price-slider::-moz-range-thumb:hover {
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grab;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.filter-price-slider::-moz-range-thumb:active {
	width: 25px;
	height: 25px;
	background: var(--T1-normal-color);
	cursor: grabbing;
	border-radius: 15px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Pagination */
.pagination {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	user-select: none;
}

.pagination a {
	color: var(--text-color-dark);
	padding: 10px 12px;
	background-color: var(--light-gray-color);
	border-radius: 5px;
	margin: 3px;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.pagination a:hover:not(.active-page) {
	color: var(--text-color-dark);
	padding: 10px 12px;
	background-color: var(--light-gray-color-accent);
	border-radius: 5px;
	margin: 3px;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.pagination .active-page {
	color: var(--light-gray-color);
	padding: 10px 12px;
	background-color: var(--T1-normal-color);
	border-radius: 5px;
	margin: 3px;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.pagination .active-page:hover {
	color: var(--light-gray-color);
	padding: 10px 12px;
	background-color: var(--T1-hover-color);
	border-radius: 5px;
	margin: 3px;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.pagination .active-page:focus {
	color: var(--light-gray-color);
	padding: 10px 12px;
	background-color: var(--T1-active-color);
	border-radius: 5px;
	margin: 3px;
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	box-shadow: var(--T1-focus-color) 0px 1px 4px, var(--T1-focus-color) 0px 0px 0px 3px;
}

/* Breadcrumb */
.breadcrumb {
	color: var(--dark-gray-color);
}

.breadcrumb span{
	color: var(--light-gray-color);
}

.breadcrumb a {
	color: var(--T1-normal-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.breadcrumb a:hover {
	color: var(--T2-vibrant-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

/* Forms */
.form-textarea {
	min-width: 100%;
	max-width: 100%;
	width: 100%;
    min-height: 100px;
}

.input_eye {
	user-select: none;
	cursor: pointer;
	color: var(--T1-dark-color);
}

.form-input {
	margin-top: 7px;
    padding: 8px;
    width: 100%;
    height: 37px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--white-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-input:hover {
	margin-top: 7px;
    padding: 8px;
    width: 100%;
    height: 37px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--white-color-accent);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-input:focus {
	margin-top: 7px;
    padding: 8px;
    width: 100%;
    height: 37px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--navbar-button-color);
    background-color: var(--white-color);
	outline: 0;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
    box-shadow: var(--T2-focus-color) 0px 1px 4px, var(--T2-focus-color) 0px 0px 0px 3px;
}

.form-input:active {
	margin-top: 7px;
    padding: 8px;
    width: 100%;
    height: 37px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--gray-color);
    background-color: var(--html-background-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--white-color);
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button:hover {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--white-color-accent);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button:focus {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--navbar-button-color);
    background-color: var(--html-background-color);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
    box-shadow: var(--T2-focus-color) 0px 1px 4px, var(--T2-focus-color) 0px 0px 0px 3px;
}

.form-button:active {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--gray-color);
    background-color: var(--html-background-color);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button-dark {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--light-gray-color-accent);
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button-dark:hover {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--light-gray-color);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button-dark:focus {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--light-gray-color-accent);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
    box-shadow: var(--gray-color) 0px 1px 4px, var(--gray-color) 0px 0px 0px 3px;
}

.form-button-dark:active {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--light-gray-color);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button-red {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-red-button);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button);
    background-color: var(--white-color);
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button-red:hover {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--white-color);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button);
    background-color: var(--text-color-red-button);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-button-red:focus {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--white-color);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button-active);
    background-color: var(--text-color-red-button);
    cursor: pointer;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	user-select: none;
    box-shadow: var(--text-color-red-button-focus) 0px 1px 4px, var(--text-color-red-button-focus) 0px 0px 0px 3px;
}

.form-button-red:active {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--white-color);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button-active);
    background-color: var(--text-color-red-button);
    cursor: pointer;
	user-select: none;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-select {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--white-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-select:hover {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--dark-gray-color);
    background-color: var(--white-color-accent);
    cursor: pointer;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.form-select:focus {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--navbar-button-color);
    background-color: var(--white-color);
    cursor: pointer;
	outline: 0;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
    box-shadow: var(--T2-focus-color) 0px 1px 4px, var(--T2-focus-color) 0px 0px 0px 3px;
}

.form-select:active {
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-dark);
    border-radius: 8px;
    border: 1px solid var(--gray-color);
    background-color: var(--html-background-color);
    cursor: pointer;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

.styled-button {
	color: var(--T2-normal-color);
	font-size: 0.8em;
	padding: 14px;
	padding-left: 17px;
	padding-right: 17px;
	text-align: center;
	background-color: var(--navbar-button-color);
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-shadow: none;
	text-decoration: none;
}

.styled-button:hover {
	color: var(--white-color);
	font-size: 0.8em;
	padding: 14px;
	padding-left: 17px;
	padding-right: 17px;
	text-align: center;
	background-color: var(--T2-vibrant-color);
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-shadow: none;
	text-decoration: none;
}

.styled-button:focus {
	color: var(--white-color);
	font-size: 0.8em;
	padding: 14px;
	padding-left: 17px;
	padding-right: 17px;
	text-align: center;
	background-color: var(--navbar-button-active-color);
	box-shadow: var(--T2-focus-color) 0px 1px 4px, var(--T2-focus-color) 0px 0px 0px 3px;
	border-radius: 8px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-shadow: none;
	text-decoration: none;
}

input[type="range"] {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none; 
	/* creating a custom design */
	width: 100%;
	cursor: pointer;
	outline: none;
	/*  slider progress trick  */
	overflow: hidden;
	border-radius: 16px;
}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
	height: 15px;
	background: var(--light-gray-color);
	border-radius: 16px;
}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
	height: 15px;
	background: var(--light-gray-color);
	border-radius: 16px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none; 
	/* creating a custom design */
	height: 15px;
	width: 15px;
	background-color: var(--light-gray-color);
	border-radius: 50%;
	border: 2px solid var(--navbar-button-color);
	/*  slider progress trick  */
	box-shadow: -407px 0 0 400px var(--navbar-button-color);
}


/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
	height: 15px;
	width: 15px;
	background-color: var(--light-gray-color);
	border-radius: 50%;
	border: 1px solid var(--navbar-button-color);
	/*  slider progress trick  */
	box-shadow: -407px 0 0 400px var(--navbar-button-color);
}

.label-checkbox-container {
	line-height: 1.1;
	display: grid;
	grid-template-columns: 1em auto;
	gap: 0.5em;
	margin: 2px;
}

input[type="checkbox"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: var(--white-color);
	/* Not removed via appearance */
	margin: 0;

	appearance: none;
	background-color: var(--white-color);
	margin: 0;
	font: inherit;
	color: var(--white-color);
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid var(--light-black-color);
	border-radius: 0.15em;
	transform: translateY(-0.075em);

	display: grid;
  	place-content: center;
	cursor: pointer;
}

input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transition: 100ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--navbar-button-color);
	/* Windows High Contrast Mode */
	background-color: CanvasText;
	transform-origin: bottom left;
  	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
}

input[type="checkbox"]:disabled {
	color: var(--gray-color);
	cursor: not-allowed;
}

.label-radio-container {
	line-height: 1.1;
	display: grid;
	grid-template-columns: 1em auto;
	gap: 0.5em;
	margin: 2px;
}

input[type="radio"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: var(--white-color);
	/* Not removed via appearance */
	margin: 0;

	appearance: none;
	background-color: var(--white-color);
	margin: 0;
	font: inherit;
	color: var(--white-color);
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid var(--light-black-color);
	border-radius: 50%;
	transform: translateY(-0.075em);

	display: grid;
	place-content: center;
	cursor: pointer;
}

input[type="radio"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	transform: scale(0);
	transition: 100ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--navbar-button-color);
	/* Windows High Contrast Mode */
	background-color: CanvasText;
}

input[type="radio"]:checked::before {
	transform: scale(1);
}

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

.items-page-numbers {
	display: flex;
}

.items-previous, .items-next {
	cursor: pointer;
}

.items-empty {
	cursor: pointer;
}

.pagination-link {
	padding: 10px;
	cursor: pointer;
	background-color: var(--light-gray-color);
	color: var(--dark-black-color);
	border-radius: 6px;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	margin: 3px;
}

.pagination-link:hover {
	padding: 10px;
	cursor: pointer;
	background-color: var(--gray-color);
	color: var(--dark-black-color);
	border-radius: 6px;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	margin: 3px;
}

.pagination-link:active {
	padding: 10px;
	cursor: pointer;
	background-color: var(--dark-gray-color);
	color: var(--dark-black-color);
	border-radius: 6px;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	margin: 3px;
}

.pagination-link-active {
	padding: 10px;
	cursor: pointer;
	background-color: var(--T1-normal-color);
	color: var(--white-color);
	border-radius: 6px;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	margin: 3px;
}

.pagination-link-active:hover {
	padding: 10px;
	cursor: pointer;
	background-color: var(--T1-hover-color);
	color: var(--white-color);
	border-radius: 6px;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	margin: 3px;
}

.pagination-link-active:active {
	padding: 10px;
	cursor: pointer;
	background-color: var(--T1-active-color);
	color: var(--white-color);
	border-radius: 6px;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	margin: 3px;
}

.pagination-link-active:focus {
	padding: 10px;
	cursor: pointer;
	background-color: var(--T1-active-color);
	color: var(--white-color);
	border-radius: 6px;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
	margin: 3px;
	box-shadow: var(--T1-focus-color) 0px 1px 4px, var(--T1-focus-color) 0px 0px 0px 3px;
}

/* Email-subscription */
.email-subscription-container {
	margin-top: 22px;
	padding: 4rem;
	background-color: var(--black-color) !important;
	border-top: 1px solid var(--gray-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.email-subscription-container .small-text {
	font-size: 1em;
	color: var(--light-gray-color);
	font-weight: bold;
}

.email-subscription-container h2 {
	margin-top: -9px;
	font-size: 1.7em;
	color: var(--white-color);
	font-weight: bold;
}

.email-subscription-container p {
	margin-top: -9px;
	font-size: 1em;
	color: var(--white-color-accent);
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.email-subscription-container {
		margin-top: 22px;
		padding: 2rem;
		background-color: var(--black-color) !important;
		border-top: 1px solid var(--gray-color);
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
	}

	.email-subscription-container .small-text {
		margin-top: 5%;
		font-size: 0.8em;
		color: var(--light-gray-color);
		font-weight: bold;
	}
	
	.email-subscription-container h2 {
		margin-top: -9px;
		font-size: 1.15em;
		color: var(--white-color);
		font-weight: bold;
	}
	
	.email-subscription-container p {
		margin-top: -9px;
		font-size: 0.95em;
		color: var(--white-color-accent);
		font-weight: bold;
	}

	.email-subscription-container input {
		width: 155px !important;
	}
}

@media screen and (max-width: 500px) {
	.email-subscription-container {
		margin-top: 22px;
		padding: 1rem;
		background-color: var(--black-color) !important;
		border-top: 1px solid var(--gray-color);
		transition: all .5s cubic-bezier(0.175,0.885,0,1);
	}

	.email-subscription-container input {
		width: 118px !important;
	}
}

/* Mobile searchbar */
.mobile-searchbar {
	padding: 8px;
	width: 100%;
	background-color: var(--T1-normal-color);
	border: 1px solid var(--T2-vibrant-color);
	border-radius: 12px;
	margin: 0px;
}

/* Shopping cart */
#shopping-cart {
	margin: 0px;
	user-select: none;
}

#product-grid {
	margin: 40px;
}

#shopping-cart table {
	width: 100%;
	background-color: var(--light-gray-color);
	border-radius: 8px;
}

#shopping-cart table td {
	background-color: var(--white-color);
}

.cart-item-details {
	background-color: var(--container-background-color);
	color: var(--black-color);
	padding: 4px;
	margin: 4px;
	font-size: 1em;
	border-radius: 6px;
}

.txt-heading {
	color: var(--black-color);
	padding-bottom: 5px;
	border-bottom: 1px solid var(--light-gray-color-accent);
	overflow: auto;
}

#btnEmpty {
	float: right;
	text-decoration: none;
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--text-color-red-button);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button);
    background-color: var(--white-color);
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

#btnEmpty:hover {
	float: right;
	text-decoration: none;
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--white-color);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button);
    background-color: var(--text-color-red-button);
    cursor: pointer;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

#btnEmpty:focus {
	float: right;
	text-decoration: none;
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--white-color);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button-active);
    background-color: var(--text-color-red-button);
    cursor: pointer;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
    box-shadow: var(--text-color-red-button-focus) 0px 1px 4px, var(--text-color-red-button-focus) 0px 0px 0px 3px;
}

#btnEmpty:active {
	float: right;
	text-decoration: none;
	margin-top: 0px;
    height: 38px;
    padding: 7px;
    color: var(--white-color);
    border-radius: 8px;
    border: 2px solid var(--text-color-red-button-active);
    background-color: var(--text-color-red-button);
    cursor: pointer;
	transition: all .3s cubic-bezier(0.175,0.885,0,1);
}

#btnCheckout {
	padding: 8px;
	font-size: 1em;
	color: var(--white-color);
	text-align: center;
	background-color: var(--T1-normal-color);
    border-radius: 7px;
    border: 1.3px solid var(--T1-active-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
	text-decoration: none;
	float: right;
}

#btnCheckout:hover {
	padding: 8px;
	font-size: 1em;
	color: var(--white-color);
	text-align: center;
	background-color: var(--T1-hover-color);
    border-radius: 7px;
    border: 1.3px solid var(--T1-active-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
	text-decoration: none;
	float: right;
}

#btnCheckout:focus {
	padding: 8px;
	font-size: 1em;
	color: var(--white-color);
	text-align: center;
	background-color: var(--T1-active-color);
    border-radius: 7px;
    border: 1.3px solid var(--T1-normal-color);
	transition: all .7s cubic-bezier(0.175,0.885,0,1);
	box-shadow: var(--T1-focus-color) 0px 1px 4px, var(--T1-focus-color) 0px 0px 0px 3px;
	text-decoration: none;
	float: right;
}

#product-grid .txt-heading {
	margin-bottom: 18px;
}

.product-item {
	float: left;
	background: var(--white-color);
	margin: 30px 30px 0px 0px;
	border: var(--light-gray-color-accent) 1px solid;
}

.cartmessage {
	max-width: 100%;
	background: var(--cartmessage-background-color);
	padding: 20px;
	color: var(--cartmessage-text-color);
	border-radius: 8px;
}

.clear-float {
	clear: both;
}

.tbl-cart {
	font-size: 0.9em;
}

.tbl-cart .btnRemoveAction {
	color:var(--dark-gray-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.tbl-cart .btnRemoveAction:hover {
	color:var(--dark-red);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.tbl-cart img {
	border-radius: 8px;
}

.tbl-cart th {
	font-weight: normal;
}

.product-title {
	margin-bottom: 20px;
}

.product-price {
	float:left;
}

.cart-action {
	float: right;
}

.product-quantity {
    padding: 5px 10px;
    border-radius: 3px;
    border: var(--light-gray-color-accent) 1px solid;
}

.product-tile-footer {
    padding: 15px 15px 0px 15px;
    overflow: auto;
}

.cart-item-image {
	width: 100px;
    height: 100px;
    border: var(--light-gray-color-accent) 1px solid;
    padding: 5px;
    vertical-align: middle;
    margin-right: 15px;
}

.no-records {
	text-align: left;
	clear: both;
	margin: 38px 0px;
}

@media screen and (max-width: 768px) {
	.tbl-cart img {
		display: none;
	}

	.tbl-cart {
		font-size: 0.8em;
	}

	.cart-item-details {
		font-size: 0.92em;
	}
}

.vouchercheck_valid {
	color: var(--black-color);
	background-color: var(--succesmessage-background-color);
	padding: 4px;
	border-radius: 4px;
}

.vouchercheck_invalid {
	color: var(--black-color);
	background-color: var(--cartmessage-background-color);
	padding: 4px;
	border-radius: 4px;
}

/* Shipping days button */
.shipping-days-button {
	padding: 4px;
	background-color: var(--light-gray-color);
	border-radius: 5px;
}

.shipping-days-button:hover {
	padding: 4px;
	background-color: var(--light-gray-color-accent);
	border-radius: 5px;
	cursor: pointer;
}

.shipping-days-button:active {
	padding: 4px;
	background-color: var(--gray-color);
	border-radius: 5px;
}

/* Input requirement */
.reqr {
    color: var(--red);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-background-color);
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 11;
}

.modal-content {
    background-color: var(--white-color);
    margin: 15px auto;
    padding: 8px;
    border: 1px solid var(--black-color);
    width: 75%;
	border-radius: 12px;
}

.modal-content #selectedImage {
    background-color: #7ffe9a;
    padding: 8px;
    border: 1px solid #4ed46b;
	border-radius: 4px;
	margin: 4px;
	width: 200px;
	height: 200px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.modal-content #selectedImage:hover {
    background-color: #69ff8a;
    padding: 8px;
    border: 1px solid #42c45e;
	border-radius: 4px;
	margin: 4px;
	width: 200px;
	height: 200px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.modal-content img {
    background-color: var(--light-gray-color);
    padding: 8px;
    border: 1px solid var(--light-gray-color);
	border-radius: 4px;
	width: 200px;
	height: 200px;
	margin: 4px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.modal-content img:hover {
    background-color: var(--gray-color);
    padding: 8px;
    border: 1px solid var(--light-gray-color-accent);
	border-radius: 4px;
	margin: 4px;
	width: 200px;
	height: 200px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.modal-content img:active {
    background-color: var(--light-gray-color-accent);
    padding: 8px;
    border: 1px solid var(--light-gray-color);
	border-radius: 4px;
	margin: 4px;
	width: 200px;
	height: 200px;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.close {
    color: var(--dark-gray-color);
    float: right;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.close:hover {
    color: var(--dark-black-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Small images (for checkout page) */
.small-image {
	width: 100px;
    height: 100px;
    vertical-align: middle;
	object-fit: contain;
}

/* Styled table admin photo */
.admin-photo-thumbnail {
	width: 100px;
}

/* Styled table */
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    width: 100%;
	border-radius: 8px;
}

.styled-table thead .custom-link {
    color: var(--dark-gray-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.styled-table thead .custom-link:hover {
    color: var(--dark-black-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.styled-table thead tr {
    background-color: var(--T2-dark-color);
    color: var(--T2-focus-color);
    text-align: left;
}

.styled-table th {
	color: var(--dark-gray-color);
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody .custom-link {
    color: var(--dark-gray-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.styled-table tbody .custom-link:hover {
    color: var(--gray-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.styled-table tbody tr {
	background-color: var(--white-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.styled-table tbody tr:last-of-type {
    border: none;
}

.styled-table tbody tr:hover {
    background-color: var(--white-color-accent);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Subcategories list */
.subcategories-list a {
	color: var(--light-black-color);
	background-color: var(--light-gray-color-accent);
	border-radius: 8px;
	padding: 9px;
	border: solid 1px var(--light-gray-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.subcategories-list a:hover {
	color: var(--light-black-color);
	background-color: var(--light-gray-color-accent);
	border-radius: 8px;
	padding: 9px;
	border: solid 1px var(--gray-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.subcategories-list a:active {
	color: var(--light-black-color);
	background-color: var(--light-gray-color-accent);
	border-radius: 8px;
	padding: 9px;
	border: solid 1px var(--light-gray-color);
	text-decoration: none;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

/* Payment history box */
.payment-history-box {
	color: var(--black-color);
	background-color: var(--light-gray-color);
	border-radius: 12px;
	padding: 9px;
	border: solid 1px var(--light-gray-color-accent);
}

.custom-box {
	color: var(--black-color);
	background-color: var(--light-gray-color);
	border-radius: 12px;
	padding: 9px;
	border: solid 1px var(--light-gray-color-accent);
}

/* Stars */
#topstars {
	font-size: 28px;
	vertical-align: middle;
	user-select: none;
}

.starcolor {
	color: #ebc81a;
	cursor: default;
	user-select: none;
}

.stargray {
	color: var(--T2-dark-color);
	cursor: default;
	user-select: none;
}

/* Progressbar */
.progressbar {
	position: relative;
	left: 0;
	top: 0;
	bottom: 0;
	max-width: auto;
	width: 100%;
	height: 30px;
	background: var(--light-gray-color);
	overflow: hidden;
	border-radius: 6px;
	user-select: none;
}

span.progress {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--dark-gray-color);
	transition: all .3s;
	border-radius: 6px;
	user-select: none;
}

/* Aboxes */
.abox-finance {
	background: rgb(93, 206, 104);
	background: linear-gradient(0deg,rgb(93, 206, 104) 0%,rgb(0, 175, 18) 100%);
}

.abox-orders {
	background: rgb(113, 241, 255);
	background: linear-gradient(0deg,rgb(113, 241, 255) 0%,rgb(0, 137, 205) 100%);
}

.abox-products {
	background: rgb(180, 124, 240);
	background: linear-gradient(0deg,rgb(180, 124, 240) 0%,rgba(124,1,255,1) 100%);
}

.abox-customers {
	background: rgb(212, 200, 94);
	background: linear-gradient(0deg,rgb(212, 200, 94) 0%,rgb(214, 193, 3) 100%);
}

.abox-clean {
	background: rgb(163, 163, 163);
	background: linear-gradient(0deg,rgb(0, 0, 0) 0%,rgb(52, 52, 52) 100%);
}

/* Flex box abox */
.flex-block-array-abox {
	display: flex;
	user-select: none;
}

.flex-block-array-abox > .flex-block-abox {
	margin: auto;
	width: 50%;
	border-radius: 6px;
	padding: 8px;
	margin: 8px;
	color: var(--white-color);
	text-shadow: 0px 1px 2px var(--dark-black-color);
}

.flex-block-array-abox > .flex-block-abox .custom-link {
	color: var(--white-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-shadow: 0px 1px 2px var(--dark-gray-color);
}

.flex-block-array-abox > .flex-block-abox .custom-link:hover {
	color: var(--light-gray-color-accent);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
	text-shadow: 0px 1px 2px var(--dark-black-color);
}

.flex-block-array-abox > .flex-block-abox:first-child {
	width: 47%;
}

@media screen and (max-width: 768px) {
	.flex-block-array-abox {
		display: flex;
		flex-direction: column;
		user-select: none;
	}

	.flex-block-array-abox > .flex-block-abox {
		margin: auto;
		width: 97%;
		border-radius: 6px;
		padding: 8px;
		margin: 8px;
		color: var(--white-color);
		text-shadow: 0px 1px 2px var(--dark-black-color);
	}

	.flex-block-array-abox > .flex-block-abox:first-child {
		width: 97%;
	}
}

.widget-status-history {
	width: 100%;
	height: auto;
	max-height: 160px;
	overflow: auto;
	border-radius: 8px;
	background-color: var(--container-background-color);
	padding: 10px;
	border: solid 2px var(--navbar-button-color);
}

.widget-payment-history {
	width: 100%;
	height: auto;
	max-height: 100px;
	overflow: auto;
	border-radius: 8px;
	background-color: var(--gray-color);
	padding: 10px;
	box-shadow: 0px 2px 4px var(--gray-color-shadow);
}

.order_message {
	padding: 12px;
	border-radius: 8px;
	background-color: var(--light-gray-color-accent);
}

.container-widget {
	width: 100%;
	height: auto;
	background-color: var(--white-color);
	border: 1px solid var(--gray-color);
	border-radius: 8px;
	padding: 20px;
}

/* Footer */
.styled-link-footer {
	text-decoration: none;
	color: var(--T2-normal-color);
	font-weight: bold;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.styled-footer-h2 {
	text-decoration: none;
	color: var(--white-color);
	font-weight: bold;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.styled-link-footer:hover {
	text-decoration: none;
	color: var(--navbar-button-color);
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

footer {
	background-color: var(--T1-normal-color);
	border-top: 1px solid var(--T1-normal-color-accent);
}

.footer-block {
	display: block;
	margin: auto;
	width: 100%;
	padding: 15px;
	font-size: 0.85em;
	margin-bottom: 20px;
}

.footer-array {
	display: flex;
	margin-bottom: 20px;
}

.footer-array > .footer-array-block:first-child {
	margin: auto;
	width: 400px;
}

.footer-array > .footer-array-block {
	margin: auto;
	width: 235px;
}

.footer-text-bold {
	font-weight: bold !important;
}

.footer-text-color {
	color: var(--T2-normal-color) !important;
}

.footer-array-block h2 {
	color: var(--white-color);
}

.footer-array-block a {
	text-decoration: none;
	color: var(--T2-normal-color);
	font-weight: bold;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.footer-array-block a:hover {
	text-decoration: none;
	color:#ffffff !important;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.mobile {
	display: none;
}

.credits-block {
	display: block;
	margin: auto;
	width: 100%;
	padding: 12px;
	border-top: 1px solid var(--T1-normal-color-accent);
}

.credits-block span {
	float: left;
	color: var(--T2-normal-color);
	font-size: 0.9em;
}

.credits-block a {
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	color: var(--T2-normal-color);
	font-size: 0.9em;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.credits-block a:hover {
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: underline;
	color:#ffffff !important;
	font-size: 0.9em;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.credits-block-mobile {
	display: none;
}

.credits-block-mobile a {
	text-decoration: none;
	color: var(--T2-normal-color);
	font-size: 0.9em;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

.credits-block-mobile a:hover {
	text-decoration: underline;
	color:#ffffff !important;
	font-size: 0.9em;
	transition: all .5s cubic-bezier(0.175,0.885,0,1);
}

@media screen and (max-width: 768px) {
	.footer-array > .footer-array-block:first-child {
		display: none;
	}

	.mobile {
		display: block;
	}

	.credits-block {
		display: none;
	}
	
	.credits-block span {
		display: none;
	}

	.credits-block a {
		display: none;
	}

	.credits-block-mobile {
		display: block;
		text-align: center;
		margin: 0px;
		padding: 0px;
		color: var(--T2-normal-color);
		border-top: 1px solid var(--gray-color);
	}
}

.warning {
	background-color: var(--cartmessage-background-color);
	padding: 10px;
	border-radius: 6px;
	color: var(--black-color);
}

.errormessage {
	background-color: var(--cartmessage-background-color);
	padding: 10px;
	border-radius: 6px;
	color: var(--black-color);
	border: solid 1px var(--text-color-red-button);
}

.successmessage {
	background-color: var(--succesmessage-background-color);
	padding: 10px;
	border-radius: 6px;
	color: var(--black-color);
	border: solid 1px var(--succesmessage-border-color);
}

.set-divider {
	background-color: var(--body-background-color);
	padding: 8px;
	text-align: center;
	font-weight: bold;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}