@charset "utf-8";
/* -------------------------------------------------------
CSS Document

SETTINGS
Logo
Search
Search Results
No Image
BREADCUMBS
DASHBOARD
ACCOUNT
LOGIN FORM
TOP MENU
PAGE LAYOUT
BUTTON
LAYOUT
SPLIT
MENU TOOLS
TABLE
BOARD
POPUP
EDIT ARTICLE
ARTICLES
COPYRIGHT

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

/* ------------------------------------------------------- */
/* SETTINGS */
/* ------------------------------------------------------- */
BODY {
	background: #f9f9f9;
	margin: 0;
	padding: 48px 0 0 0;
	overflow-y: scroll;
	overflow-x: hidden;
}

BODY, td, div, pre {
	color: #000;
	font-family: Roboto, sans-serif;
	font-size: 16px;
}
hr {
	background: #eaeaea;
	border: 0;
	height: 1px;
	margin: 10px 0 10px 0;
	clear: both;
}
* {
	transition: all .2s;
}
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] {
	margin: 0 0 8px 0;
	min-width: 20%;
}
input:focus,
textarea:focus {
	outline: none !important;
	border: 1px solid #ff6c00;
}
.hidden {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}
::-moz-selection {
	color: #fff;
	background: #ff6c00;
}

::selection {
	color: #fff;
	background: #ff6c00;
}
img {
	max-width: 100%;
}
h1 {
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: -1px;
	color: #000;
	padding: 0;
	margin: 8px 0 16px 0;
	cursor: default;
	width: 100%;
	position: relative;
}
h1:after {
	content: "";
	width: 24px;
	height: 1px;
	background: #ff6c00;
	position: absolute;
	bottom: -4px;
	left: 0;
}
h4 {
	font-size: 16px;
	color: #ff6c00;
	padding: 8px 0 8px 0;
	margin: 0;
	font-weight: normal;
}
a {
	color: #ff6c00;
	outline: none;
	text-decoration: none
}
a:hover {
	color: #ff6c00;
	opacity: .8;
}
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
	src: local('Material Icons'),
	local('MaterialIcons-Regular'),
	url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
	url(../fonts/MaterialIcons-Regular.woff) format('woff'),
	url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}
/* Logo */
.logo {
	width: 60px;
	height: 40px;
	padding: 5px 0 0 0;
	float: left;
}
.logo img {
	width: 60px;
	height: 40px;
}
@media screen and (max-width: 640px) {
	.logo {
		position: absolute;
		top: 0;
		left: 60px;
	}
}
/* Float Menu */
.footer_menu {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 64px;
	border-radius: 0;
	background: #fff;
	padding: 0 0 16px 0;
	margin: 0 auto 0 auto;
	z-index: 100;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 640px) {
	.footer_menu {
		left: calc(50% - 250px);
		padding: 0;
		bottom: 16px;
		border-radius: 32px;
		width: 500px;
	}
}
.footer_menu li {
	padding: 0;
	height: 64px;
	text-align: center;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
}
.footer_menu li:first-child {
	padding: 0 0 0 4px;
	border-radius: 32px 0 0 32px;
}
.footer_menu li:last-child {
	padding: 0 4px 0 0;
	border-radius: 0 32px 32px 0;
}
@media screen and (max-width: 640px) {
	.footer_menu li:first-child {
		border-radius: 0;
	}
	.footer_menu li:last-child {
		border-radius: 0;
	}
}
.footer_menu li.focus,
.footer_menu li:hover {
	color: #ff6c00;
}
.footer_menu li b {
	font-weight: normal;
	display: block;
	font-size: .8em;
	color: #000;
}
.footer_menu li.focus b,
.footer_menu li:hover b,
.footer_menu li.focus a,
.footer_menu li:hover a,
.footer_menu li.focus a i,
.footer_menu li:hover a i {
	color: #ff6c00
}
.footer_menu li div.notification {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ff6c00;
	border: 2px solid #fff;
	color: #fff;
	position: absolute;
	top: 5px;
	left: calc(50% + 3px);
}
.footer_menu li div.notification b {
	display: block;
	padding: 0;
	line-height: 1.6em;
	font-size: .7em;
	color: #fff;
}
.footer_menu li a {
	display: block;
	height: 52px;
	padding: 12px 0 0 0;
	border-radius: 0;
	position: relative;
}
.footer_menu li a i {
	color: #000;
}
.footer_menu li:first-child a {
	border-radius: 32px 0 0 32px;
}
.footer_menu li:last-child a {
	border-radius: 0 32px 32px 0;
}
@media screen and (max-width: 640px) {
	.footer_menu li:first-child a {
		border-radius: 0;
	}
	.footer_menu li:last-child a {
		border-radius: 0;
	}
}
.footer_menu .sub_menu {
	width: 360px;
	position: absolute;
	top: -56px;
	height: 56px;
	opacity: 0;
	background: #252525;
	color: #fff;
	border-radius: 8px 8px 0 0;
	margin-left: auto;
	margin-right: auto;
	left: -32px;
	right: 0;
	text-align: center;
}
.footer_menu .sub_menu::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #252525;
	position: absolute;
	bottom: -6px;
	left: 74px;
}
@media screen and (max-width: 640px) {
	.footer_menu .sub_menu {
		display: none;
	}
}
.footer_menu .sub_menu a {
	display: block;
	width: 52px;
	height: 52px;
	float: left;
	margin: 0 8px 0 0;
	color: #fff !important;
}
.footer_menu .sub_menu a:first-child {
	margin: 0 0 0 8px;
}
.footer_menu .sub_menu a:last-child {
	margin: 0 8px 0 0;
}
.footer_menu .sub_menu a i {
	color: #fff !important;
	transform: scale(.9);
}
.footer_menu .sub_menu a b {
	white-space: nowrap;
	font-size: .6em;
	font-weight: normal;
	color: #fff;
}
.footer_menu li.focus .sub_menu b,
.footer_menu li:hover .sub_menu b,
.footer_menu li.focus .sub_menu a,
.footer_menu li:hover .sub_menu a,
.footer_menu li.focus .sub_menu a i {
	color: #fff;
}
.footer_menu .sub_menu a:hover,
.footer_menu .sub_menu a:hover i,
.footer_menu .sub_menu a:hover b {
	color: #ff6c00 !important;
	opacity: 1;
}
.footer_menu li:hover .sub_menu,
.footer_menu li:active .sub_menu {
	opacity: 1;
}
/* Nút CTA góc */
.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 rgba(0, 0, 0, 0.05);
	z-index: 9999999;
}
.float_submit a {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	text-align: center;
}
.float_submit a i {
	color: #fff;
}
.float_cta {
	position: fixed;
	bottom: 80px;
	right: 16px;
	z-index: 1000000;
}
.float_cta:hover .button {
	transform: scale(1.3);
}
.float_cta .button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	line-height: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	display: inline-block;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	transform: scale(1.2);
}
.float_cta .button i {
	text-align: center;
	padding: 0;
	margin: 0;
	top: 12px;
	left: 12px;
}
.scroll_to_top {
	background: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: fixed;
	bottom: -90px;
	right: 16px;
	text-align: center;
	box-shadow: 0 1px 5px #ccc;
	z-index: 1000;
	cursor: pointer;
}
.scroll_to_top i {
	margin-top: 12px;
}
/* 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: 5px;
	position: relative;
	box-sizing: border-box;
	cursor: pointer;
}
.search input[name=search] {
	min-width: 100%;
	height: 24px;
	border: 1px solid #ddd;
	font-size: 1.2em;
	margin-top: 3px;
	outline: none;
	z-index: 8;
	min-height: 32px;
	box-sizing: border-box;
}
.search i {
	position: absolute;
	top: 13px;
	right: 12px;
	color: #ccc;
}
.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: 99;
	cursor: pointer;
}
.filter_switch {
	position: fixed;
	border-radius: 50%;
	width: 56px;
	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: 98;
	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: 180px;
	border-radius: 24px;
}
.filter_expanded p {
	position: absolute;
	padding: 0;
	margin: 0;
	top: 18px;
	left: 40px;
	color: #ff6c00;
}
.filter_expanded i {
	color: #ff6c00;
}
#customer_results {
	min-height: 0;
}
#current_address {
	background: #f9f9f9;
	width: 100%;
	clear: both;
	margin: 0;
	padding: 8px 0 8px 8px;
	box-sizing: border-box;
	position: relative;
}
#current_address i {
	color: #ff6c00;
	position: absolute;
	top: 8px;
	left: 4px;
}
#current_address ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#current_address ul li {
	position: relative;
	width: calc(100% - 56px);
	background: #fff;
	border-radius: 8px;
	float: unset;
	margin: 0 0 8px 0;
	padding: 12px 12px 12px 32px;
	cursor: pointer;
	border: 1px solid #fff;
}
#current_address ul li:hover {
	border: 1px solid #ff6c00;
}

/* 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_block {
	width: 100%;
	background: #fff;
	display: inline-block;
}
.search_results {
	width: calc(100% - 56px);
	background: #fff;
	list-style: none;
	margin: 0 0 0 8px;
	padding: 0;
	cursor: pointer;
}
.search_results li {
	width: 100%;
	position: relative;
	background: #fff;
	padding: 8px 16px 8px 16px;
	cursor: pointer;
}
.search_results li:hover {
	background: #f9f9f9;
}
.search_results .customer_name {
	color: #fff;
	background: #ff6c00;
	border: 1px solid #ff6c00;
	border-radius: 8px 8px 0 0;
}
.search_results ul.customer_address {
	background: #f9f9f9;
	padding: 0 0 0 24px;
}
::-webkit-scrollbar {
	width: 10px;
	cursor: pointer;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #ccc;
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
	cursor: pointer;
}
.product-image {

}
/* No image */
.no-image {
	width: 50px;
	height: 50px;
	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;
}

