@charset "utf-8";
/* -------------------------------------------------------
GUIDE
1. FONT
2. GLOBAL
------------------------------------------------------- */

/* -------------------------------------------------------
Font Settings
------------------------------------------------------- */
.yeseva-one-regular {
	font-family: "Yeseva One", serif;
	font-weight: 400;
	font-style: normal;
}
.be-vietnam-pro-thin {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.be-vietnam-pro-extralight {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 200;
	font-style: normal;
}

.be-vietnam-pro-light {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.be-vietnam-pro-regular {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.be-vietnam-pro-medium {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.be-vietnam-pro-semibold {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.be-vietnam-pro-bold {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.be-vietnam-pro-extrabold {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.be-vietnam-pro-black {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.be-vietnam-pro-thin-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.be-vietnam-pro-extralight-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 200;
	font-style: italic;
}

.be-vietnam-pro-light-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.be-vietnam-pro-regular-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.be-vietnam-pro-medium-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 500;
	font-style: italic;
}

.be-vietnam-pro-semibold-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 600;
	font-style: italic;
}

.be-vietnam-pro-bold-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.be-vietnam-pro-extrabold-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 800;
	font-style: italic;
}

.be-vietnam-pro-black-italic {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 900;
	font-style: italic;
}
/* ------------------------------------------------------- */
/* GLOBAL */
/* ------------------------------------------------------- */
BODY {
	background: #fff;
	margin: 0;
	padding: 0;
	overflow-y: scroll;	
	overflow-x: hidden;
}
BODY, td, div, pre {
	color: #000;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 16px;
}
pre {
	width: 100%;
	white-space: break-spaces;
}
* {
	transition: all .3s;	
}
form {
	transition: none;
}
option, input, textarea, select {
	 -moz-box-shadow:    inset 0 2px 4px rgba(0, 0, 0, .1);
	 -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
	 box-shadow:         inset 0 2px 4px rgba(0, 0, 0, .1);
	 min-width: calc(8% - 8px);
	 min-height: 40px;
	 border: 1px solid #b1b1b1;
	 color: #333;
	 font-family: Roboto, sans-serif;
	 font-size: 1em;
	 padding: 8px;
	 border-radius: 8px;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 margin: 0 8px 0 0;
	 line-height: 120%;
 }
fieldset {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}
textarea.html {
	cursor: not-allowed;
	background: #f0f0f0;
	font-size: .8em;
	color: #666;
	display: none;
}
input[type=text] {
	min-width: 20%;
}
input:focus,
textarea:focus {
	outline: none !important;
	border: 1px solid #ff6c00;
}
::-moz-selection {
	color: #fff;
	background: #ff6c00;
}

::selection {
	color: #fff;
	background: #ff6c00;
}
hr {
	background: #eaeaea;
	border: 0;
	height: 1px;
	margin: 10px 0 10px 0;
	clear: both;
}
img {
	max-width: 100%;
}
h1 {
	font-family: "Yeseva One", serif;
	font-size: 32px;
	font-weight: 100;
	color: #000;
	margin: 0;
	cursor: default;
	width: 100%;
	clear: both;
}
h2 {
	font-family: "Yeseva One", serif;
	font-size: 24px;
	font-weight: 100;
	line-height: 100%;
	color: #000;
	padding: 8px 0 4px 0;
	margin: 0 0 4px 0;
	cursor: default;
	display: inline-block;
}
h4 {
	font-size: 16px;
	color: #505050;
	padding: 8px 0 8px 0;
	margin: 0;
	font-weight: 100;
}
a { 
	color: #000;
	outline: none;
	text-decoration: none;
}
a:hover {
	color: #ff6c00;
}
/* Material icons */
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
}
/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	cursor: pointer;
}
::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.1);
	border-radius: 16px;
}
::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.1);
	border-radius: 16px;
	cursor: pointer;
}
/* Tooltip */
.tooltip {
	z-index: 1;
}
@keyframes tooltip {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.tooltip:before {
	content: attr(data-text);
	position: absolute;

	top: 50%;
	transform: translateY(-50%);

	left: 100%;
	margin-left: 6px;

	font-size: .9em;

	width: auto;
	min-width: 120px;
	padding: 8px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	text-align: center;

	display: none;
	animation: tooltip .5s 1 ease-in-out;
}
.tooltip:hover:before {
	display: block;
}
.tooltip:after {
	content: "";
	position: absolute;

	left: 100%;
	margin-left: -6px;

	top: 50%;
	transform: translateY(-50%);

	border: 6px solid rgba(0, 0, 0, .8);
	border-color: transparent rgba(0, 0, 0, .8) transparent transparent;

	display: none;
	animation: tooltip .5s 1 ease-in-out;
}
.tooltip:hover:before, .tooltip:hover:after {
	display: block;
}
.tooltip-right:before {
	left: unset;
	margin-left: unset;
	right: 100%;
	margin-right: 6px;
}
.tooltip-right:after {
	left: unset;
	margin-left: unset;
	right: 100%;
	margin-right: -6px;
	border-color: transparent transparent transparent rgba(0, 0, 0, .8);
}
/* ------------------------------------------------------- */
/* Order */
/* ------------------------------------------------------- */
.order {
	width: 600px;
	margin: 8px auto 8px auto;
	background: #fff;
	border-radius: 16px;
}
@media screen and (max-width: 640px) {
	.order {
		width: 90%;
		margin: 0 auto 0 auto;
	}
}
.order .banner {
	width: 100%;
	text-align: center;
}
.order .banner img {
	height: 80px;
	border-radius: 50%;
}
.order .form {
	list-style: none;
	width: calc(100% - 48px);
	margin: 0 24px 0 24px;
	padding: 0;
}
.order .form li {
	margin: 0;
	padding: 4px 0 4px 0;
}
.order .form li input {
	width: 100%;
}
.order .form li input.submit {
	text-align: center !important;
	display: inline-block !important;
}
.order .label {
	display: block;
	margin: 0;
	padding: 8px 0 0 0 !important;
}
.order span.price {
	color: #fff;
	border-radius: 8px;
	padding: 4px 8px 4px 8px;
	display: inline-block;
	background: #ff6c00;
}

.order .description {
	color: #666;
	font-size: .9em;
}
.order .recommend {
	margin: 0 0 8px 0;
}
.order .recommend .tab-price {
	background: #eee;
	padding: 8px 16px 8px 16px;
	border-radius: 16px;
	display: inline-block;
	cursor: pointer;
}
.order .recommend .tab-price:hover {
	background: #ff6c00;
	color: #fff;
}
.order #bill {
	font-weight: bold;
	font-size: 1.2em;
}
/* Switcher */
.switcher {
	display: none;
}
@media screen and (max-width: 640px) {
	.switcher {
		width: 32px;
		height: 32px;
		background: #f9f9f9;
		display: block;
		position: fixed;
		top: 16px;
		right: 24px;
		cursor: pointer;
		transition: none;
		z-index: 998;
		text-align: center;
		border-radius: 8px;
	}
	.switcher i {
		position: absolute;
		top: 4px;
		left: 4px;
	}
	.switcher:hover {
		color: #ff6c00;
	}
}
#loader {
	z-index: 10000;
}
/* ------------------------------------------------------- */
/* Logo */
/* ------------------------------------------------------- */
.logo {
	width: 100%;
	text-align: center;
	margin: 16px 0 16px 0;
}
/* ------------------------------------------------------- */
/* Menu */
/* ------------------------------------------------------- */
menu {
	width: 100%;
	height: 48px;
	background: #fff;
	padding: 0;
	margin: 0 auto 0 auto;
	display: table;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
	z-index: 10;
}
menu .logo {
	display: none;
}
menu.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
menu.fixed .logo {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
menu ul {
	width: 1280px;
	padding: 0;
	margin: 0 auto 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
menu ul li {
	display: inline-block;
	height: 48px;
	overflow: hidden;
	vertical-align: center;
}
@media screen and (max-width: 1280px) {
	menu ul {
		width: 100%;
	}
}
menu a {
	color: #000;
	font-size: 1em;
	vertical-align: top;
	display: block;
	padding: 18px 8px 0 8px;
	height: 34px;
	margin: 0;
	border: 0;
	line-height: 100%;
}
@media screen and (max-width: 640px) {
	menu a {
		font-size: .9em;
	}
}
menu a:hover {
	color: #ff6c00;
}
menu span {
	padding: 0;
	margin: 0;
}
menu .logo {
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
	position: relative;
	top: unset;
	left: unset;
	right: unset;
	bottom: unset;
	border-radius: 0;
}
menu .logo img {
	position: absolute;
	top: 4px;
	left: 4px;
	margin: 0 auto 0 auto;
	width: 44px;
	height: 44px;
}

.float_submit {
	position: fixed;
	background: #ff6c00;
	text-align: center;
	bottom: 80px;
	right: 16px;
	width: 64px;
	height: 64px;
	border-radius: 32px;
	color: #fff;
	cursor: pointer;
	padding: 18px 0 0 0;
	box-sizing: border-box;
	box-shadow: 0 1px 5px #ccc;
	z-index: 9999999;
}
.div {
	margin: 16px 0 16px 0;
	width: 100%;
	clear: both;
}
/* Header */
header {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	header {
		width: 100%;
	}
}
header .page_title {
	width: calc(100% - 48px);
	background: #f9f9f9;
	border-radius: 8px;
	color: #666;
	padding: 8px;
	margin: 16px;
	text-align: center;
}
.page {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	.page {
		width: 100%;
	}
}
.empty {
	width: calc(100% - 64px);
	padding: 32px;
	text-align: center;
}
section.videos {
	width: 100%;
	background: #000;
	padding: 0;
	margin: 0 auto 0 auto;
	z-index: 1;
	position: relative;
	overflow: hidden;
	max-height: 640px;
}
section.videos video {
	opacity: .3;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
section.videos .slogan {
	z-index: 2;
	opacity: 1;
	font-family: "Yeseva One", Serif;
	font-size: 2.8em;
	color: #fff;
	position: absolute;
	top: 40%;
	left: 0;
	text-align: center;
	width: 100%;
	display: grid;
	padding: 0;
	margin: 0;
}
section.videos .slogan .description {
	min-height: 32px;
	font-size: .8em;
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 640px) {
	section.videos .slogan {
		font-size: 1.7em;
		top: 25%;
	}
}
section.videos .button {
	font-size: .3em;
	padding: 8px 24px 8px 24px;
	width: auto;
	display: inline-block;
	color: #fff;
	background: #000;
	border-radius: 32px;
	border: 0;
	margin: 16px auto 0 auto;
	text-transform: uppercase;
	letter-spacing: 2px;
}
@media screen and (max-width: 640px) {
	section.videos .button {
		font-size: .5em;
	}
}
section.story {
	width: 1280px;
	padding: 0;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	section.story {
		width: 100%;
	}
}
section.story h1 {
	font-size: 2.4em;
	width: calc(50% - 48px);
	padding: 4px 24px 4px 24px;
	margin: 24px auto 40px auto;
	text-align: center;
	position: relative;
}
@media screen and (max-width: 640px) {
	section.story h1 {
		font-size: 2.2em;
		width: calc(80% - 48px);
	}
}
section.story h1::after {
	position: absolute;
	bottom: -24px;
	left: 50%;
	content: " ";
	width: 10%;
	height: 1px;
	margin: 0 auto 0 auto;
	border-bottom: 3px solid #000;
	transform: translateX(-50%);
}
section.story h2 {
	width: calc(50% - 48px);
	padding: 4px 24px 4px 24px;
	margin: 24px auto 16px auto;
	text-align: center;
	display: block;
}
@media screen and (max-width: 640px) {
	section.story h2 {
		width: calc(80% - 48px);
	}
}
section.story p {
	width: 60%;
	padding: 4px 24px 4px 24px;
	margin: 0 auto 4px auto;
	line-height: 1.5em;
}
@media screen and (max-width: 640px) {
	section.story p {
		width: 80%;
	}
}
section.story ul {
	width: 60%;
	margin: 0 auto 4px auto;
}
@media screen and (max-width: 640px) {
	section.story ul {
		width: 80%;
	}
}
section.story blockquote {
	background: #f5f5f5;
	width: calc(60% - 104px);
	font-size: 1.1em;
	padding: 32px 16px 24px 40px;
	margin: 0 auto 16px auto;
	position: relative;
}
@media screen and (max-width: 640px) {
	section.story blockquote {
		width: calc(80% - 104px);
	}
}
section.story blockquote.story {
	font-size: .9em;
	color: #666;
}
section.story blockquote:after {
	content: "❝";
	font-size: 1.8em;
	color: #000;
	position: absolute;
	top: 16px;
	left: 16px;
}
section.story .image-block {
	max-width: 640px;
	margin: 16px auto;
	text-align: center;
	background: #f5f5f5;
}
section.story .image-block img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	max-width:100%;
}
section.story .image-block figcaption {
	padding: 8px 24px 8px 24px;
	font-size: .9em;
	background: #f5f5f5;
	color: #666;
	margin: 8px 0 16px 0;
}

section. {
	background: #ff6c00;
}

/* Product list */
.product-list {
	display: block;
	width: calc(100% - 32px);
	padding: 16px;
}
.product-list h3 {
	font-weight: 600;
	width: calc(100% - 32px);
	padding: 8px 16px 8px 16px;
	margin: 0;
}
.product-list ul {
	list-style: none;
	padding: 0;
	margin: 0 0 0 16px;
}
.product-list ul li {
	padding: 0;
}
.product-list .product {
	display: inline-block;
	vertical-align: top;
	background: #fff;
	width: calc(20% - 16px);
	border-radius: 18px 18px 16px 16px;
	margin: 0 16px 16px 0;
	position: relative;
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
@media screen and (max-width: 980px) {
	.product-list .product {
		width: calc(33% - 16px);
	}
	.product-list .product:nth-child(3n) {
		margin: 0 0 16px 0;
	}
}
@media screen and (max-width: 640px) {
	.product-list .product {
		width: calc(50% - 8px);
	}
	.product-list .product:nth-child(3n) {
		margin: 0 16px 16px 0;
	}
	.product-list .product:nth-child(2n) {
		margin: 0 0 16px 0;
	}
}
.product-list .product .more {
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: #252525;
	transform: scale(1.3);
}
.product-list .product .image img {
	width: 100%;
	border-radius: 16px 16px 0 0;
}
.product-list .product .select-btn {
	background: #252525;
	color: #fff;
	border-radius: 32px;
	margin: 8px 0 16px 16px;
	padding: 4px 16px 4px 16px;
	border: 0;
}
.product-list .product .select-btn:hover {
	background: #ff6c00;
}

#cart-icon {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: #fff;
	padding: 16px 44px 16px 0;
	border-radius: 50px;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);
	cursor: pointer;
	z-index: 9000;
	align-items: center;
	gap: 10px;
	min-height: 20px;
	min-width: 8px;
}
#cart-icon a {
	color: #000;
}
#cart-icon .icon {
	position: absolute;
	top: 14px;
	right: 12px;
}
#cart-icon #cart-total {
	margin: 0 0 0 24px;
}
#cart-icon #cart-count {
	position: absolute;
	top: -4px;
	right: -8px;
	background: #fff;
	color: #000;
	border-radius: 50%;
	text-align: center;
	min-height: 22px;
	min-width: 24px;
	padding: 2px 0 0 0;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);
}
#cart-icon #cart-count.orange {
	background: #ff6c00;
	color: #fff;
}
@keyframes blinkCart {
	0%, 100% { transform: scale(1); background-color: #ff5722; }
	25% { transform: scale(1.2); background-color: #ffa726; }
	75% { transform: scale(1); background-color: #ff7043; }
}

.cart-float-blink {
	animation: blinkCart 0.3s ease-in-out 2;
}

/* Search */
.top {
	background: #fff;
	width: 100%;
	height: 50px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	position: fixed;
	top: -50px;
	z-index: 9999998;
}
.search {
	width: 100%;
	padding: 0;
	margin: 0 0 8px 0;
	position: relative;
	box-sizing: border-box;
	clear: both;
}
.search a.remove {
	position: absolute;
	top: 0;
	right: 80px;
}
.search a.remove:hover,
.search a.remove:hover i {
	color: #ff6c00 !important;
}
.search input[name=search],
.search input[name=name] {
	min-width: calc(100% - 88px);
	height: 40px;
	border: 1px solid #ddd;
	font-size: 1em;
	margin-top: 4px;
	outline: none;
	z-index: 8;
	min-height: 36px;
	box-sizing: border-box;
}

.search input[type=submit] {
	width: 72px;
	position: absolute;
	top: 4px;
	right: 0;
}
.search i {
	position: absolute;
	top: 11px;
	right: 12px;
	color: #ccc;
}
.search_advanced input[name=search],
.search_advanced input[name=name] {
	min-width: calc(100% - 128px);
}
.search_advanced input[type=submit] {
	border-radius: 8px 0 0 8px;
	top: 4px;
	right: 36px;
}
.search_advanced div.options {
	margin: 8px 0 0 0;
}
.search_advanced div.options input,
.search_advanced div.options select {
	margin: 0 8px 8px 0;
}
.search_advanced div.advanced {
	width: 44px;
	height: 40px;
	background: #cf1634;
	color: #fff;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	position: absolute;
	top: 4px;
	right: 0;
}
.search_advanced div.advanced i {
	position: absolute;
	top: 8px;
	right: 8px;
	transform: scale(.8);
	color: #fff;
	opacity: .6;
}
.search_advanced div.advanced:hover i {
	opacity: 1;
}

.search_switch {
	position: fixed;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	text-align: center;
	box-sizing: border-box;
	padding: 14px 0 0 0;
	top: 8px;
	right: 16px;
	background: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	z-index: 999999;
	cursor: pointer;
}
.filter_switch {
	position: fixed;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	text-align: center;
	box-sizing: border-box;
	padding: 0;
	top: 8px;
	left: 16px;
	background: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	z-index: 999998;
	cursor: pointer;
}
.filter_switch a {
	display: block;
	padding: 14px 0 0 0;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	box-sizing: border-box;
}
.filter_switch i {
	color: #666;
}
.filter span.label {
	display: block;
	margin: 5px 0 5px 0;
	font-size: 1.1em;
	color: #666;
}
.filter input[type=date]{
	min-height: 32px;
	margin: 0 0 10px 0;
}
.filter_expanded {
	width: 170px;
	border-radius: 24px;
}
.filter_expanded p {
	position: absolute;
	padding: 0;
	margin: 0;
	top: 18px;
	left: 40px;
	color: #ff6c00;
}
.filter_expanded i {
	color: #ff6c00;
}
#current_address {
	width: 100%;
	clear: both;
	padding: 5px 0 0 8px;
	box-sizing: border-box;
	background: #fff;
}
#current_address ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#current_address ul li {
	float: unset;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

/* Search Results */
#search_results {
	background: #fff;
	box-shadow: 2px 2px 5px #ccc;
	overflow-x: hidden;
	position: absolute;
	top: 40px;
	max-height: calc(100vh - 50px);
	width: 100%;
	z-index: 10000;
}
.search_results {
	background: transparent;
	list-style: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.search_results li {
	width: 100%;
	position: relative;
	padding: 8px;
}
.search_results .customer_name {
	background: #f0f0f0;
}
.search_results ul.customer_address {
	background: #f9f9f9;
	padding: 0 0 0 24px;
}

.tag {
	border-radius: 16px;
	background: #eee;
	color: #252525;
	padding: 4px 16px 4px 16px;
}
.tag:hover {
	background: #ff6c00;
	color: #fff;
}
.product-image {

}
/* No image */
.no-image {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	border: 1px solid #ddd;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.no-image:after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	height: 50px;
	width: 50%;

	border-right: 1px solid #ddd;
	-webkit-transform: skew(-45deg);
	-moz-transform: skew(-45deg);
	transform: skew(-45deg);
	z-index: 2;
}
.no-image:before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	height: 50px;
	width: 50%;

	border-right: 1px solid #ddd;
	-webkit-transform: skew(45deg);
	-moz-transform: skew(45deg);
	transform: skew(45deg);
	z-index: 2;
}

/* ------------------------------------------------------- */
/* BREADCRUMBS */
/* ------------------------------------------------------- */
ul.breadcrumb {
	width: 100%;
	position: relative;
	padding: 0;
	margin: 0;
	transition: none;
}
ul.breadcrumb::after {
	content: "";
	clear: both;
	display: table;
	margin: 0 0 16px 0;
}
ul.breadcrumb li {
	background: #f0f0f0;
	list-style: none;
	float: left;
	height: 48px;
	padding: 0;
	color: #252525;
	border: 1px solid #dedede;
	border-right: 0;
}
ul.breadcrumb li:hover {
	background: #ff6c00;
	border-color: #ff6c00;
}
ul.breadcrumb li:last-child {
	border-radius: 0 8px 8px 0;
	border-right: 1px solid #dedede;
}
ul.breadcrumb li:first-child {
	border-radius: 8px 0 0 8px;
}
ul.breadcrumb li:first-child a {
	padding: 12px 16px 8px 16px;
}
ul.breadcrumb li.one {
	border-right: 1px solid #dedede;
	border-radius: 8px;
}
ul.breadcrumb li a {
	display: block;
	font-size: 1em;
	padding: 16px 16px 4px 16px;
	color: #252525;
}
ul.breadcrumb li a:hover {
	color: #ff6c00;
	transition: none;
}
ul.breadcrumb li:hover a {
	color: #fff;
}

.checkbox {
	display: inline-block;
	position: relative;
	padding-left: 32px;
	margin: 0 16px 8px 0;
	cursor: pointer;
	font-size: 1em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 4px;
}
.checkbox:hover input ~ .checkmark {
	background-color: #ccc;
	border-radius: 4px;
}
.checkbox input:checked ~ .checkmark {
	background-color: #ff6c00;
	border-radius: 4px;
}
.checkbox input[type=radio] ~ .checkmark,
.checkbox:hover input[type=radio] ~ .checkmark,
.checkbox input[type=radio]:checked ~ .checkmark {
	border-radius: 50%;
}
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.checkbox input:checked ~ .checkmark:after {
	display: block;
}
.checkbox .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.checkbox input[type=radio] ~ .checkmark:after {
	border-radius: 50%;
	border: 0;
	left: 9px;
	top: 9px;
	width: 8px;
	height: 8px;
	background: #fff;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}
/* ------------------------------------------------ */
/* LOGIN */
/* ------------------------------------------------ */
.login_facebook {
	border-radius: 8px;
	background: #f9f9f9;
	padding: 8px;
	margin: 0 auto 0 auto;
}
#login {
	width: 100%;
	margin: 64px auto 0 -120px;
	padding: 0;
	box-sizing: border-box;
}
#login div.container {
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
}
#login div.container input.input {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 10px;
	font-size: 1.2em;
}
@media screen and (max-width: 640px) {
	#login {
		width: calc(100% - 32px);
		margin: 64px auto 0 auto;
	}
	#login div.container {
		padding: 20px;
	}
	#login div.container div {
		width: 100%;
	}
	#login div.container input.input {
		width: 100%;
		clear: both;
		display: inline-table;
		margin: 0 0 20px 0;
	}
}
/* Design */
ul.design {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.design li {
	line-height: 160%;
	margin: 4px 0 8px 0;
	float: none !important;
}
ul.design li.images img {
	max-width: 150px;
	max-height: 250px;
	box-sizing: border-box;
	margin: 0 8px 0 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 4px;
	cursor: zoom-in;
}
ul.design li.label {
	background: #eee;
	color: #000;
	font-weight: 500;
	font-size: 1.3em;
	padding: 8px 8px 8px 16px;
	border-radius: 8px;
	margin: 16px 0 8px 0;
}
ul.design li.label p.description {
	color: #999;
	font-size: .8em;
	padding: 0;
	margin: 0 0 4px 0;
	line-height: 100%;
	display: block;
}
ul.design li.description {
	font-size: .9em;
	color: #999;
	margin: 0 0 16px 0;
}
ul.design li.question {
	color: #252525;
	font-size: 1.3em;
	line-height: 2.2em;
}
span.warning {
	background: transparent !important;
	color: #ff6c00;
	font-size: 1.1em;
	line-height: 1.3em;
}

div.warning {
	background: #ffecef;
	color: #ff6c00;
	font-size: 1.1em;
	line-height: 1.3em;
	padding: 16px;
	border-radius: 8px;
	margin: 16px 0 8px 0;
	clear: both;
}
.warning .icon {
	color: #ff6c00;
	display: block;
	margin: 24px;
	transform: scale(2);
}
.warning .description {
	padding: 0;
	margin: 4px 0 0 0;
	font-size: .85em;
}
.landing {
	width: calc(100% - 48px);
	margin: 0 auto 0 auto;
	text-align: center;
}
.landing .warning {
	width: auto;
	display: inline-block;
	margin: 24px auto 0 auto;
	padding: 24px;
	border-radius: 8px;
}
div.upload_image:hover {
	background: #e7e7e7;
}
div.upload_image {
	border: 1px solid #ccc;
	box-sizing: border-box;
	background: #eee;
	width: 150px;
	height: 250px;
	border-radius: 4px;
	padding: 100px 0 0 0;
	margin: 0 8px 0 0;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
}
ul.design li.submit {
	margin: 4px 0 0 0;
	line-height: 350%;
}
ul.design li.upload {
	margin: 0 0 16px 0;
	clear: both;
}
ul.design li.upload:after {
	content: "";
	display: block;
	clear: both;
}
ul.design span.suggest {
	background: #dadada;
	border-radius: 24px;
	padding: 4px 16px 4px 16px;
	cursor: pointer;
	margin: 0 0 4px 0;
}
ul.design li input[type=radio],
ul.design li label {
	cursor: pointer;
}
:root {
	--pw: 1%;
}
@keyframes grow_right {
	0% {
		width: 1%;
	}
	100% {
		width: var(--pw);
	}
}
div.percent {
	background: #eee;
	border-radius: 16px;
	height: 12px;
	margin: 4px 0 16px 0;
	position: relative;
	border: 4px solid #eee;
}
div.percent div.current {
	width: var(--pw);
	background: #ff6c00;
	height: 12px;
	border-radius: 16px;
	animation: 2s ease-out 0s 1 normal grow_right;
}
#clear, .clear {
	clear: both
}
.link {
	padding: 16px 16px 16px 48px;
	margin: 4px auto 4px auto;
	background: #f0f0f0;
	width: calc(100% - 64px);
	position: relative;
	display: inline-block;
	border-radius: 8px;
	cursor: pointer;
	line-height: 100%;
}
.link:hover {
	background: #e8f2dd;
	color: #669933;
	cursor: pointer;
}
.link:active {
	background: #b2d68a;
}
.link i {
	position: absolute;
	top: 12px;
	left: 16px;
}
.link input {
	width: 1px;
	height: 1px;
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
}
/* ------------------------------------------------------- */
/* PAGE LAYOUT */
/* ------------------------------------------------------- */
.content {
	width: 100%;
	padding: 8px;
	margin: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}
