body {
	font-family:"Arial",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
	font-size:13px;
	background:#fff;
	margin:0px;
	padding:0px;
	color:#333333;
	text-align: center;
}

img {border: 0; height:auto !important; max-width:100%;}

a {text-decoration:none; color:#42a8ce;}
a:hover {color:#6bc5e7; text-decoration:none;}

/***************** paragraphs *******************/
h1, h2, h3 {
	margin:0;
	font-size:24px;
	padding:7px 0;
	color:#000;
	font-weight:700;
}
h2 {font-size:22px; padding:17px; background: #eeeeee; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; margin: 0 0 42px; text-align: center;}

h2 span {font-size: 14px;}

h3 {
	font-size:16px;
	color:#42a8ce;
	padding: 0 0 7px;
}

/***************** line *******************/
hr { 
	width:100%; 
	height:1px; 
	background-color: #d7d7d7; 
	color: #d7d7d7; 
	border: 0; 
}

/***************** Wrapper *********************/
#wrapper {
	max-width:1440px;
	width:96%;
	margin:0 auto;
}



/***************** Structures ******************/
#site-top {
	width:100%;
	position: relative;
	z-index: 2;
		background: #3c3c3c;
}



#site-content {
	
}


#site-logo {
	max-width:315px;
	width:100%;
	height:auto;
	padding:13px 0px 12px;
	margin:0 auto;
}

#site-footer {margin:150px 0 0;}


#site-menu {
	width:100%;
	max-width:859px;
	height:47px;
	margin: 0 auto;
	position:relative;

}



/***************** Containers ******************/
.content-container {
	color:#555555;
	line-height:22px;
	margin:0 auto;
	padding:20px 0 0;
	width:auto;
}

/****************** menu ***********************/



#menu li {
	position:relative;
	float:left;
	background: transparent url("../images/menu_spacer.png") no-repeat 100% 0%;
	width: 25%;
}

#menu li a {
	color: #42a8ce; 
	height: 19px; 
	text-align:center;
	font-weight: normal;
	line-height:20px;
	padding:14px 0;
	display: block;
	font-size:13px;
	text-decoration:none; 
	width:100%;
}

#menu li.current_page_item
{
	height: 55px;
	z-index: 5;
}

#menu li.current_page_item a { 
	color:#42a8ce;
	background: #51b5db;
}


#menu li ul.children {
	display:none;
}

#menu li:hover ul.children {
	display:block;
}

b {padding: 10px;}

b.col-md-1 {width:81px;}

b input, b select {width: 90%; padding:5px; margin:0 0 7px;}
b select {padding: 9px 5px;}

b a {font-size: 12px;}

