.inline-editable {
  cursor: text;
  /*font-weight: bold;*/
}

.inline-editable input {
  max-width: 80%;
}

.align-right {
  text-align: right;
  justify-content: flex-end;
}

.red {
  color: red;
}

hr {
  border-top: solid 1px #ccc;
}

th {
  vertical-align: middle;
  position: relative;
}

.relative {
  position: relative;
}

sup.fa {
  font-size: 1.3em;
}

table td label {
  margin: 0px;
}

/* fix for chrome scroll anchoring, which is set as default since chrome 56 */
body, .no-overflow-anchor {
  overflow-anchor: none;
}

.ngdialog.ngdialog-theme-default .ngdialog-content {
  font-family: Roboto, Arial;
}

.ngdialog.ngdialog-theme-default .ngdialog-close:before {
  color: #484444;
}

.ngdialog.ngdialog-theme-default .ngdialog-close:hover:before,
.ngdialog.ngdialog-theme-default .ngdialog-close:active:before {
  color: #797373;
}

div.ngdialog.overlay-responsive {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

div.ngdialog.ngdialog-theme-default.overlay-responsive {
  padding-bottom: 0px;
  padding-top: 0px;
}

div.ngdialog.overlay-responsive div.ngdialog-content {
  width: 90%;
  height: 90%;
  max-height: 90%;
  overflow-y: auto;
}

.ng-dialog-container {
  height: 100%;
  padding-bottom: 40px;
  padding-top: 20px;
}

.ng-dialog-container.no-buttons {
  padding-bottom: 0px;
}

.ng-dialog-content-fill {
  height: 100%;
}

.ng-dialog-title {
  position: absolute;
  top: 6px;
  left: 0;
  font-size: 1.5em;
  width: 100%;
  text-align: center;
}

.ng-dialog-buttons {
  text-align: right;
  margin-top: 14px;
}

.ng-dialog-scroll-content {
  height: 100%;
  overflow: auto;
}

.ng-dialog-scroll-content[scroller] {
  height: 100%;
  overflow: unset;
}

/*
.movement-products-container .stock-movement-product-name {
  width: 60%;
}

.movement-products-container input {
  width: 30px;
  line-height: 1em;
}
*/

input {
  padding: 8px;
  border-radius: 3px;
  border: solid 1px #bbb;
}

table[ng-table] input {
  width: 90%;
}

table[ng-table] button {
  height: 20px;
  line-height: 20px;
}

table[ng-table] tr td > div {
  min-height: 14px;
  overflow: hidden;
}

table[ng-table] tr td, table[ng-table] th {
  overflow: hidden;
}

.ng-table-type-image {
  margin-top: 2px;
}

.selectize-input {
  height: 34px;
}

table[ng-table] .selectize-input, .new-row-select .selectize-input {
  height: 32px;
}

.selectize-control > .selectize-dropdown {
  width: auto;
  min-width: 100%;
  max-width: 300px;
}

.ui-select-choices-content .selectize-dropdown-content {
  overflow-x: visible;
}

.selectize-input input {
  height: unset !important;
}

.ui-select-container.select2 {
  width: 100%;
}

.ui-select-container.ui-select-multiple.open {
  min-width: 250px;
}

.select2-results .ui-select-choices-row {
  /*height: 28px;*/
  line-height: 22px;
}

.select2-container-multi .select2-choices {
}

.ui-select-container.ui-select-multiple .select2-choices .select2-search-field input {
  font-size: 13px;
}

.select2.ui-select-multiple.select2-container-multi .select2-choices {
  background-color: transparent;
  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2) !important;
  background-repeat: repeat-x;
}

.ui-select-container.select2 .select2-search-choice {
  font-size: 0.8em;
}

.selectize-dropdown .active,
.ui-select-container.ui-select-multiple .ui-select-choices li.select2-highlighted {
  color: #fff;
  background-color: #525252;
  opacity: 0.9;
}

.ui-select-container.ui-select-multiple .select2-search-field {
  width: 100%;
}

.ui-select-container.ui-select-multiple .select2-search-field input {
  position: relative;
  z-index: 1;
  width: 100% !important;
  padding: 8px 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.selectize-input {
  border-radius: 3px;
}

.ui-select-match {
  width: 100%;
}

.selectize-control.single .selectize-input {
  background-color: #fff;
  background-image: none;
}

.selectize-control.single .selectize-input:after {
  display: none;
  /*right: 10px;
*/
}

.selectize-input .reset-select {
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 2em;
  margin-top: 0px;
  color: #F15252;
  opacity: 0.8;
}

/*.location-edit-container .selectize-input .reset-select {
  top: 10px;
}*/

.selectize-input .reset-select:hover {
  opacity: 1;
  transition: opacity 0.2s ease;
}

table tbody tr td {
  vertical-align: middle;
}

.ng-table-container {
  width: 98%;
  margin: 0 auto;
  margin-bottom: 40px;
}

table[ng-table] {
  table-layout: fixed;
  min-width: 750px;
}

table[ng-table] tr td div.ui-select-container {
  /* height: 34px; */
  overflow: unset;
  top: 4px;
  max-width: 90%;
  margin: 0 auto;
}

.ui-select-container {
  height: 40px;
  position: relative;
  z-index: 100;
  margin: 0 auto;
}

.ui-select-container.ui-select-multiple {
  height: unset;
}

body > .ui-select-container.open {
  z-index: 1100; /* must be higher than that of the .tooltip */
}

table[ng-table] tr td div.inline-editable {
  position: relative;
}

table[ng-table] tr td > div:not(.tooltip) {
  height: 40px;
  line-height: 40px;
}
table[ng-table] tr td.ng-table-date:not(.ng-table-type-action) div:not(.tooltip) {
  line-height:20px !important;
}

table[ng-table] tr td:not(.ng-table-type-action) div:not(.tooltip),
table[ng-table] tr td:not(.ng-table-type-action) div:not(.tooltip) div {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tooltip {
  max-width: 90%;
}

.tooltip-inner {
  max-width: 100%;
}

.inline-editable .ui-select-container {
  height: 35px;
  width: 95%;
}

.ui-select-choices-content {
  background-color: #fff;
}

.selectize-dropdown {
  margin: -4px 0 0 0;
}

.select2-drop {
 border-radius: 0 0 0 0;
}

.ui-select-container.choices-top .ui-select-choices.selectize-dropdown, .ui-select-container.choices-top .select2-drop {
  top: unset;
  bottom: 100%;
}

.select2-drop-active {
  border-color: #b8b8b8;
  border-top: solid 1px #b8b8b8;
}

.select2-container-multi.select2-container-active .select2-choices {

  border-color: #b8b8b8;
}

#angular-loading-overlay  {
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  display: none;
  z-index: 200;
}

#angular-loading-overlay .alo-dim {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: rgba(244, 244, 244, .55);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-animation: alo-dim-in 220ms ease-out;
  animation: alo-dim-in 220ms ease-out;
}

#angular-loading-overlay .alo-plaque {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .14);
  -webkit-animation: alo-plaque-in 220ms ease-out 60ms both;
  animation: alo-plaque-in 220ms ease-out 60ms both;
}

#angular-loading-overlay.alo-pending {
  cursor: progress;
}

/* alo-pending: input is already blocked, but nothing is visible yet (first 500ms).
   Without the class (e.g. ng-table.js jQuery show()) the loader is simply visible. */
#angular-loading-overlay.alo-pending .alo-dim {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-animation: none;
  animation: none;
}

#angular-loading-overlay.alo-pending .alo-plaque {
  opacity: 0;
  -webkit-animation: none;
  animation: none;
}

/* alo-back: a new request arrived during the fade-out; stay visible without replaying the fade-in */
#angular-loading-overlay.alo-back .alo-dim,
#angular-loading-overlay.alo-back .alo-plaque {
  -webkit-animation: none;
  animation: none;
}

/* fade out (class set by loading-overlay.js; input is released at once); never fade the container itself:
   an ancestor with opacity < 1 would kill the backdrop-filter of .alo-dim */
#angular-loading-overlay.alo-out {
  pointer-events: none;
}

#angular-loading-overlay.alo-out .alo-dim {
  -webkit-animation: alo-dim-out 180ms ease-in forwards;
  animation: alo-dim-out 180ms ease-in forwards;
}

#angular-loading-overlay.alo-out .alo-plaque {
  -webkit-animation: alo-plaque-out 180ms ease-in forwards;
  animation: alo-plaque-out 180ms ease-in forwards;
}

#angular-loading-overlay .alo-tile {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  margin-right: 5px;
  opacity: .45;
  -webkit-animation: alo-tile 1.1s ease-in-out infinite;
  animation: alo-tile 1.1s ease-in-out infinite;
}

#angular-loading-overlay .alo-tile:nth-child(1) { background: #1d6f8c; }
#angular-loading-overlay .alo-tile:nth-child(2) { background: #18a39b; -webkit-animation-delay: .12s; animation-delay: .12s; }
#angular-loading-overlay .alo-tile:nth-child(3) { background: #3cc6b4; -webkit-animation-delay: .24s; animation-delay: .24s; }
#angular-loading-overlay .alo-tile:nth-child(4) { background: #2a9fd8; -webkit-animation-delay: .36s; animation-delay: .36s; margin-right: 0; }

@-webkit-keyframes alo-dim-in {
  from { background-color: rgba(244, 244, 244, 0); -webkit-backdrop-filter: blur(0); }
  to { background-color: rgba(244, 244, 244, .55); -webkit-backdrop-filter: blur(1px); }
}

@-webkit-keyframes alo-dim-out {
  from { background-color: rgba(244, 244, 244, .55); -webkit-backdrop-filter: blur(1px); }
  to { background-color: rgba(244, 244, 244, 0); -webkit-backdrop-filter: blur(0); }
}

@-webkit-keyframes alo-plaque-in {
  from { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(.92); }
  to { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); }
}

