html, body {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
            margin: 0; height: 100%; overflow: hidden;
} 

main {
	height: 100vh;
  min-height: 100vh;
	overflow: hidden;
  padding: 0;
    margin: 0;
}
.container {
  min-width: 100%;
}
.top-panel {
	font-size: 25px;
	height: 7vh;
	background-color: #696969;
	color: #fff;
}
.top-panel .row {
	    height: 100%;
}
.top-panel .col {
	height: 100%;
  border-right: 1px solid #fff;
	display: flex;
	justify-content: center;
  align-items: center;
	
}
.top-panel .col:last-of-type {
    border-right: none;
}

.total-wrapper {
	height: 7vh;
}
.total-wrapper .total-col {
	font-size: 26px;
	background-color: #1a7d4e; 
	font-weight: 400;
	color: #fff;
	height: 7vh;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.total-wrapper .total-col .total-price {
	padding-left: 6px;
  padding-right: 6px;
	font-weight: 700;
}
.item-wrapper {
	height: 30vh;
	overflow: scroll;
  overflow-x: hidden;
} 
.item-wrapper.addSpace {
  height: 49vh;
}
.item-wrapper .item {
	border-bottom: 1px solid #cacaca;
	height: 6vh;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    font-size: 20px;
}
.item-wrapper .item .quan .input-group { 
  margin: 0;
}


@media screen and (max-width: 1024px) {
  .item-wrapper .item .quan .input-group input[type='button']{ 
    min-width: 50px;
  }
}
@media screen and (max-width: 550px) {
  .item-wrapper .item .quan .input-group input[type='button']{ 
    min-width: 20px;
  }
}

@media screen and (max-width: 1024px) {
  .item-wrapper .item .quan .input-group .quantity-field {
    width: 60px;
    padding: 0;
    text-align: center;
    padding-left: 5px;
  }
}
@media screen and (max-width: 550px) {
  .item-wrapper .item .quan .input-group .quantity-field {
    width: 34px;
    padding: 0;
    text-align: left;
    padding-left: 5px;
  }
}

.item-wrapper .item .basket {
	padding-left: 3px;
  padding-right: 3px;
  font-weight: 600;
}
.item-wrapper .item .quan {
  display: flex;
  justify-content: center;
}
.item-wrapper .item .price {
	font-size: 17px;
  height: 35px;
  align-content: center;
}
.item-wrapper .item .name {
	font-size: 17px;
  height: 35px;
  align-content: center;
}
.item-wrapper .item .del {
  text-align: center;
}
.input-wrapper {
	height: 6vh;
	padding: 0;
}
.input-wrapper .input-group {
	margin: 0;
	padding: 0;
}
.input-wrapper .input-group input {
	height: 6vh;
  font-size: 20px;
}
.input-wrapper .input-group input.price {
  margin-left: 10px;
  border-radius: 0;
}
.input-wrapper .input-group input.price:focus {
  outline: none;
  border: 1px solid rgb(222, 226, 230);
  box-shadow: none;
}
.keyboard {
	height: 50vh;
}
.keyboard.hidePads {
  height: 35vh;
}
.keyboard .favourite {
	height: 28vh;
	background-color: #696969;
	color: #fff;
}
.keyboard .favourite .item {
	height: 10vh;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
	justify-content: center;
    border-right: 1px solid #fff;
    border-bottom: 1px solid;
}

.keyboard .favourite .item .btn {
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}

.keyboard .favourite .item .btn:active, .keyboard .favourite .item .btn.show {
  border: none;
}

.keyboard .favourite .item:nth-child(3n) {
  border-right: none;
}

.keyboard .keypads {
	height: 8vh;
}

.keyboard .keypads .item, .keyboard .keypadsTwo .item  {
	    font-size: 25px;
	height: 8vh;
	display: flex;
    align-content: center;
    flex-wrap: wrap;
	justify-content: center;
}
.keyboard .keypads .item.num {
	color: #fff;
	background-color: #c2c2c2;
	border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    font-weight: bold;
    font-size: 32px;
}
.keyboard .keypads .item.num:last-of-type {
	border-right: none;
    border-bottom: 2px solid #fff;
}
.keyboard .keypads:last-of-type .item.num {
    border-bottom: none;
}
.keyboard .keypads .item.return,
.keyboard .keypads .item.plus,
.keyboard .keypads .item.add,
.keyboard .keypadsTwo .item.return {
	background-color: yellow;
	border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.keyboard .keypads .item.storno, .keyboard .keypadsTwo .item.storno {
	background-color: #1a7d4e;
	color: #fff;
    border-bottom: 2px solid #fff;
}

.keyboard .keypads .item.add {
	border-bottom: none;
}

input,
textarea {
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 10px;
}

input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.input-group {
  clear: both;
  margin: 15px 0;
  position: relative;
}

.input-group input[type='button'] {
  background-color: #1a7d4e;
  color: #fff;
  font-weight: 600;
  min-width: 60px;
  width: auto;
  transition: all 300ms ease;
}

.input-group .button-minus,
.input-group .button-plus {
  font-weight: bold;
  height: 38px;
  padding: 0;
  width: 38px;
  position: relative;
}

.input-group .quantity-field {
  position: relative;
  height: 38px;
  text-align: center;
  width: 62px;
  display: inline-block;
  font-size: 17px;
  resize: vertical;
}

.button-plus {
  left: -13px;
}

input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
}

.returnCache {
  font-size: 20px;
  top: 50%;
  margin-top: -65%;
}

.returnCache .qr-payment img {
  width: 300px;
  display: block;
  margin: 0 auto;
}

.returnCache .total .striked {
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.returnCache .total .new {
  color: red;
}

.no-login {
  padding: 0;
}
.backdrop {
  background-color: #000;
  width: 100%;
  height: 100%;
  opacity: .50;
  position: fixed;
  pointer-events: none;
}

.print {
  display: none;
}

.basket-total-rounded {
  .total-rounded {
    font-weight: 600;
    font-size: 35px;
  }
}

.password-toggle-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle-icon i {
  font-size: 18px;
  line-height: 1;
  color: #333;
  transition: color 0.3s ease-in-out;
  margin-bottom: 20px;
}

.password-toggle-icon i:hover {
  color: #000;
}

.dropdown-item {
  font-size: 24px;
  padding-bottom: 8px;
  padding-top: 8px;
  font-weight: 600;
  
}

.dropdown-menu.products.show .dropdown-item {
  border-bottom: 1px solid;
}

.dropdown-menu.products.show {
  border: 1px solid #1a7d4e;
}

.dropdown-menu.products.show li:nth-child(odd) {
  background-color: yellow;
}

.dropdown-menu.products.show li:nth-child(even) {
  background-color: #1a7d4e;
}

.dropdown-menu.products.show li:nth-child(even) a {
  color: #fff;
}

.payment-btn {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 20px;
}

@media (min-width: 600px) {
  .modal.returnCache  {
    width: 100%;
    max-width: 100%;
  }

  .returnCache .modal-dialog {
    width: 90%;
    max-width: 90%;
  }
}

@media (max-width: 600px) {
  .modal.returnCache  {
    width: 100%;
    max-width: 100%;
    margin-top: -85%;
  }
}

@media (max-width: 520px) {
  .modal.returnCache  {
    width: 100%;
    max-width: 100%;
    margin-top: -100%;
  }
}

@media (min-width: 800px) {
  .modal.returnCache  {
    width: 100%;
    max-width: 100%;
    margin-top: -55%;
  }
}

@media (min-width: 950px) {
  .modal.returnCache  {
    width: 100%;
    max-width: 100%;
    margin-top: -45%;
  }
}