.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: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  display: none;
  z-index: 200;
}

#angular-loading-overlay div {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #eee;
  opacity: 0.3;
}

#angular-loading-overlay img {
  position: absolute;
  top: 50%;
  left: 50%;
}

.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;
  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;
  align-items: center;
  flex-wrap: wrap;
}

.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;
  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 40px;
}

.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;
}

.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;
}

.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 */
  table[ng-table] thead th {
    position: -webkit-sticky; position: sticky; top: 0; 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; }
.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;
  /* The slip builder pads every line to a fixed character count; ch is that
     character in this very font, so the card is as wide as the paper was.
     Deliberately no max-width: a percentage max-width is what stops this
     element from contributing its real width while the dialog computes its
     max-content size, and the dialog then comes out too narrow. Narrow windows
     are handled by the font ladder below instead. */
  width: 56ch;
}
.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; }
}