.block {
	background: #fff;
	margin: 8px 8px 8px 4px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
	padding: 16px;
	line-height: 100%;
}
.block span.user {
	color: #ff6c00;
	display: block;
	clear: both;
	margin: 0 0 5px 0;
}
.block span.date {
	color: #ddd;
	clear: both;
	display: block;
	margin: 5px 0 0 0;
}
/* Wrapper */
.wrapper {
	background: #f9f9f9;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	.wrapper {
		width: calc(100% - 32px);
		margin: 0 16px 0 16px;
	}
}
.wrapper:after {
	clear: both;
	display: block;
	position: relative;
	content: ' ';
	height: 8px;
	width: 100%;
}

div#left {
	background: #232323;
	position: fixed;
	top: 0;
	left: 0;
	width: 240px;
	height: calc(100vh);
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 10000;
}
div#left::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.3);
}
@media screen and (max-width: 640px) {
	div#left {
		width: 100%;
		float: none;
		clear: both;
	}
}
div#left ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
div#left li {
	padding: 0 16px 0 16px;
	width: calc(100% - 24px);
	cursor: pointer;
	position: relative;
	list-style: none;
	font-size: .9em;
}
div#left div.notification {
	background: #1a759a;
	color: #5d9eba;
	min-width: 1px;
	height: 20px;
	border-radius: 5px;
	position: absolute;
	top: 8px;
	right: 10px;
	padding: 0 5px 0 5px;
	text-align: center;
	line-height: 20px;
	font-size: .85em;
}
div#left div.notification i {
	line-height: 22px;
}
div#left div.new {
	background: #ff6c00;
	color: #ffe9ee;
	padding: 0 5px 0 5px;
}
div#left h1 {
	font-size: .9em;
	font-weight: bold;
	width: calc(100% - 32px);
	padding: 24px 16px 8px 16px;
	color: #808080;
	border: 0;
	margin: 0;
	text-transform: uppercase;
}
div#left div.close {
	position: fixed;
	top: 16px;
	right: 24px;
	cursor: pointer;
	background: #000;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	text-align: center;
	z-index: 10000;
	overflow: hidden;
	display: none;
	transition: none;
	opacity: .8;
}
div#left div.close:hover {
	background: #ff6c00;
	color: #fff;
}
@media screen and (max-width: 640px) {
	div#left div.close {
		display: inline-block;
	}
}
div#left div.close i {
	position: absolute;
	top: 4px;
	left: 4px;
}
div#left ul.menu {
	background: #232323;
	list-style: none;
	margin: 0;
	padding: 0;
}
div#left ul.menu li i {
	color: #c2c2c2;
	position: absolute;
	top: 12px;
	left: 12px;
}
div#left ul.menu li a {
	font-size: 1em;
	padding: 16px 16px 16px 48px;
	color: #c2c2c2;
	width: calc(100% - 64px);
	display: block;
	position: relative;
	transition: none;
}
div#left ul.menu li a:hover,
div#left ul.menu li a:hover i,
div#left ul.menu li a.focus:hover {
	color: #fff;
	opacity: 1;
}
div#left ul.menu h1.focus {
	color: #fff;
	opacity: 1;
}
div#left ul.menu li a.focus {
	background: #343434;
	border-radius: 8px;
	color: #fff;
	opacity: 1;
}
div#left ul.menu li a.focus i {
	color: #fff;
	opacity: 1;
}
div#left ul.menu li .counter {
	background: #ff6c00;
	color: #fff;
	border-radius: 4px;
	font-size: .85em;
	position: absolute;
	top: 12px;
	right: 8px;
	padding: 4px 6px 4px 6px;
}
div#left ul.menu li .counter[data="0"] {
	background: #313131;
	color: #999;
}

