:root {
    --viewport-height: calc(var(--vh, 1vh) * 100);
    --offcanvas-width: 400px;
    --navbar-height: 55px;
    --buttomToolbar-height: 60px;
    --primaryColor: #f39800;
    --primaryColor10: #f398001a;
    --primaryColor20: #f3980033;
    --secondaryColor: #fad071;
    --red-color: #ca032e;
    --text-color: #212529;
    --text-color-light: #9fa0a0;
    --light-color: #f8f8f8;
    --light-grey-color: #efefef;
    --light-grey-color-hover: #d3d5d7;
    --border-color: #d3d5d7;
    --modal-rounded: 10px;
}

html, body {
    font-family: 'Open Sans', 'Noto Sans TC', 'Microsoft JhengHei', 'Arial';
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--text-color);
    overflow: auto;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: 'Open Sans', 'Noto Sans TC', 'Microsoft JhengHei', 'Arial';
    font-weight: 600;
}

img {
    max-width: 100%;
    width: 100%;
}

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.ls-0 {
    letter-spacing: 0;
}

.scroll::-webkit-scrollbar {
    display: block;
    width: 12px;
    height: 12px;
}

.scroll::-webkit-scrollbar-thumb {
    border: none;
    border-radius: 10px;
    background-color: rgb(193 193 193 / 40%);
    transition: all 0.25s ease;
}

.scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgb(168 168 168 / 60%);
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-track {
    background-color: rgb(241 241 241 / 20%);
    border-left: none;
    border-radius: 10px;
}

a, button, input, textarea, select {
    box-shadow: none !important;
    outline: none !important;
}

a {
    word-break: break-all;
}

a, button {
    transition: all .25s ease;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

li + li {
    margin-bottom: 0.3rem;
}

.input-style {
    min-height: 48px;
    margin-bottom: 1rem;
    padding: 10px 20px;
    border-radius: 0.5rem;
    border: none;
}

.single-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.primary-light {
    background-color: var(--primaryColor) !important;
    color: white !important;
    border-color: var(--primaryColor) !important;
}

.secondary-light {
    background-color: var(--secondaryColor) !important;
    color: white !important;
}

.bg-primary {
    background-color: var(--primaryColor) !important;
}

.bg-light {
    background-color: var(--light-color) !important;
}

.bg-gray-light {
    background-color: var(--light-grey-color) !important;
}

.color-primary {
    color: var(--primaryColor) !important;
}

.color-secondary {
    color: var(--secondaryColor) !important;
}

.color-red {
    color: var(--red-color) !important;
}

.color-text {
    color: var(--text-color) !important;
}

.rounded-5 {
    border-radius: 5px !important;
}

.rounded-10 {
    border-radius: 10px !important;
}

.rounded-md {
    border-radius: var(--modal-rounded);
}

.border-active {
    border: solid 1px var(--primaryColor) !important;
}

.btn-gray-light {
    color: var(--text-color);
    background-color: var(--light-grey-color);
}

.btn-gray-light:hover {
    background-color: var(--light-grey-color-hover);
}

.btn-primary {
    color: #fff;
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    border-radius: 10px;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    opacity: 0.8 !important;
}

.btn-primary.disabled, .btn-primary:disabled {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.btn-secondary {
    color: #fff;
    background-color: var(--secondaryColor) !important;
    border-color: var(--secondaryColor) !important;
    border-radius: 10px;
}

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
    background-color: var(--secondaryColor) !important;
    border-color: var(--secondaryColor) !important;
    opacity: 0.5;
}

.btn-outline-primary {
    color: var(--primaryColor) !important;
    background-color: transparent !important;
    border-color: var(--primaryColor) !important;
    border-radius: 10px;
}

.btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:hover {
    opacity: 0.5;
}

.messageContent {
    padding: 10px 25px !important;
    font-size: 18px !important;
    background-color: var(--red-color) !important;
    border-radius: 10px !important;
}

.brickItem {
    max-width: 960px;
    width: calc(100vw - 2rem) !important;
    left: 50% !important;
    transform: translateX(-50%);
    border-radius: 10px !important;
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out;
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    transition: opacity .3s linear;
}

.offcanvas-backdrop.fade {
    opacity: 0 !important;
}

.offcanvas-backdrop.show {
    opacity: .5 !important;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1rem;
}

.offcanvas-header .btn-close {
    padding: .5rem .5rem;
    margin-top: -.5rem;
    margin-right: -.5rem;
    margin-bottom: -.5rem;
}

.offcanvas-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.offcanvas-body {
    flex-grow: 1;
    padding: 1rem 1rem;
    overflow-y: auto;
}

.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--offcanvas-width);
    border-right: 1px solid rgba(0, 0, 0, .2);
    transform: translateX(-100%);
}

