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

GLOBAL SETTINGS
Scrollbar
Logo
Switcher
Footer Menu
Search
Search Results
No Image
BREADCRUMBS
Ideas
DASHBOARD
ACCOUNT
Profile

LOGIN FORM
TOP MENU
PAGE LAYOUT
BUTTON
CHART
LAYOUT
SPLIT
RULES BOARD
MENU TOOLS
TABLE
Sortable
BOARD
POPUP
Modal
EDIT ARTICLE
ARTICLES
Page
APP
COPYRIGHT

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

/* ------------------------------------------------------- */
/* GLOBAL SETTINGS */
/* ------------------------------------------------------- */
BODY {
	background: #f9f9f9;
	margin: 0;
	padding: 16px 0 80px 0;
	overflow-y: scroll;	
	overflow-x: hidden;
}
BODY, td, div, pre {
	color: #333;
	font-family: Roboto, sans-serif;
	font-size: 15px;
}
pre {
	width: 100%;
	white-space: break-spaces;
}
* {
	transition: all .3s;	
}
form {
	transition: none;
	padding: 0;
	margin: 0;
}
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: 44px;
	 border: 1px solid #b1b1b1;
	 color: #333;
	 font-family: Roboto, sans-serif;
	 font-size: 1em;
	 padding: 4px 8px 4px 8px;
	 border-radius: 8px;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 margin: 0 8px 2px 0;
	 line-height: 160%;
}
select {
	height: 44px;
}
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 #c22026;
}
::-moz-selection {
	color: #fff;
	background: #c22026;
}

::selection {
	color: #fff;
	background: #c22026;
}
hr {
	width: 100%;
	background: #eaeaea;
	border: 0;
	height: 1px;
	margin: 10px 0 10px 0;
	clear: both;
}
img {
	max-width: 100%;
}
h1 {
	font-size: 1.4em;
	letter-spacing: -1px;
	font-weight: bold;
	color: #000;
	padding: 4px 0 4px 0;
	cursor: default;
	width: 100%;
	clear: both;
	margin: 0;
	display: inline-block;
}
h2 {
	font-size: 1.2em;
	letter-spacing: -1px;
	font-weight: bold;
	color: #000;
	padding: 4px 0 4px 0;
	cursor: default;
	width: 100%;
	clear: both;
	margin: 0;
	display: inline-block;
}
h3 {
	color: #c22026;
	font-size: 16px;
	font-weight: normal;
	padding: 8px 0 8px 0;
	margin: 0;
	width: 100%;
	clear: both;
	cursor: pointer;
}
h4 {
	font-size: .95em;
	color: #666;
	padding: 0;
	margin: 0;
	font-weight: 500;
}
a { 
	color: #c22026;
	outline: none;
	text-decoration: none
}
a:hover {
	color: #c22026;
	opacity: .8;
}
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	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;
}
.material-symbols-outlined:hover {
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	cursor: pointer;
}
::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.1);
	cursor: pointer;
}
/* Tooltip */
.tooltip {
	position: relative;
}
@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: 6px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	text-align: center;

	display: none;
	animation: tooltip .3s 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 .3s 1 ease-in-out;
}
.tooltip:hover:before, .tooltip:hover:after {
	display: block;
	z-index: 1000 !important;
}
.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);
}
.datepicker {
	transition: none !important;
}
/* Form */
.chat_screen .form {
	position: relative;
}
.chat_screen .form .submit {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 12px;
	right: 12px;
	background: #c22026;
	color: #fff;
	border: 0;
	padding: 8px;
	border-radius: 16px;
	cursor: pointer;
	overflow: hidden;
}
.chat_screen .form .submit:hover {
	width: 32px;
	height: 32px;
	border: 0;
	opacity: .6;
	transform: scale(1);
}
.chat_screen .form input[type=submit] {
	display: none;
}
.chat_screen .form .submit i {
	margin: 6px 2px 2px 4px;
}
/* Logo */
.logo {
	background: #c22026;
	color: #fff;
	font-weight: bold;
	font-size: .8em;
	width: calc(100% - 72px);
	height: 40px;
	padding: 20px 16px 0 60px;
	display: block;
	text-transform: uppercase;
	cursor: default;
	position: relative;
	line-height: 2.2em;
}
.logo .symbol {
	background: #ae181d;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 16px;
	left: 16px;
	border-radius: 4px;
	text-align: center;
}
.logo span {
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
	color: #de2f36;
	margin: 4px 0 0 0;
	animation: rotation 3s infinite linear;
}
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}
.logo .xleaders {
	background: url('../images/logo_xleaders_white_transparent.png') center center no-repeat;
	background-size: contain;
	width: 120px;
	height: 64px;
	position: absolute;
	top: 0;
	left: 64px;
}
/* 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: #c22026;
	}
}
/* Footer Menu */
.footer_menu {
	position: fixed;
	bottom: 16px;
	left: calc(50% - 240px);
	width: 480px;
	height: 64px;
	border-radius: 32px;
	background: #fff;
	padding: 0 8px 0 8px;
	margin: 0 auto 0 auto;
	z-index: 99999;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 640px) {
	.footer_menu {
		position: fixed;
		left: 16px;
		bottom: 16px;
		width: calc(100% - 56px);
		margin: 0 auto 0 auto;
	}
}
.footer_menu li {
	padding: 12px 0 0 0;
	height: 64px;
	text-align: center;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
}
.footer_menu li.focus,
.footer_menu li:hover {
	color: #c22026;
}
.footer_menu li::after {
	content: ' ';
	height: 4px;
	background: #c22026;
	border-radius: 8px;
	position: absolute;
	bottom: 0;
	padding: 0;
	margin: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	transition-duration: 0.2s;
	left: 50%;
	transform: translate(-50%, 0);
	transform-origin: center;
	opacity: 0;
	width: 1px;
}
.footer_menu li:hover::after {
	opacity: 1;
	width: 24px;
}
.footer_menu li b {
	font-weight: normal;
	display: block;
	font-size: .8em;
	color: #000;
}
.footer_menu li.focus b,
.footer_menu li:hover b {
	color: #c22026;
}
.footer_menu li div.notification {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #c22026;
	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;
}

.float_submit {
	position: fixed;
	background: #c22026;
	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;
}
/* 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 span {
	color: #c22026 !important;
}
.search input[name=keyword],
.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 span {
	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;
	min-height: 40px;
}
.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 span {
	position: absolute;
	top: 8px;
	right: 8px;
	transform: scale(.8);
	color: #fff;
	opacity: .6;
}
.search_advanced div.advanced:hover span {
	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: 8px;
	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: 8px;
	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: #c22026;
}
.filter_expanded i {
	color: #c22026;
}
#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: #c22026;
	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: #c22026;
	border-color: #c22026;
}
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: #c22026;
	transition: none;
}
ul.breadcrumb li:hover a {
	color: #fff;
}
.sub_breadcrumb {
	width: calc(100% - 16px);
	border-radius: 4px;
	padding: 0;
	margin: 0 0 8px 0;
	list-style: none;
	min-height: 34px;
}
.sub_breadcrumb li {
	margin: 0;
	font-size: .9em;
	float: left;
	min-height: 34px;
}
.sub_breadcrumb li a {
	display: block;
	padding: 8px 16px 8px 16px;
	background: #f0f0f0;
	border-radius: 8px;
	border: 1px solid #dedede;
	color: #000;
}
.sub_breadcrumb li a {
	border-radius: 8px 0 0 8px;
	border-right: 0;
}
.sub_breadcrumb li:last-child a {
	border-radius: 0 8px 8px 0;
	border-right: 1px solid #dedede;
}
.sub_breadcrumb li a:hover {
	background: #c22026;
	border: 1px solid #c22026;
	border-right: 0;
	color: #fff;
}
.sub_breadcrumb li:last-child a:hover {
	border-right: 1px solid #c22026;
}
/* Ideas */
.idea-banner {
	width: 100%;
	text-align: center;
}
.idea-header {
	width: calc(100% - 24px);
	background: #c22026;
	padding: 16px 0 16px 24px;
	margin: 0 0 24px 0;
	border-radius: 8px;
	position: relative;
}
.idea-header a {
	color: #fff;
	margin: 0 8px 0 0;
	font-size: 1em;
}
@media screen and (min-width: 640px) {
	.idea-header a {
		margin: 0 32px 0 0;
		font-size: 1.2em;
	}
}
.idea-header a:last-child {
	float: right;
	position: relative;
	padding: 0 28px 0 0;
}
.idea-header a:last-child i {
	position: absolute;
	top: -2px;
	right: 0;
}
.idea-vote {
	width: 100%;
	position: relative;
	clear: both;
	margin: 16px 0 16px;
}
.idea-p {
	padding: 0;
	font-size: 1.15em;
	line-height: 1.4em;
}
.idea-cta {
	width: calc(100% - 48px);
	padding: 24px;
	text-align: center;
}
.idea-cta a {
	width: 100%;
	font-size: 1.2em !important;
	padding: 16px 24px 16px 24px !important;
}
.idea-backup {
	margin: 48px 0 0 0;
}
.idea-backup .submit {
	margin: 8px 0 0 0;
}
.ideas li {
	min-height: 32px !important;
}
.table-content {
	margin: 0 0 24px 0;
}
.table-content ol {
	display: table-cell;
	background: #f0f0f0;
	border-radius: 8px;
	padding: 24px 32px 16px 48px;
}
.table-content ol li {
	padding: 0 0 8px 0;
}

/* ------------------------------------------------------- */
/* DASHBOARD */
/* ------------------------------------------------------- */
.dashboard {
	width: 100%;
}
.dashboard i {
	position: absolute;
	top: 12px;
	left: 16px;
}
.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;
}
.dashboard .grid {
	width: 100%;
}
.dashboard .grid:after {
	content: "";
	width: 100%;
	position: relative;
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
}
.dashboard .grid a {
	border: 1px solid #efe1e3;
	width: calc(25% - 110px);
	min-height: 24px;
	border-radius: 8px;
	float: left;
	margin: 0 16px 16px 0;
	padding: 16px 36px 16px 56px;
}
.dashboard .grid .tickets {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 2em;
	font-weight: 100;
}
.dashboard .grid a.clean {
	color: #666;
}
.dashboard .grid a.pending {
	color: #252525;
	border: 1px solid #c22026;
}
.dashboard .grid a:hover {
	border: 1px solid #c22026;
	color: #fff;
}
@media screen and (max-width: 1024px) {
	.dashboard .grid a {
		width: calc(33.3% - 72px);
	}
}
@media screen and (max-width: 768px) {
	.dashboard .grid a {
		width: calc(50% - 96px);
	}
}
@media screen and (max-width: 540px) {
	.dashboard .grid a {
		width: calc(100% - 96px);
	}
}

.dashboard .table {
	width: calc(100% - 32px);
	font-size: .9em;
	border: 0;
	margin: 8px !important;
}
.dashboard .table li {
	padding: 8px;
}

/* ------------------------------------------------------- */
/* 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: #f0f0f0;
	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: #c22026;
}
#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: #c22026;
	display: block;
	transition: .1s;
	margin-top: 10px;
}
#account div.logout a:hover {
	color: #ccc;
}
.app_logout {
	position: fixed;
	bottom: 16px;
	right: 16px;
}
/* Profile */
.profile {
	width: calc(100% - 32px);
	padding: 0 16px 0 16px;
	cursor: default;
	position: relative;
	border-top: 1px solid #303030;
	border-bottom: 1px solid #303030;
	min-height: 80px;
	margin: 0 0 16px 0;
}
.profile .avatar {
	background: #161616;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	text-align: center;
	position: absolute;
	top: 16px;
	left: 16px;
	overflow: hidden;
}
.profile .avatar img {
	width: 48px;
	height: 48px;
	border-radius: 4px;
}
.profile .avatar:hover img {
	transform: scale(1.2);
}
.profile .avatar span {
	margin: 12px 0 0 0;
}
.profile .information {
	font-size: .9em;
	color: #fff;
	width: calc(100% - 64px);
	text-align: left;
	margin: 24px 0 0 64px;
	padding: 0;
	position: relative;
}
.profile .online {
	color: #c22026;
	font-size: .8em;
	font-weight: bold;
	padding: 0 0 0 12px;
	margin: 8px 0 0 0;
	position: relative;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.profile .online:before {
	content: ' ';
	background: #c22026;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 4px;
	left: 0;
}
.class_profile {
	height: 140px;
	display: inline-grid;
	width: 140px;
	position: relative;
}
.class_profile .avatar {
	display: block;
	width: 120px;
	height: 120px;
	overflow: hidden;
	position: absolute;
	top: 64px;
	left: 0;
	border-radius: 50%;
	text-align: center;
}
.class_profile .avatar img {
	position: absolute;
	height: 120px;
	width: 240px;
	max-width: unset;
	top: 0;
	left: -50%;
}
.fix_profile {
	margin: -64px 0 0 0;
}
.skills {
	background: url('../images/skills_chart.jpg');
	width: 400px;
	height: 400px;
	background-size: contain;
	text-align: center;
	margin: 0 auto 0 auto;
	font-size: 1.6em;
	color: #c22026;
}
.skills_indicators {
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
	clear: both;
	transform: scale(.8);
}
.skills_indicators tr {
	float: left;
	margin: 16px 24px 0 0;
}
.skills_indicators td {
	font-size: 1.3em;
}
.skills_matrix {
	width: auto;
	border-collapse: collapse;
	background: #ddd;
	padding: 1px;
	margin: 0;
	border-radius: 16px;
	border: 1px solid #ddd;
	overflow: hidden;
}
.skills_matrix th {
	background: #f3f3f3;
	color: #333;
	font-size: 1em;
	font-weight: normal;
	min-width: 32px;
	height: 180px;
	padding: 4px 16px 4px 16px;
	text-align: left;
	position: relative;
}
.skills_matrix th span.skill {
	position: absolute;
	bottom: 20%;
	left: 0;
	transform: rotate(-90deg);
	display: block;
	padding: 0;
	width: 100%;
	text-align: left;
	white-space: nowrap;
}
.skills_matrix td {
	background: #fff;
	padding: 8px;
	border: 1px solid #ddd;
}
.skills_matrix tr:hover td {
	background: #f3f3f3;
}
.skills_matrix th.number,
.skills_matrix td.number {
	width: 24px;
	min-width: 24px;
	text-align: center;
}
.skills_matrix th.name,
.skills_matrix td.name {
	width: auto;
	text-align: left;
}
.skills_matrix td.name {
	font-size: 1.1em;
}
.skills_matrix .description {
	font-size: .8em;
	color: #999;
	padding: 0;
	margin: 4px 0 0 0;
}
.skill_circle {
	width: 44px;
	height: 44px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	margin: 0 auto 0 auto;
}
.skill_circle .skill_progress {
	background: #fff;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	overflow: hidden;
}
.skill_circle .skill_progress div {
    border: 1px solid #c22026;
	background: #ec7286;
	border-radius: 4px;
	width: 12px;
	height: 12px;
	position: absolute;
	top: 6px;
	left: 6px;
}
.skill_circle .skill_progress div:nth-child(2) {
	top: 6px;
	left: 24px;
}
.skill_circle .skill_progress div:nth-child(3) {
	top: 24px;
	left: 24px;
}
.skill_circle .skill_progress div:nth-child(4) {
	top: 24px;
	left: 6px;
}
.skill_circle .skill_progress div.off {
	border: 1px solid #ddd;
	background: #eee;
}
.skill_circle .skill_progress div:hover {
	background: #c22026;
	border: 1px solid #c22026;
	opacity: .8;
}
.denied {
	width: calc(100% + 32px);
	height: calc(100vh - 100px);
	background: #c22026;
	color: #fff;
	padding: 100px 0 0 0;
	font-size: 1.2em;
	text-align: center;
	position: absolute;
	top: -16px;
	left: 0;
}
.denied a {
	clear: both;
	display: inline-block;
	background: #fff;
	color: #c22026;
	padding: 16px 24px 16px 24px;
	width: auto;
	white-space: nowrap;
	border-radius: 16px;
	margin: 24px auto 0 auto;
}
.checkbox {
	display: inline-block;
	border-radius: 50%;
	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: #c22026;
	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;
}
.filter-group {
	display: inline-block;
}
.filter-group .checkmark {
	top: -4px;
	left: 0;
}
/* ------------------------------------------------ */
/* LOGIN FORM */
/* ------------------------------------------------ */
#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: not-allowed;
}
ul.design li.stamp img {
	height: 200px;
}
ul.design li.label {
	background: #eee;
	color: #000;
	font-weight: 500;
	font-size: 1.2em;
	padding: 8px 8px 8px 16px;
	border-radius: 8px;
	margin: 8px 0 16px 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: 1em;
}

