@import url("grid.css");
@import url("reset.css");

html, body {min-height: 100%; min-width: 300px;}
body {color: #444; background: #ffffff; font: 13px/1.8 'Open Sans', Arial, sans-serif;}
input, button, select, textarea {font: 13px/15px 'Open Sans', Arial, sans-serif;}
a {
	color: #005580;
	text-decoration: none;
}
a:hover {
	color: #444;
}
a img {	
	vertical-align: middle;
}
p {
	margin-bottom: 20px;
}
p:last-child {
	margin-bottom: 0;
}
small {font-size: 0.9em; color: #aaa; margin-left: 5px; border-radius: 2px;}
small.category {background: #999; color: #ffffff; text-transform: uppercase; font-size: 11px; padding: 0 3px;}
small.warn {margin: 0; background: red; color: #ffffff; text-transform: uppercase; padding: 0 3px;}

h1, h2 {
	font-weight: normal;
}
h1 { font-size: 21px; }
h2 { font-size: 18px; }
h3 { font-size: 17px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }
h3, h4, h5, h6 {
	margin-bottom: .7em;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.alignRight, .tr {
	text-align: right !important;
}
.alignLeft, .tl {
	text-align: left !important;
}
.alignCenter, .tc {
	text-align: center !important;
}
img[align="left"], img.alignleft {
	float: left;
	margin: 6px 15px 15px 0;
}
img[align="right"], img.alignright {
	float: right;
	margin: 6px 0 15px 15px;
}

/* HEADER
------------------------------------------------------------------------- */
header {	
	height: 39px;
	line-height: 39px;
	position: relative;
	z-index: 100;
	background: #000;
	color: white;
	position: fixed;	
	width: 100%;
	min-width: 300px;
}
header.light {
	background: #f6f6f8;
	color: #000;
	border-bottom: 2px solid #4B8DF8;
	box-shadow: 0 0 5px gray;
}
ul#rightMenu {	
	float: right;
}
ul#rightMenu li {
	float: left;
	position: relative;
	text-align: right;	
}
ul#rightMenu li a {
	cursor: pointer;
	display: block;	
	color: white;	
	font-size: 1em;	
	top: 0px;
	height: 39px;
	padding: 0 15px;
	vertical-align: middle;
	position: relative;
}
ul#rightMenu li a .badge {
	position: absolute;
	right: 3px;
	top: 5px;
	background: #ff4455;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
	font-size: 10px;
	padding: 0 3px;
	border-radius: 4px;
	line-height: 13px;
	-webkit-border-radius: 2px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}
.light ul#rightMenu li a {
	color: gray;
}
ul#rightMenu li a img {
	vertical-align: middle;
	margin-right: 3px;
}
ul#rightMenu li:hover {
	background-color: #2A2A2A;	
}
.light ul#rightMenu li:hover {
	background-color: #F0F0F0;	
}
ul#rightMenu li ul {	
	background: #fff;
	color: gray;	
	border: none;
	box-shadow: 0 0 1px rgba(100,100,100,0.7);		
	position: absolute;	
	display: none;	
	z-index: 1000;
	width: 200px;
}
ul#rightMenu .showedSubRightMenu {
	top: 100%;
	right: 0;
	display: block;
}

ul#rightMenu li ul li {
	height: 32px;
	line-height: 32px;
	border: none;
	float: none;
	position: relative;	
	text-align: left;	
		
}
ul#rightMenu li ul li.separator {
	height: 0px;
	border-bottom: 1px solid #E5E5E5;
	margin: 2px 0;
}
ul#rightMenu li ul li.separatorText {	
	border: none;
	height: 18px;
	line-height: 22px;
	font-size: 0.8em;
	background: #fff;
	color: silver;	
	padding-left: 3px;	
	margin: 2px 0 3px 0;
}
ul#rightMenu li ul li.separatorText:hover {
	color: silver;
	background: #fff;
}

ul#rightMenu li ul li a {
	color: gray;
	padding: 0 5px 0 12px;		
}
ul#rightMenu li ul li:hover {
	background-color: #dddddd;
	color: #222222;
}
.light ul#rightMenu li ul li:hover {
	background-color: #F0F0F0;
	color: #222222;
}
ul#rightMenu li ul li:hover a {	
	color: #222222;
}

div#logo {	
	float: left;
	margin-left: 10px;
	font-size: 18px;
}
div#logo span {
	color: #ff0033;	
}
.light div#logo span {
	color: #4B8DF8;
}
body.mobile div#logo {
	font-size: 14px;
}

div#logo a:hover {
	color: #444;
}
#go-to-page {
	font-size: 13px;
	margin: 0px 0px 0px 20px;
}
div#logo img {
	vertical-align: middle;
}

a#view-site {
	font-size: 11px;
	font-weight: normal;
	border: 1px solid silver;	
	padding: 1px 4px;
	margin-left: 10px;
	vertical-align: middle;
	text-transform: uppercase;
	color: silver !important;
}
a#view-site:hover {
	color: gray !important;
	border-color: gray;	
}

/* FOOTER
------------------------------------------------------------------------- */
footer {
	clear: both;
	width: 100%;
	height: 26px;	
	font-size: 11px;
	color: #ccc;	
	background: #444;	
	position: fixed;
	bottom: 0;		
}
footer span {
	display: inline-block;
	padding: 4px 15px;
}
footer a:hover {
	color: #000;
}

