.MenuDetailRight {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 6;
  overflow-y: auto;
}

.MenuDetailRight .section {
  text-align: left;
  padding: 2px 20px;
}
.MenuDetailRight .section ul:first-child li {
  display: inline-block;
}

.MenuDetailView {
  flex: 1;
  /* padding-top: 32px; */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.ActionButton {
    width: 100%;
}
/* Every bottom bar in this file follows a footer group - the button wording
   reads "Footer - Action", the amounts read "Footer - Price / Label" - with its
   old weight kept as the var() fallback. The "x" glyph
   (.MenuDetailFooterCancel span) and the ">" arrow (.Next) are excluded — they
   are symbols whose shape depends on the weight they were drawn at. */
#StartPickupOrder {
  width: calc(100% - 48px);
  margin: 0px 24px 0px 24px;
  height: 50px;
  bottom: 60px;
  font-size: 20px;
  font-family: var(--tmo-online-font-footer-action-family, inherit);
  font-weight: var(--tmo-online-font-footer-action-weight, 900);
  background-color: rgb(33,33,33,1.0);
  color: #FFFFFF;
  justify-content: space-between;
  cursor: pointer;
}
#StartPickupOrder .btn-next:hover {
  background-color: #212121;
  color: #FFFFFF;
}
#StartPickupOrder .btn-next>span {
  flex: 1;
  text-align: center;
}
#ButtonToMenu {
  width: calc(100% - 48px);
  margin: 0px 24px 60px 24px;
  left: 0;
  height: 50px;
  bottom: 60px;
  font-size: 20px;
  font-family: var(--tmo-online-font-footer-action-family, inherit);
  font-weight: var(--tmo-online-font-footer-action-weight, 900);
  background-color: rgb(33,33,33,1.0);
  color: #FFFFFF;
  justify-content: space-between;
  cursor: pointer;
}
#ButtonToMenu .btn-next:hover {
  background-color: #212121;
  color: #FFFFFF;
}
#ButtonToMenu .btn-next>span {
  flex: 1;
  text-align: center;
}

