@font-face{
	font-family:'FontAwesome';
	src:url('/css/fontawesome-webfont.eot?v=4.7.0');
	src:url('/css/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
	url('/css/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
	url('/css/fontawesome-webfont.woff?v=4.7.0') format('woff'),
	url('/css/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
	url('/css/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
}

body,input,button,select,textarea{
	margin:0;
	font-family:Rubik;
	outline:none;
}

.login{
	background-color:#2d2d2d;
	height:100%;
}

.login form{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-450px;
	margin-top:-250px;
	width:900px;
	height:500px;
	background:url('/img/login.jpg') no-repeat;
	border-radius:7px;
	box-shadow:0 0 4px #2e3136;
}

.login form div{
	width:320px;
	background-color:#ffffff;
	position:absolute;
	right:35px;
	top:100px;
	border-radius:7px;
	box-shadow:0 2px 10px #5f5f5f;
}

.login form>p{
	position:absolute;
	bottom:-60px;
	left:0;
	width:100%;
	font-size:14px;
	color:#fff;
}

.login form span{
	display:inline-block;
	width:100%;
	padding:14px 0 10px;
	border-bottom:1px solid #c7cfd7;
}

.login span h1{
	color:#3f3f3f;
	font-size:17px;
	font-weight:500;
}

.login span a{
	float:left;
	color:#9baab9;
	text-decoration:none;
	margin:11px 15px;
}

.login span a:hover{
	text-decoration:underline;
}

.login form nav{
	padding:15px;
}

.login form input:not([type=submit]){
	font-size:15px;
	width:100%;
	border:1px solid #c7cfd7;
	background-color:#f5f5f5;
	padding:10px;
	margin:7px 0;
}

.login form input[type=submit]{
	background-color:#a15353;
	color:#fff;
	font-size:17px;
	border:none;
	width:100%;
	padding:10px;
	margin:30px 0 0;
	border-radius:4px;
	cursor:pointer;
	transition:background-color 0.2s ease;
}

.login form input[type=submit]:hover{
	background-color:#7d4040;
}

.login form nav p{
	color:#5f5f5f;
	margin:15px 0 5px;
}

.login form nav p a{
	color:#eb6451;
	text-decoration:none;
	font-size:13px;
}

.login form nav p a:hover{
	text-decoration:underline;
}

.login h2{
	font-size:14px;
	margin:8px 0 -14px;
	color:#eb6451;
}

.left-menu{
	background-color:#292929;
	position:absolute;
	width:250px;
	z-index:9;
}

.left-menu span{
	display:inline-block;
	width:100%;
	padding:10px 0;
	margin-bottom:10px;
	background-color:#a15353;
}

.left-menu span img{
	float:left;
	height:40px;
	margin:5px 15px;
}

.left-menu span h1{
	float:left;
	color:#fff;
	font-weight:100;
	font-size:26px;
	margin:9px 0 0;
}

.left-menu nav a{
	display:block;
	text-decoration:none;
	color:#bcbcbe;
	font-size:15px;
	padding:10px 20px;
	transition:all 0.2s ease;
}

.left-menu nav a:hover,
.left-menu nav a.active{
	color:#fff;
	background:#5f5f5f;
}

.left-menu nav hr{
	height:1px;
	background-color:#5f5f5f;
	margin:10px;
	border:none;
}

.left-menu nav a b{
	font-family:FontAwesome;
	float:left;
	font-size:18px;
	width:30px;
	font-weight:normal;
	color:#dbdbdb;
}

.content{
	padding:0 0 40px 250px;
	background-color:#cdcdcd;
	min-height:100%;
}

.content:after{
	content:"";
	width:250px;
	height:100%;
	display:inline-block;
	position:fixed;
	left:0;
	background-color:#292929;
	top:0;
}

.top-menu{
	background-color:#fff;
	box-shadow:0 0 5px #5c5c5c;
	height:70px;
}

.top-menu>h1{
	float:left;
	font-weight:normal;
	margin:12px 20px;
	font-size:36px;
	color:#5f5f5f;
}

.top-menu>span{
	float:right;
	display:inline-block;
	background-color:#fff;
	border-left:1px solid #ddd;
	cursor:pointer;
	transition:background-color 0.2s ease;
}

.top-menu>span:hover{
	background-color:#eaeaea;
}

.top-menu>span h1{
	float:left;
	font-size:17px;
	font-weight:normal;
	color:#5f5f5f;
	margin:24px 10px 0 15px;
}

.top-menu>span b{
	float:left;
	width:50px;
	height:50px;
	display:inline-block;
	background-size:cover;
	background-position:center;
	border-radius:50%;
	margin:10px;
}

.top-menu nav{
	display:inline-block;
	right:-301px;
	position:fixed;
	background-color:#fff;
	width:300px;
	border:1px solid #ddd;
	top:70px;
	transition:right 0.2s ease;
	z-index:998;
}

.top-menu nav.active{
	right:0px;
}

.top-menu nav>b{
	height:100px;
	width:100px;
	display:inline-block;
	float:left;
	margin:15px;
	background-position:center;
	background-size:cover;
	border-radius:5px;
}

.top-menu nav h2{
	font-size:15px;
	font-weight:normal;
	float:left;
	margin:13px 0 5px;
	color:#5f5f5f;
}

.top-menu nav h3{
	font-weight:normal;
	color:#8e9aa7;
	font-size:14px;
}

.top-menu nav button{
	border:1px solid #ddd;
	color:#5f5f5f;
	background-color:#f5f5f5;
	padding:6px 10px;
	cursor:pointer;
	margin-top:16px;
	font-size:14px;
	border-radius:3px;
	transition:background-color 0.2s ease;
}

.top-menu nav button:hover{
	background-color:#e7e7e7;
}

.top-menu nav button i{
	font-family:FontAwesome;
	font-style:normal;
	float:left;
	margin:1px 5px 0 0;
	font-size:15px;
}

.top-menu nav a{
	display:inline-block;
	width:100%;
	background-color:#a15353;
	color:#fff;
	text-decoration: none;
	font-size:14px;
	padding:10px;
	transition:background-color 0.2s ease;
}

.top-menu nav a:hover{
	background-color:#7d4040;
}

.frame{
	padding:40px;
}

.datatable{
	background-color:#f5f5f5;
	width:100%;
	border-collapse:collapse;
}

.datatable tr.even{
	background-color:#e9e9e9;
}

.datatable th{
	text-align:left;
	font-weight:normal;
	padding:13px 10px;
	position:relative;
}

.sorting:after,.sorting_desc:after,.sorting_asc:after{
	content:"";
	position:absolute;
	width:8px;
	height:12px;
	background:url(/img/arrows.png) left top no-repeat;
	right:10px;
	top:16px;
}

.sorting_asc:after{
	background-position-x:-8px;
}

.sorting_desc:after{
	background-position-x:-16px;
}

.datatable thead tr{
	background-color:#a15353;
	color:#fff;
}

.datatable tbody td{
	font-size:15px;
	padding:10px;
	color:#5f5f5f;
}

.dataTables_length{
	float:left;
	margin-bottom:15px;
	color:#5f5f5f;
	font-size:16px;
}

.dataTables_filter{
	float:right;
	margin-bottom:15px;
	color:#5f5f5f;
	font-size:16px;
}

.dataTables_filter input,
.dataTables_length select{
	font-size:15px;
	border:1px solid #c7cfd7;
	background-color:#f5f5f5;
	padding:10px;
	margin-left:10px;
}

.dataTables_length select{
	margin:0 5px;
}

.dataTables_info{
	float:left;
	margin-top:15px;
	color:#5f5f5f;
	font-size:16px;
}

.dataTables_paginate{
	float:right;
	margin-top:15px;
}

.paginate_button{
	background-color:#5f5f5f;
	color:#fff;
	font-size:15px;
	padding:8px 10px;
	border-radius:6px;
	min-width:12px;
	display:inline-block;
	text-align:center;
	margin-right:6px;
	cursor:pointer;
	transition:background-color 0.2s ease;
}

.paginate_button.current,
.paginate_button:not(.disabled):hover{
	background-color:#545454;
}

.paginate_button.disabled{
	opacity:0.7;
	cursor:default;
}

.datatable td>a{
	color:#eb6451;
	text-decoration:none;
}

.datatable td>a:hover{
	text-decoration:underline;
}

.datatable td:last-child button{
	font-family:FontAwesome;
	float:right;
	border:none;
	font-size:18px;
	color:#fff;
	background-color:#5f5f5f;
	padding:5px 0;
	text-align:center;
	min-width:28px;
	margin-left:7px;
	border-radius:4px;
	cursor:pointer;
	transition:background-color 0.2s ease;
}

.datatable td:last-child button:hover{
	background-color:#545454;
}

.ellipsis{
	margin:0 10px 0 5px;
}

.red{
	background-color:#b75d5d!important;
}

.red:hover{
	background-color:#9f4a4a!important;
}

.tool-bar{
	background-color:#a15353;
	color:#fff;
	padding:14px;
	margin-bottom:20px;
}

.tool-bar nav{
	display:inline-block;
}

.tool-bar button{
	float:left;
	background-color:#e9e9e9;
	border:none;
	font-size:14px;
	padding:8px 10px;
	cursor:pointer;
	border-radius:3px;
	color:#5f5f5f;
	transition:background-color 0.2s ease;
	margin-right:10px;
}

.tool-bar button:hover{
	background-color:#c5c5c5;
}

.tool-bar button b,
.frame>.title button b{
	float:left;
	font-family:FontAwesome;
	font-weight:normal;
	font-size:15px;
	margin:1px 6px 0 0;
	color:#5f5f5f;
}

.tool-bar select{
	float:left;
	border:none;
	font-size:15px;
	padding:6px 5px;
	border-radius:3px;
	margin-right:20px;
}

.tool-bar label{
	float:left;
	font-size:15px;
	margin:7px 8px 0 0;
}

.tool-bar hr{
	float:left;
	border:none;
	margin:0 10px;
	width:1px;
	height:33px;
	background-color:#a6a8ab;
}

#popup{
	position:fixed;
	z-index:999;
	background-color:rgba(0,0,0,0.2);
	width:100%;
	height:100%;
	display:none;
}

#popup>nav{
	background-color:#f5f5f5;
	width:400px;
	margin-top:5%;
	box-shadow:0 2px 2px rgba(0,0,0,0.5);
}

#popup>nav>span{
	display:inline-block;
	width:100%;
	background-color:#5f5f5f;
	color:#fff;
}

#popup>nav>span h1{
	float:left;
	font-size:17px;
	font-weight:normal;
	margin:10px 13px;
}

