html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Roboto'; box-sizing: border-box; color: #333; }
h1, h2, h3, h4, h5, h6, p, a { font-family: 'Roboto'; text-decoration: none; color: #333; }
hr { border: none; border-bottom: 1px solid #ccc; }
img { max-width: 100%; max-height: 100%; }
textarea { resize: none; }
ul, ul li, ol, ol li { margin: 0; padding: 0; }
ul li, ol li { padding: 1px 0; }
* { box-sizing: border-box; }
hr.border-dashed { border-bottom-style: dashed !important; }

/* grid */
.s-1,.m-1,.l-1 { display: block; float: left; margin: 0 5px 5px; }
.s-2,.m-2,.l-2 { display: block; float: left; margin: 0 5px 5px; }
.s-3,.m-3,.l-3 { display: block; float: left; margin: 0 5px 5px; }
.s-4,.m-4,.l-4 { display: block; float: left; margin: 0 5px 5px; }
.s-5,.m-5,.l-5 { display: block; float: left; margin: 0 5px 5px; }
.s-6,.m-6,.l-6 { display: block; float: left; margin: 0 5px 5px; }
.s-7,.m-7,.l-7 { display: block; float: left; margin: 0 5px 5px; }
.s-8,.m-8,.l-8 { display: block; float: left; margin: 0 5px 5px; }
.s-9,.m-9,.l-9 { display: block; float: left; margin: 0 5px 5px; }
.s-10,.m-10,.l-10 { display: block; float: left; margin: 0 5px 5px; }
.s-11,.m-11,.l-11 { display: block; float: left; margin: 0 5px 5px; }
.s-12,.m-12,.l-12 { display: block; float: left; margin: 0 5px 5px; }

.of-1 { margin-left: calc(100% / 12 - 10px); }
.of-2 { margin-left: calc(100% / 12 * 2 - 10px); }
.of-3 { margin-left: calc(100% / 12 * 3 - 10px); }
.of-4 { margin-left: calc(100% / 12 * 4 - 10px); }
.of-5 { margin-left: calc(100% / 12 * 5 - 10px); }
.of-6 { margin-left: calc(100% / 12 * 6 - 10px); }
.of-7 { margin-left: calc(100% / 12 * 7 - 10px); }
.of-8 { margin-left: calc(100% / 12 * 8 - 10px); }
.of-9 { margin-left: calc(100% / 12 * 9 - 10px); }
.of-10 { margin-left: calc(100% / 12 * 10 - 10px); }
.of-11 { margin-left: calc(100% / 13 * 11 - 10px); }
.of-12 { margin-left: calc(100% - 10px); }

@media (min-width: 769px) {
	.m-0,.m-1,.m-2,.m-3,.m-4,.m-5,.m-6,.m-7,.m-8,.m-9,.m-10,.m-11,.m-12,.s-0,.s-1,.s-2,.s-3,.s-4,.s-5,.s-6,.s-7,.s-8,.s-9,.s-10,.s-11,.s-12 {
		width: calc(100% - 10px);
	}
	.l-1 { width: calc(100% / 12 - 10px); }
	.l-2 { width: calc(100% / 12 * 2 - 10px); }
	.l-3 { width: calc(100% / 12 * 3 - 10px); }
	.l-4 { width: calc(100% / 12 * 4 - 10px); }
	.l-5 { width: calc(100% / 12 * 5 - 10px); }
	.l-6 { width: calc(100% / 12 * 6 - 10px); }
	.l-7 { width: calc(100% / 12 * 7 - 10px); }
	.l-8 { width: calc(100% / 12 * 8 - 10px); }
	.l-9 { width: calc(100% / 12 * 9 - 10px); }
	.l-10 { width: calc(100% / 12 * 10 - 10px); }
	.l-11 { width: calc(100% / 13 * 11 - 10px); }
	.l-12 { width: calc(100% - 10px); }
}

@media (max-width: 768px) and (min-width: 481px) {
	.l-0,.l-1,.l-2,.l-3,.l-4,.l-5,.l-6,.l-7,.l-8,.l-9,.l-10,.l-11,.l-12,.s-0,.s-1,.s-2,.s-3,.s-4,.s-5,.s-6,.s-7,.s-8,.s-9,.s-10,.s-11,.s-12 {
		width: calc(100% - 10px);
	}
	.m-1 { width: calc(100% / 12 - 10px); }
	.m-2 { width: calc(100% / 12 * 2 - 10px); }
	.m-3 { width: calc(100% / 12 * 3 - 10px); }
	.m-4 { width: calc(100% / 12 * 4 - 10px); }
	.m-5 { width: calc(100% / 12 * 5 - 10px); }
	.m-6 { width: calc(100% / 12 * 6 - 10px); }
	.m-7 { width: calc(100% / 12 * 7 - 10px); }
	.m-8 { width: calc(100% / 12 * 8 - 10px); }
	.m-9 { width: calc(100% / 12 * 9 - 10px); }
	.m-10 { width: calc(100% / 12 * 10 - 10px); }
	.m-11 { width: calc(100% / 13 * 11 - 10px); }
	.m-12 { width: calc(100% - 10px); }
}

@media (max-width: 480px) {
	.l-0,.l-1,.l-2,.l-3,.l-4,.l-5,.l-6,.l-7,.l-8,.l-9,.l-10,.l-11,.l-12,.m-0,.m-1,.m-2,.m-3,.m-4,.m-5,.m-6,.m-7,.m-8,.m-9,.m-10,.m-11,.m-12 {
		width: calc(100% - 10px);
	}
	.s-1 { width: calc(100% / 12 - 10px); }
	.s-2 { width: calc(100% / 12 * 2 - 10px); }
	.s-3 { width: calc(100% / 12 * 3 - 10px); }
	.s-4 { width: calc(100% / 12 * 4 - 10px); }
	.s-5 { width: calc(100% / 12 * 5 - 10px); }
	.s-6 { width: calc(100% / 12 * 6 - 10px); }
	.s-7 { width: calc(100% / 12 * 7 - 10px); }
	.s-8 { width: calc(100% / 12 * 8 - 10px); }
	.s-9 { width: calc(100% / 12 * 9 - 10px); }
	.s-10 { width: calc(100% / 12 * 10 - 10px); }
	.s-11 { width: calc(100% / 13 * 11 - 10px); }
	.s-12 { width: calc(100% - 10px); }
}

/* login */
#login { width: 25%; margin: 0 auto; font-family: 'Lato'; border-radius: 10px; }
#login .login-head { padding: 20px; text-align: left; font-size: 12px; clear: both; float: none; position: relative; border-bottom: 1px dashed #ccc; }
#login .login-head i { font-size: 50px; float: left; max-width: 20%; margin-right: 5%; }
#login .login-head img { float: left; margin-right: 5%; }
#login .login-head div { float: left; max-width: 75%; }
#login .login-head div big { display: block; margin-bottom: 5px; font-size: 20px; }
#login .login-head div small { font-size: 12px; }
/*#login .login-head::before {
	content: '';
	width: 0;
	height: 0;
	border-top: 12px solid #ff0000;
	border-right: 12px solid transparent;
	position: absolute;
	left: 0px;
	top: 0px;
}*/
#login .login-body { padding: 20px 20px 0; font-size: 12px; border-bottom: 1px dashed #ccc; }
#login .login-body a.forget { color: rgb(230, 160, 0); display: inline-block; }
#login .login-footer { padding: 20px; text-align: left; font-size: 12px; }
#login .login-footer .btn { font-size: 13px; }
#login .login-footer span { display: inline-block; margin-left: 10px; }
#login .login-footer span a { color: #ff0000; font-weight: bold; }
@media (max-width: 1220px) { #login { width: 40%; } }
@media (max-width: 784px) { #login { width: 75%; } }
@media (max-width: 541px) { #login { width: 90%; } }
@media (max-width: 380px) { #login .login-head, #login .login-body { padding-left: 0; padding-right: 0; } }

/* header */
#topheader {
	display: block;
	width: 100%;
	height: 20px;
	padding: 3px 0 0;
	text-align: center;
	font-size: 12px;
	background-color: rgb(255, 10, 10);
	color: #fff;
	position: fixed;
	top: 0;
	z-index: 5;
}
#topheader .user-info-text { position: absolute; top: 3px; right: 20px; }

/* menu */
#topmenu { background-color: #fcfcfc; width: 100%; position: fixed; top: 20px; z-index: 5; }
#topmenu .menu { position: relative; border-bottom: 3px solid #f4f4f4; }
#topmenu .menu .menu-logo {
	display: flex;
	float: left;
	width: 140px;
	height: 77px;
	align-items: center;
	position: relative;
	border-right: 1px solid #eaeaea;
	padding: 0 20px 0 10px;
}
#topmenu .menu .menu-logo:before {
	display: block;
	content: "";
	position: absolute;
	width: 100%;
	height: 102%;
	top: 0;
	left: 0;
	opacity: 0.5;
	/*background: url('res/img/wood-background.jpg') center center no-repeat;*/
	background-size: 100%;
}
#topmenu .menu .menu-logo img { position: absolute; width: calc(100% - 30px); }
#topmenu .menu .menu-group { display: block; font-size: 0; float: left; }
#topmenu .menu .menu-group .menu-item { display: block; min-width: 30px; position: relative; float: left; }
#topmenu .menu .menu-logout a,
#topmenu .menu .menu-group .menu-item a { display: block; padding: 15px; text-align: center; color: #333; text-decoration: none; }
#topmenu .menu .menu-logout a i,
#topmenu .menu .menu-group .menu-item a i { font-size: 30px; margin-bottom: 3px; }
#topmenu .menu .menu-logout a img,
#topmenu .menu .menu-group .menu-item a img { width: 30px; margin-bottom: 3px; }
#topmenu .menu .menu-logout a span,
#topmenu .menu .menu-group .menu-item a span { font-size: 12px; }
#topmenu .menu .menu-logout a:hover,
#topmenu .menu .menu-group .menu-item a:hover { background-color: #f4f4f4; color: #000; }
#topmenu .menu .menu-group .menu-item a.active { background-color: #f4f4f4; color: rgba(150, 35, 0, .8); }
#topmenu .menu .menu-group .menu-item .sub-menu-item {
	position: absolute;
	font-size: 12px;
	white-space: nowrap;
	text-align: left;
	min-width: 150px;
	top: 100%;
	display: none;
	padding-top: 3px;
	border:  1px solid #f4f4f4;
	border-top: none;
}
#topmenu .menu .menu-group .menu-item .sub-menu-item a { padding: 10px; background: #fcfcfc; text-align: left; border-bottom: 1px solid #ddd; }
#topmenu .menu .menu-group .menu-item .sub-menu-item a img { display: inline-block; width: 15px; position: relative; top: 3px; margin-right: 5px; }
#topmenu .menu .menu-group .menu-item .sub-menu-item a span { position: relative; top: -3px; }
#topmenu .menu .menu-group .menu-item .sub-menu-item a:last-child { border-bottom: none; }
#topmenu .menu .menu-group .menu-item .sub-menu-item a.active,
#topmenu .menu .menu-group .menu-item .sub-menu-item a:hover { background: #f4f4f4; }
#topmenu .menu .menu-group .menu-item:hover .sub-menu-item { display: block; }
#topmenu .menu .menu-separator {
	display: block;
	height: 100%;
	width: 1px;
	padding: 30px 10px;
	margin: 10px 20px 0 0;
	border-right: 1px dotted #ccc;
	float: left;
}
#topmenu .menu .menu-logout { position: absolute; top: 0; right: 0; font-size: 0; }
#topmenu .menu .menu-logout a { background-color: #f4f4f4; color: rgba(150, 35, 0, .8); }

/* content */
#content { padding: 35px 20px 70px; position: relative; top: 100px; z-index: 1; min-height: calc(100% - 100px); box-sizing: border-box; font-size: 0; }
#content h1 { font-family: 'Lato'; margin: 0; font-size: 25px; }
#content #page-header { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed #ccc; position: relative; }
#content .content-wrapper { font-size: 12px; }
#content .content-wrapper.category-form { display: none; }
#content .widget {
	display: inline-block;
    margin: 10px;
    padding: 20px;
    font-size: 15px;
    border: 1px solid #e1e6ef;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
#content .widget .widget-title { margin-bottom: 10px; border-bottom: 1px dashed #ccc; padding-bottom: 15px; }
#content .widget .widget-content .bignumber { font-size: 50px; font-family: 'Lato'; }
#content .widget .widget-content .widget-separator {
	width: 100%;
	height: 1px;
	display: block;
	border-bottom: 1px dashed #ccc;
	margin-top: 10px;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
#content .widget .widget-addon { display: inline-block; position: relative; }
#content table.table { font-size: 15px; width: 100%; border: 1px solid #ddd; border-spacing: 0px; border-collapse: separate; }
#content table.table tr th { padding: 10px; border-right: 1px solid #ddd; border-bottom: 3px solid #ccc; font-family: 'Lato'; }
#content table.table tr th:last-child { border-right: none; }
#content table.table tr td { padding: 10px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 13px; }
#content table.table tr td:last-child { border-right: none; }
#content table.table tr:last-child td { border-bottom: none; }
#content table.table tr td .btn {
	text-decoration: none;
	color: #555;
	border: 1px dashed #ccc;
	padding: 5px;
	margin: 0 2px;
	font-size: 13px;
	background: none;
}
#content .table-support { font-size: 13px; margin-top: 20px; clear: both; font-family: 'Lato'; }
#content .table-support span { padding: 2px 5px; border: 1px solid rgba(220, 220, 220, .9); background-color: rgba(230, 230, 230, .5); font-weight: bold; }
#content .table-support .left-pos { float: left; text-align: left; }
#content .table-support .right-pos { float: right; text-align: right; }
#content .table-support .table-info { display: inline-block; width: 50%; font-size: 13px; }
#content .table-support .table-info span { display: inline-block; margin: 0 3px; font-size: 12px; }
#content .table-support .table-paging { display: inline-block; width: 50%; font-size: 0; }
#content .table-support .table-paging .page-item { display: inline-block; font-size: 12px; }
#content .table-support .table-paging .page-item span { padding: 5px 10px; cursor: pointer; margin: 0 2px; font-weight: normal; }
#content .table-support .table-paging .page-item span.current { font-weight: bold; background-color: rgba(210, 210, 210, .9); cursor: default; }
#content #footer {
	width: 100%;
	font-size: 12px;
	padding: 10px 0;
	background: #eee;
	border-top: 2px solid #ccc;
	position: absolute;
	bottom: 0;
	left: 0;
}
#footer a{
	color: #333;
	text-decoration: none;
}
#content .table-support:first-child { margin-top: 0; margin-bottom: 20px; }