/* ------------------------------------------------------- */
/* BREADCUMBS */
/* ------------------------------------------------------- */
ul.breadcumbs {
	width: 100%;
	height: 30px;
	line-height: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 3px;
}
ul.breadcumbs li {
	float: left;
	height: 40px;
	line-height: 40px;
	color: #ccc;
}
ul.breadcumbs li a {
	display: inline-block;
}
ul.breadcumbs li a:first-letter {
	text-transform: uppercase;
}

/* ------------------------------------------------------- */
/* DASHBOARD */
/* ------------------------------------------------------- */
.dashboard {
	list-style: none;
	margin: 4px 0 0 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	position: relative;
}
@media screen and (min-width: 860px) {
	.dashboard {
		width: calc(50% - 2px);
		vertical-align: top;
	}
}
@media screen and (min-width: 1024px) {
	.dashboard {
		width: 33%;
		vertical-align: top;
	}
}
.dashboard .toggle {
	width: 80px;
	height: 80px;
	position: absolute;
	border-radius: 0 8px 8px 0;
	top: 0;
	right: 4px;
	cursor: pointer;
	text-align: center;
}
.dashboard .toggle i {
	margin-top: 24px;
	color: #fff;
}
.dashboard li {
	width: calc(100% - 8px);
	float: left;
	margin: 0 4px 8px 4px;
	overflow: hidden;
	border-radius: 8px;
	box-sizing: border-box;
	cursor: pointer;
}
.dashboard li:hover {
	opacity: .8;
}
.dashboard li.half {
	width: calc(50% - 8px);
	margin: 0 4px 8px 4px;
}

