* {
    box-sizing: border-box;
    font-size: 1.2rem;
}
html {
    min-width: 512px;
}
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}

i {
    font-size: 0.9rem;
}

body {
    font-family: sans-serif;
    padding: 0;
}

h1 {
    margin-top: 0;
}

h2 {
    margin-top: 0;
}

h3 {
    margin-top: 0;
}

h4 {
    margin-top: 0;
}

h5 {
    margin-top: 0;
}

h6 {
    margin-top: 0;
}

code {
    font-size: 1.2em;
}

ul {
    padding-inline-start: 40px;
}

.menu-category-title {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
.menu-category-title-new {
    font-size: 2rem !important;
    font-weight: bold !important;
    margin-right: 1rem !important;
}

.menu-category-title > .ant-card-head > .ant-card-head-wrapper > .ant-card-head-title {
    font-size: 2rem !important;
    font-weight: bold !important;
    padding: 1.5rem !important;
}

.menu-item {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 4fr 2fr;
    grid-template-rows: auto;
    min-height: 128px;
    grid-template-areas:
        "image middle selector";
}

.menu-item-image {
    height: auto;
    grid-area: image;
    justify-self: center;
}

.menu-item-middle {
    height: auto;
    grid-area: middle;
    margin-left: 1rem;
    margin-right: 1rem;
}

.menu-item-selector {
    grid-area: selector;
}

.menu-item-image .ant-image .ant-image-img {
    border-radius: 25% 10%;
}

.menu-item-title {
    font-size: 1.6rem;
    font-weight: 600;
    height: auto;
}

.menu-item-description {
    font-size: 1.2rem;
    font-style: italic;
}

.menu-item-price {
    /*display: table-cell;*/
}

.menu-item-price * {
    margin-right: 0.5rem;
}

.menu-item-highlight-price {
    height: auto;
    font-size: 1.4rem;
    color: #007bff;
    text-align: center;
    vertical-align: middle;
}
.menu-item-main-price {
    height: 100%;
    font-size: 1.1rem;
    color: #838383;
    text-align: center;
    vertical-align: middle;
}

.discounted {
    text-decoration: line-through;
}

.menu-item-main-price.discounted {


    font-size: 1rem;
    color: #ff6e6e;
}
.menu-item-highlight-price.discounted {


    font-size: 1rem;
    color: #ff6e6e;
}

.menu-item-tags {
    height: auto;
    grid-area: tags;
}

.selector-container {
    display: table-cell;
}

.selector {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
        "top top top"
        "minus quantity plus"
        "bottom bottom bottom";
    justify-items: center;
    align-items: center;
    vertical-align: middle;
}

.selector-minus {
    grid-area: minus;
}

.selector-plus {
    grid-area: plus;
}

.selector-quantity {
    grid-area: quantity;
    text-align: center;
    font-size: 2rem;
    color: #007bff;
}

.selector-no-status {
}

.selector-out-of-stock-status {
    grid-area: bottom;
    width: 100%;
    color: darkgoldenrod;
    background-color: lightyellow;
    padding: 7px;
    text-align: center;
    border: 1px solid #ededa4;
    border-radius: 4px;
}

.tag-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.tag-list > .tag {
    margin-right: 12px;
}

.tag {
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 4px;
    font-size: 1rem;
    text-align: center;
}
.tag.featured {
    color: #1677ff;
    background-color: #e6f4ff;
    border: 1px solid #91caff;
}
.tag.spicy {
    color: red;
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
}
.tag.healthy {
    color: #52c41a;
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
}

.order-bottom-sheet {
    background-color: #ffffff;
    position: fixed !important;
    bottom: 0px !important;
    z-index: 11;
    left: 0;
    right: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.order-bottom-sheet > .ant-card > .ant-card-head > .ant-card-head-wrapper > .ant-card-head-title {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.order-bottom-sheet > .ant-card > .ant-card-body > .content > .summary {
    grid-area: summary;
}

.order-bottom-sheet > .ant-card > .ant-card-body > .content > .actions {
    grid-area: actions;
    justify-self: end;
}

.order-bottom-sheet > .ant-card > .ant-card-body > .content > .actions > .ant-btn {
    height: 4rem !important;
}

.order-bottom-sheet > .ant-card > .ant-card-body > .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "summary actions";
    align-items: center;
}

.order-price * {
    margin-right: 0.5rem;
}

.order-highlight-price {
    height: auto;
    font-size: 1.5rem;
    color: #007bff;
}
.order-main-price {
    height: 100%;
    font-size: 1.2rem;
    color: #838383;
}

.order-items {
}

.order-item {
    font-size: 0.8rem;
    color: #838383;
}


.preview-image {
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.preview-image.enlarged {
    transform: scale(3.5);
    z-index: 10;
    position: relative;
    left: 160px;
}