.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--offcanvas-width);
    border-left: 1px solid rgba(0, 0, 0, .2);
    transform: translateX(100%);
}

.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: 30vh;
    max-height: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    transform: translateY(-100%);
}

.offcanvas-bottom {
    right: 0;
    left: 0;
    height: 30vh;
    max-height: 100%;
    border-top: 1px solid rgba(0, 0, 0, .2);
    transform: translateY(100%);
}

.offcanvas.show {
    transform: none;
}

.inputStyle input, .inputStyle textarea, .inputStyle .timePicker {
    min-height: 40px;
    background-color: var(--light-grey-color);
    border: none;
    border-radius: 10px;
    transition: all .25s ease;
}

.inputStyle input:not([disabled]):hover, .inputStyle input:not([disabled]):active, .inputStyle input:not([disabled]):focus,
.inputStyle textarea:not([disabled]):hover, .inputStyle textarea:not([disabled]):active, .inputStyle textarea:not([disabled]):focus,
.inputStyle .timePicker:hover {
    background-color: var(--light-grey-color-hover);
}

.qtyWrap {
    padding: 1px 4px;
    background-color: #fff;
    border-radius: 30px;
}

.sexWrap button[data-sex] {
    opacity: unset !important;
}

.sexWrap button[data-sex].active {
    color: #fff !important;
    background-color: var(--primaryColor) !important;
}

#navbar {
    height: var(--navbar-height);
    background-color: #fff;
    box-shadow: 0px 2px 3px -1px hsla(0, 0%, 67.5%, 0.5);
    z-index: 999;
}

#navbar .navbarTitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

#navbar .btn-navbar {
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 50%;
}

#navbar .btn-navbar:hover {
    background-color: var(--light-grey-color);
}

#navbar .btnCart .dvCounter {
    top: -4px !important;
    right: -4px !important;
    text-indent: -3px !important;
}

#navbar .logo-icon {
    width: 40px;
    margin: 10px 5px;
    padding: 4px;
    background-color: #f3f3f3;
    border-radius: 5px;
}

#navbar .nav-item {
    margin: 5px 0;
}

#navbar .nav-link {
    padding: .5rem 1rem;
    font-size: 18px;
    font-weight: 400;
    border-radius: 10px;
    cursor: pointer;
}

#navbar .nav-link:hover {
    background-color: var(--light-grey-color);
}

#navbar .nav-link.active {
    color: #fff;
    background-color: var(--primaryColor);
}

#navbar .nav-link i {
    margin-right: 1rem;
    width: 16px;
    font-size: 16px;
    text-align: center;
}

#navbar .offcanvas-body #installButton {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: calc(var(--offcanvas-width) - 2rem);
    height: 40px;
    border-radius: 12px;
}

#paymentSuccessModaloverlay,
#paymentFailModaloverlay {
    z-index: 1000 !important;
}

#indexWrap .indexIcon,
#selectDiningTypeWrap .indexIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer;
}

#indexWrap .indexIcon:hover,
#selectDiningTypeWrap .indexIcon:hover {
    color: #fff;
    background-color: var(--primaryColor);
}

#orderingWrap .menuTopWrap {
    position: sticky;
    top: var(--navbar-height);
    width: 100%;
    padding: 10px 0 4px;
    margin: 0 0 30px;
    background-color: var(--light-grey-color);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    z-index: 99;
}

#orderingWrap #menuTypebar.scroll {
    overflow-y: auto;
    padding-bottom: 6px;
    background-clip: content-box;
}