/* Menu Switch On Off */
div.menu_switch {
	width: 50px;
	height: 50px;
	text-align: center;
	display: none;
	overflow: hidden;
}
div.menu_switch a {
	display: block;
	width: 50px;
	height: 50px;
	padding: 15px 0 0 0;
	color: #fff;
	background: #ffdd04;
}
div.menu_switch a:active {
	display: block;
	width: 50px;
	height: 50px;
	padding: 15px 0 0 0;
	color: #fff;
	background: #000  ;
}
@media screen and (max-width: 640px) {
	div.menu_switch {
		display: inherit;
		width: 50px;
		height: 50px;
	}
}
/* Right */
div#right {
	padding: 0 0 0 260px;
	width: calc(100% - 288px);
	float: left;
	display: table;
	position: relative;
	overflow-x: hidden;
}
@media screen and (max-width: 640px) {
	div#right {
		padding: 0;
		width: 100%;
		float: none;
		clear: both;
	}
}
.dialog {
	display: table;
	width: auto;
	padding: 32px;
	font-size: 1.5em;
	margin: 10% auto 0 auto;
	text-align: center;
	background: #e8f2dd;
	color: #669933;
	border-radius: 8px;
}
.dialog .submit {
	display: inherit;
	margin: 24px auto 0 auto;
	font-size: .8em;
	width: auto;
}
.dialog p.description {
	font-size: .8em;
	font-weight: normal;
}
span.countdown:after {
	content: "0";
	width: 1ch;
	animation: countdown 10s step-end normal;
}
@keyframes countdown {
	0% {
		content: "9";
	}
	10% {
		content: "8";
	}
	20% {
		content: "7";
	}
	30% {
		content: "6";
	}
	40% {
		content: "5";
	}
	50% {
		content: "4";
	}
	60% {
		content: "3";
	}
	70% {
		content: "2";
	}
	80% {
		content: "1";
	}
	90% {
		content: "0";
	}
	100% {
		content: "0";
	}
}
/* ------------------------------------------------------- */
/* BUTTON */
/* ------------------------------------------------------- */
.button,
button {
	background: #e9e9e9;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 1em;
	color: #666;
	cursor: pointer;
	line-height: 32px;
	min-height: 32px;
	padding: 8px 12px 4px 14px;
	border: 1px solid #e9e9e9;
	border-radius: 8px;
	white-space: nowrap;
	margin: 0 8px 8px 0;
	-webkit-appearance: none;
	display: inline-flex;
}
.button:hover,
button:hover {
	background: #333;
	border: 1px solid #333;
	color: #ccc;
}
.button:hover i,
button:hover i {
	color: #fff;
}
.button i,
button i {
	transition: none;
	padding: 0;
	margin: 2px 2px 2px 2px;
	display: inline-block;
}
.button .number {
	width: auto;
	height: 8px;
	display: inline-block;
	margin: 6px 0 0 8px;
	padding: 4px 8px 8px 8px;
	line-height: 100%;
	background: #ff6c00;
	border-radius: 24px;
	color: #fff;
	font-size: .9em;
}
.button:hover .number {
	background: #fff;
	color: #333;
}
button.focus {
	font-size: 11px;
	color: #fff;
}
button.focus:hover {
	background-position: 0 -60px;
	border: 1px solid #0e6a33;
}
a.submit,
button.submit,
input.submit {
	color: #fff;
	background: #ff6c00;
	border: 1px solid #ff6c00;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1em;
	box-shadow: 0 1px 5px #eee;
	-webkit-appearance: none;
	min-width: unset;
}
a.submit:hover,
button.submit:hover,
input.submit:hover {
	min-width: unset;
	background: #c6551e;
	border: 1px solid #c6551e;
}
.disabled,
input.disabled,
input[disabled],
input[disabled]:hover {
	background: #eee;
	color: #666;
	cursor: not-allowed;
	border: 1px solid #ddd;
}
.error_log {
	font-family: 'Courier New', arial, sans-serif;
	background: #333;
	color: #ccc;
	width: 100%;
	height: 200px;
	padding: 10px;
	line-height: 200%;
	box-sizing: border-box;
}
.upload_image {
	display: block;
	float: left;
	width: 130px;
	height: 200px;
	position: relative;
}
.upload_image span {
	color: #ccc;
	display: block;
	background: #f0f0f0;
	width: 130px;
	height: 200px;
	text-align: center;
	padding: 60% 0 0 0;
	border: 1px solid #e5e5e5;
	box-sizing: border-box;
}
.upload_image img {
	width: 130px;
	height: 200px;
	border-radius: 3px;
}
.upload_image input#file {
	cursor: pointer;
	position: absolute;
	width: 130px;
	height: 225px;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
