@import url("/assets/default/css/_struct.css");
@import url("/assets/default/css/_datatable.css");
@import url("/assets/default/css/_messages.css");
@import url("/assets/default/css/_buttons.css");
@import url("/assets/default/css/_forms.css");
@import url("/assets/default/css/_chosen.css");


/** APPEND YOUR OWN APP CSS **/
body{
	font-family		: 	'Open Sans', sans-serif;
	font-size		:	13px;
	font-weight		:	300;
	background		:	#F4F4F4;
	color			:	#3f4551;
}
body > header {
	/*background		:	#00A0B0;greenblue*/
	
	background		:	#d35400; /*ORANGE*/
	background		:	#27ae60; /*GREEN*/
	background		:	#2980b9; /*BLUE */	
	background		:	#3498db; /*BLUE */
	background		:	#34495e; /*dark*/
	
	padding			:	0 35px 0 0px;
}
body > .container{
	position	:	fixed;
	background	:	#FFFFFF;
	max-width 	:	100%;
}

/* ==================================================================
THEMES
================================================================== */
input[name=theme]{
	opacity	:	0;
	position	:	absolute;
	left	:	-5000px;
	visibility	:	hidden;
}
input[name=theme] + label{
	display	:	inline-block;
	width	:	50px;
	height	:	50px;
	margin	:	0px 5px 5px 0px;
}
input[name=theme]:checked + label{
	border	:	2px solid #000000;
}
input[value=default] + label{background-color:#3498DB;}
input[value=red] + label{background-color:#FD685B;}
input[value=green] + label{background-color:#27ae60;}
input[value=black] + label{background-color:#34495e;}
input[value=pastelblue] + label{background-color:#7EADC4;}

/* ==================================================================
GENERAL CLASSES
================================================================== */
.upper{
	text-transform	:	uppercase;
}
.normal{
	font-weight	:	normal;
}
.right{
	float	:	right!important;
}
.relative{
	position	:	relative;
}
.clearfix::after{
	content	:	'';
	clear	:	both;
	display	:	block;
	height	:	0px;
	width	:	0px;
}
.bg-green{
	background-color	:	#85BAA1!important;
}
.bg-lgreen{
	background-color	:	#CEEDDB!important;
}
.bg-yellow{
	background-color	:	#F0CF65!important;
}
.bg-pyellow{
	background-color	:	#92B4A7!important;
}
.w-100 {
    width: 100%!important;
}

.m-1{
	    margin: 0.15rem;
}
/* ==================================================================
GENERAL
================================================================== */
h1,h2,h3,h4,h5 {
	font-weight	:	300;
    text-transform: inherit;

}
h4{
	padding	:	15px 0;
}
body > header > nav:not(.left) a {
    padding				:	 0 5px;
}
header > nav .dropdown-menu > li > a {
	padding				:	5px 10px;
	font-weight			:	inherit;
}
header > nav .dropdown-menu > li.div{
	border-bottom		:	1px solid #edf1f2;
}
/*** GENERAL LAYOUT **/
a:hover:not( nav a){
	text-decoration	:	underline;
}
input, select {
	color				:	inherit;
}
/* ==================================================================
FLEX
================================================================== */
.input-flex{
	display: -ms-flexbox!important;
    display: flex!important;
}

/* ==================================================================
LAYOUT
================================================================== */
body > aside {
	background		: 	#FFFFFF;
	width			: 	200px;
	border-right	:	1px solid #cfdadd;
}
body > aside nav {
    border-bottom	: none;
}
body > input[type=checkbox]{
	position	:	absolute;
	left		:	-2500px;
}
input[name="toggleaside"] ~ header > .logo{
	width		:	200px;	
	left		:	-200px;
	z-index		:	0;
}
input[name="toggleaside"] ~ header nav.left{
	overflow	:	hidden;
	height		:	100%;
	width		:	200px;
	padding-top	:	8px;
	position	:	relative;
	z-index		:	10;
}
input[name="toggleaside"] ~ header nav.left > img{
	float		:	left;
	margin-left	:	25px;	
	margin-top	:	8px;
	width		:	100px;
}
input[name="toggleaside"] ~ header nav.left label {
	float		:	right;
    font-size	:	18pt;
	line-height	:	18pt;
	padding		:	2px 15px 0 0;
	margin-left	:	20px;
}
input[name="toggleaside"] ~ header nav.left label:hover{
	color		:	inherit!important;
}
/** WITHOUT MENU **/
input[name=toggleaside]:not(:checked) ~ aside{
	left		:	-250px;
}
input[name=toggleaside]:not(:checked) ~ .container {
	padding		:	0px;
}

/** WITH MENU **/
input[name=toggleaside]:checked ~ aside{
	left	:	0px;
}
input[name=toggleaside]:checked ~ .container {
	padding		:	0px 0px 0px 200px;
}
input[name="toggleaside"]:checked ~ header nav.left label {
	margin-left	:	20px;
}
input[name="toggleaside"]:checked ~ header nav.left label i:nth-child(1), 
	input[name="toggleaside"]:not(:checked) ~ header nav.left label i:nth-child(2),
		 input[name="toggleaside"]:not(:checked) ~ header nav.left label i:nth-child(3){
    display: none;
}
header nav label i:nth-child(2){
	margin-right	:	-4px;
}


/* ==================================================================
MAIN NAV
================================================================== */
body > aside > nav > a{
	color		: 	inherit;
	padding		: 	10px 10px 5px 20px ;
	font-size	:	16px;
}


/* ==================================================================
NOTIFICATIONS
================================================================== */
body > header .dropdown > a > i:first-child:last-child{
	padding-left	:	10px;
	padding-right	:	10px;
}
.notifications .dropdown-menu{
	width	:	350px;
}
.notifications .dropdown-menu > li > a {
	white-space	: inherit;
	font-weight	: 300;
	padding		:	10px;
}
.notifications .dropdown-menu > li:not(:last-child){
	border-bottom	:	1px solid #E7E4E0;
}
.notifications .dropdown-menu > li > a:hover{}
.notifications > a {
	padding-left	:	10px!important;
	padding-right	:	10px!important;
}
.notifications span.ntfc{
	font-size	:	8px;
	line-height	:	14px;
	position	:	absolute;
	border-radius	:	50%;
	width		:	14px;
	height		:	14px;
	text-align	:	center;
	top			:	8px;
	right		:	2px;
}

/* ==================================================================
PANEL
================================================================== */
.panel{
	border		:	none;
	box-shadow	:	none;
	margin		:	0px;
}
.grid-line.panel{
	margin-left	:	0px;
	margin-right:	0px;
}
.panel.nomargin{
	margin		:	0;
}
.panel.nomargin + .panel.nomargin{
	margin-top	:	20px;
}

/* ==================================================================
SIMPLE LAYOUT
================================================================== */
.panel-wrap {
	margin		: 0;
	padding		: 0;
}
.panel-wrap > header {
	overflow	:	hidden;
	padding		:	5% 0 5%;
	color		:	#FFFFFF;
}
.panel-wrap > header > h1{
	font-size	:	2.3em;
	font-weight	:	500;
}
.panel-wrap > header > h1 + h2{
	font-size	:	1.2em;
}
.panel-wrap > header + .panel{
	margin		:	-3% auto 0;
	width		:	500px;
	max-width	:	100%;
	background	:	#FFFFFF;
	padding		:	25px;
	box-shadow	: 	0 1px 2px rgba(0, 0, 0, 0.17);
	border		:	none;
}
.panel-wrap.first-login > header + .panel{
	width		:	800px;
}
.panel-wrap .panel header.logo > img{
	display	:	inline-block;
	max-width	:	250px;
	max-height	:	100px;
}

.grid-layout > .grid-line {
	margin-bottom	:	5px;
}
.panel > .inner{
	padding		:	15px;
}
.panel-wrap div.panel[class^="message"]{
	left	:	5%;
	width	:	90%;
}
a.abs-logo{
	position	:	absolute;
	left		:	5%;
	top			:	5%;	
}

/* ==================================================================
PANEL & DIALOG TOOLBAR
================================================================== */
.container  > .panel > header {
	border	:	none;
}
.container  > .panel > header > nav {
    position	: inherit;
    right		: auto;
    top			: auto;
	min-height	:	41px;
}

.panel > form > header > h3,
	.panel:not(.widget):not(.overflow)  > header > h3,
		.dialog > header > h3{
	padding		:	15px 40px; 
	margin		:	0;
	font-weight	:	300;
}
.panel > form > header > nav.toolbar,
	.panel > header > nav.toolbar,
	.dialog > header > nav.toolbar{
	background	:	#ecf0f1;
	padding		:	0px 35px; 
}
.panel > form > header > nav.toolbar .btn,
.panel > header > nav.toolbar .btn,
	.dialog > header > nav.toolbar .btn{
	color	:	inherit;
	padding	: 	10px 5px;
	background	:	none;
}
.panel > form > header > nav.toolbar  .btn > i,
	.panel  > header > nav.toolbar  .btn > i,
	.dialog > header > nav.toolbar .btn > i{
	margin-right	:	5px;
}
.panel > form > header > nav.toolbar::after,
	.dialog > header > nav.toolbar::after,
		.panel > header > nav.toolbar::after{
	width	:	0;
	height	:	0;
	display	:	block;
	content	:	'';
	clear	:	both;
}
.dialog > header > nav.toolbar .btn:hover,
.panel > form > header > nav.toolbar  .btn:hover,
	.panel > form > header > nav.toolbar .dropdown a:hover, 
		.panel > form > header > nav.toolbar .dropdown.open > a,
			.panel > header > nav.toolbar  .btn:hover{
	
	background	:	#bdc3c7;
	color		:	#FFFFFF;
}
.panel > form > .form-body{
	margin		:	25px 40px; 
}
.panel > form > .form-body.no-header{
	margin		:	40px 40px 25px; 
}
.container > .panel > header + .panel-content{
	
}


/* ==================================================================
DOCDETAIL DIALOG
================================================================== */
body.blur {
	overflow	:	hidden;
}
body.blur > section.container > .panel, body.blur > aside {
    filter			: blur(1px);
    overflow		:	hidden;
    pointer-events	: none;
	
}
body.blur::after{
	content		:	'';
	position	:	absolute;
	background	:	rgba(255,255,255,0.7);
	width		:	100%;
	height		:	100%;
	left		:	0;
	top			:	0;
	z-index		:	1100;
}

.doc-details{
	border-top	:	3px solid 	#ECF0F1;
	margin-top	:	40px;
}
.doc-details .grid-line > header{
	margin-bottom	:	40px;
}
.doc-details table.invoice th{ 
	font-weight	:	normal;
}
.dialog.slidalog{
	z-index				:	2700;
	position			:	absolute;
	width				:	50%;
	height				:	100%;
	border				:	none;
	border-top			:	45px solid transparent;
	background			:	transparent;
	top					:	0px;
	left				:	50%;
}
.dialog.slidalog.load{
	
}
.dialog.slidalog.open:not(.load){
	
}
.dialog.slidalog > header{
	z-index			:	20;
	position		:	relative;
}
.dialog.slidalog .dialog-body{
	background			:	#FFFFFF;
	-webkit-box-shadow	: 	-4px 0 4px #ecf0f1;
	-box-shadow			: 	-4px 0 4px #ecf0f1;
	
	position		:	absolute;
	width			:	100%;
	height			:	100%;	
	top				:	0;
	left			:	0;
	border-top		:	41px solid transparent;
	z-index			:	10;
	overflow		:	auto;
	padding			:	20px 40px;
}

.dialog-body > aside {
	padding		:	0px 10px;
	position	:	absolute;
	background	:	#EEF3F7;
	width		:	30%;
	height		:	100%;
	top			:	0;
	right		:	0;
}
.dialog-body > aside ~ .attribute-panel{
	margin-right	:	30%;
}
.dialog-body > aside ~ .panel{
	margin-top	:	15px;
	margin-right	:	31%;	
}
.dialog-body > aside  input[type=text] + button{
	position	:	absolute;
	right		:	1%;
	top			:	0;
}
.dialog-body > aside  .results a{
	padding		:	0px 0px 5px;
}
.dialog-body > aside .attribute-panel{
	padding-bottom	:	0px;
	border		:	none;
}


/* ==================================================================
MAIL
================================================================== */
#inbox{
	position	:	absolute;
	position	:	absolute;
	width		:	100%;
	height		:	100%;
	left		:	0;
	top			:	0;
}
#inbox > .datatable-container{
	border-style:	solid;
	border-color:	transparent;
	border-width:	41px 20px 10px 40px; 
	
	position	:	absolute;
	width		:	100%;
	height		:	100%;
	left		:	0;
	top			:	0;
	
}
#mail-folders > header > nav{
	padding-right	:	20px;
}
#mail-panel > header > nav,
	#mail-panel > header > nav + h3{
	padding-left	:	20px;
}
#mail-panel {
	border-left	:	1px solid #ECF0F1;
}
#mail-panel > .panel{
	margin		:	0 40px 0 20px; 
}
div.rec-to::before,div.rec-cc::before{
	content		:	'TO:';
	position	:	absolute;
	display		:	block;
	left		:	0;
	top			:	0;
}
div.rec-cc::before{
	content		:	'CC:';
}
div.rec-to,div.rec-cc{
	padding-left	:	25px;
	position		:	relative;
}

