@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
:root {color-scheme: light;}
* {margin: 0;padding: 0;font-family: 'Inter', sans-serif;box-sizing: border-box;outline:none;-webkit-tap-highlight-color: transparent;}
*:focus{outline:none;box-shadow:none;}
html{touch-action:none;}
.hidden {display: none;}
a { border-radius: 3px; animation:none; }
input.number{pointer-events: none;}
div.wrapper { width: 80%; margin: 0 auto; max-width: 1200px; min-width: 1000px; }
body {font: 16px/1.4 'Inter', sans-serif;background-color: #fff;color: #000;}
body.admin-interface { font: 14px/2 'Inter', sans-serif;}
table.admin { margin: 20px ; width: calc(100% - 100px);border-collapse:collapse;}
table.admin th { font-size: 12px; text-transform: uppercase; padding: 12px 24px; border: 0; background: #f9f9f9; color: rgba(55,65,81,1); }
table.admin td { font-size: 14px; font-weight: 400; padding: 16px 24px !important; border-bottom: 1px solid rgba(0,0,0,.1); color: rgba(0,0,0,.4); }
table.admin td.wide { color: #000; font-weight: 600; }
table.admin td a { padding: 0; color: blue; display: inline; margin-right: 10px; }
table.admin tr.total td { border:0; padding-bottom: 50px; }
span.hash { font-family: 'Roboto Mono', monospace; font-size: 10px; padding: 6px 24px; background: #eee; border-radius: 3px; }
span.status { color: #fff; font-size: 12px; font-weight: 600; padding: 6px 24px; border-radius: 3px; }
span.status.paid { background-color: green; }
span.status.cancelled { background-color: red; }
span.status.canceled { background-color: red; }
span.status.failed { background-color: red; }
span.status.pending { background-color: orange; }
table.admin span.amount { font-family: 'Roboto Mono', monospace; font-size: 12px; color: rgba(0,0,0,.7); padding: 3px 6px; background: #eee; border-radius: 3px; margin-right: 8px; }
a {text-decoration: none;transition: background-color .2s;}
div#products {width: calc(100% - 25vw);}
div.options {width: calc(100% - 25vw); text-align: center; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; }
div.options div.scan { width: 300px; height: 300px; background: url('//icon.ontbrand.com/regular/000/barcode-read.svg') no-repeat top 70px center; border-radius: 3px; background-size: 100px; font-size: 18px; margin-top: 30px; padding-top: 175px; position: relative; bottom: 30px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.1); display: inline-block; }
div.options div.scan:after { content: ""; width: 50px; height: 50px; background: url('//icon.ontbrand.com/regular/000/arrow-alt-circle-down.svg') no-repeat center; position: absolute; left: 50%; background-size: 50px; bottom: 30px; margin-left: -25px; }
div.options span { display: block; color: rgba(0,0,0,.2); font-style: italic; margin: 30px 0; font-size: 20px; }
div.options a { display: block; background: #0077ff; color: #fff; display: inline-block; padding: 16px; font-size: 18px; width: 300px; }
a#manual { padding: 100px 0 40px 0; background: #07f url('//icon.ontbrand.com/light/fff/hand-pointer.svg') no-repeat top 40px center; background-size: 40px; }
div.flex {display: flex;justify-content: left;flex-wrap: wrap;padding: 11px;}
div.flex div.category {width: calc((100% / 3) - 8px);min-width: 280px;margin: 4px;}
div.flex div.category h2 {padding: 0;position: relative;}
div.flex div.category h2 a {display: block;padding: 40px;transition: transform .2s; }
div.flex div.category h2 span {display: block;}
div.flex div.category h2 span.name {color: #111315; padding-top: 80px; }
div.flex div.category h2 span.selected {color: #111; font-size: 20px;border-radius: 3px;font-weight: 700;position: absolute;top: 20px;right: 20px;background: rgba(255,255,255,.2);width: 70px;height: 70px;text-align:center;line-height: 70px;display: none;}
div.flex div.category h2 span.number {color: rgba(0,0,0, .4);font-size: 16px;font-weight: 400;}
div.flex div.category h2#h2_1 span.name { background: url('//icon.ontbrand.com/solid/111315/badge-percent.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_2 span.name { background: url('//icon.ontbrand.com/solid/111315/utensils.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_3 span.name { background: url('//icon.ontbrand.com/solid/111315/glass.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_4 span.name { background: url('//icon.ontbrand.com/solid/111315/popcorn.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_5 span.name { background: url('//icon.ontbrand.com/solid/111315/paperclip.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_6 span.name { background: url('//icon.ontbrand.com/solid/111315/cookie.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_7 span.name { background: url('//icon.ontbrand.com/solid/111315/soap.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_8 span.name { background: url('//icon.ontbrand.com/solid/111315/temperature-frigid.svg') no-repeat top left; background-size: auto 30px; }
div.flex div.category h2#h2_9 span.name { background: url('//icon.ontbrand.com/solid/111315/candy-cane.svg') no-repeat top left; background-size: auto 30px; }
div.category table {display: none;}
body.category-open table {display: table;}
body div.modal table {width: 100%;margin: 0;}
body div.modal table.group_select { margin-top: 30px; }
body.category-open div.flex div.category {width: 100%;padding-bottom:60px;}
body.category-open div.flex div.category h2 a {background: transparent url('//icon.ontbrand.com/regular/000/arrow-left.svg') no-repeat left 40px bottom 60px; background-size: 20px;padding-left: 90px;margin-bottom: 16px;}
body.category-open div.flex div.category span.name {margin-bottom: 0;}
div#logo {display: inline-block;margin-left: 5%;}
div#logo a {transition: all .1s;position: relative;background: url('//escaperoomthebasement.nl/resources/img/logo-the-basement-complete.svg') no-repeat center center;width: 400px;height: 200px;display: inline-block;background-size: 400px;}
body.modal-open div.flex,
body.modal-open div.options,
body.modal-open div.sidebar {filter: blur(10px);}
div.modal {position: fixed;width: 400px;height: auto;border-radius: 5px;box-shadow: rgba(0,0,0,.1) 0 0 30px;left: 50%; margin-left: -200px; top: 200px;background: rgba(255, 255, 255, 1);z-index: 3;padding: 40px;}
div.modal div.columns { display: flex; text-align: left; }
div.modal div.column:first-child { width: 60%; margin-right: 5%; }
div.modal div.column:last-child { width: 35%; padding-left: 5%; border-left: 1px solid rgba(0,0,0,.2); }
div.modal h3 { margin: 30px 0; font-size: 19px; }
div.modal h3 span { color: #0077ff; font-weight: 900; margin-right: 10px; }
div.modal.completed:before {content: '';position: absolute;left: 0;bottom: 0;height: 10px;background: green;right: 0;border-radius: 0 0 0 5px;animation: complete 10s linear;}
@keyframes complete {0% { width: 0; }100% { width: 100%; }}
div.modal h2 {line-height: 1.4;padding-top: 0;}
div.modal b { display: block; margin-bottom: 20px; }
div.modal input.wide,
div.modal select { padding: 16px 24px; margin-top: 10px; width: 100%; box-sizing: border-box; border: 2px solid #000; border-radius: 3px; font-size: 16px; font-family: 'Inter', sans-serif; background-color: #fff; }
div.modal ul {list-style: none;border-radius: 5px;text-align: center;}
div.modal a.close {position: absolute;top: 0;right: 0;width: 60px;height: 60px;border-radius: 0 5px 0 0;background: #f00 url('//icon.ontbrand.com/regular/fff/times.svg') no-repeat center;background-size: 20px;}
div.modal ul a {display: block;padding: 16px;text-transform: uppercase;text-align: center;color: #000;font-size: 15px;font-weight: 700;border: 1px solid #000;border-radius: 5px;margin-top: 30px;}
div.modal ul a.print { border: 0; background: #eee; }
div.modal ul a.print-receipt { background: #0077ff; color: #fff; }
div.modal ul a.close-button { background: #ccc; color: #fff; border: 0; margin-top: 10px; }
a#pin { background: #000 url('//icon.ontbrand.com/regular/fff/credit-card-front.svg') no-repeat left 20px center; background-size: auto 20px; color: #fff; }
a#pin.in-progress { background: #555 url('/img/loading.svg') no-repeat left 20px center; background-size: auto 22px; border-color: #555; }
a#contant { background: url('//icon.ontbrand.com/regular/000/euro-sign.svg') no-repeat left 20px center; background-size: auto 20px; }
div.modal form input[type="password"],div.modal form input[type="email"] {border-radius: 5px;box-sizing: border-box;width: 100%;padding: 12px 16px;margin-bottom: 10px;font-size: 17px;background-color: #eee;color: #000;}
div.modal form label {border-radius: 5px;box-sizing: border-box;cursor: pointer;color: #666;display: block;width: 100%;padding: 8px 0;text-align: center;}
div.modal button {background: #0077ff;color: #fff;width: 100%;box-sizing: border-box;padding: 12px 16px;border: 0;border-radius: 5px;font-size: 17px;font-weight: 700;}
div.modal a.button { margin-top: 10px; }
div.modal div.block.wisselgeld { border: 1px solid #eee; border-radius: 5px; padding: 20px; margin-top: 30px; }
div.modal div.block.wisselgeld b { display: block; margin: 20px 0 10px 0; }
div.modal div.block.wisselgeld b:first-child { margin: 0; }
div.modal div.block.wisselgeld input {padding: 12px; font-size: 14px; width: 100%; box-sizing: border-box; }
div.modal div.block.wisselgeld span#wisselgeld { display: block; min-height: 20px; background: #eee; border-radius: 5px; padding: 12px; }
div.modal div.block.wisselgeld span#wisselgeld ul { margin-top: 8px; }
div.modal div.block.wisselgeld span#wisselgeld li { text-align: left; padding-left: 20px; font-family: 'Roboto Mono', monosspace; background: url('//icon.ontbrand.com/solid/000/arrow-square-right.svg') no-repeat left center; background-size: 10px; }
form.hidden {display: none;}
h2 {font-size: 28px;padding:40px 0 20px 0;}
table {width: 100%;margin: 0px;font-size: 18px; border-collapse: collapse;}
table.products tr {border: 1px solid rgba(0,0,0,.1);border-radius: 5px;display: block; margin-bottom: 10px; padding: 0 20px;}
th {border-collapse: collapse;margin-bottom: 0px;text-align: left;}
div.modal td { border: 1px dashed rgba(0, 0, 0, .2); }
td {text-align: left;white-space: nowrap;font-weight: 700;padding: 8px 0px;}
td:first-child {padding: 0;}
td.num_input div.input { background: #f9f9f9; border-radius: 30px; height: 44px; }
td.num_input input { height: 44px;line-height: 44px;vertical-align: top;font-family: 'Roboto Mono', monospace;font-weight: 700;width: 50px;text-align: center;border: 0;background: #f9f9f9;}
td.num_input a {display: inline-block;width: 42px; height: 42px; border-radius: 30px;padding: 0;}
td.num_input a.add {background: #0077ff url('//icon.ontbrand.com/regular/fff/plus.svg') no-repeat center;background-size: 14px; height: 44px; width: 44px;}
td.num_input a.subtract {background: #fff url('//icon.ontbrand.com/regular/000/minus.svg') no-repeat center;background-size: 14px;margin: 1px;}
td.num_input a.clicked,
a.button.clicked {animation: bounce .2s; }
td.num_input a.inactive { opacity: .1; }
td.num_input a.trash {background: #fff url('//icon.ontbrand.com/regular/000/trash-alt.svg') no-repeat center; background-size: 16px;}
@keyframes bounce { 70% { transform: scale(.9); } }
td.wide {width: 100%;white-space: normal;padding: 0;}
td.price {font-weight: 700;font-size:26px;color:#111;text-align:right;}
button.add_barcode { transition: all .2s; cursor: pointer; border: 0; background: transparent; font-size: 0; display: inline-block; width: 30px; height: 30px; background: #0077ff url('//icon.ontbrand.com/regular/fff/scanner.svg') no-repeat center; background-size: 16px; border-radius: 3px; margin-left: 20px; vertical-align: top; margin-top: 4px; }
button.add_barcode:hover { background-color: rgba(0,119,255,.8); }
th.wide {width: 100%;white-space: normal;padding: 0;}
td a {color: #000;display: block;padding: 30px 20px;}
td a.load-products { background: #0077ff; text-align: center; color: #fff; border-radius: 3px; padding: 10px 20px; font-weight: 700; }
td a.done { background: green; color: #fff; border-radius: 3px; padding: 10px 20px; font-weight: 700; }
td a.load-products:hover { background: #fff; color: #000; }
td a span.status {text-decoration: none;display: inline-block;margin-left: 6px;vertical-align: top;}
td a span.status.nieuw {background: #f00;color: #fff;padding: 4px 6px;margin-top: -2px;border-radius: 3px;font-size: 11px;text-transform: uppercase;}
td a span.status.actie {background: #f90;color: #fff;padding: 4px 6px;margin-top: -2px;border-radius: 3px;font-size: 11px;text-transform: uppercase;}
input {font-size: 17px;color: #000;}
input[type="number"] {background: transparent;text-align: center;width: 72px;padding: 8px;border: 0;font-family: 'Arial', verdana;appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
body.sidebar-hidden div.sidebar { transform: translateX(100%); }
div.sidebar {transition: all .2s; width: 25vw;border: 1px solid rgba(0, 0, 0, .1);padding: 0 50px; margin: 14px 14px 14px 0; border-radius: 5px; box-sizing: border-box;position: relative;}
div.sidebar div#basket {margin-bottom: 40px;}
div.sidebar ul {list-style: none;}
div.sidebar li {border-bottom: 1px solid rgba(0, 0, 0, .1);padding: 16px 0;position: relative;}
div.sidebar li.total {border-top: 1px solid rgba(0, 0, 0, .1);border-bottom: 0;padding: 16px 0;position: relative;font-size:23px;}
div.sidebar li span.del { content: ""; width: 0; position: absolute; top: 0; right: 0; bottom: 0; background: #ffdddd url('//icon.ontbrand.com/regular/f00/trash.svg') no-repeat center; background-size: 16px;  }
div.sidebar li.to-be-removed span.del { width: 100px; background-image: none; }
div.sidebar li.to-be-removed span.del:after { position: absolute; left: 40px; top: 25px; content: ""; animation: rotate 1s infinite; background: url('//icon.ontbrand.com/solid/ff0000/spinner-third.svg') no-repeat center; background-size: 20px; width: 20px; height: 20px; }
@keyframes rotate { 100% { transform: rotate(360deg);} }
div.sidebar li span {display: inline-block; line-height: 40px;}
div.sidebar li span.num {margin-right: 8px;color: rgba(0, 0, 0, .8); font-family: 'Roboto Mono', monospace; border: 1px solid rgba(0,0,0,.1); height: 40px; line-height: 40px; border-radius: 30px; width: 50px; text-align: center; }
div.sidebar li span.num.editing { width: auto; background: #f9f9f9; border: 0;}
div.sidebar li span.num a { font-weight: 700; font-size: 0; display: inline-block; width: 38px; margin: 1px; background: rgba(0,119,255,1); color: #fff; border: 0; height: 38px; vertical-align: top; border-radius: 30px; text-align: center; line-height: 34px; }
div.sidebar li span.num a:first-child { margin-right: 16px; background: #fff url('//icon.ontbrand.com/regular/000/minus.svg') no-repeat center; background-size: 10px; }
div.sidebar li span.num a.trash { background: #fff url('//icon.ontbrand.com/regular/000/trash-alt.svg') no-repeat center;  background-size: 12px; }
div.sidebar li span.num a:last-child { margin-left: 16px; background: #0077ff url('//icon.ontbrand.com/regular/fff/plus.svg') no-repeat center; background-size: 10px; }
div.sidebar li span.total {float: right;font-family: 'Roboto Mono', monospace;font-weight: 700;}
div.sidebar a.finalize { background: #fff; border-color: #000; color: #000; border: 2px solid #000; position: absolute; left: 50px; right: 50px; bottom: 50px; margin-bottom: 0; width: auto; }
a.button {display: block;width: 100%;box-sizing: border-box;bottom: 16px;z-index: 2;padding: 16px;border-radius: 3px;background-color: #0077ff;color: #fff;text-align: center;font-weight: 700;text-decoration: none;}
a.button.inactive { cursor: not-allowed; background-color: #eee; }
a.load-bill {display: block;width: 100%;box-sizing: border-box;bottom: 16px;z-index: 2;padding: 16px;border-radius: 3px;background-color: #fff;color: #000;text-align: center;font-weight: 700;text-decoration: none;margin-top: 20px;}
a.finalize {display: block;width: 100%;box-sizing: border-box;bottom: 16px;z-index: 2;padding: 16px;border-radius: 3px;background-color: #0077ff;color: #fff;text-align: center;font-weight: 700;text-decoration: none;margin-top: 30px;}
a.button:hover,a.finalize:hover { background: rgba(0,119,255,.8); }
a.button.inactive:hover { background: #eee; }
a.button span.price {padding-left: 8px;font-weight: 400;color: rgba(255, 255, 255, 0.5);}
table.overview td {padding: 10px;}
table.overview tr.total td {font-weight: 700;}
div.hide_orders {margin: 0 0 16px 0;}
div.hide_orders input {margin-right: 10px;}
div.hide_orders label {font-weight: 700;}
table.group_select th,table.group_select td { padding: 8px 14px; font-size: 14px !important; }
table.group_select td { font-weight: 400; white-space: nowrap; width: 1%; cursor: pointer; }
table.group_select td.wide { white-space: normal; width: 100%; }
table.group_select th { padding: 8px; background: #ccc; border: 1px solid #ddd; }
table.group_select td input[type="text"] { font-size: .6vw; padding: 8px 16px; }
table.group_select tr:hover td { background: rgba(0,0,0,.1); }
td[colspan="5"] { text-align: center; }
table.group_select.large td { padding: 1vw; font-size: .8vw !important; border: 0; }
table.group_select.large td input { padding: 1vw; font-size: .8vw !important; }
table.group_select.large tr:hover td { background: none; }
div#menu { height: 80px; background: #fff; border-top: 1px solid rgba(0,0,0,.1); text-align: center; position: fixed; bottom: 0; left: 0; right: 0; }
div#menu a { display: inline-block; color: #000; line-height: 80px; padding: 0 30px; padding-left: 56px; margin: 0 30px; font-weight: 700; }
div#menu a.active,div#menu a:hover { color: #0077ff; }
div#menu a#kassa { background: url('//icon.ontbrand.com/light/000/grip-horizontal.svg') no-repeat left center; background-size: auto 40px; }
div#menu a#transacties { background: url('//icon.ontbrand.com/light/000/exchange-alt.svg') no-repeat left center; background-size: auto 35px; }
div#menu a#bonnen { background: url('//icon.ontbrand.com/light/000/receipt.svg') no-repeat left center; background-size: auto 30px; padding-left: 45px; }
div#menu a#kassa:hover,div#menu a#kassa.active { background-image: url('//icon.ontbrand.com/light/0077ff/grip-horizontal.svg') }
div#menu a#transacties:hover,div#menu a#transacties.active { background-image: url('//icon.ontbrand.com/light/0077ff/exchange-alt.svg') }
div#menu a#bonnen:hover,div#menu a#bonnen.active { background-image: url('//icon.ontbrand.com/light/0077ff/receipt.svg') }
div#menu a.add-product { position: absolute; left: 0px; background: #0077ff url('//icon.ontbrand.com/solid/fff/plus-square.svg') no-repeat left 20px center; background-size: 22px; margin: 10px 24px; line-height: 60px; color: #fff; }
div#products, div.options { width: calc(100% - 40vw); }
body.sidebar-hidden div#products, body.sidebar-hidden div.options { width: 100%; }
div.sidebar { width: 40vw; }
body.sidebar-hidden div.sidebar { display: none; }
div.flex div.category { width: calc(50% - 8px); }
@media all and (min-width: 1240px) { 
	div#products, div.options { width: calc(100vw - 520px); } 
	div.sidebar { width: 489px; }
}