@-webkit-keyframes alo-plaque-out {
  from { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(.92); }
}

@keyframes alo-dim-in {
  from { background-color: rgba(244, 244, 244, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to { background-color: rgba(244, 244, 244, .55); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
}

@keyframes alo-dim-out {
  from { background-color: rgba(244, 244, 244, .55); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
  to { background-color: rgba(244, 244, 244, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
}

@keyframes alo-plaque-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes alo-plaque-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
}

@-webkit-keyframes alo-tile {
  0%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: .45; }
  30% { -webkit-transform: translateY(-7px); transform: translateY(-7px); opacity: 1; }
}

@keyframes alo-tile {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-7px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #angular-loading-overlay .alo-dim,
  #angular-loading-overlay .alo-plaque,
  #angular-loading-overlay.alo-out .alo-dim,
  #angular-loading-overlay.alo-out .alo-plaque {
    -webkit-animation-duration: 1ms;
    animation-duration: 1ms;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }

  #angular-loading-overlay .alo-tile {
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
  }
}

/* ecos tiles: reusable inline loader (same look as the global overlay), e.g. dashboard widgets.
   Markup: <span class="ecos-tiles"><i></i><i></i><i></i><i></i></span> (no fa classes) */
.ecos-tiles {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-animation: ecos-tiles-in 200ms ease-out;
  animation: ecos-tiles-in 200ms ease-out;
}

.ecos-tiles > i {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  margin-right: 5px;
  opacity: .45;
  -webkit-animation: alo-tile 1.1s ease-in-out infinite;
  animation: alo-tile 1.1s ease-in-out infinite;
}

.ecos-tiles > i:nth-child(1) { background: #1d6f8c; }
.ecos-tiles > i:nth-child(2) { background: #18a39b; -webkit-animation-delay: .12s; animation-delay: .12s; }
.ecos-tiles > i:nth-child(3) { background: #3cc6b4; -webkit-animation-delay: .24s; animation-delay: .24s; }
.ecos-tiles > i:nth-child(4) { background: #2a9fd8; -webkit-animation-delay: .36s; animation-delay: .36s; margin-right: 0; }

@-webkit-keyframes ecos-tiles-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ecos-tiles-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ecos-tiles {
    -webkit-animation-duration: 1ms;
    animation-duration: 1ms;
  }

  .ecos-tiles > i {
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
  }
}

/* Inline variant: scales with the font-size of its surroundings, replaces
   <i class="fa fa-spinner fa-spin [fa-2x]"> 1:1. Size helpers mirror fa-2x/fa-3x. */
.ecos-tiles.ecos-tiles-inline {
  vertical-align: middle;
  height: 1em;
  line-height: 1;
}

.ecos-tiles.ecos-tiles-inline > i {
  width: .42em;
  height: .42em;
  border-radius: .1em;
  margin-right: .16em;
  -webkit-animation-name: ecos-tile-inline;
  animation-name: ecos-tile-inline;
}

.ecos-tiles.ecos-tiles-inline > i:nth-child(4) { margin-right: 0; }

.ecos-tiles.ecos-tiles-2x { font-size: 2em; }
.ecos-tiles.ecos-tiles-3x { font-size: 3em; }

@-webkit-keyframes ecos-tile-inline {
  0%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: .45; }
  30% { -webkit-transform: translateY(-.25em); transform: translateY(-.25em); opacity: 1; }
}

@keyframes ecos-tile-inline {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-.25em); opacity: 1; }
}

.green {
  color: green;
}

.red {
  color: red;
}

td .fa {
  margin-top: 8px;
}

i.action {
  cursor: pointer
}

.inputButton.no-float {
  float: none;
}

.inputButton.no-width {
  min-width: unset;
}

.boxWrapper h1 {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
}

.table-actions {
  height: 40px;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-end;
  line-height: 40px;
}

.table-actions .inputButton {
  float: none;
}

.inline-editable:hover {
  text-decoration: underline;
  cursor: pointer;
}

table[ng-table] tr td div.inline-editable div.ui-select-choices-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: 200px;
}

.table-search, .table-search:hover {
  background-color: #e5e5e5;
}

table[ng-table] tr td div.inline-editable div.ui-select-container .selectize-input {
  height: 30px;
}

table[ng-table] tr td div.inline-editable div.ui-select-container .selectize-dropdown {
  top: 29px;
}

tr .toggle-class:before {
  content: "\f070";
}

tr[disabled] .toggle-class:before {
  content: "\f06e";
}

.ng-table-scroll-container {
  height: 100%;
}

table[ng-table] tr.highlight-dropzone {
  border: dashed 2px #666;
  opacity: 0.6;
}

table[ng-table] tbody tr td {
  padding-left: 0px;
  overflow: hidden;
}

table[ng-table] tbody tr[disabled] {
  color: #989898;
  font-style: 'italic';
}

table[ng-table] tbody tr.table-new-object-row, table[ng-table] tbody tr.table-new-object-row:hover td {
  background-color: #61B161;
}

table[ng-table] tbody tr.table-new-object-row td.add-button {
  color: #fff;
  cursor: pointer;
  transition: all 0.5s ease;
}

table[ng-table] tbody tr.table-new-object-row td.add-button:hover {
  background-color: #fff;
  color: #61B161;
}

[ng-table] td .fa {
  opacity: 0.85;
}

[ng-table] td .fa:hover {
  opacity: 1;
}

[ng-table] td i.fa-trash-o:hover {
  color: #f00;
}

.new-form-submitted .ng-invalid, .force-ng-invalid {
  border: solid 1px #f00;
}

table[ng-table] tr td div.ui-select-container.ng-invalid,
table[ng-table] tr td div.ui-select-container.force-ng-invalid {
  height: 34px;
}

body .ngdialog {
  z-index: 101;
}

.go-bottomtop {
  position: fixed;
  bottom: 5px;
  left: 50%;
  font-size: 2.5em;
  cursor: pointer;
  color: #333;
  z-index: 99;
}

.scroll-table-to-top {
  position: relative;
  cursor: pointer;
  color: #333;
  z-index: 99;
  bottom: 5px;
  margin-right: 32px;
}

.scroll-table-to-bottom {
  position: relative;
  cursor: pointer;
  color: #333;
  z-index: 99;
  bottom: 5px;
  margin-left: 32px;
}

form .inline-field {
  margin-top: 2px;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}

form hr {
  margin-top: 4px;
  margin-bottom: 2px;
}
/*
form .inline-field span {
  text-align: center;
}
*/
form input {
  padding: 6px;
  width: 100%;
  padding-bottom: 5px;
}

form textarea {
  width: 100%;
}

form .inline-field:last-child {
  margin-bottom: 0px;
}

form .inline-field label {
  width: 45%;
  margin-right: 10px;
  margin-bottom: 0px;
  margin-left: 0px;
  color: #333;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
}

form .inline-field label .label-config {
  position: absolute;
  right: 5px;
}

form .inline-field > span {
  width: 53%;
  /*width: 55%;*/
}

form .inline-field legend {
  font-size: 0.8em;
  color: #888;
  line-height: 1em;
}

form div.inline-field span > input[type=checkbox] {
  margin-top: 0px;
  margin: inherit;
}

form input[type=checkbox] {
  margin-top: 10px;
  width: unset;
}

form input[type=submit], form input[type=button] {
  width: unset;
}

form div.block-field {
  margin-bottom: 6px;
}

form div.block-field.no-label {
  padding-top: 7px;
}

.product-variants-container {
  margin: 0 auto;
}

#boxPrices .price-from-all {
  background-color: #eee;
}

.page-edit-container {
  width: 100%;
}

.page-edit-grid {
  background-color: #201f1f;
}

.button-add-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: center;
}

.button-add-container .ui-select-container {
  width: 300px;
  margin: unset;
}

.button-add-container div.selectize-input {
  color: #2A772A !important;
  border-color: #2A772A !important;
}

.button-add-container .selectize-control.single .selectize-input, .button-add-container .selectize-control.single .selectize-input input {
  border-color: #2A772A !important;
}

.button-add-container .selectize-input .add-icon {
  position: absolute;
  top:4px;
  right: 6px;
}

.page-edit-grid .grid-stack-item-content {
  background-color: #bcbcbc;
  color: #fff;
}

.grid-stack-item-content {
  cursor: move;
}

.grid-stack-item-content .grid-item-toggle:hover {
  /*color: rgba(255, 70, 70, 0.8);*/
}
.grid-stack-item-content .grid-item-toggle {
  position:absolute;
  top: 0px;
  left: 0px;
  color: #aaa;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
}

.grid-stack-item-content .grid-item-delete {
  position:absolute;
  top: 0px;
  right: 0px;
  color: #fff;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  display: none;
}

.grid-stack-item-content .grid-item-delete:hover {
  color: rgba(255, 70, 70, 0.8);
}

.grid-item-color-picker {
  background: url(../image/color-picker.png);
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  display: none;
}

.grid-item-color-name {
  position: absolute;
  bottom: 0px;
  left: 24px;
  font-size: 8px;
  line-height: 10px;
  display: none;
}

.grid-disabled-indicator {
  background: url(../image/icon_off.png);
  width: 42px;
  height: 32px;
  display: none;
  position: absolute;
  top: -2px;
  right: -6px;
  background-size: 42px 32px;
  background-repeat: no-repeat;
  z-index: -1;
}

.page-edit-grid .grid-stack-item[itemdisabled=true] .grid-disabled-indicator {
  display: block;
}

.page-edit-grid .grid-stack-item[itemdisabled=true] .grid-stack-item-content {
  opacity: 0.8;
  border-color: #f00;
  border-width: 1px;
  border-style: dotted;
}

.grid-page-indicator {
  /*background: url(../image/category-indicator.png);
  width: 32px;
  height: 26px;*/
  display: none;
  position: absolute;
  top: 3px;
  left: 3px;
  background-size: 20px 16px;
  background-repeat: no-repeat;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #505050;
  color: darkgrey;
}