span.warning {
	background: transparent !important;
	color: #c22026;
	font-size: 1.1em;
	line-height: 1.3em;
}

.warning {
	background: #ffecef;
	color: #c22026;
	font-size: 1.1em;
	line-height: 1.3em;
	padding: 16px;
	border-radius: 8px;
	margin: 16px 0 8px 0;
	clear: both;
}
.warning .icon {
	color: #c22026;
	display: block;
	margin: 24px;
	transform: scale(2);
}
.warning .description {
	padding: 0;
	margin: 4px 0 0 0;
	font-size: 1em;
}
.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;
}
ul.design li.from {
	margin: 4px 0 0 0;
}
ul.design li.to {
	margin: 0 0 8px 0;
}
ul.design li.from input,
ul.design li.to input {
	width: 60%;
	margin: 0;
}
ul.design li.from select,
ul.design li.to select {
	width: calc(40% - 16px);
}
ul.design li.arrow {
	margin: 0;
	padding: 0;
	line-height: 100%;
}
ul.design li.arrow span {
	transform: scale(.6);
	margin: 0 0 0 16px;
}
ul.design .hint a {
	font-size: .9em !important;
	margin: 4px 4px 4px 0;
	display: inline-block;
}
ul.telegroup {
	width: 100%;
	position: relative;
}
ul.telegroup textarea[name=message] {
	width: calc(100% - 96px);
	min-height: 160px;
}
ul.telegroup a.submit {
	text-align: center;
	width: 48px;
	height: 32px;
	position: absolute;
	top: 32px;
	right: 4px;
}

#courses-list {
	margin: 0;
	padding: 0;
	max-height: 240px;
	overflow-y: scroll;
}
#courses-list li a {
	color: #000;
	display: block;
	cursor: pointer;
	line-height: 120%;
	width: calc(100% - 16px);
	padding: 8px;
	border-bottom: 1px solid #eee;
}
#courses-list li a:hover {
	color: #c22026;
}
#courses-list li span {
	display: block;
	clear: both;
	font-size: .8em;
	margin: 0;
	padding: 0;
}
#courses-list li:hover {
	background: #f9f9f9;
}

: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: #c22026;
	height: 12px;
	border-radius: 16px;
	animation: 2s ease-out 0s 1 normal grow_right;
}

.ask {
	background: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	z-index: 1000000;
	position: fixed;
	overflow: hidden;
	margin: -16px 0 0 0;
	transition: none !important;
}
.ask div.box {
	width: 320px;
	padding: 24px 24px 8px 24px;
	margin: 5% auto 0 auto;
}
.ask div.title {
	background: #fff;
	color: #252525;
	width: 320px;
	min-height: 48px;
	line-height: 30px;
	margin: 0;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	font-size: 1.2em;
	border-bottom: 1px solid #eee;
}

.ask div.title b {
	display: block;
	margin: 0 0 0 8px;
	padding: 8px;
	font-weight: normal;
}
.ask div.title span {
	color: #999;
	font-size: .9em;
	margin: 4px 4px 4px 0;
	display: block;
	line-height: 1.2em;
}
.ask p {
	background: #fff;
	width: 320px;
	line-height: 50px;
	margin: 0;
	padding: 16px 16px 8px 16px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 0 0 6px 6px;
}
.ask p button.submit {
}

#loading-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background-color: #c22026;
	z-index: 99999;
	transition: width 0.4s ease;
}
.loading {
	background: url('../images/loading.gif');
	width: 16px;
	height: 11px;
	margin: 0 auto 0 auto;
	display: inline-block !important;
	text-align: center;
}
.loading .progress_bar {
	width: 100%;
	max-width: 720px;
	height: 8px;
	background: #f9f9f9;
	border-radius: 16px;
	margin: 20% auto 0 auto;
	position: relative;
}
.loading .progress_bar .text {
	position: absolute;
	top: -24px;
	left: 0;
	font-size: .85em;
}
.loading .progress_bar .current {
	position: absolute;
	top: -24px;
	right: 0;
	font-size: .85em;
}
.loading .progress_bar .current_status {
	height: 8px;
	background: #c22026;
	animation: flashing 1s infinite;
}
@keyframes flashing {
	0% { opacity: 1 }
	50% { opacity: 0.3 }
	100% { opacity: 1 }
}
.refresh {
	z-index: 9999999;
	position: fixed;
	top: 24px;
	right: 24px;
}
.refresh .wrapper {
	width: 80px; /* Set the size of the progress bar */
	height: 80px;
	background: #c22026;
	border-radius: 40px;
	position: absolute; /* Enable clipping */
	clip: rect(0px, 80px, 80px, 40px);
}
.refresh .clock {
	position: fixed;
	right: 24px;
	top: 16px;
	background: #c22026;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	transform: scale(.5);
}
.refresh .clock .circle {
	background: #fff;
	width: 60px;
	height: 60px;
	border: 10px solid #c22026;
	border-radius: 40px;
	position: absolute;
	clip: rect(0px, 40px, 80px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
	-webkit-animation-iteration-count: 1;  /* Only run once */
	-webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
	-webkit-animation-timing-function: linear; /* Linear animation */
}
.refresh .clock .wrapper[data-anim~=wrapper] {
	-webkit-animation-duration: 0.01s; /* Complete keyframes asap */
	-webkit-animation-delay: 30s; /* Wait half of the animation */
	-webkit-animation-name: close-wrapper; /* Keyframes name */
}
.refresh .clock .circle[data-anim~=left] {
	-webkit-animation-duration: 60s; /* Full animation time */
	-webkit-animation-name: left-spin;
}
.refresh .clock .circle[data-anim~=right] {
	-webkit-animation-duration: 30s; /* Half animation time */
	-webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(180deg);
	}
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
	to {
		clip: rect(auto, auto, auto, auto);
	}
}

.full-screen {
	background: #fff center center url('../images/rolling.gif') no-repeat;
	background-size: 50px 50px;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	margin: 0 auto 0 auto;
	z-index: 1000000;
	cursor: wait;
	text-align: center;
	display: inline-block;
}
.no-spin {
	background: #fff;
}
#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 span {
	position: absolute;
	top: 12px;
	left: 16px;
}
.link input {
	width: 1px;
	height: 1px;
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
}
/* ------------------------------------------------------- */
/* Filter */
/* ------------------------------------------------------- */
.filter {
	width: 100%;
	height: 54px;
	display: inline-flex;
	margin: 0;
	padding: 0;
}
.filter form {
	margin: 0;
	padding: 0;
	display: inline-flex;
}
.filter input {
	height: 44px;
	line-height: 100%;
}
/* ------------------------------------------------------- */
/* PAGE LAYOUT */
/* ------------------------------------------------------- */
.content {
	width: 100%;
	padding: 8px;
	margin: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}
.block {
	background: #fff;
	border-radius: 8px;
	margin: 8px 8px 16px 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	line-height: 150%;
	padding: 8px;
	padding-bottom: 8px !important;
}
.block:hover {
	box-shadow: 0 1px 16px rgba(0, 0, 0, 0.1);
}
.block_padding {
	width: calc(100% - 32px) !important;
	padding: 16px !important;
}
.block h1 {
	width: calc(100% - 24px);
	border-bottom: 1px solid #eee;
	padding: 16px 8px 8px 16px;
	margin: 0 0 8px 0;
}
.block span.user {
	color: #c22026;
	display: block;
	clear: both;
	margin: 0 0 5px 0;
}
.block span.date {
	color: #ddd;
	clear: both;
	display: block;
	margin: 5px 0 0 0;
}
.block.random_customer {
	height: 160px;
	padding: 16px;
	position: relative;
}
.block.random_customer .avatar {
	position: absolute;
	top: 16px;
	left: 16px;
}
.block.random_customer .avatar label {
	color: #fff;
	width: 40px;
	height: 32px;
	border-radius: 20px;
	background: #c22026;
	position: absolute;
	padding: 8px 0 0 0;
	top: 0;
	right: -16px;
	text-align: center;
}
.block.random_customer .information {
	position: absolute;
	top: 24px;
	left: 160px;
	padding: 0;
	margin: 0;
	text-align: left;
}
.block.random_customer .avatar img {
	width: 120px;
	height: 120px;
	border-radius: 60px;
}
.consult {
	position: relative;
}
.consult .symbol {
	background: #f9f9f9;
	position: absolute;
	top: 8px;
	left: 8px;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	text-align: center;
}
.consult .symbol span {
	font-variation-settings: unset;
	color: #666;
	margin: 12px 0 0 0;
}
.consult .channel {
	margin: 4px 0 8px 56px;
	display: block;
}
.consult .course {
	font-size: 1.1em;
	display: block;
	margin: 4px 0 8px 56px;
}
.consult .course p {
	padding: 0;
	margin: 0;
	font-size: .9em;
}
.consult .course a {
	color: #000;
}
.consult .status {
	display: block;
	margin: 0 0 0 56px;
}
.consult .edit {
	position: absolute;
	top: 16px;
	right: 16px;
}
.consult .edit a {
	color: #ccc;
}
.consult .edit a:hover {
	color: #c22026;
}
.consult p.description {
	font-size: 1.1em;
	width: calc(100% - 80px);
	background: #f9f9f9;
	padding: 8px;
	border-radius: 8px;
	margin: 8px 0 4px 56px;
}
.consult .sale {
	margin: 4px 0 0 56px;
}
/* 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: #c22026;
	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: #c22026;
	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 span.material-symbols-outlined,
div#left ul.menu li i {
	color: #c2c2c2;
	position: absolute;
	top: 12px;
	left: 12px;
}
div#left ul.menu li a:hover span.material-symbols-outlined {
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
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;
	background: #313131;
	border-radius: 8px;
}
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: #c22026;
	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;
	}
}
/* Right */
div#right {
	padding: 0 0 0 260px;
	width: calc(100% - 288px);
	float: left;
	display: block;
	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: 16px;
	font-size: 1.1em;
	margin: 10% auto 16px 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: #fef0f2;
	font-family: Roboto, sans-serif;
	font-size: 1em;
	color: #c22026;
	cursor: pointer !important;
	line-height: 32px;
	min-height: 32px;
	padding: 8px 12px 4px 12px;
	border: 1px solid #fef0f2;
	border-radius: 8px;
	white-space: nowrap;
	margin: 0 8px 8px 0;
	-webkit-appearance: none;
	display: inline-flex;
}
.button:hover,
button:hover {
	background: #9f0e13;
	border: 1px solid #9f0e13;
	color: #fef0f2;
}
.button:hover i,
button:hover i {
	color: #fff;
}
.button i,
button i {
	transition: none;
	padding: 0;
	margin: 2px 2px 2px 0;
	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: #c22026;
	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: #c22026;
	border: 1px solid #c22026;
	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: #9f0e13;
	border: 1px solid #9f0e13;
}
.disabled,
input.disabled,
input.disabled:hover,
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: #c22026;
	color: #fff;
}

/* ------------------------------------------------------- */
/* MULTI CATEGORIES */
/* ------------------------------------------------------- */
.multi_categories {
	width: 100%;
	height: 450px;
	overflow-y: scroll;
}