.upload_image input.submit {
	display: block;
}
.post_type {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: table;
}
.post_type li {
	margin: 0 8px 0 0 !important;
	background: #f0f0f0;
	border-radius: 8px;
	text-align: center;
	width: 48px !important;
	height: 48px;
	cursor: pointer;
	display: inline-block;
	position: relative;
}
.post_type li i {
	position: absolute;
	top: 12px;
	left: 12px;
}
.post_type li:hover,
.post_type li.active {
	background: #ff6c00;
	color: #fff;
}

/* ------------------------------------------------------- */
/* LAYOUT */
/* ------------------------------------------------------- */
ul.layout {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.layout li {
	width: 100%;
	clear: both;
	line-height: 30px;
	min-height: 30px;
}
.full-size {
	width: 100%;
}
ul.product {
	margin: 10px 0 10px 0;
	display: inline-block;
}
ul.product textarea.description {
	height: 150px;
}
ul.product li.import_date option,
ul.product li.import_date select {
	width: 80px;
	white-space: nowrap;
}
ul.size {
	width: 100%;
	clear: both;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #ddd;
	border-top: 0;
	border-radius: 4px;
	display: table;
}
ul.size div.wrap_size {
	width: 100%;
	float: left;
	margin: 10px 0 10px 10px;
}
ul.size div.wrap_size input,
ul.size div.wrap_size select {
	cursor: not-allowed;
}
ul.size li {
	width: auto;
	float: left;
	clear: none;
	border: 0;

	border-radius: 4px 4px 4px 4px;
	min-width: 40px;
	text-align: center;
	padding: 0 !important;
	margin: 0 8px 0 0;
 	overflow: hidden;
}
ul.size li.input {
	border: 1px solid #ddd;
}
ul.size li:first-child {
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 4px 0 0 4px;
	margin: 0;
}
ul.size li:nth-child(2) {
	border: 1px solid #ddd;
	border-radius: 0 4px 4px 0;
	border-left: 0;
	background: #fff;
	min-width: 50px;
	margin-right: 10px;
}
ul.size li.colors {
	border: 0;
	background: transparent;
	cursor: pointer;
	margin: 0 5px 0 0;
}
ul.size li.colors li {
	border: 0;
}
ul.size li input {
	border: 0;
	background: #fff;
	outline: none;
	width: 40px;
}
ul.size_choose {
	list-style: none;
	display: block;
	height: 40px;
	margin: 5px 0 0 0;
	padding: 0;
	width: 100%;
	position: relative;
	overflow: hidden;
	transition: none;
}
ul.size_choose li {
	width: auto;
	float: left;
	height: 38px;
	clear: none;
	border: 1px solid #f9f9f9;
	border-radius: 4px 4px 0 0;
	margin: 0 0 0 10px;
	padding: 0 15px 0 0 !important;
	cursor: pointer;
	z-index: 1;
	position: relative;
}
ul.size_choose:after {
	content: '';
	width: 100%;
	height: 1px;
	position: absolute;
	background: #ddd;
	margin: 0 3px 0 3px;
	bottom: 0;
	display: block;
	z-index: 2;
}
ul.size_choose li:last-child {
	float: right;
	padding: 0 !important;
	cursor: default;
}
ul.size_choose li:last-child:hover,
ul.size_choose li:last-child:active {
	border: 1px solid #f9f9f9;
	cursor: default;
	z-index: -1;
}
ul.size_choose li:last-child div {
	float: left;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px 0 0 4px;
	padding: 0 15px 0 15px;
	margin: 0;
}
ul.size_choose li:last-child div:nth-child(2) {
	background: #fff;
	border: 1px solid #ddd;
	border-left: 0;
	border-radius: 0 4px 4px 0;
	color: #ff6c00;
	font-weight: bold;
	font-size: 1.1em;
}
ul.add-size {
	list-style: none;
	min-height: 100px;
	position: fixed;
	top: 40%;
	padding: 20px;
	background: #fff;
	z-index: 999999;
	box-shadow: 0 1px 5px #ccc;

}
ul.add-size li {
	margin: 0 0 5px 0;
}
ul.add-size label {
	background: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 4px 0 0 4px;
	padding: 6px 9px 6px 9px;
	margin: 0 -4px 0 0;
}
ul.add-size li.submit {
	clear: both;
}
ul.colors {
	float: left;
	box-sizing: border-box;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0 0 0 0;
}
ul.colors li {
	float: left;
	width: 30px;
	clear: right;
	border: 0;
	background: transparent !important;
	margin-right: 0 !important;
	min-width: 10px !important;
}
ul.colors input {
	display: none;
}
ul.colors div.color_choose {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	cursor: pointer;
	color: #fff;
	text-align: center;
	margin: 7px 0 3px 0;
}
ul.colors div.black_text {
	box-shadow: 0 0 3px #ccc;
	color: #252525;
}
ul.colors div.color_choose i {
	padding-top: 5px;
}
span.color,
ul.colors li span {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	display: inline-block;
	border: 1px solid #fff;
}
ul.list_categories {

}
ul.list_categories li {
	min-height: 20px !important;
}
.search_category {
	margin: 0;
	position: relative;
}
.search_category input {
	width: 100%;
	border-radius: 8px 8px 0 0;
	border-bottom: 0;
}
.search_category .clear {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 6px;
	right: 8px;
	cursor: pointer;
}
.search_category .clear i {
	color: #ccc;
}
.search_category .clear:hover i {
	color: #ff6c00;
}
ul.categories {
	border: 1px solid #999;
	background: #fff;
	width: 100%;
	height: 400px;
	padding: 8px;
	box-sizing: border-box;
	list-style: none;
	overflow: hidden;
	overflow-y: scroll;
	cursor: pointer;
	border-radius: 0 0 8px 8px;
}
ul.categories ul {
	list-style: none;
	padding: 0 0 0 24px;
}
ul.categories li:first-child {
	padding: 0 !important;
}
ul.categories li {
	width: 100%;
	font-size: .8em;
	position: relative;
}
ul.categories li:before {
	position: absolute;
	top: 10px;
	left: -12px;
	content: '';
	border-bottom: 1px dashed #ccc;
	width: 18px;
	height: 1px;
	z-index: 1;
}
ul.categories li:after {
	position: absolute;
	top: -24px;
	left: -12px;
	content: '';
	border-left: 1px dashed #ccc;
	width: 1px;
	height: 32px;
	z-index: 1;
}
ul.categories li label {
	z-index: 2;
}
ul.categories li:hover {
	color: #ff6c00;
	transition: none;
}
ul.categories li div.link-list {
	float: right;
	font-size: .9em;
}

ul.status div {
	float: left;
	margin: 5px 0 0 4px;
}
ul.status i {
	position: absolute;
	top: 4px;
	left: 4px;
}
ul.status a {
	margin: 0;
	height: 36px;
	font-size: .8em;
	padding: 8px 8px 8px 32px;
	border-radius: 8px;
	position: relative;
}
ul.status #confirmed a {
	padding: 8px 8px 8px 24px;
}
ul.status a.process {
	background: #f0f0f0;
	color: #ccc;
	border: 1px solid #eee;
	cursor: progress;
}
ul.status a.off {
	background: #f0f0f0;
	color: #ccc;
	border: 1px solid #eee;
}
ul.status a.on {
	background: #ff6c00;
	color: #fff;
	border: 1px solid #ff6c00;
}
div.progress-task div {
	background: #eee;
	float: left;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin: 0 16px 0 0;
	position: relative;
}
div.progress-task div::after {
	content: ' ';
	width: 16px;
	height: 1px;
	border-bottom: 1px dashed #eee;
	position: absolute;
	top: 13px;
	right: -16px;
}
div.progress-task div:last-child::after {
	border: 0;
}
div.progress-task div.current {
	background: #ff6c00;
}
ul.product ul.images {
	display: table;
	width: 200px;
	height: 200px;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.product ul.images li {
	display: table;
	width: 200px;
	height: 200px;
	float: left;
	clear: none;
	margin: 0 10px 0 0;
	padding: 0;
	text-align: center;
}
ul.product ul.images img {
	width: 200px;
	height: 200px;
	border: 0;
	margin: 0 0 10px 0;
}
ul.product ul.images input[type=text] {
	width: 200px;
	margin: 0 0 15px 0;
}
ul.product ul.images input[type=submit] {
	
}
ul.product li#load_product_images {
	padding: 0;
	width: 100%;
}
ul.product li#load_product_images iframe {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 400px;
	overflow: hidden;
	border: 0;
}
/* ------------------------------------------------------- */
/* SPLIT */
/* ------------------------------------------------------- */
ul.split {
	width: 100%;
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0;
	display: table;
}
ul.split li {
	float: left;
}
ul.split li.w12 {
	width: 100%;
}
ul.split li.w8 {
	width: calc(80% - 16px);
	margin: 0 16px 0 0;
}
ul.split li.w7 {
	width: 70%;
}
ul.split li.w5 {
	width: 50%;
}
ul.split li.w4 {
	width: 40%;
}
ul.split li.w3 {
	width: 30%;
}
ul.split li.w2 {
	width: 20%;
}
ul.split .right {
	width: calc(100% - 16px);
	padding: 0 0 0 16px;
}
ul.split li.w5 .table {
	width: calc(100% - 16px);
	margin: 0 16px 0 0;
}
ul.split li.w5 .design {
	width: calc(100% - 8px);
	margin: 0 8px 0 0;
}
ul.split li.w5:last-child .design {
	margin: 0 0 0 8px;
}
/* Table */
ul.table {
	width: calc(100% - 2px);
	background: #fff;
	min-height: 30px;
	list-style: none;
	border: 1px solid #ddd;
	border-top: 0;
	margin: 0;
	padding: 0;
	clear: both;
	display: table;
	position: relative;
}
div.table_wrapper .table:last-child {
	border-radius: 0 0 8px 8px;
	margin: 0 0 16px 0;
}
ul.table_footer {
	border-radius: 0 0 8px 8px;
	margin: 0 0 16px 0;
}