/* Navigation
------------------------------------------------------------------------- */
nav {
 position: fixed;
 z-index: 95;
 left: 0px;
 top: 0px;
	width: 220px;
 height: 100%; 
	background: #444;
	color: white;
	font-size: 1.1em;
	float: left;
	height: 100%;
}
nav:before{
 content: '';
 display: block;
 width: 100%;
 height: 41px;
}

nav .toogler {
	display: block;
	text-align: center;
	vertical-align: center;
	color: #c0c0c0;
	height: 30px;		
	cursor: pointer;
 padding: 6px 8px;	
 -webkit-transition: All linear .1s;
 -moz-transition: All linear .1s;
 -o-transition: All linear .1s;
 transition: All linear .1s;
}
nav .toogler:hover{
 color: #888888;
}

nav a {
	color: white;	
}
nav menu {
	list-style: none;
}
menu li a {
	display: block;
	border-top: 1px solid #595959;
	padding: 6px 8px;
}
nav li a i {
	margin-right: 8px;
}
menu li a:hover, menu li a.opened {
	color: white;
	background-color: #333 !important;
}
menu li a.openable {
	position: relative;
}
menu li a.openable:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: url('../images/icons/arrow_state_grey.png') center center no-repeat;	
}
menu li a.opened:after {
	background-image: url('../images/icons/arrow_state_grey_expanded.png');
}
nav.closed menu li a.openable:after {display: none;}
menu li ul {
	border-top: 1px solid #595959;
	display: none;	
}
menu li ul li {
	margin-bottom: 1px;
}
menu li ul li a {
	color: #D2D2D2;
	border: none;
	font-size: 0.9em;
	padding: 3px 5px;
	padding-left: 35px;	
	margin: 2px 0;
}
menu li ul li a:hover, menu li ul li a.active {
	background-color: #555 !important;
}
menu > li.active > a {
	background-color: #E02222 !important;
	border-color: #E02222;
	background: url('../images/sidebar-menu-arrow.png') no-repeat right center;	
}


nav.light {
	background: #f6f6f8;
	color: #040404;
	border-right: 1px solid #d6d6da;
}
nav.light li ul, nav.light li a {
	color: #323232;
	border-color: #D2D2D2;
} 
nav.light li a:hover, nav.light li a.opened {
	background-color: #EAEAEA !important;
	color: #323232;	
}
nav.light li ul li a:hover, nav.light li ul li a.active {
	background-color: #EAEAEA !important;
	color: #525252;
}
nav.light menu > li.active > a, nav.light menu > li.active > a:hover {
	background-color: #4B8DF8 !important;	
	color: white;
	border: none;	
	margin-right: -1px;
	background: url('../images/sidebar-menu-arrow.png') no-repeat right center;	
}

nav.closed {
	width: 34px;
}
nav.closed li ul {
	display: none !important;
}
nav.closed menu > li .text {
	margin-left: 10px;
	display: none;
}
nav.closed menu > li.active > a {
	background-image: none;	
}
nav.closed menu > li:hover {
	position: relative;	
	background: #444;
	z-index: 9000;	
}
nav.closed menu > li:hover > a {
	width: 200px;
	background: #333;
}
nav.closed menu > li:hover .text {
	display: inline;
}
nav.closed menu li:hover ul {
	display: block !important;
	position: absolute;
	left: 35px;	
	background: #444;
	border-top: none;	
}
nav.closed menu li:hover ul li a {
	margin: 0;
	padding: 5px 6px 5px 10px;
	width: 165px;
}


nav.closed.light menu li:hover ul {
	background: #F5F5F5;	
}
nav.closed.light menu > li:hover {
	background: #FFFFFF;
}
nav.closed.light menu > li:hover > a {
	background: #F0F0F0;
}

/* CONTENT
------------------------------------------------------------------------- */
section#content {	
	text-align: justify;		
	padding: 50px 20px 20px 54px;	
	position: relative;	
}
section#content article {position: relative;}
section#content.boxLayout{
 padding: 0px 10px 10px 10px;
 margin: 0px;
}

h1 {	
	font-size: 22px;
	line-height: 38px;
	font-weight: 300 !important;		
}
h1 .button {
	font-size: 0.5em;	
}