#popup>nav>span button{
	font-family:FontAwesome;
	float:right;
	background:none;
	color:#fff;
	font-size:20px;
	border:none;
	padding:0;
	margin:9px 10px;
	cursor:pointer;
	transition:color 0.2s ease;
}

#popup>nav>span button:hover{
	color:#d1d1d1;
}

.record-form.long{
	max-height:500px;
	overflow-y:auto;
}

.record-form span{
	border-bottom:1px solid #c7c7c7;
	display:inline-block;
	text-align:left;
	width:100%;
	color:#5f5f5f;
	background-color:#fff;
}

.record-form label{
	font-size:15px;
	padding:10px;
	float:left;
	border-right:1px solid #c7c7c7;
	width:120px;
	background-color:#f5f5f5;
}

.record-form label.error{
	background-color:#ffc6c6;
}

.record-form .required label:after{
	content:"*";
	color:#ff3838;
	margin-left:3px;
}

.record-form span.disabled{
	background-color:#fafafa;
}

.record-form span>input,
.record-form span>select,
.record-form span>textarea{
	float:left;
	border:none;
	font-size:15px;
	color:#5f5f5f;
	padding:10px;
	width:250px;
	resize:none;
	outline:none;
}

.record-form span>textarea{
	height:60px;
}

.record-form.long span>input{
	width:240px;
}