/* panel */
.panel { display: block; float: left; width: calc(50% - 20px); margin: 10px; border: 1px solid #eee; box-sizing: border-box; font-size: 12px; }
.panel .panel-heading {
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	font-family: 'Lato';
	border-bottom: 2px solid #eee;
	background-color: #f7f7f7;
	position: relative;
}
.panel .panel-heading .panel-heading-info { font-size: 11px; font-weight: normal; margin-top: 2px; }
/*.panel .panel-heading::before {
	content: '';
	width: 0;
	height: 0;
	border-top: 12px solid #ff0000;
	border-right: 12px solid transparent;
	position: absolute;
	left: 0px;
	top: 0px;
}*/
.panel .panel-heading .panel-heading-button { position: absolute; right: 10px; top: 8px; color: #aaa; cursor: pointer; }
.panel .panel-heading .panel-heading-button .button-item { cursor: pointer; display: inline-block; margin-left: 10px; }
.panel .panel-heading .panel-heading-button .button-item:hover { color: #333; }
.panel .panel-body { padding: 20px; position: relative; }
.panel .panel-body hr { border-bottom-style: dashed; }
.panel .panel-body .btn { margin: 10px 10px 10px 0; }
.panel .panel-body .text-left .btn { margin: 10px 10px 10px 0; }
.panel .panel-body .text-right .btn { margin: 10px 0 10px 10px; }

.panel .panel-body.scroll { max-height: 240px; overflow-y: scroll; }
.panel .panel-footer { padding: 20px; position: relative; }
.panel .panel-footer.bordered { border-top: 1px solid #eee; }
.panel.panel-full-width { width: calc(100% - 20px); float: none; }
.panel.panel-xl { width: calc(80% - 20px); }
.panel.panel-lg { width: calc(67.7% - 20px); }
.panel.panel-md { width: calc(33.3% - 20px); }
.panel.panel-sm { width: calc(20% - 20px); }
.panel.panel-sm .panel-body { padding: 10px; }
.panel.panel-sm .panel-footer { padding: 10px; }
.panel.panel-xs { width: calc(10% - 20px); }
.panel.panel-xs .panel-body { padding: 5px; }
.panel.panel-xs .panel-footer { padding: 5px; }
.panel.panel-image { border: none; }
.panel.panel-image .panel-body { padding: 5px 5px 0; position: relative; box-sizing: border-box; height: 200px; text-align: center; }
.panel.panel-image .panel-body img {
	max-height: calc(100% - 10px);
	max-width: calc(100% - 10px);
	width: auto;
	height: auto;
	position: absolute;
	bottom: 5px;
	left: 5px;
	right: 5px;
	margin: auto;
	z-index: 1;
}
.panel.panel-image .panel-body .image-title {
	position: absolute;
	bottom: 5px;
	left: 5px;
	right: 5px;
	padding: 5px;
	background-color: rgba(100, 100, 100, .7);
	color: #fff;
	text-align: left;
	text-shadow: 0 0 5px #000;
	z-index: 2;
}
.panel.panel-image .panel-body .hidden-cover { opacity: 0; position: absolute; top: 30%; left: 0; right: 0; font-size: 50px; color: #ff0000; }
.panel.panel-image .panel-body.hidden img { opacity: .3; }
.panel.panel-image .panel-body.hidden .hidden-cover { opacity: 1; }
.panel.panel-image .panel-footer {
	margin: 0 5px 5px;
	padding: 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 0;
	border: 1px solid #eee;
	border-top: none;
	position: relative;
	top: -5px;
	border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
.panel.panel-image .panel-footer a {
	padding: 5px;
	border: 1px solid #eee;
	border-left: none;
	display: inline-block;
	border-radius: 0;
	-webkit-border-radius: 0;
	font-size: 12px;
}
.panel.panel-image .panel-footer a:first-child { border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-left: 1px solid #eee; }
.panel.panel-image .panel-footer a:last-child { border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; }
.panel.plain { border: none; margin: 0; }

/* form */
.form-field {
	box-sizing: border-box;
	padding: 7px;
	font-size: 12px;
	border-radius: 0;
	-webkit-border-radius: 0;
	border: 1px solid rgba(210, 210, 210, .5);
	margin: 0 5px;
}
input.form-field,
select.form-field { height: 40px !important; }
select.form-field { position: relative; top: 1px !important; }
.form-field.form-lg { padding: 9px !important; }
input.form-field.form-lg,
select.form-field.form-lg { height: 34px !important; }
input.form-field:focus,
textarea.form-field:focus,
select.form-field:focus {
	border-color: rgb(43, 133, 255) !important;
	-webkit-border-radius: 0 !important;
	border-radius: 0 !important;
	outline: none !important;
}
form { display: block; width: 100%; }
form .form-row { margin-bottom: 20px; font-size: 12px; }
form .form-row .form-label { font-size: 15px; font-weight: bold; font-family: 'Lato'; }
form .form-row .form-label.empty-label { margin-top: 13px; }
form .form-row .form-field { margin: 0; margin-top: 5px; width: 100%; padding: 10px; font-size: 13px; font-family: 'Roboto'; height: auto; }
form .form-row .form-field-help { font-size: 11px; margin-top: 5px; }
form .form-row .error-message { font-size: 11px; margin-top: 5px; color: #ff0000; }
form .form-row .featured-image { margin-top: 5px; }
form .form-row .featured-image .image-upload { display: inline-block; font-size: 0; }
form .form-row .featured-image .image-upload img { max-height: 200px; min-height: 75px; border: 1px dashed #eee; display: block; }
form .form-row .featured-image .image-upload .act-button {
	text-align: center;
	padding: 10px;
	border: 1px solid #eee;
	border-top: none;
	font-size: 14px;
	display: block;
	float: left;
	width: 50%;
}
form .form-row .featured-image .image-upload .act-button:nth-child(3) { border-left: none; }
form .form-row .featured-image .image-upload .act-button.fullwidth { width: 100%; }
form .form-row.form-separator { position: relative; text-align: center; height: 41px; }
form .form-row.form-separator hr {
	margin: 20px 0;
	border: none;
	border-bottom: 1px dashed #ccc;
	position: absolute;
	display: block;
	width: 100%;
	z-index: 1;
}
form .form-row.form-separator div {
	display: inline-block;
	font-size: 17px;
	background-color: #fff;
	text-align: center;
	margin-top: 10px;
	z-index: 2;
	position: relative;
	padding: 0 20px;
	font-family: 'Lato';
}
form .form-row.form-separator div small { margin-top: 1px; display: block; }

/* button */
.btn {
	font-family: 'Lato';
	font-size: 13px;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #fff;
	border: 1px solid rgba(255, 0, 0, .9);
	background-color: rgba(245, 0, 0, .8);
	cursor: pointer;
	margin: 0 5px;
}
.btn.btn-sm { padding: 6px; }
.btn.btn-block { width: 100%; }
.btn.btn-icon { padding: 0; padding-right: 10px; }
.btn.btn-icon .fa { background-color: rgba(225, 0, 0, .9); border-right: 1px solid rgba(245, 0, 0, .8); padding: 10px; margin-right: 10px; }
.btn.btn-default { background-color: rgba(200, 200, 200, .8); border: 1px solid rgba(180, 180, 180, .9); color: #333; }
.btn.btn-icon.btn-default .fa { background-color: rgba(190, 190, 190, .8); border-right: 1px solid rgba(180, 180, 180, .9); color: #333; }
.btn.btn-info { background-color: rgba(0, 150, 255, .8); border: 1px solid rgba(0, 120, 255, .9); color: #fff; }
.btn.btn-icon.btn-info .fa { background-color: rgba(0, 120, 255, .8); border-right: 1px solid rgba(0, 120, 255, .9); color: #fff; }
.btn.btn-primary { background-color: rgba(0, 100, 255, .8); border: 1px solid rgba(0, 70, 255, .9); color: #fff; }
.btn.btn-icon.btn-primary .fa { background-color: rgba(0, 70, 255, .8); border-right: 1px solid rgba(0, 70, 255, .9); color: #fff; }
.btn.btn-warning { background-color: rgba(194, 110, 36, .8); border: 1px solid rgba(137, 78, 25, .9); color: #fff; }
.btn.btn-icon.btn-warning .fa { background-color: rgba(154, 88, 28, .8); border-right: 1px solid rgba(137, 78, 25, .9); color: #fff; }
.text-left .btn { margin-left: 0; }
.text-right .btn { margin-right: 0; }
.btn[disabled] { opacity: .6; cursor: no-drop; }
.header-button { position: absolute; right: 0; top: -4px; margin: 0; }

/* alert */
#alert { padding: 15px 10px; font-size: 14px; margin-bottom: 20px; }
#alert .fa { font-size: 20px; margin-right: 5px; }
#alert span { display: inline-block; position: relative; top: -2px; }
#alert.alert-error { background-color: rgba(200, 10, 10, .8); border: 1px solid rgb(200, 10, 10); color: #fff; }
#alert.alert-success { background-color: rgba(10, 180, 10, .8); border: 1px solid rgb(10, 180, 10); color: #fff; }

/* dialog */
.dialog { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(100, 100, 100, .6); z-index: 3; }
.dialog .dialog-wrapper { width: 100%; height: 100%; position: relative; }
.dialog .dialog-wrapper .dialog-content { width: 450px; margin: 0 auto; margin-top: 120px; border: 1px solid #999; font-size: 12px; position: relative; }
.dialog .dialog-wrapper .dialog-content .dialog-header {
	padding: 10px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	font-size: 18px;
	text-transform: uppercase;
	position: relative;
	min-height: 50px;
}
.dialog .dialog-wrapper .dialog-content .dialog-body { padding: 15px; background-color: #fff; }
.dialog .dialog-wrapper .dialog-content .dialog-footer { padding: 10px 15px; background: #fff; border-top: 1px solid #ccc }
.dialog .dialog-wrapper .dialog-content .loading { font-size: 100px; }
.dialog.dialog-lg .dialog-wrapper .dialog-content { width: 1000px; }
.dialog.dialog-md .dialog-wrapper .dialog-content { width: 680px; }
.dialog.dialog-sm .dialog-wrapper .dialog-content { width: 380px; }
.dialog.dialog-xs .dialog-wrapper .dialog-content { width: 200px; }
.dialog.upload .dialog-wrapper .dialog-content .dialog-body { padding: 0; }
body.dialog-open { overflow: hidden; }
body.dialog-open .dialog { overflow: auto; }
body.dialog-open .dialog .dialog-wrapper { padding-top: 20px; }
body.dialog-open .dialog .dialog-wrapper .dialog-content { margin-top: 100px; margin-bottom: 20px; }

/* badge */
.badge {
	padding: 5px;
	font-size: 11px;
	border: 1px solid rgba(180, 180, 180, .9);
	background-color: rgba(200, 200, 200, .8);
	display: inline-block;
	border-radius: 3px;
	-webkit-border-radius: 3px;
}

/* checkbox */
.checkbox-style { width: 20px; margin-right: 5px; position: relative; display: inline-block; }
.checkbox-style input[type=checkbox] { visibility: hidden; margin-top: 0px; height: auto !important; margin-top: 0; }
.checkbox-style label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	top: -1px;
  	left: 0;
	background: #eee;
	border:1px solid #ddd;
}
.checkbox-style label:after {
	opacity: 0.1;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 3px;
	left: 3px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
}
.checkbox-style label:hover::after { opacity: 0.3; }
.checkbox-style input[type=checkbox]:checked + label:after { opacity: 1; }

/* radio */
.radio-style { width: 20px; margin-right: 5px; position: relative; display: inline-block; }
.radio-style input[type=radio] { visibility: hidden; }
.radio-style label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0px;
  	left: 0;
	background: #eee;
	border:1px solid #ddd;
	border-radius: 15px;
}
.radio-style label:after {
	opacity: 0.1;
	content: '';
	position: absolute;
	width: 40%;
	height: 40%;
	background: #333;
	top: 25%;
	left: 25%;
	border: 1px solid #333;
	border-radius: 7px;
}
.radio-style label:hover::after { opacity: 0.3; }
.radio-style input[type=radio]:checked + label:after { opacity: .8; }

/* image library */
.image-library .image-item { display: inline-block; width: 147px; height: 147px; margin: 5.9px; position: relative; cursor: pointer; }
.image-library .image-item .image-caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 10px;
	background: rgba(100, 100, 100, .7);
	color: #fff;
	text-shadow: 0px 0px 5px #000;
}

/* social */
.social-logo { display: inline-block; padding: 5px; border: 1px solid #eee; margin: 5px; width: 60px; height: 60px; cursor: pointer; }
.social-logo img { width: 100%; height: 100%; }

/* flag */
.flag-logo { display: inline-block; padding: 5px 5px 2px; border: 1px solid #eee; margin: 5px; width: 65px; cursor: pointer; }
.flag-logo img { width: 100%; }

/* helper */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary-light { color: rgb(0, 100, 255); }
.text-primary { color: rgb(0, 70, 255); }
.text-info-light { color: rgb(0, 150, 255); }
.text-info { color: rgb(0, 120, 255); }
.text-success-light { color: rgb(50, 200, 50); }
.text-success { color: rgb(50, 180, 50); }
.text-danger-light { color: rgb(230, 10, 10); }
.text-danger { color: rgb(180, 50, 50); }
cls { display: block; clear: both; float: none; width: 100%; }
ul.unstyle li, ol.unstyle li, ol.unstyle { list-style-type: none; }
.hide { display: none; }
code {
	padding: 2px;
	color: #fff;
	background-color: #333;
	border-radius: 3px;
	-webkit-border-radius: 3px;
}
.no-margin { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
.bg-primary { background: rgb(0, 135, 255); border: 1px solid rgb(0, 115, 255); color: #fff; }
.bg-info { background: rgb(0, 185, 255); border: 1px solid rgb(0, 165, 255); color: #fff; }
.bg-success { background: rgb(80, 180, 80); border: 1px solid rgb(80, 160, 80); color: #fff; }
.bg-danger { background: rgb(205, 50, 50); border: 1px solid rgb(185, 50, 50); color: #fff; }
.fullwidth { width: 100%; }
.word-wrap { word-break: break-all; }

/* language */
.tab-language { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; display: block; float: left; }
.tab-language .tab { display: inline-block; background: #eee; border: 1px solid #ccc; padding: 0; }
.tab-language .tab a { display: block; padding: 7.7px; }
.tab-language .tab a .lang-image { position: relative; top: 1px; margin-right: 10px; }
.tab-language .tab a span { position: relative; top: -2px; font-size: 12px; }
.tab-language .tab.active a, .tab a:hover, .tab a:focus { background: #bbb; }
.tab-language .tab:first-child { border-right: none; }
.tab-language .tab:last-child { border-right: 1px solid #ccc; }

/* spinning */
.spinning {
	-webkit-animation: spin 2.5s linear infinite;
	animation: spin 2.5s linear infinite;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}

/* input group */
.input-group { float: none; clear: both; display: table; width: 100%; margin-top: 5px; }
.input-group input.form-field { height: 40px; border-right: none; display: table-cell; margin-top: 0; }
.input-group input.form-field:focus { border-color: #eee; }
.input-group a {
	display: table-cell;
	padding: 10px;
	border: 1px solid rgba(210, 210, 210, .5);
	border-right: none;
	width: auto;
	height: auto;
	text-align: center;
	margin-top: 0;
	font-size: 13px;
}
.input-group input.form-field:last-child,
.input-group a:last-child { border-right: 1px solid rgba(210, 210, 210, .5); }
.input-group a:hover,
.input-group a:active,
.input-group a:focus { background: rgba(210, 210, 210, .5); }
.input-group.single input.form-field { width: calc(100% - 120px); }
.input-group.single a { width: 98px; padding: 11px 10px; }
.input-group.single a:nth-child(1) { border-left: 1px solid rgba(210, 210, 210, .5); }
.input-group.single a:nth-child(2) { border-right: 1px solid rgba(210, 210, 210, .5); }

/* overwrite tagsinput */
.form-row .tagsinput input { width: auto !important; padding: 5px; margin: 5px; color: rgba(102, 102, 102, 0.6) !important; }
.form-row .tagsinput input:focus { color: rgb(102, 102, 102) !important; }
.form-row .tagsinput span.tag { background: rgb(255, 50, 50); border: 1px solid rgb(255, 13, 13); color: #fff; margin: 5px; }
.form-row .tagsinput span.tag a { color: #fff; position: relative; top: -1.5px; }
.form-row .tagsinput {
	width: calc(100% - 2px) !important;
	padding: 0;
	font-size: 13px;
	font-family: 'Roboto';
	margin-top: 5px;
	border: 1px solid rgba(210, 210, 210, .5);
	min-height: auto !important;
	height: auto !important;
	cursor: text;
}
.form-row .tagsinput:active { border: 1px solid rgb(43, 133, 255); }

/* overwrite switchery */
.form-row .switchery { margin-top: 5px; }

/* overwrite froala-editor */
.fr-box { font-size: 13px; margin-top: 5px; }
.fr-box.fr-basic .fr-element a{
	color: #007bff;
	text-decoration: none;
}
.fr-box.fr-basic .fr-element ul{
	list-style: circle;
	padding-left: 30px;
}
.fr-box.fr-basic .fr-element ol{
	padding-left: 7px;
}
.fr-image-container .fr-delete-img { display: none !important; }
.fr-image-container .fr-insert-img { left: 70% !important; }

/* overwrite dropzone */
.dialog .dialog-wrapper .dialog-content .dropzone { border: none; background: #eee; padding: 50px 20px; }
.dialog .dialog-wrapper .dialog-content .dropzone .dz-message { font-size: 20px; }
.dialog.dialog-xs .dialog-wrapper .dialog-content .dropzone .dz-message { font-size: 13px; }
.dialog.dialog-xs .dialog-wrapper .dialog-content .dropzone .dz-preview { margin: 0; width: 100%; text-align: center; padding: 0; }
.dialog.dialog-xs .dialog-wrapper .dialog-content .dropzone .dz-preview .dz-image { display: inline-block; border-radius: 0; height: auto; }
.dialog.dialog-xs .dialog-wrapper .dialog-content .dropzone .dz-preview .dz-image img { width: 100%; }
.dialog.dialog-xs .dialog-wrapper .dialog-content .dropzone .dz-preview .dz-error-message { left: 10px; }

/* overwrite blockui */
.blockUI.blockMsg { position: fixed !important; top: 50% !important; }
.dialog .blockUI.blockMsg { position: absolute !important; top: 45% !important; }
.panel .blockUI.blockMsg { position: absolute !important; top: 45% !important; }

/* overwrite select2 */
.select2-container { margin-top: 5px !important; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border-radius: 0 !important; -webkit-border-radius: 0 !important; border-color: #eee !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 5px !important; }
.select2-container--default .select2-selection--single .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin-top: 0 !important; padding: 3px !important; }
.select2-container .select2-selection--single { height: 40px !important; }
.select2-container .select2-selection--multiple { min-height: 40px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 20px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-container--open { /*width: 388px !important;*/ font-size: 12px; }
.select2-container--open .select2-dropdown--above { border-bottom: 1px solid #eee !important; }
.select2-container--open .select2-dropdown--below { border-top: 1px solid #eee !important; }
.select2-dropdown--below + .select2-container--open { margin-top: 0 !important; }
.select2-dropdown { border-color: #eee !important; }
.select2-container--open .select2-dropdown { top: -5px; }

/* overwrite accordion */
[data-accordion] { position: relative; }
[data-accordion] [data-control] {
	background-color: rgba(200, 200, 200, .2);
	text-transform: uppercase;
	cursor: pointer;
	border-bottom-color: rgba(200, 200, 200, .4);
	font-weight: 700;
	position: relative;
	padding-left: 30px;
	font-size: 13px;
}
[data-accordion] > [data-control]:after { top: 10px !important; }
[data-control], [data-content] > * { border-bottom-color: #ccc; }
[data-content] [data-content-item] { padding-top: 20px; border-bottom-color: #ddd; }
[data-accordion] .remove-item { position: absolute; top: 0; left: 0; padding: 10px; cursor: pointer; }

.fr-element table td, .fr-element table th {
    border:1px solid #ccc;
}