ul.table li {
	min-width: 1%;
	line-height: 150%;
	padding: 16px 8px 8px 8px;
	float: left;
	min-height: 24px;
	color: #252525;
}
@media screen and (max-width: 640px) {
	ul.table li {
		padding: 4px 8px 8px 8px !important;
		min-height: unset;
	}
}
/* table_header */
ul.table_header li {
	min-height: 8px;
	padding: 8px 8px 8px 8px !important;
	font-size: .9em;
	cursor: pointer;
}
ul.table_header li i {
	font-size: .8em;
}
@media screen and (max-width: 640px) {
	ul.table_header li {
		min-height: unset;
		font-size: .8em;
	}
}
ul.table_header,
ul.table li.header {
	background: #f9f9f9;
}
ul.table_header {
	border: 1px solid #ddd;
	color: #252525;
	border-radius: 8px 8px 0 0;
	margin: 16px 0 0 0;
}
ul.table_board li {
	font-size: 2em;
	font-weight: normal;
}
ul.table li.number {
	font-size: 1em;
	min-width: 32px;
	clear: both;
	overflow: hidden;
	text-align: center;
	color: #ccc;
}
ul.table_board li.number {
	min-width: 24px;
}
ul.table li.nobody {
	color: #aaa;
	text-align: center;
	width: 100%;
	min-height: 32px;
}
ul.table li.image {
	text-align: center;
	width: 48px;
}
ul.table li.image .symbol {
	display: inline-block;
	text-align: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #f0f0f0;
	color: #ff6c00;
}
ul.table li.image .verified {
	background: #e8f2dd;
	color: #669933;
}
ul.table li.image div.symbol i {
	margin: 12px 0 0 0;
}
ul.table li.image img {
	max-width: 56px;
	max-height: 56px;
}
ul.table li.image img.product-image {
	border: 0;
}
ul.table li.image img.book {
	border: 0;
}
ul.table li.order {
	width: 5%;
	font-size: 14px;
}
ul.table_sub {
	background: #f9f9f9;
}
ul.table_sub li.order {
	padding: 10px 10px 10px 32px;
}
ul.table li.title {
	width: 20%;
	word-break: break-word;
}
ul.table li.title .description {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
}
ul.table li span.unknown {
	color: #666;
}
ul.table li.grade {
	width: 20%;
}
@media screen and (max-width: 640px) {
	ul.table li.grade {
		width: calc(100% - 32px);
	}
}
ul.table li.submit {
	text-align: right;
	width: 20%;
}
@media screen and (max-width: 640px) {
	ul.table li.submit {
		text-align: left;
		width: calc(100% - 32px);
	}
}
ul.table li.grade_willingness {
	min-width: 160px;
}
ul.table li.grade_minimize {
	width: 48px;
}
ul.table li.grade_results {
	width: 8%;
}