.record-form span>select{
	padding:9px 6px;
}

.record-form span>input[type=file],
.record-form span>input[type=date],
.record-form span>input[type=time]{
	padding:7px;
}

.record-form span nav{
	float:left;
	width:250px;
	padding:5px 5px 0 0;
}

.record-form span nav i{
	float:left;
	display:inline-block;
	cursor:pointer;
	font-style:normal;
	background-color:#8695a3;
	color:#fff;
	font-size:14px;
	padding:5px;
	border-radius:5px;
	margin:0 0 5px 5px;
}

.record-form span nav i.selected{
	background-color:#5f5f5f;
}

.record-form>nav{
	display:inline-block;
	width:100%;
}

.record-form>nav button{
	float:right;
	background-color:#5f5f5f;
	color:#fff;
	border:none;
	font-size:15px;
	padding:8px 15px;
	border-radius:5px;
	margin:10px 10px 10px 0;
	cursor:pointer;
	transition:background-color 0.2s ease;
}

.record-form>nav button:hover{
	background-color:#545454;
}

[data-tag]{
	position:relative;
}

[data-tag] span{
	position:absolute;
	display:inline-block;
	width:100px;
	left:-37px;
	top:-28px;
}

[data-tag] span b{
	background-color:#31363c;
	display:inline-block;
	font-family:Rubik;
	font-size:12px;
	font-weight:normal;
	padding:4px 6px;
	border-radius:4px;
}

[data-tag] span b:after{
	content:"";
	width:0;
	height:0;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:4px solid #31363c;
	position:absolute;
	bottom:-4px;
	left:46px;
}

.item-details{
	border:2px solid #5f5f5f;
}

.item-details{
	width:50%;
}

.item-details label{
	width:20%;
}

.item-details span>p{
	padding:9px;
	margin:0;
	display:inline-block;
}

.item-details span>p a{
	text-decoration:none;
	color:#5f5f5f;
	font-size:15px;
}