.dashboard ul {
	list-style: none;
	margin: 0;
	padding: 16px 0 0 64px;
	width: 100%;
	min-height: 80px;
	border-radius: 4px;
	display: table;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	vertical-align: top;
}
@media screen and (min-width: 640px) {
	.dashboard ul {
		height: 88px;
	}
}
.dashboard ul.progress {
	padding: 16px 0 24px 64px;
}
.dashboard ul.progress .progress-invest {
	background: #4da8d5;
	height: 2px;
	width: calc(100% - 32px);
	margin: 16px 0 16px 0;
	position: absolute;
	bottom: 4px;
	left: 16px;
}
.dashboard ul.progress .progress-invest .current {
	background: #fff;
	height: 2px;
	position: relative;
	opacity: 1;
	animation: blink 1s infinite;
}
@keyframes blink {
	0% { background: #fff }
	50% { background: #b7e7ff }
	100% { background: #fff }
}
.dashboard ul.progress .progress-invest .current p {
	position: absolute;
	top: -12px;
	right: 0;
	color: #fff;
	font-size: .9em;
}
.dashboard ul i {
	position: absolute;
	top: 24px;
	left: 16px;
	opacity: .5;
}
.dashboard ul i:after {
	content: '';
	position: absolute;
	top: -15px;
	right: -10px;
	border-right: 1px solid #fff;
	height: 60px;
	opacity: .3;
}
.dashboard ul.orders {
	background: #ff5455;
}
.dashboard ul.invest {
	background: #67c2ef;
}
.dashboard ul.balance {
	background: #79c447;
}
.dashboard ul.products {
	background: #fabb3d;
}
.dashboard ul.customers {
	background: #79c447;
}
.dashboard ul.pack {
	background: #79c447;
}
.dashboard ul.available {
	background: #79c447;
}
.dashboard ul.warning {
	background: #ff5455;
}
.dashboard ul li {
	font-size: .9em;
	color: #fff;
	width: 100%;
	margin: 0 0 8px 0;
	clear: both;
}
.dashboard ul.products li.wait {
	font-size: 1em !important;
}
.dashboard ul li:first-child {
	margin: 0;
	opacity: .8;
}
.dashboard ul li:nth-child(2) {
	font-size: 1.8em;
	letter-spacing: -1px;
}
.dashboard li.half ul li:nth-child(2) {
	font-size: 1.3em;
}
span.money {
	font-size: .8em;
	font-weight: 100;
	vertical-align: super;
	margin: 0 1px 0 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	width: 8px;
	letter-spacing: 0;
}
span.money::after {
	content: '₫';
	position: absolute;
	top: 3px;
	right: 0;
}
.dashboard ul li:nth-child(2) span.money {
	font-size: .7em;
	top: 2px;
	width: 15px;
}
.dashboard li.half ul li:nth-child(2) span.money {
	top: 1px;
	width: 12px;
}
.revenue {
	list-style: none;
	display: flex;
	flex-direction: column-reverse;
	margin: 32px 0 0 0;
	padding: 0;
	width: 100%;
}
@media screen and (max-width: 640px) {
	.revenue {
		width: 100%;
	}
}
.revenue li {
	width: 100%;
	height: 78px;
	margin: 0 0 24px 0;
	position: relative;
}
.revenue li .chart {
	width: calc(100% - 100px);
	background: #f5f5f5;
}
.revenue li div.revenue_percentage {
	border: 0;
	height: 24px;
	display: block;
	background: #67c2ef;
	color: #fff;
	text-align: right;
	font-size: .8em;
}
.revenue li div.orders_percentage {
	border: 0;
	height: 24px;
	display: block;
	background: #ff5455;
	color: #fff;
	margin: 0 0 2px 0;
	text-align: right;
	font-size: .8em;
}
.revenue li div.customers_percentage {
	border: 0;
	height: 24px;
	display: block;
	background: #fabb3d;
	color: #fff;
	margin: 0 0 2px 0;
	text-align: right;
	font-size: .8em;
}
.revenue li .chart div i {
	font-style: normal;
	margin: 4px 4px 0 0;
	display: inline-block;
}
.revenue li div.customers_percentage:hover,
.revenue li div.orders_percentage:hover,
.revenue li div.revenue_percentage:hover {
	opacity: .5;
	cursor: pointer;
}
.revenue li div.season {
	position: absolute;
	font-size: .8em;
	top: -20px;
	left: 0;
}
.revenue li div.orders {
	position: absolute;
	top: 30px;
	right: 4px;
	font-size: .8em;
}
.revenue li div.revenue {
	text-align: right;
	position: absolute;
	bottom: 6px;
	right: 4px;
	font-size: .8em;
}
.revenue li div.customers {
	text-align: right;
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: .8em;
}
.customers_grown {
	list-style: none;
	display: flex;
	flex-direction: column-reverse;
	margin: 0;
	padding: 0;
	width: 50%;
}
@media screen and (max-width: 640px) {
	.customers_grown {
		width: 100%;
	}
}
.customers_grown li {
	width: calc(100% - 16px);
	flex: 0 0 auto;
}
.customers_grown li span {
	border: 0;
	padding: 8px;
	display: inline-block;
	pointer-events: none;
	text-decoration: none !important;
	border-radius: 4px;
}
.customers_grown li span.session {
	width: 96px;
	background: #fabb3d;
	color: #fff;
	position: relative;
	margin: 0 0 4px 0;
}
.customers_grown li span.session i.null {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.customers_grown li span.number {
	width: 64px;
	background: #dff2fb;
	color: #025d8a;
}
.customers_grown li span.grown {
	width: 64px;
	background: #67c2ef;
	color: #fff;
}
/* Birthday List */
.birthday_list {
	clear: both;
	display: table;
}
.birthday_list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.birthday_list ul li {
	background: #fff;
	border: 1px solid #f5f5f5;
	border-radius: 5px;
	margin: 0 5px 5px 0;
	padding: 10px;
	width: auto;
	float: left;
}
.birthday_list ul li i {
	margin: 0 3px 0 3px;
	opacity: .8;
}
.birthday_list ul li.current {
	background: #ff5455;
	color: #fff;
}

/* ------------------------------------------------------- */
/* ACCOUNT  */
/* ------------------------------------------------------- */
#account {
	width: 50%;
	height: 30px;
	padding: 5px 20px 0 0;
	position: absolute;
	top: 3px;
	right: 5px;
}
#account div {
	color: #333;
}
#account a {
	color: #333;
	font-size: 11px;
}
#account div.error {
	background: #f5f5f5;
	width: 20px;
	height: 20px;
	color: #333;
	border-radius: 5px;
	float: right;
	text-align: center;
	padding: 0;
	line-height: 20px;
	margin: 5px 20px 0 0;
	overflow: hidden;
}
#account div.error a {
	width: 20px;
	height: 20px;
	color: #ccc;
	display: block;
	padding: 5px 0 0 0;
	margin: 0;
}
#account div.new {
	background: #ff6c00;
}
#account div.new a {
	color: #fff;
}
#account div.avatar {
	width: 40px;
	height: 30px;
	text-align: left;
	float: right;
}
#account div.avatar img {
	border-radius: 30px;
}
#account div.information {
	float: right;
	line-height: 30px;
	padding: 0 10px 0 0;
}
#account div.logout {
	text-align: center;
	line-height: 25px;
	width: 25px;
	height: 25px;
	float: right;
}
#account div.logout a {
	color: #ff6c00;
	display: block;
	transition: .1s;
	margin-top: 10px;
}
#account div.logout a:hover {
	color: #ccc;
}
.checkbox {
	display: inline-block;
	position: relative;
	padding-left: 32px;
	margin: 0 8px 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 FORM */
/* ------------------------------------------------ */
#login {
	width: 100%;
	margin: 50px auto 0 auto;
	padding: 20px;
	box-sizing: border-box;
}
#login div.container {
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 16px;
	padding: 20px;
	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: 480px) {
	#login {
		width: 100%;
		display: table-cell;
	}
	#login div.container {
		display: table-cell;
		padding: 20px;
	}
	#login div.container div {
		display: table-cell;
		width: 100%;
	}
	#login div.container input.input {
		width: 100%;
		clear: both;
		display: inline-table;
		margin: 0 0 20px 0;
	}
}
ul.design {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.design li {
	line-height: 200%;
	float: none !important;
}
ul.design li.submit {
	line-height: 350%;
}
div.warning {
	background: #ffecef;
	color: #e82646;
	font-size: 1.1em;
	line-height: 1.3em;
	padding: 16px;
	border-radius: 8px;
	margin: 16px 0 8px 0;
	clear: both;
}
.warning .icon {
	color: #e82646;
	display: block;
	margin: 24px;
	transform: scale(2);
}
.warning .description {
	padding: 0;
	margin: 4px 0 0 0;
	font-size: .85em;
}
.ask {
	background: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	z-index: 1000000;
	position: fixed;
	overflow: hidden;
	margin: -64px 0 0 0;
	transition: none !important;
}
.ask div.box {
	width: 320px;
	padding: 16px;
	margin: 25% auto 0 auto;
}
.ask div.title {
	background: #fff;
	border-bottom: 1px solid #eee;
	color: #252525;
	width: 300px;
	font-size: 1.1em;
	height: 48px;
	line-height: 48px;
	margin: 0;
	padding: 0;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}
.ask div.title b {
	margin: 0 0 0 8px;
	padding: 0;
	font-weight: normal;
}
.ask p {
	background: #fff;
	width: 300px;
	line-height: 50px;
	margin: 0 0 16px 0;
	padding: 16px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 0 0 8px 8px;
	display: inline-block;
}
.ask p button.submit {
	margin-bottom: 16px;
}
.loading {
	background: url('../images/loading.gif');
	width: 16px;
	height: 11px;
	margin: 0 auto 0 auto;
	display: inline-block !important;
}
.loader {
	background: #f9f9f9;
	width: 100%;
	height: 100vh;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
	z-index: 102;
	position: absolute;
	top: 0;
	left: 0;
	transition: none;
}
.loader i {
	color: #ff6c00;
	margin: 20% 0 0 0;
	opacity: .8;
	animation: rotation .3s infinite linear;
}
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}
#clear,.clear {	clear: both }