.page-edit-grid .grid-stack-item[type=page] .grid-page-indicator {
  display: block;
}

.grid-stack-item-content:hover .grid-item-delete, .grid-stack-item-content:hover .grid-item-color-picker, .grid-stack-item-content:hover .grid-item-color-name {
  display: block;
}

.grid-item-name {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  height: 100%;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

body .grid-stack > .grid-stack-item > .ui-resizable-se, body .grid-stack > .grid-stack-item > .ui-resizable-sw {
  color: #fff;
}

body .grid-stack > .grid-stack-item > .ui-resizable-sw {
  height: 15px;
  left: 5px;
}

.grid-color-picker {
  position: absolute;
  display: none;
  width: 300px;
}

.page-dialog .ngdialog-content {
  height:80%;
}

.page-dialog.page-width-4 .ngdialog-content {
  min-width: 450px;
  max-width: 650px;
}

.page-dialog.page-width-6 .ngdialog-content {
  min-width: 650px;
  max-width: 850px;
}

.page-dialog.page-width-8 .ngdialog-content {
  min-width: 850px;
  max-width: 1050px;
}

.page-dialog.page-width-12 .ngdialog-content {
  min-width: 1050px;
  max-width: 1350px;
}

.pageitem-option {
  line-height: 20px;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}

.pageitem-option img {
  height: 20px;
  margin-right: 6px;
  display: none;
}

.pageitem-option.pageitem-type-category img {
  display: inline-block;
}

.pageitem-option.pageitem-type-product {
  margin-left: 30px;
}

.pageitem-type {
  float: right;
}

.tse-scrollable.grid-container {
  height: 100%;
  background-color: #201f1f;
  padding-top: 12px;
  padding-bottom: 12px;
}

.page-edit-container .back {
  position: absolute;
  color: #484444;
  cursor: pointer;
  top: 8px;
  left: 10px;
}

.page-edit-container .back:hover {
  color: #797373;
}

.page-edit-container .button-add-container {
  height: 40px;
}

.button-add-container .new-name {
  padding: 3px;
  width: 160px;
}

.button-add-container .new-price {
  padding: 3px;
  width: 50px;
}

.new-product .add-button {
  top: 5px;
  position: relative;
}

.new-product .new-product-text {
  margin-right: 20px;
}

.new-product input[type="submit"] {
  display: none;
}

/* GRIDSTACK CSS FOR WIDTH 6
** taken from gridstack-extra.css
*/

.grid-stack.grid-stack-6 > .grid-stack-item {
  min-width: 16.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='1'] {
  width: 16.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='1'] {
  left: 16.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='1'] {
  min-width: 16.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='1'] {
  max-width: 16.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='2'] {
  width: 33.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='2'] {
  left: 33.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='2'] {
  min-width: 33.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='2'] {
  max-width: 33.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='3'] {
  width: 50%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='3'] {
  left: 50%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='3'] {
  min-width: 50%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='3'] {
  max-width: 50%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='4'] {
  width: 66.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='4'] {
  left: 66.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='4'] {
  min-width: 66.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='4'] {
  max-width: 66.66666667%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='5'] {
  width: 83.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='5'] {
  left: 83.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='5'] {
  min-width: 83.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='5'] {
  max-width: 83.33333333%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='6'] {
  width: 100%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='6'] {
  left: 100%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='6'] {
  min-width: 100%;
}
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='6'] {
  max-width: 100%;
}

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

.locations-actions .locations-notes {
  margin-left: 10px;
  color: #2b80cc;
  font-size: 14px;
  max-width: calc(100% - 350px);
}

.locations-actions .inputButton {
  float: none;
}

.location-tabs {
  margin-bottom: 12px;
}

.bontype-mini {
  height: 22px;
  vertical-align: middle;
  margin-right: 4px;
}

.ngdialog.location-dialog.overlay-responsive div.ngdialog-content {
  width: 50%;
  height: 80%;
}

.ngdialog.location-connection-dialog.overlay-responsive div.ngdialog-content {
  width: 500px;
  height: unset;
}

/* DIAGRAM STUFF */
/* elements */

.devs text {
  text-transform: uppercase;
  font-weight: 800;
}

.devs .label {
  font-size: 16px;
}

.devs .inPorts text {
  display: none;
}

/* links */

.link .connection {
  stroke: #ccc;
  stroke-width: 3px;
}

.link .connection:hover {
  stroke: #feb663;
}

connections-diagram .marker-arrowheads {
  display: none;
}

.link-tools {
  opacity: 0.2;
}

.element, .link {
  cursor: pointer;
}

.element.devs.Location image.inreports {
}

.element.devs.Location image.delete-location {
  opacity: 0.3;
  transition: all 0.3s ease;
}

.element.devs.Location:hover image.delete-location {
  opacity: 0.7;
}

.element.devs.Location:hover image.delete-location:hover {
  opacity: 1;
}

connections-diagram {
  display: block;
  overflow: auto;
}

connections-diagram svg {
  margin-top: 10px;
  margin-left: 10px;
  border-style: solid;
  border-radius: 6px;
  border-width: 2px;
}

/* no border for datepicker */
div#boxContent div.uib-datepicker table tbody tr td {
  border-left-width: 0px;
}

a.no-decoration,
a.no-decoration:hover,
a.no-decoration:active,
a.no-decoration:visited {
  text-decoration: none;
  color: inherit;
}

* {
  -webkit-touch-callout: none;
  /*
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  */
}

.datepicker-container {
  width: 100%;
  display: inline-block;
}

.datepicker-container th {
  vertical-align: middle;
}

.datepicker-container td {
  border: none;
  line-height: unset;
  padding-left: unset;
}

.datepicker-container tbody tr,
.datepicker-container thead tr {
  border-bottom: none;
  border-top: none;
  border-right: none;
  border-left: none;
  height: inherit;
  line-height: inherit;
}

.datepicker-container thead tr th {
  border: none;
  height: 20px;
}

.datepicker-container table {
  margin-bottom: 6px;
}

div.datepicker-container .dropdown-menu {
  padding-bottom: 0px;
  width: 264px;
  /* min-height, not height: a month with six week rows filled the fixed 290px and pushed the
     button bar ("Uhrzeit", "Schliessen") out of the popup, so no time could be chosen */
  min-height: 290px;
}

li.time-picker-menu {
  margin-top: 64px;
  margin-bottom: 64px;
}

.datepicker-container tbody tr:hover td {
  background-color: transparent;
}

.datepicker-container input.form-control[readonly] {
  cursor: pointer;
  background: #fff;
}

.datepicker-container .btn-info {
  background-color: #707070;
  border-color: #969696;
}

.datepicker-container .btn-info.active {
  background-color: #707070;
  border-color: #969696;
}

/* current day */
.datepicker-container .text-info {
  color: #74B975;
  font-weight: bold;
}

.datepicker-container .active .text-info {
  color: #fff;
}

.no-table-entries {
  width: 100%;
  text-align: center;
}

table[ng-table] tbody tr.no-table-entries:hover td, table[ng-table] tbody tr.totals-row:hover td {
  background-color: transparent;
}

.totals-row {
  font-weight: bold;
  /*background-color: gainsboro;*/
  background-color: #f3f3f3;
}

#journal-caption {
  color: #777;
  margin-bottom: 20px;
}

#journal-caption .fa-refresh {
  font-size: 1.3em;
  margin-left: 4px;
}

[ng-table] caption {
  margin-bottom: 10px;
}

.bontype-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: space-around;
}

.bontype-container div {
  padding-top: 6px;
  padding-left: 4px;
  padding-right: 4px;
}

.bontype-container div {
  cursor: pointer;
  border: dashed 2px transparent;
  opacity: 0.5;
}

.bontype-container div.bontype-selected {
  border-color: #383535;
  opacity: 1;
}

#overview-container .inputButton {
  float: none;
}

.overview-shortcuts {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.overview-shortcuts div {
  margin-bottom: 20px;
}

#overview-container .datepicker-container {
  margin-bottom: 20px;
}

.overview-chart-container {
  position: relative;
  height: 400px;
}

overview-chart {
  position: absolute;
  width: calc(100% - 25px);
}

month-picker .uib-datepicker thead tr,
month-picker .uib-datepicker thead tr th,
month-picker .uib-datepicker tbody tr,
month-picker .uib-datepicker tbody tr td {
  border: none;
}

month-picker .uib-datepicker tbody tr td {
  padding-left: 0px;
}

month-picker .well {
  margin-bottom: 10px;
}

month-picker .uib-datepicker tbody tr {
  background-image: none;
  background-color: unset;
}

.months-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.months-container .half-year-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: space-between;
  flex: 1;
  min-width: 400px;
  margin-bottom: 4px;
}

.months-container .half-year-container div {
  width: 16%;
}

statistic-chart {
  position: absolute;
  width: calc(100% - 25px);
}

.statistic-pickers-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  /* Tops, not centres: the columns hold stacks of different height (a date alone,
     a date plus a time, a filter plus its hint) and centring floated "Bis" above
     "Von" so the two no longer read as one row. */
  align-items: flex-start;
  flex-wrap: wrap;
}

/* One header line per picker column: the label, and right beside it the switch
   that belongs to it - which has to stay visible while its fields are hidden.
   Every column carries this same head, empty ones included, so "Von" and "Bis"
   keep their labels on one line and the date fields below them line up. */
.statistic-field-head {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  min-height: 26px;
}

.statistic-field-head label {
  margin-bottom: 0;
}

.statistic-field-head label.inline-label,
.statistic-field-head .statistic-slot-actions {
  margin-left: 14px;
}

/* The time shares the date's field instead of opening a row of its own - turning
   the window on used to push everything below it down a line. Narrow and centred,
   so "01 Juli 2026 | 19:00" still reads date first. */