/* page heading */
.head {position: relative; margin-bottom: 15px; border-bottom: 1px solid #e5e5e5; clear: both;}
.head:after {content: ''; display: block; clear: both;}
.head h1 {display: inline;}

#head {position: relative; margin-bottom: 15px; border-bottom: 1px solid #e5e5e5; clear: both;}
#head:after {content: ''; display: block; clear: both;}
#head h1 {display: inline;}
#head .action-buttons {position: absolute; right: 0; top: 0;}
#head .action-buttons .toggle {display: none; font-size: 16px; color: #222; width: 34px; height: 34px; line-height: 34px; text-align: center;}
#head .action-buttons .button {margin: 0 0 0 5px;}










h2 {
	color: #902452;	
}
h2 .button {
	font-size: 0.8em;
}

/* box and portlets
------------------------------------------------------------------------- */
.box, .portlet {
	background: #fff;
	margin-bottom: 15px;
	position: relative;
	padding: 0;
	border: none;	
}
.box > div, .portlet > div {	
	padding: 5px;
}
.box p, .accordion p, .portlet p {
	padding: 5px 10px;
	line-height: 1.4em;
}
.box h2, .accordion h2, .portlet h2 {	
	position: relative;
	height: 27px;
	padding: 5px 12px;	
	font-size: 16px;
	font-weight: bold;	
	border-bottom: 1px solid #E6E6E6; 
	color: #333333;	 
	font-weight: normal;
	margin-bottom: 5px;
}
.box.collapsable h2, .accordion h2, .portlet.closable h2 {
	color: #005580;
	cursor: pointer;	
}
.box ul.tabs li {
	border: none;
}
.box ul.tabs li:hover {
	background: none;
}
.box h2 img.toggle {
	margin: 0 5px 0 0;
	position: relative;
	top: 3px;
}
.box h2 a {
	margin-top: 8px;
	display: block;
	float: right;	
}
.box h2 a.button {
	margin-top: 0;
	padding: 5px 5px 5px 10px;	
}

.portlet {
	background: #FAFAFA;
	border-left: 2px solid #DDDDDD;	
}

.portlet.blue h2 a,
.portlet.purple h2 a,
.portlet.red h2 a,
.portlet.green h2 a,
.portlet.yellow h2 a,
.portlet.black h2 a {
	color: white;	
}

.portlet.blue {
	background: #FFFFFF;
	border: 1px solid #4B8DF8;	
}
.portlet.blue h2 {
	background: #4B8DF8;
	color: white;
	border: none;
}

.portlet.purple {
	background: #FFFFFF;
	border: 1px solid #852B99;	
}
.portlet.purple h2 {
	background: #852B99;
	color: white;
	border: none;
}

.portlet.red {
	background: #FFFFFF;
	border: 1px solid #E02222;	
}
.portlet.red h2 {
	background: #E02222;
	color: white;
	border: none;
}

.portlet.green {
	background: #FFFFFF;
	border: 1px solid #35AA47;	
}
.portlet.green h2 {
	background: #35AA47;
	color: white;
	border: none;
}

.portlet.yellow {
	background: #FFFFFF;
	border: 1px solid #FFB848;	
}
.portlet.yellow h2 {
	background: #FFB848;
	color: white;
	border: none;
}

.portlet.gray, .portlet.black {
	background: #FFFFFF;
	border: 1px solid #555555;	
}
.portlet.gray h2, .portlet.black h2 {
	background: #555555;
	color: white;
	border: none;
}

.portlet.white {
	background: #FFFFFF;
	border: none;
}
.portlet h2 {
	color: #000;	
}

.strict-y, .strictHeight {
	overflow-y: scroll;
}
.strict-x, .strictWidth {
	overflow-x: scroll;
}

/* login
------------------------------------------------------------------------- */
body.loginBody {
	background: #444444;
	min-width: 500px;
	min-height: 450px;	
}
body.loginBody h1 {
	float: left;
	position: absolute;
	left: 0;
	bottom: 0;	
	color: #EEE;		
	text-align: center;
	font-size: 1.9em;
	padding-left: 10px;
	margin: 0;
	font-weight: 400;
	border: none;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
body.loginBody h1 span {
	color: #ff0033;	
}
#login {
	padding: 20px 10px 15px 10px;
	background-color: rgba(255,255,255,0.4);
	width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -150px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}
#login h2 {
	border: none;
	font-size: 2.0em;
	font-weight: 300;
	padding-left: 20px;
}
#login input {
	margin: 5px 0;
	font-size: 1.2em;
	padding: 7px 10px;
	font-weight: 300;
	border-left: 2px solid #35AA47;		
}
.loginBody footer {
	background: none;
	position: absolute;
	bottom: 20px;		
	color: white;		
	text-align: center;	
	font-size: 0.9em;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);	
}
#login section {
	padding: 20px;
}
#login a {
	font-size: 11px;
}
input#username, 
input#adminpassword {
	width: 230px;
}
#login #forgot {
	margin-left: 20px;
}

/* icons
------------------------------------------------------------------------- */
section.icons {
	text-align: center;
}
.icons ul {
	margin-top: 20px;
}
.icons ul li {
	width: 80px;
	margin: 0 20px 20px 0;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
}
.icons ul li a {
	display: block;
	padding: 5px;
	border: 1px solid #f1f1f1;
}
.icons ul li a:hover {
	border: 1px solid #aaa;
}
.icons ul li a img {

}
.icons ul li a span {
	font: 11px Tahoma, sans-serif;
	color: #333;
	display: block;
}

/* box ul
------------------------------------------------------------------------- */
.box ul li {		
	padding: 3px 5px;
	color: #333;		
}
.box ul ul {
	margin-left: 15px;
}