/* ------------------------------------------------------- */
/* PAGE LAYOUT */
/* ------------------------------------------------------- */
.wrapper {
	background: #f9f9f9;
	width: 100%;
	margin: 0;
	padding: 0 0 80px 0;
	z-index: 99;
}
.content {
	width: 100%;
	padding: 16px;
	margin: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}
.block {
	background: #fff;
	margin: 8px 8px 8px 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	padding: 16px 16px 16px 16px;
	line-height: 100%;
	border-radius: 8px;
	position: relative;
	vertical-align: top;
}
.block:hover {
	box-shadow: 0 1px 16px rgba(0, 0, 0, 0.1);
}
.filter {
	width: 100%;
	clear: both;
}
.filter_products {
	width: calc(100% - 16px);
	display: block;
	clear: both;
	cursor: pointer;
	margin: 8px 0 16px 8px;
}
@media screen and (min-width: 640px) {
	.filter_products {
		width: calc(50% - 8px);
		float: left;
		clear: unset;
	}
}
.filter_products div.type {
	display: inline-block;
	font-size: .9em;
	background: #fff;
	margin: 0;
	padding: 4px 0 4px 4px;
	border-radius: 6px;
	height: 24px;
	line-height: 1.8em;
	position: relative;
}
.filter_products div.type .checkbox {
	margin: 0 8px 8px 0;
}
.filter_products div.type b {
	font-weight: normal;
	border-radius: 16px;
	padding: 4px 8px 4px 8px;
	background: #eee;
	font-size: .8em;
}
.filter_products div.type:hover b {
	background: #ff6c00;
	color: #fff;
}
@media screen and (max-width: 640px) {
	.filter_products div.type {
		margin: 0 8px 8px 0;
		min-height: 24px;
		width: calc(50% - 16px);
	}
	.filter_products div.type label {
		width: calc(100% - 32px);
	}
	.filter_products div.type b {
		position: absolute;
		top: 0;
		right: 8px;
		padding: 0 8px 0 8px;
	}
}
.filter_pic {
	width: calc(100% - 16px);
	display: block;
	clear: both;
	cursor: pointer;
	margin: 8px 0 16px 8px;
}
@media screen and (min-width: 640px) {
	.filter_pic {
		width: calc(50% - 8px);
		float: right;
		clear: unset;
	}
}
.filter_pic .people {
	display: inline-block;
	font-size: .9em;
	background: #fff;
	margin: 0;
	padding: 4px 0 4px 4px;
	border-radius: 6px;
	height: 24px;
	line-height: 1.8em;
	position: relative;
}
.orders-block {
	clear: both;
}
.orders-list {
	border: 1px solid #fff;
	width: calc(25% - 50px);
	display: inline-block;
	padding: 16px 16px 8px 16px;
}
.orders-list.alert {
	border: 1px solid #ff6c00;
	z-index: 1;
}
.orders-list.alert:hover {
	box-shadow: 0 1px 4px rgba(255, 108, 0, 0.5);
}
@media screen and (max-width: 1080px) {
	.orders-list {
		width: calc(33% - 50px);
	}
}
@media screen and (max-width: 820px) {
	.orders-list {
		width: calc(50% - 50px);
	}
}
@media screen and (max-width: 640px) {
	.orders-list {
		width: calc(100% - 50px);
	}
}
.orders-list span.name {
	font-weight: bold;
	font-size: 1.1em;
}
.orders-list span.name i {
	font-style: normal;
	font-weight: normal;
}
.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;
}
.address {
	position: relative;
}
.address .delete {
	position: absolute;
	top: 16px;
	right: 16px;
}
.clipboard {
	width: calc(100% - 48px);
	padding: 16px;
	clear: both;
}
.qr {
	width: 100%;
	clear: both;
}
.qr img {
	width: 50%;
}

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;
	display: none;
}
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: #e82646;
	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: #e82646;
	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: #e82646;
	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;
}
div#left ul.menu .search_menu {
	background: #232323;
	position: relative;
}
div#left ul.menu .search_menu input {
	width: calc(100% - 32px);
	border: 1px solid #333;
	background: #000;
	color: #fff;
	margin: 0 0 4px 16px;
	font-size: .9em;
}
div#left ul.menu .search_menu .clear {
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 16px;
	transition: none;
}
div#left ul.menu .search_menu .clear:hover {
	color: #fff;
}
/* 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;
	}
}
div#right {
	padding: 0;
	width: 100%;
	float: right;
	display: table;
	position: relative;
	overflow-x: hidden;
}
@media screen and (max-width: 640px) {
	div#right {
		width: 100%;
		float: none;
		clear: both;
	}
}
/* ------------------------------------------------------- */
/* BUTTON */
/* ------------------------------------------------------- */
.button,
button {
	background: #fff1e7;
	font-family: Roboto, sans-serif;
	font-size: 1em;
	color: #f3781e;
	cursor: pointer;
	line-height: 32px;
	min-height: 32px;
	padding: 8px 16px 4px 16px;
	border: 1px solid #fff1e7;
	border-radius: 8px;
	white-space: nowrap;
	margin: 0 8px 8px 0;
	-webkit-appearance: none;
	display: inline-flex;
	justify-content: center;
	position: relative;
}
.button:hover,
button:hover {
	background: #f3781e;
	border: 1px solid #f3781e;
	color: #fff;
}
.button:hover i,
button:hover i {
	color: #fff;
}
.button i,
button i {
	transition: none;
	position: absolute;
	top: 10px;
	left: 12px;
}
.icon {
	padding: 8px 8px 4px 40px;
}
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: 1.2em;
	width: auto;
	text-align: center !important;
	padding: 8px 16px 8px 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	-webkit-appearance: none;
}
a.submit:hover,
button.submit:hover,
input.submit:hover {
	background: #e44b00;
	border: 1px solid #e44b00;
}
input[disabled],
input[disabled]:hover {
	background: #eee;
	color: #333;
	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: #f5f5f5;
	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;
}
/* ------------------------------------------------------- */
/* LAYOUT */
/* ------------------------------------------------------- */
ul.layout {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.layout li {
	width: 100%;
	clear: both;
	line-height: 32px;
	min-height: 32px;
}
.full-size {
	width: 100%;
}
ul.product {
	margin: 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: #f5f5f5;
	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: #f5f5f5;
	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;
}
ul.categories {
	border: 1px solid #ddd;
	background: #fff;
	width: 100%;
	height: 350px;
	padding: 5px;
	box-sizing: border-box;
	list-style: none;
	overflow: hidden;
	overflow-y: scroll;
}
ul.categories li:first-child {
	padding: 0 !important;
}
ul.categories li {
	width: 100%;
}
ul.categories li:hover {
	background: #f9f9f9;
}
ul.categories li div.link-list {
	float: right;
	font-size: .9em;
}
ul.categories li.sub {
	padding: 0 0 0 20px;
}
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: #f5f5f5;
	color: #ccc;
	border: 1px solid #eee;
	cursor: progress;
}
ul.status a.off {
	background: #f5f5f5;
	color: #ccc;
	border: 1px solid #eee;
}
ul.status a.on {
	background: #ff6c00;
	color: #fff;
	border: 1px solid #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: 8px 0 16px 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;
	padding: 0;
	display: table;
}
ul.split li {
	float: left;
}
ul.split li.w12 {
	width: 100%;
}
ul.split li.w8 {
	width: 80%;
}
ul.split li.w7 {
	width: 70%;
}
ul.split li.w5 {
	width: 50%;
}
ul.split li.w3 {
	width: 30%;
}
ul.split li.w2 {
	width: 20%;
}
/* ------------------------------------------------------- */
/* MENU TOOLS */
/* ------------------------------------------------------- */
ul.menu {
	list-style: none;
	margin: 15px 0 15px 0;
	padding: 0;
}
/* ------------------------------------------------------- */
/* MENU TOOLS */
/* ------------------------------------------------------- */
.menu-tab {
	width: 60%;
	height: 64px;
	display: inline-block;
	margin: 16px 0 0 0;
}
@media screen and (max-width: 1280px) {
	.menu-tab {
		width: 100%;
		display: block;
		float: unset;
	}
}
.menu-tab a {
	border: 1px solid #dedede;
	border-right: 0;
	border-radius: 0;
	background: #f0f0f0;
	padding: 16px 16px 16px 40px;
	display: inline-block;
	line-height: 100%;
	position: relative;
	margin: 0;
	color: #252525;
	float: left;
	transition: none;
}
.menu-tab a:first-child {
	border-radius: 8px 0 0 8px;
}
.menu-tab a:last-child {
	border-right: 1px solid #dedede;
	border-radius: 0 8px 8px 0;
}
.menu-tab a i {
	position: absolute;
	top: 10px;
	left: 12px;
}
.menu-tab a.active,
.menu-tab a:hover {
	color: #ff6c00;
}
@media screen and (max-width: 480px) {
	.menu-tab a.active i,
	.menu-tab a:hover i {
		color: #ff6c00;
	}
	.menu-tab a i {
		color: #252525;
	}
}
.menu_buttons {
	width: 100%;
	display: block;
	clear: both;
}
ul.menu {
	list-style: none;
	margin: 15px 0 15px 0;
	padding: 0;
}
/* ------------------------------------------------------- */
/* TABLE */
/* ------------------------------------------------------- */
.customer_card {
	position: relative;
	cursor: pointer;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.customer_card .owner {
	width: 100%;
	border-bottom: 1px solid #f5f5f5;
	padding: 0 0 8px 0;
	margin: 0 0 4px 0;
}
.customer_card .profile,
.customer_card .location {
	width: 48px;
	height: 32px;
	position: absolute;
	top: -4px;
	right: 16px;
	text-align: center;
	padding: 16px 0 0 0;
}
.customer_card .profile a,
.customer_card .location a {
	width: 48px;
	height: 48px;
	color: #666;
	transition: none;
	background: transparent;
	border-radius: 50%;
	display: block;
}
.customer_card .profile a i,
.customer_card .location a i {
	margin: 13px 0 0 0;
}
.customer_card .profile a:hover,
.customer_card .location a:hover {
	color: #ff6c00;
}
.customer_card .location {
	top: 54px;
	right: 16px;
}
.customer_card .ship {
	width: 100%;
	padding: 0 0 0 28px;
	margin: 4px 0 8px 0;
	position: relative;
	box-sizing: border-box;
}
.customer_card .ship p {
	font-size: .9em;
	color: #ccc;
	padding: 4px 0 4px 0;
	margin: 0;
}
.customer_card .ship i {
	position: absolute;
	top: 0;
	left: 0;
}
.ship_card {
	position: relative;
	display: block;
	overflow: auto;
}
.ship_card fieldset {
	display: inline-block;
	float: left;
	padding: 4px 0 0 32px;
}
.ship_card .result {
	float: left;
}
.ship_card fieldset i {
	position: absolute;
	top: 18px;
	left: 16px;
}
.ship_card fieldset label {
	font-size: .95em;
	line-height: 1.6em;
}
.ship_card #ship_total {
	float: left;
	display: inline-block;
	margin: 0 0 8px 0;
}
@media screen and (max-width: 640px) {
	.ship_card #ship_total {
		width: 100%;
	}
}
.ajax_done {
	display: block;
	border-radius: 12px;
	width: 24px;
	height: 24px;
	margin: 4px;
	background: #e8f2dd;
	color: #669933;
	position: relative !important;
	animation: ajax_done .3s 1 linear;
}
.ajax_done i {
	position: absolute;
	top: 0;
	left: 0;
	color: #669933;
	transform: scale(0.8);
}
@keyframes ajax_done {
	from {
		transform: scale(0.1);
	}
	to {
		transform: scale(1);
	}
}
/* 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_zero {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.table_zero li {
	background: url('../images/beef.png') center center no-repeat;
	height: 240px;
	width: 100%;
	filter: grayscale(1);
}
ul.table_zero li:hover {
	filter: unset;
}
ul.table li {
	min-width: 1%;
	line-height: 1.2em;
	padding: 16px 8px 8px 8px;
	float: left;
	min-height: 24px;
	color: #000;
}
@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: 16px;
	clear: both;
	overflow: hidden;
	text-align: center;
	color: #ccc;
}
ul.table_board li.number {
	min-width: 24px;
}
ul.table li.avatar {
	width: 64px;
}
ul.table li.avatar img {
	border-radius: 50%;
	width: 64px;
	height: 64px;
}
ul.table li.image {
	text-align: center;
	width: 48px;
}
ul.table li.image img {
	min-width: 56px;
	min-height: 56px;
	width: 56px;
	height: 56px;
	border-radius: 28px;
	margin: 8px 0 0 0;
}
ul.table li.nobody {
	color: #aaa;
	text-align: center;
	width: 100%;
	min-height: 32px;
}
ul.table li.image {
	padding: 0 4px 0 4px;
	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: #e82646;
}
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 li.remove-item {
	padding: 8px 16px 8px 16px;
}
ul.table_sub {
	background: #f9f9f9;
}
ul.table_sub li.order {
	padding: 10px 10px 10px 32px;
}
ul.table li.title {
	width: 30%;
	word-break: break-word;
}
ul.table li.title .description {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
	color: #666;
	padding: 0;
	margin: 4px 0 0 0;
}
ul.table li span.unknown {
	color: #666;
}
ul.table li.group {
	min-width: 13%;
	word-break: break-word;
}
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%;
}
ul.table:hover {
	background: #f9f9f9;
}
ul.customers,
ul.customers li {
	min-height: 20px;
	cursor: pointer;
}

ul.orders input {
	width: 100%;
}
.dashboard div.counter {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 16px;
	top: 24px;
	opacity: 1;
	font-size: 1.3em;
	line-height: 1.8em;
	border-radius: 50%;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
}

.orders {
	border: 0 !important;
	position: relative;
	cursor: pointer;
	padding: 0;
	margin: 0 0 8px 0;
}
.block .print {
	background: #f5f5f5;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: absolute;
	top: 16px;
	right: 16px;
	text-align: center;
	display: block;
}
.block .print i {
	color: #999;
	margin-top: 13px;
}
.block .outstock {
	position: absolute;
	top: -2px;
	left: -32px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	text-align: center;
	padding: 0;
	box-sizing: border-box;
	z-index: 2;
}
.block .outstock i {
	color: #ff6c00 !important;
	font-size: 1.3em;
}

.reminder .datetime_input {
	width: 100%;
	height: 40px;
	z-index: 1;
}
.reminder .datetime_input i {
	position: absolute;
	top: 16px;
	left: 16px;
}
.reminder .datetime_input input {
	color: #ccc;
	padding: 0;
	min-height: unset;
	-webkit-box-shadow: none;
	box-shadow: none;
	width: calc(100% - 40px);
	border: 0;
	cursor: pointer;
	margin: 0 0 0 32px;
}
.reminder .datetime_input input:focus {
	border: 0;
}
@media screen and (max-width: 640px) {
	.reminder .datetime_input input {
		background: #fff;
		color: #fff;
	}
}
.reminder .result {
	display: inline-block;
	position: absolute;
	top: 40px;
	left: 48px;
	z-index: 2;
	cursor: pointer;
}
@media screen and (max-width: 640px) {
	.reminder .result {
		top: 24px;
	}
}

span.phone {
	color: #666;
	background: #f5f5f5;
	border-radius: 4px;
	font-size: .9em;
	box-sizing: border-box;
	padding: 4px 4px 4px 4px;
	margin: 4px 0 0 0;
	width: auto;
	display: table;
	clear: left;
}
.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 4px 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 {
	font-size: .9em;
	display: block;
	padding: 8px 0 0 0;
}
.orders span.address {
	font-size: .9em;
	color: #999;
	margin: 8px 0 0 0;
	display: block;
	clear: left;
}
@media screen and (max-width: 640px) {
	.orders span.address {
		margin: 4px 80px 0 0;
	}
}
.orders i.on {
	color: #ff6c00;
}
.orders i.off {
	color: #ccc;
}
.orders div.status {
	position: absolute;
	bottom: -8px;
	right: 0;
}
.orders div.status i {
	margin: 0 4px 0 0;
}
.orders div.comments {
	position: absolute;
	display: inline-block;
	background: #f5f5f5;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	text-align: center;
	top: 0;
	right: 64px;
	color: #999;
}
@media screen and (max-width: 640px) {
	.orders div.comments {
		top: 56px;
		right: 0;
	}
}
.orders div.comments i {
	margin-top: 13px;
	color: #999;
}
.orders div.comments .number {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	top: 0;
	right: -8px;
	background: #ff6c00;
	text-align: center;
	color: #fff;
	font-size: .9em;
	border: 2px solid #ff6c00;
	padding: 0 !important;
}
.orders p {
	padding: 0;
	margin: 4px 0 4px 0;
}
.orders .title {
	padding: 4px 0 0 16px !important;
	width: 48% !important;
}
.orders .title p {
	margin: 0 !important;
}
.orders .number {
	padding: 16px 0 0 0 !important;
	min-width: 16px !important;
}
.orders .image {
	padding: 0 !important;
}
.edit-item {
	background: #fff;
	position: relative;
	width: calc(80% - 32px);
	margin: 16px auto 0 auto;
	border-radius: 16px;
	padding: 16px 0 0 0;
}
@media screen and (max-width: 640px) {
	.edit-item {
		width: calc(100% - 32px);
	}
}
.edit-item ul.table {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}
.edit-item ul.table li {
	line-height: 100%;
	display: inline-block;
	padding: 4px 16px 4px 16px !important;
	margin: 0;
	width: calc(100% - 32px);
}
.edit-item ul.table li:last-child {
	border: 0;
}
.edit-item ul.table li.remove-item {
	margin: 16px 0 0 0;
}
.edit-item .submit {
	width: calc(100% - 24px)
}

.add-item .new {
	background: #fff !important;
	width: calc(80% - 32px);
	margin: 16px auto 0 auto;
	border-radius: 16px;
	padding: 16px;
}
@media screen and (max-width: 640px) {
	.add-item .new {
		width: calc(90% - 32px);
	}
}
.add-item .new li {
	padding: 8px 0 4px 0 !important;
	width: 100%;
}
.add-item .new li input.full-size {
	width: 100%;
	padding: 8px 0 8px 8px;
}
.add-item .new .suggest .tag {
	background: #f5f5f5;
	border-radius: 16px;
	display: inline-block;
	padding: 8px 16px 8px 16px;
}
.add-item .new .products .product {
	margin: 8px 8px 4px 8px;
	display: inline-block;
}
.add-item .new .products .product img {
	border-radius: 8px;
	width: 64px;
	height: 64px;
}
.add-item .submit {
	width: calc(100% - 24px)
}
.add-more-item {
	background: #f5f5f5;
	padding: 16px 0 16px 0;
	border-radius: 8px;
	width: 100%;
	cursor: pointer;
	margin: 4px 0 16px 0;
	color: #fff;
	text-align: center;
	display: block;
}
.add-more-item p {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background: #ff6c00;
	margin: 0 auto 0 auto;
}

#form-add-customer {
	border-top: 1px solid #f9f9f9;
	background: #fff;
	padding: 8px;
	box-sizing: border-box;
}
#form-add-customer input,
#form-add-customer textarea {
	width: 100%;
	margin: 0 0 8px 0;
}
.tab_avatar {
	list-style: none;
}
.tab_avatar .avatar {
	border-radius: 8px;
	background-size: cover !important;
	background: #f9f9f9 center;
	width: 148px;
	height: 148px;
	margin: 0;
	padding: 0;
	top: unset;
	left: unset;
	position: relative;
	cursor: pointer;
}

.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;
	margin: 0 0 4px 0;
	float: left;
}
.comment .owner .text {
	background: #ff6c00;
	border-radius: 16px 2px 16px 16px;
	color: #fff;
	float: right;
	padding: 8px 8px 8px 16px;
	margin: 4px 0 4px 0;
}
.add-comment {
	position: relative;
}
.add-comment #message {
	width: calc(100% - 96px);
}
.add-comment .submit {
	padding: 8px;
	position: absolute;
	border-radius: 8px;
	top: 0;
	right: 0;
	min-width: unset;
	width: 80px !important;
	height: 56px;
}
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: 40% !important;
	white-space: nowrap;
	padding: 0;
	clear: both;
}
ul.prepare {
	border: 0;
	margin: 0;
}
ul.prepare li.title {
	padding: 0;
}
ul.prepare li.promotion p {
	background: #f9f9f9;
	border-radius: 4px;
	color: #666;
	font-size: 1em;
}
ul.prepare li.promotion p i {
	transform: scale(.6);
}
/* ------------------------------------------------------- */
/* BOARD */
/* ------------------------------------------------------- */
ul.board {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.board li {
	float: left;
	width: 20%;
	height: 100px;
}
.block_permission {
	min-width: 160px;
	display: inline-block;
}
/* ------------------------------------------------------- */
/* POPUP */
/* ------------------------------------------------------- */
.popup {
	background: rgba(0, 0, 0, .4);
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100001;
	overflow-y: scroll;
}
.popup .close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 102;
	border-radius: 50%;
}
.search_input {
	display: inline-block;
	background: #fff;
	list-style: none;
	height: 42px;
	margin: 0;
	width: 100%;
	position: relative;
	padding: 8px 0 0 8px;
}
.search_input li {
	width: 100%;
}
.search_input .close {
	position: absolute;
	top: 0;
	right: 8px;
	display: inline-block;
	height: 48px;
	width: 48px;
	border-radius: 0;
	cursor: pointer;
	text-align: center;
	padding: 0;
}
.search_input .close i {
	position: absolute;
	top: 16px;
	right: 16px;
}
.search_input input {
	width: calc(100% - 58px);
}
/* ------------------------------------------------------- */
/* EDIT ARTICLE */
/* ------------------------------------------------------- */