.input-group .form-control.statistic-time-input {
  width: 74px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

.statistic-date-group .input-group-addon.statistic-time-sep {
  padding-left: 6px;
  padding-right: 6px;
}

/* Bootstrap only squares off the first and last cell of a group; the calendar
   button now sits in the middle and would otherwise keep its rounded corners. */
.statistic-date-group .input-group-btn:not(:last-child) > .btn {
  border-radius: 0;
}

/* One row per saved window: what it is on the left, what you can do with it on
   the right. A bare icon was neither. */
.statistic-slot-list {
  margin-top: 6px;
  font-size: 12px;
}

.statistic-slot-row {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #eee;
}

.statistic-slot-row:last-child {
  border-bottom: 0;
}

.statistic-slot-name {
  margin-right: 10px;
}

.statistic-slot-buttons {
  white-space: nowrap;
}

.statistic-slot-buttons .btn + .btn {
  margin-left: 4px;
}

.statistic-range-summary {
  margin-top: 10px;
  color: #737373;
  font-size: 12px;
}

.statistic-chart-container {
  position: relative;
}

.statistic-type-select {
  margin-top: 6px;
}

.dd-options {
  max-height: 250px;
}

.fa-refresh {
  transition: transform .3s linear;
}

.fa-refresh:hover {
  transform: rotate(180deg);
}

.loading-container {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  min-height: 100px;
}

[summary-widget] {
  position: relative;
  height: 350px;
  border-color: #DADADA;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0px 0px 5px #dadada;
}

.summary-chart-container {
  position: absolute;
  width: 100%;
}

.summary-table {
  position: absolute;
  top: 300px;
}

#statGraph {
  width: 95%;
  margin: 0 auto;
}

/*.is-branch #statGraph #dashboard-month-chart {
  display: none;
}*/

@media(min-width: 660px) {
  #statGraph {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-around;
    flex-flow: row wrap;
  }
  .is-branch #statGraph #dashboard-month-chart {
    display: block;
  }
}

#statGraph > div {
  flex: 1;
  min-width: 300px;
  margin: 4px;
  position: relative;
}

[userconfig-toggle] {
  position: absolute;
  top: 4px;
  right: 10px;
  z-index: 1;
}

[userconfig-toggle] .btn {
  padding-top: 2px;
  padding-bottom: 2px;
}

[branch-widget] table,
[device-widget] table {
  margin-bottom: 14px;
  table-layout: fixed;
}

[branch-widget] table td,
[device-widget] table td {
  max-width: 20%;
  overflow: hidden;
}

#branchGraph {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-around;
  flex-flow: row wrap;
}

#branchGraph > p {
  text-align: center;
  font-size: 18px;
  color: #333;
}

#branchGraph > div {
  width: 95%;
  order: 1;
}


#deviceGraph {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-around;
  flex-flow: row wrap;
}

#deviceGraph > p, #ModuleNews > p {
  text-align: center;
  font-size: 18px;
  color: #333;
}

#deviceGraph > div {
  width: 95%;
  order: 1;
}

#webauth .login-button {
  width: 200px;
  color: #000;
}

.live-indicator {
  width: 100%;
  position: relative;
}