.ActionButton .btn-next {
  /* width: 100%;
  background-color: #434343;
  color: #FFFFFF;
  height: 54px;
  font-size: 1em; */  
  position: fixed;
  width: calc(100% - 48px);
  left: 24px;
  height: 50px;
  bottom: 15px;
  font-size: 20px;
  font-family: var(--tmo-online-font-footer-action-family, inherit);
  font-weight: var(--tmo-online-font-footer-action-weight, 900);
  /* border-radius: 10px; */
  background-color: rgb(33,33,33,1.0);
  color: #FFFFFF;
  /* box-shadow: 0px 0px 25px 10px #ffffff; */
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.ActionButtonRelative .btn-next {
  /* position: fixed; */
  width: calc(100% - 48px);
  margin: 40px 24px 0px 24px;
  left: 24px;
  height: 50px;
  /* bottom: 60px; */
  font-size: 20px;
  font-family: var(--tmo-online-font-footer-action-family, inherit);
  font-weight: var(--tmo-online-font-footer-action-weight, 900);
  /* border-radius: 10px; */
  background-color: rgb(33,33,33,1.0);
  color: #FFFFFF;
  /* box-shadow: 0px 0px 25px 10px #ffffff; */
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}


.MenuContentFrame .ActionButton .DietSticker {
  position: absolute;
  bottom: 74px;
  left: 20px;
}
.ActionButton .btn-next .AttentionSeeker, .ActionButtonCyo .btn-next .AttentionSeeker {
  font-family: var(--tmo-online-font-footer-action-family, inherit);
  font-weight: var(--tmo-online-font-footer-action-weight, 500);
}

.ActionButton .btn-next:hover {
  background-color: #212121;
  color: #FFFFFF;
}

.ActionButton .AttentionSeeker, .ActionButtonCyo .AttentionSeeker {
  padding-left: 10px;
}

.ActionButton .btn-next {
  display: flex;
  align-items: center;
  z-index: 10000;
}
.ActionButtonRelative .btn-next {
  display: flex;
  align-items: center;
  z-index: 10000;
}

.ActionButton .btn-next>span {
  flex: 1;
  text-align: center;
}
.ActionButtonRelative .btn-next>span {
  flex: 1;
  text-align: center;
}
.MenuDetailFooter {
  position: fixed;
  width: calc(100vw - 48px);
  right: 24px;
  height: 50px;
  bottom: 15px;
  border-radius: 10px;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.MenuDetailFooterCancel {
  height: 50px;
  min-width: 50px;
  background-color: #212121;
  /* border-radius: 40px; */
  /* border: 1px solid #212121; */
  display: flex;
  justify-content: center;
  /* box-shadow: 0px 0px 5px 0px #ffffff; */
  margin: 0px 2px 0px 0px;
  padding: 8px 0px 0px 0px;
}
.MenuDetailFooterCancel span{
  /* color: #ffffff; */
  text-align: center;
  font-size: 40px;
  font-weight: 100;
  line-height: 50px;
  /* margin: -2px 2px 0px 0px; */
}
.MenuDetailFooterAmount {
  width: 120px;
  margin-right: 2px;
}
.MenuDetailFooterAmountBody {
  /* box-shadow: 0px 0px 5px 0px #ffffff; */
  width: 100%;
  /* background: #212121; */
}
.MenuDetailFooterAmountName {
  position: absolute;
}
.MenuDetailFooterAmountNameText {
  position: absolute;
  font-family: var(--tmo-online-font-footer-price-family, inherit);
  font-weight: var(--tmo-online-font-footer-price-weight, inherit);
  font-size: 10px;
}
.MenuDetailFooterAmountInput {
  /* width: 40px; */
  height: 50px;
  /* border: 1px solid #7a7a7a; */
  /* border-radius: 5px; */
  margin: 0px 2px;
  padding: 14px 0px;
  text-align: center;
  font-size: 19px;
  font-family: var(--tmo-online-font-footer-price-family, inherit);
  font-weight: var(--tmo-online-font-footer-price-weight, 700);
}
.MenuDetailFooterAmountButtonSet {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 50px;
  width: 120px;
  /* width: 100%; */
  /* padding: 5px; */
}
.MenuDetailFooterAmountButtonSet button {
  /* background-color: rgb(255 255 255 / 100%); */
  color: #1b1b1b;
  width: 35%;
  position: relative;
  border: 1px solid #ffffff;
  border-radius: 50px;
  width: 24px;
  height: 24px;
  margin: 13px auto 13px auto;
}
.MenuDetailFooterAmountButtonSet button img {
  width: 24px;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.MenuDetailFooterAmountButton.btn-decrease {
  margin: 13px 0px 13px 13px;
}
.MenuDetailFooterAmountButton.btn-increase {
  margin: 13px 13px 13px 0px;
}

.MenuDetailFooterAmountWrapper {
  width: 30%;
}
.MenuDetailActionButton img {
  width: 20px;
  margin: 0px 5px 0px 0px;
}

.MenuDetailActionButton {  
  height: 50px;
  width: calc(100% - 174px);
  /* border-radius: 10px; */
  background-color: rgb(33,33,33,1.0);
  /* color: #FFFFFF; */
  display: flex;
  justify-content: space-between;
  /* box-shadow: 0px 0px 5px 0px #ffffff; */
  cursor: pointer;
}
.MenuDetailActionButton .Button {
  width: calc(100% - 25px);
}
.MenuDetailActionButton .Button .Text {
  padding-left: 5px;
}

.MenuDetailActionButton .Button .Text div{
  white-space: nowrap;
}
.MenuDetailActionButton .ItemModPriceWrapper {
  display: flex;
  justify-content: center;
}
.MenuDetailActionButton .ItemModText {
  font-size: 12px;
  font-family: var(--tmo-online-font-footer-price-family, inherit);
  font-weight: var(--tmo-online-font-footer-price-weight, 700);
}
.MenuDetailActionButton .ItemModDiscount {
  position: absolute;
  right: 20px;
  transform: translate(10px, -30px);
  font-size: 16px;
  font-family: var(--tmo-online-font-footer-price-family, inherit);
  font-weight: var(--tmo-online-font-footer-price-weight, 700);
  margin-left: 8px;
}
.MenuDetailActionButton .ItemModPrice {
  font-size: 16px;
  font-family: var(--tmo-online-font-footer-price-family, inherit);
  font-weight: var(--tmo-online-font-footer-price-weight, 700);
}
.MenuDetailActionButton .Next {
  font-size: 24px;
  line-height: 48px;
  margin: 0px 10px 0px 0px;
  font-weight: 900;
}
.MenuDetailCancelButton img {
  width: 20px;
  margin: 0px 5px 0px 0px;
}
.MenuDetailCancelButton {
  height: 50px;
  width: calc(100vw - 80px);
  background-color: rgb(33,33,33,0.9);
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
  font-family: var(--tmo-online-font-footer-action-family, inherit);
  font-weight: var(--tmo-online-font-footer-action-weight, 900);
  cursor: pointer;
  margin-top: 0px;
}
.MenuDetailCancelButton .Button {
  width: calc(100% - 25px);
}
.MenuDetailCancelButton .Button .Text {
  padding-left: 5px;
}

.MenuDetailCancelButton .Button .Text div{
  white-space: nowrap;
}



/*--- Tablet and Mobile ---*/
@media (max-width: 992px) {
  .MenuDetailRight {
    width: 100%;
  }
  .MenuDetailRight .section {
    position: relative;
  }
  .MenuDetailRight .section h5 {
    font-size: 1.3em;
  }
  .MenuDetailRight .section li.icon-nutritional {
    margin-left: 10px;
    position: relative;
    top: -5px;
    left: 5px;
  }
  .MenuDetailRight .section li.icon-nutritional ul li {
    width: 28px;
  }
  .MenuDetailRight .section ul:nth-child(n+2) li.MenuCategory {
    width: 30%;
    max-width: 115px;
    margin: 0 12px 12px 0;
  }
  .MenuDetailRight .section ul:nth-child(n+2) li.MenuSubcategory {
    width: 30%;
    max-width: 115px;
    margin: 0 12px 12px 0;
  }

  .MenuDetailRight .section ul:nth-child(n+2) li.btn-add {
    width: 30%;
    max-width: 115px;
    margin: 0 0 12px 0;
    min-height: 150px;
  }

  .MenuDetailRight .section ul:nth-child(n+1) li .item-name {
    height: auto;
    position: relative;
    padding-bottom: 0;
  }
  .MenuDetailRight .section ul:nth-child(n+1) li .item-name p {
    transform: none;
    padding-top: 5px;
    padding-bottom: 0;
  }

  .MenuDetailRight .section ul.dressing {
    position: relative;
    width: 100%;
  }

  .MenuDetailRight .section ul.dressing li:nth-child(2) {
    position: absolute;
    right: -10px;
    top: -13px;
    text-align: right;
  }

  .MenuDetailRight .section ul.dressing label {
    position: relative;
    top: 16px;
    margin-right: 6px;
  }
  /*.ActionButton .btn-next {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }*/
  /* .ActionButton .btn-next {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  } */
  .MenuContentFrame .ActionButton .DietSticker {
    position: fixed;
    bottom: 74px;
    z-index: 9999;
  }

  .ActionButtonCyo {
    display: flex;
    flex-direction: column;
    height: 56px;
  }

  .ActionButtonCyo ul {
    display: flex;
    height: 100%;
  }

  .ActionButtonCyo ul li {
    display: flex;
    height: 100%;
  }

  .ActionButtonCyo ul li:first-child {
    flex: 9;
  }

  .ActionButtonCyo ul li:last-child {
    flex: 11;
  }

  .ActionButtonCyo .Button.btn-energy {
    background-color: #91B698;
    height: 100%;
    width: 100%;
    padding: 0 10px;
  }
  .ActionButtonCyo .Ingredients .lnr {
    position: relative;
    right: 5px;
  }
  .ActionButtonCyo .Button.btn-next {
    background-color: #3C6142;
    height: 100%;
    width: 100%;
    border-left: 2px solid #F2EDE9;
  }
  .ActionButtonCyo .Button.btn-next:hover {
    background-color: #315738;
  }
  .ActionButtonCyo .Button.btn-energy:hover {
    background-color: #819A9F;
  }
  .ActionButtonCyo .IngredientButtonText {
    flex: 1;
  }
  .ActionButtonCyo li span {
    font-weight: var(--tmo-online-font-system-body-weight, 400);
  }
}

/* Mobile Portrait Only */
@media (max-width: 479px) {
  .MenuDetailRight .section ul:nth-child(n+2) li.MenuCategory:nth-child(3n) {
    margin: 0 0 12px 0;
  }
  .MenuDetailRight .section ul:nth-child(n+2) li.MenuSubcategory:nth-child(3n) {
    margin: 0 0 12px 0;
  }
}



/* MenuDetailItem */

.MenuDetailItem {
  /* width: calc(100% - 40px); */
  /* max-width: 500px; */
  /* margin: 5px 20px 25px 20px; */
  /* padding: 10px 10px 10px 10px; */
  visibility: hidden;
  /* background-color: #FFFFFF; */
  position: relative;
  display: flex;
  /* color: #212121; */
  text-align: left;
  /* box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 35%); */
}

/* .MenuDetailItem:hover {
cursor: pointer;
} */

.MenuDetailItem a {
width: 100%;
}

/*.MenuDetailItem div {
display: flex;
flex-direction: column;
width: 100%;
}*/

.MenuDetailItem .menu-detail-body {
/* background-color: #FFFFFF; */
position: relative;
/* color: #212121; */
text-align: left;
/* padding: 10px 12px 30px 12px; */
width: 82%;
flex-grow: 1;
}

.MenuDetailItem .menu-detail-body h5 {
font-size: 1.0em;
margin-bottom: 8px;
text-overflow: ellipsis;
max-width: 98%;
overflow: hidden;
line-height: 1.2em;
}

.MenuDetailItem .menu-detail-image {
  width:50%;
  /* height:100px; */
  /* float: left; */
  margin-bottom: 5px;
  background-size: 40px 40px;
  float: left;
  /* 10px -> 20px (2026-08-07 request): at >=768px the name sits beside the
     photo, and this margin is what sets the gap between them — .menu-detail-left's
     padding-left cannot, because the name's box starts at the container's left
     edge underneath the float and only its line box gets pushed to the float's
     right margin edge. Keep in step with the calc(50% + 20px) on
     .menu-detail-desc / .menu-detail-desc-image below, which hardcode the same
     offset so the description lines up with the name. Both mobile media queries
     re-declare 10px, but there the photo is 100% wide so nothing sits beside it. */
  margin-right: 20px;
  background-size: 40px 40px;
}

.MenuDetailItem .menu-detail-image-wrapper {
  width:100%;
}


.MenuDetailItem .menu-detail-image img {
  width:100%;
  /* height:100px; */
  object-fit: cover; /*magic*/
  z-index: 1;
}
.menu-detail-left {
  /* Top gap matches the side gap (2026-08-07 request): the product name used to
     sit 20px under the photo against 24px of side padding, which read as the
     name being crowded against the image. */
  padding: 24px 24px 20px 24px;
}


.MenuDetailItem .menu-detail-name {
/* Wears the product-name settings (online_font_product_name_*) whole, so the
   detail view is typeset exactly like the list the customer just tapped. This
   deliberately moves an untouched store from its old 16px/900 to the product
   name's 15px/700 — the request was that the two screens match, not that the
   detail keeps a heading of its own. */
font-family: var(--tmo-online-font-name-family, inherit);
font-size: var(--tmo-online-font-name-size, 15px);
font-weight: var(--tmo-online-font-name-weight, 700);
letter-spacing: var(--tmo-online-font-name-spacing, inherit);
}

.MenuDetailItem .menu-detail-soldout-image {
  position: absolute;
  width: 120px;
  transform: translateY(-50%) rotate(-25deg);
  right: 10px;
  top: 50%;
}

.MenuDetailItem .menu-detail-soldout-custom-image {
  position: absolute;
  width: 80%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}


.MenuDetailItem .menu-detail-desc{
  padding: 8px 0px 8px 0px;
  /* Same deal as the name: the description settings whole, including the line
     box, so an untouched store moves from 13px/14px to the list's 12px/13px.
     The text is not clipped to a line count here, so the box just grows. */
  font-family: var(--tmo-online-font-desc-family, inherit);
  font-size: var(--tmo-online-font-desc-size, 12px);
  font-weight: var(--tmo-online-font-desc-weight, 400);
  letter-spacing: var(--tmo-online-font-desc-spacing, inherit);
  line-height: var(--tmo-online-font-desc-line, 13px);
  bottom: 0px;
  left: 12px;
  /* color: #212121; */
}
.menu-detail-desc-image {
  /* Mirrors .menu-detail-image's 50% width + 20px right margin. */
  margin-left: calc(50% + 20px);
  white-space: pre-wrap;
}


.MenuDetailItem .menu-detail-footer {
  width: 100%;
  font-size: 16px;
  /* font-style: italic; */
  /* color: #95989A; */
  padding-right: 5px;
  overflow: visible;
  white-space: nowrap;
  /* text-align: right; */
}
.MenuDetailItem .menu-detail-desc{
  /* Mirrors .menu-detail-image's 50% width + 20px right margin. */
  margin-left: calc(50% + 20px);
  white-space: pre-wrap;
}
.MenuDetailItem .menu-detail-price{
/* The price is read as part of the product name, so it wears the whole
   product-name font rather than the footer's 1.0em (= 16px) and the weight it
   happened to inherit. The `(incl. tax ...)` span inside has no font of its own
   and follows along. Both media queries below used to re-declare font-size at
   the same specificity, which would have won over this rule — they now declare
   position only, so this is the single place the price font lives. */
font-family: var(--tmo-online-font-name-family, inherit);
font-size: var(--tmo-online-font-name-size, 15px);
font-weight: var(--tmo-online-font-name-weight, 700);
letter-spacing: var(--tmo-online-font-name-spacing, inherit);
position: relative;
/* top: 0px;
right: 10px; */
/* color: #212121; */
}
.MenuDetailItem .menu-detail-cals {
font-family: var(--tmo-online-font-system-small-family, inherit);
font-weight: var(--tmo-online-font-system-small-weight, inherit);
font-size: 1.0em;
/* position: absolute; */
bottom: 0px;
/* right: 12px; */
color: #95989A;
font-size: 0.8em;
}
.menu-detail-body ul li {
display: inline-flex;
}

.MenuDetailItem .PromoFlag {
font-family: var(--tmo-online-font-system-small-family, inherit);
font-weight: var(--tmo-online-font-system-small-weight, inherit);
font-size: 0.75em;
color: #FFFFFF;
padding: 3px 7px;
position: absolute;
top: 0;
left: 0;
}

/* Mobile Landscape */
@media (max-width: 767px) and (min-width: 480px) {
  /* .item */
  .MenuDetailItem {
    /* width: calc(100% - 40px);
    max-width: none;
    margin: 5px 20px; */
  }
  .MenuDetailItem .menu-detail-image img {
      width: 100%;
      /* height: 80px; */
      object-fit: cover;
  }

  .MenuDetailItem .menu-detail-image {
    /* width:50%;
    float: left;
    margin-right: 10px;
    background-size: 40px 40px; */
    width: 100%;
    /* height: 80px; */
    /* float: left; */
    margin-right: 10px;
    background-size: 40px 40px;
  }
  /* Same 24px gap and same reason as the portrait block below — this range
     stacks the photo above the name too, so the float swallows any padding-top
     here as well. Only ≥768px puts the name beside the photo, where the gap is
     a non-issue. */
  .MenuDetailItem .menu-detail-image:has(.menu-detail-image-wrapper) {
    margin-bottom: 24px;
  }
  .MenuDetailItem .menu-detail-image-wrapper {
    width:100%;
  }
  .MenuDetailItem .menu-detail-image img {
    width:100%;
    /* height:200px; */
    object-fit: cover; /*magic*/
  }

  .MenuDetailItem .menu-detail-footer {
    text-align: right;
  }
  .MenuDetailItem .menu-detail-price{
    /* font-size lives in the base rule only — see the comment there. */
    position: relative;
    top: 0px;
    right: 10px;
    /* color: #212121; */
  }
  .MenuDetailItem .menu-detail-desc{
    /* margin-left: calc(50% + 10px); */
    margin-left: 0px;
  }
  .menu-detail-desc-image {
    margin-left: 0px;
  }
}

/* Mobile Portrait */
@media (max-width: 479px) {
  
  .MenuDetailItem .menu-detail-body {
    /* background-color: #FFFFFF; */
    position: relative;
    /* color: #212121; */
    text-align: left;
    /* padding: 10px 12px 30px 12px; */
    width: 100%;
    flex-grow: 1;
  }
  
  .MenuDetailItem .menu-detail-footer {
    width: 100%;
    font-size: 16px;
    font-weight: var(--tmo-online-font-system-body-weight, 700);
    /* font-style: italic; */
    /* color: #95989A; */
    padding-right: 5px;
    overflow: visible;
    white-space: nowrap;
  }
    
  .MenuDetailItem {
    /* width: calc(100% - 40px); */
    max-width: none;
    /* margin: 5px 20px 25px 20px; */
    display: block;
  }

  .MenuDetailItem .menu-detail-image {
    width:100%;
    /* height:80px; */
    /* float: left; */
    margin-right: 10px;
    background-size: 40px 40px;
  }
  /* Portrait-only 24px gap under the photo, matching .menu-detail-left's side
     padding (2026-08-07 request). It has to live on the image and not as
     padding-top on .menu-detail-left / .menu-detail-name: the photo is still
     `float: left` at 100% width, so those boxes start level with the top of the
     photo (hence .menu-detail-name measuring ~272px tall) and only their line
     boxes get pushed below the float — padding-top would be swallowed inside
     the overlap. Moving the float's own bottom edge is the only lever that
     shifts the name. :has() keeps it off products with no photo, where the
     wrapper is never appended and the empty float would otherwise become 24px
     of dead space above the name; browsers without :has() just keep today's
     look. Landscape (480-767px) is deliberately left at the base 5px. */
  .MenuDetailItem .menu-detail-image:has(.menu-detail-image-wrapper) {
    margin-bottom: 24px;
  }
  .MenuDetailItem .menu-detail-image-wrapper {
    width:100%;
  }
  .MenuDetailItem .menu-detail-image img {
    width:100%;
    /* height:80px; */
    object-fit: cover; /*magic*/
  }

  .MenuDetailItem .menu-detail-desc-image {
    width:100%;
    /* height:80px; */
    /* float: left; */
    margin-right: 10px;
    background-size: 40px 40px;
  }
  .MenuDetailItem .menu-detail-desc-image-wrapper {
    width:100%;
  }
  .MenuDetailItem .menu-detail-desc-image img {
    width:100%;
    /* height:80px; */
    object-fit: cover; /*magic*/
  }

  
  .MenuDetailItem .menu-detail-footer {
    /* text-align: right; */
  }
  .MenuDetailItem .menu-detail-price{
    /* font-size lives in the base rule only — see the comment there. */
    position: relative;
    /* top: 0px;
    right: 10px; */
    /* color: #212121; */
  }
  .MenuDetailItem .menu-detail-desc{
    margin-left: 0%;
  }
  .menu-detail-desc-image {
    margin-left: 0px;
  }
}


/* Mobile Portrait */
@media (max-width: 330px) {
  .MenuDetailFooterAmount {
    width: 100px;
  }
  .MenuDetailActionButton {
    width: calc(100% - 154px);
  }
  .MenuDetailFooterAmountButton.btn-decrease {
    margin: 13px 0px 13px 6px;
  }
  .MenuDetailFooterAmountButton.btn-increase {
    margin: 13px 6px 13px 0px;
  }
  .MenuDetailFooterAmountButtonSet {
    width: 100px;
  }
  .MenuDetailFooterAmountWrapper {
    width: 20%;
  }

}

/* Mobile Portrait */
@media (max-width: 300px) {
  .MenuDetailFooterCancel {
    min-width: 40px;
    padding: 8px 0px 0px 0px;
    margin: 0px 2px 0px -10px;
  }
  .MenuDetailActionButton {
    width: calc(100% - 115px);
  }
  .MenuDetailActionButton .ItemModText {
    font-size: 10px;
  }
  .MenuDetailFooterAmountButtonSet {
    width: 90px;
  }

}