ul#edit {

	background: #f8f8f8;

	padding: 20px;

	list-style: none;

	width: 95%;

	display: table;

}

ul#edit li {

	padding: 0 0 5px 0;

	line-height: 25px;

	display: table;

}

ul#edit li.label {

	clear: both;

	float: left;

	width: 80px;

}

ul#edit li.option {

	float: left;

	margin-right: 10px;

}

ul#edit li.option input.score {

	text-align: center;

}

ul#edit li.article {

	width: 100%;

}

ul#edit li.article textarea {

	width: 95%;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

	ul#edit li.article textarea { width: 99%; }

}

ul#edit li.desc {

	float: left;

	margin-right: 10px;

}

ul#edit li.images {



}

ul#edit li.images div.left,

ul#edit li.images div.right {

	float: left;

	margin-right: 20px;

}

ul#edit li.images div.text_130x75,

ul#edit li.images div.image_130x75 {

	background: #f4f4f4;

	border: 1px solid #dcdcdc;

	width: 130px;

	height: 75px;

	margin: 5px 0 0 2px;

	font-size: 11px;

	line-height: 15px;

	padding-top: 10px;

	text-align: center;

}

ul#edit li.images div.image_130x75 {

	border: 0;

	padding: 0;

}



ul#edit li.images div.text_430x260,