.live-indicator i {
  position: absolute;
  top: -7px;
  right: 2px;
  color: green;
  animation: blink-animation 2s steps(5, start) infinite;
  -webkit-animation: blink-animation 2s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.shopping-list-container .shopping-list-title, .shopping-list-container .select-supplier, .shopping-list-container .ng-dialog-title .ui-select-placeholder {
  display: inline-block;
}

.shopping-list-container .ng-dialog-title {
  top: -3px;
}

.ng-dialog-container.shopping-list-container {
  padding-top: 30px;
}

.shopping-list-container .select-supplier {
  top: 8px;
  height: 34px;
  width: 300px;
}

.movement-info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.movement-info-container > div {
  flex: 1;
  margin: 0 10px;
  min-width: 200px;
}

stock-chart {
  position: absolute;
  width: calc(100% - 25px);
}

visual-tables-diagram .link .connection {
  stroke-width: 8px;
  stroke: #ddd;
}

visual-tables-diagram .connection-wrap {
  stroke-width: 20px;
  fill: none;
  stroke: #999;
}

visual-tables-diagram .marker-vertex-group {
  opacity: 0.6;
}

visual-tables-diagram > svg > g > g.link > .link-tools {
  display: none;
}

.no-vertex-delete .marker-vertex-remove-area, .no-vertex-delete .marker-vertex-remove {
  display: none;
}

.VisualTable rect {
  stroke: #777;
}

.VisualTable text {
  fill: #222;
}

.VisualTable.unpaid text {
  fill: #fff;
  font-weight: bold;
}

.VisualTable text:hover {
  text-decoration: underline;
}

.VisualTable foreignObject {
  display: none;
}

.VisualTable foreignObject.editing {
  display: block;
}

.VisualTable foreignObject input {
  color: #000;
}

.VisualTable .element-tool-remove {
  opacity: 0.2;
}

.VisualTable:hover .element-tool-remove {
  opacity: 0.6;
}

visual-tables-diagram .marker-vertex-group title {
  display: none;
}

.visual-tables-diagram-container {
  width: 100%;
  height: 100%;
  border: dashed 1px #333;
  position: relative;
  overflow: hidden;
}

.visual-tables-zoom-buttons {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 0px;
  height: 100%;
  justify-content: center;
  color: #666;
}

.visual-tables-add-buttons {
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  width: 100%;
  justify-content: center;
  align-items: center;
  color: #666;
}


.visual-tables-zoom-buttons div, .visual-tables-add-buttons div {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

.visual-tables-add-buttons button {
  height: 36px;
  position: relative;
  padding: 0 12px;
}

.visual-tables-add-buttons button svg rect {
  fill: #a9a9a9;
}

.visual-tables-add-buttons button .fa-plus {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #72bd72;
}

.scale-to-fit {
  width: 55px;
  padding: 2px 10px;
}

.scale-to-fit path {
  fill: #666;
}

.fiscal-submit-btn {
  margin-top: 20px;
}

.fa-15x {
  font-size: 1.5em;
}

.disabled {
  color: #666;
}

.edit-price {
  position: relative;
}

.edit-price i {
  position: absolute;
  bottom: 0px;
  right: 4px;
}

.edit-price-disabled {
  color: #888;
}

.edit-price-null i {
  display: none;
}

.edit-price-null:hover i {
  display: block;
}

.config-container-selector-container {
  display: flex;
  flex: 0 0 auto;
  margin-bottom: 4px;
  min-height: 20px;
}

.config-container-selector-container .config-container {
  text-align: center;
  flex: 4;
  background-color: #ccc;
  line-height: 2em;
  border: solid 1px #888;
  border-left: none;
  cursor: pointer;
}

.config-container-selector-container .config-container:first-child {
  border: solid 1px #888;
}

.config-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.config-container .delete-container {
  color: #ff2e2e;
  opacity: 0.7;
  display: none;
  flex: 0 0 20px;
}

.config-container.active .delete-container {
  display: inline-block;
}

.config-container .delete-container:hover {
  opacity: 1;
}

.config-container .container-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.config-container.active {
  background-color: #fff;
}

.config-container-selector-container .new-config-container {
  flex: 1;
  background-color: rgba(0, 128, 0, 0.8);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.config-container-options {
  display: flex;
  min-height: 40px;
}

.config-container-options .container-option {
  width: 25%;
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px #8f8f8f solid;
}

.config-container-options .container-option label {
  font-weight: normal;
  padding: 6px;
}

.config-container-options .container-option .value {
  text-decoration: underline;
  cursor: pointer;
  width: 20%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.config-container-options .container-option.wide label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.config-container-options .container-option.wide .value {
  flex: 1;
}

.config-container-options .container-option.wide form input {
  max-width: 100%;
}

.config-container-options .inline-editable form input {
  text-align: center;
}

/* settings of a configurable selection page: one labelled row per topic, values as chips */
.config-sheet {
  margin: 8px 0;
  border: 1px solid #d8dce0;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
  /* .product-config-container is a flex column - without this the sheet is squeezed
     by the item grid below it and overflow:hidden cuts off its last row */
  flex: 0 0 auto;
}

.config-sheet .config-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #eceef0;
}

.config-sheet .config-row:last-child {
  border-bottom: none;
}

.config-sheet .config-row-label {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: #f6f7f9;
  border-right: 1px solid #eceef0;
  color: #7b858f;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.config-sheet .config-row-label[title] {
  cursor: help;
}

.config-sheet .config-container-options {
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-wrap: wrap;
  align-items: center;
  padding: 3px 4px;
}

.config-sheet .config-container-options .container-option {
  width: auto;
  flex: 0 0 auto;
  border: none;
  padding: 2px 8px;
  justify-content: flex-start;
}

.config-sheet .config-container-options .container-option label {
  padding: 0 7px 0 0;
  color: #5a6672;
  font-size: 12px;
}

.config-sheet .config-container-options .container-option .value {
  width: auto;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 3px;
  background-color: #edf0f3;
  color: #24313d;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.config-sheet .config-container-options .container-option .value:hover {
  background-color: #dde3e9;
}

.config-sheet .config-container-options .container-option.wide {
  flex: 1 1 240px;
  min-width: 0;
}

.config-sheet .config-container-options .container-option.wide .value {
  flex: 0 1 auto;
  text-align: left;
}

.config-sheet .container-option.wide ui-select {
  display: block;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.config-sheet .config-container-items-container {
  justify-content: flex-start;
  min-height: 0;
}

.config-sheet .config-container-type-selecter,
.config-sheet .config-container-items-selecter {
  width: 42%;
  margin: 0 8px 0 0;
}

.config-sheet .pageId {
  color: #7b858f;
  font-size: 11px;
  padding-left: 6px;
}

.config-resolved {
  padding-left: 8px;
  color: #666;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* plain-language summary of the current selection page */
.config-plain {
  flex: 0 0 auto;
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 3px solid #2f80c8;
  border-radius: 0 3px 3px 0;
  background-color: #eef4fa;
  color: #1d4d78;
  font-size: 12.5px;
  line-height: 1.45;
}

/* findings: error = the till cannot order the product, hint = setting without effect */
.config-finding {
  flex: 0 0 auto;
  margin: 4px 0 0;
  padding: 5px 10px;
  border-left: 3px solid #e0a800;
  border-radius: 0 3px 3px 0;
  background-color: #fdf6e3;
  color: #5c4600;
  font-size: 12.5px;
  line-height: 1.4;
}

.config-finding.error {
  border-left-color: #d9534f;
  background-color: #fdecea;
  color: #7a1f18;
}

.config-container .container-flag {
  flex: 0 0 14px;
  font-weight: bold;
  cursor: help;
}

.config-container .container-flag.error {
  color: #d9534f;
}

.config-container .container-flag.hint {
  color: #b58100;
}

.config-container.active .container-flag.error {
  color: #ff6b64;
}

.config-container.active .container-flag.hint {
  color: #d9a300;
}

.config-technical {
  margin: 10px 0 4px;
  font-size: 12px;
}

.config-technical .config-technical-body {
  padding: 6px 0 0 18px;
  color: #666;
}

.config-technical .config-technical-body button {
  margin-left: 12px;
}

.config-container-items-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

.config-container-items-container .add-item {
  color:green;
}

.config-container-type-selecter, .config-container-items-selecter {
  width: 30%;
  margin: 0 20px;
}

.product-config-container {
  display: flex;
  flex-direction: column;
}

.product-configurable-dialog .ngdialog-content {
    min-width: 850px !important;
    height: 80%;
    max-width: 1050px !important;
}

.grid-stack-container {
  position: relative;
  height: 100%;
  margin-top: 5px;
}

.product-config-container .grid-stack-container {
  flex: 1 1 auto;
  min-height: 260px;
}

.product-config-container .config-technical {
  flex: 0 0 auto;
}

.grid-stack-container .grid-container {
  position: absolute;
}

.grid-stack-container .blocker {
  position: absolute;
  width: 100%;
  z-index: 5;
  height: 100%;
  background-color: rgba(128,128,128,0.25);
}

.preconfigured-config-select-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.preconfigured-config-select-container > div {
  width: 25%;
  margin-left: 10px;
}

.change {
  font-weight: bold;
}

.change-old {
  color: #ec5050;
}

.change-new {
  color: #389438;
}

.change-changed {
  color: #e09409;
}

form.changes-form {
  width: 750px;
  margin-left: 2%;
  max-width: 100%;
}

form.changes-form .inline-field label {
  margin-right:5%;
}

.journal-container {
  display: flex;
  flex-wrap: wrap;
}

.journal-container > div {
  margin: 0 2%;
  flex: 1 0 220px;
}

input[type=checkbox].checkbox-big {
  transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  margin-right: 5px;
}

.journal-interval-checkbox {
  padding: 7px;
}

.invoice-form-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.invoice-form-container > div {
  min-width: 200px;
}

.invoice-info-container {
  flex: 2;
  max-width: 250px;
}
.invoice-buttons-container {
  flex: 1;
}

.invoice-contact-container {
  flex: 3;
}

.invoice-form-container .invoice-contact-container {
  display: flex;
  align-items: center;
  min-width: 300px;
}

.invoice-contact-container input {
  width: 100%;
}

.invoice-contact-container .recipient {
  padding: 10px;
}

.invoice-info-container {
  line-height: 1.3em;
}

.invoice-buttons-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
}

.invoice-buttons-container button {
  margin: 2px 0;
}

.invoice-info-container label {
  display: inline-block;
  min-width: 120px;
}

.invoice-contact-container input {
  padding: 3px;
  border: none;
}

.numberrange-products-dialog {
    /*max-width: 800px;*/
  }

  .ecos-logo a:focus {
    outline: none;
  }

  .product-bundle-container {
    margin-top: 10px;
  }

  .bundle-options {
    display: flex;
    flex-wrap: wrap;
    margin: 0 15px;
  }

  .bundle-options div {
    width: 50%;
  }

  label.inline-label span {
    font-size: 14px;
    display: inline-block;
    margin: 0;
    margin-right: 5px;
    font-weight: normal;
  }

  label.inline-label input[type="checkbox"] {
    height: 20px;
  }

  .relative {
    position: relative;
  }

  .in-use-by-others, .simple-products-count {
    position: absolute;
    right: 2px;
    bottom: 5px;
  }

  .simple-products-count {
    bottom: -10px;
  }

  .ng-table-top-filter {
    width: 300px;
    padding-left: 10px;
  }

  .ng-table-export {
    position: relative;
  }

  .export-types {
    position: absolute;
    background: #444444;
    color: #dcdcdc;
    top: 30px;
    left: 20px;
    width: 100px;
    font-size: 15px;
    font-weight: bold;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: solid 1px #444444;
    z-index: 101;
  }

  .export-types div {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: solid 1px #dcdcdc;
  }

  .export-types div:last-child:hover {
    border-top: solid 1px #444444;
  }

  .export-types div {
    text-align: center;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
  }

  .export-types div:hover {
    background: #dcdcdc;
    color: #444444;
  }

  .critical-confirm {
    font-size: 1.5em;
    line-height: 1.5em;
  }

  .critical-confirm .btn-default {
    background-color: #ff4040;
    color: #fff;
    float: left;
    width: 60px;
  }

  .critical-confirm .btn-primary {
    background-color: #248624;
    color: #fff;
    width: 60%;
  }

  .critical-confirm .modal-header, .critical-confirm .modal-header button.close {
    background-color: #ff4040;
    color: #fff;
    opacity: 1;
  }

  table[ng-table] tbody tr[readonly] {
    background: #eee !important;
  }

  table[ng-table] tbody tr[readonly] td .inline-editable {
    font-weight: normal;
    cursor: default;
  }

  table[ng-table] tbody tr[readonly] td .inline-editable:hover {
    text-decoration: none !important;
  }

  table[ng-table] tbody tr[readonly] td.ng-table-type-action * {
    color: #666;
    opacity: 0.85;
  }

  table[ng-table] tbody tr[readonly] td.ng-table-type-action i:hover {
    cursor: default;
  }

  table[ng-table] tbody tr[readonly][disabled] td div {
    font-weight: bold !important;
  }

  table[ng-table] tbody tr td.ng-table-type-datetime div {
    line-height:16px;
    /*margin-top: 8px;*/
    vertical-align: middle;
      display: inline; /*table-cell;*/
  }

  #gobd-export-cont{
    line-height: 68px;
  }

  /* growl scrollable */
  .growl-container.growl-fixed {
    overflow-y: auto;
    max-height: 90%;
}

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
    padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 100px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

.linkUpdate {
  cursor: pointer;
  text-decoration: none;
}

.linkUpdate:hover {
  text-decoration: none;
}

.device-type-container .tse-content {
  margin-right: 10px;
}

div.grid-stack div.article.folder div.triangle {
    width: 0;
      height: 0;
        border-style: solid;
          border-width: 0 0 12px 12px;
            position: absolute;
              bottom: 0;
                right: 0;
              }

div.grid-stack div.article {
                line-height: 1.15em;
                color: white;
                  overflow: hidden;
                    font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin";
                      letter-spacing: 0.11em;

                      box-sizing:border-box;
                      color:rgb(255, 255, 255);
                      display:inline;
                      font-family:HelveticaNeue-Thin, "Helvetica Neue Thin";
                      font-kerning:none;
                      font-size:14px;
                      font-variant-ligatures:no-common-ligatures;
                      font-weight:400;
                      height:auto;
                      letter-spacing:1.76px;
                      line-height:18.4px;
                      outline-color:rgb(255, 255, 255);
                      outline-style:none;
                      outline-width:0px;
                      overflow-wrap:break-word;
                      text-align:center;
                      text-size-adjust:100%;
                      user-select:none;
                      width:auto;
                      -webkit-box-direction:reverse;
                      -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
                    }
@font-face {
  /*font-family: 'HelveticaNeueLTPro-Th';*/
  font-family: 'HelveticaNeue-Thin';
  src: url("../fonts/helvetica_neue_licensed/thin/39CA8A_2_0.eot");
  src: url("../fonts/helvetica_neue_licensed/thin/39CA8A_2_0.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica_neue_licensed/thin/39CA8A_2_0.woff2") format("woff2"), url("../fonts/helvetica_neue_licensed/thin/39CA8A_2_0.woff") format("woff"), url("../fonts/helvetica_neue_licensed/thin/39CA8A_2_0.ttf") format("truetype"); }

@font-face {
  /*font-family: 'HelveticaNeueLTPro-Roman';*/
  font-family: 'HelveticaNeue';
  src: url("../fonts/helvetica_neue_licensed/roman/39CA8A_6_0.eot");
  src: url("../fonts/helvetica_neue_licensed/roman/39CA8A_6_0.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica_neue_licensed/roman/39CA8A_6_0.woff2") format("woff2"), url("../fonts/helvetica_neue_licensed/roman/39CA8A_6_0.woff") format("woff"), url("../fonts/helvetica_neue_licensed/roman/39CA8A_6_0.ttf") format("truetype"); }

  #angular-loading-overlay {
    position: fixed;
    width:100%;
    height: 100%;
    z-index: 10000;
  }

div#boxContent div.boxWrapper .subtabs-ecommerce a{
  color: #fff !important;
}
div#boxContent div.boxWrapper .subtabs-ecommerce .listitemActive a {
  color: #000 !important;
}

form.table-form {
  text-align: right;
  background: white;
}

form.table-form input[type=submit] {
  display: none;
}

