body {
  font-family: Roboto, 'Segoe UI', Tahoma, sans-serif;
  font-weight: 400; }

a {
  color: #00b1b0;
  font-weight: 400; }

.hidden {
  display: none !important; }

.nowrap {
  white-space: nowrap; }

#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(250, 250, 250, 0.9); }
  #loader:not(.loading) {
    display: none; }
  #loader div.text {
    background: white;
    box-shadow: 2px 2px lightgray;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -14rem;
    border: 1px solid black;
    padding: 2rem; }

#messages {
  display: block;
  position: fixed;
  top: 15vh;
  width: 100%; }
  #messages ul {
    min-width: 360px;
    max-width: 500px;
    margin: auto; }
    #messages ul li {
      display: block;
      padding: 10px 40px;
      position: relative;
      background-color: #ffffcc;
      border-left: 3px solid #666600;
      color: #666600; }
      #messages ul li.success {
        background-color: #ccffcc;
        border-left: 3px solid #009900;
        color: #009900; }
      #messages ul li.error {
        background-color: #efefef;
        border-left: 3px solid #ff0000;
        color: #ff0000; }
      #messages ul li .message-close {
        font-family: sans;
        text-decoration: none;
        color: black;
        border: 1px solid black;
        display: inline-block;
        position: absolute;
        right: 2px;
        top: 2px;
        width: 1.2em;
        height: 1.2em;
        text-align: center;
        vertical-align: middle; }

.header {
  background-color: black;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  color: white; }
  .header a, .header a:link {
    margin-right: 1.4em;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 0.9em;
    font-weight: 400;
    color: white; }
  .header div.user span, .header div.no-user span {
    margin-right: 1.4em; }