.composer div.attachment, #mail-attachments .attachment, .attachments-container .attachment{
	color		:	inherit;
	display		:	inline-block;
    line-height	:	22px;
    margin		:	2px 5px 2px 0px;
    padding		: 	1px 20px 1px 5px;
    position	: 	relative;
	background	: 	none repeat scroll 0 0 #ECF0F1;
    border		: 	1px solid #ECF0F1;
}
.composer div.attachment > .fa-times, 
	#mail-attachments .attachment > .fa-times,
		.attachments-container .attachment  > .fa-times{
	color		: #3b3e45;
    display		: block;
    height		: 12px;
    position	: absolute;
    right		: 3px;
    top			: 3px;
    width		: 12px;
}

#mail-panel .spacing{
	padding	:	15px 0px;
}

#inbox td > div {
	padding-left:20px;
}
#inbox td > div > span.date{
	position	:	absolute;
	top			:	0;
	right		:	5px;

}
#inbox td > div > i.fa-paperclip{
	position	:	absolute;
	left		:	-0px;
	top			:	20px;
	cursor		:	pointer;
}
#inbox td > div > i.fa-star, 
	#inbox td > div > i.fa-star-o, 
		#inbox td > div > i.fa-cloud, 
			#inbox td > div > i.fa-eye-slash{
	position	:	absolute;
	left		:	-0px;
	top			:	3px;
	cursor		:	pointer;
}
#inbox td > div > i.fa-star-o:hover{
	color		:	#F6BB42;
}
#inbox td > div > i.fa-star{
	color		:	#F6BB42;
}
#inbox .datatable td , 
	#inbox .datatable td div{
	cursor		:	default;
}
div.failed{
	color	:	#FD685B;
}
/*
span.failed > i.fa::before{
	content: "�";
}
span.read > i.fa::before{
	content: "�";
}
span.sent > i.fa::before{
	content: "";
}*/
/* ==================================================================
MESSAGES
================================================================== */
div[class*='message-'] p{
	border-radius			:	4px;
	-moz-border-radius		:	4px;
	-webkit-border-radius	:	4px;
}
div[class^=message]:not(.panel){
	border			:	1px solid transparent;
    border-radius	:	4px;
    margin-bottom	:	20px;
	padding			:	10px;
}
div[class^=message].panel ~ .panel, 
	div[class^=message].panel  ~ form {
	margin-top	:	0px;
}
div[class^=message].panel{
	position	:	absolute;
	width		:	50%;
	left		:	25%;
	top			:	50px;
	margin		:	0;
	box-shadow	: 	0 0 5px #888;
	z-index		:	5000;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}
