/*ghostClass */

.ghost {
  opacity: 0 .5;
}

.li {
  margin-top: 0.3em;
  width: 100%;
  vertical-align: middle;
}

.widthNav {
  max-width: 900px;
}

.btn-border {
  border: 1px solid #404040;
  margin-right: 15px;
}

.liBtn {
  margin: 0;
  height: 100%;
  /*padding:0;*/
}

.list-item-titel {
  width: 100%;
}

.count {
  padding-left: -10px;
  margin-left: -1em;
}

.progress {
  margin-bottom: 5px;
}

.listCss { 
  top: 50px;
  position: relative;
  padding-bottom: 60px;
}

.listSuggest{
  top: 45px;
  position: relative;
  padding-bottom: 60px;
}

.hup {
  margin-top: -15px;
  margin-bottom: -20px;
}

body {
  /*margin-left:10px;*/
  height: 100%;
}

.scannRec {
  max-width: 200px;
}

.marginLeft {
  margin-left: 1em;
}

.paddingTop {
  padding-top: 10px;
}

.marginRight {
  margin-right: 0.3em;
}

.navBottom {
  margin-bottom: -10px;
  background-color: #404d59;
  height: 50px;
}

.marginCategory {
  margin: 10px 0px 0px;
  width: 100%;
  text-align: center;
}

.fixedAtTop {
  position: fixed;
  max-width: 100%;
  z-index: 999;
  width: 900px;
  
}

.suggestTop {
  /*margin-top: 20px !important;*/
  position: fixed;
  z-index: 99;
  background: #2b3e50;
  height: 100%;
  padding-bottom: 20px !important;
  overflow: auto;
}

.spacer {
  height: 70px;
  max-width: 100%;
  z-index: 9998;
  width: 900px;
}

textarea {
  width: 100%;
  height: 150px;
}

.buttons {
  margin: 0;
  padding: 0.1em 0 0.1em 0;
}

.inpTxt {
  margin-top: -1em;
  margin-bottom: -1em;
  padding: 0em 0.1em 0.1em 0.1em;
  background-color: #2b3e50;
}

.row {
  margin: 0;
  padding: 0;
  width: 100%;
}

.topBtn {
  margin-top: -1.1em;
  padding-left: -1em;
  margin-left: -1em;
}


/*Glow input*/

.form-control:focus {
  border-color: rgba(255, 153, 0, 0.8);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 153, 0, 0.8);
  outline: 0 none;
}

.topInput {
  /*margin-right:-5em;*/
  margin: 0;
  padding: 0;
  margin-top: -5px;
}

.top {
  margin: 0;
  padding-bottom: 0px;
  background-color: #2b3e50;
}

.suggest {
  margin-top: 3px;
  padding: 10px 15px !important;
}

.sortable-chosen {
  background-color: grey;
}

.headBtn {
  padding-bottom: 0.2em;
  padding-top: 0.2em;
  background-color: #404040;
}

.addBtn {
  z-index: 1000;
  width: 100%;
  top: 0px;
  position: fixed;
  height: 40px;
  left: 0;
  right: 0;
  text-align: auto;
  padding-top: 10px;
}

.markLi {
  text-decoration: line-through;
  color: Grey;
}

.important {
  color: rgb(255, 153, 0);
  text-shadow: 0 0 5px rgb(255, 153, 0);
}

.flash {
  font-size: 120%;
  margin-top: 10px;
}

.bgDark {
  background-color: #404d59;
}

.maxwidth {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cursor-default {
  cursor: default;
}

.list-group-item {
  padding: 0;
}

.suggestStyle {
  padding: 10px;
}

.placeHolder {
  margin-left: 10px;
}

.listEmpty {
  text-align: center;
}

.boldFont {
  font-weight: bold;
}

.middle {
  text-align: center;
}

.setting {
  text-shadow: 0 0 2px rgb(255, 153, 0);
  color: #404d59;
  font-size: 1.8em;
  margin: 10px 0 -10px 0;
}

.overlay {
  /*display: flex;
  flex-flow: column;*/
  height: 100%;
  /*position: fixed;*/
  /* Sit on top of the page content */
  /*display: none;*/
  /* Hidden by default */
  width: 100%;
  /* Full width (cover the whole page) */
  /*height: 100%;
  /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2b3e50;
  /* Black background with opacity */
  /* z-index: 1100;*/
  /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer;
  /* Add a pointer on hover */
}

.overlayHeader {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #404d59;
  color: white;
  text-align: center;
  /*min-height: 50px;*/
  /*flex: 0 1 auto;*/
}

.overlayContent {

  top: 0;
  width: 100%;
  height: 100%;
  /*flex: 1 1 auto;*/
}

.overlayFooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #404d59;
  color: white;
  text-align: center;
  /*min-height: 50px;*/
  /*flex: 0 1 40px;*/
}

.overlaybtn {
  width: 100%;
}

.splitIn3 {
  width: 33%;
  padding: 0;
  margin: 0;
}

.hidden_new {
  display: none;
}

.editable {
  width: 100%;
  min-width: 50px;
  border: 2px solid #116abd;
  border-radius: 5px;
  background-color: aliceblue;
  color: #2b3e50;
}

label {
  font-size: 14px;
  width: 100%;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

.numPadRow {
  justify-content: center;
  display: flex;
  width: 100%;
  margin: 5px;
}

.numPadNumber {
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: xx-large;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.numPadNumber:empty:before {
  content: attr(data-placeholder);
  color: rgb(194, 194, 194)
}

.numPadArticle {
  display: flex;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: large;
}

.btn-numPad {
  font-size: xx-large;
}

.numPadUnits {
  display: flex;
  width: 100%;
}

.numPadUnits div {
  flex-basis: 100%;
}

.liArticleName {
  font-size: large;
  padding: 5px 0;
  float: left;
}

/* scroll snap takes care of restoring scroll position */
.swipe-container {
  display: flex;
  overflow: auto;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

/* scrollbar should be hidden */
.swipe-container::-webkit-scrollbar {
  display: none;
}

/* main element should always snap into view */
.swipe-element {
  scroll-snap-align: start;
  padding: 5px 0px 5px 16px;
  margin-right: 32px;
  margin-left: 2px;
}

/* actions and element should be 100% wide */
.action,
.swipe-element {
  min-width: 100%;
}

.action {
  display: flex;
  align-items: center;
  scroll-snap-align: end;
}

/* icon should remain sticky */
.swipe-icon {
  color: white;
  position: sticky;
  left: 16px;
  right: 16px;
}

/* action background colors */
.left {
  background-color: rgb(216, 0, 0);
}

.right {
  justify-content: flex-end;
  background-color: rgb(216, 0, 0);
}