#orderingWrap #menuTypebar .item {
    width: auto;
    padding: 5px 10px;
    margin: 0 5px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    border-radius: 15px;
    background-color: white;
    cursor: pointer;
    transition: all .25s ease;
}

#orderingWrap #menuTypebar .item:hover {
    color: var(--primaryColor);
}

#orderingWrap #menuTypebar .item.active {
    color: #fff;
    background-color: var(--primaryColor);
}

#orderingWrap .goTypeInfo,
#cartWrap .goTypeInfo,
#historyInfoWrap .lbSummary {
    padding: 2px 10px;
    color: var(--red-color);
    border: 1px solid var(--red-color);
}

#orderingWrap #orderingArea .menuItem {
    position: relative;
    display: flex;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all .25s ease;
}

#orderingWrap #orderingArea .menuItem:hover {
    transform: scale(1.015);
}

#orderingWrap #orderingArea .menuItem .plusIcon {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 30px;
    height: 30px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

#orderingWrap #orderingArea .menuImageIcon {
    max-width: 100px;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

#orderingWrap #orderingArea .menuImageIcon img {
    border-radius: 8px;
}

#itemDetailWrap .itemContent #productImageWrap {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

#itemDetailWrap .itemContent #productImageWrap img {
    width: 100%;
}

#itemDetailWrap .tagIcon {
    color: var(--text-color);
    border-width: 1px;
    border-color: var(--primaryColor);
    border-radius: 8px;
}

#itemDetailWrap .tagIcon.active {
    border-color: var(--secondaryColor);
    background-color: var(--secondaryColor);
}

#itemDetailWrap .setSelectorWrap {
    padding: 15px 15px 10px;
    margin-bottom: 10px;
    background-color: var(--primaryColor10);
    border-radius: 10px;
}

#itemDetailWrap .setSelectorWrap .optionRow:hover {
    background-color: var(--primaryColor20);
}

#itemDetailWrap .setSelectorWrap .optionRow .checkmark {
    top: -9px;
}

#itemDetailWrap #productSetTagWrap {
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--primaryColor10);
}

#cartWrap .cartList .item-row,
#historyWrap .historyList .item-row,
#historyInfoWrap .orderList .item-row {
    padding: 1rem;
    margin-bottom: 10px;
    background-color: var(--light-color);
    border-radius: 8px;
}

#memberLoginWrap, #memberDataWrap {
    padding: 20px;
    margin: 10px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 1px !important;
}

#memberLoginWrap .btnLogin {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #dadce0;
    border-radius: 50%;
}

#memberLoginWrap .btnLogin:hover, #memberLoginWrap .btnLogin:focus {
    background-color: rgba(66, 133, 244, .08);
    border-color: #d2e3fc;
}

#memberLoginWrap .btnLogin:active {
    background-color: rgba(66, 133, 244, .1);
}

#memberLoginWrap .btnLogin:focus-within {
    outline: 2px solid #00639b !important;
    border-color: transparent;
}

#memberNewWrap div, #memberNewWrap button,
#reservationWrap div, #reservationWrap button {
    white-space: nowrap;
}

#paymentWrap .shadow {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1) !important;
}

#paymentTypeWrap .radioWrap .radio-block:last-child label {
    margin-bottom: 0;
}

#buttomToolbarWrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: var(--buttomToolbar-height);
    background-color: #fff;
    z-index: 998;
}

#buttomToolbarWrap .btnButtomTool {
    padding-top: 2px;
    width: 70px;
    height: var(--buttomToolbar-height);
    padding-top: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 18px;
    cursor: pointer;
}

#buttomToolbarWrap .btnButtomTool:not(.active):hover {
    background-color: var(--light-grey-color);
}

#buttomToolbarWrap .btnButtomTool.active {
    color: var(--primaryColor);
}

#buttomToolbarWrap .btnButtomTool .small {
    padding-top: 2px;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

@media (max-width: 1199px) {
    :root {
        --offcanvas-width: 300px;
    }

    #navbar,
    #itemDetailWrap .itemDetailToolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #navbar #btnCart {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    #buttomToolbarWrap {
        display: none !important;
    }
}

.fade {
    animation-name: fade;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes fade {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}