div[class^=message].panel > header {
	padding		:	0px;
	margin		:	0px 15px;
	
}
div[class^=message].panel > header > h3{
	 padding: 15px 40px 0 0;
}

div[class^=message].panel > .body {
	padding		:	15px 15px 15px 15px;
}
div[class^=message] > header > .message-close,
	div[class^=message] >  .message-close{
	font-size		:	20pt;
    line-height		:	20pt;
    margin			:	10px 0px 0 0;
    position		:	absolute;
	right			:	0px;
	cursor			:	pointer;
	z-index			:	20;
}
div[class^=message] > header > .message-close:hover,
	div[class^=message] >  .message-close:hover{
	color		:	#222222
}
div[class^=message] > header > .message-close> i:nth-child(1),
	div[class^=message] >  .message-close > i:nth-child(1) {
    margin-right: -4px;
}


div.message-confirm, 
	div.message-confirm > header,
		div.message-warning  .message-close{
    background-color	: #FFFFFF;
    border-color		: #95a5a6;
    color				: #34495e;
}
div.message-warning, div.message-warning > header, div.message-warning  .message-close{
    background-color	: #bdc3c7;
    border-color		: #95a5a6;
    color				: #34495e;
}
div.message-valid, div.message-valid > header, div.message-valid  .message-close{
    background-color	: #dff0d8;
    border-color		: #d6e9c6;
    color				: #3c763d;
}
div.message-error, div.message-error > header, div.message-error  .message-close{
	background-color	: #c0392b;
    border-color		: #c0392b;
    color				: #FFFFFF;
}
div.message-feedback, div.message-feedback > header, div.message-feedback  .message-close{
	background-color	: #dff0d8;
    border-color		: #d6e9c6;
    color				: #3c763d;
}
div.message-feedback  > .message-close{
	margin				:	0 10px 5px 0;
}
div.hspace{
	margin		:	20px;
}
.container > div.message-feedback ~ *:not(.panel){
	margin-top	:	20px;
}


/* ==================================================================
BADGE
================================================================== */
*[class^=badge]{
	display			:	inline-block;
	color			:	#FFF;
	padding			:	1px 10px;
	border-radius	:	10px;
	background-color:	#3BAFDA;
	font-size		:	90%;
}
.badge-yellow{
	background-color	:	#EDC951;
}
.badge-red{
	background-color	:	#EB6841;
}
.badge-blue{
	background-color	:	#00A0B0;
}
/* ==================================================================
BUTTONS
================================================================== */
.btn {
	border-radius	: 0px;
}
.btn-blue {
    background-color: #2980b9;
    border-color	: #2980b9;
    color			: #fff !important;
}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active,.btn-blue.active, .open .dropdown-toggle.btn-blue  {
    background-color: #3498db;
    border-color	: #3498db;
    color			: #fff !important;
}
.btn-blue.disabled, .btn-blue.disabled:hover, .btn-blue.disabled:focus, .btn-blue.disabled:active, .btn-blue.disabled.active, .btn-blue[disabled], .btn-blue[disabled]:hover, .btn-blue[disabled]:focus, .btn-blue[disabled]:active, .btn-blue.active[disabled], fieldset[disabled] .btn-blue, fieldset[disabled] .btn-blue:hover, fieldset[disabled] .btn-blue:focus, fieldset[disabled] .btn-blue:active, fieldset[disabled] .btn-blue.active {
    background-color: #2980b9;
    border-color	: #2980b9;
}

.btn-grey{
	color		:	inherit;
	background	:	#ecf0f1;
}
.btn-grey:hover{
	background	:	#bdc3c7;
}

.btn-cancel{
	background-color: #FFFFFF;
    border			: none;
    color			: inherit;
	text-decoration	:underline;
	
}
.btn-cancel:hover{
	background	:	#ecf0f1;
	text-decoration	:underline
}

.btn-white{
	color		:	#222;
	background	:	#FFFFFF;
}
.btn-white:hover{
	background	:	#E8E8E8;
}


/** LOGIN FORM **/
.btn-facebook {
	background	:	rgba(59, 89, 152, 0.9);
	border		:	0;
	color		:	#FFFFFF;
	font-weight	:	light;
	padding		: 	5px 20px!imporatnt;
}
.btn-facebook:hover {
	background	:	#3B5998;
}
.btn-facebook:active {
	background	:	rgba(59, 89, 152, 0.9);
}
.btn-warning {
    background-color	: #edc951;
    border-color		: #edc951;
    color				: #fff !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
    background-color	: #d5b549;
    border-color		: #d5b549;
    color				: #fff !important;
}

.grid-line .chosen-container{
	 width		:	100%!important;
}

.chosen-container + button {
	position	:	absolute;
	right		:	1%;
	margin-right	:	1px;
	top			:	0;
	padding		: 	2px 10px;
	height		:	26px;
	transform			:	translateX(100%);
	-webkit-transform	:	translateX(100%);
}
div.hr {
	position	:	relative;
	margin		:	25px 10%;
}
div.hr:before{
	position	:	absolute;
	content		:	'';
	background	:	#cfdadd;
	left		:	0;
	top			:	50%;
	height		:	1px;
	width		:	100%;
}
div.hr > span{
	position	:	relative;
	display		:	inline-block;
	padding		:	0px 10px;
	background	:	#FFFFFF;
	color		:	#cfdadd;
}



/* ==================================================================
DATATABLE
================================================================== */
.panel > form > .datatable-container{
	border-left			:	30px solid transparent;
	border-right		:	30px solid transparent;
	border-bottom		:	20px solid transparent;
}
header + .datatable-container {
	border-top: 50px solid transparent;
}
header.with-toolbar + .datatable-container {
	border-top: 100px solid transparent;
}
header.no-toolbar{
	margin-top	:	25px;
}
.datatable > thead > tr > th {
	font				:	inherit;
	text-transform		:	uppercase;
}
.datatable-container > footer {
    background-color	:	transparent;
	padding				:	10px 10px 0 10px;
}


.datatable > tbody > tr.selected + tr.actionrow > td,
	.datatable > tbody > tr.opened + .subrow + tr.actionrow > td,
		.datatable > tbody > tr.selected:hover td,
			.datatable > tbody > tr.selected td,
				.datatable > tbody > tr.selected + tr.actionrow td,
					.datatable > tbody > tr.selected + tr.actionrow:hover td{
	background-color: #ECF0F1;

}