.point_good,
.point_normal,
.point_bad {
	font-size: 1em;
	border-radius: 4px;
	padding: 4px 8px 4px 8px;
	text-align: center;
	white-space: nowrap;
}
.point_good {
	background: #e8f2dd;
	color: #669933;
}
.point_normal {
	background: #f0f0f0;
	color: #333;
}
.point_bad {
	background: #f5e3e6;
	color: #ff6c00;
}
ul.table li.point {
	min-width: 48px;
}
ul.table li.order {
	width: 30%;
}
ul.table li.order a {
	background: #fff;
	border-radius: 24px;
	width: 24px;
	height: 24px;
	display: block;
}
ul.table li.order a:hover {
	background: #ff6c00;
	color: #fff;
}
ul.table li p.description {
	font-size: .95em;
	line-height: 150%;
	padding: 0;
	margin: 4px 0 0 0;
	color: #999;
}
ul.table li.title i,
ul.table li.month i {
	font-size: .8em;
	font-style: normal;
}
ul.table li.comment {
	width: 13%;
}
ul.table li.group {
	width: 10%;
	word-break: break-word;
}
ul.table li.voucher {
	width: auto;
}
@media screen and (max-width: 640px) {
	ul.table li.group {
		width: calc(50% - 32px);
	}
	ul.table li textarea {
		width: 100%;
	}
}
ul.table li.class {
	width: calc(100% - 32px);
}
@media screen and (max-width: 640px) {
	ul.table li.class {
		width: calc(100% - 32px);
	}
}
ul.table li.class .member_class {
	font-size: 1.1em;
	width: calc(100% - 32px);
	background: #f9f9f9;
	border-radius: 8px;
	padding: 16px 16px 16px 16px;
	margin: 4px 0 0 0;
	display: inline-block;
	position: relative;
}
ul.table li.class .member_class p {
	font-size: .8em;
	position: absolute;
	top: 0;
	right: 16px;
	background: #666;
	color: #fff;
	border-radius: 16px;
	padding: 4px 16px 4px 16px;
}
ul.table li.class .member_class:hover {
	background: #ff6c00;
	color: #fff;
}
ul.table li.class .member_class:hover p {
	background: #fff;
	color: #ff6c00;
}
ul.table li.month {
	min-width: 72px;
	cursor: pointer;
}
ul.table li.email {
	width: 10%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
ul.table li.type {
	width: 11%;
}
ul.table li.type b {
	text-transform: uppercase;
	font-weight: normal;
}
ul.table li.attendance {
	width: 15%;
}
@media screen and (max-width: 640px) {
	ul.table li.attendance {
		width: 100%;
	}
}
ul.table li.attendance span.off {
	color: #ccc;
}
ul.table li.attendance span.on {
	color: #4cd392;
	padding: 4px 0 0 32px;
	position: relative;
}
ul.table li.attendance span.on i {
	position: absolute;
	top: 0;
	left: 0;
}
ul.table li.attendance span.warning {
	color: #ff6c00;
	padding: 4px 0 0 32px;
	position: relative;
	line-height: 1.6em;
}
ul.table li.attendance span.warning i {
	position: absolute;
	top: 0;
	left: 0;
}
ul.table li.tools {

}
ul.table li.tools a {
	cursor: pointer;
}
ul.table li.tools .attendance {
	background: #4cd392;
	color: #fff;
	border: 1px solid #4cd392;
}
ul.table li.switch {
	width: 10%;
}
ul.table li.switch a i.off {
	color: #ccc !important;
}
ul.table li.free {
	width: auto;
}
ul.table li.chart {
	width: 320px;
}
@media screen and (max-width: 640px) {
	ul.table li.chart {
		width: calc(100% - 64px);
	}
}
ul.table li.leader {
	width: 15%;
}
ul.table li.leader a {
	color: #ccc;
}
ul.table li.leader a:hover,
ul.table li.leader a.active {
	color: #ff6c00;
}
ul.table li.active {
	width: 10%;
}
ul.table li.active i {
	color: #ccc;
	cursor: pointer;
}
ul.table li.active i.on {
	color: #ff6c00;
}
ul.table li.message {
	width: 40%;
}
ul.table li.answer {
	width: 35%;
	font-size: .9em;
}
ul.table li .unlink {
	padding: 4px 8px 8px 8px;
	min-height: 28px;
}
ul.table li.progress {
	width: 200px;
}
ul.table li.progress .bar {
	width: 100%;
	height: 8px;
	background: #f0f0f0;
}
ul.table li.progress .bar .current {
	width: 50px;
	height: 8px;
	background: #ff6c00;
	min-width: 1px;
}
ul.table li .category_name {
	padding: 4px 16px 4px 16px;
	margin: 0 8px 0 0;
	background: #f5f5f5;
	border-radius: 16px;
	display: inline-block;
	float: left;
	font-size: .9em;
}

.card {
	width: calc(100% - 48px);
	list-style: none;
	border-radius: 16px;
	margin: 8px 0 16px 0;
	padding: 16px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	position: relative;
}
.card .status {
	background: #f5f5f5;
	position: absolute;
	bottom: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-align: center;
}
.card .status_done {
	background: #e8f2dd;
	color: #669933;
}
.card .status i {
	margin: 4px 0 0 0;
}
.card .description {
	font-size: .9em;
	color: #999;
}

/* Sortable */
.sortable {
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.sortable li {
	width: 100%;
}

.delete {
	display: block;
	margin: 24px 0 0 0;
}
.image_upload {
	text-align: center;
	width: 48px;
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 16px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	float: left;
}
.image_upload i {
	color: #ccc;
	opacity: 1;
}
.image_upload:hover,
.image_upload_active {
	background: #ff6c00;
	border: 1px solid #ff6c00;
	color: #fff;
	opacity: 1;
}
.image_upload_active i {
	color: #fff;
}
.image_upload_active a i {
	color: #ccc;
}
.upload .remove {
	width: 24px;
	height: 24px;
	z-index: 2;
	display: block;
	float: left;
	margin: 8px;
	text-align: center;
}
.upload .remove:hover {
	transition-duration: 1s;
	transform: rotate(360deg);
	transform-origin: center;
}
ul.orders input {
	width: 100%;
}
.orders {
	position: relative;
	cursor: pointer;
}
.orders .outstock {
	position: absolute;
	top: 14px;
	left: -8px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: #ff6c00;
	color: #fff;
	text-align: center;
	padding: 4px 0 0 0;
	box-sizing: border-box;
}
.orders .outstock i {
	color: #fff !important;
	font-size: .9em;
}
span.phone {
	color: #999;
	background: #f0f0f0;
	border-radius: 4px;
	font-size: .9em;
	box-sizing: border-box;
	padding: 3px 4px 2px 4px;
	display: inline-block;
}
.orders span.price {
	color: #ff6c00;
	display: block;
	clear: left;
	margin: 5px 0 0 0;
}
.orders span.price-float {
	position: absolute;
	top: 4px;
	right: 0;
}
.orders span.items {
	color: #666;
	margin: 8px 0 10px 0;
	display: block;
	clear: left;
}
.orders span.items p {
	font-size: .9em;
	padding: 0 0 5px 0;
	margin: 0;
}
.orders span.items p.shipped {
	color: #ccc;
}
.orders span.items p i {
	color: #ccc;
	font-style: normal;
}
.orders span.items p b {
	font-weight: normal;
	color: #ff6c00;
}
.orders span.ship {
	display: block;
	padding: 8px 0 0 0;
}
.orders span.address {
	color: #ccc;
	margin: 5px 0 10px 0;
	display: block;
	clear: left;
}
.orders i.on {
	color: #ff6c00;
}
.orders i.off {
	color: #ccc;
}
.orders div.status {
	position: absolute;
	bottom: 10px;
	right: 16px;
}
.orders div.comments {
	position: absolute;
	top: 10px;
	right: 16px;
	color: #ccc;
}
.orders div.comments i {
	font-size: 1em;
}
.add-more-item {
	background: #f0f0f0;
	padding: 16px 0 16px 0;
	border-radius: 8px;
	width: 100%;
	cursor: pointer;
	margin: 4px 0 0 0;
	color: #fff;
	text-align: center;
}
.add-more-item p {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: #ff6c00;
	margin: 0 auto 0 auto;
}

#form-add-customer {
	background: #fff;
	padding: 8px;
	box-sizing: border-box;
}
#form-add-customer input,
#form-add-customer textarea {
	width: 100%;
	margin: 0 0 8px 0;
}

