@charset "UTF-8";
/* CSS Document */
.invoicer * {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Fonts */
.invoicer h1, .invoicer h2, .invoicer .customer {
  font-family: 'korolevbold';
}
.invoicer p, .invoicer input, .invoicer textarea, .invoicer li  {
	font-family: 'korolevlight';
	letter-spacing: 1px;
	font-size: 16px;
}
.customer, .company-header li.type, .company-header li.company span.logo, .customer-header .invoice .heading:nth-of-type(2) input, .customer-header .invoice .heading:not(:nth-child(1)),.invoice-container.header li, .options-panel button {
  text-transform: uppercase;
}
/* End Fonts */

body {
    padding: 0px 0px 150px 0px;
    margin: 0px;
}
li {
  list-style: none;
}
input:disabled {
  background-color: inherit;
  color: inherit;
}
input, img, textarea {
  width: 100%;
  height: 100%;
  border: none;
  background-color: inherit;
  padding: 0;
}
img {
	max-width: 245px;
}
.invoicer ul, .invoicer li, .invoicer p, .invoicer h1, .invoicer h2 {
	padding: 0;
	margin: 0;
}
body.invoicer {
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
	position: relative;
}
body.invoicer .wrapper {
  width: 100%;
  margin: auto;
  background-color: #F4F4F4;
}
.invoicer .company-header, .invoicer .invoice-container.header, .invoicer .invoice-item, .invoicer .totals {
  padding: 15px;
}
.invoicer .invoice-container.header {
  display: table;
  width: 100%;
  font-family: 'korolevbold';
}
.invoicer .company-header {
  display: table;
  width: 100%;
  background-color: #2B3039;
  color: #FFFFFF;
  padding-top: 25px;
  padding-bottom: 25px;
}
.invoicer .company-header li {
  float: right;
}
.invoicer .company-header li.type {
  width: 25%;
  margin-top: 110px;
  font-size: 20px;
}
.invoicer .company-header li.company {
  width: 75%;
}
.invoicer .company-header li.company span.logo {
  display: block;
  max-width: 265px;
}
.invoicer .company-header li.company span.logo p {
  margin-top: 5px;
}
.invoicer .company-header li.company span.info {
  display: table;
  color: grey;
  margin-top: 30px;
}
.invoicer .company-header li.company span.info p strong {
  font-family: 'korolevbold';
}
.invoicer .company-header li.company span.info p {
  float: left;
  font-size: 14px;
}
.invoicer .company-header li.company span.info p:not(:last-child)::after {
  content: ' |';
  margin: 0px 5px;
}
.invoicer .company-header li.customer .type {
  background-color: #1C7FFF;
}
.invoicer .company-header li.customer input {
  height: 40px;
}
.invoicer .customer-header {
  display: table;
  width: 100%;
  padding: 45px 15px;
}
.invoicer .customer-header .heading {
  font-size: 16px;
}
.invoicer .customer-header .invoice .heading:nth-child(1), .customer-header .invoice .heading:nth-child(2) {
  border-bottom: 2px solid #1C7FFF;
  height: 30px;
  margin-bottom: 10px;
}
.invoicer .customer-header .invoice .heading:nth-of-type(2) input {
  font-size: 18px;
  line-height: 19px;
}
.customer-header .invoice .heading:nth-of-type(2) input, .customer-header .invoice .heading:not(:nth-child(1)) {
  font-family: 'korolevbold';
}
.customer-header li {
  float: left;
  width: 50%;
}
.customer-header .billing li {
  float: none;
}
.customer-header li li {
  height: 25px;
}
.customer-header .invoice select {
    margin-left: -28px;
    min-width: 140px;
    text-align: right;
  }
.customer-header li.invoice li:nth-child(even) input {
  text-align: right;
}
.customer-header li.invoice span {
  display: block;
  max-width: 225px;
  margin-left: auto;
}
.customer-header li.invoice .heading label {
  font-family: 'korolevlight';
  font-size: 16px;
  font-weight: normal;
}
.invoice-container.header li {
  font-family: 'korolevbold';
  font-size: 18px;
}
.invoice-container li {
  float: left;
}
.invoice-container.header li:not(.item){
  text-align: right;
}
.invoice-container li.item {
  width: 45%;
}
.invoice-container li.quantity {
  width: 15%;
}
.invoice-container li.price {
  width: 15%;
}
.invoice-container li.total {
  width: 15%;
}
.invoice-container li.edit {
  width: 10%;
}
.invoice-item:not(:first-child) li.edit span::before {
  display: block;
  font-family: 'FontAwesome';
	content: '\f1f8';
  font-size: 20px;
  margin: 8px 0px 0px 8px;
}
.invoice-container li.description {
  width: 100%;
}
.invoice-container li.description textarea {
  width: 100%;
  resize: none;
}
.invoice-item {
  display: table;
  width: 100%;
  height: 60px;
}
.invoice-item:not(.totals):nth-child(even){
  background-color: #D1D1D1;
}
.invoice-item li {
  height: 40px;
}
.invoice-item li:not(.item), .invoice-item li:not(.item) input {
  text-align: right;
}
.totals {
  display: table;
  width: 100%;
  margin: 40px 0px;
  padding-bottom: 0;
}
.totals li {
  float: left;
}
.totals li:not(.payments), .totals li input {
  text-align: right;
}
.totals li.blank {
  width: 70%;
  height: 30px;
}
.totals li.blank.payments label {
  display: block;
  margin-top: 8px;
}
.totals li.blank:nth-child(4) {
  font-family: 'korolevmedium';
}
.totals li:not(.blank) {
  width: 15%;
}
.totals li.guide {
  border-top: 2px solid #1C7FFF;
}
.totals .grand-total {
  background-color: #1C7FFF;
  color: #FFFFFF;
  text-align: center;
  padding: 10px 0px;
  height: 40px;
}
.totals .aggreement {
  display: block;
  margin-top: 135px;
  margin-bottom: 25px;
  font-size: 14px;
}
.options-panel {
	width: 100%;
	margin: auto;
  position: fixed;
  bottom: 0;
  left: 0;
}
.options-panel button {
	float: left;
	cursor: pointer;
    margin: 0;
	color: #FFFFFF;
	font-family: 'korolevbold';
	font-size: 30px;
	padding: 15px 10px;
	border: 0;
	width: 100%;
}
.options-panel button#add {
	width: 80%;
	background-color: #1C7FFF;
}
.options-panel button#save {
	width: 20%;
	background-color: #0054C2;
}
.options-panel button#save::before {
	font-family: 'FontAwesome';
	content: '\f0c7';
}