.datatable > tbody > tr:hover td,
		.datatable > tbody > tr.opened td{
	 background-color: #ECF0F1;
}
.datatable > tbody > tr.subrow td{
	background-color: #ECF0F1;
}
.datatable h4 {
	margin	:	10px 0;
	padding	:	0;
}
.datatable > tbody > tr.subrow i.fa {
	display		:	inline-block;
	width		:	14px;
	text-align	:	center;
}
.datatable > tbody > tr.subrow .contact {
	display	:	inline-block;
	width	:	49%;
}
.datatable > tbody > tr.subrow .contact a{
	color	:	inherit;
}
.datatable > tbody > tr.subrow .contact a.edit{
	display	:	none;
}
.datatable > tbody > tr.subrow .contact:hover a.edit{
	display	:	inline-block;
}
.invoice > tfoot > tr:first-child td{
	border-top-width	:	2px;
}
.invoice > tfoot > tr >  td{
	padding	:	10px;
}
.nofilter .datatable-body {
	border-top-width: 47px;
}
.invoice > tfoot > tr:last-child >  td{
	font-weight	:	600;
}
th.acenter{
	text-align	:	center!important;
}

.datatable-container .datatable-head tr.datatable-filter-row td:last-child{
	padding-right	:	10px;
}
.datatable > tbody > tr.expired {
	color	:	#FD685B;
}






.datatable > tbody > tr.wactionrow.selected td{
	border-bottom	:	0px;
} 
.datatable > tbody > tr:not(.selected) + tr.actionrow > td,
	.datatable > tbody > tr:not(.opened) + .subrow + tr.actionrow > td{
	display		:	none;
}



.datatable > tbody > tr.selected + tr.actionrow > td,
	.datatable > tbody > tr.opened + .subrow + tr.actionrow > td{

	padding		:	0px 8px 4px 8px!important;
	font-size	:	92%;
	display		:	table-cell;
	border-top	:	0px;
}
.datatable > tbody > tr.opened + .subrow + tr.actionrow > td{
	padding-left	:	30px!important;
}
.datatable > tbody > tr.actionrow > td > a,
	.datatable > tbody > tr.actionrow > td > button{
	display		:	inline-block;
	font-size	:	92%;
	color		:	inherit;
	padding		:	0 10px 0 0;
	border		:	none;
	background	:	none;
}
.datatable > tbody > tr.actionrow > td > a:not(:last-child):after{
	content	:	'|';
	display	:	inline-block;
	padding	:	0 0 0 10px;
}


/* ==================================================================
DASHBOARD
================================================================== */
.container > .dashboard {
	padding	:	35px 15px 25px 15px;
}
.dashboard > header{
	vertical-align	:	middle;
	margin-bottom	:	20px;
}
.dashboard > header > h1{
	margin			:	0 1%;
	text-transform	:	none;
}

/* ==WIDGETS== */
.widget {
	background	:	#ecf0f1;
	padding		:	10px 20px;	
}
.widget.wmargin{
	margin-bottom	:	25px;
}
.widget > strong.countup{
	font-size	:	250%;
	font-weight	:	300;
	display		:	block;
}
.widget > span.label{
	display		:	block;
	color		:	#a5acb4;
}
.widget > header > h3{
	padding-left	:	0px;
}
.widget.panel > .body{
	padding	:	0;
}

.b-l-blue {
	border-left	:	2px solid #3498db;
}
.b-l-red {
	border-left	:	2px solid #e74c3c;
}
.red{
	color	:	#e74c3c;
}
.b-l-orange {
	border-left	:	2px solid #d35400;
}
.orange{
	color	:	#d35400;
}
.b-l-green {
	border-left	:	2px solid #27ae60;
}
.green{
	color	:	#27ae60;
}
.b-l-yellow {
	border-left	:	2px solid #f1c40f;
}


.container > .dashboard > .grid-layout > .grid-line + .grid-line{
	margin-top	:	25px;
}
.dasboard article > p {
	margin	:	0 0 20px 0;
}



/* ==TAB WIDGET== */
div.tabbed
{
	overflow	:	hidden;
	position	:	relative;
}
div.tabbed > input[type=radio]{
	position	:	absolute;
	opacity		:	0;
	left		:	-5000;
}
div.tabbed > .tabs{
	overflow	:	hidden;
}
div.tabbed > .tabs > label{
	display			:	inline-block;
	padding			:	10px 0px;
	border-bottom	:	2px solid transparent;
	margin			:	0px 10px 0px 0px;
	font-size		: 	14px;
	color			:	inherit;
	cursor			:	pointer;
	max-width		:	auto;	
}
div.tabbed > .tab-content{
	visibility		:	hidden;
	opacity			:	0;
	
	padding			:	25px 0;
}

div.tabbed > input[type=radio]:nth-child(1):checked ~  .tabs > label:nth-child(1),
	div.tabbed > input[type=radio]:nth-child(2):checked ~  .tabs > label:nth-child(2),
		div.tabbed > input[type=radio]:nth-child(3):checked ~  .tabs > label:nth-child(3){
	//border-bottom	:	2px solid #EB6841;
}

div.tabbed > input[type=radio]:nth-child(1):checked ~ section.tab-content:nth-of-type(1),
	div.tabbed > input[type=radio]:nth-child(2):checked ~ section.tab-content:nth-of-type(2),
		div.tabbed > input[type=radio]:nth-child(3):checked ~ section.tab-content:nth-of-type(3){
	visibility	:	visible;
	opacity	:	1;
}
div.tabbed > input[type=radio]:nth-child(1):not(:checked) ~ section.tab-content:nth-of-type(1),
	div.tabbed > input[type=radio]:nth-child(2):not(:checked) ~ section.tab-content:nth-of-type(2),
		div.tabbed > input[type=radio]:nth-child(3):not(:checked) ~ section.tab-content:nth-of-type(3){
	position	:	absolute;
	width		:	100%;
	opacity		:	0;
	top			:	0;
	pointer-events	:	none;	
}


/* ==================================================================
TIMELINE
================================================================== */
section.timeline{
	//margin	: 0 15px;
}
form + section.timeline,
	.panel + section.timeline{
	margin-top	:	20px;
}
section.timeline > .timeline-item {
	position	:	relative;
	padding-bottom	:	25px;
}
section.timeline > .timeline-item:not(:last-child):after{
	content		:	'';
	width		:	3px;
	height		:	100%;
	position	:	absolute;
	left		:	23px;
	top			:	0px;
	z-index		:	1;
}
section.timeline > .timeline-item > i.fa{
	background		: none repeat scroll 0 0 #FFFFFF;
    border-radius	: 15px;
    font-size		: 20px;
    padding			: 10px;
    text-align		: center;
    width			: 50px;
	position		:	absolute;
	border			:	3px solid #EFEFEF;
	z-index			:	10;
}
section.timeline > .timeline-item > .panel {
	padding			:	20px;
	margin-left		:	70px;
	margin-right	:	0px;
	box-shadow		: 	0 0px 1px #34495E;

}

