.application_color{color:red}

/************ GLOBALS ***************/
@media (max-width:600px){nav .hide-phone {display:none}}
@media (max-width:800px){nav .hide-tablet {display:none}}

html,body,footer, menu {	background-color:#f1f1f1;}

body {
	font: 400 13px/18px "Helvetica Neue","HelveticaNeue",Helvetica,"Open Sans",arial,sans-serif;
	margin:0;padding:0;
}


fieldset {
	border-radius: 5px;
	border: 1px solid #ddd;
	background-color: #f0f0f0;
	padding:0.8em;
}
form fieldset {padding-bottom:0.2em}
iframe {border:0}

a {text-decoration:none;cursor:pointer;}
a:hover{text-decoration:underline}
input, select, textarea { padding:3px;background:#fff;border:1px solid #ccc}
input[type=search] {background-image:url("../../img/search_icon.png");background-repeat:no-repeat;background-position:99% center;}
input[type=search]:focus,input[type=search]:hover{background-image:none}
button, .DTTT_button, input[type=submit]{
	cursor: pointer;
	padding: 0.5em 1em;
	margin: 0 0.3em;
	border-radius: 3px;
	border: 1px solid transparent;
	background:#777;
	color:#fff;
	white-space:nowrap;
}
button{font-size:1.1em}
button.disabled, .DTTT_disabled {opacity:0.3;cursor:default;}

kbd {padding: 1px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #777;
    border-radius: 3px;
}

img.thumb-tiny {width:25px}
img.thumb-small {width:50px}
img.thumb, img.tuhumb-normal { width:100px}
img.thumb-big {width:200px}
img.thumb-huge {width:400px}

.transparent {background:transparent;color:#333;border:1px solid}
.error{background:red!important;border-color:red!important;color:#fff!important;border-style:solid!important}
.success{background:yellowgreen;border-color:yellowgreen;color:#fff;border-style:solid}
.warning{background:orange;border-color:orange;color:#fff;border-style:solid}
.info{background:#3289C8;border-color:#3289C8;color:#fff;border-style:solid}
.hidden{display:none}
.deleted{color:gray;text-decoration: line-through;}

.red{color:red!important;fill:red!important}
.green{color:green!important;fill:green!important}
.blue{color:blue!important;fill:blue!important}
.gray{color:gray!important;fill:gray!important}
.white{color:white!important;fill:white!important}
.yellow{color:gold!important;fill:gold!important}
.orange{color:orange!important;fill:orange!important}
.purple{color:purple!important;fill:purple!important}

.lightred{color:lightred;fill:lightred}
.lightgreen{color:lightgreen;fill:lightgreen}
.lightblue{color:lightblue;fill:lightblue}
.lightgray{color:lightgray;fill:lightgray}
.lightblack{color:lightblack;fill:lightblack}
.lightwhite{color:lightwhite;fill:lightwhite}
.lightyellow{color:lightyellow;fill:lightyellow}

.darkred{color:darkred;fill:darkred}
.darkgreen{color:darkgreen;fill:darkgreen}
.darkblue{color:darkblue;fill:darkblue}
.darkgray{color:darkgray;fill:darkgray}
.black{color:black;fill:black}
.darkyellow{color:darkkhaki;fill:darkkhaki}
.darkorange{color:darkorange;fill:darkorange}
.darkpurple{color:darkmagenta;fill:darkmagenta}

.left{float:left}
.right{float:right}
.nowrap{white-space:nowrap}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-middle{vertical-align:middle}
.italic{font-style:italic}

.border, .bordered {border-width: 1px; border-style:solid}
.left-border, .border-left{border-left-width:1px;border-left-style:solid}
.right-border, .border-right{border-right-width:1px;border-right-style:solid}

.cursor-help {cursor:help}
.cursor-hand,.cursor-pointer{cursor:pointer}
.cursor-arrow{cursor:default}
/********** //GLOBALS ******************/


/********** PAGE STRUCTURE ******************/
#top-of-page {margin:0;padding:0}

	/******** TOP NAV ***********/
	#top-of-page > nav { margin:0; padding:0.7em 1em;background:#000;color:#fff;}
	#top-of-page > nav a {color:#ddd}
	#top-of-page > nav > span {margin-left: 3em}
	#top-of-page > nav > span > a {margin-left:1em}
	#top-of-page > nav > span:last-child{float:right}

	/******** TOP MENU ***********/
	#top-of-page > menu{margin:0}
	nav > * {
		display: inline-block;
		margin:0;
	}

	menu a { color: inherit;}
	#top-of-page > menu {
		width:100%;
		list-style-type: none;
		padding:0;
		clear:both;
		border-bottom:1px solid #ddd;
	}
	#top-of-page > menu > * {
		margin:0 0.5em -5px;
		display:inline-block;
		padding:0em;
		cursor:default;
		height:2.5em;
	}
	menu li {overflow:hidden;}
	menu li:hover menu, menu li.active menu {display:block}
	menu li menu {
		position:absolute;
		z-index:2;
		display:none;
		padding:0;
		margin:1px;
		/*box-shadow: 0 1px 2px rgba(0,0,0,0.1);*/
		border-width:0 1px 1px 1px;
		border-style:solid;
		border-color:#ccc;
	}
	menu menu > li {
		list-style-type:none;
		min-width:10em;
	}
	menu li a,menu li span {
		display:inline-block;
		width:100%;
		padding:0.5em 1em
	}
	menu li a:hover {background:#ddd; text-decoration:none}
	/**** //MENU ****/


#content-of-page {
	margin:0;padding:1em 1em 6em;
	background-color:#fff;
	background-image:url("../../img/bg_admin.png");
	background-size:100%;
}
	#content-of-page > h1 { padding-bottom:0.5em}

#bottom-of-page {margin:0}
	#bottom-of-page > hr {display:none}
	#bottom-of-page > footer {
		padding-top: 20px;
		padding-bottom: 20px;
		/*margin-top: 80px;*/
		color: #777;
		text-align: center;
		border-top: 1px solid #ccc;
	}
	#bottom-of-page > footer a {color:#aaa}
/********** PAGE STRUCTURE ******************/



/********** PLUGINS ******************/

	/********** PLUGIN jqUI ******************/
	.ui-widget-content {}
	.ui-front {
	  z-index: 100;
	}

	.ui-menu {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  display: block;
	  outline: none;

	  border: 1px solid #aaaaaa;
	  background: #fff;
	  color: #222;
	}
	.ui-menu .ui-menu-item {
	  position: relative;
	  margin: 0;
	  padding: 3px 1em 3px .4em;
	  cursor: pointer;
	  min-height: 0;
	}
	.ui-menu .ui-menu-item.ui-state-focus,
	.ui-menu .ui-menu-item:hover{
		background-color:#eee;
	}
	.ui-widget-overlay{
		background: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;bottom: 0;right: 0;left: 0;
	}
	.ui-dialog {
		margin-top:2em;
		background: #fafafa;
		padding:1.5em;
		box-shadow:0px 0px 6px rgba(0,0,0,0.3);
		z-index:1;
		border-radius:5px;
	}
	.ui-dialog .ui-dialog-titlebar{margin-bottom:1em}
	.ui-dialog .ui-dialog-titlebar-close:hover {border-color:transparent;}
	.ui-dialog .ui-dialog-titlebar-close .ui-button-text {display:none;}
	.ui-dialog .ui-dialog-titlebar-close{
		float:right;
		border:0;
		background:transparent;
		cursor:pointer;
		top:0;margin:0 1em;
		padding:0;
		width:0;
	}
	.ui-dialog .ui-dialog-titlebar-close:before{
		color:black;
		content:"\f00d";
		font: normal normal normal 14px/1 FontAwesome;
	}
	.ui-dialog .ui-dialog-title{font-size:1.3em;font-weight:bold}
	.ui-dialog .ui-dialog-buttonpane{margin-top: 2em;min-height:2em}
	.ui-dialog-buttonpane {
		display: flex !important;
		justify-content: space-between !important;
	}

	.ui-dialog-buttonpane .ui-dialog-buttonset {
		width: 100% !important;
		display: flex !important;
		justify-content: space-between !important;
	}

	.ui-dialog-buttonpane .left-button {
		margin-right: auto !important;
	}

	.ui-dialog-buttonpane .right-button {
		margin-left: auto !important;
	}

	.ui-dialog-buttonpane button i.fa {
		color: white !important;
	}

	.ui-dialog-buttonpane button {
		color: white !important;
	}
	.ui-draggable-handle{cursor:move}

	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
		border: 1px solid #aaaaaa;
		background: #fafafa;
	}

	.ui-tabs .ui-tabs-nav{height:2em;border-bottom:1px solid #aaa;}
	.ui-tabs .ui-tabs-nav li {
		list-style: none;
		float: left;
		position: relative;
		top: 0;
		margin: 0;
		border-bottom-width: 0;
		padding: 0;
		white-space: nowrap;
		height:2em;
	}
	.ui-tabs .ui-tabs-nav li a {padding:0.4em 1em;position:relative;top:0.4em}

	.ui-helper-hidden-accessible{position:fixed;top:1px;background:red;display:none}
	.ui-autocomplete {
	  position: absolute;
	  top: 0;
	  left: 0;
	  cursor: default;
	  z-index:1003;
	}

	/************ PLUGIN form *****************/
	form p {margin:0 0 0.5em 0;text-align:right}
	form .redactor-editor p {text-align:left}
	form p > label {display:inline-block;width:22%;margin-right:0.5em}
	form p > span{
		display:inline-block;width:74%;text-align:left;
		vertical-align:middle
	}
	form p > span > * {width:calc(100% - 6px)}
	form p > span.description {color:#999}
	form p > span > select,form p > span > input[type=search] {width: calc(100% + 3px);}
	form p > span > textarea {height:7em;}
	.cols-2 > *{width:47%}
	.cols-2 > *:nth-child(2){float:right;position:relative;right:-2px}
	.cols-2 > span {text-align:right}
	.cols-2 > span > * { width: 78%}
	.cols-2 > span > label {width: 20%}

	.cols-3 > *{width:30%}
	.cols-3 > *:nth-child(2){margin-left:1%}
	.cols-3 > *:nth-child(3){float:right;position:relative; right:-2px;}

	.cols-4 > *{width:22%}
	.cols-4 > *:nth-child(2),.cols-4 > *:nth-child(3){margin-left:1%}
	.cols-4 > *:nth-child(4){float:right;position:relative; right:-2px;}

	[readonly]{background:transparent;border-color:transparent}
	form label[required]:after{content:"*";color:red}
	input[required],select[required],textarea[required]{background-color:lightblue}

	.ui-button{ margin-right: 1em; margin-left:0}
	.ui-button.right{ margin-right: 0; margin-left: 1em}

	/************** PLUGIN data table *************/
	table.dataTable {width:100%!important}
	.DTTT_container{float:right;margin-top:2px; margin-left:2em; margin-bottom:1em}
	.DTTT_button:hover{text-decoration:none}
	table .actions{white-space:nowrap;width:1em;text-align:center;border-left:1px solid #eee;}
	table a.fa{width:1em;padding:0.3em;border-radius:3px;border:1px solid transparent}
	table a.fa:hover{border-color:#333;text-decoration:none }

	table .left-border,table .right-border{border-color:#eee}

	table .total{font-weight:bold}
	table tfoot th.total{ background:#555;color:#fff}

	table .actions .fa b{
		position:absolute;
		/*color:red;*/
		color:#fff;
		padding:1px;
		background:green;
		border-radius:0px;
		width:10px;

		margin:-0.5em;
		font-weight:normal;
		font-size:0.6em
	}
	table.dataTable.compact thead th[class*=sorting], table.dataTable.compact thead td[class*=sorting]{padding-right:1.3em!important}

	table.dataTable.hover tbody tr:hover, table.dataTable.hover tbody tr.odd:hover, table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover, table.dataTable.display tbody tr.odd:hover, table.dataTable.display tbody tr.even:hover{
		background-color: #eaeaf5;
	}
	table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected,
	table.dataTable.stripe tbody tr.even.selected, table.dataTable.display tbody tr.even.selected{
		background-color:#cbd0e3; /*#bbc9e3*/
	}
	table.dataTable.hover tbody tr.selected:hover { background-color: #B0BED9}

	table td.id, table td.icon {width:1em;text-align:center}
	table .datetime {white-space:nowrap;width:1em;vertical-align:bottom;}
	.dataTables_wrapper .dataTables_processing {background:#eee;border-top:1px solid;border-bottom:1px solid}


	.button_field > input[type=search] {width:83%!important; height:28px }
	.button_new { float:right!important; width:auto!important; padding:5px 16px; font-weight:bold}
	.button_new_product { float:right!important; width:auto!important; padding:5px 16px; font-weight:bold}
	.button_new_supplier { float:right!important; width:auto!important; padding:5px 16px; font-weight:bold}