/* message boxes
------------------------------------------------------------------------- */
div.msg {padding: 15px; margin-bottom: 20px; cursor: pointer; font-size: 14px; line-height: 20px; border: 1px solid transparent; border-radius: 4px;}
div.information {color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;}
div.error {color: #a94442; background-color: #f2dede; border-color: #ebccd1;}
div.warning {color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc;}
div.success {color: #31708f; background-color: #d9edf7; border-color: #bce8f1;}

/* TABLES
------------------------------------------------------------------------- */
.gtable {width: 100%;}
.gtable th, .gtable td {text-align: left; padding: 8px 10px;}
.gtable thead tr {
	color: #333;	
}
.gtable thead th {
	background: #F0F6FA;
	color: #777;
	font-weight: normal;
}
.gtable tbody tr td {
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.gtable tbody tr:nth-child(odd) td, .detailtable tbody tr.odd td {
	background-color: #fff;
}
.gtable tbody tr:nth-child(even) td, .detailtable tbody tr.even td {
	background-color: #ffffff;
}
.gtable tbody tr:hover td {
	background-color: #f0f6fa;
}
.gtable input {
	vertical-align: middle;
}
.gtable img {
	vertical-align: middle;
	margin-right: 5px;
}
.gtable tr.detail {
	font-size: 11px;
}
.gtable tr.detail td {
	padding: 0;
}
.gtable tr.detail td td, .gtable tr.detail td th {
	padding: 2px 10px;
	color: #777;
}
.gtable .detail table {
	width: 100%;
	border: 5px solid #fff7d1;
}
.gtable .detail table tr td, .gtable .detail table tr th {
	background: #ffffed;
	border-bottom: 1px solid rgba(0,0,0,.09);;
}

.gtable.condensed th, .gtable.condensed td {
	padding: 2px 4px;
	line-height: 1.4;
}
.gtable.condensed td {
	opacity: 0.9;
}
.gtable.condensed tr:hover td {
	opacity: 1;
}

.gtable tbody tr.invalid td {
	background: #eee;
}
.gtable tbody tr.errored td {
	background: #fdeaea;
}
.gtable tbody tr.unsend td {
	
}
.gtable tbody tr.delayed td {
	background: #fff9d3;
}
.gtable tbody tr.quick td {
	background: #e5ffde;
}
.gtable tbody tr.good td {
	background: #d4f9ca;
}

.gtable tbody tr.changed-date td {
	border-top: 2px solid #555;
}

table.sortable img.move {
	cursor: move;
}

.tablefooter {
	background: #f7f7f7;
	border-top: 1px solid #fff;
}
.tablefooter .actions {
	float: left;
	padding: 5px 10px;
}
.tablefooter .pagination {
	float: right;
	padding: 5px 10px;
}

table.va-center td, table.va-center th {vertical-align: middle;}

/* FORMS
------------------------------------------------------------------------- */
form.filter {background: #fafafa; padding: 0;}
form.filter .toggle {display: none; color: #222; padding: 6px 10px; position: relative;}
form.filter .toggle:after {font-family: FontAwesome; content: '\f0b0'; position: absolute; top: 3px; right: 10px; color: #222; font-size: 15px;}
fieldset {margin-bottom: 15px; position: relative; padding: 10px; border: none; background: #fafafa; border-left: 2px solid #ddd;}
fieldset



form legend {
	position: relative;
	height: 27px;
	padding: 5px 0px;	
	font-size: 16px;
	font-weight: bold;	
	border-bottom: 1px solid #E6E6E6; 
	color: #333333;	 
	font-weight: normal;
	margin-bottom: 15px;
	width: 100%;	
}
form dt {
	margin-bottom: 2px;
}
form dd {
	margin-bottom: 15px;
}
form dt label {
	cursor: pointer;
	font-size: 1.1em;	
	font-weight: normal;
	color: #000;	
}

form p {
	clear: left;
	margin-bottom: 0;
	padding: 5px 0;
	width: 100%;
}
form p label {
	display: block;
	float: left;
	cursor: pointer;
	font: 11px Tahoma, sans-serif;
	font-weight: bold;
	color: #555;	
	vertical-align: middle;
	padding: 5px;
	text-align: right;
	margin-right: 10px;
	margin-left: 15px;
	width: 100px;
}
form p input,
form p select,
form p textarea {
	float: left;
}
form dl.inline {	
}
form dl.inline dt {
	clear: both;
	width: 30%;
	float: left;
	text-align: right;
	margin-right: 12px;
	padding: 5px 0 5px 0;		
	line-height: 1.5em;	
}
form dl.inline dt label {	
}
form dl.inline dd {
	float: left;
	width: 65%;
	margin: 0;	
	padding: 5px 0 5px 0;
	text-align: left;	
}
form dl.inline.onEdges dt {
	text-align: left;
	border-top: 1px solid #E5E5E5;
}
form dl.inline.onEdges dd {
	text-align: right;
	border-top: 1px solid #E5E5E5;
}

form div.buttons {
	text-align: center;
}

form dl.inline input[type="text"],
form dl.inline input[type="email"],
form dl.inline input[type="password"],
form dl.inline select {
	position: relative;
	top: -4px;	
}

input {outline: none;}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
	border: 1px solid #E5E5E5;
 	border-radius: 4px;
	padding: 3px 5px;
	background: #fff;
	color: #333;
	vertical-align: middle;
}
form select {
	padding: 4px;
}
form input[type="text"]:hover,
form input[type="email"]:hover,
form input[type="password"]:hover,
form select:hover,
form textarea:hover {
	border: 1px solid #aaa;
}
form input[type="radio"], form input[type="checkbox"] {
	vertical-align: middle;
	border: 1px solid #D5D5D5;
	width: 18px;
	height: 18px;
	padding: 3px;
}
form input[type=radio] {
	border-color: transparent;
}
form input.xsmall, form select.xsmall, form textarea.xsmall {
	width: 50px;
}
form input.small, form select.small, form textarea.small {
	width: 130px;
}
form input.medium, form select.medium, form textarea.medium {
	width: 200px;
}
form input.big, form select.big, form textarea.big {
	width: 540px;
}
form input.full, form select.full, form textarea.full {
	width: 100%;
}
input[type=text].big {
	font-size: 15px;
	width: 500px;
}
form .button.big {
	width: 220px;
	font-size: 1.3em;
	padding: 11px;	
}
.button.small {
	width: auto;
}
input#newstitle {
	font-size: 20px;
	width: 540px;
}
form label.error {
	font: 10px Tahoma, sans-serif;
	color: #ED7476;
	margin-left: 5px;
}
form input.error,
form input.error:hover,
form input.error:focus,
form select.error,
form textarea.error {
	border: 1px solid #ED7476;
	background: #FFEDED;
}


/* comments composer */
form.composer {background: #ecf5fb; padding: 10px; margin: 0 0 10px 0; border-radius: 4px;}
form.composer > div {clear: both; position: relative; padding: 0 29px 0 0;}
form.composer.two-buttons > div {padding: 0 65px 0 0;}
form.composer textarea {width: 100%; height: 24px; margin: 0; outline: none; vertical-align: top; }
form.composer > div .button {position: absolute; right: 0; top: 0; padding: 0; margin: 0; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; text-align: center;}
form.composer > div .button-2 {position: absolute; right: 30px; top: 0; padding: 0; margin: 0; width: 24px; height: 24px; border-radius: 50%; text-align: center;}
form.composer > div .button i {margin: 0;}



/* tabs, vertical tabs */
ul.tabs {margin-bottom: 10px; padding: 0; border-bottom: 1px solid #169ef4;}
ul.tabs:after {content: ''; display: block; clear: both;}
ul.tabs li {display: block; float: left; margin: 0 1px 0 0;}
ul.tabs li.mobile-display {display: none;}
ul.tabs li.mobile-display a {color: #222;}
ul.tabs li a {display: block; line-height: 25px; font-size: 13px; font-weight: 300; text-decoration: none; color: #555; padding: 4px 10px; border-radius: 4px 4px 0 0;}
ul.tabs li:hover a {background-color: #f0f6fa; color: #111;}
ul.tabs li.selected a {background-color: #169ef4; color: #fff;}
ul.tabs li a i {margin-right: 6px;}

ul.tabs li .badge {display: block; float: right; background: #557386; color: #f0f6fa; padding: 0 6px; border-radius: 8px; font-size: 11px; line-height: 18px; margin-top: 3px;}
ul.tabs li.selected a .badge {background: white; color: #169EF4;}

ul.tabs.vertical {background: #f0f6fa; border: none; border-radius: 4px; overflow: hidden;}
ul.tabs.vertical li {float: none; margin: 0; border-bottom: 1px solid #fff;}
ul.tabs.vertical li:last-child {border-bottom: none;}
ul.tabs.vertical li a {color: #555;}
ul.tabs.vertical li.selected a {color: #fff;}

.tabs-vertical li.mobile-display {display: none;}
.tabcontent {padding: 10px 0;}

/* Accordion
------------------------------------------------------------------------- */
.accordion {
	
}
.accordion > div {		
	padding: 5px;
	padding-left: 30px;
	margin: 0 3px;		
}
.accordion > h2 {	
}
.accordion h2.active {
	margin-bottom: 10px;
}

/* BUTTONS
------------------------------------------------------------------------- */
.button {
	font: 11px;	
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: baseline;
	margin: 0 3px 0 1px;
	outline: none;
	cursor: pointer;
	text-align: center;
	padding: 9px 15px;
	width: auto;
	overflow: visible;
	line-height: 110%;
	margin: 5px 2px; 	
 	color: #555;  		
	background-color: #E6E6E6;
	border: none;	
	border-radius: 4px;
}
.button {-webkit-transition: All linear .1s; -moz-transition: All linear .1s; -o-transition: All linear .1s; transition: All linear .1s;}
.button:hover {	
	background-color: #D8D8D8;
 	/*box-shadow: 0px 0px 5px rgba(0,0,0,0.3);*/
}
.button:active {
	position: relative;	
}
.button [class^="icon-"] {font-weight: normal; margin-right: 9px;}
.button.small [class^="icon-"] {margin-right: 7px;}
.button [class^="icon-"]:last-child {margin-right: 0;}
[class^="icon-"] {
	font-size: 1.1em;
	-webkit-font-smoothing: antialiased !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.button img {
	margin: -4px 1px -4px -2px;
}
.button.big {
	font-size: 1.2em;	
	padding: 10px 15px;
}
.button.small {font-weight: normal; padding: 4px 10px;}

.button.red {background-color: #d9534f; color: white; border: none;}
.button.red:hover {background-color: #c9302c;}

.button.blue {background-color: #4D90FE; color: white; border: none;}
.button.blue:hover {background-color: #0362FD;}

.button.green {background-color: #5cb85c; color: white; border: none;}
.button.green:hover {background-color: #449d44;}

.button.yellow {background-color: #f0ad4e; color: white; border: none;}
.button.yellow:hover {background-color: #ec971f;}

.button.black {
	border-color: #000;
	background-color: #444;
 	color: #e8e8e8;
}
.button.gray {
	border-color: #000;
	background-color: #444;
 	color: #e8e8e8;
}
.button.white {
	color: #444;	
	border: 1px solid #999;
	background: #f7f7f7;
}
.button.gray:hover {
	color: #000;
}
section.buttons {
	text-align: center;
}
section.buttons .button {
	margin-bottom: 15px;
}

i[class^="icon-"].red {color: #d9534f;}
i[class^="icon-"].yellow {color: #f0ad4e;}

/* STRIPES
------------------------------------------------------------------------- */
.stripe-red {
	border-left: 2px solid #D84A38;
}
.stripe-blue {
	border-left: 2px solid #4D90FE;
}
.stripe-green {
	border-left: 2px solid #35AA47;
}
.stripe-yellow {
	border-left: 2px solid #FFB848;
}
.stripe-black {
	border-left: 2px solid #444;
}
.stripe-gray {
	border-left: 2px solid #444;
}
.stripe-white{
	border-left: 2px solid #f7f7f7;
}

/* Comments 
--------------------------------------------- */
form.new-comment {background: #ecf5fb; padding: 10px; margin-bottom: 10px; border-radius: 7px;}
.comment-body {padding: 6px 10px; border: 1px solid #bbb; margin-bottom: 10px; background: #fcfcfc; border-radius: 4px;}
.comment-body .icon-trash {float: right; color: #444;}
.comment-body.right {text-align: right;}
.comment-body .content {padding-top: 8px;}
.comment-body .links {float: right;}
.comment-body.right .links {float: left;}
.comment-body .links {display: none;}
.comment-body:hover .links {display: inline;}
.comment-body .links .button {font-size: 0.8em;}

.comment-body.stripe-red {border-color: #f79f94;}
.comment-body.stripe-blue {border-color: #7f9fd3;}
.comment-body.stripe-green {border-color: #35AA47;}
.comment-body.stripe-yellow {border-color: #FFB848;}
.comment-body.stripe-black {border-color: #444;}
.comment-body.stripe-gray {border-color: #444;}
.comment-body.stripe-white{border-color: #f7f7f7;}

/* Common 
------------------------------------------------------------------------- */
.fullWidth {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

/* Breadcrumb Navigation
------------------------------------------------------------------------- */

/* treeview */
.tree li .line {border-bottom: 1px solid #e8e8e8; padding: 4px 0px 0px 2px}
.tree li .line:hover {background: rgba(0, 0, 0, 0.04);}
.tree .right-icon {float: right; display: block; width: 25px; height: 25px;}

/* icms-tree */
.icms-tree{
 margin: 0px 0px 20px 0px;
}
.icms-tree .line{
 border-bottom: 1px solid #e4e4e4;
 padding: 3px 0px 0px;
 position: relative;
}
.icms-tree .line:last-child{
 border-bottom: none;
}
.icms-tree .td-1{
 float: left;
 padding-left: 5px;
}
.icms-tree .icons{
 float: right;
 padding-top: 2px;
}
.icms-tree .icons span{
 float: left;
 display: block;
 width: 30px;
 height: 20px;
 text-align: center;
}
.icms-tree .subitems{
 border-top: 1px solid #e4e4e4;
 padding-left: 20px;
}
.icms-tree .subitems:empty{
 display: none;
}
.icms-tree .toogle{
 width: 11px;
 height: 11px;
 line-height: 11px;
 position: absolute;
 top: 6px;
 left: -12px;
 border: 1px solid #aaaaaa;
 color: #aaaaaa;
 background: url(../images/icms-tree.png) no-repeat center -15px;
 cursor: pointer;
 text-align: center;
}
.icms-tree .toogle.closed{
 background-position: center 4px;
}

/* product autocomplete */
.products-list .product-list-icon {
    margin-right: 10px;
}

.products-list .product-list-button {
    margin-left: 10px;
}

/* combobox */
.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    margin-left: -1px;
    padding: 0;
    height: 1.7em;
}
.custom-combobox-input {
    margin: 0;
    padding: 0.3em;
}

.informations{background:#f4f4f4; border:1px solid #d8d8d8; min-width:800px; margin-bottom:15px;}
.informations .views{height:36px;}
.informations .views .list{float:left; margin-right:5px;}
.informations .views .button{margin:2px 0px 2px 2px;}
.informations .views .button.active{background:#35AA47; color:#ffffff;}
.informations .board{position:relative; height:400px; border-top:1px solid #d8d8d8;}
.informations .folders{position:absolute; left:0px; top:0px; width:25%; bottom:0px; overflow:hidden; overflow-y:auto;}
.informations .folders ul{background:none;}
.informations .folders ul li{padding-left:3px;}
.informations .folders ul > li{padding-left:20px; background:url(../images/folder-normal.png) no-repeat 2px 2px;}
.informations .folders ul > li.opened{background-image:url(../images/folder-opened.png);}
.informations .folders ul ul li > ul{display:none;}
.informations .folders li.opened > ul{display:block;}
.informations .folders a{color:#000000;}
.informations .folders a.active{color:#4b8df8;}
.informations .items{position:absolute; left:25%; top:0px; right:0px; bottom:0px; background:#fefefe; border-left:1px solid #d8d8d8; overflow:hidden; overflow-y:auto;}
.informations .items .bar{padding:2px; border-bottom:1px solid #e8e8e8;}
.informations .items .item{display:block; border-bottom:1px solid #e8e8e8;}
.informations .items .item .link{display:block; padding:2px 5px;}
.informations .items .item .options{float:right; padding:4px;}
.informations .items .item .options a{margin-left:5px;}
.informations .items .item .icon{float:left; display:block; width:16px; height:16px; text-align:center; margin-right:8px;}
.informations .items p{padding:15% 0px 0px 0px; text-align:center; font-size:20px; color:#999999;}
#selected-items{background:#f4f4f4; border:1px solid #d8d8d8; padding:5px;}

/* icms-tree */
ul.icms-tree li{padding-left:20px; position:relative;}
ul.icms-tree.lines li{border-top:1px solid rgba(0,0,0,0.1);}
ul.icms-tree.lines li:first-child{border-top:none;}
ul.icms-tree.lines ul{border-top:1px solid rgba(0,0,0,0.1);}
ul.icms-tree li > .opener{position:absolute; left:2px; top:2px; width:16px; height:16px; cursor:pointer; background:url(../images/folder-normal.png) no-repeat left top;}
ul.icms-tree li.opened > .opener{background-image:url(../images/folder-opened.png);}
ul.icms-tree ul{display:none;}
ul.icms-tree li.opened > ul{display:block;}

.tabs.filter-filters li { position: relative; }
.tabs.filter-filters li > a.has-remove-button { padding-right: 20px; }
.tabs.filter-filters li .filter-remove-button { display: none; position: absolute; border: none; background: none; padding: 0; top: -10px; right: 0; }
.tabs.filter-filters li:hover .filter-remove-button { display: block; }

/* chat */
#chat-window {}
#chat-window .threads-list {width: 29%; float: left; border-right: 1px solid #c0c0c0; overflow: hidden; overflow-y: auto;}
#chat-window .threads-list a {display: block; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 5px 10px; color: #333; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#chat-window .threads-list a i {width: 30px; opacity: 0.4;}
#chat-window .threads-list a.unread {background: #f0f6fa;}
#chat-window .threads-list a.active {background: #169ef4; color: #fff;}
#chat-window .thread-details {width: 70%; float: right; position: relative;}
#chat-window .thread-details .composer {display: none; background: #f8f8f8; padding: 5px 5px 5px 5px; margin-bottom: 10px;}
#chat-window form.composer .title {margin: 0 0 5px 0; padding: 0; font-size: 20px; line-height: 22px;}
#chat-window form.composer .mute {display: none; float: right; margin: 0 0 5px 0;}
#chat-window form.composer .unmute {display: none; float: right; margin: 0 0 5px 0;}
#chat-window form.composer .leave {float: right; margin: 0 0 5px 0;}
#chat-window form.composer > div {padding: 5px 29px 0 0; border-top: 1px solid #d8d8d8;}
#chat-window form.composer > div .button {top: 5px;}
#chat-window .thread-details .messages {display: none; overflow: hidden; overflow-y: auto;}
#chat-window .thread-details .messages .message {
	background: #edeff4;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, .1);
	padding: 5px 8px;
	margin-bottom: 10px;
	margin-right: 40px;
	font-size: 13px;
	line-height: 20px;
	text-align: left;
	color: #999;
	color: rgba(0, 0, 0, 0.5);
}
#chat-window .thread-details .messages .message.my {
	margin-right: 0;
	margin-left: 40px;
	background: #e2eefe;
}
#chat-window .thread-details .messages .message p {
	font-size: 15px;
	line-height: 20px;
	color: #444;
}
#chat-window .thread-details .messages .message a{text-decoration:underline;}

.timeline-story {position: relative; background: #fafafa; padding: 5px 5px 5px 36px; border-radius: 4px; border: 1px solid #e8e8e8; margin: 0 0 10px 0;}
.timeline-story .story-icon {position: absolute; display: block; left: 7px; top: 8px; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; line-height: 22px; text-align: center; background: #999; color: #fafafa;}
.timeline-story .story-icon.icon-bolt {background-color: #cfb738;}
.timeline-story .story-icon.icon-ok {background-color: #9fd17b;}
.timeline-story .story-icon.icon-comment {background-color: #4a96d1;}
.timeline-story .story-icon.icon-comment.internal {background-color: #d64b45;}
.timeline-story small {display: block; padding: 0; margin: 0 0 3px 0; color: #9a9a9a; font-size: 13px;}
.timeline-story p.description {padding: 0; margin: 0 0 3px 0; font-size: 15px; color: #888;}
.timeline-story p.description b {color: #333;}
.timeline-story p.content {color: #333;}
.timeline-story a {text-decoration: underline;}

body.with-sidebar {padding-right: 200px;}
#side-bar {position: absolute; position: fixed; right: 0; top: 0; width: 200px; bottom: 0; background: #fafafa; border-left: 1px solid #d5d5d5;}
#side-bar > div {position: relative; overflow: hidden; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(0, 0, 0, .15); border-top: 1px solid #fff;}
#side-bar .notifications {height: 50%;}
#side-bar .users {height: 50%;}
#side-bar .users a {display: block; position: relative; color: #333; padding: 3px 15px 3px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#side-bar .users a:hover {background-color: rgba(0, 0, 0, .04);}
#side-bar .users a .status {display: block; position: absolute; right: 5px; top: 50%; min-width: 6px; height: 10px; margin-top: -5px; color: #888; font-size: 10px; line-height: 10px;}
#side-bar .users a.online .status, #side-bar .users a.away .status {font-size: 0;}
#side-bar .users a.online .status:after, #side-bar .users a.away .status:after {content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-top: 2px;} 
#side-bar .users a.online .status:after {background-color: #0f9d28;}
#side-bar .users a.away .status:after {background-color: #ea9717;}

#side-bar .notifications a {display: block; position: relative; color: #333; padding: 6px; font-size: 12px; line-height: 16px; border-bottom: 1px solid rgba(0, 0, 0, .15);}
#side-bar .notifications a:hover {background-color: rgba(0, 0, 0, .04);}
#side-bar .notifications a .time {display: block; float: right; color: #888; font-size: 10px; margin: 0 0 0 5px;}


.interactive-tooltip {
	position: absolute;
	top: 100%;
	margin-top: -10px;
	right: 0;
	width: 450px;
	background: 
}
.interactive-tooltip p {
	background-color: #282828;
	-webkit-border-radius: 2px;
	color: #fff;
	padding: 6px 8px;
	text-align: left;
	padding: 13px 15px;
	margin: 10px 0 0 0;
	line-height: 22px;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .8);
	position: relative;
}
.interactive-tooltip p b {color: #169ef4;}
.interactive-tooltip p:after {
	position: absolute;
	right: 16px;
	top: 6px;
	color: #fff;
	content: 'x';
}
.interactive-tooltip:before {content: ''; position: absolute; right: 16px; top: 0; width: 0; height: 0;
border: 10px solid transparent;
font-size: 0;
line-height: 0;
border-top: 0;
border-bottom-color: #282828;
}


/* dropdown button */
.dropdown-group {position: relative; display: inline-block;}
.dropdown-group .button.dropdown {padding-right: 45px !important; position: relative; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.dropdown-group .button.dropdown:before {content: ''; display: block; position: absolute; right: 28px; top: 0; width: 0; height: 100%; border-left: 1px solid rgba(0, 0, 0, .1); border-right: 1px solid rgba(255, 255, 255, .3);}
.dropdown-group .button.dropdown:after {content: '\f0d7'; font-family: FontAwesome; display: block; position: absolute; right: 15px; top: 50%; width: 20px; height: 20px; line-height: 20px;  text-align: center; margin: -10px -10px 0;}
.dropdown-group .button.dropdown + ul {display: none; position: absolute; z-index: 100; left: 0; top: 100%; min-width: 150px; background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden;}
.dropdown-group .button.dropdown + ul.left {left: 0; right: auto;}
.dropdown-group .button.dropdown + ul.right {left: auto; right: 0;}
.dropdown-group .button.dropdown + ul.top {top: auto; bottom: 100%;}
.dropdown-group .button.dropdown + ul.bottom {top: 100%; bottom: auto;}
.dropdown-group .button.dropdown + ul {-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}
.dropdown-group .button.dropdown.opened {-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}
.dropdown-group .button.dropdown.opened + ul {display: block;}
.dropdown-group .button.dropdown + ul li {display: block; border-bottom: 1px solid #eee;}
.dropdown-group .button.dropdown + ul li:last-child {border-bottom: none;}
.dropdown-group .button.dropdown + ul li a {display: block; padding: 5px 10px; color: #444; text-decoration: none; white-space: nowrap;}
.dropdown-group .button.dropdown + ul li:hover a {background: #f8f8f8; color: #222;}

.upload-area {background: #fefefe; border: 2px dashed #7b95bc; border-radius: 5px; padding: 20px; text-align: center; font-size: 15px; color: #7b95bc; cursor: pointer;}

@media all and (max-width:700px) {
	div#logo {display: none;}
	#rightMenu li a > label {display: none;}

	nav {z-index: 105; width: 70%; min-width: 200px; max-width: 400px; overflow: hidden; overflow-y: auto;}
	nav:before {display: none;}
	nav.closed {min-width: 42px; width: 42px; height: 42px; border: none; background: transparent;}
	nav.closed menu {display: none;}
	section#content {padding-left: 20px;}

	#side-bar {display: none;}
	body.with-sidebar {padding-right: 0;}

	#head .action-buttons {background: #fff; padding: 5px 0;}
	#head .action-buttons .toggle {display: inline-block; margin-left: 5px;}
	#head .action-buttons > a {display: none; margin: 0 0 0 5px;}
	#head .action-buttons.focus > a {display: inline-block;}

	form.filter {background: #fafafa; border-left: 2px solid #888;}
	form.filter .toggle {display: block;}
	form.filter fieldset {display: none; border: none; border-top: 1px solid #ddd;}
	form.filter.focus fieldset {display: block;}

	ul.tabs {background: #f0f6fa; margin-bottom: 15px; border: none;}
	ul.tabs li {border-bottom: 1px solid #fff; display: none; float: none;}
	ul.tabs li.mobile-display {border: none; display: block; position: relative; padding-right: 15px;}
	ul.tabs li.mobile-display a {color: #557386 !important;}
	ul.tabs li.mobile-display:after {font-family: FontAwesome; content: '\f0d7'; position: absolute; top: 3px; right: 10px; color: rgba(0, 0, 0, .8); font-size: 15px;}
	ul.tabs.opened li {display: block;}
	ul.tabs.opened li.mobile-display {border-bottom: 1px solid #fff;}
	ul.tabs.filter-filters li .filter-remove-button {right: 5px; top: 4px;}

	[class*="grid_"] {float: none; margin: 0; width: auto;}
	.hide-in-mobile {display: none !important;}

	.table-wrapper {overflow: hidden; overflow-x: auto;}
	.gtable td {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
}

form.submitting {position: relative;}
form.submitting:after {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, .5);}

#confirm-send-modal {
	opacity: 1;
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.8);
    transition: 0.25s all;
}
#confirm-send-modal.open {
	top: 0;
    transition: 0.4s all;
}

.modal-overlay {
	width: 100%;
    height: 100%;
    position: absolute;
}

.modal-body {
	position: relative;
	max-width: 500px;
    width: 100%;
    margin: 25px auto;
    background: white;
    padding: 35px 45px;
    border-radius: 15px;
    font-weight: bold;
    box-shadow: 0 0 15px #dadada;
}

.modal-body > .button {
	float: right;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-primary {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
}

.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.label-default {
    background-color: #999;
    border-radius: 3px;
    padding: 0px 3px 1px 3px;
    font-size: 90%;
    color: #fff;
    font-weight: bold;
}