section.timeline > .timeline-item > .panel p.footer{
	margin		:	0px;
	color		:	#a5acb4;
	font-size	:	90%;
}
section.timeline > .timeline-item > .panel p:first-child{
	margin-top	:	0px;
}
section.timeline > .timeline-item > .panel:before,	
	section.timeline > .timeline-item > .panel:after{
	border-bottom	:  15px solid transparent;
    border-right	:  15px solid transparent;
    border-top		:  15px solid #FFFFFF;
    top				:  10px;
	left			:  -2px;
	content			:  "";
  	height			:	10px;
	bottom			:	10px;
    position: absolute;
  	-ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);
	z-index	:	10;	
}
section.timeline > .timeline-item > .panel:after{
    border-top		: 15px solid rgba(52, 73, 94,0.5);
	z-index			: 9;	
	left			: -3px;
}
/** CGART **/
.easychart {
	position	:	relative;
	display		:	inline-block;
}
.easychart > span {
 	color: #41586e;
    font-size: 20px;
    font-weight: bold;
    margin-top: 60px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
}
/* ==================================================================
PROFILE PAGE
================================================================*/
section.card{
	padding			:	10px;
	background		:	#ECF0F1;
}
section.card.profile{
	margin-bottom	:	40px;
}
section.card.contact{
	margin-bottom	:	20px;
}
section.card > h3{
	padding-left	:	0px;
}
section.card > h3 + p{
	margin-top	:	0px;
}
section.card > .icon{
	background		: 	#FFFFFF none repeat scroll 0 0;
    float			:	left;
	border-radius	: 	100%;
    font-size		: 	20px;
    padding			: 	10px;
    z-index			:   10;
}
section.card > .icon ~ * {
	margin-left		:	65px;
}



/* ==================================================================
SUBSCRIPTIONS
================================================================== */

article.subscription{
	padding			:	25px 0;
	margin			:	25px 0;
	background		:	#ECF0F1;
}
article.subscription  > header{
	margin-bottom	:	25px;
}
article.subscription  > header > h1{
	font-size	:	24px;
	margin		:	0px;
}
article.subscription > header > .price{
	font-size		:	16px;
}
article.subscription > footer{
	margin-top		:	25px;
}

/* ==================================================================
FORMS
================================================================== */
.input-field  + .input-field {
	margin-top	:	1.5rem;	
}
.input-field > label:first-child{
	font-weight		:	normal;
	display			:	block;
	margin-bottom	:	0.5rem;
}
.input-field > label + span{
	display		:	inline-block;
	line-height	:	2.5rem;
}

.input-field > button + span.lbl,
	.input-field > input.number + span.lbl,
		.input-field > input[type=number] + span.lbl,
			.input-field > select.inline + span.lbl{
	display	:	inline-block;
	line-height	:	2.5rem;
}
.input-field > select.inline{
	width		:	auto!important;
	min-width	:	60px;	
}
.input-field > .input-tag-container > input[type="text"],
.input-field > .input-tag-container, 
	.input-field > div.chosen-container > a.chosen-single,
		.input-field  > select:not(.chosen), 
			.input-field  > input[type=text], 
				.input-field  > input[type=number],
					.input-field  > input[type=file],
						.input-field  > input[type=password],
							.input-field > input[type=file] ~ span,
								.input-field  > textarea{
	font-size	: 	inherit;
	font-family	:	inherit;
	color		:	inherit;
	box-shadow: none;
	border-width: medium medium 2px;
	border-style: none none solid;
	border-color: transparent transparent #ECF0F1;
	background-color: #ecf0f1;
	outline		: medium none;
    padding		: 0;
   	height		: 2.5rem;
	padding-left:	5px;
 	width		:	100%;
	transition	:   all 0.3s ease 0s;
	display	 	:	block;
	font-weight	:	300;
}

/* ==TAG CONTAINER== */
.input-field > .input-tag-container {
	min-height			: 2.5rem;
	height				: auto!important;
}
.input-field > .input-tag-container > input[type="text"] {
    border				: 0 none;
    display				: inline-block;
    float				: left;
    width				: 150px !important;
}
.input-field > .input-tag-container > a {
	border		:	none;
	background	:	#FFFFFF;
	height		: 	2rem;
	line-height	:	2rem;
	margin		:	0.2rem;
}

/* ==NUMBER FIELD== */
input[name=period],input[type=number],input[type=color],input.number{
	width	:	60px!important;
}
input[type=number].bigger,input.number.bigger{
	width	:	100px!important;
}
.input-field > input.number,
.input-field > input[type=number]{
	-moz-appearance	:	textfield;
	display			:	inline-block;
}
.input-field > input[type=number]:focus,
  .input-field > input[type=number]:hover {
    -moz-appearance:number-input;
  }
.input-field > input[type=number]::-webkit-inner-spin-button,
  .input-field > input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
.input-field > input[type=number]:focus::-webkit-inner-spin-button,
	.input-field > input[type=number]:focus::-webkit-outer-spin-button,
  		.input-field > input[type=number]:hover::-webkit-inner-spin-button,
  			.input-field > input[type=number]:hover::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0 2px 0 0 ;
}


.input-field  > textarea{
	padding-top			:	0.5rem;
}
.input-field  > textarea.double{
	height				: 5rem;
}
.input-field  > textarea.active{
	height				: 5rem;
}
.input-field  > textarea.double.openonfocus.active{
	height				:	200px;
}


/* == CHOSEN CONTAINER == */
.input-field >  div.chosen-container {
	background-color	:  #ecf0f1;
	border				:	none;
	box-shadow			:	none;
	height				:	auto;
	line-height			:	auto!important;
	padding				:	0;
	display				:	block;
}
.input-field .chosen-container-single .chosen-single span {
	line-height		: 2.5rem;
}
.input-field .chosen-container-single .chosen-single div{
	width	: 22px;
}
.input-field .chosen-container-single .chosen-single div b {
	background	:	#ecf0f1 url(../img/icons/icon-down.png) no-repeat right center;
	width: 22px;
}

/* == SELECT BOX == */
.input-field  > select:not(.chosen) {	
	height		: 	2.4rem;
	padding		:	0px 25px 0px 5px;
    display		: 	inline-block;
    border		:	none;
    outline		:	none;
    -webkit-appearance	:none;
    -moz-appearance		:none;
    appearance			:none;
    cursor				:pointer;
	background			:	#ecf0f1 url(../img/icons/icon-down.png) no-repeat right center;
	vertical-align: top;
}
.input-field  > select::-ms-expand {
    display: none;
}
.input-field  > select:not(.chosen):focus{
	background-image	:	 url(../img/icons/icon-up.png);
}
/*** FILE ***/
.input-field > input[type=file]{
	opacity		:	0;
	position	:	absolute;
}
.input-field > input[type=file] + label{
	display		:	inherit;
}
.input-field > input[type=file] ~ span{
	display			:	block;
	overflow		:	hidden;
	line-height		:	2.5rem;
}
.input-field > input[type=file] ~ span::before{
	float			:	right;
	content			:	'browse';
    height			:	2.2rem;
    line-height		:	2.2rem;
	padding			:   0 2rem;
	margin			:	0.15rem;
	position		:	relative;
	
    text-transform	: 	uppercase;
    vertical-align	: 	middle;
	color			:	#FFFFFF;
	
	box-shadow		:	0 5px 11px 0 rgba(0,0,0,0.18);
	cursor			:	pointer;
	pointer-events	:	none;
}
.input-field > input[type=file] ~ span::before:hover{
	box-shadow		:	0 5px 16px 0 rgba(0,0,0,0.18);

}

