body {
  font-family: 'PT Sans', sans-serif;
  background-color: #39404d;
}

footer {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

h1, h2, h3, h4, h5, h6,
.h3 {
  font-family: 'PT Serif', serif;
  color: #39404d;
}

.h3 small {
  font-weight: inherit;
}

#content > hr {
  position: relative;
  left: -20px;
  width: 100vw;
  border-color: #39404d;
}

.fa-margin-left {
  margin-left: 5px;  
}
.fa-margin-right {
  margin-right: 5px;  
}
.fa-margin-right-lg {
  margin-right: 10px;  
}

.nowrap {
  white-space: nowrap;
}
.tight {
  width: 1%;
  white-space: nowrap;
}
.right {
  text-align: right;
}


h2, 
h3, .h3 {
  font-weight: bold;
  margin-bottom: 15px;
}


a,
a:hover,
a:active,
a:focus {
  color: #870000;
}

.navbar {
  background-color: #870000;
}

.navbar-brand {
  font-size: 16px;
}
.navbar-brand img {
  width: 141px;
  box-sizing: content-box;
  padding-right: 10px;
  margin-right: 5px;
  border-right: 1px solid rgba(255,255,255,.3);
  filter: brightness(0%) invert(100%);
}
.navbar-brand .sep {
  opacity: .25;
}

.navbar-user .dropdown-toggle {
  color: #fff;
  cursor: pointer;
}
.navbar-user .dropdown-toggle span {
  font-weight: bold;
  font-size: 15px;
}

.navsub {
  border-top: 1px solid rgba(255,255,255,.1);
  background-color: #39404d;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navsub a {
  color: #fff;
  text-decoration: none !important;
}
.navsub .app-section {
  font-family: 'PT Serif', serif;
  color: #fff;
  font-weight: bold;
}

.btn.btn-action {
  background-color: #fc8009;
  color: #fff;
}
.btn.btn-action-alt {
  background-color: #870000;
  color: #fff;
}
.btn-link,
.btn-link:hover,
.btn-link:active,
.btn-link:focus {
  color: #870000;
  text-decoration: none;
}

.btn-group.btn-group-select {
  border: 1px solid #ced4da;
  border-radius: 6px;
}
.btn-group.btn-group-select .btn {
  color: #ced4da;
  min-width: 50px;
  border-right: 1px solid #ced4da;
  height: 36px;
  line-height: 0;
}
.btn-group.btn-group-select .btn:last-child {
  border-right: none;
}
.btn-group.btn-group-select .btn.is-selected {
  background-color: #e9ecef;
  color: #495057;
}
.btn-group>.btn:not(:first-child) {
  margin-left: 0px;
}

input ~ ul {
  color: #6c757d;
  font-size: 80%;
  font-weight: 400;
  margin-top: 5px;
}
.input-group-text.input-bg-color {
  background-color: #fff;
}

#response .alert {
  margin-bottom: 0px;
  border-radius: 0px;
  border: 0;
}

#content {
  padding: 20px;
  background-color: #fff;
}

#box-no-access,
#box-not-found {
  margin-top: 50px;
  margin-bottom: 40px;
}

#row-login {
  margin-top: 20px;
  margin-bottom: 20px;
}

.table-sticky {
  margin: 0px;
}
.table-key-value th {
  vertical-align: middle;
}

#app-sections {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
#app-sections .app-section {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 145px;
  width: 145px;
  background-color: #eee;
  border-radius: 10px;
  align-self: center;
  text-decoration: none;
  color: #333;
  margin: 10px;
  transition: ease .2s;
}
#app-sections .app-section:hover {
  transform: scale(1.1) rotate(2deg);
}
#app-sections .app-section .fa {
  color: #333;
  text-shadow: 2px 2px #fff;
}
#app-sections .app-section .name {
  margin-top: 10px;
  font-family: 'PT Serif', serif;
  font-weight: bold;
  text-shadow: 1px 1px #fff;
}
#app-sections .app-section.app-section-fake {
  background-color: transparent;
  transform: none;
  height: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#break-reports {
  padding-top: 5px;
}

#orders .order,
#order-items .order-item,
#break-reports .report {
  background-color: #eee;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}
#order-items .order-item.supply-order-item {
  padding-bottom: 10px;
}
#orders .order:last-child,
#order-items .order-item:last-child,
#break-reports .report:last-child {
  margin-bottom: 0px;
}

#orders .order.order-high-priority {
  background-color: #fff3cc;
}
#orders #orders-high-priority h4 {
  font-weight: bold;
}

#orders .order .order-id {
  font-weight: bold;
  font-size: 26px;
  margin-top: 3px;
}
#orders .order ul.products {
  padding-left: 20px;
}

#orders-filter {
  background-color: #fff; 
  padding: 10px 20px; 
  margin: -20px -20px 20px -20px; 
  border-bottom: 1px solid #870000;
}
#orders-filter .btn .badge {
  margin-left: 7px;
  font-size: 16px;
  top: 0px;
}
#orders-filter .btn-action .badge {
  color: #fc8009;
  background-color: #fff;
}
#orders-filter .btn-link .badge {
  background-color: #870000;
  color: #fff;
}

#page-actions {
  margin-top: -5px;
  width: 200px;
  float: right;
}

#order-previous-actions .order-action {
  background-color: #eee;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 25px;
}