form.table-form .input-table-persons {
  width: 30px;
}

.VisualTable text {
  font-family: 'Font Awesome 5 Free';
  font-size: 16px;
}
.VisualTable text tspan {
    font-family: Roboto, Arial;
}

ul.uib-datepicker-popup tbody tr {
  height: 30px;
}
ul.uib-datepicker-popup tbody tr td {
  height: 30px;
}
table#tableStatus td {
  line-height: 28px;
}

.row-reservation{
  height: 100%;
  width: 100%;
  display: flex;

}
.reservation-disable, .reservation-enable {
  height: 100%;
  width: 50%;
  flex-grow: 1;
  padding: 16px;

}
.reservation-enable{
  border-right: 2px solid #bbbbbb;
}
.reservation-header{
  display:flex;
  width:100%;
  height: 80px;
  align-items: center;
  justify-content: center;
}
.reservation-input{
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reservation-date_list{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.input-tab{
  width: 48%;
  margin-left: 1%;
}
.reservation-input .input-tab input {
  width: 100%;
}
.reservation-date_button {
  border: 1px solid #bbbbbb;

  text-align: center;
  padding: 12px;
  margin: 6px;
  border-radius: 4px;
  transition:  box-shadow 500ms;
}
.reservation-date_button:hover {
  cursor: pointer;
  box-shadow:1px 1px  1px 1px rgb(0, 0, 0, 0.6);
}
.input-tab span {
  transition:  color 500ms;
}
.input-tab span:hover{
  cursor: pointer;
  color: #64b364;
}
.reservation-delete {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid #bbbbbb;
  border-radius: 50%;
  margin-left: -23px;
  margin-top: -23px;
  background-color: #f0f0f0;
  color: #bbbbbb;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:  opacity 500ms, color 500ms, border 500ms;


}

.reservation-date_button:hover .reservation-delete{
  opacity: 1;
}
.reservation-delete:hover {
  color: #cc1100;
  border: 1px solid #cc1100;
}


.header-transactions {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-transactions{
  width: 100%;
  padding: 16px;
}
.col-t-1, .col-t-2, .col-t-3 {
  width: 25%;
}

#customer-changer, #branch-changer {
  width: 250px;
  max-width: 100%;
  margin-top: 2px;
}

#changer-box .selectize-input {
  padding: 3px !important;
  height: 40px;
}

#changer-box .ui-select-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  margin-top: 3px;
}

#changer-box .ui-select-search {
  padding: 8px !important;
}

#changer-box .selectize-dropdown .ui-select-choices-row {
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: end;
}

@media screen and (max-width: 970px) {
  #changer-box .ui-select-match {
    padding: 0 !important;
    color: #ddd;
    margin-top: 2px;
  }

  #changer-box .ui-select-match span {
    display:  none;
  }

  #changer-box .ui-select-choices {
    width: 250px;
  }

  #changer-box .selectize-input {
    width:  34px;
  }

  #changer-box .selectize-input {
    background: transparent;
    border: none;
    border-radius: 0px;
  }
}

.differences-data {
  width: 800px;
  table-layout: fixed;
}

.differences-data tr, .differences-data td {
  height: 20px;
}

/*div#CcvstandalonePrints tr,
div#CcvstandalonePrints td > div,
div#CcvstandalonePrints td {
  line-height: 18px;
  height: 18px;
}*/

  div#overviewWidgets div.ng-table-container table {
    min-width: 320px;
  }

/* ==== Mobile usability: admin tabs + ngTable action buttons (<=767px) ====
   Scoped to phones; desktop unchanged. Compact wrap so tabs/buttons stay
   usable without dominating the screen. */
@media screen and (max-width: 767px) {
  /* Tabs: compact pills that wrap; natural width so they pack tight. */
  ul.listTabs {
    height: auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    box-sizing: border-box;
  }
  ul.listTabs > li {
    float: none !important;
    margin: 0 !important;
    flex: 0 1 auto;
  }
  ul.listTabs > li:first-child { margin-left: 0 !important; }
  ul.listTabs > li > a {
    height: auto !important;
    line-height: 1.2 !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    display: block;
    border-radius: 4px;
    background: rgba(255,255,255,0.10);
    white-space: nowrap;
  }
  ul.listTabs > li.listitemActive > a {
    background: #f7f7f7 !important;
    color: #3c3c3c !important;
  }

  /* Action buttons: two per row, compact height. */
  .table-actions {
    height: auto !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    line-height: normal !important;
    gap: 6px;
    padding: 6px 0;
  }
  .table-actions > div { flex: 1 1 calc(50% - 6px); margin: 0 !important; }
  .table-actions .inputButton {
    width: 100% !important;
    min-height: 38px;
    padding: 8px 10px !important;
    float: none !important;
    margin: 0 !important;
    white-space: normal;
    box-sizing: border-box;
    font-size: 13px;
  }
  .table-actions .ng-table-export { flex: 1 1 calc(50% - 6px); }
  .table-actions .ng-table-export .inputButton { width: 100% !important; }
  .table-actions .export-types { z-index: 5; }
}

/* ==== Mobile header cleanup (<=767px) ====
   The dashboard header (#boxHeader) crams the greeting + action icons that are
   positioned for desktop width (float:right + fixed margin-right 120/172/220px)
   -> they overlap on a phone. Hide the non-essential greeting and drop the
   fixed margins so the icons pack cleanly. Desktop unchanged. */
@media screen and (max-width: 767px) {
  #boxHeader #welcomeUser { display: none !important; }
  /* No room on a phone for the dark-mode lightbulb alongside the opening-hours
     pill + the 4 right-hand icons (it is absolutely positioned at right:195px
     and lands on the pill). Hide it on mobile; dark mode stays toggleable on
     desktop. The pill (an opening-hours feature) is kept. */
  #boxHeader .light-switch { display: none !important; }
  #boxHeader #newbranches { margin-right: 0 !important; }
  #boxHeader #reloadGuis a,
  #boxHeader #terminalButton a,
  #boxHeader #reconnectButton a,
  #boxHeader .cellIcon a { margin-right: 4px !important; }
}

/* ==== Device status widget: responsive cards (dashboard) ====
   Replaces the fixed 5-column table (device-widget.js) that squeezed names on
   mobile. Cards auto-reflow: many per row on desktop, ~2 on a phone. Green/red
   left border + dot = status at a glance. */