/* ------------------------------------------------------- */
/* CHART */
/* ------------------------------------------------------- */
.chart {
	margin: 0 24px 0 0;
	display: inline-grid;
	position: relative;
}
.chart .label {
	margin: 4px 0 0 0;
	opacity: 1;
	width: 100%;
	text-align: center;
}
.chart:hover .label {
	opacity: 1;
}
.chart span.count {
	display: contents;
}
.chart .label span {
	border-radius: 6px;
	padding: 4px 8px 4px 8px;
	color: #fff;
	display: inline-block;
	max-width: 160px;
}
.chart_number {
	display: inline-block;
	background: #fff;
	color: #c22026;
	width: calc(50% - 54px);
	padding: 16px;
	border-radius: 16px;
	position: relative;
	cursor: pointer;
	vertical-align: top;
}
@media screen and (max-width: 640px) {
	.chart_number {
		width: calc(100% - 50px);
	}
}
@media screen and (max-width: 1280px) {
	.chart_number {
		width: calc(100% - 50px);
	}
}
.chart_number a.more {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: #f9f9f9;
	color: #999;
	position: absolute;
	bottom: 16px;
	right: 16px;
	text-align: center;
	padding: 0;
	transition: none;
	overflow: hidden;
	display: inline-block;
}
.chart_number a.more:hover {
	background: #c22026;
	color: #fff;
}
.chart_number a.more span {
	display: inline-block;
	margin: 4px 0 0 0;
	transform: scale(.7);
}
.chart_number .name {
	font-size: 1em;
	margin: 4px 0 0 0;
	color: #252525;
}
.chart_number .number {
	font-size: 2.3em;
	color: #333;
	margin: 8px 0 8px 0;
}
@media screen and (max-width: 1024px) {
	.chart_number .number {
		font-size: 1.8em;
		word-break: break-all;
	}
}
.chart_number .number .description {
	font-size: .4em;
	color: #999;
	background: #f9f9f9;
	padding: 2px 8px 2px 8px;
	border-radius: 8px;
	position: absolute;
	display: inline-block;
	bottom: 0;
	right: 16px;
}
.chart_vip .number {
	color: #c22026;
}
.chart_members .number {

}
.chart_attendance .number {

}
.chart_absence {

}
.chart_absence_2 {

}
@property --p{
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}
.pie {
	--p:16;
	--b:16px;
	--c:darkred;
	--w:120px;

	border-radius: 50%;
	width: var(--w);
	aspect-ratio: 1;
	position: relative;
	display: inline-grid;
	margin: 5px;
	place-content: center;
	font-size: 2em;
	color: #c22026;
	border: 8px solid rgba(255,255,255,.5);
	z-index: 999;
}
.pie:hover {
	border: 8px solid rgba(255,255,255,1);
	cursor: pointer;
}
.pie:before,
.pie:after {
	content: "";
	position: absolute;
	border-radius: 50%;
}
.pie:before {
	inset: 0;
	background:
			radial-gradient(farthest-side,var(--c) 98%,#f0f0f0) top/var(--b) var(--b) no-repeat,
			conic-gradient(var(--c) calc(var(--p)*1%),#f0f0f0 0);
	-webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
	mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
	inset: calc(50% - var(--b)/2);
	background: var(--c);
	transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
	animation: p 1s .5s both;
}
.no-round:before {
	background-size: 0 0, auto;
}
.no-round:after {
	content: none;
}
@keyframes p {
	from { --p:0 }
}
/* Chart Columns */
.chart_columns {
	width: 272px;
	height: 48px;
	background: #f9f9f9;
	margin: 0;
	padding: 0;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.chart_columns .number {
	position: absolute;
	top: 16px;
	right: 8px;
	font-size: 1.5em;
	font-weight: 100;
	color: #c22026;
}
.chart_columns div.month {
	margin: auto 1px 0 0;
	background: #f0f0f0;
	width: 16px;
	height: 48px;
	float: left;
	padding: 0;
	position: relative;
}
.chart_columns:after {
	content: '';
	position: absolute;
	width: calc(100% - 68px);
	height: 1px;
	background: #c22026;
	top: 60%;
	left: 0;
	opacity: .2;
}
:root {
	--h: 1%;
}
@keyframes grow_up {
	0% {
		height: 1%;
	}
	100% {
		height: var(--h);
	}
}
.chart_columns div.month div.progress {
	width: 16px;
	background: #c22026;
	position: absolute;
	bottom: 0;
	left: 0;
	height: var(--h);
	animation: 1s ease-out 0s 1 normal grow_up;
}

.chart_columns div.month:hover div.progress,
.chart_columns div.month:hover div.active {
	background: #c22026;
	opacity: .5;
}
@media screen and (max-width: 768px) {
	.chart_columns {
		width: 320px;
	}
}
@media screen and (max-width: 640px) {
	.chart_columns {
		width: 100%;
	}
}
.chart_columns div.month:hover div.progress,
.chart_columns div.month:hover div.active {
	background: #c22026;
	opacity: .5;
}
.chart_columns div.active {
	background: #f7d4da !important;
}

/* Design for Chart Year */
.chart_year {
	width: 400px;
	position: relative;
}
.chart_year .chart_columns {
	width: 400px;
	min-height: 112px;
	background: #f9f9f9;
	border-top: 24px solid #f9f9f9;
	position: absolute;
	top: -72px;
	left: 8px;
}
@media screen and (max-width: 960px) {
	.chart_year {
		min-height: 160px;
		display: block;
	}
	.chart_year .chart_columns {
		top: 0;
	}
}
.chart_year .chart_columns div.month div.progress {
	width: 6px;
	margin: 0 0 0 10px;
}
.chart_year .chart_columns .label {
	font-size: .9em;
	color: #ccc;
	position: absolute;
	bottom: -24px;
	left: -1px;
}
.chart_year .chart_columns .number {
	right: 16px;
}
.chart_year .chart_columns .result_month {
	color: #c22026;
	top: 8px;
	font-size: 1.4em;
}
.chart_year .chart_columns .kpi_year {
	color: #c22026;
	top: 32px;
	font-size: .8em;
}
.chart_year .chart_columns div.month {
	height: 88px;
	width: 24px;
}
.chart_year .chart_columns:after {
	width: calc(100% - 102px);
	background: #c22026;
	top: 22%;
}

.area-chart {
	/* Reset */
	margin: 0;
	padding: 0;
	border: 0;

	/* Dimensions */
	width: 100%;
	max-width: var(--chart-width, 600px);
	height: var(--chart-height, 300px);
}
.area-chart tbody {
	width: 100%;
	height: var(--chart-height, 300px);

	/* Layout */
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	flex-direction: row;
}
.area-chart tr {
	position: relative;

	/* Even size items */
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}
.area-chart td {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	/* Color */
	background: var(--color, rgba(232, 38, 70, 0.75));
	border-top: 1px solid #0b2e13;
	clip-path: polygon(
			0% calc(100% * (1 - var(--start))),
			100% calc(100% * (1 - var(--end))),
			100% 100%,
			0% 100%
	);
}
.area-chart td:nth-of-type(1) {
	--color: rgba(232, 38, 70, 0.75);
}
.area-chart td:nth-of-type(2) {
	--color: rgba(255, 180, 50, 0.75);
}
.area-chart td:nth-of-type(3) {
	--color: rgba(255, 220, 90, 0.75);
}

/* ------------------------------------------------------- */
/* 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, .full {
	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: #c22026;
	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: #c22026;
}
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: #c22026;
	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: #c22026;
	color: #fff;
	border: 1px solid #c22026;
}
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: #c22026;
}
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: calc(70% - 16px);
	margin: 0 16px 0 0;
}
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;
}
/* Shedulers */
select[name="option_minutes"]::before {
	content: ' :';
}

/* Call Center History Log View */
.history {
	width: 85%;
	overflow: scroll;
	height: 72vh;
	white-space: nowrap;
	position: absolute;
	top: 136px;
	left: 260px;
}
.history .log {
	vertical-align: top;
	width: 320px;
	display: inline-block;
	white-space: normal;
	margin: 0 8px 0 0;
}
.history .log ul {
	width: calc(100% - 32px);
	border-radius: 8px;
	background: #fff;
	list-style: none;
	vertical-align: top;
	margin: 0;
	padding: 16px;
}
.history .log ul li {
	font-size: .9em;
}
.history .log ul li.comment {
	width: calc(100% - 16px);
	background: #fff9e1;
	padding: 8px;
	font-size: .8em;
	border-radius: 8px;
}

/* Pell Editor */
#editor {
	background: #fff;
	border: 1px solid #b1b1b1;
	border-radius: 8px;
	padding: 4px;
}
.pell {
	border: 1px solid rgba(10, 10, 10, 0.1);
	box-sizing: border-box;
}
.pell-content {
	box-sizing: border-box;
	height: 450px;
	outline: 0;
	overflow-y: auto;
	padding: 8px;
}
.pell-content p {
	margin: 0;
	padding: 0;
	line-height: 130%;
}
.pell-actionbar {
	background-color: #fff;
	border-bottom: 1px solid rgba(10, 10, 10, 0.1);
	padding: 4px;
}
.pell-button {
	background-color: transparent;
	color: #333;
	border: none;
	cursor: pointer;
	height: 36px;
	outline: 0;
	width: 36px;
	vertical-align: bottom;
	text-align: center;
	font-size: 1.1em;
	padding: 4px;
	display: inline-block;
	margin: 0 8px 4px 0;
}
.pell-button:hover i,
.pell-button i {
	color: #333;
}
.pell-button:hover {
	background: #F0F0F0;
	color: #252525;
	border: 0;
}
.pell-button-selected {
	background-color: #F0F0F0;
}
.survey {
	width: 50%;
	margin: 0 auto 0 auto;
	display: table;
	clear: both;
}
@media screen and (max-width: 1024px) {
	.survey {
		width: 80%;
		margin: 0 auto 0 auto;
	}
}
@media screen and (max-width: 640px) {
	.survey {
		width: 90%;
		margin: 0 auto 0 auto;
	}
}
.survey .banner {
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
	margin: 0 0 24px 0;
}
.survey h1 {
	width: 100%;
	text-align: center;
}
.survey .description {
	border-radius: 8px;
	background: #f0f0f0;
	padding: 16px;
	margin: 16px 0 16px 0;
}
.survey .information {
	list-style: none;
	font-size: .9em;
	border-radius: 8px;
	background: #f0f0f0;
	padding: 16px;
	margin: 16px 0 16px 0;
}
.survey .information li {
	line-height: 120%;
}
.survey .question {
	color: #c22026;
}
.survey .footer {
	border-top: 1px solid #f0f0f0;
	padding: 24px 0 24px 0;
	text-align: center;
	font-size: .9em;
	line-height: 150%;
	color: #999;
}
/* Chat */
.chat_screen {
	position: relative;
	width: 100%;
	height: calc(100vh - 240px);
	margin: 0;
	padding: 0;
	clear: both;
	z-index: 1;
}
.chat_list {
	width: 240px;
	min-width: 240px;
	height: calc(100% - 32px);
	overflow-y: scroll;
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 0 8px 8px 0;
	border-radius: 8px;
	display: block;
	border: 8px solid #fff;
	position: absolute;
	top: 0;
	left: 0;
}
.chat_list li {
	width: calc(100% - 16px);
	float: none !important;
	display: block;
}
.chat_list li a {
	background: #fff;
	font-size: .95em;
	font-weight: bold;
	color: #000;
	display: block;
	width: calc(100% - 64px);
	line-height: 1.3em;
	min-height: 32px;
	margin: 0 0 4px 0;
	padding: 8px 16px 8px 64px;
	position: relative;
}
.chat_list li a .avatar {
	width: 48px;
	height: 48px;
	position: absolute;
	top: 8px;
	left: 8px;
	background: #dddddd;
	border-radius: 24px;
	text-align: center;
	overflow: hidden;
	padding: 0;
	color: #999;
}
.chat_list li a p.topic {
	font-weight: normal;
	font-size: .8em;
	margin: 2px 0 0 0;
	padding: 0 4px 0 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 150px;
	background: #f9f9f9;
	border-radius: 4px;
	display: inline-block;
}
.chat_list li a p.last {
	font-weight: normal;
	display: block;
	margin: 2px 0 0 0;
	padding: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 160px;
}
.chat_list li.active a,
.chat_list li:hover a {
	background: #ededed;
	font-weight: bold;
	border-radius: 12px;
	cursor: pointer;
}
.chat_wrapper {
	width: calc(100% - 288px);
	height: calc(100% - 88px);
	overflow-y: scroll;
	display: flex;
	flex-direction: column-reverse;
	margin: 0 0 8px 288px;
	z-index: 1;
	position: relative;
}
.chat_wrapper .chat {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 2;
}
.chat_wrapper .chat .message {
	color: #000;
	list-style: none;
	float: unset;
	min-width: auto;
	max-width: 80%;
	line-height: 1.3em;
	display: inline-block;
	background: #ededed;
	border-radius: 24px;
	padding: 12px 16px 8px 16px;
	margin: 0 0 8px 0;
	white-space: pre-wrap;
	word-break: break-word;
}
.chat_wrapper .chat .bot {
	background: #c22026;
	color: #fff;
	float: right;
	margin: 0 8px 8px 0;
}
.chat_wrapper .chat .message a.name {
	font-weight: bold;
	margin: 0 0 4px 0;
	padding: 0;
	display: block;
}
.chat_screen .chat_send {
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(100% - 288px);
}
.chat_screen .user_tools {
	position: absolute;
	top: 16px;
	right: 32px;
	z-index: 1000;
	width: 40px;
	min-height: 64px;
}
.chat_screen .user_tools a {
	background: #c22026;
	margin: 0 0 16px 0;
	color: #fff;
	width: 40px;
	height: 40px;
	text-align: center;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	clear: both;
}
.chat_screen .user_tools a span {
	margin: 8px 0 0 0;
}
/* ------------------------------------------------------- */
/* RULES BOARD */
/* ------------------------------------------------------- */
.rules_board {
	font-size: .9em;
	width: 50%;
	background: #ddd;
	border-radius: 8px;
	clear: both;
}
@media screen and (max-width: 768px) {
	.rules_board {
		width: 100%;
	}
}
.rules_board th {
	background: #f9f9f9;
	text-align: center;
	font-weight: normal;
	padding: 8px;
}
.rules_board th:first-child {
	width: 15%;
	border-radius: 8px 0 0 0;
}
.rules_board th:nth-child(2) {
	width: 75%
}
.rules_board th:last-child {
	width: 10%;
	border-radius: 0 8px 0 0;
}
.rules_board td {
	background: #fff;
	padding: 8px;
	font-size: 1em;
}
.rules_board tr:nth-child(5) td:first-child {
	border-radius: 0 0 0 8px;
}
.rules_board tr:last-child td:last-child {
	border-radius: 0 0 8px 0;
}
/* ------------------------------------------------------- */
/* MENU TOOLS */
/* ------------------------------------------------------- */
.menu-tab {
	width: 100%;
	border-bottom: 1px solid #dedede;
	margin: 8px 0 16px 0;
	height: 47px;
	display: inline-block;
}
@media screen and (max-width: 1280px) {
	.menu-tab {
		width: 100%;
		display: block;
		float: unset;
	}
}
.menu-tab a {
	border-radius: 0;
	padding: 16px 0 16px 0;
	display: inline-block;
	line-height: 100%;
	position: relative;
	margin: 0 24px 0 0;
	color: #252525;
	float: left;
	transition: none;
}
@media screen and (max-width: 480px) {
	.menu-tab a {
		padding: 1px;
		height: 48px;
		width: 48px;
		overflow: hidden;
		font-size: .8em;
		color: #f0f0f0;
	}
}
.menu-tab a span {
	position: absolute;
	top: 10px;
	left: 12px;
}
.menu-tab a.active,
.menu-tab a:hover {
	border-bottom: 1px solid #c22026;
	color: #c22026;
}
@media screen and (max-width: 480px) {
	.menu-tab a.active,
	.menu-tab a:hover {
		color: #f0f0f0;
	}
	.menu-tab a.active span,
	.menu-tab a:hover span {
		color: #c22026;
	}
	.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;
}
.mini-tab {
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
}
.mini-tab a {
	display: inline-block;
	background: #f5f5f5;
	padding: 8px 16px 8px 16px;
	border-radius: 8px;
}
.mini-tab a:hover {
	background: #c22026;
	color: #fff;
}
/* ------------------------------------------------------- */
/* 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 #f0f0f0;
	padding: 0 0 8px 0;
	margin: 0 0 8px 0;
}
.customer_card .ship {
	width: 65%;
	float: left;
	padding: 0 0 0 28px;
	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;
}
.customer_card .reminder {
	width: 35%;
	float: right;
	padding: 0 28px 0 0;
	position: relative;
	text-align: right;
	box-sizing: border-box;
}
.customer_card .reminder p {
	font-size: .9em;
	color: #ccc;
	padding: 4px 0 4px 0;
	margin: 0;
}
.customer_card .reminder i {
	position: absolute;
	top: 0;
	right: 0;
}
ul.item_1 {
	border-top: 0;
}
ul.new,
ul.new li {
	background: #fff;
	min-height: 30px !important;
}
ul.new {
	margin: 0 0 10px 0;
	border-top: 1px solid #eaeaea;
}
ul.new input.name {
	width: 100% !important;
}

.float_cta {
	position: fixed;
	bottom: 48px;
	right: 48px;
	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 span {
	text-align: center;
	padding: 0;
	margin: 13px 0 0 0;
}

/* 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: 8px 0 0 0;
}
ul.table_board li {
	font-size: 1.3em;
	font-weight: normal;
}
ul.table_board li.board_bar {
	width: 60%;
}
ul.table_board li.board_bar ul.board_bar {
	width: 100%;
	background: #514666;
	list-style: none;
	border-radius: 10px;
	display: inline-block;
	padding: 0;
	margin: 0;
	height: 56px;
	overflow: hidden;
}
ul.table_board li ul.board_bar li {
	font-size: .9em;
	float: left;
	padding: 0;
	color: #fff;
	height: 56px;
	position: relative;
	z-index: 1;
	cursor: pointer;
}
ul.table_board li ul.board_bar li.success {
	border-radius: 8px 0 0 8px;
	background: #5ada93;
}
ul.table_board li ul.board_bar li.miss {
	background: #e8e783;
}
ul.table_board li ul.board_bar li.fail {
	background: #e5607c;
}
ul.table_board li ul.board_bar li.wrong {
	background: #8968c5;
}
ul.table_board li ul.board_bar li.success:hover,
ul.table_board li ul.board_bar li.miss:hover,
ul.table_board li ul.board_bar li.fail:hover,
ul.table_board li ul.board_bar li.wrong:hover {
	z-index: 2;
}
ul.table_board li ul.board_bar li div.statistic {
	position: absolute;
	width: auto;
	top: 4px;
	left: 4px;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	padding: 4px 8px 4px 8px;
	border-radius: 8px;
	text-wrap: normal;
	white-space: nowrap;
	line-height: 100%;
}
ul.table_board li ul.board_bar li:hover div.statistic {
	transform: scale(1.1);
	top: 8px;
	left: 8px;
}
ul.table_board li ul.board_bar li div.statistic b {
	font-size: 1.2em;
	font-weight: normal;
}
ul.table_board li ul.board_bar li div.statistic i {
	font-size: .9em;
	font-weight: normal;
	font-style: 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: #c22026;
}
ul.table li.image .verified {
	background: #e8f2dd;
	color: #669933;
}
ul.table li.image div.symbol span {
	margin: 12px 0 0 0;
}
ul.table li.image img {
	min-width: 56px;
	min-height: 56px;
	width: 56px;
	height: 56px;
	border-radius: 28px;
}
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: 25%;
	word-break: break-word;
}
ul.table li.title-cut {
	text-overflow: ellipsis;
	max-width: 240px;
	white-space: nowrap;
	overflow: hidden;
}
ul.table li.title .desc {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
}
ul.table li.title .description {
	overflow: hidden;
	max-width: 95%;
}
ul.table li.title p {
	padding: 0;
	margin: 0 0 8px 0;
}
ul.table li.avatar {
	width: 64px;
}
ul.table li.avatar img {
	border-radius: 50%;
	width: 64px;
	height: 64px;
}
ul.table li.questions {
	width: 50%;
	padding: 0 8px 0 8px;
}
ul.table li.questions p.question {
	margin: 16px 0 0 0;
}
ul.table li.questions ul.answers {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
ul.table li.questions ul.answers li {
	display: block;
	float: unset;
	font-size: .9em;
	min-height: unset;
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	margin-bottom: 2px;
	position: relative;
}
ul.table li.questions ul.answers li span {
	position: absolute;
	top: -2px;
	left: -32px;
	transform: scale(.6);
	background: #669933;
	color: #fff;
	border-radius: 50%;
	padding: 4px;
}
ul.table li.questions ul.answers li.right {
	background: #e8f2dd;
	color: #669933;
}
ul.table li.questions ul.answers li.wrong {
	background: #ffecef;
	color: #c22026;
}
ul.table li.questions ul.answers li.wrong span {
	background: #c22026;
}
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%;
}
.sample {
	background: #fff;
}
.sample th {
	background: #eee;
	padding: 8px;
}
.sample th:first-child {
	border-radius: 8px 0 0 0;
}
.sample th:last-child {
	border-radius: 0 8px 0 0;
	border-right: 1px solid #eee;
}
.sample td {
	border-left: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 8px;
}
.sample td:first-child {
	border-radius: 0 0 0 8px;
}
.sample td:last-child {
	border-right: 1px solid #eee;
	border-radius: 0 0 8px 0;
}

.customers_search {
	width: auto;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	position: relative;
	padding: 8px;
}
.customers_search input {
	border: 1px solid #ddd;
	width: 248px !important;
	min-width: unset;
	border-radius: 8px;
	height: 32px;
}
.customers_search .close {
	position: absolute;
	top: 20px;
	left: 220px;
	cursor: pointer;
}
.table_calendar {
	min-width: 1200px;
	display: block;
	width: auto;
	margin: 0;
	overflow-y: hidden;
	overflow-x: scroll !important;
	white-space: nowrap;
}
.table_calendar tr:hover td {
	border-bottom: 1px solid #c22026;
	transition: none;
}
.table_calendar th {
	font-size: .8em;
	background: #c22026;
	border-right: 1px solid #c22026;
	border-bottom: 1px solid #c22026;
	color: #fff;
	padding: 4px 0 4px 0;
	font-weight: normal;
	z-index: 3;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}
.table_calendar th:first-child {
	z-index: 4;
}
.table_calendar td {
	background: #fff;
	white-space: nowrap;
	width: 240px;
	padding: 4px 4px 4px 8px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	z-index: 1;
}
.table_calendar td:first-child,
.table_calendar th:first-child {
	font-size: .9em;
	width: 240px;
	padding: 8px 32px 8px 4px;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
}
.table_calendar td:first-child {
	border-right: 1px solid #fff;
}
.table_calendar th:first-child {
	padding: 0;
}
.table_calendar .select-months {
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	position: relative;
	color: #fff;
}
.table_calendar .select-months .label {
	width: 100%;
	padding: 0;
	margin: 0;
	color: #fff;
	cursor: pointer;
	position: relative;
}
.table_calendar .select-months .label span {
	position: absolute;
	right: 8px;
	top: -2px;
	transform: scale(.8);
}
.table_calendar .select-months .drop {
	position: absolute;
	width: 100%;
	min-height: 32px;
	top: 29px;
	left: 0;
	z-index: 1000000;
	box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
}
.table_calendar .select-months .drop a {
	display: inline-block;
	background: #fff;
	color: #666;
	font-size: .9em;
	padding: 12px 0 12px 0;
	width: 100%;
	opacity: 1;
	border-right: 1px solid #fff;
}
.table_calendar .select-months .drop a:hover {
	border-right: 1px solid #c22026;
	background: #c22026;
	color: #fff;
}

.table_calendar td.sunday {
	background: #f5f5f5;
}
.table_calendar td.sunday,
.table_calendar td.sunday form,
.table_calendar td.sunday form input,
.table_calendar td.sunday form span,
.table_calendar td.sunday form label {
	cursor: default;
}
.table_calendar td label {
	min-height: 80px;
	display: unset;
	margin: 0 4px 0 4px;
}
.table_calendar td form {
	margin: 0;
	padding: 0;
	display: inline-block;
}
.table_calendar td form.disabled {
	opacity: 0;
}
.table_calendar td form:first-child .checkbox input:checked ~ .checkmark {
	background: #eef7e2;
}
.table_calendar td form:first-child .checkbox .checkmark:after {
	border: solid #518508;
	border-width: 0 2px 2px 0;
}
.table_calendar td form .checkbox input:checked ~ .checkmark {
	background: #fde7eb;
}
.table_calendar td form .checkbox .checkmark:after {
	border: solid #c22026;
	border-width: 0 2px 2px 0;
}
.table_calendar td.current {
	background: #fff4f6;
}
.table_calendar td.offline {
	color: #999;
}
.table_calendar td div.online {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 4px;
}
.table_calendar td div.online p {
	width: 8px;
	height: 8px;
	background: #f5f5f5;
	border-radius: 50%;
	border: 3px solid #fff;
}
.table_calendar td div.online p.online {
	background: #81c23c;
	border: 3px solid #d2f5ad;
	animation: online 1s infinite;
}
@keyframes online {
	0% { border: 3px solid #d2f5ad; }
	50% { border: 3px solid #fff; }
	100% { border: 3px solid #d2f5ad; }
}
.table_calendar .description {
	display: block;
	color: #999;
}
.table_calendar .star {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	text-align: center;
	padding: 0;
	line-height: 100%;
}
.table_calendar .star span {
	color: #c22026;
	transform: scale(.6);
	position: absolute;
	top: -5px;
	left: -4px;
}

.calendar {
	table-layout: fixed;
	width: 100%;
	padding: 0;
	margin: 8px 0 8px 0;
}
.calendar thead,
.calendar tr {
	width: 100%;
}
.calendar thead {
	border: 1px solid #999;
}
.calendar .day {
	width: auto;
	background: #fff;
	padding: 24px 8px 4px 8px;
	height: 64px;
	border: 1px solid #ddd;
	position: relative;
	border-radius: 8px;
}
.calendar .day_empty {
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	border-radius: 0;
}
.calendar .header {
	font-weight: normal;
	text-align: center;
	font-size: .9em;
	color: #666;
	padding: 8px 0 8px 0;
	width: auto;
	margin: 0;
	min-height: 48px;
	position: relative;
	background: #f5f5f5;
}
.calendar .day .number {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #666;
}
.calendar .day ul {
	width: 64px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.calendar .day .code a {
	color: #fff;
}
.calendar #today {
	background: #f7dedf;
	color: #c22026;
	border: 1px solid #f9f9f9;
}
.calendar .weeks {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.calendar .weeks ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.calendar .weeks li {
	display: inline-block;
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	border-right: 0;
	width: calc(19% - 18px);
	vertical-align: top;
	height: 220px;
	padding: 8px;
	color: #ccc;
}
@media screen and (max-width: 1586px) {
	.calendar .weeks li {
		width: calc(19% - 22px);
	}
}
@media screen and (max-width: 1280px) {
	.calendar .weeks li {
		width: calc(19% - 20px);
		height: 240px;
	}
}
@media screen and (max-width: 1024px) {
	.calendar .weeks li {
		width: calc(19% - 18px);
	}
}
@media screen and (max-width: 980px) {
	.calendar .weeks li {
		width: calc(19% - 24px);
	}
}
.calendar .weeks li:last-child {
	border-right: 1px solid #ddd;
	border-radius: 0 8px 8px 0;
}
.calendar .weeks li:first-child {
	width: 4%;
	border-radius: 8px 0 0 8px;
}
.calendar .weeks li h2 {
	text-align: center;
	font-weight: normal;
	font-size: 1.4em;
	color: #666;
}
.calendar .weeks li h2 b {
	font-weight: bold;
	font-size: 1.6em;
}
.calendar .day li,
.calendar .weeks .week li {
	position: relative;
	display: inline-block;
	font-size: .9em;
	background: transparent;
	width: calc(100% - 48px);
	border-radius: 8px;
	border: 0;
	height: unset;
	padding: 16px;
	margin: 4px 0 0 0;
}
.calendar .day li p {
	width: 100%;
}
.calendar .day li p.code,
.calendar .weeks .week li p.code {
	font-size: 1.1em;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
.calendar .day li p.name,
.calendar .weeks .week li p.name {
	padding: 0;
	margin: 4px 0 4px 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	opacity: .5;
}
.calendar .day li p.schedule,
.calendar .weeks .week li p.schedule {
	padding: 0;
	margin: 0;
}
.calendar .day li.aio,
.calendar .weeks .week li.aio {
	background: #134290;
	color: #fff;
}
.calendar .day li.ceo,
.calendar .weeks .week li.ceo {
	background: #c22026;
	color: #fff;
}
.calendar .day li.ceo a,
.calendar .weeks .week li.ceo a {
	color: #fff;
}
.calendar .day li.hrm,
.calendar .weeks .week li.hrm {
	background: #4374b0;
	color: #fff;
}
.calendar .day li.hrm a,
.calendar .weeks .week li.hrm a {
	color: #fff;
}
.calendar .day li.ldp,
.calendar .weeks .week li.ldp {
	background: #f9db78;
	color: #000;
}
.calendar .day li.ldp a,
.calendar .weeks .week li.ldp a {
	color: #000;
}
.calendar .day li.qtc,
.calendar .weeks .week li.qtc {
	background: #009933;
	color: #fff;
}
.calendar .day li.qtc a,
.calendar .weeks .week li.qtc a {
	color: #fff;
}
.calendar .day li.qsp,
.calendar .weeks .week li.qsp {
	background: #e0e304;
	color: #000;
}
.calendar .day li.vst,
.calendar .weeks .week li.vst {
	background: #e48c0d;
	color: #fff;
}
.calendar .weeks .week .week_start {
	position: absolute;
	top: 32px;
	left: 8px;
}
.calendar .weeks .week .week_end {
	position: absolute;
	top: 128px;
	left: 8px;
}
li.grade_label {
	padding: 16px 0 0 0;
}
li.grade_label div p {
	position: absolute;
	top: -40px;
	left: 0;
	color: #999;
	font-size: .9em;
	white-space: nowrap;
}
li.grade_label div:last-child p {
	right: 0;
	text-align: right;
}
li.grade div {
	width: auto;
	background: #f0f0f0;
	border-radius: 4px;
	padding: 4px 16px 4px 16px;
	margin: 0 8px 0 0;
	border: 0;
	display: inline-block;
	cursor: pointer;
	position: relative;
}
li.grade div:hover,
li.grade div.active {
	background: #c22026;
	color: #fff;
}

.date_data {
	width: 40%;
	min-height: 64px;
	text-align: right;
	float: right;
	margin: 0;
}
.date_data:after {
	content: ' ';
	display: block;
	clear: both;
	width: 100%;
	height: 1px;
}
@media screen and (max-width: 861px) {
	.date_data {
		width: 100%;
		text-align: left;
		float: unset;
		display: block;
		margin: 0 0 16px 0;
	}
}
.date_data a {
	display: inline-block;
	font-size: 1em;
	background: #f0f0f0;
	color: #252525;
	padding: 8px 16px 8px 16px;
	margin: 0 4px 4px 0;
	border-radius: 8px;
}
.date_data a:hover,
.date_data a.active {
	background: #c22026;
	color: #fff;
}
.tag_green,
.point_good,
.point_normal,
.point_bad {
	font-size: 1em;
	border-radius: 4px !important;
	padding: 4px 8px 4px 8px;
	margin: 0 4px 0 0;
	text-align: center;
	white-space: nowrap;
}
.tag_green,
.point_good {
	background: #e8f2dd;
	color: #669933;
}
.level_1,
.level_2,
.level_3 {
	border-radius: 16px;
	display: inline-block;
	padding: 2px 8px 2px 8px;
	font-size: .8em;
	border: 1px solid rgba(255, 255, 255, .1);
}
.level_1 {
	background: #999;
	color: #fff;
}
.level_2 {
	background: #f4ec64;
	color: #000;
}
.level_3 {
	background: #c22026;
	color: #fff;
}
.point_normal {
	background: #f0f0f0;
	color: #333;
}
.point_bad {
	background: #ffecef;
	color: #c22026;
}
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: #c22026;
	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.flex {
	width: auto;
	word-break: break-word;
}
ul.table li.orders {
	width: 20%;
}
ul.table li.orders .description {
	color: #666;
}
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.group form {
	display: block;
}

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: #c22026;
	color: #fff;
}
ul.table li.class .member_class:hover p {
	background: #fff;
	color: #c22026;
}
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.joiner .missed {
	width: 16px;
	height: 16px;
	background: #f9f9f9;
	border: 1px solid #eee;
	border-radius: 4px;
}
ul.table li.joiner .joined {
	width: 16px;
	height: 16px;
	background: #c22026;
	border: 1px solid #c22026;
	border-radius: 4px;
}
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 0;
	position: relative;
}
ul.table li.attendance span.on i {
	position: absolute;
	top: 0;
	left: 0;
}
ul.table li.attendance span.warning {
	color: #c22026;
	padding: 4px 0 0 0;
	position: relative;
	line-height: 1.6em;
}
ul.table li.attendance span.warning i {
	position: absolute;
	top: 0;
	left: 0;
}
ul.table li.attendance a {
	cursor: pointer;
}
ul.table li.attendance .attendance {
	background: #c22026;
	color: #fff;
	border: 1px solid #c22026;
}
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: #c22026;
}
ul.table li.active {
	width: 5%;
}
ul.table li.active span {
	color: #ccc;
	cursor: pointer;
}
ul.table li.active span.on {
	color: #c22026;
}
ul.table li.message {
	width: 40%;
}
ul.table li.answer {
	width: 35%;
	font-size: .9em;
}
ul.table li .clear {
	width: 100%;
	display: inline-block;
	clear: both;
}
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: #c22026;
	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;
}

.groups {
	margin: 0 0 32px 0;
	padding: 0;
	width: 100%;
	display: block;
	position: relative;
	transition: none;
}
.groups .change {
	width: 100%;
	margin: 0 0 24px 0;
	padding: 0;
	clear: both;
	position: relative;
}
.groups .change form {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
}
.groups .change form input[name='groups'] {
	width: 64px !important;
}
.groups .change .filter {
	width: auto;
	height: auto;
}
.groups .change .filter .toggle-link:hover,
.groups .change .filter .gender-link:hover,
.groups .change .filter .toggle-link.active,
.groups .change .filter .gender-link.active {
	background: #fef0f2;
	border: 1px solid #c22026;
	height: unset;
	min-height: unset;
	color: #c22026;
	display: inline-block;
	border-radius: 8px;
	padding: 8px 8px 0 8px;
	margin: 0 4px 0 0;
}
.groups .change .filter .toggle-link:hover::before,
.groups .change .filter .gender-link:hover::before,
.groups .change .filter .toggle-link.active::before,
.groups .change .filter .gender-link.active::before {
	content: "L";
	margin: 0 8px 4px 4px;
	color: #c22026;
	display: inline-block;
	transform: rotate(-135deg) scaleY(-1);
	vertical-align: middle;
}
.groups .change .filter .toggle-link,
.groups .change .filter .gender-link {
	background: #f5f5f5;
	border: 1px solid #ccc;
	height: unset;
	min-height: unset;
	color: #000;
	display: inline-block;
	border-radius: 8px;
	padding: 8px 8px 0 8px;
	margin: 0 4px 0 0;
	line-height: 2em;
}
.groups label {
	position: relative;
	width: 100%;
	text-align: center;
	display: block;
	padding: 0;
	margin: 32px 0 8px 0;
}
.groups label .name {
	position: absolute;
	font-size: 1.3em;
	top: -56px;
	left: 0;
	width: 40px;
	height: 40px;
	overflow: hidden;
	background: #c22026 !important;
	border: 5px solid rgba(232,38,70,.1) !important;
	-webkit-background-clip: padding-box !important;
	background-clip: padding-box !important;
	border-radius: 50% !important;
	padding: 0 !important;
	line-height: 2em;
	color: #fff;
	cursor: default !important;
}
.groups label.ungroup {
	margin: 4px;
	text-align: left;
	color: #ccc;
}
.groups div.day {
	min-height: 100px;
	height: auto;
	width: 180px;
	padding: 8px 8px 0 8px;
	margin: 0 4px 8px 4px;
	border: 1px solid #dedede;
	border-radius: 8px;
	background: #eee;
	float: left;
	top: 0;
	position: relative;
}
.groups div.day div.member {
	background: #fff;
	padding: 8px 4px 8px 8px;
	margin-bottom: 5px;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid #dedede;
}
.groups div.day .member {
	position: relative;
}
.groups div.customers_search {
	border: 0;
	padding: 0;
}
.groups div.customers_search input {
	width: 204px !important;
}
.groups div.customers_search .close {
	position: absolute;
	top: 12px;
	left: 164px;
	cursor: pointer;
}
.groups div.day div.member:hover {
	background: #fff;
	border: 1px solid #c22026;
	cursor: move;
}
.groups div.day p {
	padding: 0;
	margin: 0 0 4px 0;
}
.groups div.day p.company {
	font-size: .9em;
	opacity: .6;
	margin: 0;
}
.groups div.day p.industry {
	font-size: .9em;
	opacity: .6;
	margin: 0;
}
.groups span.number {
	position: absolute;
	width: auto;
	top: 8px;
	right: 16px;
	text-align: right;
	display: block;
	padding: 4px 0 8px 0;
}
.groups span.number:after {
	content: " người";
}
.groups div.menu-footer {
	background: #fff !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 16px 0 0 0 !important;
}
.groups div.menu-footer a {
	width: calc(100% - 32px);
	position: relative;
	background: #fff;
	font-size: .9em;
	display: inline-block;
	padding: 8px 0 8px 32px;
	border-top: 1px dotted #eee;
}
.groups div.menu-footer a i {
	transform: scale(0.8);
	position: absolute;
	top: 4px;
	left: 2px;
}
.groups div.missed {
	color: #fff;
	background: #c22026 !important;
}
.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;
}
.documents {
	background: #fefefe;
	width: calc(100% - 32px);
	margin: 48px 0 8px 0;
	border: 1px solid #999;
	padding: 16px;
	border-radius: 0 8px 8px 8px;
	position: relative;
}
.documents .active {

}
.documents .tab {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -34px;
	left: -1px;
}
.documents .tab li {
	background: #fefefe;
	border: 1px solid #999;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	margin: 0 8px 0 0;
	padding: 8px 16px 8px 16px;
	float: left;
	width: auto;
	cursor: pointer;
	display: inline-block;
}
.documents .tab li:hover,
.documents .tab li.active {
	background: #fefefe;
	border: 1px solid #c22026;
	border-bottom: 0;
	color: #c22026;
}
.documents .tab li:after {
	content: " ";
	border-bottom: 1px solid #c22026;
	width: 100%;
	height: 1px;
}
.documents .document input {
	margin: 0 0 8px 0;
}
.documents #document_results {
	position: relative;
	display: block;
}
.documents #document_results .search_results li {
	float: unset;
	width: calc(100% - 48px);
}
.documents #document_results .search_results li a {
	padding: 16px;
	border-radius: 4px;
	width: 100%;
	display: block;
}

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

.review a {
	width: calc(100% - 32px);
	position: relative;
	margin: 0 0 16px 0;
	padding: 8px 16px 4px 16px;
	transition: none;
}
.review a.submit {
	background: none;
	color: #c22026;
	border: 1px solid #ccc;
}
.review a p {
	width: calc(100% - 32px);
	white-space: pre-wrap;
	line-height: 120%;
	margin: 8px 0 0 32px;
}
.review a span {
	position: absolute;
	top: 8px;
	left: 8px;
	border-radius: 6px;
	color: #eee;
	background: #eee;
	width: 26px;
	height: 26px;
}
.review a span i {
	font-size: 1.3em;
}
.review a:hover {
	background: #fff;
	color: #c22026;
	border: 1px solid #ccc;
}
.review a:hover span,
.review a.submit span {
	background: #c22026;
	color: #fff;
}
.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: #c22026;
	border: 1px solid #c22026;
	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;
}

/* Customers */
.customers,
.customers li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.customers .profile {
	width: 100%;
	border: 0;
	padding: 0;
	margin: 0;
}
.customers .profile h1 {
	font-size: 1.5em;
}
.customers .profile .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;
}
.customers .profile .information {
	color: #000;
	position: absolute;
	top: 0;
	left: 160px;
	margin: 0;
}
.customers .profile .information .description {
	display: block;
	clear: both;
	list-style: none;
	margin: 0;
	padding: 0;
}
.customers .profile .information .description li {
	width: auto;
	display: inline-block;
	position: relative;
	padding: 8px 0 0 28px;
	margin: 0 4px 0 0;
}
.customers .profile .information .description span {
	transform: scale(.8);
	color: #ccc;
	display: inline-block;
	position: absolute;
	top: 2px;
	left: 0;
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.customers .profile .information .special {
	background: #f9f9f9;
	display: inline-block;
	padding: 16px;
	border: 1px dotted #ccc;
	border-radius: 8px;
	margin: 16px 4px 0 0;
}
.customers .profile .information .special p {
	font-size: 1.2em;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
.customers .profile .information .special p span.normal {
	font-weight: normal;
}
.customers .profile .information .special label {
	display: block;
	color: #ccc;
}
.customers .profile .menu {
	width: 100%;
}
.customers .profile li.tools {
	position: absolute;
	top: 0;
	right: 8px;
}
.customers .menu {
	width: 100%;
	border-bottom: 1px solid #eee;
	margin: 16px 0 16px 0;
}
.customers .menu li {
	display: inline-block;
	padding: 0;
}
.customers .menu li a {
	color: #666;
	padding: 8px 4px 16px 4px;
	margin: 0 16px 0 0;
	display: inline-block;
	transition: none;
}
.customers .menu li:hover a,
.customers .menu li.active a {
	color: #c22026;
	border-bottom: 1px solid #c22026;
}

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: #c22026;
	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: #c22026;
	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: #c22026;
}
.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: #c22026;
}
.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: #c22026;
	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: #c22026;
	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: #c22026;
	float: right;
	text-align: right;
	width: 50% !important;
	white-space: nowrap;
}
ul.prepare {
	border: 0;
}
ul.prepare li {
	min-height: 30px;

}
/* ------------------------------------------------------- */
/* 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;
}
.board {
	width: calc(100% - 32px);
	margin: 0 16px 16px 16px;
}
/* ------------------------------------------------------- */
/* POPUP */
/* ------------------------------------------------------- */
.popup {
	background: rgba(0, 0, 0, .4);
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	transition: none;
}
.modal_popup {
	background-color: rgba(0, 0, 0, .5) !important;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	cursor: unset !important;
}
.modal {
	margin: 0 auto 0 auto;
	width: 540px;
	background: #fff;
	border: 0 !important;
	border-radius: 8px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	padding: 16px;
	font-size: 1em;
	display: inline-block;
	position: relative;
}
@media screen and (max-width: 640px) {
	.modal {
		width: 80%;
	}
}
.modal .close {
	background: transparent !important;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 8px;
	right: 16px;
	text-align: center;
	border: 0 !important;
	cursor: pointer !important;
}
.modal .close i {
	margin: 6px 0 0 0;
}
.modal input {
	margin: 8px 0 8px 0;
}
.modal .button {
	margin: 8px 8px 8px 0;
	width: auto !important;
}

