ul[data-v-56c9df02] {
  display: flex;
  justify-content: center;
  border-bottom: 4px solid black;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgb(250, 255, 255);
  margin-block: 0;
}
li[data-v-56c9df02] {
  list-style: none;
  padding: 10px 10px;
}
a[data-v-56c9df02] {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
a[data-v-56c9df02]:hover {
  color: grey;
  text-decoration: none;
  border-bottom: 1px dotted grey;
}
a.router-link-active[data-v-56c9df02] {
  color: goldenrod;
  border-bottom: 1px dotted goldenrod;
}
@media (min-width: 500px) {
li[data-v-56c9df02] {
    padding: 10px 20px;
}
a[data-v-56c9df02] {
    font-size: 1.2rem;
}
}

.snackbar[data-v-bd96dcac] {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 20px;
  z-index: 1;
  font-size: x-large;
  border-block: 4px solid black;
  text-align: center;
  cursor: move;
}
.success[data-v-bd96dcac] {
  background: lightgreen;
}
.fade-enter-active[data-v-bd96dcac],
.fade-leave-active[data-v-bd96dcac] {
  transition: opacity 0.5s ease;
}
.fade-enter-from[data-v-bd96dcac],
.fade-leave-to[data-v-bd96dcac] {
  opacity: 0;
}


body {
  font-size: 18px;
  background: rgb(224, 255, 255, 0.15);
  font-family: 'Lobster', Times;
}

.cup[data-v-7a0f9f00] {
  display: flex;
  will-change: transform;
}
.cup-body[data-v-7a0f9f00] {
  width: 200px;
  height: 180px;
  border: 6px solid black;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 0px 0px 20px 20px;
  overflow: hidden;
}
.cup-body.bigger[data-v-7a0f9f00] {
  height: 240px;
  width: 220px;
}
.cup-handler[data-v-7a0f9f00] {
  width: 30px;
  height: 72px;
  margin-top: 18px;
  background-color: initial;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  border: 8px solid black;
  border-left: 0;
  box-sizing: border-box;
}
.cup[data-v-7a0f9f00]:hover {
  cursor: pointer;
  transform: rotate(-4deg);
}
.cup:hover .cup-body[data-v-7a0f9f00] {
  border-color: goldenrod;
}
.cup:hover .cup-handler[data-v-7a0f9f00] {
  border-color: goldenrod;
}
.ingredient[data-v-7a0f9f00] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.disabled-hover[data-v-7a0f9f00] {
  pointer-events: none;
  border-color: initial;
}
.disabled-hover[data-v-7a0f9f00]:hover {
  pointer-events: none;
  border-color: black;
}

/* recipe */
.espresso[data-v-7a0f9f00] {
  background-color: rgb(222, 98, 38);
}
.milk.foam[data-v-7a0f9f00] {
  background-color: rgb(198, 218, 181);
}
.steamed.milk[data-v-7a0f9f00] {
  background-color: rgb(178, 187, 140);
}
.steamed.cream[data-v-7a0f9f00] {
  background-color: rgb(239, 238, 217);
}
.chocolate.syrup[data-v-7a0f9f00] {
  background-color: rgb(154, 128, 69);
}
.whipped.cream[data-v-7a0f9f00] {
  background-color: rgb(183, 221, 220);
}
.water[data-v-7a0f9f00] {
  background-color: rgb(127, 195, 179);
}

.modal[data-v-3b3d1f66] {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;  /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content[data-v-3b3d1f66] {
  background-color: #fefefe;
  margin: auto;
  padding-inline: 20px;
  padding-block: 10px;
  /* border: 1px solid #888; */
  width: 80%;
  max-width: 600px;
  min-width: 300px;
  border: 4px solid black;
}

/* The Close Button */
.close[data-v-3b3d1f66] {
  color: slategrey;
  float: right;
  font-size: 28px;
  font-weight: bold;
  border: none;
  background: transparent;
}
.close[data-v-3b3d1f66]:hover,
.close[data-v-3b3d1f66]:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
h1[data-v-3b3d1f66] {
  margin-block: 16px;
}
section[data-v-3b3d1f66] {
  display: flex;
  justify-content: space-between;
}
form label[data-v-3b3d1f66] {
  margin-inline-end: 10px;
  padding-block: 10px;
}
form input[type="checkbox"][data-v-3b3d1f66] {
  margin-inline-end: 10px;
}
form input[type="email"][data-v-3b3d1f66], form input[type="text"][data-v-3b3d1f66] {
  padding-block: 4px;
  padding-inline: 10px;
}
form div[data-v-3b3d1f66] {
  padding-block: 10px;
}
form div[data-v-3b3d1f66]:last-of-type {
  display: flex;
  justify-content: flex-end;
}
form button[data-v-3b3d1f66] {
  border: 4px solid black;
  background: antiquewhite;
  margin: 0 6px;
  font-size: x-large;
}
form button[data-v-3b3d1f66]:hover {
  border-color: goldenrod;
  color: goldenrod;
}
p[data-v-3b3d1f66] {
  margin-block: 10px;
}
.size[data-v-3b3d1f66] {
  animation: mymove-3b3d1f66 2s infinite;
}
@keyframes mymove-3b3d1f66 {
from {background-color: rgb(127, 195, 179);
}
to {background-color: rgb(222, 98, 38);}
  /* to {background-color: rgb(178, 187, 140);} */
}

button.pay[data-v-a32a8090] {
  border: 4px solid black;
  background: antiquewhite;
  /* margin: 0 6px; */
  font-size: xx-large;
  padding: 6px 10px;
}
button.pay[data-v-a32a8090]:hover {
  border-color: goldenrod;
  color: goldenrod;
}
.cart-preview.show[data-v-a32a8090] {
  display: block;
}
.cart-preview[data-v-a32a8090] {
  display: none;
  padding: 10px;
  background: beige;
  margin-bottom: 10px;
  border: 4px solid black;
  list-style: none;
  min-width: 240px;
}
.pay-container[data-v-a32a8090] {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.list-item[data-v-a32a8090] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 6px;
}
.unit-controller button[data-v-a32a8090] {
  min-height: 20px;
  border: 2px solid;
  padding: 0 6px;
  margin: 2px -1px;
  background: antiquewhite;
}

.modal[data-v-05f06591] {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
img[data-v-05f06591] {
  max-width: 80%;
  max-height: 80%;
}
.fade-enter-active[data-v-05f06591],
.fade-leave-active[data-v-05f06591] {
  transition: opacity 1s ease;
}
.fade-enter-from[data-v-05f06591],
.fade-leave-to[data-v-05f06591] {
  opacity: 0;
}

div[data-v-4d36d437] {
  display: flex;
  justify-content: center;
}

/* img {
  max-width: 80%;
} */
img[data-v-4d36d437] {
  min-height: 100px;
  max-height: 50vh;
  overflow: auto;
  /* max-height: 50vh; */
}
.fade-enter-active[data-v-4d36d437],
.fade-leave-active[data-v-4d36d437] {
  transition: opacity 1s ease;
}
.fade-enter-from[data-v-4d36d437],
.fade-leave-to[data-v-4d36d437] {
  opacity: 0;
}

.buttons[data-v-565ec0dc] {
  display: flex;
  grid-gap: 10px;
}
.buttons button[data-v-565ec0dc] {
  min-width: 160px;
  border: 2px solid black;
}
.yes[data-v-565ec0dc] {
  background: rgb(198, 218, 181);
}
.promo[data-v-565ec0dc] {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  grid-gap: 16px;
  font-size: larger;
  border: 4px solid black;
  padding: 10px;
  margin-inline: 20px;
  text-align: center;
}
.fade-enter-active[data-v-565ec0dc],
.fade-leave-active[data-v-565ec0dc] {
  transition: opacity 3s ease;
}
.fade-enter-from[data-v-565ec0dc],
.fade-leave-to[data-v-565ec0dc] {
  opacity: 0;
}

ul[data-v-5655a9be] {
  list-style: none;
  padding: 0;
  display: grid;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 100px;
}
div[data-v-5655a9be] {
  margin-top: 10px;
}
button[data-v-5655a9be] {
  border: 4px solid black;
  background: antiquewhite;
  margin: 0 6px;
}
button[data-v-5655a9be]:hover {
  border-color: goldenrod;
  color: goldenrod;
}
[data-v-5655a9be] .pay {
  display: block;
  right: 10px;
  bottom: 10px;
  align-self: flex-end;
}
[data-v-5655a9be] .pay-container {
  position: fixed;
  bottom: 0px;
  right: 10px;
}
@media (min-width: 500px) {
ul[data-v-5655a9be] {
    grid-template-columns: repeat(2, auto);
}
}
@media (min-width: 800px) {
ul[data-v-5655a9be] {
    grid-template-columns: repeat(3, auto);
}
}
li[data-v-5655a9be] {
  padding: 10px 20px;
}
li:hover h4[data-v-5655a9be] {
  color: goldenrod;
}
li h4[data-v-5655a9be] {
  /* text-align: center; */
  margin: 10px 0;
}

p[data-v-1343d486] {
  text-align: center;
  font-size: xx-large;
}
.list[data-v-1343d486] {
  margin: 0 auto;
  max-width: 680px;
  padding: 10px;
}
ul[data-v-1343d486] {
  padding: 0;
}
li[data-v-1343d486] {
  padding: 10px;
  font-weight: 300;
  font-size: x-large;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-areas: "a a d" "b b c";
}
li[data-v-1343d486] {
  border-bottom: 4px dashed lightgray;
}

/* title */
li div[data-v-1343d486]:first-child {
  grid-area: a;
}

/* unit price */
li div[data-v-1343d486]:nth-child(2) {
  grid-area: b;
  display: flex;
}

/* total */
li div[data-v-1343d486]:nth-child(3) {
  grid-area: c;
  justify-self: end;
}

/* delete button */
li div[data-v-1343d486]:last-child {
  grid-area: d;
  justify-self: right;
  display: flex;
  align-items: center;
}
.list-header[data-v-1343d486] {
  display: none;
}
@media (min-width: 500px) {
li[data-v-1343d486] {
    grid-template-columns: repeat(3, auto);
    /* autoprefixer: off */
    grid-template-areas: "a a d" "b b c";
}
}
@media (min-width: 800px) {
li[data-v-1343d486] {
    grid-template-columns: 260px 200px 140px 50px;
    /* autoprefixer: off */
    grid-template-areas: "a b c d";
}
.list-header[data-v-1343d486] {
    display: grid;
    font-weight: bold;
    font-size: initial;
}
}

/* delete button */
.delete[data-v-1343d486] {
  height: 24px;
  width: 24px;
  font-size: 14px;
  border-radius: 50%;
  font-weight: bold;
  background: rgba(10, 10, 10, 0.15);
  color: white;
  font-weight: bold;
  border: none;
}
.delete[data-v-1343d486]:hover {
  color: red;
  background: lightpink;
}

/* unit controller */
.unit-controller[data-v-1343d486] {
  margin-left: 10px;
}
.unit-controller button[data-v-1343d486] {
  min-height: 20px;
  font-size: 14px;
  border: 2px solid;
  padding: 0 6px;
  margin: 2px -1px;
  background: antiquewhite;
}
.unit-desc[data-v-1343d486] {
  min-width: 120px;
}
[data-v-1343d486] .pay-container {
  padding: 0;
}
[data-v-1343d486] .pay {
  align-self: flex-start;
}

.container[data-v-37a6da88] {
    width: 90vw;
    max-width: 800px;
    margin: 0 auto;
}