.device-card-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 14px 0;
}
.device-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #e2e4e8;
  border-left: 4px solid #2ca02c;
  border-radius: 8px;
  background: #fff;
  min-width: 0;
  box-sizing: border-box;
}
.device-card--offline {
  border-color: #f0b6b6;
  border-left-color: #d64545;
  background: #fdf4f4;
}
.device-card__icon { flex: 0 0 auto; width: 34px; font-size: 24px; line-height: 1; color: #3b7dd8; text-align: center; }
.device-card__icon svg { display: block; margin: 0 auto; }
.device-card__body { min-width: 0; flex: 1 1 auto; }
.device-card__name { font-weight: 600; font-size: 13px; line-height: 1.2; color: #2b2f36; overflow-wrap: anywhere; }
.device-card__status { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; color: #5a6068; margin-top: 3px; line-height: 1.3; }
.device-card__dot { font-size: 8px; color: #2ca02c; margin-top: 4px; }
.device-card--offline .device-card__dot { color: #d64545; }
.device-card--offline .device-card__status { color: #b03a3a; }
.device-card__meta { font-size: 11px; color: #98a0a8; margin-top: 1px; }

/* ==== Wide data tables on mobile (<=767px): no info loss + frozen context ====
   The ngTable used table-layout:fixed + ellipsis -> long values ("2.100,...")
   were truncated = information loss. Here values are shown in full (columns
   size to content, table scrolls horizontally), the header row is frozen, and
   the first two columns (multiselect checkbox + first data/date column) are
   frozen so the row's date stays visible while scrolling right. */
@media screen and (max-width: 767px) {
  table[ng-table] { table-layout: auto !important; }
  table[ng-table] tr td, table[ng-table] th { overflow: visible !important; }
  table[ng-table] tr td:not(.ng-table-type-action) div:not(.tooltip),
  table[ng-table] tr td:not(.ng-table-type-action) div:not(.tooltip) div {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  /* Multi-line cells (brand<br>PAN, uuid<br>POI). The base rule pins every cell
     div to height:40px/line-height:40px = ONE centered line; the desktop clips
     line 2 via overflow:hidden, but overflow:visible above let it bleed into
     the NEXT row, printing both texts on top of each other. Let rows grow. */
  table[ng-table] tr td > div:not(.tooltip) {
    height: auto !important;
    min-height: 40px;
    line-height: 1.4 !important;
    padding-top: 9px;
    padding-bottom: 9px;
    box-sizing: border-box;
  }
  /* frozen header */
  /* top: 48px = the fixed admin header (header-new.css, position:fixed,
     height 48px); at top:0 the frozen row slid under it. */
  table[ng-table] thead th {
    position: -webkit-sticky; position: sticky; top: 48px; z-index: 3;
    background: #f2f2f2;
  }
}

/* Rotating icon for buttons that trigger a slow server-side build (the
   provision PDF runs six queries, three of them recursive). Bootstrap 3 has no
   spin helper of its own. */
.glyphicon.spinning {
  animation: ecos-spin 1s infinite linear;
}
@keyframes ecos-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(359deg); }
}

/* Reconstructed closeorder slip (report/closeorder, ngDialog "closeorder-slip-dialog").
   The slip is fixed-width text, so the dialog is sized by the slip and not the
   other way round - the 450px of the default theme cuts the amount column off.
   Element-qualified like the other dialog width rules in this file so it beats
   the theme; a <style> block inside the ngDialog template does not. */
div.ngdialog.closeorder-slip-dialog div.ngdialog-content {
  width: -moz-max-content;
  width: max-content;
  max-width: 96vw;
  padding: 12px;
  /* Belt and braces: if anything still exceeds the dialog, it scrolls from the
     left edge instead of being clipped on both sides. */
  overflow-x: auto;
}
.closeorder-slip-dialog .slip-scroll {
  padding: 8px;
  /* .ng-dialog-scroll-content is height:100% + overflow:auto. That makes it a
     scroll container that stays as wide as the dialog and CLIPS the slip, and
     it also breaks the max-content chain the dialog sizes itself from. The slip
     is short enough to just grow, so take it out of the chain entirely. */
  height: auto;
  overflow: visible;
  width: -moz-max-content;
  width: max-content;
}
.closeorder-slip-dialog .slip-wrap {
  width: -moz-max-content;
  width: max-content;
  /* No max-width and no auto margins here: both would let the card grow wider
     than the dialog and then CENTRE it, which puts the first characters of
     every line outside the box where they cannot be scrolled to. */
}
.closeorder-slip-dialog .slip-actions {
  text-align: right;
  margin-bottom: 8px;
}
.closeorder-slip-dialog .slip-card {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.closeorder-slip-dialog .slip-body {
  margin: 0;
  padding: 14px;
  border: 0;
  background: #fafafa;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  white-space: pre;
  /* Width comes from the longest line itself, measured in whatever font the
     browser really used. ch was wrong here: it is the advance of "0" in the
     FIRST font of the stack, and when the browser falls back to another
     monospace the box ends up a few characters short and the amounts get cut.
     The slip pads its rules to the full paper width, so max-content is exactly
     the paper width.
     Deliberately no max-width either: a percentage max-width stops this element
     from contributing its real width while the dialog computes its own
     max-content size. Narrow windows are handled by the font ladder below. */
  width: -moz-max-content;
  width: max-content;
}
.closeorder-slip-dialog .slip-note {
  /* width:0 + min-width:100% keeps this sentence out of the dialog's intrinsic
     width: it wraps inside the slip instead of stretching it. */
  width: 0;
  min-width: 100%;
  margin-top: 8px;
  font-size: 11px;
  color: #999;
  text-align: center;
}
/* Narrow windows cannot grow the dialog, so the type shrinks instead of the
   slip being cut off. */
@media (max-width: 640px) {
  .closeorder-slip-dialog .slip-body { font-size: 11px; padding: 10px; }
}
@media (max-width: 520px) {
  .closeorder-slip-dialog .slip-body { font-size: 10px; padding: 8px; }
  .closeorder-slip-dialog .slip-scroll { padding: 4px; }
  div.ngdialog.closeorder-slip-dialog div.ngdialog-content { padding: 8px; }
}

/* Configurable editor on narrow screens.
   The dialog is pinned to min-width 850px, which clips its own content on a phone -
   release it and stack the grouped settings instead of squeezing them into one row. */
@media screen and (max-width: 900px) {
  .product-configurable-dialog .ngdialog-content {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .config-container-selector-container {
    flex-wrap: wrap;
    gap: 3px;
  }

  .config-container-selector-container .config-container {
    flex: 1 1 auto;
    min-width: 90px;
    border: solid 1px #888;
    padding: 0 6px;
  }

  .config-container-selector-container .new-config-container {
    flex: 0 0 60px;
  }

  .config-container-options {
    flex-wrap: wrap;
  }

  .config-container-options .container-option,
  .config-sheet .config-container-options .container-option {
    width: 100%;
    flex: 1 1 100%;
    justify-content: space-between;
    padding: 4px 10px;
    border: none;
    border-bottom: 1px #eceef0 solid;
  }

  .config-container-options .container-option:last-child,
  .config-sheet .config-container-options .container-option:last-child {
    border-bottom: none;
  }

  /* the row caption sits above its fields instead of beside them */
  .config-sheet .config-row {
    display: block;
  }

  .config-sheet .config-row-label {
    flex: none;
    border-right: none;
    border-bottom: 1px solid #eceef0;
    padding: 4px 10px;
  }

  .config-sheet .config-container-type-selecter,
  .config-sheet .config-container-items-selecter {
    width: 100%;
    margin: 4px 0;
  }

  .config-container-options .container-option .value {
    width: auto;
    min-width: 30px;
    text-align: right;
  }

  .config-container-options .container-option.wide .value,
  .config-sheet .config-container-options .container-option.wide {
    flex: 1 1 100%;
  }

  .config-container-items-container {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 4px 10px;
  }

  .config-container-type-selecter,
  .config-container-items-selecter {
    width: 100%;
    margin: 4px 0;
  }

  .config-plain,
  .config-finding {
    padding: 8px 10px;
  }

  /* the item grid needs room to stay usable once everything above it stacks */
  .product-configurable-dialog .grid-stack-container {
    min-height: 320px;
  }
}

/* =====================================================================
   Neue Filialserver (nur ocs-Admins).

   Meldet sich ein frischer ecosserver ohne Seriennummer am Node an,
   erscheint diese Pille; der Aufklappkasten weist ihm eine Filiale zu.
   Hier steht die Gestalt fuer BEIDE Kopfvarianten - der alte Kopf setzt
   seine Kinder per float, deshalb steht das float hier in der Grundform
   und wird im neuen Kopf (header-new.css) gegen die Werkzeugreihe getauscht.

   display steht bewusst NICHT auf none: das Element traegt sein
   style="display:none" im Markup und wird per .css('display','flex')
   ein- und ausgeblendet. jQuery .show() wuerde hier auf display:block
   zurueckfallen und das Flex-Layout zerlegen.
   ===================================================================== */
#newbranches {
  position: relative;
  float: right;
  margin: 4px 220px 0 0;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: #d7f5df;
  border: 1px solid #a9dcb8;
  color: #1c5c33;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
#newbranches:hover { background: #c9f0d4; }
#newbranches > i { font-size: 12px; opacity: .75; }
#newbranches .nb-count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Der Kasten haengt als Kind in der Pille - so schliesst ihn der
   Klick-ausserhalb-Waechter nicht, sobald man ihn benutzt. */
#newbranches .nb-panel {
  display: none;
  position: absolute; top: 100%; right: 0; z-index: 100000;
  width: 340px;
  margin-top: 5px; padding: 8px;
  background: #fff; color: #222;
  border: 1px solid rgba(0,0,0,.13); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  font-size: 12px; line-height: 1.5;
  text-align: left; white-space: normal; cursor: default;
}
#newbranches.open .nb-panel { display: block; }

#newbranches .nb-head {
  font-weight: 700; font-size: 11px; color: #555;
  padding: 0 4px 5px; margin-bottom: 6px;
  border-bottom: 1px solid #eee;
}
#newbranches .nb-server + .nb-server {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee;
}
#newbranches .nb-host { font-weight: 600; color: #1c5c33; padding: 0 4px 5px; }
#newbranches .nb-host i { margin-right: 6px; color: #6f7b87; }
#newbranches .nb-search {
  width: 100%; box-sizing: border-box; height: 28px;
  padding: 0 8px; margin-bottom: 6px;
  border: 1px solid #d0d0d0; border-radius: 5px;
  font-size: 12px; color: #222; background: #fff;
}
#newbranches .nb-list { max-height: 220px; overflow-y: auto; }
#newbranches .nb-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 6px; border-radius: 5px; cursor: pointer;
}
#newbranches .nb-row:hover { background: #eef7f1; }
#newbranches .nb-name {
  font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#newbranches .nb-meta { color: #6f7b87; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* Eine Filiale ohne Seriennummer bleibt sichtbar, aber unantastbar. */
#newbranches .nb-row-off { cursor: default; opacity: .45; }
#newbranches .nb-row-off:hover { background: none; }
#newbranches .nb-empty { color: #6f7b87; padding: 6px; }

/* =====================================================================
   Sidebar navigation: native scroll + calm look (2026-10-25)

   The sidebar used to scroll through the scroller directive
   (TrackpadScrollEmulator). On touch devices a swipe did not move it at
   all, entries below the fold were unreachable. Now the wrapper scrolls
   natively and keeps the scroll to itself (overscroll-behavior), the
   column runs from the header to the bottom edge (top + bottom instead of
   a height, so the mobile address bar cannot cut it off).

   Look: flat, the header's grey tone, thin separators, chevron on the
   right, active entry in eCos green. Sub entries hang on a guide line.
   The markup is unchanged (navigation.phtml); the old dropdown arrow
   (the triangle activateNavigationItem writes) is hidden and drawn as a chevron.
   ===================================================================== */
div#boxSidebar {
  top: 48px;
  bottom: 0;
  height: auto;
  background: #383535;
  border-right: 0;
}
#boxSidebar > .boxWrapper {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
#boxSidebar > .boxWrapper::-webkit-scrollbar { width: 6px; }
#boxSidebar > .boxWrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

ul#listTreeNavigation { padding: 6px 0 12px; }
ul#listTreeNavigation > li + li { border-top: 1px solid rgba(255,255,255,.06); }

ul#listTreeNavigation li a,
ul#listTreeNavigation ul li a {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 42px;
  border-bottom: 0;
  background: none;
  box-shadow: none;
  transition: background .12s;
}
ul#listTreeNavigation li a:hover,
ul#listTreeNavigation ul li a:hover { background: rgba(255,255,255,.07); }
ul#listTreeNavigation li a:focus:not(:focus-visible) { outline: none; }

/* entry text: in the flow instead of absolutely placed */
ul#listTreeNavigation li a span {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 36px 0 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #e4e2e0;
  font: normal 13.5px 'Open Sans', HelveticaNeue, Helvetica, Arial;
  letter-spacing: 0;
  text-shadow: none;
}
ul#listTreeNavigation li a:hover span { color: #fff; }