.content {
  padding: 1rem; }
  .content h1 {
    letter-spacing: 2.5px;
    font-size: 2.5em;
    font-weight: 300;
    color: #00b1b0; }
  .content h2 {
    margin-top: 3rem; }

.provider-list, .product-list, .customer-list, .domain-list, .invoice-list, .upload-list, .invoice-item-list, .user-list, .log-list, .commission-history, .payment-list, .supplier-list, .category-list, .job-list {
  border-collapse: collapse;
  border: 1px solid lightgrey;
  border-bottom: 1px solid black;
  margin: 1rem 0;
  min-width: 600px;
  box-sizing: border-box; }
  .provider-list thead, .product-list thead, .customer-list thead, .domain-list thead, .invoice-list thead, .upload-list thead, .invoice-item-list thead, .user-list thead, .log-list thead, .commission-history thead, .payment-list thead, .supplier-list thead, .category-list thead, .job-list thead {
    background-color: black;
    color: white; }
    .provider-list thead tr th, .product-list thead tr th, .customer-list thead tr th, .domain-list thead tr th, .invoice-list thead tr th, .upload-list thead tr th, .invoice-item-list thead tr th, .user-list thead tr th, .log-list thead tr th, .commission-history thead tr th, .payment-list thead tr th, .supplier-list thead tr th, .category-list thead tr th, .job-list thead tr th {
      padding: 0.2rem 0.5rem;
      background-color: #00b1b0;
      font-weight: 400; }
    .provider-list thead tr th:not(:first-child), .product-list thead tr th:not(:first-child), .customer-list thead tr th:not(:first-child), .domain-list thead tr th:not(:first-child), .invoice-list thead tr th:not(:first-child), .upload-list thead tr th:not(:first-child), .invoice-item-list thead tr th:not(:first-child), .user-list thead tr th:not(:first-child), .log-list thead tr th:not(:first-child), .commission-history thead tr th:not(:first-child), .payment-list thead tr th:not(:first-child), .supplier-list thead tr th:not(:first-child), .category-list thead tr th:not(:first-child), .job-list thead tr th:not(:first-child) {
      border-left: 1px solid white; }
  .provider-list tbody tr:nth-child(2n), .product-list tbody tr:nth-child(2n), .customer-list tbody tr:nth-child(2n), .domain-list tbody tr:nth-child(2n), .invoice-list tbody tr:nth-child(2n), .upload-list tbody tr:nth-child(2n), .invoice-item-list tbody tr:nth-child(2n), .user-list tbody tr:nth-child(2n), .log-list tbody tr:nth-child(2n), .commission-history tbody tr:nth-child(2n), .payment-list tbody tr:nth-child(2n), .supplier-list tbody tr:nth-child(2n), .category-list tbody tr:nth-child(2n), .job-list tbody tr:nth-child(2n) {
    background-color: #f1f6f6; }
  .provider-list tbody form, .provider-list tfoot form, .product-list tbody form, .product-list tfoot form, .customer-list tbody form, .customer-list tfoot form, .domain-list tbody form, .domain-list tfoot form, .invoice-list tbody form, .invoice-list tfoot form, .upload-list tbody form, .upload-list tfoot form, .invoice-item-list tbody form, .invoice-item-list tfoot form, .user-list tbody form, .user-list tfoot form, .log-list tbody form, .log-list tfoot form, .commission-history tbody form, .commission-history tfoot form, .payment-list tbody form, .payment-list tfoot form, .supplier-list tbody form, .supplier-list tfoot form, .category-list tbody form, .category-list tfoot form, .job-list tbody form, .job-list tfoot form {
    display: inline-block; }
  .provider-list tbody td, .provider-list tfoot td, .product-list tbody td, .product-list tfoot td, .customer-list tbody td, .customer-list tfoot td, .domain-list tbody td, .domain-list tfoot td, .invoice-list tbody td, .invoice-list tfoot td, .upload-list tbody td, .upload-list tfoot td, .invoice-item-list tbody td, .invoice-item-list tfoot td, .user-list tbody td, .user-list tfoot td, .log-list tbody td, .log-list tfoot td, .commission-history tbody td, .commission-history tfoot td, .payment-list tbody td, .payment-list tfoot td, .supplier-list tbody td, .supplier-list tfoot td, .category-list tbody td, .category-list tfoot td, .job-list tbody td, .job-list tfoot td {
    padding: 0.2rem 0.5rem;
    height: 2rem; }
    .provider-list tbody td.right, .provider-list tfoot td.right, .product-list tbody td.right, .product-list tfoot td.right, .customer-list tbody td.right, .customer-list tfoot td.right, .domain-list tbody td.right, .domain-list tfoot td.right, .invoice-list tbody td.right, .invoice-list tfoot td.right, .upload-list tbody td.right, .upload-list tfoot td.right, .invoice-item-list tbody td.right, .invoice-item-list tfoot td.right, .user-list tbody td.right, .user-list tfoot td.right, .log-list tbody td.right, .log-list tfoot td.right, .commission-history tbody td.right, .commission-history tfoot td.right, .payment-list tbody td.right, .payment-list tfoot td.right, .supplier-list tbody td.right, .supplier-list tfoot td.right, .category-list tbody td.right, .category-list tfoot td.right, .job-list tbody td.right, .job-list tfoot td.right {
      text-align: right; }
    .provider-list tbody td:not(:first-child), .provider-list tfoot td:not(:first-child), .product-list tbody td:not(:first-child), .product-list tfoot td:not(:first-child), .customer-list tbody td:not(:first-child), .customer-list tfoot td:not(:first-child), .domain-list tbody td:not(:first-child), .domain-list tfoot td:not(:first-child), .invoice-list tbody td:not(:first-child), .invoice-list tfoot td:not(:first-child), .upload-list tbody td:not(:first-child), .upload-list tfoot td:not(:first-child), .invoice-item-list tbody td:not(:first-child), .invoice-item-list tfoot td:not(:first-child), .user-list tbody td:not(:first-child), .user-list tfoot td:not(:first-child), .log-list tbody td:not(:first-child), .log-list tfoot td:not(:first-child), .commission-history tbody td:not(:first-child), .commission-history tfoot td:not(:first-child), .payment-list tbody td:not(:first-child), .payment-list tfoot td:not(:first-child), .supplier-list tbody td:not(:first-child), .supplier-list tfoot td:not(:first-child), .category-list tbody td:not(:first-child), .category-list tfoot td:not(:first-child), .job-list tbody td:not(:first-child), .job-list tfoot td:not(:first-child) {
      border-left: 1px solid #999999; }
  .provider-list tbody tr.disabled td, .provider-list tfoot tr.disabled td, .product-list tbody tr.disabled td, .product-list tfoot tr.disabled td, .customer-list tbody tr.disabled td, .customer-list tfoot tr.disabled td, .domain-list tbody tr.disabled td, .domain-list tfoot tr.disabled td, .invoice-list tbody tr.disabled td, .invoice-list tfoot tr.disabled td, .upload-list tbody tr.disabled td, .upload-list tfoot tr.disabled td, .invoice-item-list tbody tr.disabled td, .invoice-item-list tfoot tr.disabled td, .user-list tbody tr.disabled td, .user-list tfoot tr.disabled td, .log-list tbody tr.disabled td, .log-list tfoot tr.disabled td, .commission-history tbody tr.disabled td, .commission-history tfoot tr.disabled td, .payment-list tbody tr.disabled td, .payment-list tfoot tr.disabled td, .supplier-list tbody tr.disabled td, .supplier-list tfoot tr.disabled td, .category-list tbody tr.disabled td, .category-list tfoot tr.disabled td, .job-list tbody tr.disabled td, .job-list tfoot tr.disabled td {
    text-decoration: line-through;
    color: darkgray; }
    .provider-list tbody tr.disabled td:last-child, .provider-list tfoot tr.disabled td:last-child, .product-list tbody tr.disabled td:last-child, .product-list tfoot tr.disabled td:last-child, .customer-list tbody tr.disabled td:last-child, .customer-list tfoot tr.disabled td:last-child, .domain-list tbody tr.disabled td:last-child, .domain-list tfoot tr.disabled td:last-child, .invoice-list tbody tr.disabled td:last-child, .invoice-list tfoot tr.disabled td:last-child, .upload-list tbody tr.disabled td:last-child, .upload-list tfoot tr.disabled td:last-child, .invoice-item-list tbody tr.disabled td:last-child, .invoice-item-list tfoot tr.disabled td:last-child, .user-list tbody tr.disabled td:last-child, .user-list tfoot tr.disabled td:last-child, .log-list tbody tr.disabled td:last-child, .log-list tfoot tr.disabled td:last-child, .commission-history tbody tr.disabled td:last-child, .commission-history tfoot tr.disabled td:last-child, .payment-list tbody tr.disabled td:last-child, .payment-list tfoot tr.disabled td:last-child, .supplier-list tbody tr.disabled td:last-child, .supplier-list tfoot tr.disabled td:last-child, .category-list tbody tr.disabled td:last-child, .category-list tfoot tr.disabled td:last-child, .job-list tbody tr.disabled td:last-child, .job-list tfoot tr.disabled td:last-child {
      text-decoration: unset;
      color: unset; }
  .provider-list .no-items, .product-list .no-items, .customer-list .no-items, .domain-list .no-items, .invoice-list .no-items, .upload-list .no-items, .invoice-item-list .no-items, .user-list .no-items, .log-list .no-items, .commission-history .no-items, .payment-list .no-items, .supplier-list .no-items, .category-list .no-items, .job-list .no-items {
    text-align: center;
    font-style: italic; }
  .provider-list.valign-top tbody td, .provider-list.valign-top tfoot td, .product-list.valign-top tbody td, .product-list.valign-top tfoot td, .customer-list.valign-top tbody td, .customer-list.valign-top tfoot td, .domain-list.valign-top tbody td, .domain-list.valign-top tfoot td, .invoice-list.valign-top tbody td, .invoice-list.valign-top tfoot td, .upload-list.valign-top tbody td, .upload-list.valign-top tfoot td, .invoice-item-list.valign-top tbody td, .invoice-item-list.valign-top tfoot td, .user-list.valign-top tbody td, .user-list.valign-top tfoot td, .log-list.valign-top tbody td, .log-list.valign-top tfoot td, .commission-history.valign-top tbody td, .commission-history.valign-top tfoot td, .payment-list.valign-top tbody td, .payment-list.valign-top tfoot td, .supplier-list.valign-top tbody td, .supplier-list.valign-top tfoot td, .category-list.valign-top tbody td, .category-list.valign-top tfoot td, .job-list.valign-top tbody td, .job-list.valign-top tfoot td {
    vertical-align: top; }

.invoice-item-list tfoot tr:first-child, .invoice-item-list tfoot tr:last-child {
  border-top: 2px solid black; }

.payment-list td.incoming {
  color: green; }

.payment-list td.outgoing {
  color: red; }

form {
  line-height: 2; }

button {
  background-color: #5bcb6c;
  color: white;
  border: none;
  padding: 6px 30px;
  letter-spacing: .4px;
  font-size: .9em;
  cursor: pointer; }
  button.verify-customer-vat-status {
    margin-left: 1rem; }
  button:disabled {
    background-color: #abcbac;
    cursor: unset; }
  button.destructive {
    background-color: #b38965; }

.pagination {
  margin: 1rem 0; }
  .pagination button {
    background-color: #eee892;
    color: grey;
    border: none;
    padding: 4px 15px; }
    .pagination button:disabled {
      background-color: #eeeeee; }
    .pagination button.current {
      background-color: #ccc982; }

.invoice-actions {
  display: flex;
  flex-wrap: wrap; }

.invoice-exports form {
  display: inline-block; }

fieldset {
  display: inline-block;
  min-width: 600px;
  box-sizing: border-box;
  margin: 15px; }
  fieldset h3 {
    margin: 0; }
  fieldset label {
    display: inline-block;
    min-width: 8.5rem; }
    fieldset label.medium {
      width: 50%; }
    fieldset label.short {
      width: 30%; }
    fieldset label.checkbox {
      width: 70%; }
      fieldset label.checkbox input[type=checkbox] {
        width: unset;
        min-width: unset;
        margin-left: 35%; }
    fieldset label.period-right {
      min-width: unset;
      margin-left: 0.5em;
      margin-right: 4em; }
    fieldset label.period-left {
      min-width: unset;
      margin-right: 0.5em; }
  fieldset input, fieldset select {
    box-sizing: border-box;
    width: 75%;
    padding: 10px 15px;
    margin-top: 15px; }
    fieldset input.short, fieldset select.short {
      width: 9rem; }
    fieldset input.xshort, fieldset select.xshort {
      width: 5rem; }
    fieldset input.medium, fieldset input[type=date], fieldset select.medium, fieldset select[type=date] {
      width: 47%; }
    fieldset input.right, fieldset select.right {
      text-align: right; }
    fieldset input[type=checkbox], fieldset input[type=radio], fieldset select[type=checkbox], fieldset select[type=radio] {
      width: unset;
      min-width: unset;
      margin-left: 9rem;
      margin-right: 0.3rem; }
      fieldset input[type=checkbox].no-margin, fieldset input[type=radio].no-margin, fieldset select[type=checkbox].no-margin, fieldset select[type=radio].no-margin {
        margin-left: 1rem; }
      fieldset input[type=checkbox].zero-margin, fieldset input[type=radio].zero-margin, fieldset select[type=checkbox].zero-margin, fieldset select[type=radio].zero-margin {
        margin-left: 0; }
    fieldset input[type=file], fieldset select[type=file] {
      background-color: #efefef; }
  fieldset .right {
    text-align: right; }
  fieldset button {
    width: 99%;
    padding: 10px 15px;
    margin-top: 18px;
    margin-bottom: 10px; }
    fieldset button#add-row, fieldset button.remove-row, fieldset button.remove-item, fieldset button#add-item, fieldset button.verify-customer-vat-status, fieldset button#currency-change-submit, fieldset button#merge-invoice, fieldset button.remove-attachment, fieldset button#add-attachment {
      width: unset; }

.item-add fieldset select, fieldset #items select {
  width: 15rem; }
  .item-add fieldset select.long, fieldset #items select.long {
    width: 22rem; }

.new-invoice-item {
  border-bottom: 1px solid #999999; }
  .new-invoice-item:nth-child(2n) {
    background-color: #f1f6f6; }
  .new-invoice-item:last-child {
    border-bottom: 0; }
  .new-invoice-item .input-container {
    display: flex;
    align-items: center; }
    .new-invoice-item .input-container .product-caption-group, .new-invoice-item .input-container .units-amount-group {
      margin: 1em; }
      .new-invoice-item .input-container .product-caption-group input, .new-invoice-item .input-container .product-caption-group select, .new-invoice-item .input-container .units-amount-group input, .new-invoice-item .input-container .units-amount-group select {
        margin-top: 0; }
      .new-invoice-item .input-container .product-caption-group input[name=caption], .new-invoice-item .input-container .units-amount-group input[name=caption] {
        width: 100%; }
      .new-invoice-item .input-container .product-caption-group button[type=submit], .new-invoice-item .input-container .units-amount-group button[type=submit] {
        width: unset; }
      .new-invoice-item .input-container .product-caption-group span, .new-invoice-item .input-container .units-amount-group span {
        display: block;
        width: 100%; }
        .new-invoice-item .input-container .product-caption-group span.or, .new-invoice-item .input-container .units-amount-group span.or {
          text-align: center; }

.form-error, .form-success, .form-info {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding: 5px 20px; }
  .form-error button, .form-success button, .form-info button {
    width: unset; }

.form-error {
  background-color: #efefef;
  border-left: 3px solid #ff0000;
  color: #ff0000; }

.form-success {
  background-color: #ccffcc;
  border-left: 3px solid #009900;
  color: #009900; }

.form-info {
  background-color: #ffffcc;
  border-left: 3px solid #aaaa00;
  color: #aaaa00; }

.vat-check-indicator .retry-button {
  display: none;
  margin-left: 1rem; }

.vat-check-indicator.form-error .retry-button {
  display: unset; }

.billing-period-validation-error.form-error {
  margin-top: 1.5em;
  width: 99%; }

.set-invoice-billing-period hr {
  margin-top: 1.5em; }

dl {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start; }
  dl dt, dl dd {
    display: inline-block; }
    dl dt.section-start, dl dd.section-start {
      margin-top: 1rem; }
  dl dt {
    min-width: 12rem;
    text-align: right;
    font-weight: bold; }
  dl dd {
    margin-left: 1rem; }

.upload-new {
  display: flex;
  flex-wrap: wrap; }
  .upload-new.hidden {
    display: none; }

.product-alias-info {
  font-style: italic;
  max-width: 600px; }

.vip-status-info {
  font-style: italic; }

.warning {
  background-color: #ff9999; }

label.filter-active {
  font-weight: bold; }

.password-reset-link {
  text-align: right; }

.footer {
  text-align: right; }

body.test-instance .header .title {
  font-weight: bold;
  color: red; }
  body.test-instance .header .title::before {
    content: " !!! "; }
  body.test-instance .header .title::after {
    content: " TEST !!! "; }

.banking-status {
  display: inline-block;
  margin-right: 2rem; }

.inline {
  display: inline; }

.payment-status.paid {
  background-color: #5bcb6c;
  color: white; }

.payment-status.partially-paid {
  background-color: #eee892;
  color: black; }

.payment-status.not-paid {
  background-color: #ff9999; }

span.payment-status {
  display: inline-block;
  padding: 2px 5px; }