.modal .title {
	color: #000;
	width: auto;
	border: 0 !important;
	display: block;
	font-size: 1.3em;
	font-weight: bold;
	text-align: left;
	margin: 0 0 16px 0;
	padding: 0 0 8px 0;
	letter-spacing: -1px;
	border-radius: 0 !important;
	border-bottom: 1px solid #eee !important;
}
.modal form {
	margin: 0;
	padding: 0;
}
.modal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.modal ul li.icon {
	width: 100%;
	text-align: center;
}
.modal ul li.icon div {
	border-radius: 50%;
	width: 72px;
	height: 72px;
	display: inline-block;
	text-align: center;
	margin: 0 0 24px 0;
	padding: 16px;
}
.modal ul li.icon div.good {
	background: #e8f2dd;
}
.modal ul li.icon div.good i {
	color: #669933;
}
.modal ul li.icon div.bad {
	background: #ffecef;
}
.modal ul li.icon div.bad i {
	color: #c22026;
}
.modal ul li.icon i {
	line-height: 280%;
	transform: scale(2);
}
.modal ul li.message {
	width: 100%;
	display: inline-block;
	text-align: center;
}
.modal .full-size {
	display: inline-block;
	width: calc(100% - 16px) !important;
	text-align: center !important;
	margin: 8px 0 8px 0 !important;
	padding: 8px !important;
}
.modal .submit {
	width: 100% !important;
}
.modal .attendance {
	width: calc(100% - 32px) !important;
	text-align: center !important;
	display: block !important;
}
.modal span.on {
	color: #4cd392;
	padding: 4px 0 0 0;
	position: relative;
}
.modal span.off,
.modal p.description {
	color: #ccc;
}
.page_description {
	background: #e9f4db;
	color: #223706;
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 16px 0;
}
div.notification {
	width: calc(100% - 32px);
	background: #e8f2dd;
	color: #669933;
	margin: 0 0 16px 0;
	text-align: left;
	line-height: 120%;
	font-size: .9em;
	border-radius: 8px;
	padding: 16px;
	clear: both;
}
div.information {
	margin: 64px 0 0 0;
	text-align: center;
	width: 100%;
	font-size: 1.1em;
}
.search_input {
	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: 4px;
	right: 8px;
	display: block;
	height: 46px;
	width: 46px;
	cursor: pointer;
	text-align: center;
	padding: 6px 0 0 0;
}
.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;

}