.item-details span>p a:hover{
	text-decoration:underline;
}

.item-details.readonly span{
	background-color:#fff;
}

.item-details span>input,
.item-details span>select{
	width:75%;
}

.title{
	display:inline-block;
	width:100%;
	border-bottom:1px solid #979fa7;
	margin:40px 0 20px;
	position:relative;
}

.title h1{
	margin:0;
	font-weight:normal;
	color:#5f5f5f;
	font-size:30px;
	border-bottom:2px solid #5f5f5f;
	padding-bottom:10px;
	display:table;
}

.title button{
	position:absolute;
	top:5px;
	right:-9px;
    background-color:#e9e9e9;
    border:none;
    font-size:14px;
    padding:8px 10px;
    cursor:pointer;
    border-radius:3px;
    margin-right:10px;
    color:#5f5f5f;
    transition:background-color 0.2s ease;
}

.title button:hover{
    background-color:#c5c5c5;
}

.pending_payment{
	color:#b91818!important;
}

.cancelled{
	color:#979797!important;
}

.paid{
	color:#519744!important;
}

.partially_paid{
	color:#ed822b!important;
}

.pdf{
	background-color:#282828;
	margin-bottom:20pt;
}

.pdf>center>nav{
	border:1px solid #000;
	background-color:#fff;
	width:500pt;
	height:790pt;
	margin-top:15px;
	display:inline-block;
	box-shadow:0 10px 10px #000;
	padding:30pt 50pt;
	color:#323232;
	position:relative;
	text-align:left;
}

.pdf .header{
	display:inline-block;
	width:100%;
	margin-bottom:40pt;
	border-bottom:1px solid #dfdfdf;
	padding-bottom:10pt;
}

.pdf .header img{
	float:left;
	height:100px;
	margin:0 20pt 0 15pt;
}

.pdf .header span{
	float:left;
	text-align:left;
}

.pdf .header span h1{
	font-size:22pt;
	margin:-4pt 0 0;
	color:#ae8137;
}

.pdf .header span h2{
	font-size:14pt;
	margin:0;
	color:#e9ab46;
	font-weight:400;
}

.pdf .header span h3{
	font-size:10pt;
	font-weight:normal;
	margin:7pt 0;
}

.pdf .header span h4{
	font-size:10pt;
	font-weight:normal;
	margin:0;
}

.pdf .header span h4 b{
	font-weight:normal;
	border-left:1px solid #ae8137;
	border-right:1px solid #ae8137;
	margin:0 8pt;
	padding:0 8pt;
}

.pdf .client{
	text-align:right;
	font-size:11pt;
	line-height:20pt;
	font-weight:bold;
}

.pdf>center>nav>h1{
	text-align:left;
	display:table;
	font-size:20pt;
	margin-bottom:30pt;
	border-bottom:1px solid #000;
}

.pdf .invoice-data{
	text-align:left;
	font-size:11pt;
	line-height:18pt;
}

.pdf .invoice-data span{
	display:block;
}

.pdf .invoice-data span b{
	padding-right:10pt;
}

.pdf table{
	text-align:left;
	border-collapse:collapse;
	width:100%;
	font-size:11pt;
	margin-top:40pt;
}

.pdf table th{
	border-bottom:1px solid #323232;
	padding-bottom:6pt;
}

.pdf table td{
	border-bottom:1px solid #dfdfdf;
	padding:6pt 0;
}

.pdf .totals{
	width:170pt;
	float:right;
	margin-top:5pt;
}

.pdf .totals span{
	display:inline-block;
	width:100%;
	font-size:11pt;
	padding:6pt 0;
}

.pdf .totals label{
	float:left;
	font-weight:bold;
}

.pdf .totals span b{
	float:right;
	font-weight:normal;
}

.pdf .totals span:nth-child(2){
	border-bottom:1px solid #dfdfdf;
	margin-bottom:7pt;
}

.pdf .totals span:last-child{
	font-size:12pt;
}

.pdf .totals span:last-child b{
	font-weight:bold;
}

.pdf .footer{
	text-align:center;
	position:absolute;
	bottom:20pt;
	left:0;
	width:100%;
	font-size:11pt;
	line-height:17pt;
	color:#727272;
}

@media print{
	@page{
		size:auto;
		margin-bottom:5mm;
		margin-top:3mm;
	}
	.pdf{
		margin:0;
		height:auto;
		background-color:#fff;
	}

	.pdf>center{
		height:100%;
	}

	.pdf>center>nav{
		border:none;
		margin-top:-5pt;
		margin-left:-5pt;
		width:84%;
		height:93%;
		box-shadow:none;
	}
}