/* == CHECKBOX == */
.input-field > [type="checkbox"], 
		.input-field > [type="radio"] {
    left		: -9999px;
    opacity		: 0;
    position	: absolute;
}
.input-field > [type="checkbox"] + label::before,
	.input-field > [type="checkbox"] + label::after{
    border			: 2px solid #5a5a5a;
    border-radius	: 1px;
    content			: "";
    height			: 18px;
    left			: 0;
    margin-top		: 2px;
    position		: absolute;
    top				: 0;
    transition		: all 0.2s ease 0s;
	-webkit-transition : all 0.2s ease 0s;
    width			: 18px;
    z-index			: 0;
}
.input-field > [type="checkbox"] + label,
	.input-field > [type="radio"] + label {
    -moz-user-select:	none;
    cursor			:	pointer;
    display			:	block;
    line-height		:	22px;
    padding-left	:	35px;
    position		:	relative;
	min-height			: 	2.0rem;	
}

.input-field > [type="checkbox"]:checked + label::after {
    backface-visibility	: hidden;
    border-style		: solid;
    border-width		: 3px;
    height				: 24px;
    left				: -3px;
    top					: -10px;
    transform					: rotate(40deg);
	-webkit-transform			: rotate(40deg);
    transform-origin			: 100% 100% 0;
	-webkit-transform-origin	: 100% 100% 0;
	
    width				: 12px;
}
/* == RADIO == */
.input-field > [type="radio"]:checked + label::before{
    border				: 2px solid transparent;
}
.input-field > [type="radio"] + label::before, 
	.input-field > [type="radio"] + label::after{
    	border-radius	: 50%;
}
.input-field > [type="radio"] + label::before, 
	.input-field > [type="radio"] + label::after{
    content		: "";
    height		: 16px;
    left		: 0;
    margin		: 3px 0px 0px 1px;
    position	: absolute;
    top			: 0;
    transition	: all 0.28s ease 0s;
    width		: 16px;
    z-index		: 0;
}
.input-field > [type="radio"]:checked + label::after{
    transform			: scale(1.02);
	-webkit-transform	:	scale(1.02);
    background-color: #f48887;
    z-index			: 0;
}
.input-field > [type="radio"]:not(:checked) + label::after{
    transform			:   scale(0);
	-webkit-transform	:	scale(0);
    z-index				:   -1;
}
.input-field > [type="radio"]:not(:checked) + label::before, 
	.input-field > [type="radio"]:not(:checked) + label::after{
    border			: 2px solid #5A5A5A;
}


.input-field  > select:not(.chosen).active {
	 -webkit-box-shadow		: 0 -2px 0 #5A5A5A inset;
     -moz-box-shadow		: 0 -2px 0 #5A5A5A inset;
     box-shadow				: 0 -2px 0 #5A5A5A inset;
}
.input-field > select.active + .chosen-container-single .chosen-single,
.input-field > input[type=text].active, 
	.input-field > input[type=text]:focus,
		.input-field > input[type=text]:active,
			.input-field > input[type=number].active, 
				.input-field > input[type=number]:focus,
					.input-field > input[type=number]:active,
						.input-field > input[type=file].active + label + span, 
							.input-field > input[type=file]:focus + label + span,
								.input-field > input[type=file]:active + label + span,
									.input-field > textarea.active, 
										.input-field > textarea:focus,
											.input-field > textarea:active{
	border-bottom-color	:	#34495e;
}
.input-field > input[type=number].error, 
	.input-field > input[type=text].error, 
			.input-field > input[type=file].error + label + span, 
						.input-field > textarea.error{
	border-bottom-color	:	#c0392b;
}


.input-field > button,
	.input-field > input[type=button],
		.input-field > input[type=submit]{
	height		: 	2.4rem;
 	overflow	:	hidden;
	-webkit-appearance: none;
	position: relative;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	letter-spacing: 1px;
	user-select: none;
	transition			: all 0.2s ease;
	-webkit-transition	: all 0.2s ease;
}

.input-field > button.togglefield{
 	position	:	absolute!important;
	z-index		:	100;
	right		:	0;
}

.input-field > button:not([style*='none'])  ~ .chosen-container{
	border-right	:	40px solid #FFFFFF;
}

.ui-autocomplete.ui-menu{
	border		: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow	: 0 6px 12px rgba(0, 0, 0, 0.176);
  	
}
.ui-autocomplete.ui-menu > li{
    font-weight: inherit;
    padding	: 5px 10px;
}
/* == WYSIWYG == */
.rte-zone{
	background	:	#ECF0F1;
}
.rte-zone > rte-toolbar{
	border		:	none;
}








textarea.thin {
	height	:	60px;
}
.ui-datepicker{
	z-index	:	2800!important;
}
section.cms_dialog {
	z-index	:	1600;
}

a.attachment{
	color	:	inherit;	
}
.ga + span{
	line-height	:	26px;
}
.dialog-body .grid-line {
	margin-bottom	:	5px;
}
.grid-line > .g12 .chosen-container-multi{
	width	:	100%!important;
}

input.error, textarea.error{
	-webkit-box-shadow	: 0px 0px 2px 1px #D24858;
    -moz-box-shadow		: 0px 0px 2px 1px #D24858;
    box-shadow			: 0px 0px 2px 1px #D24858;
    
    -webkit-transition	: all 0.2s;
    -o-transition		: all 0.2s;
    -moz-transition		: all 0.2s;
    -ms-transition		: all 0.2s;
    -kthtml-transition	: all 0.2s;
	
    transition: all 1s linear;
}

input[type=text] + button{
	position	:	absolute;
	right		:	0;
	top			:	0;
	height		:	100%;
}

.attribute-panel > p.info{
	margin-left	:	1%;
	margin-right:	1%;
	font-style	:	italic;
}

.attribute-panel .ga > label.radio{
	line-height	:	26px;
	 padding-left: 0px;
}

/* ==================================================================
SLIDER THEMES
================================================================== */
section.slider > article.theme-color > img{
	max-width	:	90%;
	margin		:	0 5%;
}
section.theme.slider a.prev {
    left: 2%!important;
}
section.theme.slider a.next {
    right: 2%!important;
}

/* ==================================================================
AUTOGROWING SEARCH
================================================================== */
form.autogrow{
	display		:	inline-block;
	position	:	relative;
}
form.autogrow input{
	max-width			:	0;
	opacity				:	0;
	-webkit-transition	: all 0.5s;
    -o-transition		: all 0.5s;
    -moz-transition		: all 0.5s;
    -ms-transition		: all 0.5s;
    -kthtml-transition	: all 0.5s;
}
form.autogrow input + button{
	display	:	none;
}
form.autogrow input + button + label{
	display		:	inline-block;
}
form.autogrow input + button + label,
	form.autogrow input + button{
	margin		:	0!important;
	background	:	transparent;
	border		:	0;
	position	:	absolute;
	top			:	0;
	right		:	0;
	line-height	:   inherit;
	color		:	#FFFFFF;
	padding		: 	2px 8px;
		max-width: none;
}
form.autogrow input:focus + button{
	display		:	inline-block;
	color	:	inherit;
}
form.autogrow input:focus + button + label{
	display		:	none;
	color	:	inherit;
}
form.autogrow input + button:active,
	form.autogrow input + button + label:active{
	box-shadow	:	none;
}
form.autogrow input:focus{
	max-width			:	250px;
	opacity				:	1;
}