/* chevron; inline style of the span sets left/position, hence !important */
ul#listTreeNavigation li a span.dropdown {
  position: absolute !important;
  left: auto !important;
  right: 12px;
  top: 50%;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  padding: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s;
}
ul#listTreeNavigation li a span.dropdown::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-right: 2px solid #b5b0ad;
  border-bottom: 2px solid #b5b0ad;
  transform: rotate(-45deg);
}
ul#listTreeNavigation li.open > a span.dropdown { transform: rotate(90deg); }

/* sub entries on a guide line */
ul#listTreeNavigation ul.nav-subitems {
  position: relative;
  background: rgba(0,0,0,.16);
}
ul#listTreeNavigation ul.nav-subitems::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 4px;
  bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,.14);
}
ul#listTreeNavigation li.open > ul.nav-subitems { padding: 4px 0 6px; }
ul#listTreeNavigation ul.nav-subitems li a { min-height: 36px; }
ul#listTreeNavigation ul.nav-subitems li a span.nav-subitem {
  left: auto;
  padding-left: 36px;
  color: #c9c5c2;
  font-size: 13px;
}
ul#listTreeNavigation ul.nav-subitems li a:hover span.nav-subitem { color: #fff; }

/* active entry: the glowbar becomes a slim green bar */
ul#listTreeNavigation li a span.glowbar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  height: auto;
  width: 3px;
  padding: 0;
  flex: none;
  border-radius: 0 3px 3px 0;
  background: #3aaa96;
  box-shadow: none;
}
ul#listTreeNavigation li a span.glowbar:after { display: none; }
ul#listTreeNavigation li a:hover span.glowbar { opacity: 0; }
ul#listTreeNavigation ul.nav-subitems li a span.glowbar { left: 23px; top: 8px; bottom: 8px; border-radius: 2px; }
ul#listTreeNavigation li a.treeitemActive { background: rgba(58,170,150,.16); }
ul#listTreeNavigation li a.treeitemActive span,
ul#listTreeNavigation ul.nav-subitems li a.treeitemActive span.nav-subitem { color: #fff; }
ul#listTreeNavigation li a.treeitemActive span.glowbar { opacity: 1; }
ul#listTreeNavigation li a.nav-link.itemDisabled span { color: #77716e; }

/* phone: dim the page behind the open menu, a tap on it closes the menu
   (the outside-click handler in setMobileClicks does that) */
#boxNavBackdrop { display: none; }
@media screen and (max-width: 969px) {
  body.nav-open #boxNavBackdrop {
    display: block;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0,0,0,.45);
    touch-action: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  div#boxSidebar,
  ul#listTreeNavigation ul.nav-subitems,
  ul#listTreeNavigation li a span.dropdown { transition: none; }
}

/* ==== Locations page, tab "Verbindungen": grouped view (lists.js LocationConnectionsListController) ====
   Source location -> one row per target (collapsible) -> category rows. Colours use
   translucent tints so the rows also read on dark.css. Tap targets are at least 32px high. */
.conn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.conn-view-switch { display: inline-flex; border: 1px solid #2B80CC; border-radius: 4px; overflow: hidden; }
.conn-view-switch button { border: 0; background: transparent; color: #2B80CC; padding: 6px 14px; min-height: 32px; cursor: pointer; font-size: 13px; }
.conn-view-switch button.active { background: #2B80CC; color: #fff; }
.conn-list { margin-top: 12px; font-size: 14px; max-width: 1100px; }
.conn-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.conn-search input[type="search"] { flex: 1 1 260px; max-width: 420px; min-height: 34px; padding: 4px 10px; font-size: 14px; box-sizing: border-box; }
.conn-muted { color: #888; font-weight: normal; }
.conn-empty { padding: 12px 4px; color: #888; }
.conn-source { margin-bottom: 14px; border: 1px solid rgba(128, 128, 128, 0.3); border-radius: 6px; overflow: hidden; }
.conn-source-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 8px 12px; font-weight: bold; font-size: 15px; background: rgba(43, 128, 204, 0.12); }
.conn-add { flex: none; padding: 2px 10px; border: 1px solid #2B80CC; border-radius: 12px; color: #2B80CC; font-size: 13px; font-weight: normal; cursor: pointer; white-space: nowrap; }
.conn-add:hover { background: #2B80CC; color: #fff; }
.conn-add-pair { padding: 1px 8px; font-size: 12px; }
.conn-target { border-top: 1px solid rgba(128, 128, 128, 0.2); }
.conn-target-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 12px; min-height: 32px; cursor: pointer; }
.conn-target-head:hover { background: rgba(43, 128, 204, 0.07); }
.conn-toggle { color: #2B80CC; width: 12px; }
.conn-target-name { font-weight: bold; }
.conn-summary { color: #777; }
.conn-hits { color: #2B80CC; }
.conn-warn { color: #fff; background: #e8590c; border-radius: 9px; padding: 0 7px; font-weight: bold; }
.conn-controls { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.conn-target-disabled .conn-target-name { color: #999; text-decoration: line-through; }
.conn-rules { padding: 0 0 6px 34px; }
.conn-rule { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; min-height: 32px; border-top: 1px dashed rgba(128, 128, 128, 0.2); cursor: pointer; }
.conn-rule:hover { background: rgba(43, 128, 204, 0.07); }
.conn-rule-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.conn-rule-disabled .conn-rule-name { color: #999; text-decoration: line-through; }
.conn-rule-unknown .conn-rule-name { color: #c00; }
.conn-badge { display: inline-block; min-width: 76px; padding: 4px 10px; border-radius: 14px; border: 1.5px solid #2B80CC; color: #2B80CC; text-align: center; font-size: 12px; white-space: nowrap; cursor: pointer; box-sizing: border-box; }
.conn-badge.conn-type-order, .conn-badge.conn-type-stock { background: #2B80CC; color: #fff; font-weight: bold; }
.conn-badge.conn-type-warn { background: #e8590c; border-color: #e8590c; color: #fff; font-weight: bold; }
.conn-badge.conn-type-mixed { border-style: dashed; border-color: #888; color: #666; }
.conn-badge.conn-badge-static { cursor: inherit; }
.conn-remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px; color: #d9534f; cursor: pointer; flex: 0 0 auto; }
.conn-remove:hover { background: rgba(217, 83, 79, 0.15); }
/* order type choice: inline in the list, floating next to the tapped badge in the diagram */
.conn-bulk-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; color: #222; border: 1px solid rgba(128, 128, 128, 0.4); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); font-size: 13px; }
.conn-bulk-choice-inline { margin: 0 12px 8px 34px; box-shadow: none; background: rgba(43, 128, 204, 0.06); color: inherit; }
body > .conn-bulk-choice { position: absolute; z-index: 1000; max-width: 220px; }
.conn-bulk-choice-title { flex: 1 1 100%; color: #666; }
.conn-bulk-choice button { min-height: 32px; padding: 4px 12px; border: 1.5px solid #2B80CC; border-radius: 14px; background: transparent; color: #2B80CC; cursor: pointer; }
.conn-bulk-choice button.active { background: #2B80CC; color: #fff; }
.conn-bulk-choice button.conn-bulk-cancel { border-color: transparent; color: #888; }
@media screen and (max-width: 767px) {
  .conn-list { font-size: 15px; }
  .conn-rules { padding-left: 12px; }
  .conn-bulk-choice-inline { margin-left: 12px; }
  .conn-controls { margin-left: 0; }
}

/* "Last actions" undo dialog from the header (status/simple/partial/p/recentactions) */
.ngdialog.recent-actions-dialog.overlay-responsive div.ngdialog-content {
  width: 720px;
  max-width: 94%;
  height: auto;
  max-height: 90%;
}
.recent-actions h3 { margin: 0 0 6px; }
/* Undo icon of a customer admin who has not changed anything this session yet
   (admin/IndexController::_resolveUndoIcon). Two ids: the new header sets
   display:flex !important on the icon. */
#boxHeader #linkRecentActions.undo-hidden { display: none !important; }
.recent-actions .ra-hint { margin: 0 0 12px; color: #777; font-size: 12px; line-height: 1.4; }
.recent-actions .ra-state { padding: 12px 0; color: #555; }
.recent-actions .ra-error { color: #c0392b; }
.recent-actions .ra-list { list-style: none; margin: 0; padding: 0; }
.recent-actions .ra-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid #e5e5e5;
}
.recent-actions .ra-main { flex: 1 1 auto; min-width: 0; }
.recent-actions .ra-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.recent-actions .ra-time { color: #555; font-variant-numeric: tabular-nums; }
.recent-actions .ra-kind { font-weight: bold; }
.recent-actions .ra-kind-delete { color: #c0392b; }
.recent-actions .ra-kind-insert { color: #27ae60; }
.recent-actions .ra-table { color: #333; }
.recent-actions .ra-side { flex: 0 0 auto; max-width: 45%; text-align: right; }
.recent-actions .ra-undo {
  border: 1px solid #2b6cb0; background: #fff; color: #2b6cb0; border-radius: 14px;
  padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.recent-actions .ra-undo:hover { background: #2b6cb0; color: #fff; }
.recent-actions .ra-undo[disabled] { opacity: .5; cursor: default; }
.recent-actions .ra-reason { font-size: 12px; color: #999; }
.recent-actions .ra-branch { color: #888; font-size: 12px; }
.recent-actions .ra-row { margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.recent-actions .ra-row-title { color: #333; }
.recent-actions .ra-row-table { color: #888; }
.recent-actions .ra-row-new { color: #27ae60; }
.recent-actions .ra-change { color: #666; padding-left: 10px; }
.recent-actions .ra-old { color: #c0392b; text-decoration: line-through; }
.recent-actions .ra-new { color: #27ae60; }
.recent-actions .ra-more { display: inline-block; margin-top: 4px; font-size: 12px; }
.recent-actions .ra-more-note { font-size: 12px; color: #888; }
@media (max-width: 600px) {
  .recent-actions .ra-item { flex-direction: column; align-items: stretch; }
  .recent-actions .ra-side { max-width: none; text-align: left; }
}