@charset "UTF-8";
:root {
--tangerine: #FF6425;
--cobalt: #0C319B;
--mid: #615D83;
--darker: #141428;
--dark: #2A244F;
--black: #0F0D1D;
--ultralight: #FAFAFA;
--lighter: #ECECEC;
--light: #B9B9B9;
--white: #FFFFFF;
--warning: #E54D1D;
--translucent-white: #ffffffbf;
--translucent-light: #B9B9B9bf;
--translucent-dark: #2A244Fbf;
--sunrise: linear-gradient(45deg, #FE4084 0%, var(--tangerine) 100%);
--nightfall: linear-gradient(45deg, var(--black) 0%, #0E1845 36%, var(--cobalt) 100%);
--midnight: linear-gradient(45deg, var(--dark) 0%, var(--darker) 100%);
--ceramic: linear-gradient(180deg, #FAFAFA 0%, #ECECEC 100%);
--light-gradient: linear-gradient(45deg, var(--light) 0%, var(--light) 100%);
--light-gradient-vertical: linear-gradient(180deg, #B9B9B9 25%, #B9B9B900 100%);
--lighter-gradient-vertical: linear-gradient(180deg, #ECECEC 25%, #ECECECDD 75%, #ECECEC00 100%);
--dark-gradient-vertical: linear-gradient(180deg, #2A244F 25%, #2A244F00 100%);
--darker-gradient-vertical: linear-gradient(180deg, #141428 50%, #141428DD 75%, #14142800 100%);
--ultralight-gradient-vertical: linear-gradient(180deg, #FAFAFA 25%, #FAFAFA88 75%, #FAFAFA00 100%);
--ultralight-gradient-vertical-heavy: linear-gradient(180deg, #FAFAFA 50%, #FAFAFA88 75%, #FAFAFA00 100%);
--customer-screen-gradient: linear-gradient(100deg, rgba(20, 20, 40, 0) 10%, rgba(20, 20, 40, 0.7) 30%, #141428 60%);
--small-border-radius: 8px;
--large-border-radius: 16px;
--light-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
--mid-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
--large-dark-shadow: 0px 4px 100px 0px #000;
--large-light-shadow: 0 8px 32px 0 rgba(0,0,0,0.2);
--button-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px -8px 32px 0px rgba(0, 0, 0, 0.10);
--button-shadow-hover: 0px 2px 8px 0px rgba(0, 0, 0, 0.10), 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
--card-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15), 0px 8px 16px 0px rgba(0, 0, 0, 0.20);
--scrollable-shadow: 0 4px 32px 20px rgba(0, 0, 0, 0.15), 0px 0px 16px 0px rgba(0, 0, 0, 0.4);
--scrollable-shadow-dark: 0 4px 32px 20px rgba(0, 0, 0, 0.8), 0px 0px 16px 0px rgba(0, 0, 0, 0.8);
--heavy-text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 8px 16px rgba(0, 0, 0, 0.15);
--transition-timing-function: cubic-bezier(0.65, 0, 0.25, 1.00);
--slow-then-quick: cubic-bezier(0.75, 0, 1, 1);
--quick-then-slow: cubic-bezier(0, 0, 0, 0.75);
--main-transition-duration: 0.3s;
--font-family: "DM Sans", Helvetica, Arial, sans-serif;
--main-font-size: 16px;
--main-font-weight: 400;
--main-line-height: normal;
--header-gap: 87px;
--footer-gap: 62px;
font-family: var(--font-family);
font-size: var(--main-font-size);
font-weight: var(--main-font-weight);
line-height: var(--main-line-height);
font-style: normal;
color: var(--darker);
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
background-color: var(--darker);
}
@media screen and (max-width: 1023px) {
body {
scroll-behavior: smooth;
}
}
body::-webkit-scrollbar {
display: none;
}
body.transitioning {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
body.transitioning gate-page, body.transitioning customer-screen, body.transitioning orin-dashboard {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
body.gatepages {
background-color: var(--black);
}
body.dashboard {
background-color: var(--ultralight);
}
body.scrollStopper {
height: 100%;
overflow: hidden;
touch-action: none;
}
figure {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
font-family: "DM Sans", Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
outline: none;
}
@media screen and (max-width: 1023px) {
* {
user-select: none;
}
}
*::-webkit-scrollbar {
display: none;
}
.faded {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.faded.out {
opacity: 0;
}
:root {
--error: url('data:image/svg+xml,');
--eye: url('data:image/svg+xml,');
--eye-off: url('data:image/svg+xml,');
--plus: url('data:image/svg+xml,');
--minus: url('data:image/svg+xml,');
--cross: url('data:image/svg+xml,');
--check: url('data:image/svg+xml,');
--checkweb: url('data:image/svg+xml,');
--building: url('data:image/svg+xml,');
--down: url('data:image/svg+xml,');
--notification: url('data:image/svg+xml,');
--cog: url('data:image/svg+xml,');
--tune: url('data:image/svg+xml,');
--calendar: url('data:image/svg+xml,');
--money: url('data:image/svg+xml,');
--editnotification: url('data:image/svg+xml,');
--people: url('data:image/svg+xml,');
--personcard: url('data:image/svg+xml,');
--change: url('data:image/svg+xml,');
--doorsettings: url('data:image/svg+xml,');
--logout: url('data:image/svg+xml,');
--arrowright: url('data:image/svg+xml,');
--arrowleft: url('data:image/svg+xml,');
--receipt: url('data:image/svg+xml,');
--table: url('data:image/svg+xml,');
--chair: url('data:image/svg+xml,');
--stopwatch: url('data:image/svg+xml,');
--download: url('data:image/svg+xml,');
--card: url('data:image/svg+xml,');
--bin: url('data:image/svg+xml,');
--edit: url('data:image/svg+xml,');
--phone: url('data:image/svg+xml,');
--notes: url('data:image/svg+xml,');
--message: url('data:image/svg+xml,');
--print: url('data:image/svg+xml,');
--alarm: url('data:image/svg+xml,');
--more: url('data:image/svg+xml,');
--copy: url('data:image/svg+xml,');
--good: url('data:image/svg+xml,');
--bad: url('data:image/svg+xml,');
--cake: url('data:image/svg+xml,');
--ORIN: url('data:image/svg+xml,');
--ORINAI: url('data:image/svg+xml,');
}
i.icon {
width: 16px;
height: 16px;
display: inline-block;
background-color: var(--darker);
mask-repeat: no-repeat;
mask-position: center;
will-change: background-color, background-image;
}
i.icon.error {
mask-image: var(--error);
-webkit-mask-image: var(--error);
}
i.icon.eye {
mask-image: var(--eye);
-webkit-mask-image: var(--eye);
}
i.icon.eye.off {
mask-image: var(--eye-off);
-webkit-mask-image: var(--eye-off);
}
i.icon.plus {
mask-image: var(--plus);
-webkit-mask-image: var(--plus);
}
i.icon.minus {
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
}
i.icon.cross {
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
}
i.icon.check {
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
}
i.icon.checkweb {
mask-image: var(--checkweb);
-webkit-mask-image: var(--checkweb);
}
i.icon.building {
mask-image: var(--building);
-webkit-mask-image: var(--building);
}
i.icon.down {
mask-image: var(--down);
-webkit-mask-image: var(--down);
}
i.icon.notification {
mask-image: var(--notification);
-webkit-mask-image: var(--notification);
}
i.icon.cog {
mask-image: var(--cog);
-webkit-mask-image: var(--cog);
}
i.icon.tune {
mask-image: var(--tune);
-webkit-mask-image: var(--tune);
}
i.icon.calendar {
mask-image: var(--calendar);
-webkit-mask-image: var(--calendar);
}
i.icon.money {
mask-image: var(--money);
-webkit-mask-image: var(--money);
}
i.icon.editnotification {
mask-image: var(--editnotification);
-webkit-mask-image: var(--editnotification);
}
i.icon.people {
mask-image: var(--people);
-webkit-mask-image: var(--people);
}
i.icon.personcard {
mask-image: var(--personcard);
-webkit-mask-image: var(--personcard);
}
i.icon.change {
mask-image: var(--change);
-webkit-mask-image: var(--change);
}
i.icon.doorsettings {
mask-image: var(--doorsettings);
-webkit-mask-image: var(--doorsettings);
}
i.icon.logout {
mask-image: var(--logout);
-webkit-mask-image: var(--logout);
}
i.icon.arrowright {
mask-image: var(--arrowright);
-webkit-mask-image: var(--arrowright);
}
i.icon.arrowleft {
mask-image: var(--arrowleft);
-webkit-mask-image: var(--arrowleft);
}
i.icon.receipt {
mask-image: var(--receipt);
-webkit-mask-image: var(--receipt);
}
i.icon.table {
mask-image: var(--table);
-webkit-mask-image: var(--table);
}
i.icon.chair {
mask-image: var(--chair);
-webkit-mask-image: var(--chair);
}
i.icon.stopwatch {
mask-image: var(--stopwatch);
-webkit-mask-image: var(--stopwatch);
}
i.icon.download {
mask-image: var(--download);
-webkit-mask-image: var(--download);
}
i.icon.card {
mask-image: var(--card);
-webkit-mask-image: var(--card);
}
i.icon.bin {
mask-image: var(--bin);
-webkit-mask-image: var(--bin);
}
i.icon.edit {
mask-image: var(--edit);
-webkit-mask-image: var(--edit);
}
i.icon.phone {
mask-image: var(--phone);
-webkit-mask-image: var(--phone);
}
i.icon.notes {
mask-image: var(--notes);
-webkit-mask-image: var(--notes);
}
i.icon.message {
mask-image: var(--message);
-webkit-mask-image: var(--message);
}
i.icon.print {
mask-image: var(--print);
-webkit-mask-image: var(--print);
}
i.icon.alarm {
mask-image: var(--alarm);
-webkit-mask-image: var(--alarm);
}
i.icon.more {
mask-image: var(--more);
-webkit-mask-image: var(--more);
}
i.icon.copy {
mask-image: var(--copy);
-webkit-mask-image: var(--copy);
}
i.icon.good {
mask-image: var(--good);
-webkit-mask-image: var(--good);
}
i.icon.bad {
mask-image: var(--bad);
-webkit-mask-image: var(--bad);
}
i.icon.cake {
mask-image: var(--cake);
-webkit-mask-image: var(--cake);
}
i.icon.rotate {
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(720deg);
}
}
i.icon.ORIN {
mask-image: var(--ORIN);
-webkit-mask-image: var(--ORIN);
}
i.icon.ORINAI {
width: 28px;
mask-image: var(--ORINAI);
-webkit-mask-image: var(--ORINAI);
}
:root {
font-family: var(--font-family);
font-size: var(--main-font-size);
font-weight: var(--main-font-weight);
line-height: var(--main-line-height);
font-style: normal;
}
* {
font-family: var(--font-family);
}
h1 {
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: 1.5625rem;
margin: 0;
padding: 0;
}
h1.bigHeading {
font-size: 2rem;
font-style: normal;
font-weight: 300;
letter-spacing: 0.05rem;
line-height: normal;
}
h3 {
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 1.5625rem;
margin: 0;
padding: 0;
}
p, div, span, time {
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
padding: 0;
}
p.legalText, div.legalText, span.legalText, time.legalText {
font-size: 0.625rem;
font-style: italic;
font-weight: 400;
line-height: normal;
}
p.smallText, div.smallText, span.smallText, time.smallText {
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
p.shopButton .buttonContent, p .shopPrimary, div.shopButton .buttonContent, div .shopPrimary, span.shopButton .buttonContent, span .shopPrimary, time.shopButton .buttonContent, time .shopPrimary {
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0;
padding: 0;
}
p.inputDescription, p.shopSecondary, div.inputDescription, div.shopSecondary, span.inputDescription, span.shopSecondary, time.inputDescription, time.shopSecondary {
font-size: 0.75rem;
font-style: italic;
font-weight: 400;
line-height: normal;
}
p.inputDescription a, p.inputDescription span, p.shopSecondary a, p.shopSecondary span, div.inputDescription a, div.inputDescription span, div.shopSecondary a, div.shopSecondary span, span.inputDescription a, span.inputDescription span, span.shopSecondary a, span.shopSecondary span, time.inputDescription a, time.inputDescription span, time.shopSecondary a, time.shopSecondary span {
font-weight: inherit;
font-size: inherit;
font-style: inherit;
}
p.reservationItemValue, div.reservationItemValue, span.reservationItemValue, time.reservationItemValue {
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
p.reservationItemValue *, div.reservationItemValue *, span.reservationItemValue *, time.reservationItemValue * {
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
}
p.tinyText, div.tinyText, span.tinyText, time.tinyText {
font-size: 0.625rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
p.switcherState, div.switcherState, span.switcherState, time.switcherState {
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 100%;
}
input, select {
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
label, .labelText, orin-flicker .option, time {
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0;
padding: 0;
}
::placeholder {
color: var(--light);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
a {
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line: underline;
margin: 0;
padding: 0;
color: inherit;
}
a.large {
font-size: 1.125rem;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line: underline;
text-transform: capitalize;
}
.button .buttonText, button .buttonText {
font-style: normal;
font-weight: 600;
line-height: normal;
}
.button.large .buttonText, button.large .buttonText {
font-size: 18px;
}
.button.small .buttonText, button.small .buttonText {
font-size: 16px;
}
.button.secondary .buttonText, button.secondary .buttonText {
font-weight: 400;
}
.price {
font-size: 1.125rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
hr {
display: block;
height: 1px;
width: 100%;
border: 0;
margin: 32px 0;
background-color: var(--lighter);
}
orin-button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
orin-button * {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
orin-button .button, orin-button button {
width: 100%;
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr max-content;
align-items: center;
appearance: none;
box-shadow: var(--button-shadow);
border-radius: var(--small-border-radius);
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
@media screen and (min-width: 1024px) {
orin-button .button:hover, orin-button button:hover {
box-shadow: var(--button-shadow-hover);
transform: scale(1.005);
}
}
orin-button .button:active, orin-button .button .heldDown, orin-button button:active, orin-button button .heldDown {
box-shadow: none;
transition-duration: 0.1s;
transform: scale(0.995);
}
orin-button .button[disabled], orin-button button[disabled] {
box-shadow: none;
cursor: not-allowed;
}
@media screen and (min-width: 1024px) {
orin-button .button[disabled]:hover, orin-button button[disabled]:hover {
transform: none;
}
}
orin-button .button[disabled]:active, orin-button button[disabled]:active {
transform: none;
}
orin-button .button .buttonText, orin-button button .buttonText {
text-transform: capitalize;
text-align: center;
padding-left: 16px;
position: relative;
z-index: 1;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
orin-button .button .buttonText:first-child:last-child, orin-button button .buttonText:first-child:last-child {
grid-column: span 2;
padding-left: 0;
}
orin-button .button i.icon, orin-button button i.icon {
position: relative;
z-index: 1;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
orin-button .button i.icon:first-child:last-child, orin-button button i.icon:first-child:last-child {
grid-column: span 2;
}
orin-button .button.large, orin-button button.large {
padding: 16px;
}
orin-button .button.small, orin-button button.small {
padding: 12px 16px;
}
orin-button .button.small.iconOnly, orin-button button.small.iconOnly {
padding: 12px;
}
orin-button .button.small.iconOnly i.icon, orin-button button.small.iconOnly i.icon {
width: 21px;
height: 21px;
mask-size: contain;
}
orin-button .button.primary, orin-button button.primary {
border: 0;
background-image: var(--sunrise);
background-color: var(--tangerine);
color: var(--white);
text-decoration: none;
}
orin-button .button.primary[disabled], orin-button button.primary[disabled] {
background-image: var(--light-gradient);
background-color: var(--light);
}
orin-button .button.primary .icon, orin-button button.primary .icon {
background-color: var(--white);
}
orin-button .button.secondary, orin-button button.secondary {
border: 0;
background-color: var(--white);
color: var(--darker);
position: relative;
text-decoration: none;
}
@media screen and (min-width: 1024px) {
orin-button .button.secondary:hover, orin-button button.secondary:hover {
background-color: var(--ultralight);
}
}
orin-button .button.secondary:active, orin-button button.secondary:active {
box-shadow: var(--light-shadow);
}
orin-button .button.secondary[disabled], orin-button button.secondary[disabled] {
background-image: var(--light-gradient);
color: var(--light);
}
orin-button .button.secondary[disabled] .icon, orin-button button.secondary[disabled] .icon {
background-color: var(--light);
}
orin-button .button.secondary .icon, orin-button button.secondary .icon {
background-color: var(--darker);
}
orin-button .button.secondary .icon:first-child:last-child, orin-button button.secondary .icon:first-child:last-child {
background-color: var(--darker);
}
orin-button .button.secondary:after, orin-button button.secondary:after {
content: "";
display: block;
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
left: 1px;
top: 1px;
border-radius: calc(var(--small-border-radius) - 1px);
background-image: var(--ceramic);
z-index: 0;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
orin-button .button.tertiary, orin-button button.tertiary {
border: 0;
background-image: none;
background-color: transparent;
grid-template-columns: max-content max-content;
justify-content: center;
box-shadow: none;
color: var(--cobalt);
}
@media screen and (min-width: 1024px) {
orin-button .button.tertiary:hover, orin-button button.tertiary:hover {
color: var(--darker);
box-shadow: none;
transform: none;
}
}
orin-button .button.tertiary[disabled], orin-button button.tertiary[disabled] {
color: var(--light);
}
orin-button .button.tertiary[disabled] .icon, orin-button button.tertiary[disabled] .icon {
background-color: var(--light);
}
orin-button .button.tertiary .buttonText, orin-button button.tertiary .buttonText {
text-decoration: underline;
}
orin-button .button.tertiary .buttonText:first-child:last-child, orin-button button.tertiary .buttonText:first-child:last-child {
padding-left: 16px;
}
orin-button .button.tertiary .icon, orin-button button.tertiary .icon {
background-color: var(--cobalt);
}
orin-button .button.orinAI, orin-button button.orinAI {
border: 0;
background-image: var(--midnight);
background-color: var(--midnight);
color: var(--white);
text-decoration: none;
}
orin-button .button.orinAI[disabled], orin-button button.orinAI[disabled] {
background-image: var(--light-gradient);
background-color: var(--light);
}
orin-button .button.orinAI .icon, orin-button button.orinAI .icon {
background-color: var(--white);
}
orin-button + .buttonHelper {
text-align: left;
margin-top: 8px;
}
.backButton {
display: inline-grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
grid-gap: 8px;
color: var(--mid);
width: auto;
padding: 8px;
background-image: var(--ceramic);
border-radius: var(--small-border-radius);
box-shadow: var(--button-shadow);
cursor: pointer;
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
text-decoration: none;
border: none;
font-size: 16px;
font-weight: 500;
height: auto;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
@media screen and (min-width: 1024px) {
.backButton:hover {
box-shadow: var(--button-shadow-hover);
}
}
.backButton:active {
transition: 0.1s var(--transition-timing-function);
transform: scale(0.98);
box-shadow: none;
}
.backButton i {
background-color: var(--mid);
}
orin-loader {
position: absolute;
width: 64px;
height: 64px;
left: calc(50% - 32px);
top: calc(50% - 32px);
mask-image: var(--ORIN);
-webkit-mask-image: var(--ORIN);
mask-size: contain;
-webkit-mask-size: contain;
pointer-events: none;
opacity: 1;
transition: calc(var(--main-transition-duration) * 0.3) var(--transition-timing-function);
}
orin-loader.notInitiated {
opacity: 0;
transform: translateY(32px);
}
orin-loader.leaving {
opacity: 0;
transform: translateY(-32px);
}
orin-loader:before {
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
left: -50%;
top: -50%;
background-image: var(--light-gradient-vertical);
animation: revolve calc(var(--main-transition-duration) * 4) infinite linear;
}
@keyframes revolve {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
orin-image {
opacity: 0;
position: relative;
margin: 0;
padding: 0;
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function);
}
orin-image img {
width: 100%;
height: 100%;
}
orin-image[loaded] {
opacity: 1;
}
orin-image[src$=".jpg"], orin-image[src$=".jpeg"] {
padding: 0;
}
orin-image[src$=".jpg"] img, orin-image[src$=".jpeg"] img {
object-fit: cover;
}
shop-button, upload-button {
display: grid;
grid-template-columns: max-content max-content;
grid-gap: 8px;
align-items: center;
cursor: pointer;
user-select: none;
}
shop-button orin-image, upload-button orin-image {
display: block;
width: 55px;
height: 55px;
border-radius: var(--small-border-radius);
overflow: hidden;
padding: 4px;
border: 1px solid var(--tangerine);
box-shadow: var(--button-shadow);
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
shop-button orin-image.dark, upload-button orin-image.dark {
background-color: var(--white);
}
shop-button orin-image.light, upload-button orin-image.light {
background-image: var(--midnight);
}
shop-button orin-image img, upload-button orin-image img {
height: 100%;
width: 100%;
object-fit: contain;
object-position: center;
}
shop-button:active button, shop-button:active .button, shop-button:active orin-image, upload-button:active button, upload-button:active .button, upload-button:active orin-image {
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function);
transform: scale(0.98);
box-shadow: var(--button-shadow);
}
shop-button:hover button, shop-button:hover .button, shop-button:hover orin-image, upload-button:hover button, upload-button:hover .button, upload-button:hover orin-image {
box-shadow: var(--button-shadow-hover);
}
shop-button .button i.icon, shop-button button i.icon, upload-button .button i.icon, upload-button button i.icon {
width: 23px;
height: 23px;
}
shop-button .buttonContent, upload-button .buttonContent {
display: grid;
}
shop-button.notSubscribed orin-image, upload-button.notSubscribed orin-image {
filter: grayscale(0.5) contrast(0.5) brightness(1.3);
}
shop-button.notSubscribed .shopPrimary, upload-button.notSubscribed .shopPrimary {
opacity: 0.5;
}
shop-button.notSubscribed .shopSecondary, upload-button.notSubscribed .shopSecondary {
text-decoration: underline;
font-weight: 700;
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
shop-button.notSubscribed:hover .shopSecondary, upload-button.notSubscribed:hover .shopSecondary {
color: var(--tangerine);
}
shop-list shop-button {
padding: 8px 0;
border-bottom: 1px solid var(--lighter);
}
shop-list shop-button:first-child {
border-top: 1px solid var(--lighter);
}
shop-card {
width: 100%;
padding: 16px;
background-image: var(--midnight);
border-radius: var(--large-border-radius);
color: var(--white);
margin-top: 8px;
}
shop-card .shopCardHeading {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 8px;
margin-bottom: 8px;
align-items: center;
}
shop-card .shopCardHeading orin-image {
display: block;
width: 55px;
height: 55px;
border-radius: var(--small-border-radius);
overflow: hidden;
padding: 4px;
border: 2px solid var(--tangerine);
}
shop-card .shopCardHeading orin-image.dark {
background-color: var(--white);
}
shop-card .shopCardHeading orin-image.light {
background-image: var(--midnight);
}
shop-card .shopCardHeading orin-image img {
height: 100%;
width: 100%;
object-fit: contain;
object-position: center;
}
shop-card .shopCardHeading .headingContent {
display: grid;
}
shop-card .shopCardHeading .headingContent span {
line-height: 1.6;
}
shop-card .shopLogo img {
width: 100%;
height: 100%;
left: 0;
top: 0;
}
shop-card .shopContent {
margin-top: 8px;
padding-top: 8px;
display: grid;
border-top: 1px solid var(--dark);
}
shop-card .shopContent span {
color: var(--white);
line-height: 1.6;
}
orin-receipt {
display: grid;
grid-gap: 8px;
}
orin-receipt .receiptItem {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 8px;
padding: 16px;
align-items: end;
align-content: end;
border-radius: var(--small-border-radius);
background-image: var(--midnight);
color: var(--white);
box-shadow: var(--button-shadow);
}
orin-receipt .receiptTotal {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 8px;
padding: 8px 0;
margin-top: 8px;
align-items: end;
align-content: end;
border-top: 1px solid var(--lighter);
border-bottom: 1px solid var(--lighter);
}
orin-receipt .itemName {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
orin-receipt .itemValue {
display: grid;
text-align: right;
grid-gap: 2px;
}
orin-receipt .itemValue .paymentType {
text-transform: capitalize;
}
orin-receipt .itemValue .paymentAmount.price {
line-height: 1.3;
}
progress-bar {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
}
progress-bar span {
display: grid;
width: 10px;
height: 10px;
align-items: center;
background-color: var(--light);
border-radius: 50%;
position: relative;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
progress-bar span.active {
background-color: var(--tangerine);
}
progress-bar span.active:before {
content: "";
display: block;
position: absolute;
width: 100vw;
right: 0;
height: 2px;
background-color: var(--tangerine);
}
progress-bar:before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: 2px;
background-color: var(--light);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
orin-notification {
position: fixed;
bottom: 0;
right: 0;
display: grid;
width: 400px;
padding: 16px;
margin: 16px;
grid-gap: 16px;
line-height: 1.5;
grid-template-rows: 0fr;
background-color: var(--translucent-white);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--black);
box-shadow: var(--card-shadow);
border-radius: var(--small-border-radius);
transition: calc(var(--main-transition-duration) * 0.8) var(--transition-timing-function);
will-change: margin, height, transform, opacity;
z-index: 99999;
}
@media screen and (max-width: 1023px) {
orin-notification {
width: calc(100% - 32px);
}
}
@media screen and (min-width: 600px) {
orin-notification {
max-width: 400px;
}
}
orin-notification .notificationHeader {
padding-right: 32px;
}
orin-notification .notificationHeader .closeButton {
position: absolute;
display: grid;
top: 0;
right: 0;
padding: 16px;
cursor: pointer;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
orin-notification .notificationHeader .closeButton:hover {
transform: rotate(90deg);
}
orin-notification .notificationHeader .closeButton i.icon {
background-color: var(--black);
}
orin-notification .notificationContent {
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
orin-notification .notificationFooter {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
}
orin-notification .notificationFooter orin-button:first-child:last-child {
grid-column: span 2;
}
orin-notification.notCalledIn {
transform: translateX(calc(100% + 32px));
opacity: 0;
}
orin-notification.leaving {
transform: translateX(calc(100% + 32px));
opacity: 0;
}
orin-notification[related-path] {
border-radius: var(--large-border-radius);
background-color: var(--darker);
color: var(--white);
box-shadow: var(--button-shadow);
padding: 8px 16px;
}
orin-notification[related-path] p {
font-weight: 500;
}
orin-notification[related-path] .notificationHeader {
position: relative;
}
orin-notification[related-path] .notificationHeader .notificationContent {
display: grid;
grid-gap: 4px;
}
orin-notification[related-path] .notificationHeader .notificationContent .tinyText {
opacity: 0.5;
margin-top: 4px;
z-index: -1;
}
orin-notification[related-path] .notificationHeader .notificationContent .tinyText.timeReceived {
position: absolute;
bottom: 0;
right: 0;
}
orin-notification[related-path] .notificationHeader .closeButton {
right: -16px;
top: calc(50% - 24px);
}
orin-notification[related-path] .notificationHeader .closeButton i.icon {
background-color: var(--white);
}
.iPhone orin-notification {
bottom: 64px;
}
notification-tray {
position: fixed;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
max-width: 400px;
max-height: 100%;
bottom: 0;
right: 0;
display: grid;
padding: 0 16px;
padding-top: 16px;
transform: translateX(400px);
transition: calc(var(--main-transition-duration) * 0.8) var(--transition-timing-function);
z-index: 9;
}
notification-tray orin-button[data-action=clearAllNotifications] {
position: absolute;
bottom: 16px;
left: 8px;
opacity: 0;
transform: translateX(16px);
transition: calc(var(--main-transition-duration) * 0.3) var(--transition-timing-function);
}
notification-tray orin-button[data-action=clearAllNotifications] button {
padding: 8px 0;
}
notification-tray orin-button[data-action=clearAllNotifications] button .buttonText {
text-decoration: none;
font-size: 14px;
text-transform: lowercase;
color: var(--darker);
}
notification-tray.open {
transform: none;
}
notification-tray.open orin-button[data-action=clearAllNotifications] {
transform: none;
opacity: 1;
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
}
notification-tray.open.auto orin-button[data-action=clearAllNotifications] {
opacity: 0;
transform: translateX(16px);
}
notification-tray orin-notification {
position: static;
margin: 0;
margin-bottom: 8px;
width: 100%;
}
notification-button {
width: 30px;
height: 30px;
display: grid;
align-items: center;
justify-content: center;
background-color: var(--white);
backdrop-filter: blur(8px);
box-shadow: var(--button-shadow);
border-radius: 50%;
transition: var(--main-transition-duration) var(--transition-timing-function);
opacity: 0;
pointer-events: none;
transform: translateX(16px);
position: relative;
}
notification-button .iconWrapper {
width: 30px;
height: 30px;
display: grid;
align-items: center;
justify-content: center;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
notification-button .iconWrapper i.icon {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
notification-button .iconWrapper i.icon.cross {
opacity: 0;
display: block;
position: absolute;
left: 7px;
top: 7px;
}
notification-button.open .iconWrapper {
transform: rotate(360deg);
}
notification-button.open .iconWrapper i.icon.cross {
opacity: 1;
}
notification-button.open .iconWrapper i.icon.notification {
opacity: 0;
}
notification-button .counter {
background-color: var(--tangerine);
color: var(--white);
font-weight: 700;
font-size: 12px;
min-width: 16px;
height: 16px;
text-align: center;
border-radius: 50%;
position: absolute;
top: -4px;
right: calc(100% - 8px);
}
notification-button[counter] {
pointer-events: auto;
opacity: 1;
transform: none;
}
notification-button[counter="0"] {
pointer-events: none;
opacity: 0;
transform: translateX(16px);
}
notification-button.iPhone notification-tray {
padding-bottom: 64px;
padding-top: 64px;
pointer-events: all;
}
notification-button.iPhone notification-tray * {
pointer-events: auto;
}
notification-button:after {
content: "";
width: 64px;
height: 64px;
position: absolute;
top: -16px;
right: -16px;
background-color: transparent;
}
.dashboard notification-tray {
height: 100vh;
box-sizing: border-box;
align-content: end;
padding-bottom: calc(var(--footer-gap) - 16px);
padding-top: 36px;
}
@media screen and (max-width: 1023px) {
.dashboard notification-tray {
display: flex;
flex-direction: column;
justify-content: end;
align-items: end;
max-width: none;
width: 100%;
transform: translateX(100%);
border: none;
box-shadow: none;
}
}
@media screen and (min-width: 600px) {
.dashboard notification-tray {
max-width: 400px;
}
}
.dashboard notification-tray.open {
transform: none;
}
.dashboard notification-tray.open.auto {
z-index: 9999;
height: auto;
}
.dashboard notification-tray.open.auto > orin-notification {
opacity: 0;
transition-property: transform;
}
.dashboard notification-tray.open.auto > orin-notification:last-child {
opacity: 1;
}
.dashboard.iPhone notification-tray {
padding-bottom: 64px;
padding-top: 64px;
pointer-events: bounding-box;
}
.dashboard.iPhone notification-tray * {
pointer-events: auto;
}
.iPhone notification-tray {
height: 100vh;
align-content: end;
padding-bottom: 64px;
padding-top: 64px;
}
@media screen and (max-width: 1023px) {
.iPhone notification-tray:before {
content: ".";
font-size: 0;
line-height: 64px;
display: block;
height: 64px;
width: 100%;
}
}
.iPhone notification-tray orin-button[data-action=clearAllNotifications] {
bottom: 32px;
}
.iPad notification-tray orin-button[data-action=clearAllNotifications] {
bottom: 32px;
}
orin-checkbox {
position: relative;
display: inline-grid;
grid-template-columns: max-content max-content;
align-items: center;
grid-gap: 8px;
height: 34px;
width: auto;
padding: 0 8px;
justify-items: center;
border-radius: var(--large-border-radius);
border: 1px solid var(--lighter);
background-color: var(--white);
box-shadow: var(--button-shadow);
container-type: normal;
overflow: hidden;
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
user-select: none;
}
orin-checkbox .trueText {
color: var(--black);
opacity: 0;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
transform: translateX(-8px);
}
orin-checkbox .falseText {
color: var(--light);
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
orin-checkbox .checkboxMarkerWrapper {
position: absolute;
display: grid;
align-items: center;
justify-items: start;
width: calc(100% - 2px);
height: 100%;
top: 0;
left: 2px;
transition: calc(var(--main-transition-duration) * 0.7) var(--transition-timing-function);
}
orin-checkbox .checkboxMarkerWrapper .checkboxMarker {
position: relative;
display: grid;
align-items: center;
justify-items: center;
opacity: 1;
border-radius: 50%;
height: 29px;
width: 29px;
background-color: var(--light);
transition: calc(var(--main-transition-duration) * 0.7) var(--transition-timing-function);
overflow: hidden;
}
orin-checkbox .checkboxMarkerWrapper .checkboxMarker i.icon {
position: absolute;
background-color: var(--white);
transition: calc(var(--main-transition-duration) * 0.7) var(--transition-timing-function);
}
orin-checkbox .checkboxMarkerWrapper .checkboxMarker i.icon.check {
opacity: 0;
transform: rotate(-90deg);
}
orin-checkbox .checkboxMarkerWrapper .checkboxMarker:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--midnight);
transition: calc(var(--main-transition-duration) * 0.7) var(--transition-timing-function);
opacity: 0;
filter: blur(50px);
transform: scale(0);
border-radius: 50%;
}
orin-checkbox[value=true] .trueText {
opacity: 1;
transform: none;
}
orin-checkbox[value=true] .falseText {
opacity: 0;
transform: translateX(8px);
}
orin-checkbox[value=true] .checkboxMarkerWrapper {
transform: translateX(calc(100% - 31px));
}
orin-checkbox[value=true] .checkboxMarkerWrapper .checkboxMarker {
box-shadow: var(--card-shadow);
}
orin-checkbox[value=true] .checkboxMarkerWrapper .checkboxMarker i.icon.check {
opacity: 1;
transform: none;
}
orin-checkbox[value=true] .checkboxMarkerWrapper .checkboxMarker i.icon.cross {
opacity: 0;
transform: rotate(90deg);
}
orin-checkbox[value=true] .checkboxMarkerWrapper .checkboxMarker:before {
opacity: 1;
filter: none;
transform: none;
}
orin-checkbox:hover {
border-color: var(--mid);
}
orin-checkbox:active .checkboxMarker {
transform: scale(0.95);
transition: 0.1s var(--transition-timing-function);
}
orin-flicker {
position: relative;
display: inline-grid;
grid-template-columns: max-content max-content;
align-items: center;
grid-gap: 4px;
padding: 8px;
transition: var(--main-transition-duration) var(--transition-timing-function);
width: auto;
height: 46px;
border-radius: var(--large-border-radius);
background-color: var(--white);
box-shadow: var(--light-shadow), inset 0 0 0 2px transparent, inset 0px 2px 4px 0px transparent;
will-change: transform;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
orin-flicker .iconWrapper {
background-color: var(--lighter);
background-image: var(--midnight);
box-shadow: var(--card-shadow);
border-radius: 50%;
width: 28px;
height: 28px;
display: grid;
align-items: center;
justify-items: center;
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
}
orin-flicker .iconWrapper i.icon {
background-color: var(--white);
}
orin-flicker .optionsWrapper {
display: grid;
width: 50px;
height: 100%;
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
scroll-behavior: smooth;
box-sizing: content-box;
scroll-snap-type: x mandatory;
overflow: scroll;
}
orin-flicker .optionsWrapper::-webkit-scrollbar {
display: none;
}
orin-flicker .optionsWrapper .options {
display: flex;
align-items: center;
gap: 8px;
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
}
orin-flicker .optionsWrapper .options .option {
display: inline-block;
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
color: var(--light);
width: 50px;
text-align: center;
scroll-snap-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
orin-flicker .optionsWrapper .options .option[selected] {
color: var(--black);
}
orin-flicker .buttons {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
opacity: 0;
filter: blur(4px);
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
}
orin-flicker .buttons .flickerButton {
height: 100%;
width: 46px;
display: grid;
align-items: center;
justify-content: center;
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
cursor: pointer;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
orin-flicker .buttons .flickerButton[data-increase] {
right: -28px;
}
orin-flicker .buttons .flickerButton[data-decrease] {
left: -28px;
}
orin-flicker .buttons .flickerButton[disabled] .iconWrapper {
background-image: none;
background-color: var(--lighter);
box-shadow: none;
}
orin-flicker .buttons .flickerButton[disabled] .iconWrapper:hover .iconWrapper {
transform: scale(0.96);
}
orin-flicker .buttons .flickerButton[disabled] .iconWrapper:hover:active .iconWrapper {
transform: scale(0.96);
}
orin-flicker .buttons .flickerButton .iconWrapper {
transform: scale(0.96);
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
}
orin-flicker .buttons .flickerButton:hover .iconWrapper {
transform: none;
}
orin-flicker .buttons .flickerButton:hover:active .iconWrapper {
transition: 0.1s var(--transition-timing-function);
transform: scale(0.96);
}
orin-flicker:hover {
z-index: 3;
}
orin-flicker:hover .optionsWrapper {
transform: translateX(-16px);
padding: 0 24px 0 24px;
margin: 0 -24px 0 -24px;
}
orin-flicker:hover > .iconWrapper {
transform: scale(0.8) rotate(-8deg);
opacity: 0;
}
orin-flicker:hover .buttons {
opacity: 1;
filter: none;
}
orin-flicker:hover .buttons .flickerButton[data-increase] {
transform: translateX(-8px);
}
orin-flicker:hover .buttons .flickerButton[data-decrease] {
transform: translateX(8px);
}
orin-flicker[disabled]:hover {
z-index: auto;
}
orin-flicker[disabled]:hover .optionsWrapper {
transform: none;
padding: initial;
margin: initial;
}
orin-flicker[disabled]:hover > .iconWrapper {
transform: none;
opacity: 1;
}
orin-flicker[disabled]:hover .buttons {
opacity: 0;
}
orin-flicker[disabled]:hover .buttons .flickerButton {
cursor: initial;
}
body[data-interface-method=touch] orin-flicker, body[data-interface-method=pen] orin-flicker {
overflow: hidden;
}
body[data-interface-method=touch] orin-flicker .buttons, body[data-interface-method=pen] orin-flicker .buttons {
display: none;
}
body[data-interface-method=touch] orin-flicker .optionsWrapper, body[data-interface-method=pen] orin-flicker .optionsWrapper {
z-index: 3;
padding: 0 24px 0 24px;
margin: 0 -24px 0 -24px;
}
body[data-interface-method=touch] orin-flicker .optionsWrapper .options .option, body[data-interface-method=pen] orin-flicker .optionsWrapper .options .option {
opacity: 0;
}
body[data-interface-method=touch] orin-flicker .optionsWrapper .options .option[selected], body[data-interface-method=pen] orin-flicker .optionsWrapper .options .option[selected] {
opacity: 1;
}
body[data-interface-method=touch] orin-flicker .optionsWrapper .options .option[disabled], body[data-interface-method=pen] orin-flicker .optionsWrapper .options .option[disabled] {
color: var(--lighter);
}
body[data-interface-method=touch] orin-flicker .optionsWrapper .options .option[selected][disabled], body[data-interface-method=pen] orin-flicker .optionsWrapper .options .option[selected][disabled] {
color: var(--lighter);
}
body[data-interface-method=touch] orin-flicker:hover, body[data-interface-method=pen] orin-flicker:hover {
z-index: initial;
}
body[data-interface-method=touch] orin-flicker:hover .optionsWrapper, body[data-interface-method=pen] orin-flicker:hover .optionsWrapper {
transform: none;
padding: 0 24px 0 24px;
margin: 0 -24px 0 -24px;
}
body[data-interface-method=touch] orin-flicker:hover > .iconWrapper, body[data-interface-method=pen] orin-flicker:hover > .iconWrapper {
transform: none;
opacity: 1;
}
body[data-interface-method=touch] orin-flicker.dragScroll, body[data-interface-method=pen] orin-flicker.dragScroll {
z-index: 3;
transform: scale(1.4, 1.3);
box-shadow: var(--button-shadow), inset 0 0 0 2px var(--light), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
touch-action: auto;
padding: 0;
}
body[data-interface-method=touch] orin-flicker.dragScroll .iconWrapper, body[data-interface-method=pen] orin-flicker.dragScroll .iconWrapper {
transition: calc(var(--main-transition-duration) * 0.4) var(--transition-timing-function);
}
body[data-interface-method=touch] orin-flicker.dragScroll .optionsWrapper, body[data-interface-method=pen] orin-flicker.dragScroll .optionsWrapper {
position: relative;
transform: translateX(-8px) scale(0.71, 0.78);
padding: 0 40px 0 40px;
margin: 0 -40px 0 -40px;
}
body[data-interface-method=touch] orin-flicker.dragScroll .optionsWrapper .option, body[data-interface-method=pen] orin-flicker.dragScroll .optionsWrapper .option {
opacity: 1;
}
body[data-interface-method=touch] orin-flicker.dragScroll:active, body[data-interface-method=pen] orin-flicker.dragScroll:active {
transition: 0.1s var(--transition-timing-function);
box-shadow: var(--button-shadow), inset 0 0 0 1px var(--light), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
body[data-interface-method=touch] orin-flicker.dragScroll > .iconWrapper, body[data-interface-method=pen] orin-flicker.dragScroll > .iconWrapper {
transform: translateX(-32px);
opacity: 0;
}
body[data-interface-method=touch] orin-flicker.dragScroll .buttons, body[data-interface-method=pen] orin-flicker.dragScroll .buttons {
display: none;
}
date-picker {
padding: 8px;
user-select: none;
}
date-picker .datePickerHeader {
display: grid;
grid-template-columns: 1fr max-content 1fr;
align-items: center;
color: var(--dark);
text-align: center;
}
date-picker .datePickerHeader .button {
padding: 8px;
display: grid;
width: auto;
height: 32px;
cursor: pointer;
}
date-picker .datePickerHeader .button[data-direction=previous] {
justify-content: start;
}
date-picker .datePickerHeader .button[data-direction=next] {
justify-content: end;
}
date-picker .datePickerHeader .button i.icon {
background-color: var(--cobalt);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
@media screen and (min-width: 1024px) {
date-picker .datePickerHeader .button:hover i.icon {
background-color: var(--black);
}
date-picker .datePickerHeader .button:hover[data-direction=previous] i.icon {
transform: translateX(2px);
}
date-picker .datePickerHeader .button:hover[data-direction=next] i.icon {
transform: translateX(-2px);
}
date-picker .datePickerHeader .button:hover:active i.icon {
background-color: var(--cobalt);
transform: none;
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function);
}
}
date-picker .datePickerHeader .button[disabled] {
cursor: unset;
}
date-picker .datePickerHeader .button[disabled] i.icon {
background-color: var(--lighter);
}
date-picker .datePickerHeader .button[disabled]:hover i.icon {
background-color: var(--lighter);
}
date-picker .datePickerHeader .button[disabled]:hover[data-direction=previous] i.icon {
transform: none;
}
date-picker .datePickerHeader .button[disabled]:hover[data-direction=next] i.icon {
transform: none;
}
date-picker .datePickerHeader .button[disabled]:hover:active i.icon {
background-color: var(--lighter);
transform: none;
}
date-picker .datePickerHeader .dateText {
position: relative;
min-width: 160px;
}
date-picker .datePickerHeader .dateText .newName {
display: inline-block;
white-space: nowrap;
position: absolute;
opacity: 0;
width: 200%;
left: -50%;
top: 0;
height: 100%;
}
date-picker .datePickerHeader .dateText .oldName {
display: inline-block;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
date-picker .datePickerHeader .dateText.up .oldName {
transform: translateY(-8px);
opacity: 0;
}
date-picker .datePickerHeader .dateText.up .newName {
transform: translateY(8px);
}
date-picker .datePickerHeader .dateText.left .oldName {
transform: translateX(-16px);
opacity: 0;
}
date-picker .datePickerHeader .dateText.left .newName {
transform: translateX(16px);
}
date-picker .datePickerHeader .dateText.right .oldName {
transform: translateX(16px);
opacity: 0;
}
date-picker .datePickerHeader .dateText.right .newName {
transform: translateX(-16px);
}
date-picker .datePickerHeader .dateText.moving .newName {
transition: var(--main-transition-duration) var(--transition-timing-function);
transform: none;
opacity: 1;
}
date-picker .dates {
position: relative;
}
date-picker .dates .dayNames {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
date-picker .dates .dayNames p {
text-align: center;
line-height: 24px;
}
date-picker .dates .days {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
date-picker .dates .days .day {
text-align: center;
display: block;
line-height: 40px;
color: var(--black);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
date-picker .dates .days .day.disabled {
color: var(--lighter);
}
date-picker .dates .days .day.unavailable {
background-color: var(--lighter);
color: var(--white);
border-radius: 0;
box-shadow: inset 0 0 0 4px var(--white);
}
date-picker .dates .days .day.available {
border-radius: var(--small-border-radius);
overflow: hidden;
position: relative;
cursor: pointer;
}
date-picker .dates .days .day.available:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background-image: var(--sunrise);
z-index: -1;
opacity: 0;
transition: calc(var(--main-transition-duration) * 1) var(--transition-timing-function);
transform: scale(0.8);
filter: blur(8px);
border-radius: var(--small-border-radius);
}
@media screen and (min-width: 1024px) {
date-picker .dates .days .day.available:hover {
box-shadow: inset 0 0 0 1px var(--tangerine), 0 0 0 0 transparent;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
}
date-picker .dates .days .day.available.picked {
color: var(--white);
box-shadow: inset 0 0 0 1px transparent, var(--mid-shadow);
z-index: 2;
}
date-picker .dates .days .day.available.picked:before {
transform: none;
filter: none;
opacity: 1;
}
date-picker .dates .days .day.today {
font-weight: 600;
}
date-picker .dates .days.arriving {
position: absolute;
width: 100%;
bottom: 0;
opacity: 0;
}
date-picker .dates.previous .days {
transform: translateX(8px);
opacity: 0;
}
date-picker .dates.previous .days.arriving {
transform: translateX(-8px);
}
date-picker .dates.next .days {
transform: translateX(-8px);
opacity: 0;
}
date-picker .dates.next .days.arriving {
transform: translateX(8px);
}
time-picker .availableTimes {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: start;
width: auto;
padding-top: 16px;
user-select: none;
}
time-picker .availableTimes time {
display: flex;
width: 80px;
padding: 8px;
justify-content: center;
align-items: center;
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--dark);
color: var(--dark);
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
position: relative;
overflow: hidden;
}
time-picker .availableTimes time:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: var(--sunrise);
z-index: -1;
will-change: transform, filter, opacity;
filter: blur(8px);
opacity: 0;
transform: scale(0.95);
border-radius: var(--small-border-radius);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
@media screen and (min-width: 1024px) {
time-picker .availableTimes time:hover {
color: var(--black);
box-shadow: inset 0 0 0 2px var(--black);
}
}
time-picker .availableTimes time:active {
transition: var(--main-transition-duration) var(--transition-timing-function);
transform: scale(0.98);
}
time-picker .availableTimes time.picked {
color: var(--white);
box-shadow: inset 0 0 0 1px transparent, var(--button-shadow);
}
time-picker .availableTimes time.picked:before {
transform: none;
filter: none;
opacity: 1;
}
time-picker .availableTimes time.notCalledIn {
transform: translateX(16px) scale(0.95);
opacity: 0;
}
time-picker .availableTimes .noAvailableTimes {
border: 1px dashed;
border-radius: var(--small-border-radius);
padding: 16px;
color: var(--light);
text-align: center;
}
time-picker .availableTimes .noAvailableTimes.loading {
animation: availableTimesLoader calc(var(--main-transition-duration) * 10);
}
@keyframes availableTimesLoader {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
input-wrapper[disabled] {
opacity: 0.5;
}
input-wrapper .inputComp label {
margin: 0;
}
input-wrapper .inputComp .inputDescription {
display: block;
margin: 4px 0 0 0;
color: var(--darker);
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
}
input-wrapper .inputComp .inputWrapper {
margin: 8px 0 0 0;
border-radius: var(--small-border-radius);
background-color: var(--light);
position: relative;
display: grid;
align-items: center;
padding: 1px;
overflow: hidden;
}
input-wrapper .inputComp .inputWrapper:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: var(--sunrise);
transform: translateX(-100%);
filter: blur(2px);
opacity: 0;
transition: calc(var(--main-transition-duration) * 1.5) var(--transition-timing-function);
z-index: 0;
will-change: transform, opacity, filter;
}
input-wrapper .inputComp .inputWrapper:after {
content: "";
display: block;
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
left: 1px;
top: 1px;
background-color: var(--white);
border-radius: calc(var(--small-border-radius) - 1px);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
input-wrapper .inputComp .inputWrapper:focus-within:before {
transform: none;
filter: none;
opacity: 1;
}
input-wrapper .inputComp .inputWrapper:focus-within > i.icon {
background-color: var(--tangerine);
transition-delay: var(--main-transition-duration);
}
input-wrapper .inputComp .inputWrapper input, input-wrapper .inputComp .inputWrapper select, input-wrapper .inputComp .inputWrapper textarea {
width: 100%;
appearance: none;
padding: 12px;
padding-right: 40px;
box-sizing: border-box;
border: 0;
background-color: transparent;
border-radius: calc(var(--small-border-radius) - 1px);
z-index: 2;
}
input-wrapper .inputComp .inputWrapper input:focus, input-wrapper .inputComp .inputWrapper select:focus, input-wrapper .inputComp .inputWrapper textarea:focus {
outline: 0;
}
input-wrapper .inputComp .inputWrapper textarea {
resize: none;
height: 160px;
font-size: 16px;
}
input-wrapper .inputComp .inputWrapper textarea.waitingAiContent {
color: var(--white);
}
input-wrapper .inputComp .inputWrapper textarea.waitingAiContent::placeholder {
transition: var(--main-transition-duration) var(--transition-timing-function);
color: var(--white);
}
input-wrapper .inputComp .inputWrapper > i.icon {
position: absolute;
right: 0;
box-sizing: content-box;
padding: 12px;
z-index: 1;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
input-wrapper .inputComp .inputWrapper > i.icon.interactive {
z-index: 2;
cursor: pointer;
}
input-wrapper .inputComp .inputWrapper > i.icon.old {
opacity: 0;
transform: rotate(45deg);
transition: calc(var(--main-transition-duration) * 0.4) var(--transition-timing-function);
}
input-wrapper .inputComp .inputWrapper > i.icon.new {
opacity: 0;
transform: rotate(-45deg);
}
input-wrapper .inputComp .inputWrapper > i.icon.arrived {
transition: calc(var(--main-transition-duration) * 0.4) var(--transition-timing-function);
}
input-wrapper .inputComp .inputWrapper > i.icon.aiMark {
position: absolute;
background-color: var(--lighter);
bottom: 13px;
right: 16px;
z-index: 8;
padding: 0;
margin: 0;
}
input-wrapper .inputComp .inputWrapper > .aiButton {
position: absolute;
z-index: 9;
display: grid;
grid-template-columns: 1fr max-content;
grid-gap: 8px;
align-items: center;
background-image: var(--midnight);
color: var(--white);
bottom: 8px;
right: 8px;
padding: 4px 8px;
border-radius: calc(var(--small-border-radius) / 2);
box-shadow: 0 0 0 1px var(--mid), var(--light-shadow);
cursor: pointer;
user-select: none;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
transform: translateX(8px);
opacity: 0;
pointer-events: none;
}
input-wrapper .inputComp .inputWrapper > .aiButton i.icon {
background-color: var(--white);
}
input-wrapper .inputComp .inputWrapper > .aiButton.secondary {
background-image: var(--ceramic);
color: var(--dark);
box-shadow: 0 0 0 1px var(--lighter), var(--light-shadow);
right: auto;
left: 8px;
transform: translateX(-8px);
}
input-wrapper .inputComp .inputWrapper > .aiButton.secondary i.icon {
background-color: var(--dark);
}
input-wrapper .inputComp .inputWrapper > .aiButton.active, input-wrapper .inputComp .inputWrapper > .aiButton.secondary.active {
transform: none;
opacity: 1;
pointer-events: auto;
}
input-wrapper .inputComp .inputWrapper > .aiButton.active:active, input-wrapper .inputComp .inputWrapper > .aiButton.secondary.active:active {
transform: scale(0.95);
}
input-wrapper .inputComp .inputWrapper orin-loader {
z-index: 2;
filter: brightness(1.2);
}
input-wrapper .inputComp .errorWrapper {
display: none;
grid-template-columns: max-content 1fr;
grid-gap: 8px;
align-items: center;
margin-top: 8px;
}
input-wrapper .inputComp .errorWrapper span.inputDescription {
margin-top: 0;
color: var(--warning);
}
input-wrapper .inputComp.hasError label {
color: var(--warning);
}
input-wrapper .inputComp.hasError .inputWrapper:before {
background-image: none;
background-color: var(--warning);
transform: none;
filter: none;
opacity: 1;
}
input-wrapper .inputComp.hasError .errorWrapper {
display: grid;
}
input-wrapper .inputComp.hasError .errorWrapper i.icon.error {
background-color: var(--warning);
}
input-wrapper .inputComp.hasError .errorWrapper .inputDescription {
color: var(--warning);
}
input-wrapper[input-type=hidden] {
display: none;
}
input-wrapper[input-type=subdomain] input {
text-transform: lowercase;
}
input-wrapper[input-type=subdomain] .pseudoInput {
width: 100%;
appearance: none;
padding: 12px;
padding-right: 40px;
box-sizing: border-box;
border: 0;
background-color: transparent;
border-radius: calc(var(--small-border-radius) - 1px);
z-index: 2;
position: absolute;
top: 1px;
left: 1px;
display: flex;
}
input-wrapper[input-type=subdomain] .pseudoInput .inputCopy {
opacity: 0;
}
input-wrapper[input-type=subdomain] .pseudoInput .restOfDomain {
color: var(--light);
}
input-wrapper[input-type=currency] .inputComp {
position: relative;
}
input-wrapper[input-type=currency] .inputComp input[type=number] {
padding-left: 32px;
appearance: none;
}
input-wrapper[input-type=currency] .inputComp input[type=number]::-webkit-outer-spin-button, input-wrapper[input-type=currency] .inputComp input[type=number]::-webkit-inner-spin-button {
appearance: none;
}
input-wrapper[input-type=currency] .inputComp:before {
content: "£";
color: var(--white);
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
position: absolute;
z-index: 999;
left: 8px;
bottom: 8px;
font-weight: 600;
font-size: 24px;
}
input-wrapper[address-autocomplete] {
position: relative;
}
input-wrapper .autoCompleteSuggestions {
position: absolute;
margin-top: -6px;
width: 100%;
align-self: start;
z-index: 999;
border: 1px solid var(--tangerine);
border-radius: 0 0 8px 8px;
height: auto;
background-color: white;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: 0.15s var(--transition-timing-function);
opacity: 0;
}
input-wrapper .autoCompleteSuggestions.active {
opacity: 1;
}
input-wrapper .autoCompleteSuggestions .autocompleteSuggestion {
padding: 16px 8px;
color: var(--darker);
background-color: var(--ultralight);
border-bottom: 1px solid var(--tangerine);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
input-wrapper .autoCompleteSuggestions .autocompleteSuggestion:last-child {
border: none;
}
input-wrapper .autoCompleteSuggestions .autocompleteSuggestion:hover {
background-color: var(--white);
}
fileupload-wrapper label {
margin: 0;
}
fileupload-wrapper .inputDescription {
display: block;
margin: 4px 0 0 0;
color: var(--darker);
}
fileupload-wrapper .inputWrapper {
position: relative;
overflow: visible;
background-color: transparent;
padding: 0;
margin-top: 0;
}
fileupload-wrapper .inputWrapper input[type=file] {
position: absolute;
width: 100%;
left: 0;
height: 56px;
bottom: 0;
margin-top: 0;
opacity: 0;
padding: 0;
z-index: 2;
cursor: pointer;
}
fileupload-wrapper .inputWrapper:before, fileupload-wrapper .inputWrapper:after {
display: none;
}
fileupload-wrapper .inputWrapper:hover upload-button button, fileupload-wrapper .inputWrapper:hover upload-button a.button {
box-shadow: var(--button-shadow-hover);
}
fileupload-wrapper .inputWrapper upload-button .buttonContent {
display: none;
}
fileupload-wrapper .inputWrapper:active upload-button button, fileupload-wrapper .inputWrapper:active upload-button a.button {
transition-delay: 0s;
transition-duration: calc(var(--main-transition-duration) * 0.2);
box-shadow: var(--button-shadow-hover);
transform: scale(0.98);
}
fileupload-wrapper .inputWrapper:first-child:last-child upload-button .buttonContent {
display: grid;
}
fileupload-wrapper .inputComp .errorWrapper {
display: none;
grid-template-columns: max-content 1fr;
grid-gap: 8px;
align-items: center;
margin-top: 8px;
}
fileupload-wrapper .inputComp .errorWrapper span.inputDescription {
margin-top: 0;
color: var(--warning);
}
fileupload-wrapper .inputComp:after {
background-color: transparent;
}
fileupload-wrapper .inputComp.hasError label {
color: var(--warning);
}
fileupload-wrapper .inputComp.hasError .inputWrapper:before {
background-image: none;
background-color: var(--warning);
transform: none;
filter: none;
opacity: 1;
}
fileupload-wrapper .inputComp.hasError .errorWrapper {
display: grid;
}
fileupload-wrapper .inputComp.hasError .errorWrapper i.icon.error {
background-color: var(--warning);
}
fileupload-wrapper .inputComp.hasError .errorWrapper .inputDescription {
color: var(--warning);
}
fileupload-wrapper .uploadedFiles {
display: flex;
margin-top: 16px;
gap: 8px;
flex-wrap: wrap;
}
fileupload-wrapper .uploadedFiles label {
width: 55px;
height: 55px;
display: block;
overflow: hidden;
border-radius: var(--small-border-radius);
position: relative;
background-image: var(--sunrise);
padding: 2px;
box-shadow: var(--button-shadow);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
fileupload-wrapper .uploadedFiles label:hover {
box-shadow: var(--button-shadow-hover);
}
fileupload-wrapper .uploadedFiles label:active {
transition-duration: calc(var(--main-transition-duration) * 0.2);
box-shadow: var(--button-shadow);
transform: scale(0.98);
}
fileupload-wrapper .uploadedFiles label span {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: calc(var(--small-border-radius) - 2px);
padding: 8px;
box-shadow: var(--button-shadow);
}
fileupload-wrapper .uploadedFiles label span img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: calc(var(--main-transition-duration) * 4) var(--transition-timing-function);
}
fileupload-wrapper .uploadedFiles label span:before {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
background-color: var(--darker);
opacity: 0;
z-index: 2;
filter: blur(10px);
transform: translateY(55px);
transition: calc(var(--main-transition-duration) * 0.4) var(--transition-timing-function);
}
fileupload-wrapper .uploadedFiles label span:after {
content: "";
display: block;
position: absolute;
bottom: 8px;
right: 8px;
width: 16px;
height: 16px;
background-color: var(--white);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
opacity: 0;
z-index: 2;
transform: translateY(20px);
transition: calc(var(--main-transition-duration) * 0.4) var(--transition-timing-function);
}
fileupload-wrapper .uploadedFiles label.notCalledIn {
transform: translateX(-55px);
opacity: 0;
}
fileupload-wrapper .uploadedFiles label input[type=radio] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
margin: 0;
padding: 0;
cursor: pointer;
z-index: 2;
}
fileupload-wrapper .uploadedFiles label.dark span {
background-color: var(--white);
}
fileupload-wrapper .uploadedFiles label.light span {
background-image: var(--midnight);
}
fileupload-wrapper .uploadedFiles label input[type=radio]:checked + span:before {
transform: none;
opacity: 0.5;
}
fileupload-wrapper .uploadedFiles label input[type=radio]:checked + span:after {
opacity: 1;
transform: none;
}
fileupload-wrapper .uploadedFiles label input[type=radio]:checked + span img {
transform: scale(1.1);
}
horizontal-wrapper {
user-select: none;
}
horizontal-wrapper .inputComp {
display: grid;
grid-template-columns: 1fr max-content;
align-content: center;
grid-gap: 16px;
}
horizontal-wrapper .inputComp label {
display: grid;
grid-gap: 4px;
align-content: center;
align-items: center;
}
horizontal-wrapper .inputComp .inputWrapper {
display: grid;
align-items: center;
}
horizontal-wrapper[disabled] {
opacity: 0.5;
}
orin-radios {
display: grid;
grid-gap: 16px;
}
orin-radios label {
display: grid;
grid-gap: 4px;
}
orin-radios .radios {
display: grid;
grid-gap: 8px;
}
orin-radios .radios .radio {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
justify-content: start;
text-align: left;
grid-gap: 4px;
padding: 8px;
transition: var(--main-transition-duration) var(--transition-timing-function);
position: relative;
border-radius: var(--small-border-radius);
box-shadow: inset 0 0 0 1px var(--light);
overflow: hidden;
cursor: pointer;
min-width: 180px;
}
orin-radios .radios .radio * {
position: relative;
z-index: 1;
}
orin-radios .radios .radio .inputDescription {
grid-column: span 2;
}
orin-radios .radios .radio:before {
content: "";
display: block;
z-index: 2;
width: 16px;
height: 16px;
border-radius: var(--large-border-radius);
box-shadow: var(--button-shadow);
border: 2px solid var(--lighter);
background-color: var(--ultralight);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
orin-radios .radios .radio:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: var(--ceramic);
border-radius: var(--small-border-radius);
box-shadow: inset 0 0 0 1px var(--mid);
z-index: 0;
transition: var(--main-transition-duration) var(--transition-timing-function);
opacity: 0;
}
orin-radios .radios .radio.notCalledIn {
transform: translateY(8px);
opacity: 0;
}
orin-radios .radios .radio:active {
transform: scale(0.99);
transition-duration: 0.1s;
}
orin-radios .radios .radio.selected {
color: var(--darker);
box-shadow: inset 0 0 0 1px var(--light), var(--mid-shadow);
}
orin-radios .radios .radio.selected:before {
background-color: var(--dark);
box-shadow: none;
}
orin-radios .radios .radio.selected:after {
opacity: 1;
}
orin-radios[disabled] {
opacity: 0.5;
}
orin-radios[disabled] .radios .radio {
cursor: auto;
}
.pac-container.pac-logo.hdpi {
border-radius: 16px;
padding: 10px 0 10px;
box-shadow: var(--button-shadow-hover);
transform: translateY(8px);
}
.pac-container.pac-logo.hdpi:after {
display: none;
}
.pac-container.pac-logo.hdpi .pac-item {
padding: 8px 16px;
font-size: 12px;
line-height: 24px;
}
.pac-container.pac-logo.hdpi .pac-item:first-child {
border-top: 0;
}
.pac-container.pac-logo.hdpi .pac-item .pac-icon {
display: none;
}
.pac-container.pac-logo.hdpi .pac-item span {
font-size: inherit;
}
.pac-container.pac-logo.hdpi .pac-item span.pac-item-query {
font-size: inherit;
}
.pac-container.pac-logo.hdpi .pac-item span.pac-matched {
font-size: inherit;
}
business-hours {
display: grid;
grid-template-columns: max-content 1fr max-content;
border-radius: var(--large-border-radius);
align-items: center;
background-color: var(--mid);
grid-gap: 8px;
}
business-hours .daySummary {
text-align: center;
transition: 1s var(--transition-timing-function);
}
business-hours .daySummary p {
transition: 1s var(--transition-timing-function);
}
business-hours .daySummary.dissolve {
filter: blur(8px);
opacity: 0;
}
business-hours .daySummary.dissolve p:first-child {
transform: translateY(-4px);
}
business-hours .daySummary.dissolve p:last-child {
transform: translateY(4px);
}
business-hours .pseudoFlicker {
display: none;
}
business-hours[disabled] {
background-image: var(--midnight);
box-shadow: var(--card-shadow);
}
business-hours[disabled] orin-flicker {
display: none;
}
business-hours[disabled] .pseudoFlicker {
display: grid;
padding: 0 8px;
height: 30px;
align-items: center;
margin: 8px;
background-color: var(--ultralight);
border-radius: var(--large-border-radius);
color: var(--dark);
}
business-day {
display: grid;
grid-gap: 0px;
padding: 16px;
border-radius: var(--large-border-radius);
box-shadow: var(--card-shadow);
border: 1px solid var(--mid);
}
business-day[closed] {
overflow: hidden;
}
business-day[closed] business-hours {
height: 0;
opacity: 0;
pointer-events: none;
transform: translateY(16px);
margin-bottom: -16px;
filter: blur(4px);
}
business-day[closed] .extraActions {
transform: translateY(16px);
opacity: 0;
height: 0;
pointer-events: none;
}
business-day h3 {
text-transform: capitalize;
}
business-day .dayCheckboxWrapper {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
z-index: 1;
}
business-day business-hours {
transition: transform var(--main-transition-duration) var(--transition-timing-function), opacity var(--main-transition-duration) var(--transition-timing-function), filter var(--main-transition-duration) var(--transition-timing-function);
margin-top: 16px;
width: 100%;
}
business-day .extraActions {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
business-day .extraActions .extraAction {
cursor: pointer;
margin-top: 16px;
color: var(--light);
text-decoration: underline;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
business-day .extraActions .extraAction:active {
transition-duration: 0.1s;
transform: scale(0.98);
}
business-day .extraActions .extraAction.disabled {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
business-day .extraActions .extraAction .dayName {
text-transform: capitalize;
}
input-list {
display: grid;
grid-gap: 16px;
}
input-list hr {
margin: 0;
}
input-list .buttonCombo {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 16px;
align-items: center;
}
sectional-content {
display: grid;
grid-gap: 32px;
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
}
sectional-content .sectionContent {
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function);
}
sectional-content section {
display: none;
grid-gap: 16px;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
sectional-content section.active {
display: grid;
}
sectional-content section .textContent {
grid-gap: 8px;
}
sectional-content.forward section, sectional-content.forward .sectionalPillBoxFooter > div, sectional-content.backward section, sectional-content.backward .sectionalPillBoxFooter > div {
opacity: 0;
}
sectional-content.forward section.new, sectional-content.forward .sectionalPillBoxFooter > div.new {
transform: translateX(16px);
}
sectional-content.forward section.old, sectional-content.forward .sectionalPillBoxFooter > div.old {
transform: translateX(-16px);
}
sectional-content.backward section.new, sectional-content.backward .sectionalPillBoxFooter > div.new {
transform: translateX(-16px);
}
sectional-content.backward section.old, sectional-content.backward .sectionalPillBoxFooter > div.old {
transform: translateX(16px);
}
sectional-content .sectionalPillBoxFooter {
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function);
}
sectional-content .sectionalPillBoxFooter .pillBoxActions {
display: none;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
sectional-content .sectionalPillBoxFooter .pillBoxActions.active {
display: grid;
}
sectional-content .sectionalPillBoxFooter .sectionalContentActions {
grid-template-columns: auto;
justify-content: space-between;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
display: none;
}
sectional-content .sectionalPillBoxFooter .sectionalContentActions orin-button {
max-width: 100%;
min-width: 120px;
}
sectional-content .sectionalPillBoxFooter .sectionalContentActions.active {
display: grid;
}
sectional-content .sectionalPillBoxFooter .sectionalContentActions hr {
grid-column: span 2;
margin-top: 0;
margin-bottom: 16px;
}
sectional-content .sectionalPillBoxFooter .sectionalContentActions.leave {
position: absolute;
transform: translateY(16px);
opacity: 0;
filter: blur(4px);
}
sectional-content .finalContentActions {
display: grid;
grid-gap: 16px;
}
sectional-content orin-button[section-next] button {
padding: 12px 32px;
}
sectional-content orin-button[section-back] {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
sectional-content orin-button[section-back].notVisible {
opacity: 0;
}
body.contentOverlayOpen.iPad, body.contentOverlayOpen.iPhone {
overflow: hidden;
}
#contentOverlay {
position: fixed;
display: grid;
align-content: start;
justify-content: center;
width: 100%;
height: 100%;
background-color: transparent;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
top: 0;
left: 0;
overflow: scroll;
padding: 0;
padding-top: 160px;
z-index: 99999;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
#contentOverlay .contentWrapper {
width: 100%;
max-width: 600px;
background-color: var(--white);
border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;
padding: 32px;
padding-bottom: 128px;
transition: var(--main-transition-duration) var(--transition-timing-function);
box-shadow: var(--large-light-shadow);
position: relative;
}
#contentOverlay .contentWrapper .closeButton {
width: 45px;
height: 45px;
display: grid;
align-items: center;
justify-content: center;
background-color: var(--light);
border-radius: var(--large-border-radius);
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
position: absolute;
right: 8px;
top: 8px;
}
#contentOverlay .contentWrapper .closeButton i.icon {
background-color: var(--white);
}
#contentOverlay .contentWrapper .legalDocument h1:first-child {
margin-bottom: 32px;
}
#contentOverlay .contentWrapper .legalDocument p {
margin: 16px 0;
}
#contentOverlay.notCalledIn {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#contentOverlay.notCalledIn .contentWrapper {
opacity: 0;
transform: translateY(240px);
box-shadow: none;
}
pill-box {
background-color: var(--white);
border-radius: var(--large-border-radius);
box-shadow: var(--large-dark-shadow);
padding: 32px;
width: 100%;
max-width: 360px;
display: grid;
align-items: start;
align-content: start;
grid-gap: 32px;
transition: calc(var(--main-transition-duration) * 3) var(--transition-timing-function);
box-sizing: border-box;
will-change: transform, opacity, filter;
}
pill-box > * {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
pill-box h1.bigHeading {
text-align: center;
}
pill-box .pillBoxActions {
display: grid;
align-items: center;
text-align: center;
}
pill-box .textContent {
display: grid;
}
pill-box .textContent hr {
margin: 16px 0;
}
pill-box.boxSubmitted {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
transform: perspective(60cm) translateZ(-20cm) rotateY(180deg);
}
pill-box.boxSubmitted > * {
opacity: 0;
}
pill-box.boxSubmitted.leaving {
transform: perspective(60cm) translateZ(-20cm) translateY(-200vh) rotateY(180deg);
}
pill-box.boxSubmitted.cancelled {
transform: none;
}
pill-box.boxSubmitted.cancelled > * {
opacity: 1;
transition-delay: calc(var(--main-transition-duration) * 0.5);
}
pill-box.leaving {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
transform: perspective(60cm) translateZ(-20cm) translateY(-200vh) rotateY(180deg);
}
pill-box.leaving[placement=right], pill-box.leaving[placement=left] {
transform: perspective(60cm) translateZ(-20cm) translateY(-200vh);
}
pill-box.arriving {
transform: translateY(100vh) perspective(60cm) translateZ(-30cm) rotateY(5deg) rotateX(10deg);
}
pill-box.arriving > * {
opacity: 0;
}
@media screen and (min-width: 1024px) {
pill-box.arriving[placement=right] {
opacity: 0 !important;
transform: translateX(160px);
}
pill-box.arriving[placement=left] {
opacity: 0 !important;
transform: translateX(-160px);
}
}
pill-box.new {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
position: absolute;
top: 0;
}
pill-box.new > * {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
transition-delay: calc(var(--main-transition-duration) * 0.8);
}
customer-screen.notInitiated {
opacity: 0;
transition-duration: 0s;
}
customer-screen.notInitiated pill-box {
transform: translateY(160px) translateZ(-5cm) rotateX(4deg) rotateY(5deg);
transition-duration: 0s;
opacity: 0 !important;
filter: brightness(0.4);
}
@media screen and (min-width: 1024px) {
customer-screen.notInitiated pill-box[placement=right] {
transform: translateX(160px) rotateY(10deg) perspective(1000px);
}
customer-screen.notInitiated pill-box[placement=left] {
transform: translateX(-160px) rotateY(-10deg);
}
}
.iframed.closing pill-box {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
.iframed pill-box {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
.iframed .notInitiated {
opacity: 0;
transition-duration: var(--main-transition-duration);
}
gate-page {
display: grid;
align-content: start;
align-items: start;
justify-items: center;
padding: 64px 32px;
position: relative;
perspective: 30cm;
perspective-origin: 50% 50%;
}
gate-page .logotype {
width: 139px;
height: 42px;
margin-bottom: 64px;
}
gate-page .legalText {
color: var(--white);
margin-top: 16px;
transition: var(--main-transition-duration) var(--transition-timing-function);
transition-delay: var(--main-transition-duration);
}
gate-page.notInitiated .legalText {
opacity: 0;
}
gate-page.willDissolve .logotype {
transition: calc(var(--main-transition-duration) * 1.5) var(--transition-timing-function);
transition-delay: 0s;
transform: translateY(-16px);
opacity: 0;
}
gate-page.willDissolve .legalText {
transition: calc(var(--main-transition-duration) * 1.5) var(--transition-timing-function);
transition-delay: 0s;
transform: translateY(16px);
opacity: 0;
}
gate-page.willDissolve .gatePageContent pill-box {
transform: perspective(60cm) translateZ(-20cm) translateY(200vh);
}
gate-page.willDissolve .gatePageContent pill-box > * {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
transition-delay: 0s;
opacity: 0;
}
gate-page.dissolve .gatePageContent pill-box {
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
transform: perspective(60cm) translateZ(-20cm) translateY(200vh);
box-shadow: none;
}
gate-page .gatePageContent {
position: relative;
width: 100%;
max-width: 360px;
}
.bgWrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: grid;
justify-content: center;
align-items: stretch;
overflow: hidden;
}
@media screen and (min-width: 1024px) {
.bgWrapper {
opacity: 0.75;
}
}
@media screen and (max-width: 1023px) {
.bgWrapper {
width: 100vh;
height: 100vw;
top: calc(50vh - 50vw);
transform: rotate(90deg);
left: calc(50vw - 50vh);
}
}
.bgWrapper dotlottie-player.bg {
aspect-ratio: 16/9;
width: 100%;
transform: scale(1);
height: 100%;
}
.iPhone gate-page, .iPad gate-page {
padding-top: 120px;
height: 100vh;
overflow: auto;
}
.iPhone gate-page > .legalText, .iPad gate-page > .legalText {
opacity: 0;
}
.iPhone.gatepages, .iPad.gatepages {
overflow: hidden;
}
orin-dashboard {
display: grid;
grid-template-rows: max-content 1fr max-content;
align-items: center;
min-height: 100vh;
transition: calc(var(--main-transition-duration) * 1.5);
}
@media screen and (min-width: 1024px) {
orin-dashboard {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
}
orin-dashboard header {
display: grid;
grid-auto-flow: column;
justify-content: space-between;
padding: 16px;
position: relative;
z-index: 8;
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
}
orin-dashboard header:before {
content: "";
display: block;
position: absolute;
background-image: var(--ultralight-gradient-vertical);
top: 0;
left: 0;
width: 100%;
height: 86px;
z-index: -1;
}
orin-dashboard footer {
position: fixed;
display: grid;
justify-content: space-between;
grid-template-columns: max-content max-content;
width: 100vw;
bottom: 0;
padding: 16px;
z-index: 10;
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
}
orin-dashboard footer orin-switcher {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
orin-dashboard .dashboardContent {
padding: 0 16px;
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
}
@media screen and (min-width: 1024px) {
orin-dashboard .dashboardContent {
grid-gap: 16px;
height: 100%;
max-height: calc(100vh - 120px);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-content: stretch;
align-items: stretch;
}
}
orin-dashboard .widget {
display: grid;
align-content: start;
grid-gap: 16px;
padding: 16px;
border-radius: var(--small-border-radius);
box-shadow: var(--light-shadow);
background-color: var(--white);
user-select: none;
transform: translateY(16px);
opacity: 0;
transition: var(--main-transition-duration) var(--transition-timing-function);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
orin-dashboard .widget.calledIn {
transform: none;
opacity: 1;
}
orin-dashboard .widget .widgetHeader {
display: grid;
grid-template-columns: max-content 1fr;
}
orin-dashboard .widget .widgetHeader > *:last-child {
text-align: right;
}
orin-dashboard .widget .widgetHeader h1, orin-dashboard .widget .widgetHeader h3 {
text-shadow: var(--heavy-text-shadow);
}
orin-dashboard.notInitiated header {
opacity: 0;
transform: translateY(-40px);
}
orin-dashboard.notInitiated footer {
opacity: 0;
transform: translateY(40px);
}
orin-dashboard.notInitiated .dashboardContent {
transition-duration: calc(var(--main-transition-duration) * 0.9);
transform: translateY(40px);
opacity: 0;
}
orin-dashboard.pageChanging .dashboardContent {
opacity: 0;
transform: scale(0.98);
transition: calc(var(--main-transition-duration) * 0.7) var(--transition-timing-function);
}
orin-dashboard.pageChanging .dashboardContent * {
transition-delay: 0s !important;
}
@media screen and (max-width: 1023px) {
orin-dashboard.pageChanging .dashboardContent * {
transition: calc(var(--main-transition-duration) * 0.001) var(--transition-timing-function) !important;
}
}
@media screen and (min-width: 1024px) {
orin-dashboard.pageChanging .dashboardContent * {
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function) !important;
}
}
orin-dashboard.pageChangingTransition .dashboardContent {
transition: calc(var(--main-transition-duration) * 0.7) var(--transition-timing-function);
}
.utilityTrayOpen header {
z-index: 9999;
}
@media screen and (max-width: 1023px) {
.utilityTrayOpen .dashboardContent {
pointer-events: none;
}
}
.notificationTrayOpen orin-dashboard header, .notificationTrayOpen orin-dashboard .dashboardContent {
filter: blur(8px);
opacity: 0.5;
}
.notificationTrayOpen orin-dashboard footer {
pointer-events: none;
}
.notificationTrayOpen orin-dashboard footer orin-switcher {
pointer-events: none;
transform: translateY(16px);
opacity: 0;
}
.notificationTrayOpen orin-dashboard footer notification-button {
pointer-events: auto;
}
.iPhone orin-dashboard {
position: relative;
}
.iPhone orin-dashboard header {
padding-top: 64px;
}
.iPhone orin-dashboard header:before {
content: "";
display: block;
position: fixed;
background-image: var(--ultralight-gradient-vertical-heavy);
top: 0;
left: 0;
width: 100%;
height: 64px;
pointer-events: none;
z-index: 9999;
}
.iPhone orin-dashboard footer {
padding-bottom: 32px;
}
.iPad {
--header-gap: 103px;
--footer-gap: 78px;
}
.iPad orin-dashboard header {
padding-top: 32px;
}
.iPad orin-dashboard header:before {
content: "";
display: block;
position: fixed;
background-image: var(--ultralight-gradient-vertical-heavy);
top: 0;
left: 0;
width: 100%;
height: 32px;
pointer-events: none;
z-index: 9999;
}
.iPad orin-dashboard header utility-tray .tray {
padding-top: 32px;
}
.iPad orin-dashboard footer {
padding-bottom: 32px;
}
.shopLogo {
position: relative;
height: 55px;
width: 55px;
background-color: var(--lighter);
overflow: hidden;
border-radius: var(--small-border-radius);
box-shadow: var(--button-shadow);
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
}
@media screen and (max-width: 1023px) {
.shopLogo {
height: 45px;
width: 45px;
}
}
.shopLogo orin-image {
display: flex;
position: absolute;
height: calc(100% - 4px);
width: calc(100% - 4px);
top: 2px;
left: 2px;
overflow: hidden;
border-radius: calc(var(--small-border-radius) - 2px);
}
.shopLogo orin-image img {
object-fit: contain;
padding: 4px;
}
.shopLogo orin-image img[src$=".jpg"], .shopLogo orin-image img[src$=".jpeg"] {
padding: 0;
object-fit: cover;
}
.shopLogo orin-image.light {
background-image: var(--midnight);
}
.shopLogo orin-image.dark {
background-color: var(--white);
}
utility-tray {
z-index: 999;
}
utility-tray .utilityButton {
display: grid;
grid-auto-flow: column;
grid-gap: 16px;
position: relative;
-webkit-user-select: none;
cursor: pointer;
}
@media screen and (min-width: 1024px) {
utility-tray .utilityButton {
min-width: 225px;
}
}
utility-tray .utilityButton .settingsIcon, utility-tray .utilityButton .closeIcon {
width: 55px;
height: 55px;
display: grid;
align-items: center;
justify-content: center;
background-color: var(--lighter);
border-radius: var(--small-border-radius);
}
utility-tray .utilityButton .settingsIcon i.icon, utility-tray .utilityButton .closeIcon i.icon {
background-color: var(--dark);
}
@media screen and (max-width: 1023px) {
utility-tray .utilityButton {
align-items: start;
}
utility-tray .utilityButton .settingsIcon {
display: none;
}
}
utility-tray .utilityButton .divider {
display: grid;
height: 100%;
width: 1px;
background-color: var(--light);
border-radius: var(--small-border-radius);
}
@media screen and (max-width: 1023px) {
utility-tray .utilityButton .divider {
display: none;
}
}
utility-tray .utilityButton .userAndShop {
display: flex;
align-items: center;
gap: 8px;
color: var(--darker);
flex-direction: row-reverse;
text-align: right;
}
utility-tray .tray {
position: absolute;
display: grid;
grid-gap: 8px;
align-items: start;
background-color: var(--translucent-white);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 16px;
border-radius: var(--small-border-radius) 0 0 var(--small-border-radius);
box-shadow: var(--card-shadow);
top: 0;
right: 0;
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
@media screen and (max-width: 1023px) {
utility-tray .tray {
top: auto;
bottom: 0;
right: 0;
width: 100%;
align-content: start;
padding: 16px;
position: fixed;
border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;
box-shadow: var(--card-shadow), 0 0 0 100vh rgba(255, 255, 255, 0.8);
max-height: 100%;
overflow: auto;
}
}
utility-tray .tray .utilityButton {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
@media screen and (min-width: 1024px) {
utility-tray .tray .utilityButton .settingsIcon {
display: none;
}
}
@media screen and (max-width: 1023px) {
utility-tray .tray .utilityButton {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
utility-tray .tray .utilityButton .userAndShop {
flex-direction: row;
text-align: left;
justify-content: flex-start;
}
utility-tray .tray .utilityButton .userAndShop .shopLogo {
height: 55px;
width: 55px;
}
}
utility-tray .tray.notInitiated {
opacity: 0;
}
@media screen and (min-width: 1024px) {
utility-tray .tray.notInitiated {
transform: translateX(16px);
}
utility-tray .tray.notInitiated .utilityButton {
transform: translateX(-16px);
}
}
@media screen and (max-width: 1023px) {
utility-tray .tray.notInitiated {
transform: translateY(100%);
}
}
utility-tray .tray .navNest {
display: grid;
background-color: var(--lighter);
border-radius: var(--small-border-radius);
padding: 8px;
}
utility-tray .tray hr {
background-color: var(--lighter);
height: 1px;
border-radius: var(--small-border-radius);
padding: 0;
margin: 0;
}
utility-tray .tray a.utilityNav {
display: grid;
grid-auto-flow: column;
align-items: center;
grid-template-columns: auto 1fr auto;
justify-content: start;
grid-gap: 8px;
text-decoration: none;
padding: 8px;
color: var(--darker);
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
border-radius: var(--small-border-radius);
-webkit-user-select: none;
}
utility-tray .tray a.utilityNav i.icon {
background-color: var(--darker);
}
utility-tray .tray a.utilityNav.external {
color: var(--cobalt);
}
utility-tray .tray a.utilityNav.external i.icon {
background-color: var(--cobalt);
}
utility-tray .tray a.utilityNav.external:after {
content: "";
display: grid;
width: 16px;
height: 16px;
background-color: var(--light);
mask-repeat: no-repeat;
mask-position: center;
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
justify-self: end;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
@media screen and (min-width: 1024px) {
utility-tray .tray a.utilityNav i.icon {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
utility-tray .tray a.utilityNav:hover i.icon {
transform: translateX(-4px);
}
}
utility-tray .tray a.utilityNav:active {
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function);
transform: scale(0.99);
}
utility-tray .tray > p.legalText {
margin: 16px 0;
text-align: center;
color: var(--light);
}
@media screen and (min-width: 1024px) {
utility-tray .tray > p.legalText {
display: none;
}
}
utility-tray > .utilityButton:hover .userAndShop .shopLogo {
box-shadow: var(--button-shadow-hover);
}
logo-heading {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
@media screen and (max-width: 1023px) {
logo-heading {
gap: 8px;
}
}
logo-heading .orinLogo figure {
height: 36px;
background-size: contain;
background-position: center left;
}
logo-heading .orinLogo figure.logo {
width: 32px;
}
@media screen and (min-width: 1024px) {
logo-heading .orinLogo figure.logo {
width: 36px;
}
}
dashboard-column {
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
position: relative;
}
@media screen and (min-width: 1024px) {
dashboard-column {
display: grid;
max-height: calc(100vh - 120px);
align-content: stretch;
align-items: end;
}
}
dashboard-column.card {
box-shadow: var(--light-shadow);
border-radius: var(--large-border-radius);
}
@media screen and (min-width: 1024px) {
dashboard-column.card {
overflow: auto;
}
dashboard-column.card[column="2"] {
align-self: end;
}
}
dashboard-column.down {
transform: translateY(160px);
opacity: 0;
}
dashboard-column.forward {
transform: translateX(-100px);
opacity: 0;
}
dashboard-column.backward {
transform: translateX(100px);
opacity: 0;
}
dashboard-column .dashboardColumn {
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 1023px) {
dashboard-column .dashboardColumn {
overflow-x: hidden;
}
}
dashboard-column .dashboardColumn::-webkit-scrollbar {
display: none;
}
dashboard-column .controlPanel {
display: grid;
grid-gap: 16px;
background-image: var(--midnight);
color: var(--white);
padding: 16px;
border-radius: var(--large-border-radius);
height: 100%;
max-height: calc(100vh - 120px);
}
dashboard-column .controlPanel hr {
background-color: var(--mid);
margin: 0;
}
dashboard-column .controlPanel input-wrapper .inputDescription, dashboard-column .controlPanel fileupload-wrapper .inputDescription {
color: var(--lighter);
}
dashboard-column .controlPanel button.orinAI {
background-image: var(--sunrise);
}
dashboard-column .controlPanel > orin-button {
margin-top: 16px;
}
dashboard-column .controlPanel orin-button[type=tertiary] {
text-decoration: none;
}
dashboard-column .controlPanel orin-button[type=tertiary] button, dashboard-column .controlPanel orin-button[type=tertiary] a {
color: var(--light);
box-shadow: inset 0 0 0 1px var(--mid), var(--card-shadow);
text-decoration: none;
}
dashboard-column .controlPanel orin-button[type=tertiary] button .buttonText, dashboard-column .controlPanel orin-button[type=tertiary] a .buttonText {
text-decoration: none;
color: var(--white);
font-weight: 400;
}
dashboard-column .controlPanel orin-button[type=tertiary] button .buttonText:first-child:last-child, dashboard-column .controlPanel orin-button[type=tertiary] a .buttonText:first-child:last-child {
padding: 0;
}
dashboard-column .controlPanel orin-button[type=tertiary] button i.icon, dashboard-column .controlPanel orin-button[type=tertiary] a i.icon {
background-color: var(--white);
}
dashboard-column .controlPanel orin-button[type=tertiary] button.large.iconOnly, dashboard-column .controlPanel orin-button[type=tertiary] a.large.iconOnly {
width: 55.5px;
height: 55.5px;
}
dashboard-column .controlPanel orin-button[type=tertiary]:hover {
color: var(--white);
}
dashboard-column .controlPanel orin-button[type=tertiary]:hover button, dashboard-column .controlPanel orin-button[type=tertiary]:hover a {
box-shadow: inset 0 0 0 2px var(--mid), var(--card-shadow);
}
dashboard-column .controlPanel orin-button[type=tertiary]:active {
transition: 0.1s var(--transition-timing-function);
transform: scale(0.98);
}
dashboard-column .controlPanel orin-button[type=tertiary]:active .iconOnly {
transform: scale(0.95);
}
dashboard-column .controlPanel orin-button[type=tertiary][disabled] {
opacity: 0.5;
}
dashboard-column .controlPanel .datePickerWrapper, dashboard-column .controlPanel .timePickerWrapper {
display: grid;
grid-gap: 8px;
position: relative;
z-index: 0;
}
dashboard-column .controlPanel .datePickerWrapper date-picker, dashboard-column .controlPanel .timePickerWrapper date-picker {
padding: 8px;
background-color: var(--white);
border-radius: var(--large-border-radius);
box-shadow: var(--card-shadow);
}
dashboard-column .controlPanel .datePickerWrapper date-picker .dayNames .inputDescription, dashboard-column .controlPanel .timePickerWrapper date-picker .dayNames .inputDescription {
color: var(--black);
}
dashboard-column .controlPanel .datePickerWrapper time-picker, dashboard-column .controlPanel .timePickerWrapper time-picker {
position: relative;
height: 124px;
}
dashboard-column .controlPanel .datePickerWrapper time-picker .availableTimes, dashboard-column .controlPanel .timePickerWrapper time-picker .availableTimes {
position: absolute;
left: -16px;
right: -16px;
height: 100%;
width: calc(100% + 32px);
padding: 0 16px;
flex-wrap: wrap;
flex-direction: column;
overflow-x: auto;
align-items: center;
align-content: start;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
dashboard-column .controlPanel .datePickerWrapper time-picker .availableTimes time, dashboard-column .controlPanel .timePickerWrapper time-picker .availableTimes time {
scroll-snap-align: center;
box-shadow: inset 0 0 0 1px var(--lighter);
color: var(--lighter);
min-width: 80px;
}
dashboard-column .controlPanel .datePickerWrapper time-picker .availableTimes time.picked, dashboard-column .controlPanel .timePickerWrapper time-picker .availableTimes time.picked {
box-shadow: var(--card-shadow);
}
dashboard-column .controlPanel .datePickerWrapper time-picker .availableTimes .noAvailableTimes, dashboard-column .controlPanel .timePickerWrapper time-picker .availableTimes .noAvailableTimes {
border: 1px dashed;
border-radius: var(--small-border-radius);
padding: 8px;
font-size: 10px;
width: 100%;
height: 100%;
color: var(--light);
text-align: center;
display: grid;
align-items: center;
}
dashboard-column .controlPanel .controlPanelBubble {
display: grid;
grid-gap: 16px;
padding: 16px;
background-image: var(--midnight);
border: 1px solid var(--mid);
border-radius: var(--large-border-radius);
box-shadow: var(--card-shadow);
}
dashboard-column .controlPanel.withPanelAction.withPanelAction.withPanelAction {
padding-bottom: 64px;
}
@media screen and (max-width: 1023px) {
dashboard-column .controlPanel.withPanelAction.withPanelAction.withPanelAction {
padding-bottom: 96px;
}
}
dashboard-column .controlPanel.withPanelAction.withPanelAction.withPanelAction + a.settingsNavButton.panelAction {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background-image: var(--ceramic);
overflow: visible;
}
dashboard-column .controlPanel.withPanelAction.withPanelAction.withPanelAction + a.settingsNavButton.panelAction:before {
background-image: var(--sunrise);
border-radius: var(--large-border-radius);
}
@media screen and (max-width: 1023px) {
dashboard-column .controlPanel.withPanelAction.withPanelAction.withPanelAction + a.settingsNavButton.panelAction {
bottom: 32px;
}
}
dashboard-column .askConfirmation {
position: fixed;
right: 32px;
bottom: 78px;
margin: 0;
width: calc((100% - 64px) / 3 - 32px);
min-width: 368px;
height: auto;
z-index: 999;
padding: 16px;
background-image: var(--ceramic);
border-radius: var(--small-border-radius);
box-shadow: var(--card-shadow);
display: grid;
grid-gap: 16px;
color: var(--dark);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
@media screen and (max-width: 1023px) {
dashboard-column .askConfirmation {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
bottom: 16px;
right: 16px;
}
}
dashboard-column .askConfirmation .actions {
display: flex;
gap: 8px;
}
dashboard-column .askConfirmation .actions orin-button[data-confirm] {
width: 100%;
}
dashboard-column .askConfirmation .actions orin-button[data-reject] button {
grid-gap: 8px;
}
dashboard-column .askConfirmation .actions orin-button[data-reject] button .buttonText {
color: var(--dark);
grid-column: 2;
grid-row: 1;
padding-left: 0;
}
dashboard-column .askConfirmation .actions orin-button[data-reject] button i.icon {
background-color: var(--dark);
grid-column: 1;
grid-row: 1;
}
dashboard-column .askConfirmation.notCalledIn {
transform: translateY(16px);
opacity: 0;
}
dashboard-column .askConfirmation.calledOut {
transform: translateY(-16px);
opacity: 0;
}
@media screen and (max-width: 1023px) {
dashboard-column[column="2"].down {
transform: translateY(100%);
opacity: 0;
}
dashboard-column.card {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-shadow: none;
z-index: 99999;
border-radius: 0;
background-color: var(--ultralight);
}
dashboard-column.card[column="2"] {
height: auto;
max-height: 100%;
border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;
box-shadow: var(--large-dark-shadow);
bottom: -16px;
top: auto;
}
dashboard-column.card[column="2"] .dashboardColumn {
padding-bottom: 32px;
border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;
max-height: calc(100vh - 140px);
}
dashboard-column.card[column="0"] .settingsNav {
transform: translateX(-100%);
transition: var(--main-transition-duration) var(--transition-timing-function);
opacity: 0;
}
orin-dashboard[active-column="0"] dashboard-column[column="0"].card .settingsNav {
transform: none;
opacity: 1;
}
orin-dashboard[active-column="2"] dashboard-column[column="1"].card {
transform-origin: bottom center;
transform: scale(0.95);
opacity: 0.3;
pointer-events: none;
}
.iPhone orin-dashboard dashboard-column[column="2"] .controlPanel {
padding-bottom: 64px;
}
}
.iPhone dashboard-column .controlPanel.withPanelAction.withPanelAction.withPanelAction {
padding-bottom: 128px;
}
.iPhone dashboard-column .controlPanel.withPanelAction.withPanelAction.withPanelAction + a.settingsNavButton.panelAction {
bottom: 64px;
}
orin-switcher {
display: inline-flex;
position: relative;
background-color: var(--translucent-white);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--large-border-radius);
box-shadow: var(--button-shadow);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
orin-switcher .switcherState {
padding: 8px 16px;
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
position: relative;
color: var(--darker);
z-index: 1;
min-width: 32px;
text-align: center;
}
orin-switcher .switcherState.active {
color: var(--white);
cursor: default;
}
orin-switcher .switcherIndicator {
width: 0;
min-width: 64px;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: var(--large-border-radius);
background-image: var(--midnight);
transform-origin: center;
transition: var(--main-transition-duration) var(--transition-timing-function);
box-shadow: var(--button-shadow);
z-index: 0;
}
horizontal-wrapper orin-switcher .switcherIndicator {
background-image: var(--sunrise);
}
orin-switcher[disabled], horizontal-wrapper[disabled] orin-switcher {
opacity: 0.5;
cursor: default;
}
orin-switcher[disabled] .switcherIndicator, horizontal-wrapper[disabled] orin-switcher .switcherIndicator {
opacity: 0;
}
orin-switcher[disabled] .switcherState.active, horizontal-wrapper[disabled] orin-switcher .switcherState.active {
color: var(--darker);
}
input-list orin-switcher {
background-color: var(--white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
panel-heading {
display: grid;
grid-auto-flow: column;
align-items: start;
position: sticky;
top: 0;
z-index: 9;
grid-gap: 0;
}
@media screen and (max-width: 1023px) {
panel-heading {
grid-template-columns: 1fr 45px;
}
}
panel-heading[parent] {
grid-template-columns: 1fr 45px;
}
panel-heading[parent] .cardNavigation {
display: grid;
}
panel-heading:before {
content: "";
display: block;
position: absolute;
background-image: var(--ultralight-gradient-vertical);
top: -16px;
left: -16px;
width: calc(100% + 32px);
height: 80px;
min-height: calc(100% + 32px);
z-index: 0;
}
panel-heading p a {
font-weight: inherit;
}
panel-heading * {
position: relative;
z-index: 1;
}
panel-heading .cardNavigation {
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: var(--large-border-radius);
background-color: var(--ultralight);
user-select: none;
}
@media screen and (max-width: 1023px) {
panel-heading .cardNavigation {
display: grid;
}
}
panel-heading .cardNavigation:active {
transition: 0.15s var(--transition-timing-function);
transform: scale(0.95);
}
panel-heading .cardNavigation i.icon {
background-color: var(--cobalt);
}
panel-heading .cardNavigation.closeControlPanelButton, panel-heading .cardNavigation.closeSettingsButton {
justify-self: end;
}
panel-heading .cardNavigation.closeControlPanelButton {
background-color: var(--dark);
}
panel-heading .cardNavigation.closeControlPanelButton i.icon {
background-color: var(--lighter);
}
@media screen and (max-width: 1023px) {
.iPhone panel-heading {
padding-top: 64px;
}
.iPhone dashboard-column[column="2"] panel-heading {
padding-top: 0;
}
}
@media screen and (max-width: 1023px) {
dashboard-column[column="1"] panel-heading {
grid-template-columns: 45px 1fr 45px;
}
}
dashboard-column[column="2"] .controlPanel panel-heading.withShopLogo {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 8px;
}
dashboard-column[column="2"] .controlPanel panel-heading.withShopLogo .shopLogo {
width: 64px;
height: 64px;
}
dashboard-column[column="2"] .controlPanel panel-heading:before {
background-image: var(--darker-gradient-vertical);
}
.settingsNav {
display: grid;
grid-gap: 32px;
align-content: start;
background-color: var(--white);
border-radius: var(--large-border-radius);
padding: 16px;
height: 100%;
}
.settingsNav nav {
display: grid;
grid-gap: 8px;
}
.settingsNav hr {
margin: 0;
}
a.settingsNavButton {
padding: 8px;
border-radius: var(--small-border-radius);
color: var(--black);
text-decoration: none;
display: grid;
align-items: center;
grid-gap: 8px;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
position: relative;
}
a.settingsNavButton * {
position: relative;
z-index: 1;
}
a.settingsNavButton span {
font-weight: 300;
}
a.settingsNavButton .inputDescription {
color: var(--dark);
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
a.settingsNavButton i:first-child {
background-color: var(--black);
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
a.settingsNavButton i.arrowright {
background-color: var(--light);
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
a.settingsNavButton:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: var(--midnight);
z-index: 0;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
opacity: 0;
border-radius: var(--small-border-radius);
}
a.settingsNavButton:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: calc(100% + 18px);
top: -9px;
left: 0;
z-index: 0;
opacity: 0;
}
@media screen and (min-width: 1024px) {
a.settingsNavButton:hover {
color: var(--white);
box-shadow: var(--button-shadow);
}
a.settingsNavButton:hover .inputDescription {
color: var(--light);
}
a.settingsNavButton:hover i:first-child {
background-color: var(--white);
}
a.settingsNavButton:hover i.arrowright {
background-color: var(--white);
}
a.settingsNavButton:hover:before {
opacity: 1;
}
}
a.settingsNavButton.active {
color: var(--white);
box-shadow: var(--button-shadow);
}
a.settingsNavButton.active .inputDescription {
color: var(--light);
}
a.settingsNavButton.active i:first-child {
background-color: var(--white);
}
a.settingsNavButton.active i.arrowright {
background-color: var(--white);
}
a.settingsNavButton.active:before {
opacity: 1;
}
a.settingsNavButton:active {
transition: calc(var(--main-transition-duration) * 0.2) var(--transition-timing-function);
transform: scale(0.995);
}
a.settingsNavButton[disabled] {
color: var(--light);
box-shadow: none;
cursor: default;
}
a.settingsNavButton[disabled] .inputDescription {
color: var(--light);
}
a.settingsNavButton[disabled] i:first-child {
background-color: var(--light);
}
a.settingsNavButton[disabled] i.arrowright {
background-color: var(--lighter);
}
a.settingsNavButton[disabled]:hover {
color: var(--light);
box-shadow: none;
}
a.settingsNavButton[disabled]:hover .inputDescription {
color: var(--light);
}
a.settingsNavButton[disabled]:hover i:first-child {
background-color: var(--light);
}
a.settingsNavButton[disabled]:hover i.arrowright {
background-color: var(--lighter);
}
a.settingsNavButton[disabled]:hover:before {
opacity: 0;
}
a.settingsNavButton.generalNav {
grid-template-columns: max-content 1fr max-content;
}
a.settingsNavButton.specificNav {
grid-template-columns: 1fr max-content;
}
a.settingsNavButton.specificNav .buttonText {
display: grid;
}
a.settingsNavButton.panelAction {
position: absolute;
bottom: 16px;
left: 16px;
width: calc(100% - 32px);
padding: 16px;
background-color: var(--translucent-white);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--button-shadow);
border-radius: var(--large-border-radius);
z-index: 99;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
a.settingsNavButton.panelAction .buttonText {
display: flex;
align-items: center;
}
a.settingsNavButton.panelAction i {
background-color: var(--cobalt);
width: 32px;
height: 32px;
}
@media screen and (min-width: 1024px) {
a.settingsNavButton.panelAction:hover, a.settingsNavButton.panelAction.active {
box-shadow: var(--button-shadow-hover);
}
a.settingsNavButton.panelAction:hover i, a.settingsNavButton.panelAction.active i {
background-color: var(--white);
}
}
.infoBits {
display: grid;
grid-gap: 8px;
}
.infoBits .infoBit {
display: grid;
grid-template-columns: 1fr max-content;
}
.infoBits .emptyInfoBits {
border: 1px dashed var(--light);
border-radius: var(--large-border-radius);
padding: 16px;
text-align: center;
}
@media screen and (max-width: 1023px) {
.iPhone a.settingsNavButton.panelAction {
bottom: 32px;
}
}
@media screen and (max-width: 1023px) {
orin-dashboard header .backButtonWrapper {
display: none;
}
orin-dashboard[column="0"].card {
background-color: var(--ultralight);
}
orin-dashboard[column="0"].card .settingsNav {
transform: translateX(-100%);
transition: var(--main-transition-duration) var(--transition-timing-function);
opacity: 0;
}
orin-dashboard[active-column="0"] dashboard-column[column="0"].card .settingsNav {
transform: none;
opacity: 1;
}
}
@media screen and (min-width: 1024px) {
orin-dashboard header .backButtonWrapper {
position: absolute;
height: 100%;
padding: 16px;
display: grid;
align-items: center;
justify-content: center;
transition: var(--main-transition-duration) var(--transition-timing-function);
transform: translateY(-100%);
opacity: 0;
}
orin-dashboard header logo-heading {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
}
orin-dashboard[page=settings] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
@media screen and (min-width: 1024px) {
orin-dashboard[page=settings] .backButtonWrapper {
transform: none;
opacity: 1;
}
orin-dashboard[page=settings] logo-heading {
transform: translateY(100%);
opacity: 0;
}
orin-dashboard[page=settings] .dashboardContent {
position: relative;
z-index: 1;
}
orin-dashboard[page=settings] .askConfirmation {
bottom: 32px;
}
}
@media screen and (max-width: 1023px) {
orin-dashboard[page=settings] .dashboardContent {
position: absolute;
top: 0;
left: 0;
min-height: 100vh;
min-width: 100vw;
z-index: 9999;
}
orin-dashboard[page=settings] .dashboardContent dashboard-column.down {
transform: translateX(100%);
opacity: 0;
}
orin-dashboard[page=settings] .dashboardContent dashboard-column[column="2"].down {
transform: translateY(100%);
opacity: 0;
}
orin-dashboard[page=settings].pageChanging .dashboardContent {
transform: translateX(160px);
opacity: 0;
}
}
orin-dashboard[page=settings] footer {
z-index: 0;
}
orin-dashboard[page=settings] footer orin-switcher {
transform: translateX(-40px);
opacity: 0;
}
.iPad orin-dashboard[page=settings] .dashboardContent {
padding: 8px 16px;
margin-top: -16px;
}
.iPad orin-dashboard[page=settings] footer notification-button[counter] {
transform: translateX(32px);
opacity: 0;
}
@media screen and (max-width: 1023px) {
.iPhone orin-dashboard[page=settings] .askConfirmation {
bottom: 48px;
}
}
@media print {
orin-dashboard[page=settings] header .backButtonWrapper {
display: none;
}
orin-dashboard[page=settings] header .utilityButton .divider, orin-dashboard[page=settings] header .utilityButton .settingsIcon {
display: none;
}
orin-dashboard[page=settings] dashboard-column[column="0"], orin-dashboard[page=settings] dashboard-column[column="1"] {
display: none;
}
orin-dashboard[page=settings] dashboard-column[column="2"] .integrationMethod {
display: none;
}
orin-dashboard[page=settings] dashboard-column[column="2"] .integrationMethod.toBePrinted {
display: grid;
}
orin-dashboard[page=settings] dashboard-column[column="2"] .integrationMethod.toBePrinted code {
font-family: Courier, sans-serif;
padding: 8px 0;
line-height: 24px;
overflow: unset;
text-overflow: unset;
white-space: pre-wrap;
}
orin-dashboard[page=settings] dashboard-column[column="2"] .integrationMethod.toBePrinted code-nest orin-button {
display: none;
}
orin-dashboard[page=settings] dashboard-column[column="2"] * {
color: var(--darker) !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
orin-dashboard[page=settings] dashboard-column[column="2"] *:before {
display: none;
}
}
.dashboardColumn.tableManagement {
grid-gap: 16px;
overflow: auto;
}
.dashboardColumn.tableManagement .tables {
display: grid;
grid-gap: 16px;
user-select: none;
padding-bottom: 80px;
transform: translate3d(0, 0, 0);
}
.dashboardColumn.tableManagement .tables .tablesSummary {
color: var(--dark);
}
.dashboardColumn.tableManagement .tables table-view {
display: grid;
grid-gap: 8px;
}
.dashboardColumn.tableManagement .tables .table {
background-image: var(--ceramic);
display: grid;
grid-template-columns: max-content 1fr max-content;
align-items: center;
border-radius: var(--large-border-radius);
box-shadow: var(--light-shadow);
grid-gap: 8px;
padding: 8px;
padding-right: 16px;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.dashboardColumn.tableManagement .tables .table .tableName {
position: relative;
z-index: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dashboardColumn.tableManagement .tables .table i.icon.edit {
background-color: var(--dark);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.dashboardColumn.tableManagement .tables .table:before {
content: "";
display: block;
background-image: var(--midnight);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.dashboardColumn.tableManagement .tables .table.active {
color: var(--white);
}
.dashboardColumn.tableManagement .tables .table.active i.icon.edit {
background-color: var(--white);
}
.dashboardColumn.tableManagement .tables .table.active:before {
opacity: 1;
}
.dashboardColumn.tableManagement .tables .table.active i.icon.edit {
transform: rotate(-90deg);
}
@media screen and (min-width: 1024px) {
.dashboardColumn.tableManagement .tables .table:hover {
background-color: var(--ultralight);
}
.dashboardColumn.tableManagement .tables .table:hover i.icon.edit {
background-color: var(--mid);
}
.dashboardColumn.tableManagement .tables .table:hover:hover.active i.icon.edit {
background-color: var(--white);
}
}
.dashboardColumn.tableManagement .tables .seatsDisplay {
background-color: var(--white);
border-radius: calc(var(--large-border-radius) - 4px);
border: 1px solid var(--white);
box-shadow: var(--light-shadow);
display: flex;
align-items: center;
padding: 8px;
gap: 8px;
position: relative;
z-index: 1;
}
.dashboardColumn.tableManagement .tables .seatsDisplay .tableSeats {
display: flex;
align-items: center;
gap: 4px;
color: var(--black);
}
.dashboardColumn.tableManagement .tables .seatsDisplay .tableSeats i.icon.chair {
background-color: var(--dark);
}
.dashboardColumn.tableManagement .tables .tableStack {
transform: translate3d(-2px, 0, 0);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.dashboardColumn.tableManagement .tables .tableStack .stackHeading {
background-color: var(--lighter);
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
border-radius: var(--large-border-radius);
box-shadow: var(--light-shadow);
grid-gap: 8px;
padding: 8px;
padding-right: 16px;
position: relative;
z-index: 3;
transition: box-shadow var(--main-transition-duration) var(--transition-timing-function), margin-bottom var(--main-transition-duration) var(--transition-timing-function), background-color var(--main-transition-duration) var(--transition-timing-function), transform 0.1s var(--transition-timing-function);
cursor: pointer;
overflow: hidden;
}
.dashboardColumn.tableManagement .tables .tableStack .stackHeading > * {
position: relative;
z-index: 1;
}
.dashboardColumn.tableManagement .tables .tableStack .stackHeading:before {
content: "";
display: block;
background-image: var(--ceramic);
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
z-index: 0;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.dashboardColumn.tableManagement .tables .tableStack .stackHeading:active {
transform: scale(0.995);
}
@media screen and (min-width: 1024px) {
.dashboardColumn.tableManagement .tables .tableStack .stackHeading:hover .stackHeadingActions i.icon.down {
background-color: var(--mid);
}
}
.dashboardColumn.tableManagement .tables .tableStack .stackHeading .stackHeadingActions {
display: flex;
align-items: center;
justify-content: end;
gap: 8px;
}
.dashboardColumn.tableManagement .tables .tableStack .stackHeading .stackHeadingActions i.icon.down {
background-color: var(--light);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.dashboardColumn.tableManagement .tables .tableStack .stackedTables {
display: grid;
grid-gap: 0;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
.dashboardColumn.tableManagement .tables .tableStack .stackedTables .table {
position: relative;
transition: var(--main-transition-duration) var(--transition-timing-function);
box-shadow: var(--light-shadow);
margin-top: -53px;
transform: translate3d(0, 0, 0);
will-change: margin-top;
pointer-events: none;
}
.dashboardColumn.tableManagement .tables .tableStack .stackedTables .table:nth-child(1) {
z-index: 2;
transform: translateX(2px);
}
.dashboardColumn.tableManagement .tables .tableStack .stackedTables .table:nth-child(2) {
z-index: 1;
transform: translateX(4px);
}
.dashboardColumn.tableManagement .tables .tableStack .stackedTables .table:nth-child(n+3) {
margin-top: -55px;
opacity: 0;
z-index: 0;
}
.dashboardColumn.tableManagement .tables .tableStack .stackedTables .table.active:before {
opacity: 0;
}
@media screen and (min-width: 1024px) {
.dashboardColumn.tableManagement .tables .tableStack:hover {
transform: translateX(-4px);
}
.dashboardColumn.tableManagement .tables .tableStack:hover .stackHeading {
box-shadow: var(--light-shadow);
}
.dashboardColumn.tableManagement .tables .tableStack:hover .stackedTables .table {
box-shadow: var(--light-shadow);
}
.dashboardColumn.tableManagement .tables .tableStack:hover .stackedTables .table:nth-child(1) {
z-index: 2;
transform: translateX(4px) translateY(2px);
}
.dashboardColumn.tableManagement .tables .tableStack:hover .stackedTables .table:nth-child(2) {
z-index: 1;
transform: translateX(8px) translateY(4px);
}
}
.dashboardColumn.tableManagement .tables .tableStack.open {
transform: none;
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackHeading {
margin-bottom: 4px;
box-shadow: none;
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackHeading i.icon.down {
transform: rotate(-180deg);
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackHeading:before {
opacity: 0;
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackedTables {
grid-gap: 4px;
margin-bottom: 0;
transform-origin: top left;
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackedTables .table {
margin-top: 0;
transform: none;
opacity: 1;
box-shadow: var(--light-shadow);
pointer-events: initial;
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackedTables .table:nth-child(1) {
z-index: 2;
transform: none;
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackedTables .table:nth-child(2) {
z-index: 1;
transform: none;
}
.dashboardColumn.tableManagement .tables .tableStack.open .stackedTables .table.active:before {
opacity: 1;
}
.dashboardColumn.tableManagement .tables hr {
background-color: var(--ultralight);
}
.dashboardColumn.tableManagement .emptyTables {
display: grid;
align-self: stretch;
border: 2px dashed var(--light);
border-radius: 16px;
min-height: 30vh;
padding: 64px;
margin-top: 32px;
text-align: center;
align-items: center;
justify-content: center;
line-height: 1.4em;
color: var(--dark);
}
.iPhone .dashboardColumn.tableManagement {
padding-bottom: 32px;
}
.dashboardColumn.controlPanel .businessDays {
display: grid;
grid-gap: 16px;
}
.dashboardColumn.controlPanel.viewInvoices {
background-image: none;
background-color: var(--lighter);
color: var(--dark);
}
.dashboardColumn.controlPanel.viewInvoices panel-heading {
color: var(--black);
}
.dashboardColumn.controlPanel.viewInvoices panel-heading:before {
background-image: var(--lighter-gradient-vertical);
}
.dashboardColumn.controlPanel.viewInvoices panel-heading .closeControlPanelButton {
background-color: var(--light);
}
.dashboardColumn.controlPanel.viewInvoices panel-heading .closeControlPanelButton i.icon {
background-color: var(--white);
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList {
display: grid;
grid-gap: 8px;
padding-bottom: 36px;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice {
background-image: var(--ceramic);
box-shadow: var(--light-shadow);
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
border-radius: var(--small-border-radius);
padding: 8px 0;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceName {
display: grid;
grid-template-columns: 32px 1fr;
align-items: center;
grid-gap: 4px;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceName .iconWrapper {
width: 32px;
height: 32px;
display: grid;
align-items: center;
justify-content: center;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceDetails {
display: flex;
align-items: center;
grid-gap: 16px;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceDetails hr {
height: 32px;
width: 1px;
background-color: var(--light);
border-radius: var(--large-border-radius);
margin: 0;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceDetails .invoiceDetail {
display: grid;
grid-gap: 0;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceDetails .invoiceDetail:first-child {
text-align: left;
justify-content: start;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceDetails .invoiceDetail:last-child {
text-align: right;
justify-content: end;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceActions {
display: flex;
gap: 8px;
margin-right: 4px;
}
.dashboardColumn.controlPanel.viewInvoices .invoicesList .invoice .invoiceActions a {
display: grid;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
}
.integrationMethods {
display: grid;
grid-gap: 16px;
}
.integrationMethods .integrationMethod {
border-radius: var(--small-border-radius);
border: 1px solid var(--mid);
padding: 16px;
display: grid;
grid-gap: 8px;
}
.integrationMethods .integrationMethod hr {
margin: 8px 0;
}
.integrationMethods .integrationMethod .helper {
display: grid;
grid-gap: 4px;
}
.integrationMethods .integrationMethod .helper code-nest {
margin-top: 4px;
}
.dashboardColumn.controlPanel.exceptions exceptions-view {
display: grid;
grid-gap: 8px;
margin-bottom: 32px;
}
@media screen and (max-width: 1023px) {
.dashboardColumn.controlPanel.exceptions exceptions-view {
margin-bottom: 16px;
}
}
.dashboardColumn.controlPanel.exceptions exceptions-view .singleException {
display: grid;
padding: 8px;
grid-template-columns: max-content 1fr max-content;
grid-gap: 8px;
transition: var(--main-transition-duration) var(--transition-timing-function);
align-items: center;
cursor: pointer;
}
.dashboardColumn.controlPanel.exceptions exceptions-view .singleException.leaving {
transition-duration: calc(var(--main-transition-duration) * 2);
transform: scale(0.95);
opacity: 0;
}
.dashboardColumn.controlPanel.exceptions exceptions-view .singleException.active {
border-color: var(--white);
}
.dashboardColumn.controlPanel.exceptions exceptions-view .singleException:active {
transition-duration: 0.1s;
transform: scale(0.99);
box-shadow: var(--light-shadow);
}
.dashboardColumn.controlPanel.exceptions .emptyExceptions {
display: grid;
align-content: center;
justify-content: center;
padding: 32px;
border-radius: var(--small-border-radius);
border: 1px dashed var(--mid);
text-align: center;
margin-bottom: 32px;
}
@media screen and (max-width: 1023px) {
.dashboardColumn.controlPanel.exceptions .emptyExceptions {
margin-bottom: 16px;
}
}
.dashboardColumn.controlPanel.exceptions .exceptionsEditActions {
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: 8px;
}
.dashboardColumn.controlPanel.exceptions.quickBreak {
grid-gap: 32px;
}
@media screen and (min-width: 1024px) {
orin-dashboard[page=reservations] header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
}
orin-dashboard[page=reservations] .dashboardContent {
display: grid;
align-self: start;
}
@media screen and (min-width: 1024px) {
orin-dashboard[page=reservations] .dashboardContent {
max-height: none;
height: 100vh;
}
}
@media screen and (max-width: 1023px) {
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="1"] {
grid-row: 1;
}
}
@media screen and (min-width: 1024px) {
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="0"] {
grid-column: span 2;
align-items: start;
max-height: none;
height: 100vh;
width: calc(100% + 32px);
left: -16px;
padding: 0 16px;
overflow: auto;
}
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="1"], orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="2"] {
max-height: calc(100vh - var(--header-gap) - var(--footer-gap));
min-width: 400px;
}
orin-dashboard[page=reservations] .dashboardContent dashboard-column.forward[column="1"] {
transition-delay: 0.1s;
}
orin-dashboard[page=reservations] .dashboardContent dashboard-column.backward[column="0"] {
transition-delay: 0.1s;
}
}
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="2"] {
position: fixed;
right: 16px;
top: var(--header-gap);
margin: 0;
width: calc((100% - 64px) / 3);
height: 100%;
z-index: 999;
}
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="2"].down {
opacity: 0.9;
transform: translateY(100vh) scale(0.9);
pointer-events: none;
}
@media screen and (max-width: 1023px) {
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="2"].down {
transform: translateY(100%) scale(0.98);
}
}
@media screen and (max-width: 1023px) {
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="2"] {
width: 100%;
height: 100vh;
display: grid;
align-items: end;
left: 0;
right: 0;
bottom: 0;
top: auto;
max-height: none;
border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;
}
orin-dashboard[page=reservations] .dashboardContent dashboard-column[column="2"] .controlPanel {
height: auto;
max-height: calc(100vh - 160px);
overflow: auto;
}
}
@media screen and (min-width: 1024px) {
orin-dashboard[page=reservations].thirdPanelOpen .dashboardContent dashboard-column[column="1"]:not(.down, .forward, .backward) {
opacity: 0.5;
filter: grayscale(1);
}
}
@media screen and (max-width: 1023px) {
orin-dashboard[page=reservations].thirdPanelOpen header {
transform-origin: top center;
opacity: 0.5;
filter: grayscale(1);
z-index: 1;
}
orin-dashboard[page=reservations].thirdPanelOpen .dashboardContent dashboard-column[column="0"]:not(.down, .forward, .backward) {
opacity: 0.5;
filter: grayscale(1);
}
orin-dashboard[page=reservations].thirdPanelOpen .dashboardContent dashboard-column[column="1"]:not(.down, .forward, .backward) {
opacity: 0.5;
filter: grayscale(1);
}
orin-dashboard[page=reservations].thirdPanelOpen footer {
opacity: 0;
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
}
}
@media screen and (max-width: 1023px) {
orin-dashboard[page=reservations] .reservationControlPanel {
border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;
}
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader {
display: grid;
grid-template-columns: 1fr max-content;
grid-gap: 8px;
transition: var(--main-transition-duration) var(--transition-timing-function);
position: sticky;
top: 0;
z-index: 999;
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader:before {
content: "";
display: block;
position: absolute;
top: -16px;
left: -16px;
right: -16px;
height: calc(100% + 32px);
pointer-events: none;
background-image: var(--darker-gradient-vertical);
z-index: 0;
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader > * {
position: relative;
z-index: 1;
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader .reservationHeaderContent {
display: grid;
align-content: center;
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader .reservationHeaderContent .quickDetails {
display: flex;
gap: 16px;
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader .reservationHeaderContent h3.reservationHeading {
font-weight: 400;
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader .closeButton {
width: 45px;
height: 45px;
display: grid;
align-items: center;
justify-content: center;
background-color: var(--mid);
border-radius: var(--large-border-radius);
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader .closeButton:active {
transition: 0.1s var(--transition-timing-function);
transform: scale(0.9);
}
orin-dashboard[page=reservations] .reservationControlPanel .reservationHeader .closeButton i.icon {
background-color: var(--white);
}
reservations-list {
padding-bottom: 62px;
display: grid;
grid-gap: 16px;
align-items: start;
align-content: start;
}
@media screen and (min-width: 1024px) {
reservations-list {
padding-top: var(--header-gap);
}
}
reservations-list .listContent {
display: grid;
grid-gap: 8px;
align-items: start;
align-content: start;
}
@media screen and (max-width: 1023px) {
reservations-list .listContent {
grid-gap: 16px;
}
}
reservations-list .listContent .noReservations {
width: 100%;
padding: 16px;
border: 1px dashed var(--light);
border-radius: var(--large-border-radius);
color: var(--light);
text-align: center;
display: grid;
align-items: center;
justify-content: center;
min-height: 300px;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-list .listContent .noReservations.removing {
opacity: 0;
transform: translateY(-16px);
}
reservations-list .listContent .noReservations.notCalledIn {
opacity: 0;
transform: translateY(16px);
}
reservations-list .listContent .reservationListItem {
position: relative;
width: 100%;
display: grid;
grid-template-columns: max-content 1fr minmax(96px, 1fr) max-content;
grid-gap: 8px;
grid-auto-flow: column;
align-items: center;
align-content: center;
background-color: var(--white);
box-shadow: var(--light-shadow);
border-radius: var(--small-border-radius);
color: var(--dark);
transition: var(--main-transition-duration) var(--transition-timing-function);
cursor: pointer;
}
reservations-list .listContent .reservationListItem.updating {
opacity: 0;
}
reservations-list .listContent .reservationListItem .reservationTime {
width: 60px;
border-radius: var(--large-border-radius);
text-align: center;
padding: 4px 8px;
margin-left: 8px;
}
reservations-list .listContent .reservationListItem .name {
padding: 8px 0;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
reservations-list .listContent .reservationListItem .tags {
display: flex;
gap: 8px;
align-items: center;
justify-content: end;
min-width: 0;
}
reservations-list .listContent .reservationListItem .tags > * {
flex-shrink: 0;
}
reservations-list .listContent .reservationListItem .tags hr {
width: 1px;
height: 16px;
background-color: var(--lighter);
margin: 0;
}
reservations-list .listContent .reservationListItem .tags .date {
color: var(--light);
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-shrink: 1;
}
reservations-list .listContent .reservationListItem .tags .date.today {
color: var(--lighter);
}
reservations-list .listContent .reservationListItem .tags .partySize {
display: flex;
gap: 4px;
align-items: center;
align-content: center;
border-right: 0;
}
reservations-list .listContent .reservationListItem .tags .singleLineNotes {
display: none;
}
reservations-list .listContent .reservationListItem .status {
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px;
height: 100%;
border-radius: 0 var(--small-border-radius) var(--small-border-radius) 0;
text-transform: capitalize;
}
reservations-list .listContent .reservationListItem .status i.icon {
background-color: var(--white);
box-shadow: var(--light-shadow);
}
@media screen and (max-width: 1023px) {
reservations-list .listContent .reservationListItem {
grid-template-columns: max-content 1fr;
grid-template-rows: max-content 1fr;
grid-template-areas: "time tags tags" "name name status";
padding: 8px;
grid-gap: 16px 8px;
border-radius: var(--large-border-radius);
align-items: center;
justify-content: space-between;
position: relative;
}
reservations-list .listContent .reservationListItem .reservationTime {
width: 60px;
border-radius: var(--large-border-radius);
text-align: center;
padding: 4px 8px;
margin-left: 0;
grid-area: time;
}
reservations-list .listContent .reservationListItem .name {
padding: 0;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
grid-area: name;
font-size: 14px;
font-weight: 600;
margin-left: 4px;
}
reservations-list .listContent .reservationListItem .tags {
display: flex;
flex-direction: row-reverse;
gap: 8px;
align-items: center;
justify-content: start;
min-width: 0;
grid-area: tags;
}
reservations-list .listContent .reservationListItem .tags .date {
justify-self: end;
flex-shrink: 0;
flex-grow: 1;
margin-right: 4px;
color: var(--dark);
}
reservations-list .listContent .reservationListItem .tags .date + hr {
display: none;
}
reservations-list .listContent .reservationListItem .status {
align-items: center;
gap: 4px;
padding: 4px 16px;
border-radius: var(--large-border-radius);
justify-self: end;
grid-area: status;
}
reservations-list .listContent .reservationListItem:before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: var(--lighter);
position: absolute;
left: 0;
top: calc(50% - 0.5px);
}
}
reservations-list .listContent .reservationListItem[data-status=late] .reservationTime {
background-color: var(--mid);
color: var(--white);
}
reservations-list .listContent .reservationListItem[data-status=late] .status {
background-color: var(--mid);
color: var(--white);
}
reservations-list .listContent .reservationListItem[data-status=confirmed] .reservationTime {
background-color: var(--lighter);
color: var(--dark);
}
reservations-list .listContent .reservationListItem[data-status=confirmed] .status {
background-color: var(--lighter);
color: var(--dark);
}
reservations-list .listContent .reservationListItem[data-status=confirmed] .status i.icon {
background-color: var(--dark);
}
reservations-list .listContent .reservationListItem[data-status=pending] .reservationTime {
background-image: var(--sunrise);
color: var(--white);
}
reservations-list .listContent .reservationListItem[data-status=pending] .status {
background-image: var(--sunrise);
color: var(--white);
}
reservations-list .listContent .reservationListItem[data-status=arrived] .reservationTime {
background-color: var(--lighter);
color: var(--light);
}
reservations-list .listContent .reservationListItem[data-status=arrived] .status {
background-color: var(--lighter);
color: var(--light);
}
reservations-list .listContent .reservationListItem[data-status=arrived] .status i.icon {
background-color: var(--light);
}
reservations-list .listContent .reservationListItem[data-status=cancelled], reservations-list .listContent .reservationListItem[data-status=rejected] {
background-color: var(--ultralight);
}
reservations-list .listContent .reservationListItem[data-status=cancelled] .reservationTime, reservations-list .listContent .reservationListItem[data-status=rejected] .reservationTime {
background-color: var(--ultralight);
color: var(--light);
}
reservations-list .listContent .reservationListItem[data-status=cancelled] .status, reservations-list .listContent .reservationListItem[data-status=rejected] .status {
background-color: var(--ultralight);
color: var(--tangerine);
}
reservations-list .listContent .reservationListItem[data-status=cancelled] .status i.icon, reservations-list .listContent .reservationListItem[data-status=rejected] .status i.icon {
background-color: var(--tangerine);
}
reservations-list .listContent .reservationListItem[data-status=cancelled] .tags, reservations-list .listContent .reservationListItem[data-status=rejected] .tags {
color: var(--light);
}
reservations-list .listContent .reservationListItem[data-status=cancelled] i.icon, reservations-list .listContent .reservationListItem[data-status=rejected] i.icon {
background-color: var(--light);
}
@media screen and (max-width: 1023px) {
reservations-list .listContent .reservationListItem[data-status=cancelled] .status, reservations-list .listContent .reservationListItem[data-status=rejected] .status {
background-color: var(--white);
}
reservations-list .listContent .reservationListItem[data-status=cancelled] .reservationTime, reservations-list .listContent .reservationListItem[data-status=rejected] .reservationTime {
color: var(--tangerine);
background-color: var(--white);
}
reservations-list .listContent .reservationListItem[data-status=cancelled] .name, reservations-list .listContent .reservationListItem[data-status=rejected] .name {
color: var(--light);
}
}
reservations-list .listContent .reservationListItem[data-status=message] .reservationTime {
background-image: var(--midnight);
color: var(--white);
}
reservations-list .listContent .reservationListItem[data-status=message] .status {
background-image: var(--midnight);
color: var(--white);
}
reservations-list .listContent .reservationListItem.active {
cursor: default;
background-color: var(--dark);
color: var(--white);
}
reservations-list .listContent .reservationListItem.active i.icon {
background-color: var(--white);
}
reservations-list .listContent .reservationListItem.active .reservationTime {
background-image: var(--ceramic);
color: var(--dark);
}
reservations-list .listContent .reservationListItem.active .tags .date {
color: var(--white);
}
reservations-list .listContent .reservationListItem.active .status {
background-image: var(--ceramic);
color: var(--dark);
}
reservations-list .listContent .reservationListItem.active .status i.icon {
background-color: var(--dark);
}
reservations-list .listContent .reservationListItem.removing {
opacity: 0;
transform: translateY(-16px);
}
reservations-list .listContent .reservationListItem.notCalledIn {
opacity: 0;
transform: translateY(16px);
}
reservations-list .listHeader {
display: grid;
grid-template-columns: max-content 1fr;
border-radius: var(--small-border-radius);
align-items: center;
padding: 4px 0;
position: sticky;
background-color: var(--translucent-white);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--light-shadow);
backdrop-filter: blur(8px);
transition: var(--main-transition-duration) var(--transition-timing-function);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
@media screen and (max-width: 1023px) {
reservations-list .listHeader {
top: 16px;
box-shadow: none;
border-radius: var(--large-border-radius);
}
reservations-list .listHeader.stuck {
box-shadow: var(--card-shadow);
z-index: 2;
}
}
@media screen and (min-width: 1024px) {
reservations-list .listHeader {
top: var(--header-gap);
z-index: 2;
}
}
reservations-list .listHeader .listFilters {
display: flex;
justify-content: flex-end;
padding: 8px 0;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-list .listHeader .listFilters .appliedFilters {
display: flex;
gap: 4px;
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter {
display: grid;
grid-template-columns: 8px 1fr;
grid-gap: 4px;
align-items: center;
box-shadow: var(--light-shadow);
border-radius: var(--large-border-radius);
padding: 0 8px;
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter i.icon {
width: 8px;
height: 8px;
mask-size: contain;
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=confirmed] {
background-image: var(--nightfall);
color: var(--white);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=confirmed] i.icon {
background-color: var(--white);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=pending] {
background-image: var(--sunrise);
color: var(--white);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=pending] i.icon {
background-color: var(--white);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=message] {
background-image: var(--midnight);
color: var(--white);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=message] i.icon {
background-color: var(--white);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=cancelled] {
background-color: var(--ultralight);
color: var(--tangerine);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=cancelled] i.icon {
background-color: var(--tangerine);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=arrived] {
background-color: var(--lighter);
color: var(--dark);
}
reservations-list .listHeader .listFilters .appliedFilters .appliedFilter[data-filter-id=arrived] i.icon {
background-color: var(--dark);
}
reservations-list .listHeader .listFilters p {
color: var(--light);
text-align: center;
padding-right: 16px;
padding-left: 8px;
transition: var(--main-transition-duration) var(--transition-timing-function);
height: 21px;
display: grid;
align-items: center;
}
reservations-list .listHeader time.listClock {
display: grid;
align-items: center;
width: 60px;
text-align: center;
color: var(--dark);
padding: 4px 8px;
font-weight: 600;
box-sizing: content-box;
height: 100%;
border-radius: var(--small-border-radius) 0 0 var(--small-border-radius);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
@media screen and (max-width: 1023px) {
reservations-list .listHeader time.listClock {
padding: 4px 8px;
}
}
reservations-list .listHeader.active p {
color: var(--dark);
}
@media screen and (max-width: 1023px) {
reservations-list .listHeader.active .appliedFilters {
padding: 0 8px;
gap: 8px;
}
reservations-list .listHeader.active .appliedFilters .appliedFilter {
padding: 4px 8px;
}
reservations-list .listHeader.active p {
display: none;
}
}
reservations-list .listHeader.pendingListHeader, reservations-list .listHeader.unreadListHeader {
grid-template-columns: 1fr;
}
reservations-list .listHeader.pendingListHeader .listFilters, reservations-list .listHeader.unreadListHeader .listFilters {
width: 100%;
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: 8px;
padding: 4px 8px;
align-items: center;
}
reservations-list .listHeader.pendingListHeader .listFilters button, reservations-list .listHeader.unreadListHeader .listFilters button {
padding: 4px 8px;
}
@media screen and (max-width: 1023px) {
reservations-list .listHeader.pendingListHeader .listFilters button, reservations-list .listHeader.unreadListHeader .listFilters button {
border-radius: var(--large-border-radius);
}
}
reservations-list .listHeader.pendingListHeader .listFilters p.labelText, reservations-list .listHeader.unreadListHeader .listFilters p.labelText {
text-align: right;
padding: 0;
padding-right: 8px;
color: var(--white);
}
reservations-list .listHeader.pendingListHeader {
background-image: var(--sunrise);
}
reservations-list .listHeader.unreadListHeader {
background-image: var(--midnight);
}
@media screen and (max-width: 1023px) {
.iPhone reservations-list {
padding-bottom: 80px;
}
.iPhone reservations-list .listHeader {
top: 64px;
}
}
reservations-utility {
display: grid;
grid-template-rows: 1fr;
grid-gap: 8px;
width: 100%;
height: 100%;
}
@media screen and (max-width: 1023px) {
reservations-utility {
padding-bottom: 16px;
}
}
@media screen and (min-width: 1024px) {
reservations-utility {
position: absolute;
top: var(--header-gap);
}
}
reservations-utility .utilityPanelHeader {
display: grid;
align-content: start;
grid-gap: 8px;
}
reservations-utility .utilityPanelHeader .bullets {
display: none;
grid-template-columns: max-content max-content;
align-content: center;
justify-content: end;
padding: 0 4px;
grid-gap: 2px;
position: sticky;
left: 0;
right: 0;
z-index: 1;
}
reservations-utility .utilityPanelHeader .bullets .bullet {
width: 4px;
height: 4px;
background-image: var(--ceramic);
box-shadow: var(--light-shadow);
border-radius: var(--large-border-radius);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .utilityPanelHeader .bullets .bullet.active {
width: 16px;
}
reservations-utility[type=today] .utilityPanelHeader {
grid-template-rows: minmax(auto, 180px) max-content;
}
reservations-utility .precipitationWidget {
height: 100%;
grid-template-rows: max-content 1fr;
}
reservations-utility .precipitationWidget .hours {
display: flex;
height: 100%;
justify-content: space-between;
position: relative;
}
reservations-utility .precipitationWidget .hours:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 16px;
left: 0;
border-radius: var(--large-border-radius);
background-color: var(--lighter);
}
reservations-utility .precipitationWidget .hours .hour {
display: grid;
grid-template-rows: max-content 1fr max-content;
width: 100%;
text-align: center;
justify-items: center;
grid-gap: 4px;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .precipitationWidget .hours .hour time {
color: var(--light);
}
reservations-utility .precipitationWidget .hours .hour .reservationCount {
margin-top: 4px;
color: var(--dark);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .precipitationWidget .hours .hour .reservationTube {
display: grid;
align-items: end;
min-height: 40px;
max-width: 8px;
width: 100%;
border-radius: var(--large-border-radius);
background-color: var(--ultralight);
}
reservations-utility .precipitationWidget .hours .hour .reservationTube .reservationAmount {
background-image: var(--nightfall);
min-height: 8px;
box-shadow: var(--card-shadow);
border-radius: var(--large-border-radius);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .precipitationWidget .hours .hour.past {
opacity: 0.5;
}
reservations-utility .precipitationWidget .hours .hour.past .reservationCount {
color: var(--light);
}
reservations-utility .precipitationWidget .hours .hour.past .reservationTube .reservationAmount {
filter: saturate(0);
opacity: 0.5;
box-shadow: none;
}
reservations-utility .reservationCounterWidget .widgetContent {
display: flex;
align-content: space-between;
grid-gap: 4px;
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube {
display: grid;
grid-gap: 4px;
min-width: 4px;
max-width: calc(100% - 8px);
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube p {
white-space: nowrap;
width: 4px;
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube:after {
content: "";
display: block;
width: 100%;
height: 4px;
border-radius: var(--large-border-radius);
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube.arrivedReservations {
color: var(--light);
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube.arrivedReservations:after {
background-color: var(--light);
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube.upcomingReservations {
color: var(--cobalt);
text-align: right;
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube.upcomingReservations p {
display: grid;
justify-content: end;
justify-self: end;
}
reservations-utility .reservationCounterWidget .widgetContent .reservationsTube.upcomingReservations:after {
background-image: var(--nightfall);
box-shadow: var(--card-shadow);
}
reservations-utility .reservationCounterWidget .widgetContent + .filterContent {
margin-top: 8px;
}
reservations-utility .datePickerWidget {
padding: 16px;
overflow: hidden;
}
reservations-utility .datePickerWidget date-picker {
padding: 0;
}
reservations-utility .datePickerWidget date-picker .datePickerHeader {
margin-top: -8px;
margin-bottom: 8px;
}
reservations-utility .datePickerWidget date-picker .datePickerHeader p, reservations-utility .datePickerWidget date-picker .datePickerHeader p span {
font-size: 18px;
font-weight: 500;
text-shadow: var(--heavy-text-shadow);
}
reservations-utility .datePickerWidget date-picker .dates .days .day {
display: grid;
height: 40px;
align-items: center;
}
reservations-utility .datePickerWidget date-picker .dates .days .day .dayName {
display: block;
position: relative;
transform: none;
transition: transform var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .datePickerWidget date-picker .dates .days .day .reservationCount {
display: inline-block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
opacity: 0;
font-weight: 400;
color: var(--dark);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .datePickerWidget date-picker .dates .days .day.hasCounter .dayName {
transform: translateY(-4px);
}
reservations-utility .datePickerWidget date-picker .dates .days .day.hasCounter .reservationCount {
transform: translateY(-4px);
opacity: 1;
}
reservations-utility .datePickerWidget date-picker .dates .days .day.hasCounter .reservationCount.empty {
color: var(--light);
}
reservations-utility .datePickerWidget date-picker .dates .days .day.hasCounter.picked .dayName {
transform: none;
}
reservations-utility .datePickerWidget date-picker .dates .days .day.hasCounter.picked .reservationCount {
transform: none;
opacity: 0;
}
reservations-utility .statusFilters {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 16px 8px;
}
reservations-utility .statusFilters .statusFilter {
display: flex;
gap: 4px;
align-content: center;
cursor: pointer;
align-items: center;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .statusFilters .statusFilter .statusFilterIndicator {
display: grid;
align-self: center;
align-items: center;
align-content: center;
justify-content: center;
height: 8px;
width: 16px;
box-shadow: var(--card-shadow);
border-radius: var(--large-border-radius);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservations-utility .statusFilters .statusFilter .statusFilterIndicator i.icon {
background-color: var(--white);
align-self: center;
transition: var(--main-transition-duration) var(--transition-timing-function);
transform: rotate(45deg) scale(0.2);
opacity: 0;
}
reservations-utility .statusFilters .statusFilter .statusName {
color: var(--dark);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
@media screen and (max-width: 1023px) {
reservations-utility .statusFilters .statusFilter .statusName {
font-size: 12px;
}
}
reservations-utility .statusFilters .statusFilter:active .statusFilterIndicator {
transition: 0.1s var(--transition-timing-function);
box-shadow: none;
}
reservations-utility .statusFilters .statusFilter.active .statusName {
font-weight: 600;
}
reservations-utility .statusFilters .statusFilter.active .statusFilterIndicator {
height: 16px;
}
reservations-utility .statusFilters .statusFilter.active .statusFilterIndicator i.icon {
transform: scale(0.5);
opacity: 1;
}
reservations-utility .statusFilters .statusFilter[data-status-name=confirmed] .statusFilterIndicator {
background-image: var(--nightfall);
}
reservations-utility .statusFilters .statusFilter[data-status-name=pending] .statusFilterIndicator {
background-image: var(--sunrise);
}
reservations-utility .statusFilters .statusFilter[data-status-name=message] .statusFilterIndicator {
background-image: var(--midnight);
}
reservations-utility .statusFilters .statusFilter[data-status-name=cancelled] .statusName {
color: var(--tangerine);
}
reservations-utility .statusFilters .statusFilter[data-status-name=cancelled] .statusFilterIndicator {
background-color: var(--ultralight);
}
reservations-utility .statusFilters .statusFilter[data-status-name=cancelled] .statusFilterIndicator i.icon {
background-color: var(--tangerine);
}
reservations-utility .statusFilters .statusFilter[data-status-name=arrived] .statusFilterIndicator {
background-color: var(--lighter);
}
reservations-utility .statusFilters .statusFilter[data-status-name=arrived] .statusFilterIndicator i.icon {
background-color: var(--dark);
}
reservations-utility .statusFilters .statusFilter[data-count="0"] {
opacity: 0.5;
filter: saturate(0.5);
cursor: default;
}
reservations-utility .utilityPanelFooter {
display: grid;
align-items: end;
}
reservations-utility .utilityPanelFooter .utilityPanelActions {
display: grid;
padding: 16px;
background-image: var(--ceramic);
border-radius: var(--large-border-radius);
box-shadow: var(--light-shadow);
grid-gap: 16px;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
}
@media screen and (max-width: 1023px) {
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators {
grid-gap: 8px;
}
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator {
display: grid;
grid-template-columns: max-content 1fr max-content;
align-content: center;
align-items: center;
box-shadow: var(--light-shadow);
padding: 16px;
border-radius: var(--small-border-radius);
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
@media screen and (min-width: 1024px) {
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator:hover {
box-shadow: var(--button-shadow);
}
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator:active {
filter: brightness(0.9);
transition: 0.1s var(--transition-timing-function);
box-shadow: none;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator h1 {
min-width: 24px;
margin-right: 16px;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator .indicatorName {
margin-right: 4px;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator .indicatorIcon {
display: grid;
align-items: center;
justify-content: center;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator .indicatorIcon i.icon {
width: 21px;
height: 21px;
mask-size: contain;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator.pendingRequestIndicator {
color: var(--white);
background-image: var(--sunrise);
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator.pendingRequestIndicator i.icon {
background-color: var(--white);
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator.unreadMessageIndicator {
color: var(--white);
background-image: var(--midnight);
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator.unreadMessageIndicator i.icon {
background-color: var(--white);
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator.empty.empty {
background-image: none;
background-color: var(--light);
opacity: 0.5;
box-shadow: none;
cursor: default;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator.empty.empty:hover {
box-shadow: none;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator.empty.empty:active {
filter: none;
box-shadow: none;
}
@media screen and (max-width: 1023px) {
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator {
padding: 0 8px;
grid-template-columns: max-content max-content;
justify-content: center;
grid-gap: 4px;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator .indicatorName {
display: none;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator .indicatorIcon i.icon {
width: 16px;
height: 16px;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .indicators .indicator h1.bigHeading {
min-width: 16px;
font-size: 16px;
font-weight: 400;
text-align: center;
margin-right: 0;
}
}
reservations-utility .utilityPanelFooter .utilityPanelActions .quickActions {
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: 16px;
}
@media screen and (max-width: 1023px) {
reservations-utility .utilityPanelFooter .utilityPanelActions .quickActions {
grid-template-columns: 1fr 1fr;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .quickActions orin-button#printButton {
display: none;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .quickActions orin-button#newReservationButton {
grid-column: span 2;
}
reservations-utility .utilityPanelFooter .utilityPanelActions .quickActions orin-button button .buttonText {
font-weight: 500;
font-size: 14px !important;
padding-left: 0;
}
}
@media screen and (max-width: 1023px) {
reservations-utility .utilityPanelFooter .utilityPanelActions {
grid-template-columns: max-content 1fr;
grid-gap: 8px;
box-shadow: none;
background-image: none;
border-radius: var(--small-border-radius);
background-color: var(--white);
}
}
@media screen and (max-width: 1023px) {
reservations-utility .utilityPanelFooter {
grid-row: 1;
margin-top: 16px;
z-index: 0;
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
}
}
reservations-utility .utilityPanelFooter.disabled {
display: none;
}
@media screen and (max-width: 1023px) {
reservations-utility[type=today] .utilityPanelHeader {
grid-template-rows: auto;
position: relative;
left: -16px;
width: calc(100% + 32px);
padding: 40px 16px;
margin: -16px 0 -32px;
overflow-x: scroll;
grid-template-columns: 100% 100%;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
reservations-utility[type=today] .utilityPanelHeader .bullets {
display: grid;
}
reservations-utility[type=today] .utilityPanelHeader .widget {
scroll-snap-align: center;
box-shadow: var(--large-light-shadow);
min-height: 200px;
align-content: space-between;
}
reservations-utility[type=today].pendingUnread .utilityPanelHeader {
height: 0;
padding: 0;
}
reservations-utility[type=today] .reservationCounterWidget {
display: grid;
}
}
@media screen and (min-width: 1024px) {
reservations-utility[type=upcoming] .utilityPanelFooter .utilityPanelActions .indicators, reservations-utility[type=previous] .utilityPanelFooter .utilityPanelActions .indicators {
display: none;
}
}
reservation-panel.controlPanel.dashboardColumn {
align-content: start;
grid-template-rows: max-content max-content 1fr;
grid-gap: 16px;
box-shadow: var(--large-light-shadow);
transition: var(--main-transition-duration) var(--transition-timing-function);
max-height: calc(100vh - var(--header-gap) - var(--footer-gap));
}
@media screen and (max-width: 1023px) {
reservation-panel.controlPanel.dashboardColumn {
max-height: calc(100vh - 160px);
}
}
reservation-panel.controlPanel.dashboardColumn .reservationDetail {
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: 4px;
}
reservation-panel.controlPanel.dashboardColumn .reservationDetail .detailHeading {
grid-column: span 2;
}
reservation-panel.controlPanel.dashboardColumn .reservationDetail i.icon {
background-color: var(--white);
}
reservation-panel.controlPanel.dashboardColumn .reservationDetail.reverse {
align-self: end;
text-align: right;
grid-template-columns: 1fr max-content;
}
reservation-panel.controlPanel.dashboardColumn .reservationDetail.reverse .detailHeading {
grid-row: 1;
}
reservation-panel.controlPanel.dashboardColumn .reservationDetail.reverse .detailText {
grid-row: 2;
grid-column: 1;
}
reservation-panel.controlPanel.dashboardColumn .reservationDetail.reverse i.icon {
grid-row: 2;
grid-column: 2;
}
reservation-panel.controlPanel.dashboardColumn .reservationContent {
display: grid;
grid-gap: 16px;
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges {
display: grid;
grid-template-columns: 1fr max-content;
grid-gap: 8px;
align-items: center;
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables {
display: flex;
flex-wrap: wrap;
gap: 8px;
transition: var(--main-transition-duration) var(--transition-timing-function);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable {
background-color: var(--dark);
display: flex;
gap: 4px;
align-items: center;
padding: 4px 8px;
border: 1px solid var(--mid);
box-shadow: var(--card-shadow);
border-radius: var(--small-border-radius);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable[data-reservation-action] {
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable[data-reservation-action]:active {
transition: 0.15s var(--transition-timing-function);
transform: scale(0.98);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable.noTable {
cursor: pointer;
gap: 8px;
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable.noTable .tableName {
max-width: unset;
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable.disabled {
box-shadow: none;
opacity: 0.5;
border: 0;
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable i.icon {
background-color: var(--white);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .tables .reservationTable .tableName {
white-space: nowrap;
max-width: 75px;
overflow: hidden;
text-overflow: ellipsis;
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .status {
padding: 8px 16px;
border-radius: var(--large-border-radius);
background-color: var(--white);
color: var(--dark);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .status[data-status=late] {
background-color: var(--mid);
color: var(--white);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .status[data-status=confirmed] {
background-color: var(--lighter);
color: var(--dark);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .status[data-status=pending] {
background-image: var(--sunrise);
color: var(--white);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .status[data-status=arrived] {
background-color: var(--lighter);
color: var(--dark);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .status[data-status=cancelled] {
background-color: var(--ultralight);
color: var(--tangerine);
}
reservation-panel.controlPanel.dashboardColumn .reservationBadges .status[data-status=message] {
background-color: var(--darker);
background-image: var(--midnight);
color: var(--white);
box-shadow: 0 0 0 1px var(--white);
}
reservation-panel.controlPanel.dashboardColumn .customerDetails {
display: grid;
padding: 8px;
border-radius: var(--small-border-radius);
border: 1px solid var(--mid);
box-shadow: var(--card-shadow);
grid-template-rows: 1fr 1fr;
grid-gap: 16px;
position: relative;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-panel.controlPanel.dashboardColumn .customerDetails .customerDetailsRow:nth-child(1) {
display: grid;
grid-template-columns: 1fr 1fr;
}
reservation-panel.controlPanel.dashboardColumn .customerDetails .customerDetailsRow:nth-child(2) {
display: grid;
grid-template-columns: 1fr max-content;
grid-gap: 8px;
}
reservation-panel.controlPanel.dashboardColumn .customerDetails:before {
content: "";
width: calc(100% - 16px);
height: 1px;
background-color: var(--mid);
border-radius: var(--large-border-radius);
position: absolute;
left: 8px;
top: 50%;
}
reservation-panel.controlPanel.dashboardColumn .customerDetails.noEmail {
grid-template-rows: 1fr;
}
reservation-panel.controlPanel.dashboardColumn .customerDetails.noEmail .customerDetailsRow:last-child {
display: none;
}
reservation-panel.controlPanel.dashboardColumn .customerDetails.noEmail:before {
display: none;
}
reservation-panel.controlPanel.dashboardColumn .reservationNotes {
padding: 8px;
display: grid;
border-radius: var(--small-border-radius);
border: 1px solid var(--mid);
box-shadow: var(--card-shadow);
grid-gap: 16px;
position: relative;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-panel.controlPanel.dashboardColumn .reservationNotes .reservationDetail {
grid-template-columns: 1fr;
}
reservation-panel.controlPanel.dashboardColumn .reservationNotes hr {
margin: 0;
}
reservation-panel.controlPanel.dashboardColumn .reservationNotes .noteActions {
display: grid;
grid-gap: 8px;
}
reservation-panel.controlPanel.dashboardColumn .reservationNotes .noteActions .replyToNote {
text-align: right;
text-decoration: underline;
opacity: 0.25;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions {
display: grid;
grid-gap: 8px;
align-self: end;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow {
display: flex;
gap: 8px;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button {
width: 100%;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button[data-reservation-action=cancel], reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button[data-reservation-action=charge], reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button[data-reservation-action=refunded], reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button[data-reservation-action=refund], reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button[data-reservation-action=reply] {
width: auto;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button[data-reservation-action=cancel] button .buttonText {
padding-left: 0;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow orin-button[data-reservation-action=cancel] button i.icon {
background-color: var(--tangerine);
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow.latestMessageView {
flex-direction: column;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow.latestMessageView .dotdotdot {
letter-spacing: 4px;
margin: 4px 8px;
margin-bottom: 0;
writing-mode: vertical-lr;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow.paymentRow {
display: grid !important;
grid-template-columns: 1fr max-content;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow.paymentRow orin-button {
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationActionRow.paymentRow + .refundInfo {
opacity: 0.5;
text-align: right;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions hr {
margin: 0;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationInfo {
width: 100%;
text-align: center;
padding: 32px;
font-weight: 400;
}
reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationInfo.smallText {
padding: 16px;
font-style: italic;
opacity: 0.5;
}
reservation-panel.controlPanel.dashboardColumn *[data-reservation-action] {
cursor: pointer;
}
reservation-panel.controlPanel.dashboardColumn .notCalledIn {
transform: translateY(16px);
opacity: 0;
}
reservation-panel.controlPanel.dashboardColumn .calledOut {
transform: translateY(-16px);
opacity: 0;
}
@media screen and (max-width: 1023px) {
reservation-panel.controlPanel.dashboardColumn.notLoaded.notLoaded.notLoaded.notLoaded {
transition: 999s;
transform: translateY(100%);
}
reservation-panel.controlPanel.dashboardColumn.notLoaded.notLoaded.notLoaded.notLoaded.loading.loading.loading.loading {
transition: var(--main-transition-duration) var(--transition-timing-function);
transform: translateY(calc(100% - 192px));
}
reservation-panel.controlPanel.dashboardColumn.notLoaded.notLoaded.notLoaded.notLoaded.loading.loading.loading.loading > *:not(orin-loader) {
opacity: 0;
}
reservation-panel.controlPanel.dashboardColumn orin-loader {
top: 64px;
}
}
@media screen and (max-width: 1023px) {
.iPhone reservation-panel.controlPanel.dashboardColumn {
padding-bottom: 64px;
}
.iPhone reservation-panel.controlPanel.dashboardColumn .reservationActions .reservationInfo.labelText {
padding-bottom: 0;
}
.iPhone reservation-panel.controlPanel.dashboardColumn .askConfirmation {
bottom: 64px;
}
}
reservation-editor.controlPanel {
align-content: start;
grid-gap: 32px;
box-shadow: var(--large-light-shadow);
overflow-x: hidden;
}
reservation-editor.controlPanel .addDetailsBubble {
display: none;
}
reservation-editor.controlPanel.addingMoreDetails .addDetailsBubble {
display: grid;
grid-gap: 16px;
}
reservation-editor.controlPanel.addingMoreDetails orin-button[action=addMoreDetailsToReservation] {
display: none;
}
reservation-messages.controlPanel.dashboardColumn {
align-content: start;
grid-template-rows: max-content 1fr;
grid-gap: 16px;
box-shadow: var(--large-light-shadow);
}
reservation-messages.controlPanel.dashboardColumn .messagesContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: 100%;
background-color: var(--black);
border-radius: var(--large-border-radius);
padding: 16px;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList {
display: grid;
grid-gap: 8px;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow {
display: grid;
grid-gap: 4px;
justify-content: start;
text-align: left;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow.notCalledIn {
transform: translateY(16px);
opacity: 0;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow .message {
max-width: 80%;
padding: 8px 16px;
background-color: var(--dark);
border-radius: var(--large-border-radius);
box-sizing: content-box;
position: relative;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow .message:before {
content: "";
display: block;
position: absolute;
bottom: -2px;
width: 16px;
height: 12px;
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow .messageDetails {
max-width: 80%;
padding: 0 8px;
white-space: nowrap;
opacity: 0.25;
display: flex;
align-items: baseline;
gap: 4px;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow .messageDetails .dateTime {
font-weight: 400;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow.fromCustomer {
justify-content: start;
justify-items: start;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow.fromCustomer .message:before {
left: -6px;
background-color: var(--dark);
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow.fromShop {
justify-content: end;
justify-items: end;
text-align: right;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow.fromShop .messageDetails {
justify-content: end;
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow.fromShop .message {
background-color: var(--lighter);
color: var(--black);
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .messageRow.fromShop .message:before {
transform: scale(-1, 1);
right: -6px;
background-color: var(--lighter);
}
reservation-messages.controlPanel.dashboardColumn .messagesContent .messagesList .shopInitiatedIndicator {
margin-bottom: 32px;
width: 100%;
text-align: center;
opacity: 0.25;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper {
display: grid;
position: relative;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper input-wrapper {
max-height: 0;
overflow: hidden;
transition: var(--main-transition-duration) var(--transition-timing-function);
box-shadow: var(--card-shadow);
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper input-wrapper .inputWrapper {
margin-top: 0;
background-color: transparent;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper input-wrapper .inputWrapper:before, reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper input-wrapper .inputWrapper:after {
display: none;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper input-wrapper .inputWrapper textarea {
transition: var(--main-transition-duration) var(--transition-timing-function);
opacity: 0;
transform: translateY(8px) scale(0);
background-color: var(--white);
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper input-wrapper .inputWrapper .aiMark {
transition: calc(var(--main-transition-duration) * 0.5) var(--transition-timing-function);
opacity: 0;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper input-wrapper .inputWrapper .aiButton {
opacity: 0;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper .replyActions {
display: grid;
grid-template-columns: 1fr max-content;
grid-gap: 8px;
position: relative;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper .replyActions .pseudoInput {
padding: 16px;
height: 100%;
display: grid;
align-content: center;
align-items: center;
background-color: var(--darker);
border-radius: var(--small-border-radius);
box-shadow: inset 0 0 2px var(--darker);
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper .replyActions .pseudoInput .pseudoPlaceholder {
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
color: var(--light);
opacity: 0.25;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper .replyActions .pseudoInput.hasValue .pseudoPlaceholder {
color: var(--white);
opacity: 1;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper .replyActions .pseudoInput.sending {
transform: scale(0.9);
opacity: 0.8;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper .replyActions .pseudoInput.sent {
transform: translateY(-8px) scale(0.9);
opacity: 0;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper .replyActions .pseudoInput.cleaning {
transition: 0s;
transform: translateY(8px);
opacity: 0;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper:focus-within input-wrapper, reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper.writingAiReply input-wrapper {
max-height: 162px;
margin-bottom: 8px;
overflow: hidden;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper:focus-within input-wrapper textarea, reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper.writingAiReply input-wrapper textarea {
opacity: 1;
transform: none;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper:focus-within input-wrapper .aiMark, reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper.writingAiReply input-wrapper .aiMark {
transition-delay: var(--main-transition-duration);
opacity: 1;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper:focus-within input-wrapper .aiButton.active, reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper.writingAiReply input-wrapper .aiButton.active {
opacity: 1;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper:focus-within .replyActions .pseudoInput, reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper.writingAiReply .replyActions .pseudoInput {
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper orin-button {
height: 100%;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper orin-button .buttonText {
padding-left: 0;
transition: none;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper orin-button button {
height: 100%;
}
reservation-messages.controlPanel.dashboardColumn .messagesFooter .replyWrapper orin-button[disabled] {
opacity: 0.5;
filter: contrast(0.5);
}
reservation-messages.controlPanel.dashboardColumn .notCalledIn {
transform: translateY(16px);
opacity: 0;
}
reservation-messages.controlPanel.dashboardColumn .calledOut {
transform: translateY(-16px);
opacity: 0;
}
table-editor {
align-content: start;
grid-template-rows: max-content 1fr max-content;
grid-gap: 16px;
}
table-editor .editableTable {
display: flex;
gap: 4px;
color: var(--white);
align-items: center;
padding: 4px 8px;
box-shadow: inset 0 0 0 1px var(--mid), var(--card-shadow);
border-radius: var(--small-border-radius);
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
table-editor .editableTable:active {
transition: 0.15s var(--transition-timing-function);
transform: scale(0.98);
}
table-editor .editableTable .tableCapacity {
text-align: right;
}
table-editor .editableTable i.icon {
background-color: var(--white);
}
table-editor .editableTable .tableName {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table-editor .editableTable.notCalledIn {
transform: translateX(4px);
opacity: 0;
}
table-editor .editableTable.calledOut {
transform: translateX(-4px);
opacity: 0;
}
table-editor .tablesContent {
display: grid;
grid-gap: 16px;
align-content: start;
grid-template-rows: max-content max-content 1fr;
}
table-editor .tablesContent .tableListWrapper {
display: grid;
grid-gap: 8px;
align-content: start;
grid-template-rows: max-content 1fr;
}
table-editor .tablesContent .tableListWrapper .tableList {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
padding: 8px;
background-color: var(--dark);
border-radius: var(--small-border-radius);
min-height: 42.5px;
position: relative;
z-index: 1;
}
table-editor .tablesContent .tableListWrapper .tableList .listEmptyText {
content: "-";
position: absolute;
font-size: 12px;
font-style: italic;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
padding: 0 32px;
text-align: center;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: calc(var(--main-transition-duration)) var(--transition-timing-function);
}
table-editor .tablesContent .tableListWrapper .tableList.empty .listEmptyText {
opacity: 1;
}
table-editor .tablesContent hr {
margin: 0;
}
table-editor .tableEditorFooter {
align-self: end;
display: grid;
grid-gap: 16px;
}
table-editor .tableEditorFooter .tableEditorHelperText {
text-align: center;
}
@media print {
body {
background-color: #ffffff;
}
orin-dashboard[page=reservations] {
padding: 16px;
padding-top: 32px;
}
orin-dashboard[page=reservations] header {
display: none;
}
orin-dashboard[page=reservations] footer {
display: none;
}
orin-dashboard[page=reservations] dashboard-column {
height: auto;
}
orin-dashboard[page=reservations] dashboard-column[column="0"] {
grid-row: 2;
}
orin-dashboard[page=reservations] dashboard-column [column="1"] {
grid-row: 1;
padding-top: 20px;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility {
display: block;
height: auto;
max-height: 250px;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .utilityPanelFooter {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .widget .widgetHeader h1 {
text-shadow: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .datePickerWidget date-picker .datePickerHeader {
display: block;
margin-top: 0;
margin-bottom: 0;
text-align: left;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .datePickerWidget date-picker .datePickerHeader .button {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .datePickerWidget date-picker .datePickerHeader p.dateText {
font-size: 24px;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .datePickerWidget date-picker .dates {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .reservationCounterWidget .widgetContent {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .reservationCounterWidget .filterContent {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .utilityPanelHeader {
display: block;
margin-bottom: 0;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .precipitationWidget {
display: block;
}
orin-dashboard[page=reservations] dashboard-column reservations-utility .precipitationWidget .widgetContent {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listHeader {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent {
grid-gap: 0;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem {
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid var(--black);
border-radius: 0;
padding: 4px 0;
grid-template-columns: max-content max-content minmax(96px, 1fr) max-content;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .status {
min-width: 80px;
padding: 0;
text-align: right;
background-color: transparent;
background-image: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .status i.icon {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .status p.labelText {
width: 100%;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .reservationTime {
background-image: none;
padding: 0;
width: 60px;
text-align: left;
color: var(--black);
background-color: transparent;
margin: 0;
padding-right: 16px;
margin-right: 8px;
border-radius: 0;
border-right: 1px solid var(--black);
font-size: 14px;
font-weight: 800;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags hr {
background-color: var(--dark);
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags .partySize {
color: var(--black);
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags .partySize i.icon {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags .partySize:before {
content: "Party size:";
font-size: 12px;
font-weight: 600;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags i.icon.message {
width: auto;
color: var(--black);
font-size: 12px;
font-weight: 600;
font-style: normal;
mask-image: none;
background-color: transparent !important;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags i.icon.message:before {
content: "notes: ";
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags .singleLineNotes {
display: inline;
width: auto;
color: var(--black);
font-size: 12px;
font-weight: 600;
font-style: normal;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
mask-image: none;
background-color: transparent !important;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem .tags .date {
display: none;
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem[data-status=late] .status {
color: var(--mid);
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem[data-status=pending] .status {
color: var(--tangerine);
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem[data-status=upcoming] .status {
color: var(--black);
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem[data-status=arrived] .status {
color: var(--dark);
}
orin-dashboard[page=reservations] dashboard-column reservations-list .listContent .reservationListItem[data-status=unread] .status {
color: var(--black);
}
orin-dashboard[page=reservations] .widget {
background-color: transparent;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid var(--black);
padding: 0;
margin-bottom: 16px;
padding-bottom: 16px !important;
height: auto;
max-height: none;
}
orin-dashboard[page=reservations] .widget.reservationCounterWidget {
margin-bottom: 0 !important;
}
orin-dashboard[page=reservations] .widget.reservationCounterWidget .widgetHeader {
width: 100%;
display: block;
text-align: center;
}
orin-dashboard[page=reservations] .widget.reservationCounterWidget .widgetHeader h3 {
text-align: left !important;
text-shadow: none;
margin-top: 16px;
}
}
code-nest {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 500;
color: var(--black);
padding: 4px;
padding-left: 16px;
border-radius: var(--small-border-radius);
box-shadow: inset 0 0 8px 0px rgba(0, 0, 0, 0.4);
border: 1px solid var(--mid);
background-color: var(--white);
display: grid;
grid-template-columns: 1fr max-content;
max-width: 100%;
cursor: pointer;
}
code-nest pre {
margin: 0;
display: grid;
align-content: center;
}
code-nest code {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
code-nest orin-button button.tertiary.tertiary.tertiary {
padding: 8px;
}
code-nest orin-button button.tertiary.tertiary.tertiary i.icon {
background-color: var(--dark);
}
code-nest orin-button button.tertiary.tertiary.tertiary:active {
transform: scale(0.98);
}
body.customerScreen {
background-color: var(--black);
}
body.customerScreen .bgWrapper {
filter: saturate(0);
opacity: 0.5;
}
body.customerScreen customer-screen {
min-width: 100vw;
min-height: 100vh;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 16px;
position: relative;
justify-items: center;
}
body.customerScreen customer-screen:before {
content: "";
display: block;
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
background-image: var(--darker-gradient-vertical);
transition: var(--main-transition-duration) var(--transition-timing-function);
opacity: 0.5;
z-index: 0;
}
body.customerScreen customer-screen.notInitiated .customerScreenUtilities .shopSign, body.customerScreen customer-screen.notInitiated .customerScreenUtilities .backButton {
transform: translateY(8px);
opacity: 0;
}
body.customerScreen customer-screen .customerScreenUtilities {
display: flex;
width: 100%;
max-width: 420px;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 1023px) {
body.customerScreen customer-screen .customerScreenUtilities {
position: sticky;
top: 16px;
}
}
body.customerScreen customer-screen .customerScreenUtilities .backButton {
transition-delay: calc(var(--main-transition-duration) * 2);
}
body.customerScreen customer-screen .customerScreenUtilities .backButton:active {
transition: 0.1s var(--transition-timing-function);
transition-delay: 0s;
}
body.customerScreen customer-screen .customerScreenContent {
width: 100%;
max-width: 420px;
position: relative;
}
body.customerScreen customer-screen .customerScreenContent pill-box {
max-width: 420px;
min-height: calc(100vh - 160px);
}
body.customerScreen customer-screen .copyright {
width: 100%;
max-width: 360px;
color: var(--lighter);
text-align: center;
}
body.customerScreen customer-screen .shopSign {
display: flex;
align-items: center;
gap: 8px;
color: var(--white);
text-decoration: none;
flex-direction: row-reverse;
text-align: right;
cursor: pointer;
transition: var(--main-transition-duration) var(--transition-timing-function);
transition-delay: var(--main-transition-duration);
}
@media screen and (min-width: 1024px) {
body.customerScreen customer-screen .shopSign {
position: absolute;
right: calc(100% + 16px);
top: 53px;
width: 200px;
}
}
body.customerScreen customer-screen .empoweredBy {
color: var(--black);
text-decoration: none;
user-select: none;
opacity: 0.25;
width: 100%;
text-align: center;
margin-bottom: -8px;
margin-top: -12px;
}
body.customerScreen customer-screen .empoweredBy .logotype {
width: 33px;
height: 10px;
display: inline-block;
margin-left: 1px;
vertical-align: baseline;
}
@media screen and (min-width: 1024px) {
body.customerScreen customer-screen[placement=right] {
align-items: flex-end;
}
body.customerScreen customer-screen[placement=right] .copyright {
text-align: right;
}
body.customerScreen customer-screen[placement=left] {
align-items: flex-start;
}
body.customerScreen customer-screen[placement=left] .copyright {
text-align: left;
}
body.customerScreen customer-screen:before {
background-image: var(--customer-screen-gradient);
opacity: 1;
}
body.customerScreen customer-screen > * {
position: relative;
z-index: 1;
}
}
@media screen and (max-width: 1023px) {
body.customerScreen customer-screen {
padding: 32px 0;
grid-gap: 32px;
}
body.customerScreen customer-screen .customerScreenUtilities {
padding: 0 16px;
}
}
body.customerScreen.iframed {
background-color: transparent;
background-image: none;
overscroll-behavior: contain;
}
body.customerScreen.iframed customer-screen {
background-color: transparent;
background-image: none;
}
body.customerScreen.iframed customer-screen:before {
display: none;
}
@media screen and (min-width: 1024px) {
body.customerScreen.iframed customer-screen .shopSign {
display: none;
}
}
#newReservation .bigHeading {
text-align: left;
}
#newReservation date-picker {
box-shadow: var(--light-shadow);
border-radius: var(--large-border-radius);
}
@media screen and (min-width: 1024px) {
#newReservation .reservationHelper {
position: absolute;
right: 100%;
top: 87px;
height: calc(100% - 55px - 32px);
width: 256px;
padding-right: 16px;
display: grid;
align-items: stretch;
align-content: space-between;
justify-content: end;
justify-items: end;
overflow: hidden;
transition: 0.1s var(--transition-timing-function);
}
#newReservation .reservationHelper .reservationRules {
display: grid;
grid-gap: 32px;
}
#newReservation .reservationHelper .reservationDetails {
display: grid;
grid-gap: 16px;
cursor: default;
}
#newReservation .reservationHelper .reservationDetails .reservationItem {
cursor: pointer;
}
#newReservation .reservationHelper .reservationDetails .reservationItem:active {
transition: 0.1s var(--transition-timing-function);
transform: scale(0.98);
opacity: 1;
}
#newReservation .reservationHelper .reservationItem {
transition: var(--main-transition-duration) var(--transition-timing-function);
transform: translateX(260px);
opacity: 0;
user-select: none;
text-align: right;
border-right: 1px solid var(--white);
}
#newReservation .reservationHelper .reservationItem .reservationItemValue {
justify-content: flex-end;
}
#newReservation .reservationHelper .reservationItem.active {
transform: none;
opacity: 1;
transform-origin: center right;
}
}
@media screen and (max-width: 1023px) {
#newReservation .reservationHelper {
display: none;
}
}
#newReservation reservation-card *[data-section-target] {
cursor: pointer;
}
#newReservation reservation-card *[data-section-target]:active {
transition: 0.1s var(--transition-timing-function);
transform: scale(0.98);
}
#newReservation.leaving .reservationHelper {
opacity: 0;
}
#newReservation.reservationComplete .bigHeading {
margin-bottom: -16px;
}
#newReservation.reservationComplete .pillBoxActions {
grid-gap: 16px;
}
#newReservation .sectionalPillBoxFooter {
margin-top: -16px;
}
#newReservation .pillBoxActions {
text-align: left;
grid-gap: 8px;
}
#newReservation .pillBoxActions hr {
margin: 0;
}
#newReservation orin-receipt .receiptItem {
background-image: var(--ceramic);
color: var(--dark);
box-shadow: var(--light-shadow), inset 0 0 0 1px var(--light);
}
#newReservation orin-receipt + hr, #newReservation orin-receipt + p + hr {
margin: 8px 0;
}
#newReservation payment-wrapper {
display: grid;
grid-gap: 16px;
padding: 16px;
padding-top: 20px;
background-image: var(--midnight);
border: 1px solid var(--mid);
border-radius: var(--small-border-radius);
box-shadow: var(--card-shadow);
min-height: 0;
max-height: 1200px;
overflow: auto;
position: relative;
transition: var(--main-transition-duration) var(--transition-timing-function);
}
#newReservation payment-wrapper:after {
content: "";
z-index: 2;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--midnight);
opacity: 0;
transition: calc(var(--main-transition-duration) * 2) var(--transition-timing-function);
pointer-events: none;
}
#newReservation payment-wrapper.notActive {
min-height: 240px;
max-height: 240px;
overflow: hidden;
}
#newReservation payment-wrapper.notActive:after {
opacity: 1;
}
#newReservation payment-wrapper orin-loader {
position: absolute;
z-index: 3;
top: calc(50% - 32px);
left: calc(50% - 32px);
}
#cancelReservation {
min-height: unset;
}
#cancelReservation hr {
margin: 0;
}
#cancelReservation .pillBoxActions .inputDescription {
margin-top: 16px;
text-align: left;
}
#cancelReservation .pillBoxActions .canNotCancel {
margin-bottom: 16px;
margin-top: -8px;
}
.reservationItem {
display: grid;
grid-gap: 4px;
color: var(--white);
position: relative;
padding-right: 8px;
}
.reservationItem i.icon {
flex-shrink: 0;
background-color: var(--white);
}
.reservationItem .reservationItemValue {
display: flex;
gap: 8px;
align-items: center;
}
.iframed #newReservation .reservationHelper {
top: 32px;
height: calc(100% - 32px);
}
reservation-card {
background-image: var(--midnight);
padding: 16px;
border-radius: var(--small-border-radius);
box-shadow: var(--card-shadow);
color: var(--white);
text-align: left;
display: grid;
grid-gap: 32px;
}
reservation-card .reservationCardHeading {
display: grid;
grid-gap: 8px;
}
reservation-card .reservationCardHeading .supHeading {
display: flex;
gap: 8px;
}
reservation-card .reservationCardHeading h1 {
display: block;
}
reservation-card .reservationContent {
display: grid;
grid-gap: 16px;
}
reservation-card .reservationContent .reservationDetailsBox {
display: grid;
border: 1px solid var(--mid);
border-radius: var(--small-border-radius);
padding: 8px;
box-shadow: var(--card-shadow);
grid-gap: 8px;
}
reservation-card .reservationContent .reservationDetailsBox hr {
margin: 0;
background-color: var(--mid);
}
reservation-card .reservationContent .reservationDetailsBox .customerDetails:first-child {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8px;
}
reservation-card .reservationCardFooter {
display: grid;
grid-gap: 16px;
grid-auto-flow: column;
justify-content: space-between;
}
reservation-card .reservationCardFooter .reservationItem:nth-child(2) {
text-align: right;
}
reservation-card .reservationCardFooter .reservationItem:nth-child(2) .reservationItemValue {
justify-content: end;
}
.logo {
width: 56px;
height: 64px;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.logo.light {
background-image: url('data:image/svg+xml,');
}
.logo.monoLight {
background-image: url('data:image/svg+xml,');
}
.logo.monoDark {
background-image: url('data:image/svg+xml,');
}
.logotype {
width: 225px;
height: 70px;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.logotype.light {
background-image: url('data:image/svg+xml,');
}
.logotype.monoLight {
background-image: url('data:image/svg+xml,');
}
.logotype.monoDark {
background-image: url('data:image/svg+xml,');
}
.iPhone * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
.iPhone #resetIndicator {
position: fixed;
width: 16px;
height: 16px;
left: calc(50% - 8px);
top: 96px;
z-index: 9;
transition: 0.05s linear;
opacity: 0;
background-color: transparent;
transform: scale(3);
filter: blur(8px) grayscale(1);
pointer-events: none;
}
.iPhone #resetIndicator i.icon {
background-image: var(--sunrise);
}
.iPhone #resetIndicator.resetting {
transition: var(--main-transition-duration) var(--transition-timing-function);
transform: scale(1);
filter: none;
}
/*# sourceMappingURL=main.css.map */