/*** LINKED DOCS ***/
label.related{
	background	:	none repeat scroll 0 0 #efefef;
    border		:	1px solid #dee5e7;
    line-height	:	22px;
    margin		:	2px 0px 2px 5px;
    padding		:	0 20px 0 5px;
    position	:	relative;
	color		:	inherit;
	float		:	left;
}
label.related > span {
	line-height	:	22px;
}
label.related > i {
	color		:	#3b3e45;
    display		:	block;
    font-weight	:	normal;
    height		:	12px;
    position	:	absolute;
    right		:	3px;
    top			:	3px;
    width		:	12px;
}
/** REPORTSTABLE **/
table.reportstable{
	border-spacing	: 2px;
    border-collapse	: separate;
	min-width		:	50%;
}
table.reportstable th{
	padding	:	5px 0;
	text-align	:	left;
}
table.reportstable tbody td:nth-child(3){
	background-color	:	#EFEFEF;
}
		


/* ==================================================================
ARTICLES & REGULAR CONTENT
================================================================== */
article h1{

}
article h2 {
	 font-size	: 24px;
}
article h3{
    font-weight	: 400;
    margin		: 0 0 20px;
    padding		: 0;
}
article h4 {
    font-size	: 18px;
    font-weight	: 300;
    margin		: 0 0 20px;
}
article h5 {
	text-transform	:	none;
    font-size	: 16px;
    font-weight	: 300;
    margin		: 0 0 20px;
}
/* ==================================================================
SUPPORT PAGES
================================================================== */
input[name=showsupport] ~ header nav.right label[for=showsupport]{
	padding-left:	15px;
}
input[name=showsupport] ~ .container > section.support{
	width				:	50%;
	left				:	50%;
	height				:	100%;
	position			: 	fixed;
	z-index				: 	1000;
	top					: 	0;
	background-color	:	#FFFFFF;
}
input[name=showsupport]:not(:checked) ~ .container > section.support{
   opacity: 0;
   -webkit-animation-name: fadeOutRightBig;
          animation-name: fadeOutRightBig;
}
input[name=showsupport]:checked ~ .container > section.support{
	
	opacity			:	1;
	 -webkit-animation-name: fadeInRightBig;
          animation-name: fadeInRightBig;
}

input[name=showsupport]:checked ~ aside,
	input[name=showsupport]:checked ~ .container > .panel{
	  	filter			: blur(1px);
    	overflow		:	hidden;
    	pointer-events	: none;
}

.container > section.support > label{
	font-size		:	20pt;
    line-height		:	20pt;
    position		:	absolute;
	right			:	60px;
	cursor			:	pointer;
	z-index			:	20;
	top				:	60px;

}

.container > section.support > label:hover{
	color		:	#FD685B;
}
.container > section.support > .inner {

	background			:	#FFFFFF;
	-webkit-box-shadow	: 	-4px 0 4px #ecf0f1;
	-box-shadow			: 	-4px 0 4px #ecf0f1;
	
	position		:	absolute;
	width			:	100%;
	height			:	100%;	
	top				:	0;
	left			:	0;
	border-top		:	41px solid transparent;
	z-index			:	10;
	overflow		:	auto;
	padding			:	20px 40px;
}

.container > section.support > label > i:nth-child(1) {
    margin-right: -4px;
}

.support article > header {
    border-bottom: 1px solid #edf1f2;
}
.support article > header > h3{
    font-size	: 18px;
    margin		: 0;
    padding		: 5px 10px 15px 10px;
}
.support article h3 {
	fonnt-size	:	18px;
	margin		:	0px 0px 20px;
}
.support article > .article-content {
	 padding	:	20px;
}
.support article h1, .support article h2, .support article h3, .support article h4{
	padding		:	0px;
}

/* ==================================================================
SUPPORT MOD
================================================================== */
div.panel.overflow{
	height	:	100%;
	position	:	relative;
}
div.panel.overflow > header{
	
}
div.panel.overflow > .body{
	height	:	100%;
	width	:	100%;
	border-top	:	50px solid transparent;
	position	:	absolute;
	top			:	0;
	left		:	0;
	overflow-y	:	auto;
}

a.support-category{
	color		:	inherit;
	font-size	:	15px;
	display		:	block;
	cursor		:	pointer;
}
a.support-category + div.sub{
	margin:	0px 0 10px 10px;	
}
a.support-article{
display		:	block;	
}


article pre{
    background-color	: #292b36;
    border-radius		: 6px;
	border				: 1px solid rgba(0, 0, 0, 0.15);
    color				: #ffffff;
    margin				: 10px 0 20px;
    padding				: 10px;
    position			: relative;
}
article pre code {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    white-space: pre;
    word-wrap: normal;
}
article pre.light{
	background-color: #f5f5f5;
	color	:	inherit;
}

article table.datatable{
	margin-bottom		:	20px;
}
article table.datatable thead tr th{
	background-color	: #f5f5f5;
    border				: 1px solid #e0e0e0;
    font-family			: "Source Sans Pro",sans-serif;
    font-weight			: 700;
    padding				: 4px 8px;
    text-align			: left;
	
}
article table.datatable tbody tr td{
	border: 1px solid #e0e0e0;
    padding: 2px 8px;
    vertical-align: top;
}
/* ==================================================================
BOOTSTRAPPED
================================================================== */
.d-none{
	display : none;
}
/* ==================================================================
PROGRESSBAR
================================================================== */
.container .progress-bar {
	height			: 1px;
	background		: transparent;
	border-bottom	: 1px dashed #ccc;
	position		: relative;
	margin			: 80px 150px 30px;
	overflow		: inherit!important;
}

/*.container .progress-bar {
	height			: 1px;
	background		: transparent;
	border-bottom	: 1px dashed #ccc;
	position		: relative;
	margin			: 80px 150px 30px;
	overflow		: inherit!important;
}
.progress-bar >	div:first-child{
	text-align	:	center;
}
.progress-bar >	div:first-child{
	text-align	:	left;
}
.progress-bar >	div:last-child{
	text-align	:	right;
}
.progress-bar >	div > i{
	display		:	inline-block;
	height		: 	20px;
	width		: 	20px;
	background	: 	#ccc;
	position	:	relative;
	top			:	-9px;
	border		: 	6px solid #fff;
	text-align	: 	center;
	border-radius		: 50%;
	
	box-shadow			: 0 1px 2px rgba(0, 0, 0, 0.17);
	-moz-box-shadow		: 0 1px 2px rgba(0, 0, 0, 0.17);
	-o-box-shadow		: 0 1px 2px rgba(0, 0, 0, 0.17);
	-webkit-box-shadow	: 0 1px 2px rgba(0, 0, 0, 0.17);
	
}
.progress-bar > div.active > i,
	.progress-bar > div > i:hover{
	background	: #4BC2F0;
}
.progress-bar > div.valid > i{
	background	:	#97C94C;
}

.progress-bar >	div > i + .tooltip{
	background		: 	#4BC2F0;
	padding			: 	12px 12px;
	display			: 	inline-block;
	color			: 	#fff;
	border-radius	: 	5px;
	position		: 	absolute;
	transform		:	translateX(-50%) translateY(-150%);
	margin-left		:	-10px;
	transition		:	top 0.3s,opacity 0.3s;
	opacity			:	0;
	top				:	20px;
	white-space		:	nowrap;
}
.progress-bar >	div > i + .tooltip:after{
	width			: 10px; 
	height			: 5px; 
	border-left		: 5px solid transparent;
	border-right	: 5px solid transparent; 
	border-top		: 5px solid #4BC2F0; 
	content			: "";
	position		: absolute;
	left			: 50%;
	bottom			: 0;
	margin-left		: -5px;
	margin-bottom	: -4px
}

.progress-bar >	div.active > i + .tooltip{
	opacity			:	1;
	top				:	0;
}
.progress-bar >	div:not(.active) > i:hover + .tooltip{
	opacity			:	1;
	top				:	0;
}

.progress-bar > div.valid > i + .tooltip{
	background		: 	#97C94C;
	
}
.progress-bar > div.valid > i + .tooltip:after{
	border-top		: 5px solid #97C94C;
}
*/
/* ==================================================================
MOBILE RESPONSIVENESS
================================================================== */
.mobileshow{
	display	:	none;
}
body > input[name="togglenav"] {
    left: -5000px;
    opacity: 0;
    position: absolute;
}
body >  label[for=togglenav]{
		position		:	absolute;
		z-index			:	150;
		left			:	5px;
		top				:	7px;
		margin-right	:	15px;
		color			:	#FFFFFF;
		text-align	:	center;
		font-size	:	20px;
		cursor		:	pointer;
		padding					:	0px 5px;
		-webkit-border-radius	: 	5px;
		-moz-border-radius		: 	5px;
		border-radius			: 	5px;
		border					:	1px solid #FFFFFF;
		z-index	:	1501;
}