ul#edit li.images div.image_430x260 {

	background: #f4f4f4;

	border: 1px solid #dcdcdc;

	width: 200px;

	height: 121px;

	margin: 5px 0 0 2px;

	font-size: 11px;

	line-height: 15px;

	padding-top: 10px;

	text-align: center;

}

ul#edit li.images div.image_430x260 {

	border: 0;

	padding: 0;

}

div.submit,

ul#edit li.submit {

	width: 100%;

	text-align: center;

	clear: both;

	height: 50px;

	line-height: 40px;

}



div.text_160x90,

div.image_160x90 {

	background: #f4f4f4;

	border: 1px solid #dcdcdc;

	width: 160px;

	height: 90px;

	margin: 5px 0 0 2px;

	font-size: 11px;

	line-height: 15px;

	padding-top: 10px;

	overflow: hidden;

	text-align: center;

}

div.text_320x180,

div.image_320x180 {

	background: #f4f4f4;

	border: 1px solid #dcdcdc;

	width: 160px;

	height: 90px;

	margin: 5px 0 0 2px;

	font-size: 11px;

	line-height: 15px;

	padding-top: 10px;

	text-align: center;

}

div.image_160x90,

div.image_320x180 {

	border: 0;

	padding: 0;

}



/* ------------------------------------------------------- */
/* ARTICLES */
/* ------------------------------------------------------- */

