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