@media screen and (max-width: 1024px) {
	.mobileshow{
		display	:	inherit;
	}
	a.btn.mobileshow{
		display	:	inline-block;
	}
	.mobilehide{
		display	:	none!important;
	}
	input[name="toggleaside"] ~ header nav.left{
		width	:	auto;
	}
	
	body > header > nav.left{
		margin-left	:	25px;
	}
	body > aside {
		position			:	relative;
    	width				: 	auto;
		display				:	block;
		padding-top			:	45px;
		height				:	auto;
	}
	body > aside  > nav{
		background-color 	: 	#FFFFFF;
		display				:	block;
		max-height			: 	0;
    	transition			:	max-height 0.15s ease-out;
		overflow			:	hidden;
		border				:	0;
		margin				:	0;
		z-index				:	100;
		position			:	relative;
	}
	body >  input[name=togglenav]:checked ~ aside > nav{
		 max-height		: 1500px;
   		 transition		: max-height 0.25s ease-in;
	}

		
	body > header ~ .container{
		border-top		:	0px;
		padding			:	0px 0px 0px!important;
		border-top		:	45px solid transparent;
		overflow-X		:	hidden!important;
		width			:	100%;
	}
	
	body > header ~ .container > .panel,
		body > header ~ .container > form > .panel{
		margin	:	0px;
	}
	.container > .panel > .g6,
		.form-body > .grid-line > .g6,
			.form-body > .grid-line > .g7,
				.form-body > .grid-line > .g5,
		 .container > form > .panel > .g6{
		width	:	100%;
	}
	.form-body.innermargin > .grid-line > .g6,
		.form-body.innermargin >  .grid-line > .g7,
				.form-body.innermargin > .grid-line > .g5{
		padding	:	0%!important;
	}
	
	/** DIALOG SIDE **/
	.dialog.slidalog{
		width				:	90%;
		left				:	10%;
	}
	
	
	/* === SIMPLE VIEW ==== */
	a.abs-logo{
		top			:	1%;
		left		:	50%;
		transform	:	translateX(-50%);
		-webkit-transform	:	translateX(-50%);
	}
	a.abs-logo > img{
		height	:	14px;
	}
	.panel-wrap > header > h1{
		font-size	:	1.5em;
		font-weight	:	500;
	}
	.panel-wrap > header > h1 + h2{
		font-size	:	1.2em;
	}
	
	
	
	/** VIEW DOCUMENT 
	.dashboard > .g7,.dashboard > .g5{
		width	:	100%;
		height	:	auto;
		padding	:	0!important;
		width	:	100%;
	}
	.dashboard > .g7 > .panel {
		margin	:	0px;
		padding	:   5px;
	}
	.dashboard > .g7  .A4 .attribute-panel:nth-child(2){
		display: -webkit-box;
	    display: -moz-box;
	    display: box;
		 -webkit-box-orient: vertical;
	    -moz-box-orient: vertical;
	    box-orient: vertical;
		width	:	100%;
	}
	.dashboard > .g7  .A4 .attribute-panel:nth-child(2) > .g6{
		width	:	auto;
		display	:	block;
		float:		none;
	}
	.dashboard > .g7  .A4 .attribute-panel:nth-child(2) > .g6:nth-child(1){
		-webkit-box-ordinal-group: 2;
   	 	-moz-box-ordinal-group: 2;
   	 	box-ordinal-group: 2;
	}
	.dashboard > .g7  .A4 .attribute-panel:nth-child(2) > .g6:nth-child(2){
		-webkit-box-ordinal-group: 1;
   	 	-moz-box-ordinal-group: 1;
   	 	box-ordinal-group: 1;
		margin-bottom	:	10px;
		width	: 100%;
	}
	.dashboard > .g7  .A4 .attribute-panel:nth-child(2) > .g6 .aright{
		text-align	:	left!important;
		white-space	:	nowrap;
	}
	
	**/
	table.invoice thead th:nth-child(4),
		table.invoice tbody td:nth-child(3),
			table.invoice tfoot td:nth-child(3){
		display	:	none;
	}
	/*
	section.panel.grid-layout .form-nav ~ .g4{
		width	:	100%;
	}
	section.panel.grid-layout .form-nav ~ .g4  button[name=createrelation] {
		position	:	absolute;
		transform	: 	none;
		right		:	0;
		top			:	0;
	}
	.grid-line .chosen-container{
		border-right	:	24px solid #FFFFFF;
	}	**/
	/** MAIL OVERVIEW**/
	section.container > #mail-folders,
		section.container > #mail-panel{
		width		:	100%;
		padding		:	0 !important;
		width		:	100%;
		position	:	absolute;
		left		:	0;
		top			:	0;
			
		-webkit-transition	: 	all 0.5s;
	  	-moz-transition		: 	all 0.5s;
	  	-ms-transition		: 	all 0.5s;
	  	-o-transition		: 	all 0.5s;
		transition			: 	all 0.5s;
	}
	section.container > #mail-panel{
		transform			:	translateX(100%);
		webkit-transform	:	translateX(100%);
	}
	section.container > #mail-folders.selected{
		transform			:	translateX(-100%);
		webkit-transform	:	translateX(-100%);
	}
	section.container > #mail-folders.selected + #mail-panel{
		transform			:	translateX(0);
		webkit-transform	:	translateX(0);
	}
	div[rel=attachments]{
		width	:	auto;
	}
	/** GRIDRR **/
	.grid-line > .g3 > .widget {
		margin-bottom	:	10px;
	}
	.dashboard .grid-line > .g6:not(strong):not(span){
		width	:	100%;
	}
	.grid-line > .g3 {
		width	:	50%;
	}
	/** DIALOG **/
	.dialog-body > .attribute-panel > .g6{
		width	:	100%;
	}
	.dialog-body > .attribute-panel > .g6 > .grid-line > .g4:nth-child(1){
		width	:	41.66%;
	}
	.dialog-body > .attribute-panel > .g6 > .grid-line > .g8:nth-child(2){
		width	:	58.33%;
	}
	
}