ul#article {

	margin: 0;

	padding: 0;

	list-style: none;

	width: 100%;

	display: table;

}

ul#article li {

	margin: 0;

	padding: 0;

	float: left;

	border-bottom: 1px solid #ebebeb;

	height: 30px;

	line-height: 30px;

}

ul#article li.header {

	background: #f7f7f7;

	color: #4e4e4e !important;

	font-size: 11px !important;

}

ul#article li.break {

	height: 5px !important;

	background: #f9f9f9 !important;

}

ul#article li.number {

	clear: left;

	color: #d6d6d6;

	width: 35px;

	font-size: 11px;

	text-align: center;

}

ul#article li.player {

	color: #2c2c2c;

	width: 130px;

	overflow: hidden;

	font-size: 11px;

	text-align: left;

}

ul#article li.stats {
	color: #2c2c2c;
	width: 70px;
	font-size: 11px;
	overflow: hidden;
}

ul#article li.counter {

	width: 35px;

	text-align: left;

}

ul#article li.title {

	width: 370px;

}

ul#article li.name {

	width: 200px;

	overflow: hidden;

}

ul#article li.score {

	width: 60px;

	text-align: center;

}

ul#article li.amount {

	width: 70px;

	color: #de3f00;

	text-align: right;

	padding-right: 20px;

}

