/* GUI */

body {
  background: rgb(235, 247, 255);
}

.dropzone, .dropzone * {
  box-sizing: border-box; }

.dropzone#upload {
  position: relative;
  padding: 5px;
  font-weight: bold;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b6dffd+0,b8e2f6+37,d8f0fc+57,e0f3fa+100 */
  background: rgb(182,223,253); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(182,223,253,1) 0%, rgba(184,226,246,1) 37%, rgba(216,240,252,1) 57%, rgba(224,243,250,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(182,223,253,1) 0%,rgba(184,226,246,1) 37%,rgba(216,240,252,1) 57%,rgba(224,243,250,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(182,223,253,1) 0%,rgba(184,226,246,1) 37%,rgba(216,240,252,1) 57%,rgba(224,243,250,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6dffd', endColorstr='#e0f3fa',GradientType=0 ); /* IE6-9 */
  }
  .dropzone#upload .dz-message {
    height: 20px;
    margin: 55px 5px;
  }
  .dropzone#upload .dz-preview {
    position: relative;
    display: inline-block;
    width: 120px;
    margin: 5px; }
    .dropzone .dz-preview .dz-progress {
      display: block;
      height: 15px;
      border: 1px solid #aaa; }
      .dropzone .dz-preview .dz-progress .dz-upload {
        display: block;
        height: 100%;
        width: 0;
        background: green; }
    .dropzone .dz-preview .dz-error-message {
      color: red;
      display: none; }
    .dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
      display: block; }
    .dropzone .dz-preview.dz-success .dz-success-mark {
      display: block; }
    .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
      position: absolute;
      display: none;
      left: 30px;
      top: 30px;
      width: 54px;
      height: 58px;
      left: 50%;
      margin-left: -27px; }

#buttons {
  display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;           /* TWEENER - IE 10 */
  display: -webkit-flex;          /* NEW - Chrome */
  display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 100%;
  margin-top: 8px; }
  #buttons.hide {
    display: none; }
  #buttons a {
    background: rgb(182,223,253); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(182,223,253,1) 0%, rgba(184,226,246,1) 37%, rgba(216,240,252,1) 57%, rgba(224,243,250,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(182,223,253,1) 0%,rgba(184,226,246,1) 37%,rgba(216,240,252,1) 57%,rgba(224,243,250,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(182,223,253,1) 0%,rgba(184,226,246,1) 37%,rgba(216,240,252,1) 57%,rgba(224,243,250,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6dffd', endColorstr='#e0f3fa',GradientType=0 ); /* IE6-9 */
    border: 2px solid rgba(0, 0, 0, 0.3);
    padding: 10px;
    display: block;
    width: 50%;
    height: 25px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    margin-left: 8px;
    text-align: center;
    vertical-align: middle;}
  #buttons a:first-child {
    margin: 0;}

footer {
  text-align: center;
}

/* result */

#result h3 {
  font-size: 18px;
}

#result {
  margin: 25px 5%;
}
#result table, #result table tbody {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid black;
}
#result table th, #result table td {
  padding: 5px;
  border: 1px solid darkgrey;
}
#result .header-code, #result .data-code {
  text-align: left;
  width: 25%;
}
#result .header-quantity, #result .data-quantity {
  text-align: right;
  width: 25%;
}
#result .header-type, #result .data-type {
  text-align: left;
  width: 25%;
}
#result .header-total, #result .data-total {
  text-align: right;
  width: 25%;
}
#result tfoot th {
  text-align: left;
}
#result .data-grand-total {
  text-align: right;
}
#result .data-total:after, #result .data-grand-total:after {
  content: ' €';
}

/* print */

@media print {

  body {
    background: none;
  }
  header {
    display: none;
  }
  section#uploader {
    display: none;
  }
  section#buttons {
    display: none !important;
  }
  #result {
    position: fixed;
    width: 90%;
    bottom: 0;
    left: 0;
  }
  footer {
    display: none;
  }

}