@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
:root {color-scheme: dark;}
* {margin: 0;padding: 0;font-family: 'Inter', sans-serif;box-sizing: border-box;}
div.wrapper { width: 80%; margin: 0 auto; max-width: 1200px; min-width: 1000px; }
body {font: 1vw/1.4 'Inter', sans-serif;background-color: #000;color: #fff;}
body.admin-interface { font: 14px/2 'Inter', sans-serif;}
table.admin { margin: 50px ; width: calc(100% - 100px); }
table.admin th { font-size: 18px; text-transform: uppercase; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.1); position: sticky; top: 0; background: #000; }
table.admin td { font-size: 16px; font-weight: 400;}
span.hash { font-family: 'Roboto Mono', monospace; font-size: 10px; padding: 4px; border: 1px dashed rgba(255,255,255,.2); }
span.status { text-transform: uppercase; font-size: 12px; font-weight: 700; padding: 4px 14px; background: rgba(255,255,255,.5); border-radius: 20px; }
span.status.paid { background-color: green; }
span.status.cancelled { background-color: red; }
span.status.pending { background-color: orange; }
a {text-decoration: none;transition: background-color .2s;}
div#products {width: calc(100% - 25vw);overflow-y: scroll;}
div.flex {display: flex;justify-content: left;flex-wrap: wrap;padding: 20px;}
div.flex div.category {width: calc((100% / 3) - 40px);min-width: 280px;margin: 20px;}
div.flex div.category h2 {padding: 0;position: relative;}
div.flex div.category h2 a {display: block;padding: 40px;border: 1px solid rgba(255, 255, 255, .05);transition: transform .2s;}
div.flex div.category h2 span {display: block;}
div.flex div.category h2 span.name {color: #fff;margin-bottom: 6vh;font-size: 1.3vw;}
div.flex div.category h2 span.selected {color: rgba(255, 255, 255, 1);font-size: .7vw;border-radius: 0 0 0 3px;font-weight: 700;position: absolute;top: 0;right: 0;background: #f00;width: 40px;height: 40px;text-align:center;line-height: 40px;display: none;}
div.flex div.category h2 span.number {color: rgba(255, 255, 255, .3);font-size: 1vw;font-weight: 400;}
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%}
body.category-open div.flex div.category h2 a {background: transparent url('//icon.ontbrand.com/regular/fff/arrow-left.svg') no-repeat 50px 56px;background-size: 20px;padding-left: 100px;margin-bottom: 5vh;}
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 {filter: blur(10px);}
div.modal {position: fixed;min-width: 940px;width: 50vw;height: auto;max-height: 70vh; overflow: hidden; border: 1px solid rgba(255,255,255,.2);border-radius: 5px;box-shadow: rgba(255,255,255,.1) 0 0 30px;left: 0;top: 0;right: 25vw;margin: 10vh auto;background: rgba(0, 0, 0, 1);z-index: 3;padding: 3vw;}
div.modal div.columns { display: flex; text-align: left; }
div.modal div.column:first-child { width: 65%; padding-right: 5%; overflow-y: scroll; max-height: 63vh; }
div.modal div.column:last-child { width: 35%; padding-left: 5%; border-left: 1px solid rgba(255,255,255,.2); }
div.modal div.column.inactive a { opacity: .2; cursor: not-allowed; }
div.modal h3 { margin: 30px 0; font-size: 19px; }
div.modal h3 span { color: #ffbd0f; 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 5s ease-in-out;}
@keyframes complete {0% { width: 0; }100% { width: 100%; }}
div.modal h2 {line-height: 1.4;padding-top: 0;text-align: center;}
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: #fff;font-size: 15px;font-weight: 700;border: 1px solid #fff;border-radius: 5px;margin-bottom: 30px;}
a#pin { background: #fff url('/tpl/contactless.svg') no-repeat left 20px center; background-size: auto 20px; color: #000; }
a#contant { background: url('//icon.ontbrand.com/regular/fff/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: #111;color: #fff;}
div.modal form label {border-radius: 5px;box-sizing: border-box;cursor: pointer;color: #999;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;}
form.hidden {display: none;}
h2 {font-size: 1.7vw;padding: 4vh 0;}
table {width: 100%;border-collapse: collapse;margin-bottom: 0px;}
th {border-collapse: collapse;margin-bottom: 0px;text-align: left;}
div.modal td { border: 1px dashed rgba(255, 255, 255, .2); }
td {text-align: left;white-space: nowrap;border-bottom: 1px dashed rgba(255,255,255,.2);}
td:first-child {padding: 0;}
td.num_input input { height: 2vw;line-height: 2vw;vertical-align: top;font-size: 1vw;font-family: 'Roboto Mono', monospace;font-weight: 700;width: 50px;text-align: center;border: 0;background: #000;}
td.num_input a {display: inline-block;width: 2vw;height: 2vw;padding: 0;}
td.num_input a.add {background: green url('//icon.ontbrand.com/regular/fff/plus.svg') no-repeat center;background-size: .5vw;}
td.num_input a.subtract {background: red url('//icon.ontbrand.com/regular/fff/minus.svg') no-repeat center;background-size: .5vw;}
td.wide {width: 100%;white-space: normal;padding: 0;}
td {font-size: 1vw;font-weight: 700;}
td.price {font-family: 'Roboto Mono';font-weight: 700;}
th.wide {width: 100%;white-space: normal;padding: 0;}
td a {color: #fff;display: block;padding: 1vw;}
td a.load-products { background: #ffbd0f; text-align: center; color: #000; 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:hover {color: rgba(255,255,255,.5);}
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: #fff;}
input[type="number"] {background: transparent;text-align: center;width: 72px;padding: 8px;border: 0;font-family: 'Arial', verdana;appearance: textfield;}
div.sidebar {width: 25vw;border-left: 1px solid rgba(255, 255, 255, .2);padding: 0 50px;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 dashed rgba(255, 255, 255, .2);padding: 16px 0;}
div.sidebar li span {display: inline-block;}
div.sidebar li span.num {margin-right: 8px;color: rgba(255, 255, 255, .5);font-family: 'Roboto Mono', monospace;}
div.sidebar li span.total {float: right;font-family: 'Roboto Mono', monospace;font-weight: 700;}
div.sidebar a.finalize { background: #000; border-color: #fff; color: #fff; border: 2px solid #fff; 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: #ffbd0f;color: #000;text-align: center;font-weight: 700;text-decoration: none;}
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: #ffbd0f;color: #000;text-align: center;font-weight: 700;text-decoration: none;margin-top: 30px;}
a.button:hover,a.finalize:hover { background: rgba(255,189,15,.8); }
a.button span.price {padding-left: 8px;font-weight: 400;color: rgba(0, 0, 0, 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: #333; border: 1px solid #444; }
table.group_select td input[type="text"] { font-size: .6vw; padding: 8px 16px; }
table.group_select tr:hover td { background: rgba(255,255,255,.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: #000; border-top: 1px solid rgba(255,255,255,.2); text-align: center; }
div#menu a { display: inline-block; color: #fff; line-height: 80px; padding: 0 30px; padding-left: 56px; margin: 0 30px; font-weight: 700; }
div#menu a.active,div#menu a:hover { color: #ffbd0f; }
div#menu a#kassa { background: url('//icon.ontbrand.com/light/fff/grip-horizontal.svg') no-repeat left center; background-size: auto 40px; }
div#menu a#transacties { background: url('//icon.ontbrand.com/light/fff/exchange-alt.svg') no-repeat left center; background-size: auto 35px; }
div#menu a#bonnen { background: url('//icon.ontbrand.com/light/fff/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/ffbd0f/grip-horizontal.svg') }
div#menu a#transacties:hover,div#menu a#transacties.active { background-image: url('//icon.ontbrand.com/light/ffbd0f/exchange-alt.svg') }
div#menu a#bonnen:hover,div#menu a#bonnen.active { background-image: url('//icon.ontbrand.com/light/ffbd0f/receipt.svg') }
@media all and (max-width: 600px) {body {font: 14px/1.2 'Inter', sans-serif;}div.flex {column-count: 1;column-gap: 0;padding: 0;}}
@media all and (max-width: 1400px) {div#products div.flex { padding: 10px; } div.sidebar { padding: 30px; }div.sidebar h2 { padding: 0 0 30px 0; }}
div.modal div.groups label { display: flex; justify-content: left; flex-wrap: wrap; text-align: left; width: 100%; border: 1px solid rgba(255,255,255,.1); margin-bottom: 10px; padding: 20px; box-sizing: border-box; color: #fff; font-size: 13px; border-radius: 3px; }
div.modal div.groups label.selected { border: 1px solid #ffbd0f; }
div.modal div.groups span { display: inline-block; line-height: 26px; margin-right: 20px; }
div.modal div.groups span.name { font-weight: 700; color: #ffbd0f; font-size: 18px; width: 100%; margin: 0; }
div.modal div.groups span.contact { padding-left: 16px; width: 100%; margin: 0; background: url('//icon.ontbrand.com/regular/fff/user.svg') no-repeat left; background-size: 11px; }
div.modal div.groups span.start_time { padding-left: 16px; background: url('//icon.ontbrand.com/regular/fff/clock.svg') no-repeat left; background-size: 11px; }
div.modal div.groups span.room { padding-left: 16px; background: url('//icon.ontbrand.com/regular/fff/tag.svg') no-repeat left; background-size: 11px; }
div.modal div.groups span.players { padding-left: 16px; background: url('//icon.ontbrand.com/regular/fff/users.svg') no-repeat left; background-size: 11px; }
div.modal div.groups input { margin-right: 8px; }