div.day {border-top:1px solid #dddddd; position: relative;}

.even {background: #fff;}
.odd {background: #eee;}

.material.odd {background: #dbeaf7;}
.material.even {background: #d1e3f3;}

.submitted.even, .submitted.odd {background: #ddd; border-color:#ccc;}

.submitted input {background: #eee; border:1px solid #ccc;}

.personal-milage {display: inline;}

.new_line, div.day.even.weekend.new_line, div.day.odd.weekend.new_line, #calculation.new_line {background: #7ac64b;}

div.day.even.weekend {background: #f8e2e2; border-top:1px solid #f7b8b8;}
div.day.odd.weekend {background: #fad5d5; border-top:1px solid #f7b8b8;}
div.weekend:last-child {border-bottom:1px solid #f7b8b8;}

.day span, .material span, .phone-header, #all-reports .phone-header {display: none;}

.clear {clear:both;}

.hide, .hide_me {display: none;}

#header-info {position: relative; z-index: 2; background: #fff;}

.small {width:39px; text-align: center;}
.material_small {width:69px; text-align: center;}

.material .col-md-12 {text-align: left;}

div.material_select, div.unit_select {display: inline;}

.error, .delete_employee {background:#c34747; border:1px solid #922d2d; color:#fff; margin:10px 0; padding:5px 0; text-align: left}
.delete_employee {display: block; text-align: center;}
.delete_employee:hover {background:#922d2d; color: #fff;}

.send_consult_info {display: block; text-align: center; background:#42a8ce; border:1px solid #6bc5e7; color:#fff;  padding:5px 0;}
.send_consult_info:hover {background:#6bc5e7; color: #fff;}

#obs, #saved_not_submitted {background:#cebd30; border:1px solid #9f8f05; color: #574e00; display: none; padding:7px; margin:10px 0; text-align: center;}
#obs.placeholder {display: block;}
#saved_not_submitted {display: block;}

#input_save {background:#5fa633; border:1px solid #408217; color: #fff; padding:10px 40px; margin:15px 15px 0 0; float:right;}
#input_save.yellow {background:#cebd30; border:1px solid #9f8f05; color: #574e00;}
#input_submit {background:#0f81ac; border:1px solid #065370; color: #fff; padding:10px 40px; margin:15px 0 0; float:right;}

#new-customer {background:#eee; border:1px solid #ddd; padding:40px;}

#all-reports {text-align: left;}
#all-reports div.day {cursor: pointer;}
#all-reports div.day.odd.select-row {background:#4cb9e2; color:#fff; border-color:#3190b4;}
#all-reports div.day.even.select-row {background:#3daed8; color:#fff; border-color:#3190b4;}
#all-reports div.day.odd:hover, #all-reports div.day.even:hover {background: #e6e6e6;}
#all-reports b {display: inline-block;}

#calculation {background:#5fa633; border:1px solid #408217; color: #fff; position: fixed; z-index: 3; left:0; top:200px; width:200px; padding:15px 0; display: none; text-align: center;}
#calculation h2 {margin: 5px 0; background:none; font-size: 20px; border:0; color:#fff;}

#calculation-input {display: none;}

#calculation input {background: #4cb9e2; border: 1px solid #0f81ac; color:#fff;}
#calculation input:hover {background: #0f81ac;}

#statistics {color:#fff; text-align: center;}
#statistics p {font-size: 20px;}
#statistics div {padding:10px 0;}
#statistics .customer {background:#0f81ac; border:1px solid #065370;}
#statistics .employee {background:#2393bd; border:1px solid #106686; margin:0;}
#statistics .fulltime {background:#2c9ec9; border:1px solid #1b7698;}
#statistics .ordtime {background:#3daed8; border:1px solid #2784a7;}
#statistics .overtime {background:#4cb9e2; border:1px solid #3190b4;}
#statistics .milage {background:#59c3eb; border:1px solid #43a4c8;}

div.employee b,div.consult b, div.expenses b {width:125px; display: inline-block; text-align: right;}
#new-employee {display: block; clear: both; width:100%; max-width:280px; padding:10px; border:1px solid #ccc; margin:0 0 20px;}

.employee h3, .consult h3 {padding:20px 0 0;}

.expense {padding:10px;}
.expense:hover {background:#e6e6e6;}

.expense a.active, #customer_submit {background:#4cb9e2; border:1px solid #0f81ac; padding:5px 10px; color:#fff;}
.expense a.active:hover, #customer_submit:hover {background:#0f81ac;}

.backlink_to_report, .top-menu-left a {padding: 10px; display: block; border: 1px solid #ccc; max-width: 280px; margin: 0 auto 20px;}

div.salary, div.invoice, div.employee, div.consult {border:1px solid #ccc; margin:0 0 15px;}
div.invoice {margin:0 0 65px;}
div.salary div {background: #fff; width: auto; border-bottom:1px solid #ccc; padding:5px;}
div.salary div:nth-child(even), div.invoice table tr:nth-child(even), div.invoice table tr:last-child {background: #eee;}
div.salary div:last-child, div.invoice table tr:last-child {border:0;}
h3.salary_employee {margin:0; padding:10px 0;}

div.invoice table {width:100%; font-size: 13px;}
div.invoice table .description {width:30%; font-weight: 700;}
div.invoice table .place {width:20%; font-weight: 700;}
div.invoice table .milage-header {width:15%; font-weight: 700;}
div.invoice table .worktime {width:20%; font-weight: 700;}
div.invoice table .overtime-header {width:15%; font-weight: 700;}
div.invoice table .worktotal {width:20%; font-weight: 700;}

div.invoice table tr.select-row {background:#4cb9e2; color:#fff; border-color:#3190b4;}
div.invoice table tr.select-row:nth-child(even) {background:#3daed8; color:#fff; border-color:#3190b4;}

div.invoice table td {width: auto; border-bottom:1px solid #ccc; padding: 5px;}
h3.invoice_employee {margin:0; padding:15px 0; font-size: 40px;}
div.invoice.cannot-invoice h3.invoice_employee {background:#e5e5e5; border-color:#d3d3d3; color: #5a5a5a;}

.invoice-summery {text-align: right;}
.invoice-summery b {width:195px; display: inline-block; padding:2px;}
.invoice-summery span {width:55px; display: inline-block;}

div.invoice table td.status_header, .status_header {text-align: center; font-weight: 700; font-size: 16px; padding:10px 0;}
div.invoice table td.status_order_0, .status_order_0 {background: #dddddd; border: 1px solid #cccccc; color: #555555; position: relative;}
div.invoice table td.status_order_0 a, .status_order_0 a {background:#4cb9e2; font-size: 14px;border: 1px solid #0f81ac; color:#fff; position: absolute; right: 10px; padding:5px; top:6px;}
div.invoice table td.status_order_0 a:hover, .status_order_0 a:hover {background: #0f81ac; text-decoration: none;}


div.invoice table td.status_order_1 {background: #5fa633; border: 1px solid #408217; color: #fff;}

div.invoice table tr.report_line_invoiced {background:#c3ddb3;}

#menu {width: 200px; position: fixed; height: 100%; background: #444; z-index: 3;}

#menu-page a {display: inline-block; padding:100px 0; border:1px solid #ddd; margin:0 0 25px; font-size: 30px; width:45%;}

#menu a {display: block; padding: 10px 0; border-bottom: 1px solid #555; margin: 0; color: #fff;}
#menu a:hover, #menu span:hover {background:#333;}

#menu span {color: #fff; position: absolute; top: 0; right: -27px; background: #444; padding: 10px; cursor: pointer;}

.add-row-phone {display: none; background:#5fa633; color: #fff; padding: 10px 0;}
.add-row-phone.odd {background:#408217;}
.add-row-phone:hover {background:#32720a; color: #fff;}

.yellow-header, #saved h3.yellow-header {color:#fac631;}

.change, .save-line {position: absolute; left:-10px; background: transparent url('../images/change.png') no-repeat 0 0; width:20px; height:20px;}
.change.loading {background: transparent url('../images/loading.gif') no-repeat 0 0;}
.save-line {background: transparent url('../images/save.png') no-repeat 0 0;}

#confirmed {background: #5fa633; border: 1px solid #408217; color: #fff; padding: 10px 40px; margin:0 0 10px;}
#saved {background: #42a8ce; border: 1px solid #208bb3; color: #fff; padding: 10px 40px; margin:0 0 10px;}

#saved h3 {color:#fff; padding:10px 0; margin:0;}

.top-menu-left {float:left;}
.top-menu-right {float:right;}

.top-menu-left a {padding: 5px 10px;}

#salary_sent {background:#cebd30; border:1px solid #9f8f05; color: #574e00; padding: 10px 40px; display: block; width: 280px; margin:0 0 25px;}
#salary_sent:hover {background: #b7a618;}

.customer-name {width:50%; max-width:253px; display: inline-block; text-align: left;}
.customer-active {text-align: right;}
.customer-active.active, .active {color:#5fa633;}
.customer-active.inactive, .inactive {color:#c34747;}
.customer-line {padding:7px 0;}
.customer-line:hover {background:#eee;}

#create-order, #create-new-unit, #create-new-material, #create-new-category {background:#5fa633; color:#fff;}

.delete.mobile {background:#0f81ac; border:1px solid #065370; color: #fff; padding:10px 40px; margin:15px 0 0; display: none;}

.employee_statistics {display: block; position: relative; padding:20px 0;}
.employee_statistics span {font-size: 11px;}

#progress {width:70%; margin:30px auto 0 ; background:#eee; height: 40px; position: relative;}
#progress span {position: absolute; top: 25%; left:50%;}
.bar {padding: 20px 0; background: #0f81ac; width:0px; text-align: center; color: #fff; font-weight: 700;}

.grid {  margin: auto; width: 100%;}

.grid-item {width: 280px; height:0; overflow: hidden; opacity: 0; /* hide grid-item while loading */ }

.grid-item--loaded {opacity: 1; height:auto; }

.image_gallery {width: 31px; height: 31px; position: absolute; top: 13px; right: 10px; background: transparent url('../images/camera.png') no-repeat 0 0;}
#upload-files {position: fixed; display: none; width: 100%; height: 100%; background: #fff; z-index: 10; top: 0; left: 0; padding: 50px 300px; overflow-y:hidden;}
#image_category {width: 100%; max-width: 200px; display: block; margin: 0 auto 40px;}
#image_check, #image_loading {display: none;}
#upload-close {background:transparent url('../images/close.png') no-repeat 0 0; width:25px; height:25px; position: absolute; top: 20px; right: 20px; display: block;}

@media (max-width: 1400px) {
  .col-md-4 {width:29%;}
}

@media (max-width: 1200px) {
  b.col-md-1 {width:67px;}
  .delete {position: absolute; top: 17px; right: -7px;}

  #upload-files {padding:50px 100px;}
}

@media (max-width: 991px) {
	#header-info {display: none;}
  	.day span, .phone-header, #all-reports .phone-header {display: inline-block;}
  	b.col-md-1 {width:81px; display: inline-block;}
  	.delete {position: relative; top:auto; right: auto; display: none;}
  	.delete.mobile {display: block; margin:0 0 10px;}
  	.small {margin: 0 0 15px;}
  	.hide-row {display: none;}
  	.hide-row.show, .add-row-phone {display: block;}

	#input_save {position: fixed; bottom: 0; left: 0; width: 50%;}
	.all-employees #input_save {width: 100%;}
	#input_submit {position: fixed; bottom: 0; right: 0; width: 50%;}

	#all-reports b {text-align: center;}
	#all-reports .date_employee {display: block;}
  	#upload-files {padding:50px 10px;}

}
@media (max-width: 400px) {
.personal-milage {display: block; text-align: right;}
}



@import url(//fonts.googleapis.com/css?family=Oswald:400);

.chart {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 13px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
  &::after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(0,0,0,.7);
      line-height: 0;
  }
}
.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #444;
  text-align: center;
  /*text-shadow: 0 -1px 0 #111;*/
  cursor: default;
}
.doughnutSummaryTitle {
  	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -50%;
	font-size: 10px;
	letter-spacing: .06em;
}
.doughnutSummaryNumber {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -10%;
    font-size: 14px;
}
.chart path:hover { opacity: 0.65; }

.fileinput-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px;
  direction: ltr;
  cursor: pointer;
}

.fileinput-button span {
	background: #42a8ce;
    color: #fff;
    padding: 10px 40px;
    display: block;
    width: 200px;
}

.fileinput-button span:hover {background: #6bc5e7;}


/* Fixes for IE < 8 */
@media screen\9 {
  .fileinput-button input {
    filter: alpha(opacity=0);
    font-size: 100%;
    height: 100%;
  }
}