.pos .leftpane { background: $gray-200; float:left; height: 100%; display: flex; flex-direction: column; flex-grow: 1; width:40%; max-height: 94vh; max-width: 65vh; border: solid 5px teal; &::-webkit-scrollbar { width: 0; } } .pos .products-widget { display: flex; flex-direction: column; flex-grow: 1; height:100%; border :solid 1px teal; overflow: hidden;; &::-webkit-scrollbar { width: 0; } } .pos .order { max-width: none; } .pos .order .orderlines { &::-webkit-scrollbar { width: 0; } } .pos-topheader { background: teal !important; } .payment-status-container { margin-top: 70px !important; } .pos .right .invoice-btn { display: flex; justify-content: center; } .pos .right .invoice-btn .highlight { width: 65% !important; } .paymentlines-container { height: 29% !important; } .nextorder{ width:29% !important; } .pos .product-list-container .product-list-empty p { margin: 10px; text-align: center; color: teal; font-size: 14px; } .pos .button.validation .pay-circle { background: white; color: teal; } .pos .numpad { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; flex-grow: 1; width: 65%; min-width: 216px; } .pos .control-buttons { display: grid; flex-grow: 1; width: 35%; border :solid 1px teal; } .pos .leftpane .control-buttons .control-button { flex:1 1 100%; } .pos .numpad button { border-color:teal; color:teal; border-top: 1px solid; border-bottom: 0px; } .pos .mode-button.selected-mode { color: teal; background: white; border-color: teal; } .pos .actionpad { padding: 0; text-align: center; vertical-align: top; border: none; border-right: 1px solid $gray-300; flex-grow: 1; width: 50%; } .pos .right{ float:right; background:white; width:30%; height: 100%; border: solid 5px teal; max-height: 94vh; } .pos .customer-button{ width: 65%; margin-bottom: 110px; border: 2px solid teal !important; color: teal !important; } .pos .head{ color: #017e84; font-size: 12px; font-weight: bold; } .pos .center{ background:white; height: 100%; border: solid 5px teal; border-top:none; max-height: 94vh; } .pos ._o_customer{ text-align: justify; margin-left: 30px; margin-right: 30px; } .pos .paymentlines-container { padding: 16px; padding-top: 0; border: solid 5px teal; min-height: 154px; text-align:center; padding: 50px 30px 0px 18px; font-size: 30px; color: #43996E; } .pos p.title-category { margin: 0; padding: map-get($spacers, 1) map-get($spacers, 3); background: $gray-300; color: teal; text-transform: uppercase; font-weight: bold; font-size: 15px; order: 1; } .pos .payment-status-total-due { font-size: 17px; padding-top: 12px; padding-bottom: 12px; color: $gray-500; padding-left: 100px; } .pos .payment-status-container { display: flex; justify-content: center; font-size: 25px; padding-top: 15px; } .pos .button.validation { display: flex; align-items: center; justify-content: center; flex-direction: column; border: none; background: $primary; color: #fff; font-size: 14px; font-weight: bold; transition: all 150ms linear; height:16%; border-bottom: solid 5px teal !important; } .pos .amount-paymentmethod{ padding-left: 40%; } .pos .delete-button { padding-left: 30%; } .pos .form-container{ max-width: 450px; padding: 30px; background-color: white; } .pos .orderlinesactionpad-receipt{ font-size : 15px; text-align:left; margin-left:35px; } .pos .button.validation{ background:#39B8B8 !important; } .highlight { width: 29.45% !important; } .paymentmethods-container { overflow: scroll; height: 49.125%; &::-webkit-scrollbar { width: 0; } } .pos .nextorder { position: absolute; width: 28.3%; bottom: 0; padding-right: 0.6rem; } .pos .search-bar-container.sb-product { max-width: 100%; width:100%; -webkit-box-pack: start; justify-content: flex-start; height: 100%; min-height: 48px; }