#filter-options {
  border: 1px solid #870000; 
  border-radius: 4px; 
  padding: 2px 0px 2px 5px; 
  margin-bottom: 20px;
}
#filter-options h5 {
  margin: 5px 0px 5px 5px; 
  color: #870000;
  font-weight: bold;
}
#filter-options table {
  margin-bottom: 0px;
}
#modal-product-stock .product-image,
#order-items .order-item .product-image,
#break-reports .report .product-image {
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
}
#modal-product-stock .product-image .product-nr,
#order-items .order-item .product-image .product-nr,
#break-reports .report .product-image .product-nr {
  position: absolute;
  width: 60px;
  left: 50%;
  margin-left: -30px;
  top: 77px;
  border-radius: 20px;
  color: #fff;
  background-color: rgba(56,56,56,.75);
  font-size: 12px;
  text-align: center;
}
#modal-product-stock .product-image img,
#order-items .order-item .product-image img,
#break-reports .report .product-image img {
  height: 100px;
  width: 100px;
}
#modal-product-stock .product-details,
#order-items .order-item .product-details,
#break-reports .report .product-details {
  padding-left: 5px;
}
#modal-product-stock .product-details > b:first-child,
#order-items .order-item .product-details > b:first-child,
#break-reports .report .product-details > b:first-child {
  font-size: 20px;
}
#order-items .order-item.has-extra {
  margin-bottom: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
#order-items .order-item.is-extra {
  background-color: #fff;
  border: 1px solid #eee;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding-bottom: 10px;
}
#order-items .order-item.is-extra .product-image img {
  height: 1px;
  opacity: 0;
}
#order-items .order-item.is-external {
  opacity: .5;
}
#order-items .order-item.is-external.is-extra {
  background-color: #fff;
  border-color: #fff3cc;
}

#break-reports .report .reported {
  font-size: 14px;
  margin-bottom: 10px;
}
#break-reports .report .report-info .h3 {
  margin-bottom: 0px;
}
#break-reports .report .attachments {
  margin-top: 5px; 
  margin-bottom: 5px;
}


#page-actions a.margin-top {
  margin-top: .5rem;
}

#modal-order-opmerkingen .comment {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 15px;
  padding-top: 15px;
}
#modal-order-opmerkingen .comment:first-child {
  padding-top: 0px;
}
#modal-order-opmerkingen .comment:last-child {
  border-bottom: 0;
  padding-bottom: 0px;
}


#modal-order-item-extra form {
  background-color: #fff3cc;
  margin-top: 20px;
  padding-top: 10px;
  border-radius: 4px;
}
#modal-order-item-extra form .enter-extra > div {
  font-family: 'PT Serif', serif;
  text-align: center;
}
#modal-order-item-extra form .arrows {
  margin-top: 45px;
}
#modal-order-item-extra form .enter-extra input {
  font-family: 'PT Serif', serif;
  font-size: 1.75rem;
  font-weight: bold;
  text-align: center;
}
#modal-order-item-extra .product .is-extra {
  display: none;
}


#modal-supply-order-item-edit .btn-group-select button {
  width: 120px;
}
#modal-supply-order-item-edit .input-supply-order-item-quantity-delivered,
#modal-supply-order-item-edit .input-supply-order-item-weight-ton-delivered {
  flex: none;
  width: 120px;
  text-align: right;
}


.search-wrapper {
  position: relative;
  margin-bottom: 20px;
}
.search-wrapper .clear-q {
  position: absolute;
  height: 38px;
  width: 38px;
  text-align: center;
  line-height: 40px;
  top: 0px;
  right: 0px;
  color: inherit;
}


.modal-filter .filter {
  border: 1px solid #6c757d;
  border-radius: 4px;
  padding: 0px 0px 0px 10px;
  margin-top: 5px; 
  margin-bottom: 5px;
  cursor: pointer;
}
.modal-filter .filter .col {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 18px;
}
.modal-filter .filter.filter-reset {
  padding: 0px;
  margin-bottom: 20px;
}
.modal-filter .filter-q {
  position: relative;
}
.modal-filter .filter-q .filter-clear-q {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 38px;
  width: 38px;
  text-align: center;
  line-height: 38px;
  cursor: pointer;
}
.modal-filter .filter .product-id {
  text-align: right;
}
.modal-filter .filter .product-id b {
  display: inline-block; 
  width: 50px;
}
.modal-filter .filter .btn {
  border-radius: 0px;
}


.attachment-container input.attachment {
  position: absolute;
  overflow: hidden;
  height: .1px;
  width: .1px;
  opacity: 0;
  z-index: -1;
}
.attachment-container label {
  cursor: pointer;
  margin-bottom: 0px;
}
.attachment-container label > i {
  font-size: 24px;
  margin-right: 10px;
}
.attachment-container label span {
  vertical-align: text-bottom;
  font-size: 12px;
  line-height: 22px;
}
.attachment-container .attachment-list .attachment {
  border: 1px solid #ced4da;
  border-top-width: 0px;
  font-size: 12px;
  padding-left: 10px;
}
.attachment-container .attachment-list .attachment:first-child {
  margin-top: 4px;
  border-top-width: 1px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.attachment-container .attachment-list .attachment:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.attachment-container .attachment-list .attachment .col {
  align-self: center !important;
}
.attachment-container .attachment-list .attachment button {
  padding: 3px 10px;
}


.bootbox.bootbox-alert-basic .bootbox-body {
  text-align: center;
}
.bootbox.bootbox-alert-basic .modal-footer {
  border-top: none;
  justify-content: center;
  padding-top: 0;
}
.bootbox.bootbox-alert-basic .modal-footer button {
  width: 75px;
}

.bootbox.bootbox-confirm .modal-footer button {
  min-width: 75px;
}