.pos { padding: 15px; } .cart-container { padding: 0 15px; display: inline-block; width: 39%; vertical-align: top; } .item-container { padding: 0 15px; display: inline-block; width: 60%; vertical-align: top; } .search-field { width: 60%; } .search-field input::placeholder { font-size: 12px; } .item-group-field { width: 40%; margin-left: 15px; } .cart-wrapper { margin-bottom: 10px; } .cart-wrapper .list-item__content:not(:first-child) { justify-content: flex-end; } .cart-items { height: 200px; overflow: auto; } .cart-items input { height: 22px; font-size: 12px; } .fields { display: flex; } .pos-items-wrapper { max-height: 480px; overflow-y: auto; } .pos-items { overflow: hidden; } .pos-item-wrapper { display: flex; flex-direction: column; justify-content: space-between; } .image-view-container { display: block; } .image-view-container .image-field { height: auto; } .empty-state { height: 100%; position: relative; } .empty-state span { position: absolute; color: #8D99A6; font-size: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes yellow-fade { 0% { background-color: #fffce7; } 100% { background-color: transparent; } } .highlight { animation: yellow-fade 1s ease-in 1; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .number-pad { border-collapse: collapse; cursor: pointer; display: table; margin: auto; } .num-row { display: table-row; } .num-col { display: table-cell; border: 1px solid #d1d8dd; } .num-col > div { width: 50px; height: 50px; text-align: center; line-height: 50px; }