ul#article li.comment {

	width: 160px;

	font-size: 11px;

}

ul#article li.score img {

	padding: 5px 5px 0 5px;

}

ul#article li.team {

	width: 20px;

}

ul#article li.team div {

	margin-top: 5px;

}

ul#article li.home {

	width: 95px;

	text-align: right;

	padding-right: 5px;

	overflow: hidden;

}

ul#article li.away {

	width: 95px;

	text-align: left;

	padding-left: 5px;

	overflow: hidden;

}

ul#article li.time {

	font-size: 11px;

	width: 150px;

}

ul#article li.ip {
	width: 160px;
	font-size: 11px;
}

ul#article li.os {
	width: 230px;
}

ul#article li.os div {
	color: #a8a8a8;
	font-size: 9px;
	line-height: 11px;
	padding-top: 3px;
}

ul#article li.group {

	font-size: 11px;

	width: 80px;

}

ul#article li.category {

	color: #9f1515;

	width: 100px;

	overflow: hidden;

}

ul#article li.control {

	font-size: 12px;

	width: 140px;

	overflow: hidden;

}

/* Users */

ul#article li.users-name {

	width: 120px;

}

ul#article li.users-group {

	width: 150px;

	font-size: 11px;

}

/* Menus */

ul#article li.menu {

	width: 270px;

}

ul#article li.submenu {

	background: url('../images/submenu.gif') no-repeat;

	padding: 0 0 0 20px;

	width: 250px;

}

ul#article li.request {	width: 250px; font-size: 11px; overflow: hidden }

div.ie6 {
	background: #fff;
	width: 700px;
	margin: 20px auto 0 auto;
}

div.notice {
	min-width: 256px;
	min-height: 24px;
	background: #ff6c00;
	color: #fff;
	border-radius: 8px;
	padding: 10px 24px 10px 24px;
	line-height: 24px;
	margin-bottom: 4px;
	position: absolute;
	top: 8px;
	right: 8px;
	box-shadow: 2px 2px 5px #ccc;
	z-index: 1000000;
	box-sizing: border-box;
}
/* Pages */
div.page {
	width: 100%;
	text-align: center;
	margin: 24px 0 48px 0;
}
div.page a {
	margin: 0 4px 4px 4px;
	background: #f0f0f0;
	color: #999;
	width: 36px;
	height: 36px;
	text-align: center;
	border-radius: 18px;
	float: left;
	box-sizing: border-box;
	padding: 9px 0 0 0;
	position: relative;
}
div.page a.current,
div.page a:hover {
	background: #ff6c00;
	color: #fff;
	opacity: 1;
	font-weight: bold;
}
div.page a i {
	font-size: 1.3em;
}
div.page p {
	clear: both;
	display: block;
}
ul#list {
	margin: 0;
}

ul#list li {

	height: 20px;

}

ul#list li a {
	color: #333;
}

ul#list li a:hover {
	background: #900;

	color: #fff;

}

#content {

	border: 1px solid #f7f7f7;

	padding: 10px;

}

#sep {

	width: 100%;

	height: 1px;

	background: #d1d1d1;

	margin: 10px 0 10px 0;

}

ul#photo {

	list-style: none;

	margin: 0;

	padding: 0;

}

ul#photo li {

	height: 150px;

	width: 150px;

	float: left;

	border: 1px solid #CCC;

	margin: 0 10px 10px 0;

	text-align: center;

}

ul#photo li p {

	width: 150px;

	height: 90px;

}

ul#documents {

	list-style: none;

	margin: 0;

	padding: 0;

}

.update_log {

	font-size: 11px;

	padding: 5px;

	float: right;

}
ul.table_size {
	display: none;
}
ul:hover ul.table_size {
	list-style: none;
	padding: 0;
	margin: 10px 0 0 0;
	display: block;
}
ul.table_size li,
ul.table_size li:last-child {
	height: 16px !important;
	width: 19px !important;
	font-size: .8em;
	float: left !important;
	background: #f9f9f9;
	border: 1px solid #f5f5f5;
	border-radius: 3px 0 0 3px;
	min-width: 10px;
	min-height: 10px;
	padding: 1px 3px 1px 3px !important;
	text-align: center;
}
ul.table_size li:nth-child(even) {
	background: #fff;
	width: 15px;
	margin-right: 5px;
	border-radius: 0 3px 3px 0;
	border-left: 0;
}

.dashboard_gender {
	clear: both;
	display: flex;
	width: 100%;
	height: 160px;
	margin: 24px 0 24px 0;
}
.dashboard_gender .label {
	font-size: .8em;
	position: absolute;
	right: 24px;
}
.dashboard_gender .label .text {
	font-size: 1em;
	height: 16px;
	padding: 4px 16px 4px 16px;
	color: #fff;
	border-radius: 16px;
	margin: 0 0 4px 0;
}
.graph {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	margin: 50px 0;
	width: 160px;
	text-align: center;
}
.pie {
	width: 160px;
	aspect-ratio: 1;
	position: absolute;
}
.pie:before,
.pie:after {
	content:"";
	position:absolute;
	border-radius:50%;
}
.pie:before {
	inset:0;
	background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
	conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}
.pie .label {
	position: absolute;
	color: white;
	font-size: 0.8rem;
	font-weight: normal;
	padding: 0;
	margin: 5% auto 0 auto;
	right: unset;
}
.no-round:before {
	background-size:0 0,auto;
}
.no-round:after {
	content:none;
}

/* ------------------------------------------------ */
/* COPYRIGHT */
/* ------------------------------------------------ */
.copyright {
	width: 100%;
	height: 60px;
	line-height: 120%;
	margin: 50px auto 0 auto;
	padding: 20px;
	overflow: hidden;
	font-size: 1em;
	color: #ccc;
	text-align: center;
	clear: both;
}
@media screen and (max-width: 480px) {
	.copyright {
		display: table-cell;
	}
}

.tools {
	list-style: none;
}