.table_report {
	width: 100%;
	margin: 16px 0 16px 0;
	border: 1px solid #ddd;
	padding: 0;
}
.table th {
	width: 10%;
	font-weight: normal;
	background: #f5f5f5;
	border-radius: 0;
	padding: 8px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.table th:first-child {
	border-radius: 8px 0 0 0;
}
.table th:nth-child(2) {
	width: 5%;
}
.table th:last-child {
	border-radius: 0 8px 0 0;
	border-right: 0;
}
.table tr {
	border-bottom: 1px solid #ddd;
}
.table tr:last-child {
	border-radius: 0 0 8px 8px;
}
.table td {
	padding: 8px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.table td:last-child {
	border-right: 0;
}
.table tr:last-child td {
	border-bottom: 0;
}
.table tr:last-child td:first-child {
	border-radius: 0 0 0 8px;
}
.table tr:last-child td:last-child {
	border-radius: 0 0 8px 0;
}

.table_report {
	border-radius: 8px;
}
.table_report td span.description {
	font-size: .8em;
	display: block;
	margin: 4px 0 0 0;
}
.table_report .tr {
	background: #fff;
}
.table_report_4 tr:nth-child(2) {
	background: #fff;
}
.table_report_4 tr:nth-child(3) {
	background: #f9f9f9;
}
.table_report_4 tr:nth-child(4) {
	background: #f3f1d4;
}
.table_report_4 tr:nth-child(5) {
	background: #e7f1e7;
}
.table_report_1 th:first-child {
	width: 5%;
}
.table_report_1 th:nth-child(2) {
	width: 20%;
}
.table_report_7 td {
	background: #fff;
	text-align: right;
}
.table_report_7 td:first-child,
.table_report_7 td:nth-child(2) {
	text-align: left;
}
.table_report_7 td.year {
	background: #f9f9f9;
	border-top: 1px solid #eee;
	text-align: left;
	font-size: 1.2em;
}
.table_report_7 tr:hover td {
	background: #eee;
}
.table_report_8 {
	overflow-x: scroll;
	display: flex;
}
.form_report {
	width: 100%;
	display: block;
}
.form_report {

}
.report {
	width: 100%;
	padding: 0;
	background: #f9f9f9;
	position: relative;
	z-index: 1;
}
.report .back {
	position: fixed;
	top: 16px;
	right: 16px;
	cursor: pointer;
	background: #f5f5f5;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-align: center;
	z-index: 1000;
}
.report .back i {
	margin: 4px 0 0 0;
}
.report .back:hover {
	background: #c22026;
	color: #fff;
}
.report .search_switch {
	position: fixed;
	top: 16px;
	right: 16px;
	cursor: pointer;
	background: #999;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-align: center;
	z-index: 3;
}
.report .search_switch i {
	color: #333;
	margin: 4px 0 0 0;
}
.report .search_switch:hover {
	background: #c22026;
	color: #fff;
}
.search_question {
	width: calc(100% - 8px);
	padding: 4px;
	position: fixed;
	background: #fff;
	left: 0;
	top: 0;
	z-index: 2;
}
.search_filter {
	position: fixed;
	right: 48px;
	top: 8px;
}
.report .tab {
	height: 64px;
	padding: 4px 0 0 4px;
	width: calc(100% - 4px);
	background: #fff;
	position: fixed;
	z-index: 3;
	bottom: 0;
	left: 0;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}
.report .tab a {
	padding: 0;
	width: 56px;
	height: 64px;
	display: inline-block;
	text-align: center;
	font-size: .8em;
	float: left;
	color: #000;
	position: relative;
	overflow: hidden;
	word-break: normal;
	margin: 0;
	transition-duration: .2s;
	transform: scale(.8);
	border-radius: 4px;
}
.report .tab a:hover,
.report .tab a.active {
	color: #c22026;
}
.report .tab a i {
	left: 50%;
	transform: translate(-50%, 0);
	position: absolute;
	top: 4px;
}

.report .tab p {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 32px;
	left: 0;
	width: 100%;
}
.report .tab .un_finish {
	width: 32px;
	height: 32px;
	color: #fff;
	font-size: 2.1em;
	line-height: 1.3em;
	text-align: center;
	border-radius: 50%;
	background: #c22026;
	position: absolute;
	top: -4px;
	right: -8px;
	transform: scale(.5);
}
.report .tab .finish {
	width: 32px;
	height: 32px;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	background: #669933;
	position: absolute;
	top: -4px;
	right: -8px;
	transform: scale(.5);
}
.report .item {
	width: calc(100% - 32px);
	list-style: none;
	font-size: 1em;
	margin: 8px auto 0 auto;
	padding: 16px;
	background: #fff;
	position: relative;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid #fff;
	min-height: 24px;
}
.report .item:hover {
	border: 1px solid #c22026;
}
.report .item .name {
	width: calc(100% - 48px)
}
.report .item .point {
	width: 32px;
	height: 32px;
	text-align: center;
	padding: 6px 4px 2px 4px;
	background: #f9f9f9;
	border-radius: 8px;
	font-size: 1.3em;
	color: #000;
	position: absolute;
	top: 8px;
	right: 8px;
}
.report .item .point_bad {
	background: #fcf0f2;
	color: #c22026;
}
.report .item .description {
	width: calc(100% - 32px);
	padding: 16px;
	margin: 16px 0 0 0;
	border-radius: 8px;
	background: #f5f5f5;
	color: #999;
}
.report .card .title {
	display: block;
	line-height: 1.3em;
	width: 80%;
}
.report .card {
	width: calc(100% - 32px);
	list-style: none;
	margin: 8px auto 16px auto;
	padding: 16px;
	background: #fff;
	position: relative;
	border-radius: 8px;
	cursor: pointer;
	min-height: 24px;
}
.report .card .status {
	position: relative;
	display: block;
	background: transparent;
	padding: 0;
	width: 100%;
	text-align: left;
	border-radius: 16px;
	margin: 32px 0 8px 0;
}
.report .card .status .step {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f5f5f5;
	text-align: center;
	display: inline-block;
	line-height: 2em;
	padding: 0;
	margin: 0 24px 0 24px;
	font-size: 1em;
	color: #666;
	position: relative;
}
.report .card .status .step p {
	width: 80px;
	text-align: center;
	line-height: 100%;
	font-size: .8em;
	position: absolute;
	top: 32px;
	left: -24px;
}
.report .card .status .step_active {
	background: #c22026;
	color: #fff;
}
.report .card .status .step_active p {
	color: #c22026;
}
.report .card .status .step_finish {
	position: absolute;
	margin: 0 0 0 24px;
	bottom: 0;
	color: #ccc;
}
.report .card .status .step_finish p {
	display: block;
	font-size: 1.1em;
	position: absolute;
	width: 32px;
	height: 32px;
	top: -12px;
	left: -4px;
	font-family: arial;
	-ms-transform: scaleX(-1) rotate(-40deg);
	-webkit-transform: scaleX(-1) rotate(-40deg);
	transform: scaleX(-1) rotate(-40deg);
}
.report .card .status .step_finish:hover,
.report .card .status .step_finish_active {
	background: #669933;
	color: #fff;
}
.report .card .point {
	font-size: 1.2em;
	padding: 4px 8px 4px 8px;
	position: absolute;
	top: 8px;
	right: 8px;
	border-radius: 8px;
}
.report .card .point_good {
	background: #669933;
	color: #e8f2dd;
}
.report .card .point_normal {
	background: #e8f2dd;
	color: #669933;
}
.report .card .point_bad {
	background: #f8dede;
	color: #d80203;
}
.report .card .point_worse {
	background: #c22026;
	color: #f8d3d3;
}
.report .card .description {
	display: block;
	margin: 4px 0 4px 0;
	padding: 0;
	color: #666;
	font-size: .9em;
}
.report .table {
	width: 100%;
	padding: 0;
	margin: 0;
	background: #fff;
	z-index: 1;
}
.report .table td.label {
	width: 80%;
}
.report form input[name=file] {
	opacity: 0;
}
.report .file_upload {
	background: #ccc;
	border-radius: 8px;
	width: 48px;
	height: 48px;
	text-align: center;
	cursor: pointer;
}
.report .section_name {
	width: calc(100% - 8px);
	margin: 8px 0 8px 0;
	color: #c22026;
	border-radius: 8px;
	padding: 8px 8px 0 0;
	font-size: 1.2em;
	display: block;
	position: relative;
}
.report .section_name .point {
	position: absolute;
	top: 4px;
	right: 0;
	font-size: 1em;
	background: #ccc;
	border-radius: 8px;
	text-align: center;
	padding: 8px;
}
.report .block_name {
	color: #000;
	display: block;
	font-size: 1.1em;
	width: calc(100% - 16px);
	padding: 16px 16px 0 0;
}
.report .section_name .point {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 1.2em;
	background: #e8f2dd;
	color: #669933;
	border-radius: 8px;
	text-align: center;
	padding: 8px;
}
.report .total {
	font-size: 2em;
	position: fixed;
	bottom: 64px;
	right: 16px;
	background: #fff;
	padding: 8px;
	z-index: 2;
	border-radius: 8px;
	cursor: pointer;
}
.report .total_good {
	background: #669933;
	color: #e8f2dd;
}
.report .total_normal {
	background: #e8f2dd;
	color: #669933;
}
.report .total_bad {
	background: #f8dede;
	color: #d80203;
}
.report .total_worse {
	background: #c22026;
	color: #f8d3d3;
}
.report .form {
	background: #fff;
	width: calc(100% - 32px);
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	overflow-x: scroll;
	padding: 16px;
	display: inline-block;
}
.report .form .question {
	width: calc(100% - 48px);
	padding: 0 48px 0 0;
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 0 0 16px 0;
}
.report .form .cancel {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #999;
	width: 32px;
	height: 28px;
	padding: 4px 0 0 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	text-align: center;
}
.report .form .images {

}
.report .form .images img {
	display: inline-block;
	max-width: 240px;
	max-height: 240px;
	cursor: not-allowed;
}
.report .form .upload {
	background: #f9f9f9;
	color: #c22026;
	text-align: center;
	padding: 16px 0 16px 0;
	border-radius: 8px;
	position: relative;
	cursor: pointer;
}
.report .form .upload input {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
}
.report .form input {
	width: auto;
}
.report .form .button {
	padding: 4px 16px 4px 16px;
	border: 0;
	display: inline-block;
}
.report .form .submit {
	padding: 0 16px 0 16px;
	height: auto;
	width: auto;
	background: #c22026;
	color: #fff;
}
.report .form .button:hover {
	background: #c22026;
	color: #fff;
	border: 0;
}
.report .form .buttons {
	margin-bottom: 128px;
}
.report .submit_bad {
	border-radius: 8px;
	padding: 16px;
	background: #fcf0f2;
	color: #c22026;
	text-align: center;
	cursor: pointer;
	margin: 16px auto 8px auto;
}
.report .submit_good {
	border-radius: 8px;
	padding: 16px;
	background: #e8f2dd;
	color: #669933;
	text-align: center;
	cursor: pointer;
	margin: 16px auto 8px auto;
}
.report .submit {
	text-align: left;
	margin: 16px 0 16px 0;
}

.card {
	width: calc(100% - 32px);
	border-radius: 16px;
	background: #fff;
	padding: 16px;
}
.report_status {
	width: 100%;
	position: relative;
	display: inline-block;
	min-height: 48px;
	border-radius: 16px;
	margin: 4px 0 16px 0;
	cursor: pointer;
}
.report_status .step {
	border: 4px solid #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f5f5f5;
	text-align: center;
	display: inline-block;
	line-height: 2em;
	margin: 0 24px 0 24px;
	font-size: 1em;
	color: #666;
	position: relative;
}
.report_status .step:after {
	content: ' ';
	height: 1px;
	width: 64px;
	border-bottom: 1px dashed #ccc;
	position: absolute;
	top: 16px;
	left: 32px;
}
.report_status .step:last-child:after {
	content: unset;
}
.report_status .step p {
	width: 80px;
	text-align: center;
	line-height: 100%;
	font-size: .8em;
	position: absolute;
	top: 32px;
	left: -24px;
}
.report_status .step:hover,
.report_status .step_active {
	background: #c22026;
	color: #fff;
	border: 4px solid #f7dbe0;
}
.report_status .step:hover p,
.report_status .step_active p {
	color: #c22026;
}
.report_status .step_finish {
	position: absolute;
	color: #ccc;
}
.report_status .step_finish p {
	display: block;
	font-size: 1.1em;
	position: absolute;
	width: 32px;
	height: 32px;
	top: -12px;
	left: -4px;
	font-family: arial;
	-ms-transform: scaleX(-1) rotate(-40deg);
	-webkit-transform: scaleX(-1) rotate(-40deg);
	transform: scaleX(-1) rotate(-40deg);
}
.report_status .step_finish:hover,
.report_status .step_finish_active {
	border: 4px solid #fff;
	background: #669933;
	color: #fff;
}
.report_status .step_finish:hover p {
	color: #fff;
}

.quiz_block {
	position: fixed;
	left: 0;
	top: 0;
	width: calc(100% - 16px);
	height: 100vh;
	padding: 0 0 0 16px;
	background: #fff;
}
.quiz_block .navigator {
	margin: 0;
	position: absolute;
	top: 16px;
	left: 0;
	width: 100%;
}
.quiz_block .navigator div {
	position: absolute;
	width: auto;
	padding: 16px;
	background: #f5f5f5;
	border-radius: 24px;
	text-align: center;
	cursor: pointer;
}
.quiz_block .navigator p {
	margin: 0 auto 32px auto;
	text-align: center;
}
.quiz_block .navigator .back {
	top: 0;
	left: 16px;
}
.quiz_block .navigator .next {
	top: 0;
	right: 16px;
}
.quiz_block .navigator div.submit {
	background: transparent;
	padding: 0;
	top: 0;
	right: 16px;
}
.quiz_block .navigator .back:hover,
.quiz_block .navigator .next:hover {
	background: #c22026;
	color: #fff;
}
.quiz_block .question {
	width: calc(100% - 64px);
	height: 24vh;
	text-align: center;
	font-size: 1.4em;
	margin: 0 auto 0 auto;
	padding: 30% 32px 0 32px;
}
.quiz_block .answers {
	width: 100%;
}
.quiz_block .answers .choice {
	float: left;
	width: calc(50% - 16px);
	cursor: pointer;
	margin: 0 16px 16px 0;
	padding: 24px 0 24px 0;
	border-radius: 16px;
	text-align: center;
	background: #ffecef;
}
.quiz_block .answers .choice_actived {
	float: left;
	width: calc(50% - 16px);
	cursor: pointer;
	margin: 0 16px 16px 0;
	padding: 24px 0 24px 0;
	border-radius: 16px;
	text-align: center;
	background: #c22026;
	color: #fff;
}

/* ------------------------------------------------------- */
/* LOYALTY */
/* ------------------------------------------------------- */
.shop {
	width: 100%;
	float: inherit;
	padding: 16px 0 64px 0;
}
.shop .header {
	width: calc(100% - 48px);
	color: #fff;
	text-align: left;
	padding: 16px;
	background: #c22026 !important;
	font-size: 1.6em;
	margin: 0 0 24px 0;
	border-radius: 8px;
}
.shop .search {
	width: calc(100% - 148px);
	margin: 32px 0 0 0;
	position: fixed;
	top: -16px;
	left: 72px;
	z-index: 1000;
}
.shop ul {
	float: left;
	border: 1px solid #eee;
	background: #fff;
	border-radius: 8px;
	list-style: none;
	padding: 0 0 16px 0;
	display: inline-block;
	margin: 16px 8px 16px 0;
	width: calc(33% - 8px);
}
@media screen and (max-width: 860px) {
	.shop ul {
		width: calc(50% - 8px);
		margin: 8px 0 8px 0;
	}
	.shop ul:nth-child(odd) {
		float: right;
	}
}
.shop ul li {
	text-align: left !important;
	position: relative;
}
.shop ul li.image {
	width: calc(100% - 16px);
	height: 104px;
	background: #fff;
	border-radius: 8px 8px 0 0;
	text-align: center !important;
	overflow: hidden;
	position: relative;
	padding: 8px;
	border-bottom: 1px solid #eee;
}
.shop ul li.image .type {
	position: absolute;
	top: 0;
	right: 0;
	background: #c22026;
	color: #fff;
	padding: 8px;
	border-radius: 0 8px 0 16px;
}
.shop ul li.image img {
	height: 96px;
	width: auto;
	margin: 0 auto 0 auto;
}
.shop ul li.name {
	font-size: .95em;
	width: calc(100% - 24px);
	padding: 8px 16px 0 16px;
	min-height: 24px;
}
@media screen and (max-width: 860px) {
	.shop ul li.name {
		min-height: 60px;
	}
}
.shop ul li.desc {
	letter-spacing: -0.5px;
	width: calc(100% - 32px);
	padding: 0 16px 0 16px;
	color: #999;
	font-size: .9em;
}
.shop ul li.price {
	font-size: .9em;
	color: #999;
	width: calc(100% - 32px);
	padding: 0 0 8px 16px;
	margin: 0 0 -8px 0;
}
.shop ul li.quantity {
	display: block;
	position: relative;
}
.shop ul li.quantity input {
	font-size: 1em;
	height: 40px;
	width: calc(100% - 32px);
	margin: 8px 0 8px 16px;
}
.shop ul li.quantity .done {
	background: #f9f9f9;
	position: absolute;
	top: 12px;
	right: 20px;
	height: 32px;
	width: 36px;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
}
.shop ul li.quantity .done span {
	color: #c22026;
	margin: 4px 0 0 0;
}
.shop ul li.quantity .done:hover {
	background: #c22026;
	color: #fff;
}
.shop ul li.quantity .done:hover span {
	color: #fff;
}
.shop ul li.quantity .total {
	border: 0;
	color: #c22026;
	font-size: .9em;
	padding: 0;
	margin: 0 0 8px 16px;
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: 1000;
}
.shop ul li.action {
	color: #c22026;
	width: calc(100% - 32px);
	padding: 16px;
	text-align: center;
}
.shop ul li.action .submit,
.shop ul li.action .disabled {
	margin: 0 auto 0 auto;
	width: calc(100% - 24px);
	text-align: center;
	display: inline-block;
	padding: 8px;
	border: 0;
}
.shop .confirm {
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0;
	width: 100%;
}
.shop .confirm .calculate {
	background: #c22026;
	font-size: 1.1em;
	color: #fff;
	position: absolute;
	bottom: 16px;
	left: 16px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	padding: 8px;
}
.shop .confirm .submit {
	background: #c22026;
	height: 56px;
	width: 56px;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	bottom: 16px;
	right: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	cursor: pointer;
}
.shop .confirm .submit:hover {
	transform: scale(1.2);
}
.shop .confirm .submit span {
	color: #fff;
	margin: 16px 0 0 0;
}
.shop div.submit_order {

}
.shop div.submit_order {
	font-size: 1.2em;
	background: #c22026;
	position: fixed;
	color: #fff;
	bottom: 0;
	left: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	cursor: pointer;
}
.shop div.submit_order input {
	color: #fff;
	background: transparent;
	border: 0;
	width: 100%;
	padding: 16px;
	cursor: pointer;
}

.shop-order {
	width: calc(100% - 32px);
	margin: 0 0 0 16px;
}
.shop-order .order-details {
	width: calc(100% - 32px);
	margin: 0;
	background: #fff;
	border-radius: 16px;
	padding: 16px;
}
.shop-order .order-details li {
	font-size: .9em;
	margin: 0;
	padding: 0;
}
.footer-order {
	width: 100%;
	text-align: center;
	margin: 24px 0 0 0;
}
/* Books */
.books {
	width: calc(100% - 32px);
	padding: 48px 0 0 0;
	margin: 0 0 0 16px;
	float: inherit;
}
.books .header {
	width: calc(100% - 48px);
	color: #fff;
	text-align: center;
	padding: 24px;
	background: #c22026 url("../images/shop_background.jpg?version=8");
	background-size: 50%;
	font-size: 1.6em;
	margin: 0 0 24px 0;
	border-radius: 8px;
}
.books .search {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
	background: #fff;
	padding: 0;
	margin: 0 0 -4px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.books .search input {
	margin: 8px 8px -4px 8px;
	width: calc(100% - 16px);
}
.books .store {
	width: auto;
	background: #fff;
	border: 1px solid #c22026;
	padding: 6px 8px 4px 30px;
	border-radius: 8px;
	color: #c22026;
	position: absolute;
	bottom: 8px;
	right: 8px;
}
.books .store i {
	position: absolute;
	top: 3px;
	left: 3px;
	color: #c22026;
}
.books ul {
	background: #fff;
	float: left;
	border: 1px solid #eee;
	border-radius: 8px;
	list-style: none;
	padding: 0;
	display: inline-block;
	margin: 8px 1.5%;
	width: 30%;
	position: relative;
	cursor: pointer;
	opacity: 1;
}
@media screen and (max-width: 860px) {
	.books ul {
		width: 100%;
		margin: 8px 8px 8px 0;
	}
}
.books ul:hover img {
	transform: scale(1.1);
}
.books ul li.image {
	float: left;
	width: 40%;
	height: 190px;
	background: #eee;
	border-radius: 6px 0 0 6px;
	text-align: center;
	overflow: hidden;
	position: relative;
}
.books ul li.information {
	float: right;
	width: calc(60% - 16px);
	padding: 8px;
}
.books ul li.information p.description {
	font-size: .9em;
	color: #999;
	margin: 4px 0 4px 0;
	padding: 0;
}
.books ul li.image img {
	height: 160px;
	width: auto;
	margin: 16px auto 0 auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.books ul li div.name {
	font-size: 1em;
	margin: 4px 0 8px 0;
}
.books ul li div.borrow {
	position: absolute;
	bottom: 4px;
	right: 4px;
}
.books ul li.desc {
	width: calc(100% - 32px);
	padding: 16px;
}
.books ul li.price {
	font-size: 1.3em;
	color: #c22026;
	width: calc(100% - 32px);
	padding: 0 0 0 16px;
}
.books ul li.quantity input {
	width: calc(100% - 32px);
	margin: 16px 0 16px 16px;
}
.books ul li.action {
	color: #c22026;
	width: calc(100% - 32px);
	padding: 16px;
	text-align: center;
}
.books ul li.action .submit,
.books ul li.action .disabled {
	margin: 0 auto 0 auto;
	width: calc(100% - 24px);
	text-align: center;
	display: inline-block;
	padding: 8px;
	border: 0;
}
.books div.submit_order {
	font-size: 1.2em;
	background: #c22026;
	position: fixed;
	color: #fff;
	bottom: 0;
	left: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	cursor: pointer;
}
.books div.submit_order input {
	color: #fff;
	background: transparent;
	border: 0;
	width: 100%;
	padding: 16px;
	cursor: pointer;
}
.books .buttons {
	width: calc(100% - 24px);
}
.books .buttons .button {
	width: 100%;
	text-align: center;
	display: inline-block;
}
/* Loyalty Shop */
.loyalty_shop {
	width: 100%;
	padding: 0;
	margin: -24px 0 0 0;
	float: inherit;
	z-index: 998;
}
.loyalty_shop .list {
	width: calc(100% - 24px);
	margin: 0 0 0 8px;
	column-count: 2;
	column-gap: 8px;
}
.loyalty_shop .header {
	width: calc(100% - 48px);
	color: #fff;
	text-align: center;
	padding: 24px;
	background: #c22026;
	background-size: 50%;
	font-size: 1.6em;
	margin: 0;
}
.loyalty_shop .search {
	width: 100%;
	padding: 0;
	margin: 0 0 0 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.loyalty_shop .search input {
	margin: 8px 0 8px 8px;
	width: calc(100% - 16px);
}
.loyalty_shop .store {
	width: auto;
	background: #fff;
	border: 1px solid #c22026;
	padding: 6px 8px 4px 30px;
	border-radius: 8px;
	color: #c22026;
	position: absolute;
	bottom: 8px;
	right: 8px;
}
.loyalty_shop .store i {
	position: absolute;
	top: 3px;
	left: 3px;
	color: #c22026;
}
.loyalty_shop ul.item {
	display: inline-block;
	width: 100%;
	background: #fff;
	border-radius: 8px;
	list-style: none;
	padding: 0 0 8px 0;
	position: relative;
	cursor: pointer;
	opacity: 1;
}
@media screen and (max-width: 860px) {
	.loyalty_shop ul.item {
		width: 100%;
		margin: 0 8px 16px 0;
	}
}
.loyalty_shop ul.item div.featured {
	width: 32px;
	height: 32px;
	text-align: center;
	background: #c22026;
	border-radius: 0 10px 0 10px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 991;
}
.loyalty_shop ul.item div.featured span {
	color: #fff;
	margin: 4px 0 0 0;
	transform: scale(.7);
}
.loyalty_shop ul.item div.expired {
	width: 32px;
	height: 32px;
	text-align: center;
	background: #ffecef;
	border-radius: 0 10px 0 10px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 991;
}
.loyalty_shop ul.item div.expired span {
	color: #c22026;
	margin: 4px 0 0 0;
	transform: scale(.7);
}
.loyalty_shop ul.item li.image {
	width: calc(100% - 8px);
	margin: 4px 4px 0 4px;
	height: 160px;
	background: #fff;
	border-radius: 8px;
	text-align: center;
	overflow: hidden;
	position: relative;
	z-index: 990;
}
.loyalty_shop ul.item li.information {
	font-size: .9em;
	width: calc(100% - 32px);
	padding: 16px 16px 0 16px;
}
.loyalty_shop ul.item li.image img {
	height: 160px;
	width: auto;
	border-radius: 8px;
}
.loyalty_shop ul.item li div.name {
	font-size: 1.1em;
	margin: 4px 0 4px 0;
}
.loyalty_shop ul.item li.desc {
	width: calc(100% - 32px);
	padding: 16px;
}
.loyalty_shop ul.item li.price {
	font-size: 1.1em;
	font-weight: bold;
	color: #61a20d;
	width: calc(100% - 32px);
	padding: 0 0 0 16px;
}
.loyalty_shop ul.item li.stock {
	letter-spacing: -1px;
	font-size: .9em;
	color: #999;
	width: calc(100% - 32px);
	margin: 2px 0 2px 16px;
}
.loyalty_shop ul.item li.exchanged {
	letter-spacing: -1px;
	font-size: .9em;
	color: #999;
	width: calc(100% - 32px);
	margin: 2px 0 2px 16px;
}
.loyalty_shop ul.item li.action {
	color: #c22026;
	width: calc(100% - 16px);
	padding: 4px;
	text-align: center;
}
.loyalty_shop ul.item li.action .submit,
.loyalty_shop ul.item li.action .disabled {
	margin: 0 auto 0 auto;
	width: calc(100% - 8px);
	text-align: center;
	display: inline-block;
	padding: 8px;
	border: 0;
}
/* Hiển thị chi tiết sản phẩm */
div.shop_detail {
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 999;
}
div.shop_detail ul {
	width: calc(100% - 32px);
	height: 100%;
	overflow-y: scroll;
	padding: 16px 16px 62px 16px;
	box-sizing: content-box;
	background: #fff;
	list-style: none;
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
div.shop_detail ul li {
	font-size: .9em;
	line-height: 150%;
}
div.shop_detail ul .disabled {
	width: calc(100% - 24px);
	z-index: 1000;
	display: inline-block;
	text-align: center;
	margin: 4px 0 24px 0;
}
div.shop_detail ul .submit {
	width: 100%;
	z-index: 1000;
	display: inline-block;
	text-align: center;
	margin: 4px 0 24px 0;
}
div.shop_detail .close {
	width: 32px;
	height: 32px;
	position: fixed;
	top: 8px;
	right: 16px;
	text-align: center;
	cursor: pointer;
	background: #fff;
	border-radius: 16px;
}
div.shop_detail .close span {
	margin: 4px 0 0 0;
}
div.shop_detail .close:hover {
	background: #000;
}
div.shop_detail .close:hover span {
	color: #fff;
}

.point_icon:before {
	content: 'c';
}
.point_icon {
	font-weight: normal !important;
	text-align: center;
	display: inline-block;
	background: #87c833;
	color: #e7f5d4;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	line-height: 90%;
	margin: 16px 0 0 0;
	overflow: hidden;
}
.points {
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 16px;
	left: 16px;
}
.add {
	border-radius: 0 8px 8px 0;
	background: #c22026;
	color: #fff;
	position: fixed;
	bottom: 16px;
	left: 0;
	padding: 8px 40px 8px 8px;
	cursor: pointer;
	z-index: 1000;
	line-height: 130%;
	font-size: .9em;
}
.add i {
	position: absolute;
	top: 4px;
	right: 8px;
}
/* App Settings */
.loader {
	background: #c22026;
	border-radius: 32px;
	width: 64px;
	height: 64px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
	z-index: 999000;
	position: fixed;
	top: 30%;
	left: calc(50% - 32px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.loader span {
	color: #fff;
	margin: 22px 0 0 0;
	opacity: .8;
	animation: rotation .8s infinite linear;
}

.bar {
	width: 100%;
	height: 64px;
	display: inline-block;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	border: 0;
}
.bar .profile {
	width: 48px;
	height: 48px;
	display: inline-block;
	position: absolute;
	top: -4px;
	right: 0;
	border: 0;
}
.bar .profile .avatar {
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.bar .profile .avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}
.bar .home {
	position: absolute;
	top: 16px;
	left: 16px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.bar .home a {
	padding: 8px 8px 6px 8px;
	display: inline-block;
	border-radius: 4px;
}
.bar .home:hover {
	background: #c22026;
}
.bar .home:hover a {
	color: #fff;
}
.mobile {
	max-width: 640px;
	margin: 0 auto 0 auto;
	position: relative;
	z-index: 1000;
}
.app {
	width: calc(100% - 32px);
	max-width: 640px;
	padding: 40px 0 0 0;
	margin: 0 0 0 16px;
	font-size: 1em;
	border-radius: 16px;
}
.app .person {
	background: #c22026;
	width: 100%;
	min-height: 64px;
	margin: 64px 0 16px 0;
	border-radius: 16px 16px 8px 8px;
	z-index: 10;
	position: relative;
}
.app .person .avatar {
	width: 120px;
	height: 120px;
	margin: 0 auto 16px auto;
	position: absolute;
	top: -48px;
	left: 50%;
	transform: translate(-50%, 0);
	transform-origin: center;
	background: transparent;
	border-radius: 50%;
	text-align: center;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .05);
}
.app .person .avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
	margin: 16px 0 0 0;
}
.app .person .avatar .verify {
	background: #4cd392;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 24px;
	right: 16px;
	border-radius: 50%;
}
.app .person .avatar .verify span {
	color: #fff;
	transform: scale(.8);
}
.app .name {
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}
.app .name p {
	font-size: .8em;
	color: #999;
	margin: 4px 0 0 0;
	padding: 0;
}
.app .information {
	padding: 0;
	min-height: 72px;
	margin: 32px 0 0 0;
	display: block;
}
.app .information div {
	padding: 0;
	margin: 0;
	width: 33%;
	text-align: center;
	float: left;
	color: #999;
}
.app .information div p {
	color: #c22026;
	font-size: 1.3em;
	padding: 0;
	margin: 0 0 4px 0;
}
.app .chart {
	width: 100%;
	margin: 0 0 32px 0;
}
.app .chart .pie {
	margin: 0 auto 0 auto;
	line-height: 100%;
}
.app .chart .pie .count {
	display: block;
	margin: 0 0 0 0;
	line-height: 100%;
}
.app .chart .pie .count:after {
	content: "%";
}
.app .header {
	background: #f9f9f9;
	margin: 48px 0 32px 0;
	color: #fff;
	min-height: 24px;
	width: 100%;
	display: block;
	text-align: center;
}
.app .header .settings {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #fff;
	border-radius: 8px;
	z-index: 1;
}
.app .menu {
	display: block;
	width: 100%;
	margin: 16px 0 0 8px;
	padding: 0;
	position: relative;
}
.app .menu a {
	font-size: .9em;
	width: calc(33% - 32px);
	height: 48px;
	padding: 48px 8px 0 8px;
	background: #fff;
	color: #252525;
	display: inline-block;
	text-align: center;
	border-radius: 16px;
	position: relative;
	margin: 0 4px 8px 4px;
	overflow: hidden;
	white-space: normal;
}
.app .menu a span {
	color: #c22026;
	position: absolute;
	top: 32px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.app .menu a:hover {
	background: #c22026;
	color: #fff;
}
.app .menu a:hover i {
	color: #fff;
}
.app .settings {

}
.app .file_upload {
	width: 100%;
	position: relative;
	z-index: 1;
}
.app .file_upload .file_name	{
	display: inline-block;
	margin: -8px 0 0 8px;
	font-size: 1.3em;
}
.app .file_upload .upload {
	width: calc(100% - 32px);
	border-radius: 8px;
	background: #e8f2dd;
	cursor: pointer;
	text-align: center;
	padding: 16px;
	position: relative;
	color: #669933;
}
.app .file_upload_active .upload {
	width: 100%;
	padding: 0;
	background: #e8f2dd;
	text-align: left;
}
.app .file_upload_active .upload #file_icon {
	display: none;
}
.app .file_upload_active .upload #file_preview img {
	width: 50%;
	position: absolute;
	border-radius: 8px;
	top: 0;
	left: 0;
}
.app .file_remove {
	background: #fff;
	display: inline-block;
	box-sizing: border-box;
	position: absolute;
	top: -8px;
	right: -4px;
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.app .content {
	width: calc(100% - 16px);
	padding: 0;
	margin: 0 0 0 8px;
}
.app .label {
	padding: 0;
	display: inline-block;
	width: calc(60% - 32px);
	margin: 16px 16px 8px 16px;
	color: #000;
	font-size: 1.2em;
}
.app .blocks {
	width: 100%;
	min-height: 72px;
	background: #fff;
	border-radius: 16px;
	margin: 8px 0 8px 0;
	padding: 0 0 8px 0;
	position: relative;
}
.app .blocks .button_corner {
	width: auto;
	position: absolute;
	top: 8px;
	right: 8px;
	text-align: center;
}
.app .blocks .button_corner a {
	width: auto;
	margin: 0 auto 0 auto;
	display: inline-block;
	padding: 8px 16px 8px 16px;
	font-weight: bold;
	background: #f6e9ec;
	border-radius: 16px;
}
.app .blocks .block_kpi {
	display: block;
	width: calc(100% - 32px);
	margin: 4px 16px 16px 16px;
}
.app .blocks .block_kpi .progress {
	width: 100%;
	background: #eee;
	height: 8px;
	border-radius: 4px;
}
.app .blocks .block_kpi .progress .current {
	background: #c22026;
	height: 8px;
	border-radius: 4px;
}
.app .profile_settings {
	width: calc(100% + 16px);
	margin: 16px 0 0 -16px;
	padding: 0;
}
.app .profile_settings ul {
	width: calc(100% - 16px);
	background: #fff;
	border-radius: 8px;
	border: 0;
	list-style: none;
	margin: 0;
	padding: 0 16px 0 16px;
}
.app .profile_settings ul li {
	width: calc(100% + 16px);
	border-bottom: 1px solid #f9f9f9;
}
.app .profile_settings ul li:last-child {
	border: 0;
}
.app .profile_settings ul li a {
	border: 0;
	background: transparent;
	display: block;
	position: relative;
	margin: 0;
	padding: 8px 0 8px 0;
	color: #000;
}
.app .profile_settings ul li a:hover,
.app .profile_settings ul li a:hover i {
	color: #c22026;
}
.app .profile_settings ul li a i {
	position: absolute;
	top: 8px;
	right: 8px;
}
.profile_corner {
	display: inline-block;
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1000000;
}
.gift_progress {
	width: 480px;
	clear: both;
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0;
	cursor: pointer;
}
.gift_progress li {
	float: unset !important;
	width: unset !important;
	display: inline-block;
	background: #f5f5f5;
	padding: 8px 16px 8px 32px !important;
	margin: 0;
	position: relative;
	color: #999 !important;
	transition: none;
}
.gift_progress li i {
	position: absolute;
	top: 8px;
	left: 16px;
	color: #999;
}
.gift_progress li.active,
.gift_progress li.active i {
	color: #c22026 !important;
}
.gift_progress li:first-child {
	border-radius: 8px 0 0 8px;
}
.gift_progress li:last-child {
	border-radius: 0 8px 8px 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.request {	width: 250px; font-size: 11px; overflow: hidden }

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

div.notice {
	width: auto;
	background: #c22026;
	color: #fff;
	min-height: 25px;
	padding: 10px 25px 10px 25px;
	line-height: 25px;
	margin-bottom: 5px;
	position: fixed;
	top: 24px;
	right: 24px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
	z-index: 1000000;
	box-sizing: border-box;
	border-radius: 8px;
}
/* Pages */
div.result {
	width: 100%;
	margin: 16px 0 16px 0;
	display: block;
	clear: both;
}
div.page {
	width: 100%;
	margin: 16px 0 16px 0;
	display: block;
	clear: both;
}
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: #c22026;
	color: #fff;
	opacity: 1;
	font-weight: bold;
}
div.page a span {
	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 #f0f0f0;
	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;
}
/* ------------------------------------------------ */
/* APP */
/* ------------------------------------------------ */
.check-in {
	width: 100%;
	margin: -16px auto 0 auto;
	padding: 0;
	font-size: 1.3em;
	text-align: center;
	overflow: hidden;
}
.check-in .logo {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}
.check-in .logo img {
	width: 128px;
	margin: 24px auto 24px auto;
}
.check-in h1 {
	width: calc(100% - 48px);
	font-size: 1.4em;
	background: #c22026;
	color: #fff;
	letter-spacing: -1px;
	padding: 24px;
	margin: -1px 0 0 0;
}
.check-in form {
	width: calc(100% - 48px);
	margin: 24px auto 0 auto;
}
.check-in input {
	width: 100%;
	padding: 16px;
	font-size: 1em;
	text-align: center;
}
.check-in .submit {
	width: 100%;
	text-align: center;
	padding: 16px 16px 16px 16px;
	margin: 16px 0 0 0;
	display: inline-block;
}
@media screen and (max-width: 375px) {
	.check-in input {
		font-size: 1em;
	}
}
.check-in .result {
	width: 100%;
	margin: 0 auto 0 auto;
	font-size: 1.3em;
	text-align: center;
	padding: 32px 0 0 0;
}
.check-in .result .icon {
	width: 64px;
	height: 64px;
	border-radius: 32px;
	margin: 24px auto 32px auto;
	background: #eee;
	color: #c22026;
	text-align: center;
	transform: scale(1.5);
}
.check-in .result .icon span {
	margin: 18px 0 0 0;
}
.check-in .result p {
	margin: 0;
	font-size: 1.2em;
}
.check-in .result p.description {
	font-size: 1em;
}
.check-in .result .submit {
	width: calc(100% - 32px);
}
.check-in .result .cancel {
	width: calc(100% - 32px);
	text-align: center;
	padding: 16px 16px 16px 16px;
	margin: 16px 0 0 0;
	display: inline-block;
}
.check-in .result .name {
	font-weight: bold;
	color: #c22026;
	font-size: 1.2em;
	letter-spacing: -1px;
	margin: 4px 0 4px 0;
}
.check-in .result .company {
	font-size: .9em;
}
.check-in .result .survey {
	width: calc(100% - 64px);
	margin: 32px auto 0 auto;
}
.check-in .result .group {
	display: inline-block;
	width: auto;
	background: #eee;
	font-size: .7em;
	margin: 16px auto 0 auto;
	padding: 16px;
	border-radius: 16px;
}
.check-in .result .group p {
	font-size: 1.3em;
	display: block;
}
.check-in .result .wifi {
	margin: 16px auto 0 auto;
	padding: 16px;
}
.check-in .result .time {
	color: #666;
	margin: 24px 0 0 0;
	padding: 16px;
	line-height: 120%;
}
.check-in .success {
	width: auto;
	display: inline-block;
	padding: 32px 24px 32px 24px;
	font-size: 1em;
	background: #e8f2dd;
	color: #669933;
	border-radius: 16px;
}
.check-in .success .icon {
	background: #669933;
	color: #fff;
}
.check-in .success .description {
	display: block;
	font-size: .6em;
	padding: 0;
	margin: 8px 0 0 0;
}
.log {
	width: 60%;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 640px) {
	.log {
		width: 100%;
	}
}
.log .name {
	margin: 16px 0 16px 0;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.8em;
	padding: 0 0 0 48px;
	position: relative;
	color: #999;
}
.log .name i {
	background: #f0f0f0;
	border: 6px solid #f0f0f0;
	border-radius: 50%;
	color: #999;
	position: absolute;
	top: 0;
	left: 0;
}
.log .tab {
	width: 100%;
	display: inline-block;
	clear: both;
	margin: 0 0 24px 0;
}
.log .tab div {
	width: calc(50% - 32px);
	text-align: center;
	font-size: 1.2em;
	float: left;
	background: #f0f0f0;
	color: #c22026;
	border-radius: 16px;
	padding: 16px;
	cursor: pointer;
}
.log .tab div:first-child {
	border-radius: 16px 0 0 16px;
}
.log .tab div:last-child {
	border-radius: 0 16px 16px 0;
}
.log .tab div.active,
.log .tab div:hover {
	background: #c22026;
	color: #fff;
}
.log .form #classes_results {
	cursor: pointer;
	padding: 0;
	margin: 0;
}
.log .form #classes_results div {
	padding: 4px 0 8px 0;
}
.log .form #classes_results div:hover {
	color: #c22026;
}
.log .form .hour_recommend {
	min-height: 48px;
	width: 100%;
	clear: both;
	display: block;
}
.log .form .hour_recommend div {
	display: inline-block;
	padding: 8px 16px 8px 16px;
	cursor: pointer;
	border-radius: 16px;
	background: #f0f0f0;
	margin: 0 8px 8px 0;
}
.log .form .hour_recommend div:hover {
	background: #c22026;
	color: #fff;
}
.intro {
	width: calc(100% - 32px);
	padding: 16px;
	margin: 64px 0 32px 0;
	background: #fff;
	border-radius: 16px;
}
.intro .head {
	width: 80%;
	margin: 32px auto 32px auto;
}
.intro .section {
	margin: 64px 0 64px 0;
}
.intro .icon {
	background: #f8dfe3;
	color: #c22026;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	text-align: center;
	margin: 0 auto 0 auto;
	display: inline-block;
	position: relative;
}
.intro .icon-block {
	transform: scale(1.5);
	margin: 16px auto 16px auto;
}
.intro .icon i {
	margin: 12px 0 0 0;
}
.intro .command {
	background: #f9f9f9;
	padding: 16px;
}
.intro .chart {
	width: 160px;
	display: block;
	margin: 0 auto 0 auto;
}
.intro ol li {
	text-align: left;
}

.error-log {
	background: #232323;
	color: #3fd6df;
	width: calc(100% - 32px);
	line-height: 1.5em;
	padding: 4px 16px 4px 16px;
	border-radius: 8px;
}
.error-log pre {
	font-family: 'Courier New', arial, sans-serif;
	font-size: .8em;
	width: 100%;
	color: #3fd6df;
}
/* ------------------------------------------------ */
/* COPYRIGHT */
/* ------------------------------------------------ */
.copyright {
	width: calc(100% - 48px);
	line-height: 120%;
	margin: 50px auto 0 auto;
	padding: 24px;
	overflow: hidden;
	font-size: 1em;
	color: #ccc;
	text-align: center;
	clear: both;
}