.comment {
	clear: both;
	width: 100%;
	margin: 0 0 20px 0;
	display: block;
}
.comment .owner {
	padding: 5px 0 5px 0;
	text-align: right;
}
.comment .user {
	color: #999;
}
.comment .text {
	background: #eee;
	border-radius: 2px 16px 16px 16px;
	padding: 8px 16px 8px 8px;
	float: left;
}
.comment .owner .text {
	background: #ff6c00;
	border-radius: 16px 2px 16px 16px;
	color: #fff;
	float: right;
	padding: 8px 8px 8px 16px;
}
ul.summary {
	background: #f9f9f9;
	border: 1px solid #eaeaea;
	border-bottom: 0;
	display: inline-block;
	padding: 0;
	margin: 0;
}
ul.summary_total {
	background: #fff;
	border-bottom: 1px solid #eaeaea;
}
ul.summary input {
	width: auto;
}
ul.summary li {
	float: left;
	width: 50% !important;
	min-height: 30px;
	clear: right !important;
	padding: 10px !important;
}
ul.summary li:first-child {
	width: 15% !important;
}
ul.summary li.total,
ul.prepare li.total {
	font-size: 1.2em;
	color: #ff6c00;
	float: right;
	text-align: right;
	width: 50% !important;
	white-space: nowrap;
}
ul.prepare {
	border: 0;
}
ul.prepare li {
	min-height: 30px;

}
/* ------------------------------------------------------- */
/* Popup */
/* ------------------------------------------------------- */
.popup {
	display: none;
	position: fixed;
	width: 30%;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: 8px 24px 24px 24px;
	border: 0;
	border-radius: 16px;
	z-index: 9999;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
@media screen and (max-width: 1280px) {
	.popup {
		width: 50%;
	}
}
.popup select,
.popup input {
	width: 100%;
	margin: 4px 0 4px 0;
}
.popup .close {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	text-align: center;
	background: transparent;
	border: 0;
	position: absolute;
	top: 16px;
	right: 8px;
}
.popup #add-to-cart {
	width: 100%;
	background: #252525;
	color: #fff;
	text-align: center;
	border: 0;
	display: table;
}
.popup #add-to-cart:hover {
	background: #ff6c00;
}
/* ------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------ */
footer {
	background: #0e0503;
	color: #fff;
	width: 100%;
	padding: 16px 0 0 0;
	margin: 48px 0 0 0;
}
footer a {
	color: #fff;
}
footer div.footer_links {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	footer div.footer_links {
		width: 100%;
	}
}
footer div.footer_links ul {
	font-size: .9em;
	vertical-align: top;
	list-style: none;
	margin: 16px 0 0 0;
	padding: 0;
	display: inline-block;
	width: 24%;
}
footer div.footer_links ul li {
	padding: 8px 0 0 0;
	color: #fff;
}
footer div.footer_links ul li.category {
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	footer div.footer_links ul {
		width: 49%;
	}
	footer div.footer_links ul li {
		padding: 8px 24px 0 24px;
	}
}
footer div.footer_information {
	width: 1280px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1280px) {
	footer div.footer_information {
		width: 100%;
	}
}
/* ------------------------------------------------ */
/* COPYRIGHT */
/* ------------------------------------------------ */
.copyright {
	width: calc(100% - 48px);
	line-height: 120%;
	margin: 50px auto 0 auto;
	padding: 24px;
	overflow: hidden;
	font-size: .9em;
	color: #fff;
	text-align: center;
	clear: both;
}