@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}
#root {
    background:#fafafa;
}

.alert {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "icon message";
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25)
}

.alert.has-title {
    grid-template-areas: "icon title" ".    message"
}

.alert .icon {
    font-size: calc(var(--font-title) + 2px);
    grid-area: icon;
    display: flex;
    flex-direction: column;
    justify-self: center
}

.alert .icon i {
    margin-right: 10px;
    font-size: 25px
}

.alert .title {
    grid-area: title;
    align-self: center
}

.alert .message {
    font-weight: 300;
    font-size: .9rem;
    grid-area: message;
    align-self: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400
}

.alert.success {
    background-color: var(--message-success-bg)
}

.alert.success .icon,
.alert.success .title,
.alert.success .message {
    color: var(--message-success-text)
}

.alert.info {
    background-color: var(--message-info-bg);
    color: var(--message-info-text)
}

.alert.info .icon,
.alert.info .title,
.alert.info .message {
    color: var(--message-info-text)
}

.alert.error {
    background-color: var(--message-error-bg);
    color: var(--message-error-text)
}

.alert.error .icon,
.alert.error .title,
.alert.error .message {
    color: var(--message-error-text)
}

.alert.warning {
    background-color: var(--message-warning-bg);
    color: var(--message-warning-text)
}

.alert.warning .icon,
.alert.warning .title,
.alert.warning .message {
    color: var(--message-warning-text)
}

h1 {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 7px);
    font-style: normal;
    font-weight: bold;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: left;
    color: red
}

h2 {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red
}

h3 {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

h4 {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red
}

h5 {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 4px);
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: .7px;
    text-align: left;
    color: red
}

button {
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: .75rem;
    font-weight: 500;
    text-align: center;
    padding: 10px 18px;
    border: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

button .icon {
    font-size: calc(var(--font-title) + 2px);
    margin-right: 7px
}

button.primary {
    background-color: var(--color-btn-primary);
    color: var(--button-primary-fg)
}

button.success {
    background-color: #4cbba1;
    color: #ffffff;
    padding: 14px;
    text-align: center;
    font-size: calc(var(--font-title) - 3px);
    letter-spacing: .4px;
    cursor: pointer
}

button.disabled {
    background-color: #f5f5f5 !important;
    border-color: #e2e2ea !important;
    color: #696974 !important;
    cursor: not-allowed
}

.checkbox {
    display: grid;
    grid-template-columns: min-content min-content;
    font-weight: 300;
    color: #555;
    grid-gap: 2px
}

.checkbox input {
    vertical-align: middle
}

.checkbox label {
    white-space: nowrap
}

[data-theme=dark] {
    --color-bg: #000000
}

.form-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.form-switch i {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 21px;
    background-color: #e6e6e6;
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all .3s linear
}

.form-switch i::before {
    content: "";
    position: absolute;
    left: 0;
    width: 36px;
    height: 20px;
    border-radius: 11px;
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transition: all .25s linear
}

.form-switch i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 17px;
    height: 17px;
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .24);
    transform: translate3d(2px, 2px, 0);
    transition: all .2s ease-in-out
}

.form-switch:active i::after {
    width: 23px;
    transform: translate3d(2px, 2px, 0)
}

.form-switch:active input:checked+i::after {
    transform: translate3d(16px, 2px, 0)
}

.form-switch input {
    display: none
}

.form-switch input:checked+i {
    background-color: #4bd763
}

.form-switch input:checked+i::before {
    transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0)
}

.form-switch input:checked+i::after {
    transform: translate3d(22px, 2px, 0)
}

.form-item.switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.form-item.switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.form-item.switch .form-input {
    grid-area: b;
    justify-self: end
}

.form-item.switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

form input[type=text],
form input[type=number],
form input[type=password],
form input[type=tel],
form input[type=email],
form textarea {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0;
    transition: all .3s;
    width: 100%;
    -webkit-tap-highlight-color: transparent
}

form input[type=file]::-webkit-file-upload-button {
    border: 1px solid var(--form-element-border);
    background: var(--form-element-bg);
    border-radius: 5px
}

form input[type=file] {
    font-family: Poppins, sans-serif
}

form .preview {
    margin-bottom: 15px
}

form .preview img {
    border-radius: 20px;
    max-width: 100px;
    padding: 0;
    margin: 0;
    border: 3px solid #f1f1f5
}

form .form-input.has-icon {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0;
    transition: all .3s;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    display: flex
}

form .form-input.has-icon .icon {
    width: 30px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    padding-left: 12px
}

form .form-input.has-icon img {
    width: 100%;
    align-self: center
}

form .form-input.has-icon input {
    margin: 0;
    border: 0
}

form .form-input .prepend-text {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--font-title) - 3px);
    line-height: 22px;
    letter-spacing: .25px;
    color: #27283e;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-right: none;
    box-sizing: border-box;
    border-radius: 6px 0px 0px 6px;
    padding: 14.5px 16px
}

form .form-input .has-prepend {
    display: flex
}

form .form-input .has-prepend input {
    border-radius: 0px 6px 6px 0px
}

form .form-text-area label {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 700;
    font-size: calc(var(--font-title) - 1px);
    line-height: 41px;
    color: #27283e;
    margin-left: 0px;
    margin-bottom: 4px
}

form .form-text-area .sub-text {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--font-title) - 5px);
    line-height: 17px;
    letter-spacing: .4px;
    color: #757575;
    margin-bottom: 19px
}

form .form-text-area textarea {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--font-title) - 3px);
    line-height: 17px;
    letter-spacing: .15px
}

form .form-select-icon input {
    background-image: url("/images/form-select-icon.svg");
    background-repeat: no-repeat;
    background-position: right 13px bottom 20px;
    background-position-y: center
}

form .form-items {
    display: grid;
    row-gap: 16px
}

form .form-buttons {
    margin-top: 20px
}

form .select {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0;
    transition: all .3s;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    padding: 10px 14px
}

form .meta {
    margin-top: 5px;
    margin-left: 5px
}

form .error {
    font-size: calc(var(--font-title) - 6px);
    color: var(--form-element-error)
}

form .help {
    font-size: calc(var(--font-title) - 6px);
    color: #6c6c6c
}

form select {
    font-size: calc(var(--font-title) - 4px);
    font-family: Poppins, sans-serif;
    border: none;
    box-sizing: none;
    margin: 0;
    padding: none;
    width: 100%;
    background: transparent
}

form .checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

form ::placeholder {
    color: #9e9e9e;
    opacity: 1
}

form :-ms-input-placeholder {
    color: #9e9e9e
}

form ::-ms-input-placeholder {
    color: #9e9e9e
}

form input::-webkit-outer-spin-button,
form input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

form input[type=number] {
    -moz-appearance: textfield
}

@media(min-width: 768px) {
    form.responsive {
        display: grid;
        grid-template-columns: 180px 4fr 1fr
    }
    form.responsive .form-items>.form-item>label {
        align-self: center;
        text-align: right;
        margin-right: 15px
    }
    form.responsive .form-items {
        row-gap: 25px;
        grid-row: 1;
        grid-column: 1/-1
    }
    form.responsive .form-items>.form-item {
        display: grid;
        grid-template-columns: 180px 4fr 1fr
    }
    form.responsive .form-items>.form-item label {
        grid-row: 1;
        grid-column: 1/2
    }
    form.responsive .form-items>.form-item .form-input {
        grid-row: 1;
        grid-column: 2/3
    }
    form.responsive .form-items>.form-item .meta {
        grid-row: 2;
        grid-column: 2/3
    }
    form.responsive .form-input {
        margin-top: 0px
    }
    form.responsive .form-buttons {
        padding-left: 4px;
        margin-top: 30px;
        grid-row: 2;
        grid-column: 2/3
    }
    form.horizontal .form-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        grid-column-gap: 20px
    }
}

textarea.invalid,
input.invalid,
.input-box.invalid {
    border-color: var(--form-element-error) !important
}

input:disabled {
    background: #f9f9f9 !important
}

.form-input.disabled {
    background: #f9f9f9 !important
}

.form-item {
    position: relative
}

.form-item .required-sign {
    color: #ff8080
}

.form-item label {
    font-size: calc(var(--font-title) - 4px);
    margin-left: 4px
}

.form-item .input-icon {
    position: absolute;
    right: 8px;
    top: 28px;
    cursor: pointer;
    pointer-events: none
}

.form-item .input-icon>img {
    width: 27px
}

.form-item.inline-title {
    background-color: #f9f9f9;
    padding: 8px 18px !important;
    font-weight: 400
}

.DayPicker {
    display: inline-block;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    width: 100%
}

.DayPicker-wrapper {
    position: relative;
    width: 100%;
    flex-direction: row;
    padding-bottom: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0 auto
}

.DayPicker-Months {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}

.DayPicker-Month {
    display: table;
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.DayPicker-NavBar {
    display: flex;
    justify-content: space-between;
    position: relative;
    top: 22px;
    width: 85%;
    margin: 0 auto
}

.DayPicker-NavButton {
    top: 1em;
    right: 1.5em;
    left: auto;
    display: inline-block;
    margin-top: 2px;
    width: 1.25em;
    height: 1.25em;
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    color: #8b9898;
    cursor: pointer
}

.DayPicker-NavButton:hover {
    opacity: .8
}

.DayPicker-NavButton--prev {
    background-image: url("/images/caret-right-icon.svg") !important;
    background-size: 11.9px !important;
    transform: rotate(180deg)
}

.DayPicker-NavButton--next {
    background-image: url("/images/caret-right-icon.svg") !important;
    background-size: 11.9px !important
}

.DayPicker-NavButton--interactionDisabled {
    display: none
}

.DayPicker-Caption {
    display: table-caption;
    text-align: center;
    margin-bottom: 34px
}

.DayPicker-Caption>div {
    font-size: calc(var(--font-title) - 1px);
    font-weight: 700
}

.DayPicker-Weekdays {
    display: table-header-group
}

.DayPicker-WeekdaysRow {
    display: table-row
}

.DayPicker-Weekday {
    display: table-cell;
    padding: 7px;
    color: #27283e;
    text-align: center;
    font-size: calc(var(--font-title) - 5px);
    font-weight: 400
}

.DayPicker-Weekday abbr[title] {
    border-bottom: none;
    text-decoration: none
}

.DayPicker-Body {
    display: table-row-group
}

.DayPicker-Week {
    display: table-row
}

.DayPicker-Week ::before {
    content: "";
    height: 33px;
    display: table-row
}

.DayPicker-Day {
    display: table-cell;
    padding: 7.5px 10px;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    font-size: calc(var(--font-title) - 5px);
    font-weight: 400;
    color: #27283e;
    position: relative;
    z-index: 2
}

.DayPicker-Day--highlighted {
    color: #ffffff !important;
    font-weight: bold
}

.DayPicker-Day--highlighted::after {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #4cbba1;
    border-radius: 50% !important;
    position: absolute;
    z-index: -1;
    left: 3px;
    top: 29px
}

.DayPicker-Day--highlighted.DayPicker-Day--outside::after {
    display: none
}

.DayPicker-Day--today {
    color: #1c1d3e !important;
    font-weight: 400 !important
}

.DayPicker-Day--highlighted.DayPicker-Day--today {
    color: #ffffff !important;
    font-weight: 700 !important
}

.DayPicker-Day.DayPicker-Day--disabled {
    pointer-events: none
}

.DayPicker-WeekNumber {
    display: table-cell;
    padding: .5em;
    min-width: 1em;
    border-right: 1px solid #eaecec;
    color: #8b9898;
    vertical-align: middle;
    text-align: right;
    font-size: .75em;
    cursor: pointer
}

.DayPicker--interactionDisabled .DayPicker-Day {
    cursor: default
}

.DayPicker-Footer {
    padding-top: .5em
}

.DayPicker-TodayButton {
    border: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: #4a90e2;
    font-size: .875em;
    cursor: pointer
}

.DayPicker-Day--today {
    color: #d0021b;
    font-weight: 700
}

.DayPicker-Day--outside {
    color: #8b9898;
    cursor: default
}

.DayPicker-Day--disabled {
    color: #dce0e0 !important;
    cursor: default !important
}

.DayPicker-Day--sunday {
    background-color: #f7f8f8
}

.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
    color: #dce0e0
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
    position: relative;
    background-color: #4a90e2;
    color: #f0f8ff
}

.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
    background-color: #51a0fa
}

.DayPickerInput {
    display: inline-block
}

.DayPickerInput-OverlayWrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998
}

@media(min-width: 1024px) {
    .DayPickerInput-OverlayWrapper {
        position: relative;
        background: unset
    }
}

.DayPickerInput-Overlay {
    border-radius: 10px;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15)
}

.DayPickerInput {
    width: 100%
}

.DayPickerInput input {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0;
    transition: all .3s;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer
}

.form-item.key-value-pair {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "a b" "c c"
}

.form-item.key-value-pair label {
    grid-area: a;
    align-self: flex-start
}

.form-item.key-value-pair .form-input {
    grid-area: b;
    justify-self: end;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.form-item.key-value-pair .form-input span {
    text-align: right
}

.form-item.key-value-pair .form-input .icon {
    font-size: calc(var(--font-title) - 2px);
    padding-left: 5px
}

.form-item.key-value-pair .form-input .icon.warning {
    color: #ff0
}

.form-item.key-value-pair .form-input .icon.failure {
    color: red
}

.form-item.key-value-pair .form-input .icon.success {
    color: green
}

.form-item.key-value-pair .meta {
    grid-area: c !important;
    margin-top: 5px
}

.form-address-search>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.form-address-search>.form-input {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.form-address-search .search {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px
}

.form-address-search .info {
    padding: 15px 18px;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px
}

.form-address-search .info .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.form-address-search .info .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.form-address-search .info .switch .form-input {
    grid-area: b;
    justify-self: end
}

.form-address-search .info .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.form-address-search .info .switch label {
    text-align: left !important
}

.form-address-search .geopoint {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px
}

.dropdown .input-box {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0;
    transition: all .3s;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    padding: 10px 14px;
    font-size: calc(var(--font-title) - 4px);
    font-weight: 400;
    cursor: pointer
}

.dropdown .options {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 25px;
    display: grid;
    grid-gap: 18px;
    font-weight: 400;
    cursor: pointer
}

@media(max-width: 767px) {
    .dropdown .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 998
    }
}

@media(min-width: 768px) {
    .dropdown .options-wrapper {
        position: relative
    }
    .dropdown .options {
        position: absolute;
        top: 100%;
        margin-top: 10px;
        z-index: 999
    }
}

.dropdown .selected .icon {
    color: var(--message-success-text)
}

.dropdown .option {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap
}

.form-select .input-box {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0;
    transition: all .3s;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    padding: 10px 14px;
    font-size: calc(var(--font-title) - 4px);
    font-weight: 400;
    cursor: pointer
}

.form-select.disabled .input-box {
    background-color: #f5f5f5;
    border-color: #e2e2ea;
    color: #696974;
    cursor: auto
}

.form-select .options {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 25px;
    display: grid;
    grid-gap: 18px;
    font-weight: 400;
    cursor: pointer;
    max-height: 400px;
    overflow: hidden auto
}

@media(max-width: 767px) {
    .form-select .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 998
    }
}

@media(min-width: 768px) {
    .form-select .options-wrapper {
        position: relative
    }
    .form-select .options {
        top: 100%;
        margin-top: 10px;
        z-index: 999
    }
}

.form-select .icon {
    margin-right: 12px;
    font-size: calc(var(--font-title) + 12px);
    color: #777
}

.form-select .selected .icon {
    color: var(--message-success-text)
}

.form-select .option {
    display: flex;
    flex-direction: row;
    align-items: center
}

.imgix img {
    display: block;
    width: 100%
}

.imgix_item img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.label {
    margin: 0
}

.time-list {
    display: grid;
    grid-template-columns: repeat(4, min-content);
    grid-gap: 9px !important
}

.time-list .option {
    text-align: center;
    padding: 4px;
    white-space: nowrap
}

.time-list .selected {
    background-color: var(--message-success-bg);
    color: var(--message-success-text);
    border-radius: 4px
}

.duration-picker {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 15px;
    align-items: center
}

.eta-options {
    margin-top: 1rem
}

.eta-item {
    white-space: nowrap
}

.status-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%
}

.status-indicator i {
    font-size: calc(var(--font-title) - 4px);
    color: #fff
}

.status-indicator.primary {
    background-color: #50b5ff
}

.status-indicator.success {
    background-color: #3dd598
}

.status-indicator.failure {
    background-color: #fc5a5a
}

.status-indicator.warning {
    background-color: #ff974a
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.steps {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: center;
    height: fit-content;
    padding: 20px 0 10px
}

.steps .container {
    display: grid;
    justify-content: center;
    position: relative
}

.steps .container .step {
    display: grid;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 40px;
    width: 40px;
    font-size: var(--font-title);
    font-weight: 600;
    border-radius: 50%;
    background-color: #cacaca;
    color: var(--button-success-fg);
    z-index: 1
}

@media(min-width: 768px) {
    .steps .container .step {
        height: 45px;
        width: 45px
    }
}

.steps .container .step.passed {
    background-color: var(--message-info-fg)
}

.steps .container .step.active {
    height: 50px;
    width: 50px;
    background-color: var(--button-success-bg);
    -webkit-animation: scale-up-center .2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: scale-up-center .2s cubic-bezier(0.39, 0.575, 0.565, 1) both
}

@media(min-width: 768px) {
    .steps .container .step.active {
        height: 55px;
        width: 55px
    }
}

.steps .container .title {
    text-align: center;
    text-transform: capitalize;
    font-size: calc(var(--font-title) - 8px);
    margin-top: 5px
}

@media(min-width: 768px) {
    .steps .container .title {
        font-size: 12px
    }
}

.steps .container .line {
    height: 3px;
    width: 60%;
    background: #bfbfbf;
    position: absolute;
    left: 74%;
    top: 33%
}

.steps .container .line.active {
    top: 35%
}

.steps .container .line.passed {
    background-color: var(--message-info-fg);
    -webkit-animation: fade-in-left .2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in-left .2s cubic-bezier(0.39, 0.575, 0.565, 1) both
}

.steps .container:last-child .line {
    display: none
}

progress {
    border: 1px solid #ccc;
    background: #fff;
    height: 8px;
    border-radius: 10px
}

progress::-webkit-progress-bar {
    border-radius: 10px;
    background: #fff
}

progress::-webkit-progress-bar,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
    border-radius: 10px
}

.backoffice {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-areas: "header header" "nav main";
    grid-template-rows: min-content 1fr;
    grid-template-columns: min-content 1fr
}

.backoffice header {
    grid-area: header;
    display: grid;
    width: 100vw;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    padding: 0;
    height: 53px;
    z-index: 1
}

@media(max-width: 767px) {
    .backoffice header {
        grid-template-columns: 40px 1fr 40px
    }
}

@media(min-width: 768px) {
    .backoffice header {
        grid-template-columns: 110px 1fr 110px
    }
}

.backoffice header .logo {
    margin-left: 20px
}

.backoffice header .logo img {
    display: block;
    width: 100%
}

@media(max-width: 767px) {
    .backoffice header .logo.full {
        display: none
    }
}

.backoffice header .logo.icon {
    font-size: calc(var(--font-title) + 2px);
    color: #92929d;
    justify-self: start;
    align-self: center;
    cursor: pointer
}

@media(min-width: 768px) {
    .backoffice header .logo.icon {
        display: none
    }
}

.backoffice header .title {
    text-align: center;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red
}

.backoffice header .initials {
    justify-self: end;
    background-color: #ffc542;
    border-radius: 10px;
    border: 3px solid #f1f1f5;
    margin-right: 20px;
    padding: 3px 4px;
    font-weight: 500;
    color: #fff
}

.backoffice header .userinfo {
    display: none
}

.backoffice header .restaurant {
    display: flex;
    flex-direction: horizontal;
    justify-content: center;
    align-items: center
}

.backoffice header .restaurant .image {
    width: 33px;
    border-radius: 10px;
    border: 3px solid #f1f1f5;
    margin-right: 10px;
    overflow: hidden
}

.backoffice header .restaurant .name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

.backoffice header .restaurant .description,
.backoffice header .restaurant .timezone,
.backoffice header .restaurant .country {
    display: none
}

.backoffice nav {
    grid-area: nav;
    display: flex;
    overflow-y: scroll;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    flex-direction: column;
    z-index: 999;
    scrollbar-width: none;
    scrollbar-color: transparent transparent
}

.backoffice nav::-webkit-scrollbar {
    width: 1px
}

.backoffice nav::-webkit-scrollbar-track {
    background: transparent
}

.backoffice nav::-webkit-scrollbar-thumb {
    background-color: transparent
}

@media(max-width: 767px) {
    .backoffice nav {
        position: fixed;
        top: 53px;
        left: 0;
        transform: translateX(-105%);
        transition: transform 300ms;
        height: calc(100vh - 53px)
    }
    .backoffice nav.show {
        transform: none
    }
}

.backoffice nav .title {
    text-transform: uppercase;
    color: #92929d;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 5px;
    margin-left: 20px
}

.backoffice nav .link {
    display: flex;
    flex-direction: row;
    margin: 5px 0;
    padding: 8px 40px;
    padding-left: 16px;
    border-left: 4px solid var(--card-bg);
    align-items: center;
    cursor: pointer
}

.backoffice nav .link .icon {
    color: #92929d;
    font-size: calc(var(--font-title) + 3px);
    margin-right: 16px
}

.backoffice nav .link .label {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    display: inline-block;
    white-space: nowrap
}

.backoffice nav .link.selected {
    border-left: 4px solid var(--color-primary)
}

.backoffice nav .link.selected .icon,
.backoffice nav .link.selected .label {
    color: var(--color-primary)
}

.backoffice main {
    grid-area: main;
    padding: 20px;
    overflow-y: scroll
}

.website {
    display: grid;
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    grid-template-areas: "header header" "nav main" "footer footer";
    grid-template-rows: min-content 1fr min-content;
    grid-template-columns: min-content 1fr;
    overflow-y: hidden
}

.website header {
    grid-area: header;
    display: grid;
    width: 100vw;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    padding: 0;
    height: 53px;
    z-index: 1
}

@media(max-width: 767px) {
    .website header {
        grid-template-columns: 40px 1fr 40px
    }
}

@media(min-width: 768px) {
    .website header {
        grid-template-columns: 110px 1fr 110px
    }
}

.website header .logo {
    margin-left: 20px
}

.website header .logo img {
    display: block;
    width: 100%
}

@media(max-width: 767px) {
    .website header .logo.full {
        display: none
    }
}

.website header .logo.icon {
    font-size: calc(var(--font-title) + 2px);
    color: #92929d;
    justify-self: start;
    align-self: center;
    cursor: pointer
}

@media(min-width: 768px) {
    .website header .logo.icon {
        display: none
    }
}

.website header .title {
    text-align: center;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red
}

.website header .initials {
    justify-self: end;
    background-color: #ffc542;
    border-radius: 10px;
    border: 3px solid #f1f1f5;
    margin-right: 20px;
    padding: 3px 4px;
    font-weight: 500;
    color: #fff
}

.website header .userinfo {
    display: none
}

.website header .restaurant {
    display: flex;
    flex-direction: horizontal;
    justify-content: center;
    align-items: center
}

.website header .restaurant .image {
    width: 33px;
    border-radius: 10px;
    border: 3px solid #f1f1f5;
    margin-right: 10px;
    overflow: hidden
}

.website header .restaurant .name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

.website header .restaurant .description,
.website header .restaurant .timezone,
.website header .restaurant .country {
    display: none
}

.website nav {
    grid-area: nav;
    display: flex;
    overflow-y: scroll;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    flex-direction: column;
    z-index: 999;
    scrollbar-width: none;
    scrollbar-color: transparent transparent
}

.website nav::-webkit-scrollbar {
    width: 1px
}

.website nav::-webkit-scrollbar-track {
    background: transparent
}

.website nav::-webkit-scrollbar-thumb {
    background-color: transparent
}

@media(max-width: 767px) {
    .website nav {
        position: fixed;
        top: 53px;
        left: 0;
        transform: translateX(-105%);
        transition: transform 300ms;
        height: calc(100vh - 53px)
    }
    .website nav.show {
        transform: none
    }
}

.website nav .title {
    text-transform: uppercase;
    color: #92929d;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 20px;
    margin-bottom: 5px;
    margin-left: 20px
}

.website nav .link {
    display: flex;
    flex-direction: row;
    margin: 5px 0;
    padding: 8px 40px;
    padding-left: 16px;
    border-left: 4px solid var(--card-bg);
    align-items: center;
    cursor: pointer
}

.website nav .link .icon {
    color: #92929d;
    font-size: calc(var(--font-title) + 3px);
    margin-right: 16px
}

.website nav .link .label {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    display: inline-block;
    white-space: nowrap
}

.website nav .link.selected {
    border-left: 4px solid var(--color-primary)
}

.website nav .link.selected .icon,
.website nav .link.selected .label {
    color: var(--color-primary)
}

.website main {
    grid-area: main;
    padding: 20px;
    overflow-y: scroll
}

.website .website-bottom-nav-bar {
    grid-area: footer
}

@media(max-width: 767px) {
    #intro-widget {
        padding: 10px 25px
    }
    #intro-widget #logo {
        display: none
    }
}

@media(min-width: 768px) {
    #intro-widget {
        display: grid;
        padding: 25px;
        background-color: #fff;
        border-right: 1px solid #eee
    }
    #intro-widget #logo img {
        height: 25px;
        margin-bottom: 20px
    }
}

#intro-widget .graphic {
    text-align: center
}

#intro-widget .graphic img {
    width: 70%;
    margin-bottom: 10px
}

#intro-widget .marketing-message {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 7px);
    font-style: normal;
    font-weight: bold;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    text-align: center
}

.document-edit-widget {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.document-edit-widget .title {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

.document-edit-widget form {
    margin-top: 20px;
    padding: 15px 18px
}

.document-edit-widget form .form-sub-header {
    margin: 20px 0 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #f1f1f5;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

.store-select-widget .list {
    display: grid;
    grid-gap: 20px
}

.store-select-widget .item {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    display: grid;
    grid-template-areas: "a b" "a c";
    grid-template-columns: min-content 1fr;
    align-items: center;
    cursor: pointer
}

.store-select-widget .item .icon {
    margin-top: 1px;
    margin-right: 7px
}

.store-select-widget .item .icon i {
    grid-area: a;
    border-radius: 50%;
    padding: 5px;
    background-color: var(--color-secondary);
    color: #fff
}

.store-select-widget .item .name {
    grid-area: b;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red;
    margin-bottom: 2px
}

.store-select-widget .item .address {
    grid-area: c;
    font-style: normal;
    font-weight: normal;
    font-size: calc(var(--font-title) - 4px);
    line-height: 22px;
    letter-spacing: .1px;
    color: #666
}

.restaurant-website-info .form-input .photo,
.restaurant-website-info .form-input .hero {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb;
    margin-bottom: 20px
}

.restaurant-website-info .form-input .photo .item,
.restaurant-website-info .form-input .hero .item {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px
}

.restaurant-website-info .form-input .photo .item .switch,
.restaurant-website-info .form-input .hero .item .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.restaurant-website-info .form-input .photo .item .switch label,
.restaurant-website-info .form-input .hero .item .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.restaurant-website-info .form-input .photo .item .switch .form-input,
.restaurant-website-info .form-input .hero .item .switch .form-input {
    grid-area: b;
    justify-self: end
}

.restaurant-website-info .form-input .photo .item .switch .meta,
.restaurant-website-info .form-input .hero .item .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.restaurant-website-info .form-input .photo .item .switch label,
.restaurant-website-info .form-input .hero .item .switch label {
    text-align: left !important
}

.restaurant-website-info .form-input .photo .actions,
.restaurant-website-info .form-input .hero .actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.restaurant-website-info .form-input .photo .actions .action,
.restaurant-website-info .form-input .hero .actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.restaurant-website-info .form-input .photo .actions .action img,
.restaurant-website-info .form-input .hero .actions .action img {
    width: 26px;
    margin-right: 5px
}

.restaurant-website-info .form-input .heros button,
.restaurant-website-info .form-input .photos button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg)
}

.restaurant-website-info .photos-form-item>label,
.restaurant-website-info .heros-form-item>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.pizza-edit-widget .pizza-sizes-form-item>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.pizza-edit-widget .sizes {
    display: grid;
    grid-row-gap: 20px
}

.pizza-edit-widget .size {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.pizza-edit-widget .size .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.pizza-edit-widget .size .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.pizza-edit-widget .size .switch .form-input {
    grid-area: b;
    justify-self: end
}

.pizza-edit-widget .size .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.pizza-edit-widget .size .name {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px
}

.pizza-edit-widget .size .spec {
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px;
    padding: 15px 18px
}

.pizza-edit-widget .size .spec .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.pizza-edit-widget .size .spec .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.pizza-edit-widget .size .spec .switch .form-input {
    grid-area: b;
    justify-self: end
}

.pizza-edit-widget .size .spec .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.pizza-edit-widget .size .spec .switch label {
    text-align: left !important
}

.pizza-edit-widget .remove-toppings-form-item>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.pizza-edit-widget .remove-toppings-form-item .list {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    display: grid;
    grid-gap: 20px;
    margin-bottom: 25px
}

.pizza-edit-widget .remove-toppings-form-item .list .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.pizza-edit-widget .remove-toppings-form-item .list .item input {
    margin-right: 20px
}

.pizza-edit-widget .remove-toppings-form-item .list .item .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.pizza-edit-widget .remove-toppings-form-item .list .item .action img {
    width: 26px;
    margin-right: 5px
}

.pizza-edit-widget .remove-toppings-form-item .actions {
    margin-top: 4px
}

.pizza-edit-widget .remove-toppings-form-item .actions button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg)
}

.deal-edit-widget .deal-pizzas-form-item>label,
.deal-edit-widget .deal-items-form-item>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.deal-edit-widget .deal-items .list,
.deal-edit-widget .deal-pizzas .list {
    display: grid;
    grid-gap: 20px;
    margin-bottom: 20px
}

.deal-edit-widget .deal-items .item,
.deal-edit-widget .deal-pizzas .item {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb
}

.deal-edit-widget .deal-items .item .content,
.deal-edit-widget .deal-pizzas .item .content {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff
}

.deal-edit-widget .deal-items .item .actions,
.deal-edit-widget .deal-pizzas .item .actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.deal-edit-widget .deal-items .item .actions .action,
.deal-edit-widget .deal-pizzas .item .actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.deal-edit-widget .deal-items .item .actions .action img,
.deal-edit-widget .deal-pizzas .item .actions .action img {
    width: 26px;
    margin-right: 5px
}

.deal-edit-widget .deal-items .item .info,
.deal-edit-widget .deal-pizzas .item .info {
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-gap: 20px;
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px
}

.deal-edit-widget .deal-items .item .info label,
.deal-edit-widget .deal-items .item .info .meta,
.deal-edit-widget .deal-pizzas .item .info label,
.deal-edit-widget .deal-pizzas .item .info .meta {
    font-weight: normal
}

.deal-edit-widget .deal-items .actions button,
.deal-edit-widget .deal-pizzas .actions button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg)
}

.deal-edit-widget .pizza-list .head {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    background-color: #f9f9f9
}

.deal-edit-widget .pizza-list .body {
    padding: 15px 18px;
    display: grid;
    grid-gap: 20px
}

.deal-edit-widget .pizza-list .head,
.deal-edit-widget .pizza {
    display: grid;
    grid-template-columns: min-content 1fr 100px;
    align-items: center;
    grid-gap: 15px
}

.deal-edit-widget .deal-items .form-item.modifiers>label {
    display: block;
    margin: 0;
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    background-color: #f9f9f9
}

.deal-edit-widget .deal-items .modifier,
.deal-edit-widget .deal-items .modifier-info {
    box-shadow: none !important;
    border-radius: 0 !important
}

.deal-edit-widget .deal-items .modifier {
    margin-bottom: 0px !important
}

.deal-edit-widget .deal-items .modifier-list-actions {
    margin: 15px
}

.deal-edit-widget .deal-items .modifier-list-actions button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg)
}

.deal-edit-widget .deal-items .form-item.modifiers>.meta {
    display: none !important
}

.form-item-price-spec>label {
    margin-top: 12px;
    align-self: flex-start !important;
    margin-top: 34px
}

.form-item-price-spec>.form-input {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px
}

.form-item-price-spec>.form-input .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.form-item-price-spec>.form-input .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.form-item-price-spec>.form-input .switch .form-input {
    grid-area: b;
    justify-self: end
}

.form-item-price-spec>.form-input .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.form-item-price-spec>.form-input .switch label {
    text-align: left !important
}

.price-spec {
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px;
    padding: 0
}

.price-spec .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.price-spec .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.price-spec .switch .form-input {
    grid-area: b;
    justify-self: end
}

.price-spec .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.price-spec .switch label {
    text-align: left !important
}

.price-spec .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.price-spec .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.price-spec .switch .form-input {
    grid-area: b;
    justify-self: end
}

.price-spec .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.price-spec .base-price,
.price-spec .extra-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.price-spec .base-price input,
.price-spec .extra-price input {
    max-width: 80px
}

.price-spec .extra-price.form-item {
    margin-right: 15px
}

.price-spec .extra {
    display: grid;
    grid-template-columns: 4fr 1fr;
    align-items: center;
    margin-bottom: 15px
}

.restaurant-browse-page .list,
.restaurant-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-gap: 15px
}

.restaurant-browse-page .list .restaurant,
.restaurant-list .restaurant {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden
}

.restaurant-browse-page .list .restaurant .name,
.restaurant-list .restaurant .name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    padding: 10px 10px 0
}

.restaurant-browse-page .list .restaurant .timezone,
.restaurant-list .restaurant .timezone {
    padding: 0 10px 10px;
    font-size: calc(var(--font-title) - 6px);
    color: #92929d
}

.restaurant-browse-page .list .restaurant .description,
.restaurant-browse-page .list .restaurant .country,
.restaurant-list .restaurant .description,
.restaurant-list .restaurant .country {
    display: none
}

.store-card-view {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: flex;
    flex-direction: row;
    padding: 20px 20px;
    cursor: pointer
}

.store-card-view .name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.store-card-view .image {
    width: 60px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 22px
}

.store-card-view .restaurant-name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 8px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: -1px
}

.store-card-view .store-name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    color: #4c4c77;
    margin-top: -1px
}

.store-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-gap: 20px
}

.form-input .modifier-list .modifier {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb;
    margin-bottom: 20px
}

.form-input .modifier-list .modifier .modifier-info {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff
}

.form-input .modifier-list .modifier .modifier-info .header {
    display: grid;
    grid-template-columns: 1fr 60px 60px;
    grid-column-gap: 10px;
    padding: 15px
}

.form-input .modifier-list .modifier .modifier-info>.meta {
    margin: 0;
    padding: 0 15px 15px;
    border-bottom: 1px solid #f1f1f5
}

.form-input .modifier-list .modifier .modifier-info>.badges {
    display: flex;
    flex-direction: row;
    margin-left: 15px;
    margin-bottom: 12px
}

.form-input .modifier-list .modifier .modifier-info>.badges .badge {
    margin-right: 8px;
    display: inline
}

.form-input .modifier-list .modifier .modifier-info .allow-multiple {
    padding: 15px 0;
    border-bottom: 1px solid #f1f1f5
}

.form-input .modifier-list .modifier .modifier-info .allow-multiple .switch {
    padding: 0px 15px;
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.form-input .modifier-list .modifier .modifier-info .allow-multiple .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.form-input .modifier-list .modifier .modifier-info .allow-multiple .switch .form-input {
    grid-area: b;
    justify-self: end
}

.form-input .modifier-list .modifier .modifier-info .allow-multiple .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.form-input .modifier-list .modifier .modifier-actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.form-input .modifier-list .modifier .modifier-actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.form-input .modifier-list .modifier .modifier-actions .action img {
    width: 26px;
    margin-right: 5px
}

.form-input .modifier-options .head {
    padding: 15px 15px 4px 15px;
    font-size: 13px
}

.form-input .modifier-options>.meta {
    margin: 0;
    padding: 0 15px 15px
}

.form-input .modifier-option {
    padding: 0px 15px;
    display: grid;
    grid-template-columns: 1fr 60px min-content;
    grid-column-gap: 10px;
    margin-bottom: 15px;
    align-items: center
}

.form-input .modifier-option .actions {
    display: grid;
    grid-template-columns: repeat(3, min-content)
}

.form-input .modifier-option .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer;
    font-size: 25px
}

.form-input .modifier-option .action img {
    width: 26px;
    margin-right: 5px
}

.form-input .modifier-list-actions button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg)
}

.form-item.modifiers>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.pizza-settings-edit-widget .form-input .topping,
.pizza-settings-edit-widget .form-input .pizza-size {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb;
    margin-bottom: 20px
}

.pizza-settings-edit-widget .form-input .topping .info,
.pizza-settings-edit-widget .form-input .pizza-size .info {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px
}

.pizza-settings-edit-widget .form-input .topping .info .switch,
.pizza-settings-edit-widget .form-input .pizza-size .info .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.pizza-settings-edit-widget .form-input .topping .info .switch label,
.pizza-settings-edit-widget .form-input .pizza-size .info .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.pizza-settings-edit-widget .form-input .topping .info .switch .form-input,
.pizza-settings-edit-widget .form-input .pizza-size .info .switch .form-input {
    grid-area: b;
    justify-self: end
}

.pizza-settings-edit-widget .form-input .topping .info .switch .meta,
.pizza-settings-edit-widget .form-input .pizza-size .info .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.pizza-settings-edit-widget .form-input .topping .info .switch label,
.pizza-settings-edit-widget .form-input .pizza-size .info .switch label {
    text-align: left !important
}

.pizza-settings-edit-widget .form-input .topping .actions,
.pizza-settings-edit-widget .form-input .pizza-size .actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.pizza-settings-edit-widget .form-input .topping .actions .action,
.pizza-settings-edit-widget .form-input .pizza-size .actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.pizza-settings-edit-widget .form-input .topping .actions .action img,
.pizza-settings-edit-widget .form-input .pizza-size .actions .action img {
    width: 26px;
    margin-right: 5px
}

.pizza-settings-edit-widget .form-input .toppings button,
.pizza-settings-edit-widget .form-input .pizza-sizes button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg)
}

.pizza-settings-edit-widget .pizza-sizes-form-item>label,
.pizza-settings-edit-widget .toppings-list-form-item>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.item-spec-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 15px
}

.item-spec {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb;
    display: grid;
    grid-template-rows: 1fr min-content;
    cursor: pointer;
    background-color: #fafafb
}

.item-spec .body {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas: "a d" "b d" "c d"
}

.item-spec .image {
    overflow: hidden;
    grid-area: d;
    width: 100px;
    margin-left: 10px
}

.item-spec .image img {
    border-radius: 10px
}

.item-spec .name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    grid-area: a;
    align-self: flex-start
}

.item-spec .description {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 8px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    font-size: calc(var(--font-title) - 5px);
    grid-area: b;
    align-self: flex-start
}

.item-spec .price {
    grid-area: c;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    color: var(--color-secondary);
    align-self: flex-end
}

.item-spec .actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.item-spec .actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.item-spec .actions .action img {
    width: 26px;
    margin-right: 5px
}

.backoffice .category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-gap: 15px
}

.backoffice .category {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb
}

.backoffice .category .image {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px
}

.backoffice .category .name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    padding-left: 6px
}

.backoffice .category .description {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 8px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    padding-left: 6px
}

.backoffice .category .body {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
    padding: 10px
}

.backoffice .category .actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.backoffice .category .actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.backoffice .category .actions .action img {
    width: 26px;
    margin-right: 5px
}

.printer-queue {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.printer-queue .title {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

.printer-queue .order-list-view {
    display: grid;
    grid-template-areas: "restaurant-icon  store-name" "restaurant-icon  collection-type" ".                grand-total" ".                actions";
    grid-template-columns: min-content 1fr min-content;
    padding: 18px 0;
    border-bottom: 1px solid #f1f1f5
}

.printer-queue .order-list-view:last-child {
    border-bottom: none
}

.printer-queue .order-list-view .imgix {
    grid-area: restaurant-icon;
    margin: 0 15px;
    align-self: flex-start;
    width: 45px;
    border-radius: 10px;
    border: 3px solid #f1f1f5;
    overflow: hidden
}

.printer-queue .order-list-view .store-name {
    grid-area: store-name;
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 2px);
    line-height: 24px;
    color: #000521;
    align-self: center
}

.printer-queue .order-list-view .grand-total {
    grid-area: grand-total;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: calc(var(--font-title) - 4px);
    line-height: 21px;
    color: #fa7268
}

.printer-queue .order-list-view .collection-type {
    grid-area: collection-type;
    white-space: nowrap;
    align-self: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--font-title) - 4px);
    line-height: 21px;
    color: #696974
}

.printer-queue .order-list-view .message {
    grid-area: message
}

.printer-queue .order-list-view .status {
    grid-area: status;
    white-space: nowrap;
    justify-self: start;
    align-self: center
}

.printer-queue .order-list-view .actions {
    grid-area: actions;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px dashed #e9ecf3
}

.printer-queue .order-list-view .actions {
    display: flex;
    flex-direction: row
}

.printer-queue .order-list-view .actions button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg);
    border-radius: 4px;
    padding: 0 10px;
    font-size: calc(var(--font-title) - 7px);
    font-weight: 400;
    font-size: calc(var(--font-title) - 6px);
    box-shadow: none;
    margin-right: 7px
}

.printer-queue .order-list-view .actions .accept-order {
    background-color: transparent;
    border: 1px solid var(--button-success-bg);
    color: #0e9347
}

.printer-queue .order-list-view .actions .reject-order {
    background-color: transparent;
    border: 1px solid #fc5a5a;
    color: #fc5a5a
}

.store-edit-widget .form-address>.form-input {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px
}

.store-edit-widget .form-address>.form-input .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.store-edit-widget .form-address>.form-input .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.store-edit-widget .form-address>.form-input .switch .form-input {
    grid-area: b;
    justify-self: end
}

.store-edit-widget .form-address>.form-input .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.store-edit-widget .form-address>.form-input .switch label {
    text-align: left !important
}

.store-edit-widget .form-address>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.coupon-card {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb;
    display: grid;
    grid-template-rows: 1fr min-content;
    cursor: pointer;
    background-color: #fafafb;
    margin: 15px 0
}

.coupon-card .body {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas: "a d" "b d" "c d"
}

.coupon-card .name {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    grid-area: a;
    align-self: flex-start
}

.coupon-card .description {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 8px);
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red;
    font-size: calc(var(--font-title) - 5px);
    grid-area: b;
    align-self: flex-start
}

.coupon-card .actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.coupon-card .actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.coupon-card .actions .action img {
    width: 26px;
    margin-right: 5px
}

.coupon-edit-widget .form-address>.form-input {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px
}

.coupon-edit-widget .form-address>.form-input .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.coupon-edit-widget .form-address>.form-input .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.coupon-edit-widget .form-address>.form-input .switch .form-input {
    grid-area: b;
    justify-self: end
}

.coupon-edit-widget .form-address>.form-input .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.coupon-edit-widget .form-address>.form-input .switch label {
    text-align: left !important
}

.coupon-edit-widget .form-address>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.modal.loyalty-card-modal {
    max-width: 450px
}

.modal.loyalty-card-modal>.close {
    display: none
}

.modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body {
    position: relative;
    margin-top: 30px;
    text-align: center
}

.modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body .header-icon {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    width: 100%
}

.modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body .header-icon .bg {
    fill: var(--color-primary)
}

.modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body .header-text {
    font-weight: 400;
    font-size: 20px
}

.modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body .loyalty-card {
    width: unset
}

@media(min-width: 1024px) {
    .modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body .loyalty-card {
        margin: 0 15px
    }
}

.modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body .subtitle {
    font-size: 16px
}

.modal.loyalty-card-modal>.loyalty-card-modal-data>.loyalty-card-modal-body .close-link {
    font-size: calc(var(--font-title) - 2px);
    margin-top: 30px;
    cursor: pointer
}

@media(min-width: 768px) {
    .backoffice .order-history-page form>.form-items>.form-item {
        max-width: 300px
    }
}

.backoffice .order-history-page .date-range {
    margin-top: 12px;
    font-style: italic;
    font-size: calc(var(--font-title) - 5px);
    padding-left: 6px
}

.backoffice .order-history-page .summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-row-gap: 20px;
    grid-column-gap: 10px;
    margin: 20px 0px
}

.backoffice .order-history-page .summary .statistic {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 10px 20px 15px
}

.backoffice .order-history-page .summary .statistic .title {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 6px);
    line-height: 24px;
    letter-spacing: .1px;
    color: #555
}

.backoffice .order-history-page .summary .statistic .value {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    align-items: center;
    margin-top: 10px
}

.backoffice .order-history-page .summary .statistic .prefix {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--font-title) + 6px);
    color: #171725
}

.backoffice .order-history-page .summary .statistic .suffix {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--font-title) - 6px);
    line-height: 24px;
    letter-spacing: .1px;
    color: #777;
    margin-left: 8px
}

.backoffice .order-history-page .summary .statistic.cash .suffix,
.backoffice .order-history-page .summary .statistic.credit-card .suffix {
    color: #3dd598
}

.backoffice .order-history-page .summary .statistic.pickup .suffix,
.backoffice .order-history-page .summary .statistic.delivery .suffix {
    color: #ff974a
}

.backoffice .order-history-page .summary .statistic.dine-in .suffix {
    color: #a461d8
}

.backoffice .order-history-page .list {
    display: grid;
    grid-gap: 25px
}

.backoffice .order-history-page .order-list-view {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-areas: "status-indicator collection-type status" ".                time            grand-total" ".                message         message" ".                actions         actions";
    grid-template-columns: min-content 1fr min-content;
    padding: 18px 0
}

.backoffice .order-history-page .order-list-view .status-indicator {
    grid-area: status-indicator;
    margin: 0 15px;
    align-self: center
}

.backoffice .order-history-page .order-list-view .collection-type {
    grid-area: collection-type;
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 2px);
    line-height: 24px;
    color: #000521;
    align-self: center
}

.backoffice .order-history-page .order-list-view .grand-total {
    grid-area: grand-total;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    font-size: calc(var(--font-title) - 4px);
    line-height: 21px;
    color: #fa7268;
    align-self: center;
    text-align: right
}

.backoffice .order-history-page .order-list-view .time {
    grid-area: time;
    white-space: nowrap;
    align-self: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-size: calc(var(--font-title) - 4px);
    line-height: 21px;
    color: #696974
}

.backoffice .order-history-page .order-list-view .message {
    grid-area: message
}

.backoffice .order-history-page .order-list-view .status {
    grid-area: status;
    white-space: nowrap;
    justify-self: end;
    align-self: center
}

.backoffice .order-history-page .order-list-view .actions {
    grid-area: actions
}

.backoffice .order-history-page .order-list-view .status {
    margin-right: 20px
}

.backoffice .order-history-page .order-list-view .grand-total,
.backoffice .order-history-page .order-list-view .message {
    padding-right: 20px
}

.backoffice .order-history-page .order-list-view .time,
.backoffice .order-history-page .order-list-view .grand-total,
.backoffice .order-history-page .order-list-view .message {
    padding-bottom: 15px;
    border-bottom: 1px dashed #e9ecf3;
    margin-bottom: 15px
}

.backoffice .order-history-page .order-list-view .time,
.backoffice .order-history-page .order-list-view .grand-total {
    margin-top: 8px
}

.backoffice .order-history-page .order-list-view .actions {
    display: flex;
    flex-direction: row
}

.backoffice .order-history-page .order-list-view .actions button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg);
    border-radius: 4px;
    padding: 0 10px;
    font-size: calc(var(--font-title) - 7px);
    font-weight: 400;
    font-size: calc(var(--font-title) - 6px);
    box-shadow: none;
    margin-right: 10px
}

.backoffice .order-history-page .order-list-view .actions .accept-order {
    background-color: transparent;
    border: 1px solid var(--button-success-bg);
    color: #0e9347
}

.backoffice .order-history-page .order-list-view .actions .reject-order {
    background-color: transparent;
    border: 1px solid #fc5a5a;
    color: #fc5a5a
}

.store-timings-edit-widget .dow>label {
    margin-top: 12px;
    align-self: flex-start !important;
    font-weight: 500
}

.store-timings-edit-widget .dow>.form-input {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px;
    padding: 0;
    grid-gap: 0
}

.store-timings-edit-widget .dow>.form-input .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.store-timings-edit-widget .dow>.form-input .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.store-timings-edit-widget .dow>.form-input .switch .form-input {
    grid-area: b;
    justify-self: end
}

.store-timings-edit-widget .dow>.form-input .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.store-timings-edit-widget .dow>.form-input .switch label {
    text-align: left !important
}

.store-timings-edit-widget .hours {
    margin: 5px 0px
}

.store-timings-edit-widget .session:first-child>.form-item:first-child {
    margin: 0;
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    background-color: #f9f9f9;
    font-weight: 500
}

.store-timings-edit-widget .session .form-item {
    padding: 10px 15px
}

.delivery-settings-widget .form-input .delivery-suburb {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-rows: 1fr min-content;
    background-color: #fafafb;
    margin-bottom: 20px
}

.delivery-settings-widget .form-input .delivery-suburb .info {
    border-bottom: 3px solid #f1f1f5;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px 15px;
    display: grid;
    grid-gap: 18px
}

.delivery-settings-widget .form-input .delivery-suburb .info .switch {
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "a b" "c d"
}

.delivery-settings-widget .form-input .delivery-suburb .info .switch label {
    grid-area: a;
    align-self: center;
    margin-left: 8px
}

.delivery-settings-widget .form-input .delivery-suburb .info .switch .form-input {
    grid-area: b;
    justify-self: end
}

.delivery-settings-widget .form-input .delivery-suburb .info .switch .meta {
    grid-area: c !important;
    margin-top: -3px
}

.delivery-settings-widget .form-input .delivery-suburb .info .switch label {
    text-align: left !important
}

.delivery-settings-widget .form-input .delivery-suburb .actions {
    padding: 5px 12px;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: left
}

.delivery-settings-widget .form-input .delivery-suburb .actions .action {
    font-size: calc(var(--font-title) + 12px);
    color: #999;
    cursor: pointer
}

.delivery-settings-widget .form-input .delivery-suburb .actions .action img {
    width: 26px;
    margin-right: 5px
}

.delivery-settings-widget .form-input .delivery-suburbs button {
    color: var(--button-primary-bg);
    background-color: transparent;
    border: 1px solid var(--button-primary-bg)
}

.delivery-settings-widget .delivery-suburbs-form-item>label {
    margin-top: 12px;
    align-self: flex-start !important
}

.payments-page .body {
    display: grid;
    grid-gap: 20px
}

@media(min-width: 768px) {
    .payments-page .body {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
    }
}

.payments-page .update-payout-schedule,
.payments-page .payout-schedule,
.payments-page .current-external-account,
.payments-page .add-external-account,
.payments-page .connected-account {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.payments-page .update-payout-schedule form,
.payments-page .payout-schedule form,
.payments-page .current-external-account form,
.payments-page .add-external-account form,
.payments-page .connected-account form {
    padding: 20px 0
}

.payments-page .update-payout-schedule .title,
.payments-page .payout-schedule .title,
.payments-page .current-external-account .title,
.payments-page .add-external-account .title,
.payments-page .connected-account .title {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

.payments-page .update-payout-schedule .form-item,
.payments-page .payout-schedule .form-item,
.payments-page .current-external-account .form-item,
.payments-page .add-external-account .form-item,
.payments-page .connected-account .form-item {
    padding: 0 15px
}

.payments-page .update-payout-schedule .actions,
.payments-page .payout-schedule .actions,
.payments-page .current-external-account .actions,
.payments-page .add-external-account .actions,
.payments-page .connected-account .actions {
    border-top: 1px solid #f1f1f5;
    padding: 15px 18px;
    background-color: #fafafb;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center
}

.payments-page .update-payout-schedule .actions button,
.payments-page .payout-schedule .actions button,
.payments-page .current-external-account .actions button,
.payments-page .add-external-account .actions button,
.payments-page .connected-account .actions button {
    margin-right: 10px
}

.payments-page .update-payout-schedule .actions a,
.payments-page .payout-schedule .actions a,
.payments-page .current-external-account .actions a,
.payments-page .add-external-account .actions a,
.payments-page .connected-account .actions a {
    font-family: var(--font-family);
    font-size: .75rem;
    font-weight: 500;
    margin-left: 6px
}

.payments-page .update-payout-schedule .actions a.cancel,
.payments-page .payout-schedule .actions a.cancel,
.payments-page .current-external-account .actions a.cancel,
.payments-page .add-external-account .actions a.cancel,
.payments-page .connected-account .actions a.cancel {
    color: var(--message-error-fg)
}

.payments-page .update-payout-schedule .actions button,
.payments-page .payout-schedule .actions button,
.payments-page .current-external-account .actions button,
.payments-page .add-external-account .actions button,
.payments-page .connected-account .actions button {
    margin-right: 10px
}

.payments-page .add-external-account .StripeElement {
    padding: 15px 18px
}

.payments-page .update-payout-schedule,
.payments-page .payout-schedule {
    margin-top: 20px
}

.backoffice-menu-page form {
    margin-bottom: 25px
}

@media(min-width: 768px) {
    .backoffice-menu-page form {
        max-width: 300px
    }
}

.order-settings-page .body {
    display: grid;
    grid-gap: 20px
}

@media(min-width: 768px) {
    .order-settings-page .body {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
    }
}

.order-settings-page .checkout-settings,
.order-settings-page .order-settings,
.order-settings-page .printer-settings {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.order-settings-page .checkout-settings form,
.order-settings-page .order-settings form,
.order-settings-page .printer-settings form {
    padding: 20px 0
}

.order-settings-page .checkout-settings .title,
.order-settings-page .order-settings .title,
.order-settings-page .printer-settings .title {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red
}

.order-settings-page .checkout-settings .form-item,
.order-settings-page .order-settings .form-item,
.order-settings-page .printer-settings .form-item {
    padding: 0 15px
}

.order-settings-page .checkout-settings .actions,
.order-settings-page .order-settings .actions,
.order-settings-page .printer-settings .actions {
    border-top: 1px solid #f1f1f5;
    padding: 15px 18px;
    background-color: #fafafb;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center
}

.order-settings-page .checkout-settings .actions button,
.order-settings-page .order-settings .actions button,
.order-settings-page .printer-settings .actions button {
    margin-right: 10px
}

.order-settings-page .checkout-settings .actions a,
.order-settings-page .order-settings .actions a,
.order-settings-page .printer-settings .actions a {
    font-family: var(--font-family);
    font-size: .75rem;
    font-weight: 500;
    margin-left: 6px
}

.order-settings-page .checkout-settings .actions a.cancel,
.order-settings-page .order-settings .actions a.cancel,
.order-settings-page .printer-settings .actions a.cancel {
    color: var(--message-error-fg)
}

.order-settings-page .checkout-settings .actions button,
.order-settings-page .order-settings .actions button,
.order-settings-page .printer-settings .actions button {
    margin-right: 10px
}

.printer-page .body {
    display: grid;
    grid-gap: 20px
}

@media(min-width: 768px) {
    .printer-page .body {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
    }
}

.online-ordering main {
    margin-top: var(--safe-area-inset-top)
}

.online-ordering footer {
    display: none
}

@media(max-width: 767px) {
    .online-ordering footer {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        

    }
}

@media(min-width: 1024px) {
    .online-ordering main {
        margin: 0 auto
    }
}

.online-ordering .banner {
    padding: 20px
}

@media(min-width: 1024px) {
    .online-ordering .banner {
        max-width: 1280px;
        margin: 0 auto
    }
}

.update-delivery-address {
    padding: 0 !important
}

.update-delivery-address .section {
    padding: 20px 30px 10px 30px;
    border-bottom: 1px solid #e2e2ea
}

.update-delivery-address .section .header {
    font-size: var(--font-title);
}

.update-delivery-address .section .sub-header {
    font-size: 16px
}

.update-delivery-address .title {
    font-weight: 500;
    margin-bottom: 20px
}

.update-delivery-address p {
    text-align: center;
    margin: 10px !important
}

.update-delivery-address .delivery-address {
    padding-bottom: 40px
}

.update-delivery-address .action-buttons {
    display: grid;
    grid-gap: 18px;
    grid-auto-flow: row;
    justify-items: center;
    margin: 30px
}

.update-delivery-address .action-buttons button {
    width: 70%;
    font-size: 14px
}

.update-delivery-address .action-buttons .save {
    background: var(--button-success-bg);
    color: var(--button-success-fg)
}

.update-delivery-address .action-buttons .discard {
    background: none;
    color: #fc6565;
    border: #fc6565 1px solid
}

.update-delivery-address .action-buttons .cancel {
    background: none;
    color: var(--button-secondary-fg)
}

.third-party-delivery {
    text-align: center;
    padding: 30px !important
}

.third-party-delivery .sub-title {
    color: #8d92a3;
    text-align: center
}

@media(min-width: 768px) {
    .third-party-delivery {
        padding: 40px !important
    }
    .third-party-delivery .sub-title {
        line-height: 20px
    }
    .third-party-delivery .third-party-delivery-services-list>a {
        padding: 10px
    }
}

.third-party-delivery .third-party-delivery-services-list {
    display: grid;
    place-items: start center
}

.third-party-delivery .third-party-delivery-services-list a {
    margin: 5px;
    font-weight: 600;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    width: 55%;
    text-decoration: none;
    border: 1px solid #0162ff;
    color: var(--link-fg)
}

.third-party-delivery .third-party-delivery-services-list a:hover {
    background: #0162ff;
    color: #fff
}

.restaurant-website header {
    position: fixed;
    top: 0;
    width: 100%
}

.restaurant-website main {
    padding: 20px;
    padding-top: 73px;
    margin-top: var(--safe-area-inset-top)
}

@media(min-width: 1024px) {
    .restaurant-website main {
        max-width: 1280px;
        margin: 0 auto
    }
}

.restaurant-website header {
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    padding: 0;
    padding-top: var(--safe-area-inset-top);
    height: 53px;
    z-index: 1
}

.restaurant-website header .wrapper {
    width: 100vw;
    display: grid;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    height: 53px
}

@media(min-width: 1024px) {
    .restaurant-website header .wrapper {
        max-width: 1320px;
        margin: 0 auto
    }
}

.restaurant-website-page {
    display: grid;
    grid-row-gap: 30px;
    margin-bottom: 40px
}

@media(max-width: 767px) {
    .restaurant-website-page .heros {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 83vw;
        grid-auto-columns: 83vw;
        grid-auto-flow: column;
        overflow-x: auto
    }
    .restaurant-website-page .heros::-webkit-scrollbar {
        display: none
    }
    .restaurant-website-page .hero {
        width: 83vw
    }
}

@media(min-width: 768px) {
    .restaurant-website-page .heros {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
    }
}

.restaurant-website-page .hero {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    overflow: hidden
}

.restaurant-website-page .hero .content {
    padding: 15px 18px
}

.restaurant-website-page .hero .title {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red
}

.restaurant-website-page .hero .description {
    font-style: normal;
    font-weight: 300;
    font-size: calc(var(--font-title) - 6px);
    line-height: 21px;
    color: #666
}

.restaurant-website-page .hero .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.restaurant-website-page .hero .description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.restaurant-website-page .ctas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px
}

.restaurant-website-page .ctas .cta {
    padding: 18px;
    padding-bottom: 30px;
    border-radius: 8px;
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.restaurant-website-page .ctas .cta .title {
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 4px);
    line-height: 19px;
    color: #fff
}

.restaurant-website-page .ctas .cta .icon img {
    height: 18px;
    width: auto
}

.restaurant-website-page .ctas .cta.food-order {
    background: linear-gradient(148.83deg, #3a91ec 0.88%, #426ed9 100%)
}

.restaurant-website-page .ctas .cta.book-a-table {
    background: linear-gradient(150.26deg, #ff825f 11.6%, #ff4c51 86.35%)
}

.restaurant-website-page .quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 0.5fr));
    grid-gap: 10px
}

.restaurant-website-page .quick-links .quick-link {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 10px;
    cursor: pointer
}

.restaurant-website-page .quick-links .quick-link .icon {
    width: 40px;
    margin: 5px auto;
    color: #1b2749
}

.restaurant-website-page .quick-links .quick-link .label {
    text-align: center;
    font-style: normal;
    font-weight: 300;
    font-size: calc(var(--font-title) - 7px);
    line-height: 16px;
    color: #7f8592;
    padding-top: 3px
}

.restaurant-website-page .about {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    display: grid;
    grid-template-areas: "a b" "a c";
    grid-template-columns: min-content 1fr;
    align-items: center;
    cursor: pointer
}

.restaurant-website-page .about .icon {
    margin-top: 1px;
    margin-right: 15px
}

.restaurant-website-page .about .icon i {
    grid-area: a;
    border-radius: 50%;
    padding: 5px;
    background-color: var(--color-secondary);
    color: #fff
}

.restaurant-website-page .about .title {
    grid-area: b;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red;
    text-transform: uppercase;
    margin: 8px 0
}

.restaurant-website-page .about .description {
    grid-area: c;
    font-style: normal;
    font-size: calc(var(--font-title) - 4px);
    line-height: 22px;
    letter-spacing: .1px;
    color: #666
}

.restaurant-website-page .photos {
    display: grid;
    grid-row-gap: 20px;
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    padding-bottom: 25px
}

.restaurant-website-page .photos .header {
    display: flex;
    flex-direction: row;
    align-items: center
}

.restaurant-website-page .photos .header .icon {
    margin-top: 1px;
    margin-right: 15px
}

.restaurant-website-page .photos .header .icon i {
    grid-area: a;
    border-radius: 50%;
    padding: 5px;
    background-color: var(--color-secondary);
    color: #fff
}

.restaurant-website-page .photos .header .title {
    grid-area: b;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red;
    text-transform: uppercase;
    margin: 8px 0
}

.restaurant-website-page .photos .body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))
}

.restaurant-website-page .photos .image img {
    border-radius: 10px
}

.store-website header {
    position: fixed;
    top: 0;
    width: 100%
}

.store-website main {
    padding: 20px;
    padding-top: 73px;
    margin-top: var(--safe-area-inset-top)
}

@media(min-width: 1024px) {
    .store-website main {
        max-width: 1280px;
        margin: 0 auto
    }
}

.store-website header {
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    padding: 0;
    padding-top: var(--safe-area-inset-top);
    height: 53px;
    z-index: 1
}

.store-website header .wrapper {
    width: 100vw;
    display: grid;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    height: 53px
}

@media(min-width: 1024px) {
    .store-website header .wrapper {
        max-width: 1320px;
        margin: 0 auto
    }
}

.store-website-page {
    display: grid;
    grid-row-gap: 30px;
    margin-bottom: 40px
}

@media(max-width: 767px) {
    .store-website-page .heros {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 83vw;
        grid-auto-columns: 83vw;
        grid-auto-flow: column;
        overflow-x: auto
    }
    .store-website-page .heros::-webkit-scrollbar {
        display: none
    }
    .store-website-page .hero {
        width: 83vw
    }
}

@media(min-width: 768px) {
    .store-website-page .heros {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
    }
}

.store-website-page .hero {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    overflow: hidden
}

.store-website-page .hero .content {
    padding: 15px 18px
}

.store-website-page .hero .title {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 3px);
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: red
}

.store-website-page .hero .description {
    font-style: normal;
    font-weight: 300;
    font-size: calc(var(--font-title) - 6px);
    line-height: 21px;
    color: #666
}

.store-website-page .hero .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.store-website-page .hero .description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.store-website-page .ctas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px
}

.store-website-page .ctas a:link,
.store-website-page .ctas a:visited,
.store-website-page .ctas a:hover,
.store-website-page .ctas a:active {
    text-decoration: none
}

.store-website-page .ctas .cta {
    padding: 18px;
    padding-bottom: 30px;
    border-radius: 8px;
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.store-website-page .ctas .cta .title {
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 4px);
    line-height: 19px;
    color: #fff
}

.store-website-page .ctas .cta .icon {
    font-size: calc(var(--font-title) + 12px);
    color: #fff
}

.store-website-page .ctas .cta.food-order {
    background: linear-gradient(148.83deg, #3a91ec 0.88%, #426ed9 100%)
}

.store-website-page .ctas .cta.book-a-table {
    background: linear-gradient(150.26deg, #ff825f 11.6%, #ff4c51 86.35%)
}

.store-website-page .quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 0.5fr));
    grid-gap: 10px
}

.store-website-page .quick-links .quick-link {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 10px;
    cursor: pointer
}

.store-website-page .quick-links .quick-link .icon {
    width: 40px;
    margin: 5px auto;
    color: #1b2749
}

.store-website-page .quick-links .quick-link .label {
    text-align: center;
    font-style: normal;
    font-weight: 300;
    font-size: calc(var(--font-title) - 7px);
    line-height: 16px;
    color: #7f8592;
    padding-top: 3px
}

.store-website-page .about {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    display: grid;
    grid-template-areas: "a b" "a c";
    grid-template-columns: min-content 1fr;
    align-items: center;
    cursor: pointer
}

.store-website-page .about .icon {
    margin-top: 1px;
    margin-right: 15px
}

.store-website-page .about .icon i {
    grid-area: a;
    border-radius: 50%;
    padding: 5px;
    background-color: var(--color-secondary);
    color: #fff
}

.store-website-page .about .title {
    grid-area: b;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red;
    text-transform: uppercase;
    margin: 8px 0
}

.store-website-page .about .description {
    grid-area: c;
    font-style: normal;
    font-size: calc(var(--font-title) - 4px);
    line-height: 22px;
    letter-spacing: .1px;
    color: #666
}

.store-website-page .photos {
    display: grid;
    grid-row-gap: 20px;
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    padding: 15px 18px;
    padding-bottom: 25px
}

.store-website-page .photos .header {
    display: flex;
    flex-direction: row;
    align-items: center
}

.store-website-page .photos .header .icon {
    margin-top: 1px;
    margin-right: 15px
}

.store-website-page .photos .header .icon i {
    grid-area: a;
    border-radius: 50%;
    padding: 5px;
    background-color: var(--color-secondary);
    color: #fff
}

.store-website-page .photos .header .title {
    grid-area: b;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red;
    text-transform: uppercase;
    margin: 8px 0
}

.store-website-page .photos .body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))
}

.store-website-page .photos .image img {
    border-radius: 10px
}

.otp-modal {
    width: 15rem
}

.otp-modal .illustration {
    display: block;
    width: auto;
    margin: auto
}

.otp-modal .instructions {
    margin-top: 1rem;
    text-align: center
}

.otp-modal .instructions .title {
    color: #000521;
    font-weight: 500;
    font-size: 16px
}

.otp-modal .instructions .sub-title {
    font-size: calc(var(--font-title) - 6px);
    color: #92929d
}

.otp-modal .otp-input {
    margin-top: 1rem
}

.otp-modal .otp-input div {
    margin: 0 auto
}

.otp-modal .help-text {
    text-align: center;
    margin-top: 1rem;
    font-size: calc(var(--font-title) - 6px);
    color: #92929d
}

.otp-modal .resend {
    margin: 1rem auto;
    text-align: center;
    font-weight: 500;
    padding: .4rem;
    box-shadow: unset;
    background-color: unset;
    font-size: calc(var(--font-title) - 6px);
    color: #0062ff
}

.otp-modal .actions {
    border-top: 1px solid;
    padding-top: 1rem;
    border-color: #e1e1e9;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.otp-modal .actions button {
    width: 100%
}

.mobile-number-widget #recaptcha-wrapper.hidden {
    display: none
}

.mobile-number-widget .primary {
    width: 100%
}

.website-items-page .items {
    display: grid;
    grid-gap: 20px
}

.website-items-page .item.soldout {
    position: relative;
    cursor: not-allowed
}

.website-items-page .item.soldout .soldout-overlay {
    background: #ababab36;
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: not-allowed
}

.website-items-page .item {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    overflow: hidden
}

@media(max-width: 767px) {
    .website-items-page .item .body {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: min-content 1fr min-content;
        grid-template-areas: "a a" "b c" "d d" "e e" "f f"
    }
    .website-items-page .item .body .image {
        overflow: hidden;
        grid-area: a
    }
    .website-items-page .item .body .image img {
        border-radius: 10px
    }
    .website-items-page .item .body .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 3px);
        font-style: normal;
        font-weight: bold;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        grid-area: b;
        align-self: flex-start
    }
    .website-items-page .item .body .price {
        grid-area: c;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 3px);
        font-style: normal;
        font-weight: bold;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        color: var(--color-secondary);
        align-self: start
    }
    .website-items-page .item .body .description {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        grid-area: d;
        align-self: flex-start;
        padding-bottom: 10px
    }
    .website-items-page .item .body .available-hours,
    .website-items-page .item .body .available-days {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        grid-area: e;
        align-self: flex-start;
        padding-top: 10px;
        line-height: 25px;
        color: var(--color-secondary)
    }
    .website-items-page .item .body .available-hours span,
    .website-items-page .item .body .available-days span {
        display: inline-block;
        background-color: #fff1ef;
        border-radius: 5px;
        padding: 2px
    }
    .website-items-page .item .body .available-hours {
        grid-area: f
    }
    .website-items-page .item .body .name,
    .website-items-page .item .body .price,
    .website-items-page .item .body .description,
    .website-items-page .item .body .available-hours,
    .website-items-page .item .body .available-days {
        padding-left: 18px;
        padding-right: 18px
    }
    .website-items-page .item .body .image {
        margin-left: 12px;
        margin-right: 12px;
        padding-top: 14px;
        padding-bottom: 20px;
        border-bottom: 1px dashed #e9ecf3
    }
    .website-items-page .item .body .name,
    .website-items-page .item .body .price {
        padding-top: 12px
    }
    .website-items-page .item .body .description,
    .website-items-page .item .body .available-hours,
    .website-items-page .item .body .available-days {
        padding-bottom: 15px
    }
}

@media(min-width: 768px) {
    .website-items-page .item .body {
        padding: 15px 18px;
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: min-content 1fr min-content;
        grid-template-areas: "a d" "b d" "c d" "e d"
    }
    .website-items-page .item .body .image {
        overflow: hidden;
        grid-area: d;
        width: 100px;
        margin-left: 10px
    }
    .website-items-page .item .body .image img {
        border-radius: 10px
    }
    .website-items-page .item .body .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 3px);
        font-style: normal;
        font-weight: bold;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        grid-area: a;
        align-self: flex-start
    }
    .website-items-page .item .body .description {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        grid-area: b;
        align-self: flex-start
    }
    .website-items-page .item .body .price {
        grid-area: c;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 3px);
        font-style: normal;
        font-weight: bold;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        color: var(--color-secondary);
        align-self: flex-end;
        margin-top: 4px
    }
    .website-items-page .item .body .available-hours,
    .website-items-page .item .body .available-days {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        grid-area: e;
        align-self: flex-start;
        padding: 10px 0;
        line-height: 25px;
        color: var(--color-secondary)
    }
    .website-items-page .item .body .available-hours span,
    .website-items-page .item .body .available-days span {
        display: inline-block;
        background-color: #fff1ef;
        border-radius: 5px;
        padding: 2px
    }
}

.website-items-page .item .action {
    grid-area: e;
    border-top: 1px solid #f1f1f5;
    padding: 15px 18px;
    background-color: #fafafb;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 12px 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
}

@media(max-width: 767px) {
    .website-items-page .item .action {
        align-items: flex-start
    }
}

.website-items-page .item .action img {
    margin-right: 10px
}

@media(max-width: 767px) {
    .website-items-page .item .action img {
        margin-top: 5px
    }
}

.website-items-page .item .action span {
    font-family: Fira Sans;
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 4px);
    line-height: 25px;
    color: #426ed9;
    white-space: nowrap
}

.website-item-page .item-actions {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-gap: 10px;
    margin-top: 30px;
    margin-bottom: 10px
}

.website-item-page .item-actions .quantity {
    display: grid;
    grid-template-columns: min-content min-content min-content;
    background-color: #fff;
    padding: 0px 20px;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.website-item-page .item-actions .quantity .icon {
    font-size: 16px
}

.website-item-page .item-actions .add-to-cart-button {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-columns: min-content min-content;
    justify-content: space-between;
    font-family: Fira Sans;
    background-color: var(--button-success-bg);
    color: var(--button-success-fg);
    border-radius: 10px;
    padding: 20px;
    white-space: nowrap;
    font-weight: 500
}

.modifiers {
    display: grid;
    grid-gap: 20px
}

.modifier {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.modifier .header {
    border-bottom: 1px solid #f1f1f5;
    padding: 12px 18px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.modifier .header .title {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 1px);
    font-style: normal;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: .150000006px;
    text-align: left;
    color: red;
    color: var(--color-secondary)
}

.modifier .options {
    padding: 15px 18px;
    display: grid
}

.modifier .options .option:last-child {
    border-bottom: 0px
}

.modifier .option {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    padding: 10px 0;
    border-bottom: 1px dashed #e9ecf3;
    font-weight: 400;
    color: #555
}

.modifier .option.selected {
    color: var(--fg);
    font-weight: 500
}

.modifier .option input {
    margin-right: 12px
}

.modifier .option {
    grid-template-columns: 1fr min-content min-content;
    grid-template-areas: "a b c";
    align-items: center
}

.modifier .option .clickable {
    grid-area: a;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px
}

.modifier .option .quantity {
    grid-area: b;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 20px
}

.modifier .option .quantity .number {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 6px);
    color: #000521
}

.modifier .option .quantity .icon {
    cursor: pointer
}

.modifier .option .quantity .dec {
    padding-right: 10px;
    padding-left: 15px
}

.modifier .option .quantity .inc {
    padding-left: 10px;
    padding-right: 15px
}

.modifier .option .quantity .icon {
    color: #8d92a3;
    font-size: 20px
}

.modifier .option .extra-charge {
    grid-area: c;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end
}

.item-actions {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-gap: 10px;
    margin-top: 30px;
    margin-bottom: 10px
}

.item-actions .quantity {
    display: grid;
    grid-template-columns: min-content min-content min-content;
    background-color: #fff;
    padding: 0px 20px;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea
}

.item-actions .quantity .icon {
    font-size: 16px
}

.item-actions .add-to-cart-button {
    background-color: var(--card-bg);
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
    border-radius: 10px;
    border: 1px solid #e2e2ea;
    display: grid;
    grid-template-columns: min-content min-content;
    justify-content: space-between;
    font-family: Fira Sans;
    background-color: var(--button-success-bg);
    color: var(--button-success-fg);
    border-radius: 10px;
    padding: 20px;
    white-space: nowrap;
    font-weight: 500;
    cursor: pointer
}

.item-actions .add-to-cart-button .amount {
    margin-left: 5px
}

.website-order-success-page #order-history-button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
    margin-left: 6px
}

.basic-item-widget>.title {
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) + 2px);
    line-height: 30px;
    letter-spacing: .1px;
    color: var(--fg);
    margin-bottom: 20px
}

.basic-item-widget .cancel-button {
    width: 100%
}

.basic-item-widget .spinner-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: max-content;
    align-items: center
}

@media(max-width: 767px) {
    .trading-hours-page {
        background-color: #fafafa
    }
    .trading-hours-page .store-logo-and-address .restaurant-logo {
        display: none
    }
    .trading-hours-page .store-logo-and-address .info {
        padding: 20px;
        padding-bottom: 0
    }
    .trading-hours-page .store-logo-and-address .info.need-help {
        margin-top: 13px
    }
    .trading-hours-page .store-logo-and-address .info .title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: 1px;
        color: #27283e
    }
    .trading-hours-page .store-logo-and-address .info .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        color: #27283e
    }
    .trading-hours-page .store-logo-and-address .info .text .link {
        color: #4cbba1;
        cursor: pointer
    }
    .trading-hours-page .date-and-trading-hours-today {
        display: grid;
        padding-top: 36px;
        margin: 0 20px
    }
    .trading-hours-page .date-and-trading-hours-today .date-today {
        display: grid;
        grid-gap: 5px;
        margin: auto 0;
        margin-bottom: 30px
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .trading-hours-label {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 13px;
        letter-spacing: 1px;
        text-align: left;
        color: #27283e;
        margin-bottom: 14px
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .date {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 3px);
        font-style: normal;
        font-weight: bold;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: #27283e
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .closed-banner {
        background: #ffe7df;
        color: #b0204b;
        padding: 16px 20px;
        margin-top: 10px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        line-height: 17px;
        letter-spacing: 0;
        display: inline-flex;
        flex-direction: row;
        border-radius: 8px;
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .open-banner {
        background: #d5ffe5;
        color: #10bc69;
        padding: 16px 20px;
        margin-top: 10px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        line-height: 17px;
        letter-spacing: 0;
        display: inline-flex;
        flex-direction: row;
        border-radius: 8px;
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .closed-banner .closed-label {
        font-weight: bold;
        margin-right: .25em
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today {
        width: 100%;
        padding: 18px 10px 18px 27px;
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-areas: "logo  collection-type" "logo  sessions";
        column-gap: 45px;
        background-color: #ffffff;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1)
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .collection-type {
        display: flex;
        grid-area: collection-type;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-style: normal;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: .150000006px;
        text-align: center;
        color: #40415b;
        margin-bottom: 4px
    }
    
      .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .collection-type-new {
       /* display: flex;
        grid-area: collection-type;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-style: normal;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: .150000006px;
        text-align: center;
        color: #40415b;
        margin-bottom: 4px*/
         padding-top: 23px;
        text-align: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-style: normal;
        font-weight: bold;
        line-height: 25px;
        letter-spacing: .15px;
        color: #40415b
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo {
        grid-area: logo;
        background-repeat: no-repeat;
        margin: 0 auto;
        position: relative;
        background-size: cover;
        height: 62px;
        width: 62px
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo.pickup {
        background-image: url("/images/pickup.svg")
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo.delivery {
        background-image: url("/images/delivery.svg")
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo.dineIn {
        background-image: url("/images/dine-in.svg")
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .sessions {
        display: flex;
        grid-area: sessions;
        flex-direction: column;
        align-items: flex-start
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .sessions .unavailable {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: .25px;
        text-align: center;
        color: #b0204b
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .sessions .available {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: .25px;
        text-align: center;
        color: #27283e
    }
}

@media(max-width: 767px)and (min-width: 768px) {
    .trading-hours-page .date-and-trading-hours-today .date-today.closed {
        border-bottom: unset
    }
}

@media(max-width: 767px)and (min-width: 768px) {
    .trading-hours-page .date-and-trading-hours-today.closed {
        grid-auto-flow: column
    }
}

@media(max-width: 767px) {
    .trading-hours-page .trading-hours-today {
        display: grid;
        grid-gap: 15px;
        margin-bottom: 15px
    }
    .descrition-title {
        font-size: 12px !important;
        text-align: left !important;
    }
}

@media(max-width: 767px) {
    .trading-hours-page .trading-hours-today.closed .unavailable {
        margin-bottom: 0 !important
    }
}

@media(max-width: 767px) {
    .trading-hours-page .label {
        width: fit-content;
        padding: 3px 10px 3px 3px;
        border-radius: 8px;
        margin-bottom: 10px;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        display: grid;
        align-items: center;
        grid-auto-flow: column;
        grid-gap: 7px
    }
}

@media(max-width: 767px) {
    .trading-hours-page .collection-type-selector {
        box-shadow: inset 0px -1px 0px #e3ebec;
        padding: 0 17px;
        margin: 20px 0;
        margin-top: 5px;
        font-family: "Poppins"
    }
    .trading-hours-page .collection-type-selector .collection-types-tab-selector {
        display: flex
    }
    .trading-hours-page .collection-type-selector .collection-types-tab-selector .collection-type {
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        line-height: 22px;
        color: #757575;
        padding: 10px 11px
    }
    .trading-hours-page .collection-type-selector .collection-types-tab-selector .collection-type.selected {
        font-weight: 700;
        color: #27283e;
        border-bottom: 1px solid #27283e
    }
}

@media(max-width: 767px) {
    .trading-hours-page .trading-hours {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 8px rgba(49, 48, 62, .1);
    }
}

@media(max-width: 767px) {
    .trading-hours-page .time-item {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: 1fr;
        grid-gap: 10px;
        grid-row-gap: 5px;
        border-bottom: 1px solid #e0e0e0;
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        padding: 8px 20px;
        font-family: var(--font-family);
        line-height: 20px
    }
    .trading-hours-page .time-item:last-child {
        border-bottom: none
    }
    .trading-hours-page .time-item .dow {
        padding: 10px 0;
        font-weight: 700;
        color: #27283e
    }
    .trading-hours-page .time-item .session {
        font-weight: 400;
        justify-items: end;
        text-align: right;
        padding-right: 5px;
        padding: 10px 0;
        font-weight: 400;
        color: #27283e
    }
    .trading-hours-page .time-item .session.closed {
        color: #b0204b
    }
}

@media(min-width: 767px) {
       .bottom-nav-bar {
           display:none ;
       }
}

@media(max-width: 767px) {
    .bottom-nav-bar {
        box-shadow: 0px -1px 3px rgba(104, 122, 155, .25);
        z-index: 1;
        background-color: var(--color-bottom-bar);
    }
    @supports(padding: max(0px)) {
        .bottom-nav-bar {
            /*padding-bottom: max(10px, var(--safe-area-inset-bottom))*/
        }
    }
    .bottom-nav-bar .item {
        display: grid;
        grid-template-rows: 1fr max-content;
        text-align: center;
        position: relative;
        /*padding-top: 15px;*/
        padding-left:5px;
        padding-right:5px;
        min-width:90px;
        flex-grow: 1;
        flex-basis: 0;
        color: #fff;
    }
    .bottom-nav-bar .item .icon-count-container .icon {
        opacity: .75
    }
    .bottom-nav-bar .item .icon-count-container .icon.selected {
        opacity: 1;
    }
    .bottom-nav-bar .item .icon-count-container .count {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        position: absolute;
        right: calc(50% - 23px);
        top: 5px;
        padding: 10px;
        background: red;
        color: #ffffff;
        border-radius: 50%
    }
    .bottom-nav-bar .item .icon-count-container .count>span {
        position: absolute;
        top: -5px;
        width: 100%;
        left: 0;
        text-align: center;
        font-size: calc(var(--font-title) - 9px);
        font-family: "Poppins"
    }
    .bottom-nav-bar .item .label {
        color: #ffffff;
        position: relative;
        text-align: center;
        font-size: 10.4px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
        font-weight: 500;
        font-style: normal;
        line-height: 14px;
        opacity: .45
    }
    .bottom-nav-bar .item .label.selected {
        opacity: 1;
        text-decoration:underline;
        font-size:calc(var(--font-title) - 3px);

    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .online-ordering .menu-page .header {
        margin-top: 0;
        padding: 0
    }
    .online-ordering .menu-page .header.on-top {
        transition: visibility 0s linear .2s, opacity .2s linear;
        display: none;
        opacity: 0
    }
    .online-ordering .menu-page .header .wrapper {
        position: relative;
        font-family: Poppins
    }
    .online-ordering .menu-page .header .wrapper .nav {
        width: 100%;
        box-sizing: border-box;
        padding: 16px 20px;
        z-index: 1;
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .online-ordering .menu-page .header .wrapper .nav .page-title {
        margin-bottom: 3px;
        color: var(--bg)
    }
    .online-ordering .menu-page .header .wrapper .nav .page-title .text {
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 150%;
        letter-spacing: .5px
    }
    .online-ordering .menu-page .header .wrapper .nav .actions {
        display: flex;
        flex-direction: row;
        align-items: flex-start
    }
    .online-ordering .menu-page .header .wrapper .nav .actions .avatar {
        margin-top: 1px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent
    }
    .online-ordering .menu-page .header .wrapper .nav .actions .avatar .desktop {
        display: none !important
    }
    .online-ordering .menu-page .header .wrapper .nav .actions .avatar img {
        border-radius: 10px;
        border: 3px solid #f1f1f5;
        width: 26px
    }
    .online-ordering .menu-page .header .wrapper .nav .actions .login-icon {
        width: 28px;
        height: 28px;
        margin-top: 2px;
        cursor: pointer
    }
    .online-ordering .menu-page .header .wrapper .nav .actions .login-icon .icon {
        padding: 0;
        color: var(--bg)
    }
    .online-ordering .menu-page .header .wrapper .nav .actions .search {
        margin-right: 17px;
        margin-top: 4px
    }
    .online-ordering .menu-page .header .wrapper .nav .actions .search .icon {
        margin-top: 1px;
        width: 21px
    }
    .online-ordering .menu-page .header .wrapper .banner-image {
        position: relative;
        width: 100vw
    }
    .online-ordering .menu-page .header .wrapper .banner-image .desktop {
        display: none
    }
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info {
        display: flex;
        flex-direction: column;
        z-index: 1
    }
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info.mobile-banner {
        display: none
    }
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .restaurant-logo {
        position: absolute;
        width: 120px;
        bottom: 127px;
        left: 24px;
        background-color: #ffffff;
        border-radius: 23px
    }

    .mobile-header {
        display: none
    }
}

@media(max-width: 767px)and (max-width: 330px) {
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .restaurant-logo {
        bottom: 90px
    }
}

@media(max-width: 767px) {
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .restaurant-logo>.image {
        border-radius: 23px;
        overflow: hidden
    }
}

@media(max-width: 767px) {
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .store-title {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        color: var(--bg);
        width: 100%;
        background: linear-gradient(180deg, rgba(42, 42, 49, 0) 11.39%, rgba(42, 42, 49, 0.1) 24.94%, rgba(42, 42, 49, 0.8) 100%);
        background-blend-mode: multiply
    }
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .store-title .store-name {
        font-style: normal;
        font-weight: 500;
        font-size: 24.5px;
        line-height: 130%;
        letter-spacing: .5px;
        margin: 4px 0px
    }
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .store-title .store-location {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: .25px;
        text-align: left
    }
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .store-title .store-location .address {
        margin: 0px 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .online-ordering .menu-page .header .wrapper .banner-image .restaurant-info .store-title .store-location .icon {
        width: 17px
    }
}

@media(max-width: 767px) {
    
   
    .online-ordering .menu-page .body>.menu {
        background-color: #f9f2f2;
        display: grid;
   
        grid-template-areas: "collection-type-selector" "store-closed-info" "categories" "items"
    }
    .online-ordering .menu-page .body>.menu .collection-type-selector-widget {
        grid-area: collection-type-selector
    }
    .online-ordering .menu-page .body>.menu .store-closed-info-widget {
        grid-area: store-closed-info
    }
    .online-ordering .menu-page .body>.menu .category-list-widget {
        grid-area: categories
    }
    .online-ordering .menu-page .body>.menu .item-list-widget {
        grid-area: items
    }
     .online-ordering .menu-page .body>.menu .item-list-widget-grid {
        grid-area: items
    }
    .online-ordering .menu-page .body>.menu #top-of-site-pixel-anchor {
        position: absolute;
        width: 1px;
        height: 1px;
        top: 100px;
        left: 0
    }
}

@media(max-width: 767px) {
    .top-nav-bar-widget {
        z-index: 100;
        position: sticky;
        top: 0;
        background: var(--color-header-mobile);
        box-shadow: inset 0px -1px 0px #e8ecf1;
        width: 100%
    }
    .top-nav-bar-widget .wrapper {
        box-sizing: border-box;
        width: 100%;
        padding: 15px 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    
    .preview-bar {
        z-index: 999999;
        width: 100%;
        padding: 0px !important;
    }
    .top-nav-bar-widget .wrapper .back-button {
        display: none
    }
    .top-nav-bar-widget .wrapper .store-header-widget .image {
        display: none
    }
    .top-nav-bar-widget .wrapper .menu {
        display: none
    }
    .top-nav-bar-widget .wrapper .actions {
       display: flex;
        flex-direction: row;
        align-items: center;
        width:80px;
        margin-left:10px;
    }
    .top-nav-bar-widget .wrapper .actions .login-icon {
        display: flex;
        align-items: center;
        width: 32px;
        height: 32px;
        margin-left: 10px
    }
    .top-nav-bar-widget .wrapper .actions .login-icon .icon {
        padding: 0;
        color: #fff;
        filter: invert(var(--filter-invert-moblie))
    }
    .top-nav-bar-widget .wrapper .actions .cart {
        display: none
    }
    .top-nav-bar-widget .wrapper .actions .avatar {
        margin-left: 10px;
        width: 32px;
        height: 32px;
        -webkit-tap-highlight-color: transparent
    }
    .top-nav-bar-widget .wrapper .actions .avatar .desktop {
        display: none !important
    }

    .header-desktop {
        display: none !important 
    }
    .mobile-header {
        display: flex
    }
    .cart-summary {
        display: none !important 
    }
    
    .box-reviews {
      display: block !important;
      font-family: var(--font-family);
    }
    .merchant-review-wrap {
        width: 100% !important;
        padding: 15px 30px 100px 30px !important;
    }
    .review-input-wrap {
        width: 100% !important;
    }
    .row-review {
        text-align: center !important;
    }
    .details-review {
        float: none !important;
        text-align: center !important;
    }
    .details-review2 {
        float: none !important;
        text-align: center !important;
    }
    .read-more {text-align: center !important;margin-top: 15px;}
    .button-post {margin-right: 15px !important;}
    
    .bottom-nav-bar .item li.active .icon-count-container .icon {
        opacity:1;
    }
    
    .bottom-nav-bar .item li .icon-count-container .icon {
        width:25px;
    }

    /************  START TABS *************/
    /*.bottom-nav-bar ul#tabs {
        margin-top: 10px;
        margin-bottom: 0px;
       
    }
    .bottom-nav-bar ul#tabs li {
        padding: 2px 10px;
        font-size: calc(var(--font-title) - 4px);
        color: #a9a9b8;
    }
    .bottom-nav-bar ul#tabs li a,
    ul#mobile-menu li a
    {
    color:#474d5d;
    }*/
    
     @media only screen and (max-width: 720px) {
  .bottom-nav-bar {
    display: flex;
    justify-content: space-between;
  }
  .bottom-nav-bar #tabs li {
    width: 20%;
    text-align: center;
    margin: 0;
  }
}

    .bottom-nav-bar ul#tabs {
        margin-top: 10px;
        margin-bottom: 0px;
    
         display: flex;
  justify-content: space-around;
    }
    .bottom-nav-bar ul#tabs li {
        padding: 2px 5px;
        font-size: calc(var(--font-title) - 6px);
        color: #a9a9b8;
        
    }
    .bottom-nav-bar ul#tabs li a,
    ul#mobile-menu li a
    {
    color:#474d5d;
    }
    
    
    .bottom-nav-bar ul#tabs li:hover {
    color: var(--color-title-selected);
    /*border-bottom:2px solid #f75d34;*/
    }
    .bottom-nav-bar ul#tabs li.active {
    color: var(--color-title-selected);
    border-bottom:2px solid var(--color-title-selected);
    }
    
    .bottom-nav-bar ul#tabs li.active i{
    color:var(--color-title-selected);
    }
    /************  END TABS *************/
    .badge_review {
         font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        position: absolute;
        /*right: calc(50% - 16px);*/
        right: calc(50% + 78px);
        top: 5px;
        padding: 0.5px 4px !important;
        background: red;
        color: #ffffff;
        border-radius: 50%
    }
   
    
    .badge_cart {
         font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        color: red;
        position: absolute;
        /*right: calc(50% - 16px);*/
        right: calc(50% - 180px);
        top: 5px;
        padding: 0.5px 4px !important;
        background: red;
        color: #ffffff;
        border-radius: 50%
    }
    /*.line-division {
        margin: 20px 0px 0px 0px !important;
    }*/
    .empty-cart {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
        text-align: center;
         font-size: calc(var(--font-title) - 3px);
         font-family: var(--font-family);
         text-decoration:underline;

    }
    .empty-cart>.text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: .14px;
        color: #757575;
        margin: 0 70px;
        padding-top: 20px;
    }
    .header-cart>.wrapper-cart {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        position: relative;
        box-shadow: inset 0px -1px 0px #e8ecf1;
    }
    .header-cart>.wrapper-cart .title {
        font-family: var(--font-family);
        font-size: var(--font-title);
        font-style: normal;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
        color: #27283e;
    }
    .box-grey {
       padding: 30px 30px !important; 
    }
    
    .merchant-details {
        padding-bottom:30px !important;
    }
    .book-table-kn {
        width:100% !important;
        padding-bottom:50px !important;
        margin-bottom: 100px !important;
    }
    
    

  /*  .modal-content {
        border:none !important;
        border-radius:15px !important;
        width:100% !important;
    }*/
    
    .form-delivery-address {
        width: 100% !important;
        padding: 30px 10px 0px 10px !important;
    }
    .box-grey-receipt {
        width: 100% !important;
    }
    #receipt-content{
        padding:0px !important;
    }
    .button-create-account,.button-login-form,.button-guest-account {
        padding: 16px 20px !important;
    }
    .close-password {
        padding: 12px 20px !important;
    }
    .view-food-item-wrap {
        width:100% !important;
    }
    .view-food-item-wrap2 {
        width:100% !important;
        /*height:calc(100vh - 200px) !important;*/
        
    }
    
    .restaurant-name {
        line-height: 34px !important;
        position: absolute;
        top: 75% !important;
        left: 50% !important;
        text-align: center !important;
    }
    .cupom-title {
        padding: 20px 0px 0px 40px !important;
    }
    a.button_cancel {
        padding: 4px !important;
    }

}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .cart-page {
        padding-bottom: max(65px, var(--safe-area-inset-bottom)) !important
    }
    .cart-page .cart-widget {
        background-color: #fff
    }
    .cart-page .cart-widget .collection-info {
        display: grid;
        gap: 4px
    }
    .cart-page .cart-widget .collection-info .session-info {
        height: 30px;
        background: #def2d6;
        padding: 10px 10px;
        align-items: center;
        display: flex;
        justify-content: center
    }
    .cart-page .cart-widget .collection-info .session-info .details {
        flex: 1;
        display: grid;
        grid-template-columns: min-content 1fr repeat(2, min-content);
        grid-template-rows: 1fr;
        white-space: nowrap
    }
    .cart-page .cart-widget .collection-info .session-info .icon {
        display: none
    }
    .cart-page .cart-widget .collection-info .session-info .ordering-for {
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left
    }
    .cart-page .cart-widget .collection-info .session-info .ordering-for .collection-type {
        font-weight: 700
    }
    .cart-page .cart-widget .collection-info .session-info .session-datetime,
    .cart-page .cart-widget .collection-info .session-info .datetime-and-address {
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0;
        margin-left: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
    .cart-page .cart-widget .collection-info .session-info .session-datetime .to,
    .cart-page .cart-widget .collection-info .session-info .datetime-and-address .to {
        font-weight: 400
    }
    .cart-page .cart-widget .collection-info .session-info .actions .cancel {
        font-weight: 700;
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0px;
        margin-left: 10px
    }
    .cart-page .cart-widget .collection-info .session-info .actions .edit,
    .cart-page .cart-widget .collection-info .session-info .actions .discard {
        display: none
    }
    .cart-page .cart-widget .collection-info .minimum-order-value-info {
        background: #ffebcf;
        padding: 15px 20px;
        color: #d67300;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left
    }
    .cart-page .cart-widget .collection-info .minimum-order-value-info>.icon {
        display: none
    }
    .cart-page .cart-widget .empty-cart-header {
        display: none
    }
    .cart-page .cart-widget .cart-header-text {
        display: none
    }
    .cart-page .cart-widget .empty-cart {
        margin-top: 140px;
        text-align: center
    }
    .cart-page .cart-widget .empty-cart>.cart-image {
        margin-bottom: 29px;
        width: 80px;
        height: 80px
    }
    .cart-page .cart-widget .empty-cart>.text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 1px);
        letter-spacing: .14px;
        color: #757575;
        margin: 0 70px
    }
    .cart-page .cart-widget .item-count {
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        color: #757575;
        margin: 23px 20px;
        margin-bottom: 16px
    }
    .cart-page .cart-widget .items {
        margin: 20px;
        margin-top: 0;
        display: grid;
        gap: 18px
    }
    .cart-page .cart-widget .items .item {
        padding: 16px;
        border: 1px solid #e2e2e2;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .05);
        box-sizing: border-box;
        border-radius: 8px;
        display: grid;
        grid-template-areas: "name     .     remove" "summary  .     remove" "quantity deal  price";
        grid-template-columns: 1fr max-content
    }
    .cart-page .cart-widget .items .deal {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-right: 6px;
        grid-area: deal;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 500;
        line-height: 13px;
        letter-spacing: 1.5px;
        text-align: left;
        color: #d67300;
        margin-top: 16px;
        text-transform: uppercase
    }
    .cart-page .cart-widget .items .deal img {
        margin-top: -3px;
        margin-right: 5px
    }
    .cart-page .cart-widget .items .name {
        grid-area: name;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 1px);
        font-weight: 700;
        color: #27283e;
        letter-spacing: -0.2px;
        margin-bottom: 11px
    }
    .cart-page .cart-widget .items .remove-icon {
        grid-area: remove;
        justify-self: right;
        width: 12px;
        padding: 2px 4px;
        margin-bottom: 11px
    }
    .cart-page .cart-widget .items .summary {
        grid-area: summary
    }
    .cart-page .cart-widget .items .summary>pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        letter-spacing: .6px;
        line-height: 19px;
        font-weight: 500;
        color: #757575;
        margin: 0 !important
    }
    .cart-page .cart-widget .items .quantity {
        grid-area: quantity;
        display: grid;
        grid-auto-flow: column;
        gap: 5px;
        width: fit-content;
        margin-top: 16px
    }
    .cart-page .cart-widget .items .quantity .number {
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 2px);
        font-weight: 600;
        text-align: center;
        margin: 0 17px;
        line-height: 27px
    }
    .cart-page .cart-widget .items .quantity .icon {
        cursor: pointer;
        width: 24px
    }
    .cart-page .cart-widget .items .price {
        grid-area: price;
        text-align: right;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        display: flex;
        align-items: center;
        color: #1faa89;
        margin-top: 16px
    }
    .cart-page .cart-widget .totals {
        background: #eff8f9;
        color: #27283e;
        padding: 22px 20px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        line-height: 37px;
        letter-spacing: .3px
    }
    .cart-page .cart-widget .totals .sub-total,
    .cart-page .cart-widget .totals .delivery-charges,
    .cart-page .cart-widget .totals .public-holiday-surcharge,
    .cart-page .cart-widget .totals .grand-total {
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
        font-weight: 400;
        border-bottom: 1px solid #e3ebec
    }
    .cart-page .cart-widget .totals .grand-total {
        font-size: calc(var(--font-title) - 1px);
        font-weight: 700;
        border-bottom: none
    }
    .cart-page .cart-widget .checkout {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        padding: 5px 20px;
        padding-bottom: 50px;
        background: #eff8f9;
    }
    .cart-page .cart-widget .checkout .button {
        background: #0162ff;
        color: #fff;
        border-radius: 10px;
        text-align: center;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 700;
        padding: 8px 0;
        cursor: pointer
    }
    .cart-page .cart-widget .checkout .button.disabled {
        background: #f1f1f5;
        color: #bcbcc5;
        cursor: not-allowed
    }
    .cart-page .cart-widget .checkout .quantity {
        font-size: calc(var(--font-title) - 8px);
        font-weight: 600;
        text-align: end
    }
}

@media(max-width: 767px) {
    .loyalty-card-page {
        margin-bottom: 100px
    }
    .loyalty-card-page>.spinner {
        margin: 50px;
        text-align: center
    }
    .loyalty-card-page>.alert {
        margin: 20px
    }
    .loyalty-card-page .loyalty {
        margin: 40px auto;
        max-width: 400px;
        padding: 0 20px
    }
    .loyalty-card-page .loyalty .loyalty-card-widget {
        margin: 0 auto
    }
    .loyalty-card-page .loyalty .claim-info {
        margin: 0 2px;
        margin-top: 50px
    }
    .loyalty-card-page .loyalty .claim-info .title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 1px);
        font-weight: 500;
        color: #27283e
    }
    .loyalty-card-page .loyalty .claim-info .subtitle {
        white-space: pre-wrap;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        color: #757575;
        margin-top: 6px;
        line-height: 24px;
        letter-spacing: .3px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .session-view-widget {
        height: 30px;
        background: #def2d6;
        padding: 10px 20px;
        align-items: center;
        display: flex;
        justify-content: center
    }
    .session-view-widget .details {
        flex: 1;
        display: grid;
        grid-template-columns: min-content 1fr repeat(2, min-content);
        grid-template-rows: 1fr;
        white-space: nowrap
    }
    .session-view-widget .icon {
        display: none
    }
    .session-view-widget .ordering-for {
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left
    }
    .session-view-widget .ordering-for .collection-type {
        font-weight: 700
    }
    .session-view-widget .session-datetime,
    .session-view-widget .datetime-and-address {
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0;
        margin-left: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
    .session-view-widget .session-datetime .to,
    .session-view-widget .datetime-and-address .to {
        font-weight: 400
    }
    .session-view-widget .actions .cancel {
        font-weight: 700;
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0px;
        margin-left: 10px
    }
    .session-view-widget .actions .edit,
    .session-view-widget .actions .discard {
        display: none
    }
}

@media(max-width: 767px) {
    .no-coupons {
        margin-top: 135px
    }
    .no-coupons>.icon {
        margin: 0 auto;
        display: block
    }
    .no-coupons>.text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 26px;
        color: #757575;
        width: 70%;
        margin: 32px auto;
        text-align: center
    }
}

/*@media(max-width: 767px) {*/
    .coupons {
        display: grid;
        gap: 23px;
        margin: 10px 23px;
        margin-top: 20px
    }
    .coupons .coupon {
        position: relative;
        border: .01px solid #ffffff63;
        border-left: unset;
        min-width: 321px;
        box-shadow: 0 0 11px 0 #bdbdbd78;
        clip-path: inset(-10px -10px -10px -10px)
    }
    .coupons .coupon .zigzag {
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 45%, #c4c4c411 45%, #c4c4c411 55%, white 55%), linear-gradient(315deg, white 45%, #c4c4c411 45%, #c4c4c411 55%, #f4f4f45e 55%);
        background-repeat: repeat-y;
        background-size: 23px 20px;
        width: 12px;
        height: 100%
    }
     .coupons .coupon .zigzag-2 {
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 45%, #c4c4c411 45%, #c4c4c411 55%, white 55%), linear-gradient(315deg, white 45%, #c4c4c411 45%, #c4c4c411 55%, #f4f4f45e 55%);
        background-repeat: repeat-y;
        background-size: 23px 20px;
        width: 12px;
        height: 100%
    }
    .coupons .coupon .body {
        display: grid;
        min-height: 112px;
        padding: 16px 13px 11px 21px;
        grid-template-rows: min-content 1fr min-content;
        grid-template-columns: 1fr min-content;
        grid-template-areas: "code         icon" "description  description" "discount     availability";
        color: #27283e
    }
    .coupons .coupon .body.used {
        filter: grayscale(1);
        color: #27283e69
    }
    .coupons .coupon .body .code {
        grid-area: code;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 3px);
        line-height: 20px;
        letter-spacing: .15em
    }
    .coupons .coupon .body .icon {
        grid-area: icon;
        width: 45px;
        margin-bottom: 1px;
        justify-self: end
    }
    .coupons .coupon .body .icon.available {
        right: 0
    }
    .coupons .coupon .body .description {
        grid-area: description;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        color: #757575;
        font-size: calc(var(--font-title) - 6px);
        line-height: 18px;
        display: block;
        margin-bottom: 5px
    }
    .coupons .coupon .body .discount {
        grid-area: discount;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 20px;
        margin-top: auto;
        color: #27283e
    }
    .coupons .coupon .body .availability {
        grid-area: availability;
        text-transform: uppercase;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        color: #4cbba1;
        letter-spacing: 1px;
        margin-top: auto;
        margin-left: 5px
    }
/*}*/

@media(max-width: 767px) {
    .collection-type-selector-widget {
        border-radius: 10px;
        margin: 6px 0px 6px 0px;
    }
    .collection-type-selector-widget2 {
        padding: 10px;
        background:var(--color-menu-tag);
    }
    .collection-type-selector-widget .collection-types .collection-type-single {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left;
        color: #d67300;
        display: flex;
        flex-direction: row
    }
    .collection-type-selector-widget .collection-types .collection-type-single span {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: .25px;
        text-align: left
    }
    .collection-type-selector-widget .collection-types .collection-type-single span:first-of-type {
        margin-right: .25em
    }
    .collection-type-selector-widget .collection-types .collection-type-single span:last-of-type {
        margin-left: auto
    }
    .collection-type-selector-widget .collection-types .collection-type-widget {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr;
        grid-auto-columns: 1fr;
        overflow: hidden;
        padding: 5px;
        gap: 5px;
        border-radius: 10px;
        background-color: #e2e2e2
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type {
        position: relative;
        text-align: center;
        padding: 4px 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: transparent;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order .collection-label,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type .collection-label {
        padding: 1px
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order span,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type span {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: var(--color-title-menu)
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order.selected,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type.selected {
        background-color: #ffffff
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order.selected .check,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type.selected .check {
        margin-right: 10px;
        left: 33px;
        width: 14px
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order {
        background-color: var(--button-success-bg);
        color: var(--button-success-fg)
    }
    .collection-type-selector-widget .start-ordering-link {
        display: none
    }
    .collection-type-selector-widget .start-ordering-link.more-info {
        display: unset;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 700;
        line-height: 16.9px;
        letter-spacing: .4px;
        color: #d67300
    }
}

@media(max-width: 767px) {
    .order-success-page {
        background-color: #fff
    }
    .order-success-page.page>.header {
        padding: 0px;
        box-shadow: none
    }
    .order-success-page .checkout-banner {
        text-align: center;
        margin: 40px 20px
    }
    .order-success-page .checkout-banner .icon {
        margin-bottom: 14px
    }
    .order-success-page .checkout-banner .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) + 3px);
        line-height: 27px;
        color: #27283e
    }
    .order-success-page .order-placed-time {
        margin: 40px 20px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: .4px;
        color: #9e9e9e
    }
    .order-success-page .buttons {
        margin: 0 20px;
        margin-bottom: 100px
    }
    .order-success-page .buttons button {
        width: 100%;
        display: grid;
        row-gap: 10px;
        border-radius: 8px;
        padding: 14px
    }
    .order-success-page .buttons button#order-history-button {
        background: #4cbba1;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 9px
    }
    .order-success-page .buttons button#back-to-menu-button {
        background: #fff;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #757575;
        box-shadow: none
    }
    .loyalty-card-modal {
        background-color: #fff
    }
    .loyalty-card-modal .loyalty-banner {
        margin: 32px 20px 40px 20px;
        margin-top: 32px;
        text-align: center
    }
    .loyalty-card-modal .loyalty-banner .icon {
        margin-bottom: 16px
    }
    .loyalty-card-modal .loyalty-banner .text {
        font-family: var(--font-family);
        font-style: 400;
        font-weight: bold;
        font-size: calc(var(--font-title) + 1px);
        line-height: 25px;
        text-align: center;
        letter-spacing: .15px;
        color: #27283e;
        margin-bottom: 8px
    }
    .loyalty-card-modal .loyalty-banner .subtext {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: .25px;
        color: #757575
    }
    .loyalty-card-modal .card {
        margin: 0px 20px
    }
    .loyalty-card-modal .caption {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: .4px;
        color: #757575;
        margin: 30px 20px 20px 20px
    }
    .loyalty-card-modal .button {
        background: #4cbba1;
        border-radius: 8px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        padding: 14px;
        margin: 0px 20px 16px 20px;
        align-content: flex-end
    }
}

@media(max-width: 767px) {
    .order-status-widget {
        padding: 24px;
        margin: 0 20px;
        margin-bottom: 24px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px
    }
    .order-status-widget .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #f5f5f5;
        display: flex;
        margin-bottom: 16px
    }
    .order-status-widget .progress-bar .progress.success {
        background-color: #086e37
    }
    .order-status-widget .progress-bar .progress.danger {
        background-color: #b0204b
    }
    .order-status-widget .progress-bar .progress.warning {
        background-color: #d67300
    }
    .order-status-widget .caption {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px
    }
    .order-status-widget .caption .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 8px);
        line-height: 13px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #757575
    }
    .order-status-widget .caption .step {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #757575
    }
    .order-status-widget .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        line-height: 23px;
        color: #27283e
    }
    .order-status-widget .sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #757575
    }
    .order-status-widget .payment-message {
        border-radius: 4px;
        padding: 8px 8px 8px 10px;
        margin-top: 16px;
        display: grid;
        grid-template-columns: min-content 1fr;
        column-gap: 10px
    }
    .order-status-widget .payment-message .icon {
        margin-top: 3px
    }
    .order-status-widget .payment-message .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .3px;
        color: #27283e
    }
    .order-status-widget .payment-message.primary {
        background-color: #e5efff
    }
    .order-status-widget .payment-message.primary .icon {
        fill: #5c84e5
    }
    .order-status-widget .payment-message.warning {
        background-color: #ffebcf
    }
    .order-status-widget .payment-message.warning .icon {
        fill: #d67300
    }
    .order-status-widget .payment-message.danger {
        background-color: #ffe7df
    }
    .order-status-widget .payment-message.danger .icon {
        fill: #b0204b
    }
}

@media(max-width: 767px) {
    .order-view-widget .order-summary {
        display: grid;
        row-gap: 16px;
        padding: 24px;
        margin: 0 20px;
        margin-bottom: 24px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px
    }
    .order-view-widget .order-summary .label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 3px);
        line-height: 24px;
        letter-spacing: .25px;
        color: #27283e
    }
    .order-view-widget .order-summary .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 4px
    }
    .order-view-widget .order-summary .payment-method .value {
        display: flex
    }
    .order-view-widget .order-summary .payment-method .wallet,
    .order-view-widget .order-summary .payment-method .brand {
        height: 25px;
        margin-right: 5px
    }
    .order-view-widget .order-summary .payment-method .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575
    }
    .order-view-widget .order-summary .transaction-fee .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575
    }
    .order-view-widget .cart-summary {
        padding: 12px;
        margin: 0 10px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px
    }
    .order-view-widget .cart-summary .cart-items {
        margin-bottom: 16px;
        border-bottom: 1px solid #e0e0e0
    }
    .order-view-widget .cart-summary .cart-items .cart-item {
        display: grid;
        grid-template-areas: "quantity item price";
        grid-template-columns: .5fr 4.5fr 1fr;
        column-gap: 8px;
        row-gap: 17px;
        margin-bottom: 16px
    }
    .order-view-widget .cart-summary .cart-items .cart-item .quantity {
        grid-area: quantity;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e
    }
    .order-view-widget .cart-summary .cart-items .cart-item .item {
        grid-area: item
    }
    .order-view-widget .cart-summary .cart-items .cart-item .item .name {
        grid-area: name;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 4px
    }
    .order-view-widget .cart-summary .cart-items .cart-item .item .summary {
        grid-area: summary;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575;
        white-space: pre-wrap
    }
    .order-view-widget .cart-summary .cart-items .cart-item .price {
        grid-area: price;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: right;
        letter-spacing: .25px;
        color: #27283e
    }
    .order-view-widget .cart-summary .amounts {
        display: grid;
        row-gap: 10px
    }
    .order-view-widget .cart-summary .amounts>div {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: max-content
    }
    .order-view-widget .cart-summary .amounts>div .label,
    .order-view-widget .cart-summary .amounts>div .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #757575
    }
    .order-view-widget .cart-summary .amounts>div:last-child {
        margin-top: 8px
    }
    .order-view-widget .cart-summary .amounts>div:last-child .label,
    .order-view-widget .cart-summary .amounts>div:last-child .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e
    }
}

@media(max-width: 767px) {
    .page>.header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 15px 20px;
        position: relative;
        box-shadow: inset 0px -1px 0px #e8ecf1
    }
    .page>.header .wrapper .title {
        font-family: var(--font-family);
        font-size: var(--font-title);
        font-style: normal;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
        color: #27283e
    }
    .page>.header .wrapper .search .menu-search-widget .text {
        display: none
    }
    .page>.header .wrapper .search .icon {
        filter: invert(1);
        width: 21px
    }
    .page>.header .actions button {
        background-color: #fff;
        padding: 7px 14px
    }
    .page>.header .actions button .icon {
        color: #92929d;
        font-size: 20px
    }
    .page>.header .actions button .label {
        color: var(--color-primary)
    }
    .page>.header .actions a:link {
        text-decoration: none
    }
    .page>.body {
        padding-top: 0px;
        margin-top: var(--safe-area-inset-top)
    }
    .page>.body>div {
        padding-bottom: max(85px, var(--safe-area-inset-bottom))
    }
    .page>.body>.spinner {
        padding: 0;
        margin: 50px;
        text-align: center
    }
    .page>.footer {
        display: none
    }
}

@media(max-width: 767px) {
    .ReactModalPortal .ReactModal__Overlay {
        background: rgba(82, 82, 82, .72) !important;
        z-index: 1000;
        height: 100vh !important;
        width: 100vw !important
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content {
        border-radius: 0 !important;
        padding: 0 !important;
        border: unset !important;
        background: none !important;
        width: auto !important
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal {
        position: fixed;
        left: 0;
        right: 0;
        background-color: #ffffff;
        bottom: 0vh !important
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal.full-screen {
        top: 0;
        height: 100vh;
        width: 100vw;
        overflow-x: hidden;
        overflow-y: scroll
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal.bottom-sheet {
        width: 100vw;
        overflow-x: hidden;
        overflow-y: scroll;
        border-radius: 16px 16px 0 0
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal.bottom-sheet.fixed-height {
        height: 75vh
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal.bottom-sheet.min-content {
        max-height: 75vh
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .deal-widget {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }
    .deal-widget .item-body .close-icon {
        position: fixed;
        background: #ffffff;
        width: 20px;
        padding: 10px;
        border-radius: 100%;
        right: 19px;
        top: 19px;
        z-index: 1;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .deal-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 52px
    }
    .deal-widget .item-name {
        padding: 0 20px;
        padding-top: 25px;
        padding-right: 65px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .deal-widget .item-name.no-image {
        margin-top: 35px
    }
    .deal-widget.no-image-and-modifier {
        height: unset
    }
    .deal-widget.no-image-and-modifier .item-body .close-icon {
        position: absolute;
        top: 17px
    }
    .deal-widget.no-image-and-modifier .item-body .item-name {
        margin-top: 0
    }
    .deal-widget.no-image-and-modifier .add-to-cart-widget {
        padding: 32px 20px !important
    }
    .deal-widget .item-details {
        padding: 10px 20px 32px 20px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff
    }
    .deal-widget .item-details * {
        margin: 0
    }
    .deal-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .deal-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 15px;
        margin-bottom: 16px
    }
    .deal-widget .item-details .item-price-and-sold-out .item-price {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .deal-widget .item-details .item-price-and-sold-out .item-sold-out,
    .deal-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .deal-widget .deal-body {
        padding-bottom: 32px
    }
    .deal-widget .deal-body .deal-pizzas {
        padding-top: 0
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza:first-child {
        margin-top: 0
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr max-content;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fafafa
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title {
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 2px);
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .requiredness {
        padding: 0px 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 6px);
        letter-spacing: 0;
        color: #757575
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .selected::before {
        content: url("/images/green-check.svg");
        padding-right: 5px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .required {
        color: #086e37
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .error {
        background-color: #ffe7df;
        color: #b0204b
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header>.form-item.switch label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #27283e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header>.switch {
        display: flex;
        justify-content: flex-start
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header>.switch>label {
        margin: 0;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 18px;
        letter-spacing: 0;
        color: #27283e !important
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body {
        padding: 20px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry {
        margin-top: 8px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry:first-child {
        margin-top: 0
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr min-content min-content;
        gap: 15px;
        padding: 18px 16px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        align-items: center
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button .text {
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #27283e;
        line-height: 14px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button .text.no-pizza {
        color: #9e9e9e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button .extra-charge {
        white-space: nowrap;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #9e9e9e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .summary>pre {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        color: #757575;
        margin: 17px 2px;
        margin-bottom: 12px;
        letter-spacing: .3px;
        line-height: 18px;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .customize-pizza-button {
        margin-left: 2px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 20px;
        color: #4cbba1;
        letter-spacing: 1px;
        margin-bottom: 28px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .customize-pizza-button.customize {
        margin-top: 20px
    }
    .deal-widget .deal-body .deal-items {
        padding: 12px 0;
        display: grid;
        grid-gap: 35px
    }
    .deal-widget .deal-body .deal-items .deal-item>.header {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr max-content;
        align-items: center;
        margin-bottom: 11px;
        padding: 16px 20px;
        background-color: #fafafa
    }
    .deal-widget .deal-body .deal-items .deal-item>.header .title {
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 2px);
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e
    }
    .deal-widget .deal-body .deal-items .deal-item>.modifiers .modifier-widget .header .title .modifier-name {
        font-weight: 500
    }
    .deal-widget .deal-body .deal-modifiers {
        padding: 20px 0
    }
    .deal-widget .actions .add-to-cart-widget {
        background: #eff8f9;
        padding: 32px 20px;
        padding-bottom: 122px
    }
    .deal-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        display: flex;
        flex-direction: row
    }
    .deal-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .deal-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .deal-pizza-list-widget {
        display: flex;
        flex-flow: column;
        height: 100%;
        font-family: var(--font-family);
        font-style: normal
    }
    .deal-pizza-list-widget input[type=radio] {
        display: none
    }
    .deal-pizza-list-widget input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .deal-pizza-list-widget input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 15px;
        height: 15px
    }
    .deal-pizza-list-widget input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .deal-pizza-list-widget .item-header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .deal-pizza-list-widget .item-header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .deal-pizza-list-widget .item-header .close {
        margin: 5px;
        overflow: hidden;
        color: transparent;
        background-image: url("/images/x-icon.svg");
        background-repeat: no-repeat;
        background-size: cover;
        width: 14px;
        height: 14px
    }
    .deal-pizza-list-widget .item-body {
        height: 100%;
        overflow: scroll;
        margin-bottom: 26px
    }
    .deal-pizza-list-widget .pizzas {
        display: flex;
        flex-direction: column;
        overflow: auto;
        grid-gap: 20px;
        padding: 16px 20px
    }
    .deal-pizza-list-widget .pizzas .pizza {
        padding: 14px 0;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        overflow: hidden;
        position: relative
    }
    .deal-pizza-list-widget .pizzas .pizza .soldout-overlay {
        background: #ababab36;
        width: 100%;
        height: 100%;
        position: absolute;
        cursor: not-allowed;
        left: 0;
        top: 0
    }
    .deal-pizza-list-widget .pizzas .pizza .header {
        padding: 0 10px 0 15px;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .1px;
        color: #27283e;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .deal-pizza-list-widget .pizzas .pizza .price {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575;
        white-space: nowrap
    }
    .deal-pizza-list-widget .pizzas .pizza .description {
        margin: 0;
        padding: 5px 15px 0 40px;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        color: #757575
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .half-and-half-widget {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }
    .half-and-half-widget .item-body .close-icon {
        position: fixed;
        background: #ffffff;
        width: 20px;
        padding: 10px;
        border-radius: 100%;
        right: 19px;
        top: 19px;
        z-index: 1;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .half-and-half-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 52px
    }
    .half-and-half-widget .item-name {
        padding: 0 20px;
        padding-top: 25px;
        padding-right: 65px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .half-and-half-widget .item-name.no-image {
        margin-top: 35px
    }
    .half-and-half-widget.no-image-and-modifier {
        height: unset
    }
    .half-and-half-widget.no-image-and-modifier .item-body .close-icon {
        position: absolute;
        top: 17px
    }
    .half-and-half-widget.no-image-and-modifier .item-body .item-name {
        margin-top: 0
    }
    .half-and-half-widget.no-image-and-modifier .add-to-cart-widget {
        padding: 32px 20px !important
    }
    .half-and-half-widget .item-details {
        padding: 10px 20px 32px 20px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff
    }
    .half-and-half-widget .item-details * {
        margin: 0
    }
    .half-and-half-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .half-and-half-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 15px;
        margin-bottom: 16px
    }
    .half-and-half-widget .item-details .item-price-and-sold-out .item-price {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .half-and-half-widget .item-details .item-price-and-sold-out .item-sold-out,
    .half-and-half-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .half-and-half-widget .half-and-half-pizzas {
        display: grid;
        grid-gap: 27px;
        font-family: var(--font-family);
        font-style: normal
    }
    .half-and-half-widget .half-and-half-pizzas p {
        margin: 0;
        margin-bottom: 11px
    }
    .half-and-half-widget .half-and-half-pizzas .header {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin: 0;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25.5px;
        background-color: #fafafa
    }
    .half-and-half-widget .half-and-half-pizzas .header .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3px
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .pizza-half {
        font-size: calc(var(--font-title) - 2px);
        font-style: normal;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0px;
        margin-right: 8px
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .requiredness {
        padding: 3px 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 6px);
        line-height: 18px;
        letter-spacing: 0;
        color: #757575
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .selected::before {
        content: url("/images/green-check.svg");
        padding-right: 5px
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .required {
        color: #086e37
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .error {
        background-color: #ffe7df;
        color: #b0204b
    }
    .half-and-half-widget .half-and-half-pizzas .half-and-half-pizza-entry {
        padding: 16px 20px
    }
    .half-and-half-widget .half-and-half-pizzas .choose-pizza-button {
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 30px 14px 16px;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 22.5px;
        letter-spacing: .1px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: #ffffff;
        color: #9e9e9e;
        background-image: url("/images/right-arrow-head-icon.svg");
        background-repeat: no-repeat;
        background-position: right 14px bottom 19px
    }
    .half-and-half-widget .half-and-half-pizzas .choose-pizza-button .label.with-input {
        color: #27283e
    }
    .half-and-half-widget .half-and-half-pizzas .choose-pizza-button .extra-charge {
        display: flex;
        grid-gap: 5px
    }
    .half-and-half-widget .half-and-half-pizzas .summary {
        margin: 0;
        padding: 18px 0 0 2px;
        white-space: pre-wrap;
        font-family: var(--font-family);
        font-weight: 400;
        font-style: normal;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        letter-spacing: .25px;
        color: #757575
    }
    .half-and-half-widget .half-and-half-pizzas .customize-pizza-button {
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 16.9px;
        letter-spacing: 1px;
        background: #ffffff;
        color: #4cbba1;
        box-shadow: none;
        padding: 20px 3px
    }
    .half-and-half-widget .half-and-half-pizzas .edit-pizza-button {
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 16.9px;
        letter-spacing: 1px;
        background: #ffffff;
        color: #4cbba1;
        box-shadow: none;
        padding: 14px 0 0 2px
    }
    .half-and-half-widget .actions {
        margin-top: 33px
    }
    .half-and-half-widget .actions .add-to-cart-widget {
        background: #eff8f9;
        padding: 32px 20px;
        padding-bottom: 122px
    }
    .half-and-half-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        display: flex;
        flex-direction: row
    }
    .half-and-half-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .half-and-half-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .half-and-half-pizza-list-widget {
        display: flex;
        flex-flow: column;
        height: 100%;
        font-family: var(--font-family);
        font-style: normal
    }
    .half-and-half-pizza-list-widget input[type=radio] {
        display: none
    }
    .half-and-half-pizza-list-widget input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .half-and-half-pizza-list-widget input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 15px;
        height: 15px
    }
    .half-and-half-pizza-list-widget input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .half-and-half-pizza-list-widget .item-header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .half-and-half-pizza-list-widget .item-header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .half-and-half-pizza-list-widget .item-header .close {
        margin: 5px;
        overflow: hidden;
        color: transparent;
        background-image: url("/images/x-icon.svg");
        background-repeat: no-repeat;
        background-size: cover;
        width: 14px;
        height: 14px
    }
    .half-and-half-pizza-list-widget .item-body {
        height: 100%;
        overflow: scroll;
        margin-bottom: 26px
    }
    .half-and-half-pizza-list-widget .pizzas {
        display: flex;
        flex-direction: column;
        overflow: auto;
        grid-gap: 20px;
        padding: 16px 20px
    }
    .half-and-half-pizza-list-widget .pizzas .pizza {
        padding: 14px 0;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        overflow: hidden;
        position: relative
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .soldout-overlay {
        background: #ababab36;
        width: 100%;
        height: 100%;
        position: absolute;
        cursor: not-allowed;
        left: 0;
        top: 0
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .header {
        padding: 0 10px 0 15px;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .1px;
        color: #27283e;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .price {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575;
        white-space: nowrap
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .description {
        margin: 0;
        padding: 5px 15px 0 40px;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        color: #757575
    }
}

@media(max-width: 767px) {
    .order-history-page {
        background: #fafafa
    }
    .order-history-page .list {
        margin: 0 20px
    }
    .order-history-page .list .order-list-view {
        display: grid;
        grid-template-areas: "collection-type status" "time time" "address address" "customer customer" "grand-total grand-total";
        grid-template-columns: 1fr auto;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        margin: 20px 0px;
        padding: 16px
    }
    .order-history-page .list .order-list-view .status {
        grid-area: status;
        display: block;
        margin-bottom: 9px
    }
    .order-history-page .list .order-list-view .collection-type {
        grid-area: collection-type;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .1px;
        color: #27283e;
        margin-bottom: 9px
    }
    .order-history-page .list .order-list-view .time {
        grid-area: time;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e
    }
    .order-history-page .list .order-list-view .address {
        grid-area: address;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 8px
    }
    .order-history-page .list .order-list-view .customer {
        grid-area: customer;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575;
        margin-bottom: 8px
    }
    .order-history-page .list .order-list-view .grand-total {
        grid-area: grand-total;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575
    }
}

@media(max-width: 767px) {
    .order-view-page {
        background-color: #fff
    }
    .order-view-page .order-view-header {
        display: none
    }
    .order-view-page .order-status-widget {
        margin-top: 20px
    }
    .order-view-page .order-placed-time {
        margin: 40px 20px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: .4px;
        color: #9e9e9e
    }
    .order-view-page .buttons {
        margin: 0 20px
    }
    .order-view-page .buttons button {
        width: 100%;
        display: grid;
        row-gap: 10px;
        border-radius: 8px;
        padding: 14px
    }
    .order-view-page .buttons button#cancel-order-button {
        background: #4cbba1;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 9px
    }
    .order-view-page .buttons button#back-to-menu-button {
        background: #fff;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #757575;
        box-shadow: none
    }
}

@media(max-width: 767px) {
    .badge {
        display: inline;
        border-radius: 15em;
        padding: 3.5px 6px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .25px;
    }
    .badge.success {
        background: #def2d6;
        color: #086e37
    }
    .badge.failure {
        background: #ffe7df;
        color: #b0204b
    }
     .badge_danger {
        background:red;
    }
    .badge.primary,
    .badge.warning {
        background: #ffebcf;
        color: #d67300
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .edit-delivery-address-widget {
        padding: 0 20px;
        display: grid;
        grid-template-areas: "title          image" "edit-delivery  edit-delivery";
        grid-template-columns: 1fr max-content
    }
    .edit-delivery-address-widget .title {
        grid-area: title;
        display: flex;
        align-self: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        color: #27283e;
        margin-bottom: 15px
    }
    .edit-delivery-address-widget .image {
        grid-area: image;
        width: 38px;
        margin-bottom: 15px
    }
    .edit-delivery-address-widget .edit-delivery-address-body {
        grid-area: edit-delivery;
        background: #fafafa;
        font-size: calc(var(--font-title) - 5px);
        padding: 14px 16px 5px 16px;
        border-radius: 8px
    }
    .edit-delivery-address-widget .edit-delivery-address-body .form-items {
        grid-gap: 16px !important
    }
    .edit-delivery-address-widget .edit-delivery-address-body .form-item * {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        line-height: 22.5px;
        letter-spacing: .1px
    }
    .edit-delivery-address-widget .edit-delivery-address-body .form-item input {
        padding: 14px
    }
    .edit-delivery-address-widget .edit-delivery-address-body .selected-suburb {
        color: #27283e;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        line-height: 22.5px;
        letter-spacing: .1px;
        padding: 14px;
        background: #ffffff;
        background-image: url("/images/form-select-icon.svg");
        background-repeat: no-repeat;
        background-position: right 13px bottom 20px;
        background-position-y: center;
        border-radius: 8px;
        border: 1px solid #e0e0e0
    }
    .edit-delivery-address-widget .edit-delivery-address-body .subtitle {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        margin: 0;
        margin-top: 18px;
        line-height: 16.9px;
        letter-spacing: .4px;
        color: #757575
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .update-delivery-address-widget {
        font-family: var(--font-family);
        font-style: normal;
        letter-spacing: .25px;
        color: #27283e;
        background: #fafafa;
        height: 100%
    }
    .update-delivery-address-widget .header-section {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99;
        padding: 0 20px
    }
    .update-delivery-address-widget .header-section .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .update-delivery-address-widget .header-section .close-icon {
        width: 15px;
        margin-right: 5px
    }
    .update-delivery-address-widget .suburbs-list-widget {
        padding-top: 28px;
        padding-bottom: 72px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body {
        display: grid
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .edit-delivery-address-widget {
        border-bottom: 1px solid #e0e0e0;
        background: #ffffff;
        padding-top: 13px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .edit-delivery-address-widget .edit-delivery-address-body {
        margin-bottom: 110px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .edit-delivery-address-widget .edit-delivery-address-body .invalid {
        border-color: #e0e0e0 !important
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .action-buttons {
        display: grid;
        grid-gap: 17px;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
        padding: 15px 20px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .action-buttons .update-address-button {
        background: #4cbba1;
        color: #fff;
        width: 100%;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        letter-spacing: 1.5px;
        padding: 14px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .action-buttons .cancel-order-button {
        background: #ffffff;
        border: 1px solid #4cbba1;
        color: #4cbba1;
        width: 100%;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        letter-spacing: 1.5px;
        padding: 13px
    }
}

@media(max-width: 767px) {
    .confirm-dialog.discounted-items-alert .swal2-content {
        padding: 0
    }
    .confirm-dialog.discounted-items-alert .swal2-title {
        text-align: left;
        font-size: calc(var(--font-title) - 2px);
        font-weight: 500
    }
    .confirm-dialog.discounted-items-alert .swal2-html-container {
        text-align: left;
        margin: 0 30px;
        font-size: 14px
    }
    .checkout-widget {
        padding: 0 !important;
        width: 100%;
        display: grid
    }
    .checkout-widget.keyboard-visible {
        margin-bottom: 100px
    }
    .checkout-widget .spinner-container {
        margin-top: 120px
    }
    .checkout-widget .checkout-header {
        position: fixed;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        box-shadow: inset 0px -1px 0px #f0f0f0;
        background-color: #ffffff;
        border-radius: 16px 16px 0 0;
        z-index: 200
    }
    .checkout-widget .checkout-header .header-text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        letter-spacing: .15px;
        text-align: left;
        margin-left: 20px;
        color: #27283e
    }
    .checkout-widget .checkout-header .close-icon {
        position: absolute;
        right: 25px;
        width: 15px;
        cursor: pointer
    }
    .checkout-widget .alert {
        margin: 10px 0;
        box-shadow: none
    }
    .checkout-widget form {
        padding-top: 0 !important
    }
    .checkout-widget form .form-items {
        grid-gap: 10px
    }
    .checkout-widget form .form-items .error {
        font-family: "Poppins"
    }
    .checkout-widget form .form-items .form-input input {
        height: 53px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .1px
    }
    .checkout-widget form .form-items .form-input textarea {
        height: 100px;
        padding-left: 15px;
        padding-top: 18px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: normal;
        line-height: 23px;
        letter-spacing: .1px;
        text-align: left
    }
    .checkout-widget form .form-items .form-input ::-webkit-input-placeholder {
        color: #757575
    }
    .checkout-widget form .form-items .form-input ::-moz-placeholder {
        color: #757575
    }
    .checkout-widget form .form-items .form-input :-ms-input-placeholder {
        color: #757575
    }
    .checkout-widget form .form-items .form-input :-moz-placeholder {
        color: #757575
    }
    .checkout-widget .radio-button {
        display: flex;
        justify-content: center;
        align-self: center;
        padding-left: 4px
    }
    .checkout-widget input[type=radio] {
        display: none
    }
    .checkout-widget input[type=radio]+*::before {
        content: "";
        display: inline-block;
        vertical-align: bottom;
        width: .8rem;
        height: .8rem;
        margin-right: .3rem;
        border-radius: 50%;
        border-style: solid;
        border-width: .1rem;
        border-color: #e0e0e0
    }
    .checkout-widget input[type=radio]:checked+*::before {
        background-color: #4cbba1;
        border-color: #4cbba1
    }
    .checkout-widget input[type=radio]:checked+* {
        color: #4cbba1
    }
    .checkout-widget .step-buttons {
        display: grid;
        grid-gap: 0;
        grid-auto-flow: row
    }
    .checkout-widget .step-buttons .button,
    .checkout-widget .step-buttons button.place-order,
    .checkout-widget .step-buttons button.continue,
    .checkout-widget .step-buttons button.previous {
        width: 100%;
        padding: 20px;
        margin-bottom: 10px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase
    }
    .checkout-widget .step-buttons button.previous {
        background-color: transparent;
        color: #757575;
        box-shadow: none
    }
    .checkout-widget .step-buttons button.continue {
        background-color: #4cbba1
    }
    .checkout-widget .step-buttons button.place-order {
        margin-top: 10px;
        background-color: #4cbba1
    }
    .checkout-widget .sections {
        background-color: var(--card-bg);
        box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
        border-radius: 10px;
        border: 1px solid #e2e2ea;
        margin-bottom: 30px;
        margin-top: 60px
    }
    .checkout-widget .section {
        height: auto;
        min-height: 47vh;
        padding-top: 8px
    }
    .checkout-widget .section>.header {
        padding: 16px 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-bottom: 33px
    }
    .checkout-widget .section>.header .title {
        display: grid;
        grid-template-columns: 2
    }
    .checkout-widget .section>.header .title .icon {
        margin: 0 auto;
        background-repeat: no-repeat;
        background-size: contain;
        height: 61px;
        width: 61px;
        padding-bottom: 15px
    }
    .checkout-widget .section>.header .title .customer-display-name {
        background-image: url("/images/customer-name-icon.svg")
    }
    .checkout-widget .section>.header .title .coupon {
        background-image: url("/images/coupon-icon.svg")
    }
    .checkout-widget .section>.header .title .comment {
        background-image: url("/images/comment-icon.svg")
    }
    .checkout-widget .section>.header .title .payment {
        background-image: url("/images/payment-icon.svg")
    }
    .checkout-widget .section>.header .title .header {
        text-align: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-style: normal;
        font-weight: bold;
        line-height: 25px;
        letter-spacing: .15px;
        color: #27283e;
        margin-bottom: 10px
    }
    .checkout-widget .section>.header .title .subtitle {
        margin: 0 auto;
        width: 80%;
        text-align: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .25px;
        color: #757575
    }
    .checkout-widget .section>.header .title-add-action {
        display: flex;
        flex-direction: row;
        align-items: center
    }
    .checkout-widget .section>.header .title-add-action img {
        margin-right: 8px
    }
    .checkout-widget .section>.header .title-add-action span {
        font-family: Fira Sans;
        font-style: normal;
        font-weight: 500;
        font-size: 12.5px;
        text-align: right;
        color: #426ed9
    }
    .checkout-widget .section>.header .title-value {
        font-family: Fira Sans;
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        text-align: right;
        color: #426ed9
    }
    .checkout-widget .section>.header .title-value.close {
        color: var(--color-secondary)
    }
    .checkout-widget .items .cart-item {
        padding: 0 20px 12px 20px;
        border-bottom: 1px dashed #e9ecf3;
        margin-bottom: 20px
    }
    .checkout-widget .items .cart-item:last-child {
        border-bottom: none;
        margin-bottom: 0px
    }
    .checkout-widget .items .cart-item>.header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .checkout-widget .items .cart-item>.header .name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 2px);
        color: #000521;
        word-break: break-all
    }
    .checkout-widget .items .cart-item>.footer {
        display: grid;
        grid-template-columns: 1fr min-content;
        justify-content: space-between;
        align-items: flex-end;
        margin: 8px 0px
    }
    .checkout-widget .items .cart-item>.footer .price {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 2px);
        color: #fa7268
    }
    .checkout-widget .items .cart-item>.footer .quantity {
        display: flex;
        flex-direction: row;
        align-items: center
    }
    .checkout-widget .items .cart-item>.footer .quantity .number {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        color: #000521
    }
    .checkout-widget .items .cart-item>.footer .quantity .icon {
        cursor: pointer
    }
    .checkout-widget .items .cart-item>.footer .quantity .dec {
        padding-right: 10px
    }
    .checkout-widget .items .cart-item>.footer .quantity .inc {
        padding-left: 10px
    }
    .checkout-widget .items .cart-item>.footer .quantity .icon {
        color: #8d92a3;
        font-size: 24px
    }
    .checkout-widget .items .cart-item .summary {
        align-self: start;
        word-break: break-all
    }
    .checkout-widget .items .cart-item .summary pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 6px);
        line-height: 18px;
        color: #8d92a3;
        margin: 0 !important
    }
    .checkout-widget .amounts {
        padding: 10px 20px
    }
    .checkout-widget .amounts .amount {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        font-family: Fira Sans;
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 4px);
        line-height: 22px;
        color: #565c65
    }
    .checkout-widget .amounts .grand-total {
        font-weight: bold;
        font-size: calc(var(--font-title) - 2px);
        margin-top: 10px
    }
    .checkout-widget .add-delivery-address {
        padding: 5px 20px 10px
    }
    .checkout-widget .add-delivery-address .delivery-suburbs {
        display: grid;
        margin-top: 10px;
        margin-bottom: 5px
    }
    .checkout-widget .add-delivery-address .delivery-suburbs .delivery-suburb {
        display: grid;
        grid-template-columns: min-content 1fr;
        padding: 10px 0;
        grid-gap: 5px;
        border-bottom: 1px dashed #e9ecf3;
        grid-template-columns: min-content 1fr min-content
    }
    .checkout-widget .add-delivery-address .delivery-suburbs .delivery-suburb.selected {
        color: var(--fg);
        font-weight: 500
    }
    .checkout-widget .add-delivery-address .delivery-suburbs .delivery-suburb:last-child {
        border-bottom: 0
    }
    .checkout-widget .add-delivery-address .delivery-suburbs .delivery-suburb .charge {
        white-space: nowrap
    }
    .checkout-widget .saved-addresses {
        padding: 5px 20px 10px
    }
    .checkout-widget .saved-addresses .saved-address {
        display: grid;
        grid-template-columns: min-content 1fr;
        padding: 10px 0;
        grid-gap: 5px;
        border-bottom: 1px dashed #e9ecf3;
        grid-template-columns: min-content 1fr min-content min-content !important
    }
    .checkout-widget .saved-addresses .saved-address.selected {
        color: var(--fg);
        font-weight: 500
    }
    .checkout-widget .saved-addresses .saved-address:last-child {
        border-bottom: 0
    }
    .checkout-widget .saved-addresses .radio-button {
        top: 10px;
        position: relative
    }
    .checkout-widget .saved-addresses .address {
        padding-top: 10px
    }
    .checkout-widget .saved-addresses .icon {
        color: #8d92a3;
        font-size: calc(var(--font-title) + 6px);
        cursor: pointer
    }
    .checkout-widget .no-comments {
        text-align: center;
        padding: 50px 0
    }
    .checkout-widget .add-new-comment {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 17px;
        letter-spacing: .4px;
        text-align: left;
        color: #4cbba1;
        padding: 10px 25px 10px
    }
    .checkout-widget .saved-comments {
        padding: 5px 20px 10px;
        padding-bottom: 10px;
        height: auto
    }
    .checkout-widget .saved-comments .saved-comment {
        display: flex;
        padding: 11px;
        padding-right: 5px;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 8px;
        overflow-wrap: anywhere
    }
    .checkout-widget .saved-comments .saved-comment input[type=radio] {
        display: none
    }
    .checkout-widget .saved-comments .saved-comment input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .checkout-widget .saved-comments .saved-comment input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 15px;
        height: 15px
    }
    .checkout-widget .saved-comments .saved-comment input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .checkout-widget .saved-comments .saved-comment input[type=radio]+label {
        margin-left: 24px
    }
    .checkout-widget .saved-comments .saved-comment input[type=radio]+label::before {
        top: 2px;
        left: -23px
    }
    .checkout-widget .saved-comments .saved-comment .edit.icon {
        margin-left: auto;
        margin-right: 4px
    }
    .checkout-widget .saved-comments .saved-comment.selected {
        border-color: #4cbba1
    }
    .checkout-widget .saved-comments .radio-button {
        align-self: center;
        padding-left: 4px
    }
    .checkout-widget .saved-comments .comment {
        align-self: center;
        padding-left: 7px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 500;
        line-height: 23px;
        letter-spacing: .1px;
        text-align: left;
        color: #27283e
    }
    .checkout-widget .saved-comments .icon {
        height: 28px;
        width: 28px;
        cursor: pointer
    }
    .checkout-widget .saved-comments .remove {
        background-image: url("/images/trash-icon.svg");
        background-repeat: no-repeat;
        background-position: center
    }
    .checkout-widget .saved-comments .edit {
        background-image: url("/images/pen-icon.svg");
        background-repeat: no-repeat;
        background-position: center
    }
    .checkout-widget .payment {
        margin-bottom: -10px
    }
    .checkout-widget .payment-types {
        display: grid;
        grid-gap: 6px;
        padding: 5px 20px 10px
    }
    .checkout-widget .payment-types .payment-type.selected {
        border-color: #4cbba1
    }
    .checkout-widget .payment-types .payment-type {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 14px
    }
    .checkout-widget .payment-types .payment-type input[type=radio] {
        display: none
    }
    .checkout-widget .payment-types .payment-type input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .checkout-widget .payment-types .payment-type input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 15px;
        height: 15px
    }
    .checkout-widget .payment-types .payment-type input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .checkout-widget .redeem-coupon .header,
    .checkout-widget .payment .header {
        padding-bottom: 13px
    }
    .checkout-widget .use-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 5px);
        line-height: 19px;
        text-align: center;
        color: #4cbba1;
        margin: 34px 0
    }
    .checkout-widget .coupons {
        margin: 0
    }
    .checkout-widget .coupons .recommended-coupon {
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 700;
        line-height: 13px;
        letter-spacing: 1.5px;
        text-align: left;
        font-family: var(--font-family);
        text-transform: uppercase;
        color: #d67300;
        margin: 15px 0 5px 20px
    }
    .checkout-widget .coupons .note {
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        font-family: var(--font-family);
        letter-spacing: unset;
        margin: unset;
        text-transform: unset;
        color: #27283e;
        padding: 0 15px;
        margin-bottom: 15px;
        margin-top: 15px
    }
    .checkout-widget .coupons .note .learn-more {
        color: #d67300;
        cursor: pointer;
        white-space: nowrap
    }
    .checkout-widget .suggested-coupon {
        display: grid;
        grid-template-areas: "zigzag content";
        grid-template-columns: 12px 1fr;
        border-top: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        background-color: #ffffff;
        box-shadow: 0px 0px 8px 1px rgba(48, 47, 58, .1)
    }
    .checkout-widget .suggested-coupon .content {
        grid-area: content
    }
    .checkout-widget .suggested-coupon .zigzag {
        grid-area: zigzag;
        width: 12px;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 47%, #e9e9e9 47%, #e9e9e9 52%, #ffffff 52%), linear-gradient(315deg, #ffffff 47%, #e9e9e9 47%, #e9e9e9 52%, rgba(225, 225, 225, 0.3) 52%);
        background-repeat: repeat-y;
        background-size: 23px 23px
    }
    .checkout-widget .suggested-coupon .content {
        display: grid;
        align-items: center;
        grid-template-rows: repeat(3, min-content);
        grid-template-columns: 1fr min-content;
        grid-template-areas: "name          actions" "description   actions" "discount      actions";
        gap: 0px 5px;
        color: #27283e;
        background-color: #ffffff;
        margin-left: 10px
    }
    .checkout-widget .suggested-coupon .content .name {
        grid-area: name;
        font-family: "IBM Plex";
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 600;
        line-height: 15px;
        letter-spacing: .15em;
        text-align: left;
        color: #27283e;
        margin-top: 22px
    }
    .checkout-widget .suggested-coupon .content .icon {
        grid-area: icon;
        position: absolute;
        width: 43px;
        top: -10px
    }
    .checkout-widget .suggested-coupon .content .icon.available {
        right: 0
    }
    .checkout-widget .suggested-coupon .content .description {
        grid-area: description;
        min-height: 50px;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: .25px;
        text-align: left;
        color: #757575;
        margin-top: 8px;
        margin-bottom: 8px
    }
    .checkout-widget .suggested-coupon .content .discount {
        grid-area: discount;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: .1px;
        text-align: left;
        color: #27283e;
        text-transform: lowercase;
        margin-bottom: 18px
    }
    .checkout-widget .suggested-coupon .content .actions {
        grid-area: actions
    }
    .checkout-widget .suggested-coupon .content .actions button {
        padding: 4px 14px;
        margin-right: 15px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 1px;
        color: #4cbba1;
        background-color: #ffffff;
        border: 2px solid #4cbba1;
        border-radius: 8px
    }
    .checkout-widget .suggested-coupon.used {
        filter: grayscale(1);
        color: #27283e
    }
    .checkout-widget .suggested-coupon .code {
        grid-area: code;
        font-family: "IBM Plex";
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        letter-spacing: 1.2px
    }
    .checkout-widget .suggested-coupon .availability {
        grid-area: availability;
        text-transform: uppercase;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        color: #4cbba1;
        letter-spacing: 1px
    }
    .checkout-widget .applied-coupon {
        display: grid;
        grid-template-areas: "zigzag content";
        grid-template-columns: 12px 1fr;
        border-top: 1px solid #4cbba1;
        border-right: 1px solid #4cbba1;
        border-bottom: 1px solid #4cbba1;
        background-color: #eff8f9;
        box-shadow: 0px 0px 8px 1px rgba(48, 47, 58, .1)
    }
    .checkout-widget .applied-coupon .content {
        grid-area: content
    }
    .checkout-widget .applied-coupon .zigzag {
        grid-area: zigzag;
        width: 12px;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 47%, #4cbba1 47%, #4cbba1 52%, #eff8f9 52%), linear-gradient(315deg, #eff8f9 47%, #4cbba1 47%, #4cbba1 52%, rgba(225, 225, 225, 0.3) 52%);
        background-repeat: repeat-y;
        background-size: 23px 23px
    }
    .checkout-widget .applied-coupon .content {
        display: grid;
        align-items: center;
        grid-template-rows: min-content 1fr min-content min-content;
        grid-template-columns: 1fr min-content;
        margin-left: 10px;
        grid-template-areas: "name      icon" "desc      icon" "discount  icon" "actions   icon"
    }
    .checkout-widget .applied-coupon .content .name {
        grid-area: name;
        font-family: "IBM Plex";
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 600;
        line-height: 15px;
        letter-spacing: 2.2px;
        text-align: left;
        color: #27283e;
        margin-top: 13px
    }
    .checkout-widget .applied-coupon .content .description {
        grid-area: desc;
        min-height: 36px;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        margin-top: 5px;
        margin-bottom: 5px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        color: #757575
    }
    .checkout-widget .applied-coupon .content .description .learn-more {
        color: #086e37;
        cursor: pointer;
        letter-spacing: 0;
        white-space: nowrap
    }
    .checkout-widget .applied-coupon .content .discount {
        grid-area: discount;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: .5px;
        text-align: left;
        color: #27283e;
        text-transform: uppercase
    }
    .checkout-widget .applied-coupon .content .icon {
        grid-area: icon;
        width: 16px;
        height: 16px;
        background-color: #4cbba1;
        border-radius: 50%;
        padding: 8px;
        margin-right: 22px;
        margin-left: 22px
    }
    .checkout-widget .applied-coupon .content .actions {
        grid-area: actions
    }
    .checkout-widget .applied-coupon .content .actions button {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 1.4px;
        text-align: left;
        margin-top: 16px;
        margin-bottom: 13px;
        padding: 0;
        color: #4cbba1;
        background-color: #eff8f9;
        box-shadow: none
    }
    .checkout-widget .summary-title,
    .checkout-widget .collection-info .collection-type {
        padding: 0 20px 12px 20px;
        margin: 0;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 2px);
        color: #000521
    }
    .checkout-widget .summary-subTitle,
    .checkout-widget .mobile-number .number,
    .checkout-widget .display-name .name,
    .checkout-widget .payment .selected-payment-type,
    .checkout-widget .collection-info .delivery-address,
    .checkout-widget .collection-info .collection-date-time {
        padding: 0 20px 12px 20px;
        margin: 0;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        color: #000521
    }
    .checkout-widget .credential-already-in-use,
    .checkout-widget .mobile-update-widget,
    .checkout-widget .unlink-mobile-number,
    .checkout-widget .add-credit-card,
    .checkout-widget .add-comments,
    .checkout-widget .custom-coupon,
    .checkout-widget .add-delivery-address,
    .checkout-widget .update-display-name {
        padding: 5px 20px 10px
    }
    .checkout-widget .credential-already-in-use .message,
    .checkout-widget .mobile-update-widget .message,
    .checkout-widget .unlink-mobile-number .message,
    .checkout-widget .add-credit-card .message,
    .checkout-widget .add-comments .message,
    .checkout-widget .custom-coupon .message,
    .checkout-widget .add-delivery-address .message,
    .checkout-widget .update-display-name .message {
        padding-left: 6px
    }
    .checkout-widget .credential-already-in-use .actions,
    .checkout-widget .mobile-update-widget .actions,
    .checkout-widget .unlink-mobile-number .actions,
    .checkout-widget .add-credit-card .actions,
    .checkout-widget .add-comments .actions,
    .checkout-widget .custom-coupon .actions,
    .checkout-widget .add-delivery-address .actions,
    .checkout-widget .update-display-name .actions {
        display: grid;
        grid-template-columns: min-content;
        grid-auto-columns: min-content;
        grid-auto-flow: column;
        grid-gap: 10px;
        margin-top: 20px;
        margin-bottom: 15px;
        align-items: center
    }
    .checkout-widget .credential-already-in-use .actions button,
    .checkout-widget .mobile-update-widget .actions button,
    .checkout-widget .unlink-mobile-number .actions button,
    .checkout-widget .add-credit-card .actions button,
    .checkout-widget .add-comments .actions button,
    .checkout-widget .custom-coupon .actions button,
    .checkout-widget .add-delivery-address .actions button,
    .checkout-widget .update-display-name .actions button {
        background-color: #fff;
        padding: 7px 14px
    }
    .checkout-widget .credential-already-in-use .actions button .icon,
    .checkout-widget .mobile-update-widget .actions button .icon,
    .checkout-widget .unlink-mobile-number .actions button .icon,
    .checkout-widget .add-credit-card .actions button .icon,
    .checkout-widget .add-comments .actions button .icon,
    .checkout-widget .custom-coupon .actions button .icon,
    .checkout-widget .add-delivery-address .actions button .icon,
    .checkout-widget .update-display-name .actions button .icon {
        color: #92929d;
        font-size: 20px
    }
    .checkout-widget .credential-already-in-use .actions button .label,
    .checkout-widget .mobile-update-widget .actions button .label,
    .checkout-widget .unlink-mobile-number .actions button .label,
    .checkout-widget .add-credit-card .actions button .label,
    .checkout-widget .add-comments .actions button .label,
    .checkout-widget .custom-coupon .actions button .label,
    .checkout-widget .add-delivery-address .actions button .label,
    .checkout-widget .update-display-name .actions button .label {
        color: var(--color-primary)
    }
    .checkout-widget .credential-already-in-use .actions button img,
    .checkout-widget .mobile-update-widget .actions button img,
    .checkout-widget .unlink-mobile-number .actions button img,
    .checkout-widget .add-credit-card .actions button img,
    .checkout-widget .add-comments .actions button img,
    .checkout-widget .custom-coupon .actions button img,
    .checkout-widget .add-delivery-address .actions button img,
    .checkout-widget .update-display-name .actions button img {
        margin-right: 10px
    }
    .checkout-widget .credential-already-in-use .actions button span,
    .checkout-widget .mobile-update-widget .actions button span,
    .checkout-widget .unlink-mobile-number .actions button span,
    .checkout-widget .add-credit-card .actions button span,
    .checkout-widget .add-comments .actions button span,
    .checkout-widget .custom-coupon .actions button span,
    .checkout-widget .add-delivery-address .actions button span,
    .checkout-widget .update-display-name .actions button span {
        white-space: nowrap;
        color: #426ed9
    }
    .checkout-widget .credential-already-in-use .actions a,
    .checkout-widget .mobile-update-widget .actions a,
    .checkout-widget .unlink-mobile-number .actions a,
    .checkout-widget .add-credit-card .actions a,
    .checkout-widget .add-comments .actions a,
    .checkout-widget .custom-coupon .actions a,
    .checkout-widget .add-delivery-address .actions a,
    .checkout-widget .update-display-name .actions a {
        font-weight: 500;
        font-size: .75rem;
        text-decoration: none;
        margin-left: 5px;
        color: var(--color-secondary);
        white-space: nowrap
    }
    .checkout-widget .credential-already-in-use b,
    .checkout-widget .mobile-update-widget b,
    .checkout-widget .unlink-mobile-number b,
    .checkout-widget .add-credit-card b,
    .checkout-widget .add-comments b,
    .checkout-widget .custom-coupon b,
    .checkout-widget .add-delivery-address b,
    .checkout-widget .update-display-name b {
        color: #426ed9;
        font-weight: 500;
        white-space: nowrap
    }
    .checkout-widget .credential-already-in-use .warning-text,
    .checkout-widget .mobile-update-widget .warning-text,
    .checkout-widget .unlink-mobile-number .warning-text,
    .checkout-widget .add-credit-card .warning-text,
    .checkout-widget .add-comments .warning-text,
    .checkout-widget .custom-coupon .warning-text,
    .checkout-widget .add-delivery-address .warning-text,
    .checkout-widget .update-display-name .warning-text {
        color: var(--color-secondary);
        font-size: 10.5px;
        margin-left: 4px
    }
    .checkout-widget .custom-coupon {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr min-content
    }
    .checkout-widget .custom-coupon input {
        border-radius: 8px 0 0 8px
    }
    .checkout-widget .custom-coupon .apply-btn {
        position: relative;
        border: 1px solid #e0e0e0;
        border-left: none;
        cursor: pointer;
        border-radius: 0 8px 8px 0;
        display: flex;
        height: calc(100% - 2px);
        justify-content: center;
        align-items: center;
        padding: 0px 22px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        letter-spacing: 1px;
        background-color: #f5f5f5
    }
    .checkout-widget .ineligible-coupon {
        margin: 5px 20px;
        display: grid;
        grid-template-areas: "icon     description" ".        reset";
        grid-template-columns: min-content 1fr;
        gap: 15px 10px;
        padding: 19px 20px 20px 19px;
        background: #fef4f0
    }
    .checkout-widget .ineligible-coupon .error.icon {
        grid-area: icon
    }
    .checkout-widget .ineligible-coupon .description {
        grid-area: description;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: .1px;
        text-align: left;
        color: #27283e
    }
    .checkout-widget .ineligible-coupon .reset {
        grid-area: reset;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: normal;
        line-height: 16px;
        letter-spacing: 1.5px;
        text-align: left;
        color: #b0204b;
        text-transform: uppercase
    }
    .checkout-widget .add-comments .actions {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 10px;
        margin: 0
    }
    .checkout-widget .add-comments .actions .cancel {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 17px;
        letter-spacing: .4px;
        text-align: left;
        color: #757575
    }
    .checkout-widget .add-comments .actions .clear {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 500;
        line-height: 17px;
        letter-spacing: 1px;
        text-align: center;
        color: #4cbba1;
        text-transform: uppercase
    }
    .checkout-widget .add-comments .actions button {
        border: none;
        box-shadow: none;
        background-color: transparent
    }
    .checkout-widget .add-comments .actions button span {
        color: #4cbba1
    }
    .checkout-widget .mobile-number .name {
        padding: 5px 20px 10px
    }
    .checkout-widget>.alert {
        margin: 5px 20px 20px
    }
    .checkout-widget .StripeElement {
        margin-bottom: 10px
    }
    .checkout-widget .powered-by-stripe {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10px;
        padding-top: 10px
    }
    .checkout-widget .powered-by-stripe .logo img {
        width: 50px
    }
    .checkout-widget .powered-by-stripe .description {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: normal;
        line-height: 16px;
        letter-spacing: .400000006px;
        text-align: left;
        color: #9e9e9e
    }
    .checkout-widget .sections {
        margin-bottom: 0 !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 20px
    }
    .checkout-widget .step-buttons {
        padding: 20px 20px 5px 20px
    }
    .checkout-widget .step-buttons button {
        padding: 15px !important
    }
    .checkout-widget .order-view-widget {
        margin-top: 16px
    }
    .checkout-widget .order-view-widget .amounts {
        display: grid;
        row-gap: 10px;
        padding: 0
    }
    .checkout-widget .order-view-widget .amounts>div {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: max-content
    }
    .checkout-widget .order-view-widget .amounts>div .label,
    .checkout-widget .order-view-widget .amounts>div .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #757575
    }
    .checkout-widget .order-view-widget .amounts>div:last-child {
        margin-top: 8px
    }
    .checkout-widget .order-view-widget .amounts>div:last-child .label,
    .checkout-widget .order-view-widget .amounts>div:last-child .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e
    }
}

@media(max-width: 767px) {
    .swal2-modal {
        border-radius: 16px !important;
        width: 327px !important;
        padding: 0px !important;
        margin: 0 !important
    }
    .swal2-modal .swal2-header {
        position: relative;
        padding: 10px 20px
    }
    .swal2-modal .swal2-content {
        white-space: pre-wrap;
        padding: 0 20px
    }
    .swal2-modal .swal2-content #swal2-content {
        margin-bottom: 20px
    }
    .swal2-modal .swal2-content #swal2-content>b {
        font-weight: 700
    }
    .swal2-modal .swal2-title {
        justify-content: center;
        margin-top: 15px;
        width: 100%;
        font-family: var(--font-family);
        font-size: var(--font-title);
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 0px;
        color: #27283e
    }
    .swal2-modal .swal2-html-container {
        margin: 0 auto;
        position: relative;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e;
        text-align: center
    }
    .swal2-modal .swal2-actions {
        display: flex;
        gap: 8px;
        flex-direction: row-reverse;
        justify-content: space-between !important;
        padding: 17px;
        margin: 0;
        background: #fcfcfc;
        border-radius: 0px 0px 16px 16px;
        box-shadow: inset 0px 1px 0px #e8ecf1
    }
    .swal2-modal .swal2-actions button {
        font-family: "Poppins" !important;
        font-size: 15px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        letter-spacing: 1.25px !important;
        text-align: center !important;
        padding: 14px;
        text-transform: uppercase
    }
    .swal2-modal .swal2-actions .confirm-button {
        flex: 1;
        background: #4cbba1 !important;
        border-radius: 8px !important
    }
    .swal2-modal .swal2-actions .cancel-button {
        flex: 1;
        background: #fcfcfc !important;
        box-shadow: inset 0px 0px 1px 2px #e8ecf1 !important;
        border-radius: 8px !important;
        color: #757575
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .basic-item-widget {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }
    .basic-item-widget .item-body .close-icon {
        position: fixed;
        background: #ffffff;
        width: 20px;
        padding: 10px;
        border-radius: 100%;
        right: 19px;
        top: 19px;
        z-index: 1;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .basic-item-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 52px
    }
    .basic-item-widget .item-name {
        padding: 0 20px;
        padding-top: 25px;
        padding-right: 65px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .basic-item-widget .item-name.no-image {
        margin-top: 35px
    }
    .basic-item-widget.no-image-and-modifier {
        height: unset
    }
    .basic-item-widget.no-image-and-modifier .item-body .close-icon {
        position: absolute;
        top: 17px
    }
    .basic-item-widget.no-image-and-modifier .item-body .item-name {
        margin-top: 0
    }
    .basic-item-widget.no-image-and-modifier .add-to-cart-widget {
        padding: 32px 20px !important
    }
    .basic-item-widget .item-details {
        padding: 10px 20px 32px 20px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff
    }
    .basic-item-widget .item-details * {
        margin: 0
    }
    .basic-item-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .basic-item-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 15px;
        margin-bottom: 16px
    }
    .basic-item-widget .item-details .item-price-and-sold-out .item-price {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .basic-item-widget .item-details .item-price-and-sold-out .item-sold-out,
    .basic-item-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .basic-item-widget .modifiers {
        grid-gap: 35px;
        margin: 4px 0px 32px 0px
    }
    .basic-item-widget .actions .add-to-cart-widget {
        background: #eff8f9;
        padding: 32px 20px;
        padding-bottom: 122px
    }
    .basic-item-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        display: flex;
        flex-direction: row
    }
    .basic-item-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .basic-item-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

@media(max-width: 767px) {
    .add-to-cart-widget {
        font-family: var(--font-family);
        display: grid;
        grid-template-columns: 100%
    }
    .add-to-cart-widget .quantity {
        display: flex;
        justify-content: space-between;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e;
        margin-bottom: 10px;
        padding: 14px 13px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #ffffff
    }
    .add-to-cart-widget .quantity .quantity-actions {
        display: flex;
        gap: 18px
    }
    .add-to-cart-widget .quantity .quantity-actions .inc-icon,
    .add-to-cart-widget .quantity .quantity-actions .dec-icon {
        background: #eeeeee;
        width: 24px;
        border-radius: 50%;
        text-align: center;
        color: #3a3a4e
    }
    .add-to-cart-widget .quantity .quantity-actions .number {
        grid-area: number;
        line-height: 24px
    }
    .add-to-cart-widget .total-price {
        display: flex;
        justify-content: space-between;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e;
        margin-bottom: 30px;
        padding: 14px 13px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #ffffff
    }
    .add-to-cart-widget .add-to-cart-button {
        background: #4cbba1 !important;
        border-radius: 8px;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        letter-spacing: 1.25px;
        padding: 14px 0;
        color: #ffffff
    }
    .add-to-cart-widget .add-to-cart-button.disabled {
        opacity: .5;
        color: #fff !important
    }
    .add-to-cart-widget .add-to-cart-button span {
        margin-left: .25em
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .session-create-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .session-create-modal>.header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .session-create-modal>.header .close-icon {
        width: 16px
    }
    .session-create-modal .main-display .collection-type-selector {
        margin-bottom: 72px;
        padding: 30px 20px 0px
    }
    .session-create-modal .main-display .collection-type-selector .title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e;
        margin-bottom: 17px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types {
        display: grid;
        gap: 16px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min-content 1fr min-content;
        gap: 15px;
        padding: 14.4px 9px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 17px 6px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type .radio {
        padding: 6.5px;
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-self: center;
        position: relative;
        left: 3px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type .text {
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        color: #27283e;
        display: flex;
        align-self: center
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type .text {
        font-size: 17px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type .image {
        position: relative;
        right: 3px
    }
    .session-create-modal .main-display .session-create {
        padding-top: 30px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector {
        margin-bottom: 72px;
        padding: 0 20px;
        display: grid;
        grid-template-areas: "title       image" "holiday-info holiday-info" "date-list   date-list";
        grid-template-columns: 1fr max-content
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .title {
        grid-area: title;
        display: flex;
        align-self: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        color: #27283e;
        margin-bottom: 15px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .image {
        grid-area: image;
        width: 38px;
        margin-bottom: 15px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .third-party-delivery-banner {
        display: flex;
        flex-flow: row;
        grid-gap: 8px;
        width: 100%;
        background: #ffebcf;
        border-radius: 4px;
        padding: 16px;
        padding-right: 15px;
        box-sizing: border-box;
        margin: 13px 0 8px 0
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .third-party-delivery-banner .message {
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 16.9px;
        letter-spacing: .4px;
        margin: 0
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .third-party-delivery-banner .message span {
        font-weight: 500;
        color: #d67300
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .collection-dates-and-times {
        grid-area: date-list
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .holiday-info {
        grid-area: holiday-info;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #27283e;
        border-radius: 4px;
        padding: 10px;
        margin: 12px 0 16px;
        background: #ffebcf
    }
    .session-create-modal .main-display .session-create .suburb-selector {
        margin-bottom: 72px;
        padding: 0 20px;
        display: grid;
        grid-template-areas: "title             image" "suburb-search     suburb-search" "suburb-list       suburb-list";
        grid-template-columns: 1fr max-content
    }
    .session-create-modal .main-display .session-create .suburb-selector .title {
        grid-area: title;
        display: flex;
        align-self: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e;
        margin-bottom: 21px
    }
    .session-create-modal .main-display .session-create .suburb-selector .image {
        grid-area: image
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburb-search {
        grid-area: suburb-search;
        position: relative
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburb-search .search-icon {
        position: absolute;
        z-index: 1;
        top: 15px;
        left: 15px;
        opacity: .55
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburb-search input {
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 2px);
        padding: 15px 42px;
        margin-bottom: 8px;
        outline: none;
        width: -webkit-fill-available;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: .1px;
        color: #27283e
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburbs {
        grid-area: suburb-list;
        display: grid;
        gap: 8px
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburbs .no-suburb-found {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        color: #757575;
        text-align: center;
        margin-top: 30px
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburbs .suburb {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min-content 1fr min-content;
        gap: 15px;
        padding: 14.4px 9px;
        border: 1px solid #e0e0e0;
        border-radius: 8px
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburbs .suburb .radio {
        padding: 6.5px;
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-self: center;
        position: relative;
        left: 3px
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburbs .suburb .text {
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        color: #27283e;
        display: flex;
        align-self: center
    }
    .session-create-modal .main-display .session-create .suburb-selector .suburbs .suburb .delivery-charge {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #757575;
        white-space: nowrap
    }
    .session-create-modal .main-display .session-create .edit-delivery-address-widget {
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 100px
    }
    .session-create-modal .main-display .session-create .edit-delivery-address-widget .invalid {
        border-color: #e0e0e0 !important
    }
    .session-create-modal .main-display .session-create .action-buttons {
        display: grid;
        grid-gap: 17px;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
        padding: 15px 20px;
        padding-bottom: 32px;
        background: #fafafa
    }
    .session-create-modal .main-display .session-create .action-buttons .start-order {
        background: #4cbba1;
        color: #ffffff;
        width: 100%;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        letter-spacing: 1.5px;
        padding: 14px
    }
    .session-create-modal .main-display .session-create .action-buttons .start-order.disabled {
        opacity: .5;
        background: #4cbba1 !important;
        color: #ffffff !important;
        border-color: unset !important
    }
    .session-create-modal .main-display .section .get-order-message {
        padding-top: 30px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .customer-login-flow-widget {
        position: relative;
        height: 100%;
        display: grid;
        grid-template-rows: min-content 1fr;
        font-family: var(--font-family);
        font-style: normal
    }
    .customer-login-flow-widget .top-header {
        display: grid;
        grid-template-areas: "back-button step-indicator close-button";
        justify-content: space-between;
        align-items: center;
        padding: 20px 20px 17px 20px
    }
    .customer-login-flow-widget .top-header .back-button {
        grid-area: back-button
    }
    .customer-login-flow-widget .top-header .close-button {
        grid-area: close-button
    }
    .customer-login-flow-widget .top-header .close-button img {
        height: 18px
    }
    .customer-login-flow-widget .top-header .step-indicator {
        grid-area: step-indicator;
        margin: 0 auto;
        top: 10px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .1px;
        text-align: left;
        color: #757575
    }
    .customer-login-flow-widget .body {
        padding: 0 20px;
        height: 100%
    }
    .customer-login-flow-widget .body .intro {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 20px
    }
    .customer-login-flow-widget .body .intro .title {
        margin-top: 6px;
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: center;
        color: #27283e
    }
    .customer-login-flow-widget .body .intro .subtitle {
        margin-top: 5px;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .25px;
        text-align: center;
        color: #757575
    }
    .customer-login-flow-widget button {
        padding: 14px;
        width: 100%;
        margin-bottom: 16px;
        border-radius: 8px;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 20px;
        letter-spacing: 1.25px
    }
    .customer-login-flow-widget button span {
        color: #ffffff
    }
    .customer-login-flow-widget button.disabled {
        background-color: #4cbba1 !important;
        opacity: .5;
        cursor: not-allowed
    }
    .customer-login-flow-widget .form-buttons {
        margin-top: 25px
    }
    .customer-login-flow-widget .grecaptcha-badge {
        visibility: hidden
    }
    .customer-login-flow-widget #recaptcha-wrapper {
        position: fixed !important;
        bottom: 0;
        left: 50%;
        height: 75vh;
        overflow: auto;
        transform: translateX(-50%)
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .deal-item .modifier-widget .header {
        background-color: transparent
    }
    .deal-item .modifier-widget .option {
        padding: 0 20px
    }
    .modifier-widget {
        font-family: var(--font-family);
        color: #27283e
    }
    .modifier-widget input[type=checkbox] {
        display: none
    }
    .modifier-widget input[type=checkbox]+label {
        position: relative;
        margin-left: 25px;
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .modifier-widget input[type=checkbox]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        width: 16px;
        height: 16px
    }
    .modifier-widget input[type=checkbox]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1;
        background-image: url("/images/icon-check-light.svg");
        background-repeat: no-repeat;
        background-position: center
    }
    .modifier-widget input[type=radio] {
        display: none
    }
    .modifier-widget input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .modifier-widget input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 15px;
        height: 15px
    }
    .modifier-widget input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .modifier-widget .header {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin: 0;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25.5px;
        background-color: #fafafa
    }
    .modifier-widget .header .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3px
    }
    .modifier-widget .header .title .modifier-name {
        font-size: calc(var(--font-title) - 2px);
        font-style: normal;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0px;
        margin-right: 8px
    }
    .modifier-widget .header .title .requiredness {
        padding: 3px 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 6px);
        line-height: 18px;
        letter-spacing: 0;
        color: #757575
    }
    .modifier-widget .header .title .selected::before {
        content: url("/images/green-check.svg");
        padding-right: 5px
    }
    .modifier-widget .header .title .required {
        color: #086e37
    }
    .modifier-widget .header .title .error {
        background-color: #ffe7df;
        color: #b0204b
    }
    .modifier-widget .header .max-quantity {
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0px;
        color: #757575
    }
    .modifier-widget .options {
        padding: 20px;
        display: grid;
        grid-gap: 8px
    }
    .modifier-widget .options .option {
        display: grid;
        grid-template-columns: 1fr min-content min-content;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 14px;
        padding-right: 8px
    }
    .modifier-widget .options .option .option-form-input {
        width: 100%
    }
    .modifier-widget .options .option .wrapper {
        display: flex;
        grid-gap: 16px
    }
    .modifier-widget .options .option .wrapper .quantity {
        display: flex;
        height: fit-content;
        align-self: center;
        grid-gap: 10px;
        font-size: calc(var(--font-title) - 1px);
        font-weight: 400
    }
    .modifier-widget .options .option .wrapper .quantity .inc-icon,
    .modifier-widget .options .option .wrapper .quantity .dec-icon {
        background: #eeeeee;
        width: 24px;
        border-radius: 50%;
        text-align: center;
        color: #3a3a4e
    }
    .modifier-widget .options .option .wrapper .extra-charge {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        white-space: nowrap;
        color: #757575;
        display: flex;
        align-self: center
    }
    .modifier-widget .options .option.selected {
        border: 1px solid #4cbba1
    }
}

@media(max-width: 767px) {
    .loyalty-card-widget {
        position: relative;
        padding-top: 62.5%;
        width: 100%;
        max-width: 500px;
        border-radius: 10px;
        box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, .25)
    }
    .loyalty-card-widget img,
    .loyalty-card-widget .imgix img {
        width: 100%;
        border-radius: 10px;
        position: absolute;
        top: 0
    }
    .loyalty-card-widget .details {
        position: absolute;
        top: 0;
        margin: 0 26.5px;
        width: calc(100% - 53px)
    }
    .loyalty-card-widget .details .balance {
        margin-top: 12%;
        font-family: "larabie";
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) + 5px);
        text-shadow: 0px 1px 1px rgba(0, 0, 0, .8);
        letter-spacing: 1.3px;
        margin-left: 4.5px
    }
    .loyalty-card-widget .details .count-progress {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-gap: 5px;
        margin-top: 15%
    }
    .loyalty-card-widget .details .count-progress .count {
        background-color: #e0e0e0;
        border-radius: 10px;
        height: 10px;
        box-shadow: inset 0px 2px 4px rgba(0, 0, 0, .29)
    }
    .loyalty-card-widget .details .count-progress .count.active {
        background-color: #33d169;
        border: 1px solid rgba(0, 0, 0, .21);
        box-shadow: inset 0px -2px 4px rgba(0, 0, 0, .2), inset 0px -3px 3px rgba(0, 0, 0, .5)
    }
    .loyalty-card-widget .details .customer-info {
      /* <!-- Ronald Task loyalty Start -->*/
        /*margin-top: 9%;*/
        /* <!-- Ronald Task loyalty End -->*/
        font-family: "larabie";
        font-style: normal;
        font-weight: 500;
        font-size: var(--font-title);
        text-shadow: 1px 1px 1px #363636;
        line-height: 28px;
        text-transform: uppercase;
        margin-left: 3px;
        letter-spacing: 2px
    }
    .loyalty-card-widget .details .customer-info .name {
        -webkit-line-clamp: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
     .loyalty-card-widget .details .description{
      /* <!-- Ronald Task loyalty Start -->*/
        /*margin-top: 9%;*/
        /* <!-- Ronald Task loyalty End -->*/
        font-family: "larabie";
        font-style: normal;
        font-weight: 500;
        font-size: var(--font-title);
        text-shadow: 1px 1px 1px #363636;
        line-height: 20px;
        margin-left: 3px;
        letter-spacing: 2px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .pizza-widget {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }
    .pizza-widget .item-body .close-icon {
        position: fixed;
        background: #ffffff;
        width: 20px;
        padding: 10px;
        border-radius: 100%;
        right: 19px;
        top: 19px;
        z-index: 1;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .pizza-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 52px
    }
    .pizza-widget .item-name {
        padding: 0 20px;
        padding-top: 25px;
        padding-right: 65px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .pizza-widget .item-name.no-image {
        margin-top: 35px
    }
    .pizza-widget.no-image-and-modifier {
        height: unset
    }
    .pizza-widget.no-image-and-modifier .item-body .close-icon {
        position: absolute;
        top: 17px
    }
    .pizza-widget.no-image-and-modifier .item-body .item-name {
        margin-top: 0
    }
    .pizza-widget.no-image-and-modifier .add-to-cart-widget {
        padding: 32px 20px !important
    }
    .pizza-widget .item-details {
        padding: 10px 20px 32px 20px;
        font-family: var(--font-family);
        font-style: normal;
        background: #fff
    }
    .pizza-widget .item-details * {
        margin: 0
    }
    .pizza-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .pizza-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 15px;
        margin-bottom: 16px
    }
    .pizza-widget .item-details .item-price-and-sold-out .item-price {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .pizza-widget .item-details .item-price-and-sold-out .item-sold-out,
    .pizza-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .pizza-widget .modifiers {
        grid-gap: 35px;
        margin-bottom: 32px
    }
    .pizza-widget .actions .add-to-cart-widget {
        background: #eff8f9;
        padding: 32px 20px;
        padding-bottom: 122px
    }
    .pizza-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        display: flex;
        flex-direction: row
    }
    .pizza-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .pizza-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .pizza-customize-widget {
        display: flex;
        flex-flow: column;
        height: 100%
    }
    .pizza-customize-widget .item-header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .pizza-customize-widget .item-header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .pizza-customize-widget .item-header .done-button {
        padding-top: 5px;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 700;
        line-height: 16.9px;
        letter-spacing: 1px;
        color: #4cbba1
    }
    .pizza-customize-widget .item-body {
        margin-bottom: 26px;
        overflow: scroll
    }
    .pizza-customize-widget .item-body .modifiers {
        display: flex;
        flex-flow: column;
        grid-gap: 36px;
        margin-bottom: 8px;
        padding-top: 21px;
        overflow: auto
    }
    .pizza-customize-widget .item-body .modifiers .remove-toppings .extra-charge {
        display: none
    }
}

@media(max-width: 767px) {
    .restaurant-header-widget,
    .store-header-widget {
        display: flex;
        flex-direction: horizontal;
        justify-content: space-between;
        align-items: center;
        width: 90%;
    }
    .restaurant-header-widget .image,
    .store-header-widget .image {
        width: 33px;
        border-radius: 10px;
        border: 3px solid #f1f1f5;
        margin-right: 10px;
        overflow: hidden
    }
    .restaurant-header-widget .name,
    .store-header-widget .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-style: normal;
        font-weight: 700;
        line-height: 14px;
        letter-spacing: 0;
        text-align: left;
        color: var(--color-text-mobile);
       /* white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;*/
        width: 100%;
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .suburbs-list-widget {
        margin-bottom: 72px;
        padding: 0 20px;
        display: grid;
        grid-template-areas: "title             image" "suburb-search     suburb-search" "suburb-list       suburb-list";
        grid-template-columns: 1fr max-content;
        background: #ffffff
    }
    .suburbs-list-widget .title {
        grid-area: title;
        display: flex;
        align-self: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        color: #27283e;
        margin-bottom: 15px
    }
    .suburbs-list-widget .image {
        grid-area: image;
        width: 38px;
        margin-bottom: 15px
    }
    .suburbs-list-widget .title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        color: #27283e
    }
    .suburbs-list-widget .suburb-search {
        grid-area: suburb-search;
        position: relative
    }
    .suburbs-list-widget .suburb-search .search-icon {
        position: absolute;
        z-index: 1;
        top: 15px;
        left: 15px;
        opacity: .55
    }
    .suburbs-list-widget .suburb-search input {
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 2px);
        padding: 15px 42px;
        margin-bottom: 8px;
        outline: none;
        width: -webkit-fill-available;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: .1px;
        color: #27283e
    }
    .suburbs-list-widget .suburbs {
        grid-area: suburb-list;
        display: grid;
        gap: 8px
    }
    .suburbs-list-widget .suburbs .no-suburb-found {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        color: #757575;
        text-align: center;
        margin-top: 30px
    }
    .suburbs-list-widget .suburbs .suburb {
        display: flex;
        justify-content: space-between;
        padding: 14px 9px 14px 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio] {
        display: none
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 15px;
        height: 15px
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .suburbs-list-widget .suburbs .suburb .name .postcode {
        font-weight: 400;
        color: #757575;
        margin-left: 8px
    }
    .suburbs-list-widget .suburbs .suburb .delivery-charge {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #757575;
        white-space: nowrap
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .store-search-page .search-page .search-box {
        margin: 18px 20px;
        padding: 10px 16px;
        border: 1px solid #bdbdbd;
        background: #ffffff;
        box-sizing: border-box;
        border-radius: 8px;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: center
    }
    .store-search-page .search-page .search-box .inputbox {
        width: 110%;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-weight: normal;
        letter-spacing: .1px;
        border: none;
        outline: none
    }
    .store-search-page .search-page .empty-results {
        margin-top: 15vh;
        text-align: center
    }
    .store-search-page .search-page .empty-results .logo-search {
        margin-bottom: 10px;
        height: 60px;
        width: 60px
    }
    .store-search-page .search-page .empty-results .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 1px);
        line-height: 22px;
        color: #757575
    }
    .store-search-page .search-page .no-results {
        margin-top: 15vh;
        text-align: center
    }
    .store-search-page .search-page .no-results>.logo-no-results {
        margin-bottom: 10px
    }
    .store-search-page .search-page .no-results>.text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 1px);
        font-weight: normal;
        line-height: 22px;
        color: #7d7d7d
    }
    .store-search-page .search-page .no-results>.text span {
        margin-left: .25em;
        font-weight: bold
    }
    .store-search-page .search-page .search-results .search-results-message {
        text-align: center;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        color: #9e9e9e
    }
    .store-search-page .search-page .search-results .category-summary {
        padding: 25px 0;
        display: flex;
        flex-flow: column;
        grid-gap: 10px
    }
    .store-search-page .search-page .search-results .category-summary .link-anchor {
        grid-area: link-anchor;
        width: 100%;
        position: relative;
        top: -170px
    }
    .store-search-page .search-page .search-results .category-summary .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 3px);
        font-style: normal;
        font-weight: 700;
        line-height: 27.3px;
        text-align: left;
        word-break: break-word;
        color: #27283e
    }
    .store-search-page .search-page .search-results .category-summary .description {
        display: none
    }
    .store-search-page .search-page .search-results>.items {
        margin: 0 auto;
        width: 89.5%;
        grid-area: items
    }
    .store-search-page .search-page .search-results>.items .header-mobile {
        font-family: var(--font-family);
        font-weight: normal;
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: .25px;
        line-height: 22px;
        text-align: center;
        align-items: center;
        color: #9e9e9e
    }
    .store-search-page .search-page .search-results>.items .items-per-category:last-of-type {
        margin-bottom: 30px
    }
    .store-search-page .search-page .search-results .items-container {
        display: grid;
        gap: 20px
    }
    .store-search-page .search-page .search-results .items-container .item.no-image {
        height: auto;
        padding-top: 0
    }
    .store-search-page .search-page .search-results .items-container .item.no-image .body {
        position: relative
    }
    .store-search-page .search-page .search-results .items-container .item {
        overflow: hidden;
        position: relative;
        height: auto;
        background-color: #ffffff;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        height: 0;
        padding-top: 43.75%
    }
    .store-search-page .search-page .search-results .items-container .item .anchor {
        position: absolute;
        top: -120px
    }
    .store-search-page .search-page .search-results .items-container .item .body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row
    }
    .store-search-page .search-page .search-results .items-container .item .body.no-image {
        grid-template-columns: 1fr
    }
    .store-search-page .search-page .search-results .items-container .item .body.no-image .item-info>.description {
        -webkit-line-clamp: unset !important
    }
    .store-search-page .search-page .search-results .items-container .item .body .image {
        flex: 1;
        height: auto
    }
    .store-search-page .search-page .search-results .items-container .item .body .image img {
        object-fit: cover
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info {
        display: flex;
        flex: 1.55;
        flex-direction: column;
        padding: 15px
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info .name {
        flex-shrink: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        letter-spacing: .15px;
        text-align: left;
        align-self: start;
        word-wrap: break-word;
        margin-bottom: 8px;
        color: #27283e
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info .description {
        flex-shrink: 1;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 19px;
        letter-spacing: .25px;
        text-align: left;
        color: red;
        align-self: start;
        color: #757575;
        margin-bottom: 17.6px;
        display: -webkit-box;
        -webkit-box-orient: vertical
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info .description.line-clamp-1 {
        -webkit-line-clamp: 1
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info .description.line-clamp-2 {
        -webkit-line-clamp: 2
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info .price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: auto
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info .price-and-sold-out .price {
        flex-shrink: 0;
        margin-top: auto;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        color: #27283e
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info .price-and-sold-out .soldout,
    .store-search-page .search-page .search-results .items-container .item .body .item-info .price-and-sold-out .unavailable {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        padding: 3px 6px;
        margin-left: 8px;
        border-radius: 4px;
        color: #27283e;
        background: #e0e0e0
    }
    .store-search-page .search-page .search-results .items-container .item .body .item-info.no-image {
        display: unset;
        flex: unset
    }
    .store-search-page .search-page .search-results .items-container .item .action {
        grid-area: e;
        border-top: 1px solid #f1f1f5;
        padding: 15px 18px;
        background-color: #fafafb;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 12px 18px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        align-items: start
    }
    .store-search-page .search-page .search-results .items-container .item .action img {
        margin-right: 10px;
        margin-top: 5px
    }
    .store-search-page .search-page .search-results .items-container .item .action span {
        font-family: Fira Sans;
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 4px);
        line-height: 25px;
        color: #426ed9;
        white-space: nowrap
    }
}

/*@media(max-width: 767px) {
    .footer-widget {
        display: none
    }
}*/

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .online-ordering header.table-booking-history-page {
        position: fixed !important
    }
    .online-ordering header.on-top {
        transition: visibility 0s linear .2s, opacity .2s linear;
        display: none;
        opacity: 0
    }
    .online-ordering #top-of-site-pixel-anchor {
        position: absolute;
        width: 1px;
        height: 1px;
        top: 100px;
        left: 0
    }
    .table-booking-history-page.page>.header {
        padding: 0px;
        box-shadow: none
    }
    .table-booking-history-page .header {
        margin-top: 0;
        padding: 0
    }
    .table-booking-history-page .header .wrapper {
        position: relative;
        font-family: "Poppins"
    }
    .table-booking-history-page .header .wrapper .nav {
        width: 100%;
        box-sizing: border-box;
        padding: 16px 20px;
        z-index: 1;
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .table-booking-history-page .header .wrapper .nav .page-title {
        margin-bottom: 3px;
        color: var(--bg)
    }
    .table-booking-history-page .header .wrapper .nav .page-title .text {
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 150%;
        letter-spacing: .5px
    }
    .table-booking-history-page .header .wrapper .nav .actions {
        display: flex;
        flex-direction: row;
        align-items: flex-start
    }
    .table-booking-history-page .header .wrapper .nav .actions .avatar {
        margin-top: 1px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent
    }
    .table-booking-history-page .header .wrapper .nav .actions .avatar .desktop {
        display: none !important
    }
    .table-booking-history-page .header .wrapper .nav .actions .avatar img {
        border-radius: 10px;
        border: 3px solid #f1f1f5;
        width: 26px
    }
    .table-booking-history-page .header .wrapper .nav .actions .login-icon {
        width: 28px;
        height: 28px;
        margin-top: 2px;
        cursor: pointer
    }
    .table-booking-history-page .header .wrapper .nav .actions .login-icon .icon {
        padding: 0;
        color: var(--bg)
    }
    .table-booking-history-page .header .wrapper .nav .actions .search {
        margin-right: 17px;
        margin-top: 4px
    }
    .table-booking-history-page .header .wrapper .nav .actions .search .icon {
        margin-top: 1px;
        width: 21px
    }
    .table-booking-history-page .header .wrapper .banner-image {
        position: relative;
        width: 100vw
    }
    .table-booking-history-page .header .wrapper .banner-image .desktop {
        display: none
    }
    .table-booking-history-page .header .wrapper .store-title {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        color: var(--bg);
        width: 100%;
        background: linear-gradient(180deg, rgba(42, 42, 49, 0) 11.39%, rgba(42, 42, 49, 0.1) 24.94%, rgba(42, 42, 49, 0.8) 100%);
        background-blend-mode: multiply
    }
    .table-booking-history-page .header .wrapper .store-title .store-name {
        font-style: normal;
        font-weight: 500;
        font-size: 24.5px;
        line-height: 130%;
        letter-spacing: .5px;
        margin: 4px 0px
    }
    .table-booking-history-page .header .wrapper .store-title .store-location {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: .25px;
        text-align: left
    }
    .table-booking-history-page .header .wrapper .store-title .store-location .address {
        margin: 0px 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .table-booking-history-page .header .wrapper .store-title .store-location .icon {
        width: 17px
    }
    .table-booking-history-page .header .wrapper #page-title-anchor {
        position: absolute;
        width: 1px;
        height: 1px;
        left: 0
    }
    .table-booking-history-page .header .wrapper #page-title-anchor.open {
        top: 375px
    }
    .table-booking-history-page .header .wrapper #page-title-anchor.closed {
        top: 360px
    }
    .table-booking-history-page .wrapper .open-for-dine-in {
        margin: 24px 24px 24px 24px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        margin-bottom: 24px
    }
    .table-booking-history-page .wrapper .open-for-dine-in .section {
        padding: 40px 15px
    }
    .table-booking-history-page .wrapper .open-for-dine-in .section .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) + 3px);
        line-height: 27px;
        text-align: center;
        color: #27283e;
        margin-bottom: 10px
    }
    .table-booking-history-page .wrapper .open-for-dine-in .section .sub-text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: .4px;
        text-align: center;
        color: #757575;
        margin-bottom: 26px
    }
    .table-booking-history-page .wrapper .open-for-dine-in .section .protocols {
        display: grid;
        grid-template-columns: 85px 85px 85px;
        grid-gap: 16px;
        justify-items: center;
        justify-content: center
    }
    .table-booking-history-page .wrapper .open-for-dine-in .section .protocols .desktop {
        display: none
    }
    .table-booking-history-page .wrapper .open-for-dine-in .section .protocols .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: .400000006px;
        text-align: center;
        color: #27283e;
        margin: 0px
    }
    .table-booking-history-page .wrapper .open-for-dine-in .buttons {
        background: #eff8f9;
        padding: 24px 0px
    }
    .table-booking-history-page .wrapper .open-for-dine-in .buttons button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        background: #1faa89;
        border-radius: 4px;
        padding: 9.5px 16px;
        margin: 0px auto
    }
    .table-booking-history-page .wrapper .login {
        padding: 0px 20px;
        margin: 24px 24px 125px 24px
    }
    .table-booking-history-page .wrapper .login .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: .25px;
        color: #757575
    }
    .table-booking-history-page .wrapper .login .text a {
        color: #1faa89;
        text-decoration: none
    }
    .table-booking-history-page .wrapper .bottom-spacer {
        margin-bottom: 135px
    }
    .table-booking-history-page .wrapper .desktop {
        display: none
    }
    .table-booking-history-page .wrapper .banner {
        padding: 0
    }
    .table-booking-history-page .wrapper .banner .table-booking-title {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e;
        background: #fff;
        padding: 15px 20px;
        box-shadow: inset 0px -1px 0px #e8ecf1;
        display: block
    }
    .table-booking-history-page .wrapper .banner .table-booking-title.hide {
        display: none
    }
    .table-booking-history-page .wrapper .banner .not-available-banner {
        background: #ffe7df;
        padding: 15.5px 20px
    }
    .table-booking-history-page .wrapper .banner .not-available-banner .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #b0204b
    }
    .table-booking-history-page .wrapper .banner .not-available-banner .message b {
        font-weight: 600
    }
    .table-booking-history-page .wrapper .banner .book-table-banner {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        background: #ffebcf;
        padding: 16px 20px
    }
    .table-booking-history-page .wrapper .banner .book-table-banner .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #d67300
    }
    .table-booking-history-page .wrapper .banner .book-table-banner button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 15px;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #d67300;
        background: #ffebcf;
        padding: 7.5px 16px;
        border: 1.5px solid #d67300;
        box-sizing: border-box;
        border-radius: 4px
    }
    .table-booking-history-page .wrapper .empty-table-booking {
        text-align: center;
        padding: 42px 62.5px 40px 62.5px
    }
    .table-booking-history-page .wrapper .empty-table-booking .icon {
        margin: 0px auto 29px auto
    }
    .table-booking-history-page .wrapper .empty-table-booking .icon-desktop {
        display: none
    }
    .table-booking-history-page .wrapper .empty-table-booking .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: .25px;
        color: #757575
    }
    .table-booking-history-page .wrapper .empty-table-booking .message::after {
        content: "You don’t have any table bookings yet"
    }
    .table-booking-history-page .wrapper .table-bookings {
        margin: 30px 20px
    }
    .table-booking-history-page .wrapper .table-bookings .section {
        margin-bottom: 24px
    }
    .table-booking-history-page .wrapper .table-bookings .section.hide {
        display: none
    }
    .table-booking-history-page .wrapper .table-bookings .section .heading {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        line-height: 22px;
        color: #27283e;
        margin-bottom: 24px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking {
        display: grid;
        grid-template-areas: "booked-for status-icon" "customer customer" "details details" "hr hr" "status status";
        grid-template-columns: 1fr min-content;
        grid-template-rows: max-content;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        padding: 15px 16px 20px 16px;
        margin-bottom: 24px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .bookedFor {
        grid-area: booked-for;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e;
        margin-bottom: 7px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status-icon {
        grid-area: status-icon;
        margin-bottom: 7px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .customer {
        grid-area: customer;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 24px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 16px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .details {
        grid-area: details;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 16px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking hr {
        grid-area: hr;
        width: 100%;
        border: 1px solid #e0e0e0;
        margin: 0px 0px 16px 0px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status {
        grid-area: status;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #9e9e9e
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status b {
        font-weight: 600
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status .success {
        color: #086e37
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status .warning {
        color: #d67300
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status .danger {
        color: #b0204b
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking:last-child {
        margin-bottom: 31px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .table-booking-page {
        background: #fff
    }
    .table-booking-page form .form-single-select-pill.optional>.label::after {
        content: "(Optional)";
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        letter-spacing: .5px;
        color: #757575;
        margin-left: 8px
    }
    .table-booking-page form .form-buttons button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        background: #4cbba1;
        border-radius: 8px;
        width: 100%;
        padding: 14px
    }
    .table-booking-page form .form-buttons button.disabled {
        cursor: unset;
        opacity: .5;
        color: #fff !important;
        background: #4cbba1 !important
    }
    .table-booking-summary-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .table-booking-summary-modal>.header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .table-booking-summary-modal>.header .close-icon {
        width: 16px
    }
    .table-booking-summary-modal .buttons {
        margin: 20px
    }
    .table-booking-summary-modal .buttons .confirm-button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        background: #4cbba1;
        border-radius: 8px;
        width: 100%;
        padding: 14px 0px 13px 0px
    }
    .table-booking-summary-modal .buttons .back-button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #757575;
        background: #fff;
        border-radius: 8px;
        box-shadow: none;
        width: 100%;
        padding: 14px 0px 13px 0px;
        margin-top: 18px
    }
}

@media(max-width: 767px) {
    .form-select-pax {
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        border-radius: 8px;
        background: #fff;
        padding: 20px 16px 16px 16px
    }
    .form-select-pax .label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e;
        margin-bottom: 4px
    }
    .form-select-pax .sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575;
        margin-bottom: 12px
    }
    .form-select-pax .options {
        display: grid;
 grid-template-columns: 1fr 1fr 1fr;
    max-width: 100%;  
    column-gap: 16px;
        align-items: center
    }
    .form-select-pax .options input {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        line-height: 20px;
        color: #27283e;
        text-align: center;
        padding: 15px 0px
    }
}

@media(max-width: 767px) {
    .form-single-select-pill .label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 47px;
        color: #27283e;
        margin-bottom: 7px
    }
    .form-single-select-pill .options.large {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 8px;
        row-gap: 8px
    }
    .form-single-select-pill .options.small {
        display: flex;
        flex-wrap: wrap
    }
    .form-single-select-pill .options .option {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        color: #757575;
        background: #fff;
        border: 1.5px solid #e0e0e0;
        box-sizing: border-box;
        border-radius: 50px;
        cursor: pointer;
        margin: 0px 8px 8px 0px;
        padding: 8.5px 15px
    }
    .form-single-select-pill .options .option.selected {
        background: #4cbba1;
        color: #fff
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .third-party-delivery-widget {
        font-family: var(--font-family);
        font-style: normal;
        display: flex;
        flex-flow: column;
        grid-gap: 16px
    }
    .third-party-delivery-widget a {
        width: 100%;
        height: 52px;
        box-sizing: border-box;
        text-decoration: none;
        border-radius: 8px;
        border: 2px solid #e0e0e0;
        text-align: center
    }
    .third-party-delivery-widget a .service-name {
        display: block;
        padding: 12px 0;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        line-height: 22.5px;
        letter-spacing: .1px;
        color: #27283e;
        border-radius: 8px
    }
    .third-party-delivery-widget a .service-logo {
        display: block;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 14px 0
    }
    .third-party-delivery-widget a #ubereats {
        padding: 17px 0
    }
    .third-party-delivery-widget a #deliveroo {
        padding: 8px 0
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .third-party-delivery-services-modal {
        font-family: var(--font-family);
        font-style: normal;
        padding-bottom: 28px
    }
    .third-party-delivery-services-modal .header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .third-party-delivery-services-modal .header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .third-party-delivery-services-modal .section {
        padding: 20px;
        padding-top: 0px
    }
    .third-party-delivery-services-modal .section .unavailability-message {
        font-size: calc(var(--font-title) - 1px);
        font-weight: 400;
        line-height: 25.5px;
        letter-spacing: .5px;
        color: #27283e
    }
    .third-party-delivery-services-modal .section .get-order-message {
        font-size: calc(var(--font-title) - 1px);
        font-weight: 500;
        line-height: 25.5px;
        color: #27283e;
        margin-bottom: 15px
    }
    .third-party-delivery-services-modal .actions>.back-button {
        cursor: pointer;
        margin: 10px auto;
        padding: 0;
        background: none;
        box-shadow: none;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 16.9px;
        letter-spacing: 1px;
        color: #757575
    }
}

@media(max-width: 767px) {
    .table-booking-success-page.page>.header {
        padding: 0px;
        box-shadow: none
    }
    .table-booking-success-page .body .wrapper .banner {
        text-align: center;
        margin: 40px 20px 5px 20px
    }
    .table-booking-success-page .body .wrapper .banner .icon {
        margin-bottom: 14px
    }
    .table-booking-success-page .body .wrapper .banner .icon.desktop {
        display: none
    }
    .table-booking-success-page .body .wrapper .banner .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) + 3px);
        line-height: 27px;
        color: #27283e;
        margin-bottom: 16px
    }
    .table-booking-success-page .body .wrapper .banner .sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: .23px;
        color: #757575
    }
    .table-booking-success-page .body .wrapper>.status {
        padding: 24px;
        margin: 0 20px;
        margin-bottom: 24px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(146, 129, 129, .1);
        border-radius: 8px
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #f5f5f5;
        display: flex;
        margin-bottom: 16px
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar .progress.success {
        background-color: #086e37
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar .progress.danger {
        background-color: #b0204b
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar .progress.warning {
        background-color: #d67300
    }
    .table-booking-success-page .body .wrapper>.status .caption {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px
    }
    .table-booking-success-page .body .wrapper>.status .caption .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 8px);
        line-height: 13px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #757575
    }
    .table-booking-success-page .body .wrapper>.status .caption .step {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #757575
    }
    .table-booking-success-page .body .wrapper>.status .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        line-height: 23px;
        color: #27283e
    }
    .table-booking-success-page .body .wrapper>.status .sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575
    }
    .table-booking-success-page .body .wrapper .summary {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 24px;
        letter-spacing: .25px;
        color: #27283e;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        margin: 16px 20px 24px 20px;
        padding: 24px
    }
    .table-booking-success-page .body .wrapper .summary .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 21px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-success-page .body .wrapper .summary .contact-details,
    .table-booking-success-page .body .wrapper .summary .special-requests {
        margin-top: 15px
    }
    .table-booking-success-page .body .wrapper .buttons {
        margin: 20px
    }
    .table-booking-success-page .body .wrapper .buttons .view-menu-button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        background: #4cbba1;
        border-radius: 8px;
        width: 100%;
        padding: 14px 0px 13px 0px
    }
    .table-booking-success-page .body .wrapper .buttons .back-button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #757575;
        background: #fff;
        border-radius: 8px;
        box-shadow: none;
        width: 100%;
        padding: 14px 0px 13px 0px;
        margin-top: 18px
    }
}

@media(max-width: 767px) {
    nav {
        grid-area: nav;
        display: flex;
        overflow-y: scroll;
        background-color: #fff;
        box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
        flex-direction: column;
        z-index: 999;
        width: calc(100% - 50px);
        max-width: 325px;
        padding-bottom: 10px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        margin-left: 50px;
        transform: translateX(120%);
        transition: transform 300ms;
        scrollbar-width: none;
        scrollbar-color: transparent transparent
    }
    nav::-webkit-scrollbar {
        width: 1px
    }
    nav::-webkit-scrollbar-track {
        background: transparent
    }
    nav::-webkit-scrollbar-thumb {
        background-color: transparent
    }
    nav.show {
        transform: none
    }
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 60px;
        margin: 0 20px;
        text-align: center
    }
    .profile .name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        letter-spacing: 0px;
        color: #27283e;
        margin-top: 17px
    }
    .profile .email,
    .profile .phone-number {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: .2px;
        line-height: 25px;
        color: #757575
    }
    .nav-links {
        display: grid;
        gap: 5px;
        padding: 0 20px;
        padding-top: 24px
    }
    .nav-links .link {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 28px 1fr;
        margin: 5px 0;
        padding: 17px;
        padding-left: 16px;
        align-items: center;
        cursor: pointer;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1)
    }
    .nav-links .link .icon {
        color: #92929d;
        font-size: calc(var(--font-title) + 3px);
        margin-right: 9px
    }
    .nav-links .link .label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: .2px;
        color: #27283e;
        display: inline-block;
        white-space: nowrap
    }
    .powered-by-ordereats {
        text-align: center;
        margin-top: 33.5%;
        margin-bottom: 30px
    }
    .powered-by-ordereats .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        letter-spacing: .4px;
        line-height: 28px;
        color: #757575
    }
    .overlay.show {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .4);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 998
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .table-booking-edit-booking-details-widget {
        margin: 32px 20px 0px 20px;
        padding-bottom: 64px
    }
    .table-booking-edit-booking-details-widget .form-group {
        margin: 32px 0px 64px 0px
    }
    .table-booking-edit-booking-details-widget .form-group .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 16px;
        color: #27283e;
        margin-bottom: 24px
    }
    .table-booking-edit-booking-details-widget .form-buttons {
        margin-top: 14px
    }
    .table-booking-date-picker-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .table-booking-date-picker-modal>.header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .table-booking-date-picker-modal>.header .close-icon {
        width: 16px
    }
    .table-booking-date-picker-modal .note {
        background-color: #ffebcf;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        color: #27283e;
        margin: 20px;
        margin-bottom: 0;
        padding: 10px
    }
    .table-booking-date-picker-modal .note .store-hours-link {
        color: #d67300;
        cursor: pointer
    }
    .table-booking-date-picker-modal>.date-picker-widget {
        margin: 17px 24px 0px 24px
    }
    .table-booking-time-picker-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 17px 20px;
        font-family: var(--font-family);
        font-style: normal;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .table-booking-time-picker-modal>.header .title {
        font-size: calc(var(--font-title) + 2px);
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0;
        color: #27283e
    }
    .table-booking-time-picker-modal>.header .close-icon {
        width: 16px
    }
    .table-booking-time-picker-modal .collection-times {
        padding: 28px 20px
    }
    .table-booking-time-picker-modal .collection-times .collection-time {
        display: flex;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        border-radius: 8px;
        align-items: center;
        margin-bottom: 8px;
        padding: 14.5px 12.5px
    }
    .table-booking-time-picker-modal .collection-times .collection-time input[type=radio] {
        filter: opacity(0.8);
        margin: 0px 14px 0px 0px
    }
    .table-booking-time-picker-modal .collection-times .collection-time .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 3px);
        line-height: 21px;
        letter-spacing: .3px;
        color: #27283e
    }
}

@media(max-width: 767px) {
    .table-booking-edit-contact-details-widget {
        padding-bottom: 64px
    }
    .table-booking-edit-contact-details-widget .booking-details-banner {
        display: grid;
        grid-template-areas: "booked-for edit" "pax pax" "seating-area seating-area";
        grid-template-columns: 1fr min-content;
        background: #ffebcf;
        padding: 23px 24px 22.39px 24px
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .booked-for {
        grid-area: booked-for;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 27px;
        letter-spacing: .25px;
        color: #d67300
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .edit {
        grid-area: edit;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 5px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #d67300
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .pax {
        grid-area: pax;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .seating-area {
        grid-area: seating-area;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 26px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-edit-contact-details-widget .form-group {
        margin: 32px 20px 64px 20px
    }
    .table-booking-edit-contact-details-widget .form-group .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 16px;
        color: #27283e;
        margin-bottom: 24px
    }
    .table-booking-edit-contact-details-widget .form-buttons {
        margin-top: 4px
    }
}

@media(max-width: 767px) {
    .table-booking-summary-widget {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .25px;
        color: #27283e;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        margin: 16px 20px 24px 20px;
        padding: 24px
    }
    .table-booking-summary-widget .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 24px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-summary-widget .contact-details,
    .table-booking-summary-widget .special-requests {
        margin-top: 24px
    }
}

@media(max-width: 767px) {
    #toasts-container {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: grid;
        grid-gap: 15px;
        z-index: 1001
    }
    #toasts-container .wrapper {
        text-align: center
    }
    .toast {
        display: inline-grid;
        grid-template-columns: min-content max-content;
        font-family: var(--font-family);
        align-items: center;
        padding: 15px 20px;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0px 10px 16px rgba(49, 49, 59, .1)
    }
    .toast .icon {
        margin-top: -4px;
        margin-right: 10px
    }
    .toast .message {
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0em;
        text-align: left;
        max-width: 220px
    }
    .toast button.close {
        margin-left: 10px;
        padding: 0;
        border: 0;
        background-color: transparent;
        box-shadow: none;
        opacity: .5;
        color: #363636;
        font-size: 1.4rem
    }
    .toast.success {
        border: 1px solid #8bc1a4;
        background-color: var(--message-success-bg);
        color: var(--message-success-text)
    }
    .toast.info {
        border: 1px solid #d67300;
        background-color: var(--message-warning-bg);
        color: var(--message-warning-text)
    }
    .toast.error {
        border: 1px solid #d9657a;
        background-color: var(--message-error-bg);
        color: var(--message-error-text)
    }
    .toast.warning {
        background-color: var(--message-warning-bg);
        color: var(--message-warning-text)
    }
    .toast.loading {
        border: 1px solid #d67300;
        background-color: #ffebcf;
        color: #d67300
    }
    .toast.loading .spinner {
        width: 22px;
        height: 22px;
        margin-right: 8px;
        color: #d67300;
        animation: spin 1s infinite linear
    }
}

@media(max-width: 767px) {
    .spinner-container {
        text-align: center
    }
    .spinner-container .spinner {
        width: 30px;
        height: 30px;
        margin: 0 auto;
        animation: spin 1s infinite linear
    }
    .spinner-container .message {
        text-align: center;
        margin-top: 15px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: 15px
    }
}

@media(max-width: 767px) {
    .collection-time-selector-widget {
        display: grid;
        gap: 8px
    }
    .collection-time-selector-widget .collection-date-and-time {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min-content 1fr min-content;
        gap: 15px;
        padding: 14.4px 9px;
        border: 1px solid #e0e0e0;
        border-radius: 8px
    }
    .collection-time-selector-widget .collection-date-and-time .radio {
        padding: 6.5px;
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-self: center;
        position: relative;
        left: 3px
    }
    .collection-time-selector-widget .collection-date-and-time .text {
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        color: #27283e;
        display: flex;
        align-self: center
    }
    .collection-time-selector-widget .collection-date-and-time.disabled {
        background: #f5f5f5;
        cursor: unset
    }
    .collection-time-selector-widget .collection-date-and-time.disabled .text {
        color: #757575
    }
}


:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}


/* start grid view */
@media (max-width: 767px) {
    /* Container padding */
    .item-list-widget-grid  {
        padding: 0 15px 20px 15px;
        
    }
    
     .item-list-widget-grid .items-per-category .category-summary {
        display: flex;
        flex-flow: column;
        font-family: var(--font-family);
        font-style: normal;
        
    }
    .item-list-widget-grid .items-per-category .category-summary .name {
          /* font-family: var(--font-family);
           font-weight:600;
    
        font-size:24px;*/
            font-family: var(--font-family);
        font-size: calc(var(--font-title) + 6px);
        font-weight: 700;
        line-height: 32px;
        letter-spacing: .15px;
        word-break: break-word;
        color: var(--color-title-menu)
    }
    
    .item-list-widget-grid .items-per-category .category-summary .description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: .33px;
        grid-area: description;
        margin-top: 14px;
        margin-right: 5px;
        color: var(--color-title-description)
    }

    /* Grid layout for items */
    .item-list-widget-grid .items-container-grid{
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two items per row */
        gap: 10px; /* Space between grid items */
        padding: 10px 0;
    }

    /* Item card styles */
    .item-list-widget-grid .items-container-grid .item {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        justify-content: space-between; /* Space out content */
        background: #fff; /* White background */
        color: #333; /* Text color */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        overflow: hidden; /* Prevent overflow */
        padding: 10px; /* Inner padding */
        height: 380px; /* Fixed height for uniformity */
        text-align: center; /* Center align content */
    }

    /* Image section */
    .item-list-widget-grid .items-container-grid .item img {
        width: 100%; /* Full width of container */
        height: auto; /* Automatically adjust height */
        max-height: 200px; /* Limit the max height for consistency */
        object-fit: contain; /* Ensure the full image is visible */
        border-radius: 8px; /* Optional: Rounded corners */
        margin-bottom: 10px;
    }

    /* Item title (name) */
    .item-list-widget-grid .items-container-grid .item .name {
        font-family: var(--font-family);
        font-size: 16px; /* Title size */
        font-weight: 700;
        color: #008000; /* Green color for title */
        text-transform: uppercase; /* Make the title uppercase */
        line-height: 1.2;
        margin: 5px 0;
        flex-grow: 1; /* Let title fill available vertical space */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Description text */
    .item-list-widget-grid .items-container-grid .item .description {
        font-family: var(--font-family);
        font-size: 14px; /* Smaller font for description */
        font-weight: 400;
        color: #666; /* Subtle gray color */
        line-height: 1.4;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limit text to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Price and button container */
    .item-list-widget-grid .items-container-grid .item .price-action {
        display: flex;
        justify-content: space-between; /* Align price and button */
        align-items: center; /* Center vertically */
        margin-top: auto; /* Push to bottom */
        padding-top: 10px;
        font-size: 14px;
    }

    /* Price text */
    .item-list-widget-grid .items-container-grid .item .price {
        font-size: 14px;
        font-weight: bold;
        color: #333; /* Black color for price */
    }

    /* Add-to-cart button */
    .item-list-widget-grid .items-container-grid .item .add-to-cart {
        background-color: #f36; /* Bright pink button */
        color: #fff; /* White text */
        padding: 5px 10px;
        border-radius: 5px; /* Rounded button */
        border: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        width: 100%;
        max-width: 60px;
    }

    /* Hover effect for button */
    .item-list-widget-grid .items-container-grid .item .add-to-cart:hover {
        background-color: #e73370; /* Darker pink on hover */
    }
}


@media(max-width: 767px) {
    .item-card-widget-grid {
        overflow: hidden;
        background-color: #ffffff;
        border-radius: 8px;
        border: 1px solid #e2e2e2;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .05);
        box-sizing: border-box
    }
    .item-card-widget-grid .anchor {
        position: absolute;
        top: -120px
    }
 .item-card-widget-grid .body {
    display: grid; /* Use grid layout */
    grid-template-rows: auto 1fr; /* Image takes only the space it needs; content fills the rest */
    height: 310px; /* Total height of the card */
    overflow: hidden; /* Prevent content overflow */
}

/* Image section */
.item-card-widget-grid .body .image {
    grid-row: 1; /* Place the image in the first row */
    text-align: center; /* Center-align the image horizontally */
}

/* Image section styling */
.item-card-widget-grid .body .image {
    width: 100%;
    height: 130px;
   /* background-color: #007bff;*/ /* Blue background */
   background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

/* When the image exists */
.item-card-widget-grid .body .image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fit the container while maintaining aspect ratio */
}

/* When the image is missing */
.item-card-widget-grid .body .image.no-image {
    background-color: #fefefe; /* Blue background */
    color: #fff; /* Optional: Add text or icon */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* Content section */
.item-card-widget-grid .body .content {
    grid-row: 2; /* Place the content in the second row */
    padding: 10px; /* Add padding around the content */
    text-align: center; /* Center-align the text */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Space out the content */
}

.item-card-widget-grid .body .item-info {
        display: grid;
        grid-template-rows: min-content 1fr min-content;
        padding: 10px;
        font-family: var(--font-family);
        font-style: normal
    }
    .item-card-widget-grid .body .item-info .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: var(--font-title);
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 0;
        text-align: left;
        align-self: start;
        word-wrap: break-word;
        margin-bottom: 5px;
        color: var(--color-title-item)
    }
    .item-card-widget-grid .body .item-info .description {
          display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        align-self: start;
        word-wrap: break-word;
        text-align: left;

        color: var(--color-description-item);
        margin-bottom: 3px;
    }
    .item-card-widget-grid .body .item-info .description .content {
        overflow: hidden;
        height: min-content
    }
    .item-card-widget-grid .body .item-info .description .content.line-clamp-1 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1
    }
    .item-card-widget-grid .body .item-info .description .content.line-clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
   /* .item-card-widget-grid .body .item-info .price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: -10px
    }
    .item-card-widget-grid.body .item-info .price-and-sold-out .price {
        flex-shrink: 0;
        margin-top: auto;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: #27283e;
    }
    .item-card-widget-grid .body .item-info .price-and-sold-out .soldout,
    .item-card-widget-grid .body .item-info .price-and-sold-out .unavailable {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        padding: 3px 6px;
        margin-left: 8px;
        border-radius: 4px;
        color: #27283e;
        background: #e0e0e0
    }
    .item-card-widget-grid .body.no-image {
        grid-template-columns: unset;
        height: unset
    }
    .item-card-widget-grid .body.no-image .item-info>.description>.content {
        -webkit-line-clamp: unset
    }*/
    
    .item-card-widget-grid .body .item-info .price-and-sold-out {
        display: flex;
        justify-content: space-between; /* Aligns price to the left and button to the right */
        align-items: center; /* Ensures vertical alignment */
        margin-top: auto; /* Ensures it stays at the bottom */
    }

    .item-card-widget-grid .body .item-info .price-and-sold-out .price {
        font-size: 14px;
        color: #27283e;
        text-align: left;
    }
    
     .item-card-widget-grid .body .item-info .price-and-sold-out .button-add {
        font-size: 14px;
        color: #27283e;
        text-align: right;
        margin-right:0px;
       
    }


    .item-card-widget-grid .body .item-info .price-and-sold-out .button-add{
        background-color: #007bff;
        color: #fff;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.3s;
    }

    .item-card-widget-grid .body .item-info .price-and-sold-out .customize-button:hover {
        background-color: #0056b3;
    }
}


/* end grid view */



/*  start list view  */

@media(max-width: 767px) {
    .item-list-widget {
        padding: 0 20px 30px 20px
    }
    .item-list-widget .category-summary {
        padding: 25px 0;
        display: flex;
        flex-flow: column;
        grid-gap: 10px
    }
    .item-list-widget .category-summary .link-anchor {
        grid-area: link-anchor;
        width: 100%;
        position: relative;
        top: -170px
    }
    .item-list-widget .category-summary .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 6px);
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
        letter-spacing: 0;
        text-align: left;
        word-break: break-word;
        color: var(--color-title-menu)
    }
    .item-list-widget .category-summary .description {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .1px;
        margin: 5px 0;
        color: var(--color-title-description)
    }
    .item-list-widget .items-container {
        display: grid;
        gap: 20px
    }
    .item-list-widget .items-container .item.no-image {
        height: auto;
        padding-top: 0
    }
    .item-list-widget .items-container .item.no-image .body {
        position: relative
    }
}

@media(max-width: 767px) {
    .item-card-widget {
        overflow: hidden;
        background-color: #ffffff;
        border-radius: 8px;
        border: 1px solid #e2e2e2;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .05);
        box-sizing: border-box
    }
    .item-card-widget .anchor {
        position: absolute;
        top: -120px
    }
    .item-card-widget .body {
          height:auto;
          max-height:400px;

    }

/* When the image exists */
.item-card-widget .body .image img {
    width: 100%;
    height: auto;
    max-height:240px;
    object-fit: cover;
}

/* When the image is missing */
.item-card-widget .body .image.no-image {
    background-color: #fefefe; /* Blue background */
    color: #fff; /* Optional: Add text or icon */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    height:0px;
}

    
    .item-card-widget .body .item-info {
        display: grid;
        grid-template-rows: min-content 1fr min-content;
        padding: 10px;
        font-family: var(--font-family);
        font-style: normal
    }
    .item-card-widget .body .item-info .name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: var(--font-title);
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 0;
        text-align: left;
        align-self: start;
        word-wrap: break-word;
        margin-bottom: 8px;
        color: var(--color-title-item)
    }
    .item-card-widget .body .item-info .description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        align-self: start;
        word-wrap: break-word;
        text-align: left;

        color: var(--color-description-item);
        margin-bottom: 3px;
    }
    .item-card-widget .body .item-info .description .content {
        overflow: hidden;
        height: min-content
    }
    .item-card-widget .body .item-info .description .content.line-clamp-1 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1
    }
    .item-card-widget .body .item-info .description .content.line-clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
   /* .item-card-widget .body .item-info .price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px
    }
    .item-card-widget .body .item-info .price-and-sold-out .price {
        flex-shrink: 0;
        margin-top: auto;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: #27283e;
    }
    .item-card-widget .body .item-info .price-and-sold-out .soldout,
    .item-card-widget .body .item-info .price-and-sold-out .unavailable {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        padding: 3px 6px;
        margin-left: 8px;
        border-radius: 4px;
        color: #27283e;
        background: #e0e0e0;

    }
    .item-card-widget .body.no-image {
        grid-template-columns: unset;
        height: unset
    }
    .item-card-widget .body.no-image .item-info>.description>.content {
        -webkit-line-clamp: unset
    }*/
    
    .item-card-widget .body .item-info .price-and-sold-out {
        display: flex;
        justify-content: space-between; /* Aligns price to the left and button to the right */
        align-items: center; /* Ensures vertical alignment */
        margin-top: auto; /* Ensures it stays at the bottom */
    }

    .item-card-widget .body .item-info .price-and-sold-out .price {
        font-size: 14px;
        color: #27283e;
        text-align: left;
    }
    
     .item-card-widget .body .item-info .price-and-sold-out .button-add {
        font-size: 14px;
        color: #27283e;
        text-align: right;
        margin-right:0px;
       
    }


    .item-card-widget .body .item-info .price-and-sold-out .button-add{
        background-color: #007bff;
        color: #fff;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.3s;
    }

    .item-card-widget .body .item-info .price-and-sold-out .customize-button:hover {
        background-color: #0056b3;
    }
}




/* end list view */


@media(max-width: 767px) {
    .menu-search-widget {
        display: block
    }
    .menu-search-widget .searchbox .search-icon {
        margin: 0 5px;
        width: 21px;
        filter: invert(0.6)
    }
    .menu-search-widget .searchbox input {
        display: none
    }
    .menu-search-widget .searchbox .clear-input-icon {
        display: none
    }
}

@media(max-width: 767px) {
    .category-list-widget {
        display:none;
        background-color: #ffffff;
        gap: 10px;
        width: 100vw;
        overflow: visible;
        position: sticky;
        top: 58px;
        z-index: 1
    }
    .category-list-widget #categories-container {
        display: flex;
        overflow: scroll hidden;
        width: 100%;
        box-shadow: inset 0px -1px 0px #e3ebec
    }
    .category-list-widget #categories-container::-webkit-scrollbar {
        display: none
    }
    .category-list-widget #categories-container #categories-wrapper {
        display: grid;
        grid-auto-flow: column
    }
    .category-list-widget #categories-container #categories-wrapper .category {
        padding: 14px 11px 10px 11px;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        word-wrap: break-word
    }
    .category-list-widget #categories-container #categories-wrapper .category:first-child {
        margin-left: 7px
    }
    .category-list-widget #categories-container #categories-wrapper .category.selected {
        border-bottom: 2px solid #27283e
    }
    .category-list-widget #categories-container #categories-wrapper .category .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0;
        text-align: left;
        color: #757575
    }
    .category-list-widget #categories-container #categories-wrapper .category .name.selected {
        font-weight: 700;
        color:var(--color-title-menu);
    }
}

@media(max-width: 767px) {
    .store-closed-info-widget {
        grid-area: store-closed;
        height: 30px;
        background: #ffe7df;
        padding: 10px 20px;
        align-items: center;
        display: flex;
        justify-content: flex-start;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: #b0204b
    }
    .store-closed-info-widget span {
        margin-right: 7px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 700;
        line-height: 17px;
        letter-spacing: .25px;
        text-align: left
    }
}

@media(max-width: 767px) {
    .item-available-weekly-hours-widget {
        background: #ffebcf;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .1px;
        color: #d67300;
        border-radius: 4px;
        padding: 8px 16px
    }
}

@media(max-width: 767px) {
    .otp-for-mobile-number-request-widget {
        font-family: var(--font-family);
        font-style: normal
    }
    .otp-for-mobile-number-request-widget .error {
        display: none
    }
    .otp-for-mobile-number-request-widget .supporting-text {
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 16.9px;
        letter-spacing: .4px;
        text-align: center;
        color: #757575
    }
    .otp-for-mobile-number-request-widget .supporting-text a {
        text-decoration: none;
        color: #4cbba1
    }
}

@media(max-width: 767px) {
    .otp-verifier-widget {
        font-family: var(--font-family);
        font-style: normal
    }
    .otp-verifier-widget .otp-input-wrapper {
        display: flex;
        justify-content: center
    }
    .otp-verifier-widget .otp-input-wrapper .otp-input {
        grid-gap: 8px
    }
    .otp-verifier-widget .otp-input-wrapper input {
        width: 48px !important;
        height: 52px;
        border-radius: 6px;
        border: 1px solid #bdbdbd;
        box-sizing: border-box;
        font-weight: 400;
        font-size: calc(var(--font-title) + 7px);
        line-height: 32.5px
    }
    .otp-verifier-widget .error-banner {
        background: #ffe7df;
        margin: 20px auto 0 auto;
        box-sizing: border-box;
        width: 335px;
        padding: 16px;
        display: flex;
        flex-flow: row;
        grid-gap: 10.95px
    }
    .otp-verifier-widget .error-banner .red-warning-icon {
        display: block;
        height: min-content
    }
    .otp-verifier-widget .error-banner .error-message {
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        color: #27283e
    }
    .otp-verifier-widget .resend-otp {
        margin-top: 25px;
        text-align: center;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 22.5px;
        letter-spacing: .25px
    }
    .otp-verifier-widget .resend-otp .resend {
        font-weight: 700;
        color: #4cbba1
    }
    .otp-verifier-widget .recaptcha-branding {
        width: 328px;
        margin: 0 auto;
        margin-top: 20px;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 16.9px;
        letter-spacing: .4px;
        text-align: center;
        color: #757575
    }
    .otp-verifier-widget .recaptcha-branding a {
        text-decoration: none;
        color: #4cbba1
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(max-width: 767px) {
    .customer-display-name-update-widget {
        height: 100%;
        display: grid;
        grid-template-rows: min-content 1fr;
        font-family: var(--font-family);
        font-style: normal
    }
    .customer-display-name-update-widget form {
        height: 100%;
        display: grid;
        grid-template-rows: min-content 1fr
    }
    .customer-display-name-update-widget form .form-buttons {
        margin-top: auto;
        margin-bottom: 30px
    }
}

@media(min-width: 768px) {
    .store-trading-hours-page>.header {
        margin-top: -4px
    }
    .store-trading-hours-page>.header .wrapper>.title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 14px);
        font-style: normal;
        font-weight: 700;
        line-height: 42px;
        letter-spacing: 0px;
        text-align: center
    }
    .trading-hours-page {
        max-width: 630px;
        margin: 0 auto;
        padding-bottom: 90px;
        background-color: #fafafa
    }
    .trading-hours-page .store-logo-and-address {
        display: grid;
        grid-template-areas: "logo  find-us" "logo  need-help";
        grid-template-columns: 200px 1fr;
        grid-template-rows: min-content 1fr;
        margin-bottom: 12px;
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 0px 8px rgba(49, 48, 62, .1);
        border-radius: 0px 0px 10px 10px;
        background-color: #ffffff
    }
    .trading-hours-page .store-logo-and-address .restaurant-logo {
        grid-area: logo
    }
    .trading-hours-page .store-logo-and-address .restaurant-logo img {
        border-radius: 0 0 0 8px
    }
    .trading-hours-page .store-logo-and-address .info.find-us {
        grid-area: find-us;
        margin: 33px 29px;
        margin-bottom: 0
    }
    .trading-hours-page .store-logo-and-address .info.need-help {
        grid-area: need-help;
        margin: 20px 29px
    }
    .trading-hours-page .store-logo-and-address .info .title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 1.5px;
        color: #27283e;
        margin-bottom: 10px
    }
    .trading-hours-page .store-logo-and-address .info .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .15px;
        color: #757575
    }
    .trading-hours-page .store-logo-and-address .info .text .link {
        color: #4cbba1;
        cursor: pointer
    }
    .trading-hours-page .date-and-trading-hours-today {
        display: grid;
        padding-top: 18px
    }
    .trading-hours-page .date-and-trading-hours-today .date-today {
        margin: 0 auto;
        display: grid;
        grid-gap: 5px;
        margin-bottom: 30px
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .trading-hours-label {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 1.5px;
        text-align: center;
        text-align: center;
        color: #27283e
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .date {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        letter-spacing: 0px;
        text-align: center;
        color: #27283e
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .closed-banner {
        background: #ffe7df;
        color: #b0204b;
        padding: 16px 20px;
        margin-top: 40px;
        border-radius: 8px;
        min-width: 582px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        line-height: 17px;
        letter-spacing: .25px;
        display: inline-flex;
        flex-direction: row
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .open-banner {
        background: #d5ffe5;
        color: #10bc69;
        padding: 16px 20px;
        margin-top: 40px;
        border-radius: 8px;
        min-width: 582px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        line-height: 17px;
        letter-spacing: .25px;
        display: inline-flex;
        flex-direction: row;
    }
    .trading-hours-page .date-and-trading-hours-today .date-today .closed-banner .closed-label {
        font-weight: bold;
        margin-right: .25em
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today {
        width: 100%;
        padding: 30px 10px 30px 10px;
        display: grid;
        grid-template-rows: auto 1fr 1fr;
        background-color: #ffffff;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1)
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .collection-type {
        padding-top: 23px;
        text-align: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-style: normal;
        font-weight: bold;
        line-height: 25px;
        letter-spacing: .15px;
        color: #40415b
    }
    
      .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .collection-type-new {
        padding-top: 23px;
        text-align: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-style: normal;
        font-weight: bold;
        line-height: 25px;
        letter-spacing: .15px;
        color: #40415b
    }
    
    
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo {
        background-repeat: no-repeat;
        margin: 0 auto;
        position: relative;
        background-size: cover;
        height: 62px;
        width: 62px
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo.pickup {
        background-image: url("/images/pickup.svg")
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo.delivery {
        background-image: url("/images/delivery.svg");
        margin-bottom: -2px
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .logo.dineIn {
        background-image: url("/images/dine-in.svg")
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .sessions {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 8px
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .sessions .unavailable {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .25px;
        text-align: center;
        color: #b0204b
    }
    .trading-hours-page .date-and-trading-hours-today .collection-type-trading-hours-today .sessions .available {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .25px;
        text-align: center;
        color: #27283e
    }
}

@media(min-width: 768px)and (min-width: 768px) {
    .trading-hours-page .date-and-trading-hours-today .date-today.closed {
        border-bottom: unset
    }
}

@media(min-width: 768px)and (min-width: 768px) {
    .trading-hours-page .date-and-trading-hours-today.closed {
        grid-auto-flow: column
    }
}

@media(min-width: 768px) {
    .trading-hours-page .trading-hours-today {
        display: flex;
        grid-gap: 20px;
        margin-bottom: 15px
    }
}

@media(min-width: 768px) {
    .trading-hours-page .trading-hours-today.closed .unavailable {
        margin-bottom: 0 !important
    }
}

@media(min-width: 768px) {
    .trading-hours-page .label {
        width: fit-content;
        padding: 3px 10px 3px 3px;
        border-radius: 8px;
        margin-bottom: 10px;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        display: grid;
        align-items: center;
        grid-auto-flow: column;
        grid-gap: 7px
    }
}

@media(min-width: 768px) {
    .trading-hours-page .collection-type-selector {
        padding: 0 17px;
        margin: 20px 0 40px 0
    }
    .trading-hours-page .collection-type-selector .collection-types-tab-selector {
        display: flex;
        justify-content: center
    }
    .trading-hours-page .collection-type-selector .collection-types-tab-selector .collection-type {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .25px;
        text-align: center;
        color: #757575;
        padding: 10px 8px;
        box-shadow: inset 0px -1px 0px #e3ebec;
        cursor: pointer
    }
    .trading-hours-page .collection-type-selector .collection-types-tab-selector .collection-type.selected {
        font-weight: bold;
        color: #27283e;
        border-bottom: 1px solid #27283e
    }
}

@media(min-width: 768px) {
    .trading-hours-page .trading-hours {
        background-color: #fff;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 10px;
        border: 1px solid #e0e0e0
    }
}

@media(min-width: 768px) {
    .trading-hours-page .time-item {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: 1fr;
        grid-gap: 10px;
        grid-row-gap: 5px;
        border-bottom: 1px solid #e0e0e0;
        padding: 5px 23px;
        font-family: "Poppins"
    }
    .trading-hours-page .time-item:last-child {
        border-bottom: none
    }
    .trading-hours-page .time-item .dow {
        padding: 10px 0;
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 700;
        line-height: 23px;
        letter-spacing: .1px;
        text-align: left;
        color: #27283e
    }
    .trading-hours-page .time-item .session {
        justify-items: end;
        text-align: right;
        padding-right: 5px;
        padding: 10px 0;
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .25px;
        text-align: right;
        color: #27283e
    }
    .trading-hours-page .time-item .session.closed {
        color: #b0204b
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .online-ordering .menu-page>.body>ul>li>.header {
        padding: 0
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper {
        position: relative;
        font-family: var(--font-family);
        font-style: normal;
        
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .nav {
        display: none
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image {
        position: relative;
       /* min-width: 100%;*/
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .mobile {
        display: none
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info {
        z-index: 1;
        flex-direction: column;
        justify-content: center;
        grid-gap: 43px;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: none
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info.desktop-banner .restaurant-logo {
        display: none
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info.desktop-banner-default {
        display: flex
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info .restaurant-logo {
        width: 162px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 24px
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info .restaurant-logo>.image {
        border-radius: 24px;
        overflow: hidden
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info .store-title {
        color: #fff;
        text-align: center;
        box-sizing: border-box
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info .store-title .store-name {
        font-size: calc(var(--font-title) + 14px);
        font-weight: 700;
        line-height: 48px;
        margin-bottom: 6px
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info .store-title .store-location {
        font-size: calc(var(--font-title) - 2px);
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0
    }
    .online-ordering .menu-page>.body>ul>li>.header .wrapper .banner-image .restaurant-info .store-title .store-location .icon {
        margin-right: 10px;
        margin-bottom: -3px
    }
    .online-ordering .menu-page>.body>ul>li>.menu {
        display: grid;
        grid-template-columns: minmax(min-content, 229px) 1fr minmax(min-content, 329px);
        grid-template-rows: 1fr max-content;
        grid-template-areas: "collection-type-selector collection-type-selector collection-type-selector" "session-view-widget      session-view-widget      session-view-widget" "store-closed-info        store-closed-info        store-closed-info" "categories               items                    cart-summary"
    }
    .online-ordering .menu-page>.body>ul>li>.menu .collection-type-selector-widget {
        grid-area: collection-type-selector
    }
    .online-ordering .menu-page>.body>ul>li>.menu .session-view-widget {
        grid-area: session-view-widget
    }
    .online-ordering .menu-page>.body>ul>li>.menu .store-closed-info-widget {
        grid-area: store-closed-info
    }
    .online-ordering .menu-page>.body>ul>li>.menu .category-list-widget {
        grid-area: categories
    }
    .online-ordering .menu-page>.body>ul>li>.menu .item-list-widget {
        grid-area: items
    }
     .online-ordering .menu-page>.body>ul>li>.menu .item-list-widget-grid {
        grid-area: items
    }
    
    .online-ordering .menu-page>.body>ul>li>.menu .item-list-widget.no-items-found {
        grid-area: 4/1/span 1/span 2
    }
    
    .online-ordering .menu-page>.body>ul>li>.menu .item-list-widget-grid.no-items-found {
        grid-area: 4/1/span 1/span 2
    }
    .online-ordering .menu-page>.body>ul>li>.menu .cart-summary {
        grid-area: cart-summary;
        padding-left: 5px;
        background:#fff;
    }
    .online-ordering .menu-page>.body>ul>.menu>#collection-type-selector-widget-anchor {
        position: absolute;
        margin-top: -59px
    }
}

@media(min-width: 768px) {
    .top-nav-bar-widget {
        position: sticky;
        background-color: var(--color-menu-header);
        color:var(--color-menu-text);
        top: 0;
        z-index: 100;
        width: 100%
    }
    .top-nav-bar-widget .wrapper {
        display: grid;
        grid-template-areas: "store-header-widget menu actions";
        grid-template-columns: minmax(20%, auto) 1fr minmax(20%, auto);
        box-sizing: border-box;
        max-width: 1320px;
        padding: 3.5px 20px;
        margin: 0 auto
    }
    .top-nav-bar-widget .wrapper .back-button {
        display: none
    }
    .top-nav-bar-widget .wrapper .store-header-widget {
        grid-area: store-header-widget;
        white-space: nowrap;
        cursor: pointer
    }
    .top-nav-bar-widget .wrapper .menu {
        grid-area: menu;
        display: flex;
        flex-direction: row;
        justify-content: center
    }
    .top-nav-bar-widget .wrapper .menu .item,
    .top-nav-bar-widget .wrapper .menu .item-with-counter {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;
        height: 53px;
        margin: 0px 12.5px
    }
    .top-nav-bar-widget .wrapper .menu .item .label,
    .top-nav-bar-widget .wrapper .menu .item-with-counter .label {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        text-align: center;
        color: #a9a9b8
    }
    .top-nav-bar-widget .wrapper .menu .item.selected .label,
    .top-nav-bar-widget .wrapper .menu .item-with-counter.selected .label {
        color: #fff
    }
    .top-nav-bar-widget .wrapper .menu .item .count,
    .top-nav-bar-widget .wrapper .menu .item-with-counter .count {
        position: absolute;
        right: -13px;
        top: 9px;
        background: red;
        padding: 1px 5px 0px 6px;
        border-radius: 5px;
        font-size: calc(var(--font-title) - 8px);
        color: #fff;
        font-weight: 500
    }
    .top-nav-bar-widget .wrapper .actions {
        grid-area: actions;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin: 0
    }
    .top-nav-bar-widget .wrapper .actions .login-icon {
        margin-left: 10px;
        width: 28px;
        height: 28px;
        font-size: calc(var(--font-title) + 12px);
        cursor: pointer
    }
    .top-nav-bar-widget .wrapper .actions .login-icon .icon {
        padding: 0;
        color: #fff;
        filter: invert(var(--filter-invert))
    }
    .top-nav-bar-widget .wrapper .actions .cart {
        position: relative;
        margin-right: 25px;
        margin-top: 2px;
        cursor: pointer
    }
    .top-nav-bar-widget .wrapper .actions .cart .cart-icon {
        width: 28px;
        height: 28px;
        opacity: .45
    }
    .top-nav-bar-widget .wrapper .actions .cart .count {
        grid-area: count;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 7px);
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: left;
        position: absolute;
        right: calc(50% - 23px);
        top: -4px;
        padding: 10px;
        background: red;
        color: #fff;
        border-radius: 50%
    }
    .top-nav-bar-widget .wrapper .actions .cart .count>span {
        position: absolute;
        top: -3px;
        width: 100%;
        left: 0;
        text-align: center
    }
    .top-nav-bar-widget .wrapper .actions .avatar {
        cursor: pointer;
        width: 28px;
        height: 28px
    }
    .top-nav-bar-widget .wrapper .actions .avatar .mobile {
        display: none !important
    }
}

@media(min-width: 768px) {
    .cart-widget {
        padding-bottom: 40px;
        padding-top: 68px;
        padding-left: 4px;
        display: grid;
        grid-template-areas: "cart-header" "collection-info" "items" "totals" "checkout"
    }
    .cart-widget .collection-info {
        grid-area: collection-info
    }
    .cart-widget .collection-info .session-info {
        display: none
    }
    .cart-widget .collection-info .minimum-order-value-info {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin-top: 25px
    }
    .cart-widget .collection-info .minimum-order-value-info .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        line-height: 18px;
        color: #d67300
    }
    .cart-widget .empty-cart-header,
    .cart-widget .cart-header {
        grid-area: cart-header;
        padding-left: 5px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
    .cart-widget .empty-cart-header.empty-cart,
    .cart-widget .cart-header.empty-cart {
        padding-top: 0
    }
    .cart-widget .empty-cart-header .item-count,
    .cart-widget .cart-header .item-count {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: normal;
        line-height: 16px;
        letter-spacing: .4px;
        text-align: left;
        color: #757575
    }
    .cart-widget .empty-cart-header .cart-header-text,
    .cart-widget .cart-header .cart-header-text {
        font-family: var(--font-family);
        font-size: var(--font-title);
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 0;
        text-align: left;
        color: var(--color-title-menu)
    }
    .cart-widget .cart {
        background-color: var(--card-bg);
        box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
        border-radius: 10px;
        border: 1px solid #e2e2ea
    }
    .cart-widget .empty-cart {
        padding-top: 40px;
        padding-bottom: 40px;
          font-family: var(--font-family);

        text-align: center
    }
    .cart-widget .empty-cart>.cart-image {
        margin-bottom: 29px
    }
    .cart-widget .empty-cart>.text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        color: #9e9e9e
    }
    .cart-widget .empty-cart>.sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: .3px;
        color: #757575;
        margin-top: 11px
    }
    .cart-widget .totals {
        grid-area: totals
    }
    .cart-widget .totals .sub-total,
    .cart-widget .totals .delivery-charges,
    .cart-widget .totals .public-holiday-surcharge,
    .cart-widget .totals .grand-total {
        display: grid;
        grid-auto-flow: column;
        justify-content: space-between;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: .4px;
        text-align: left;
        color: #27283e;
        padding-bottom: 15px;
        padding-top: 10px;
        border-bottom: 1px solid #e3ebec
    }
    .cart-widget .totals .grand-total {
        padding-top: 10px;
        letter-spacing: .25px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 700;
        border: none;
        padding-bottom: 40px
    }
    .cart-widget .checkout {
        grid-area: checkout;
        display: grid;
        grid-auto-flow: column;
        align-items: center
    }
    .cart-widget .checkout .button {
        background: #0162ff;
        color: #fff;
        border-radius: 10px;
        text-align: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 1.25px;
        text-align: center;
        padding: 8px 0;
        cursor: pointer
    }
    .cart-widget .checkout .button.disabled {
        background: #f1f1f5;
        color: #bcbcc5;
        cursor: not-allowed
    }
    .cart-widget .checkout .quantity {
        font-size: calc(var(--font-title) - 8px);
        font-weight: 600;
        text-align: end
    }
    .cart-widget .select-all {
        display: grid;
        grid-auto-flow: column;
        padding: 10px 20px 10px 15px;
        justify-content: space-between
    }
    .cart-widget .select-all>.check,
    .cart-widget .select-all>.remove {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        cursor: pointer
    }
    .cart-widget .select-all .check>input {
        margin-right: 8px;
        cursor: pointer
    }
    .cart-widget .select-all .check>.text {
        color: #426ed9;
        font-size: calc(var(--font-title) - 7px);
        font-weight: 600
    }
    .cart-widget .select-all .remove>i {
        font-size: 20px
    }
    .cart-widget .select-all .remove {
        color: #fc6565;
        font-size: calc(var(--font-title) - 7px);
        font-weight: 600
    }
    .cart-widget .select-all .remove.disabled {
        color: #bcbcc5;
        cursor: not-allowed
    }
    .cart-widget .items {
        grid-area: items;
        display: grid;
        grid-gap: 15px;
        padding-top: 25px;
        padding-bottom: 15px
    }
    .cart-widget .items .item {
        padding: 15px 15px 19px 15px;
        background-color: #fff;
        border: 1px solid #e2e2e2;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .05);
        box-sizing: border-box;
        border-radius: 8px;
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-areas: "name     .         remove-icon" "summary  summary   summary" "quantity deal      price"
    }
    .cart-widget .items .deal {
        cursor: pointer;
        display: flex;
        align-items: center;
        grid-area: deal;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 8px);
        font-style: normal;
        font-weight: 500;
        line-height: 13px;
        letter-spacing: 1.5px;
        text-align: left;
        color: #d67300;
        text-transform: uppercase;
        padding: 20px 5px 0 5px
    }
    .cart-widget .items .deal img {
        margin-top: -2px;
        margin-right: 2px
    }
    .cart-widget .items .remove-icon {
        grid-area: remove-icon;
        justify-self: flex-end;
        cursor: pointer;
        margin: 4px
    }
    .cart-widget .items .name {
        grid-area: name;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        text-align: left;
        color: #27283e
    }
    .cart-widget .items .quantity {
        padding-top: 15px;
        grid-area: quantity;
        display: grid;
        grid-template-columns: min-content min-content min-content;
        gap: 22px
    }
    .cart-widget .items .quantity>.number {
        padding: 0 2px;
        display: grid;
        align-self: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 1px);
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
        letter-spacing: 0px;
        text-align: center;
        color: #27283e
    }
    .cart-widget .items .quantity>.icon {
        align-self: center;
        display: grid;
        border-radius: 5px;
        width: 23px;
        height: 23px;
        text-align: center;
        font-size: calc(var(--font-title) + 2px);
        color: #426ed9;
        cursor: pointer
    }
    .cart-widget .items .price {
        padding-top: 21px;
        grid-area: price;
        text-align: right;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: .1px;
        justify-self: flex-end;
        color: #1faa89
    }
    .cart-widget .items .divider {
        grid-area: divider;
        height: 1px;
        background-color: #e2e2ea;
        margin-top: 20px
    }
    .cart-widget .items .divider.hide {
        display: none
    }
    .cart-widget .items .summary {
        grid-area: summary;
        padding-top: 10px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: .4px;
        text-align: left;
        color: #757575
    }
    .cart-widget .items .summary.hide {
        display: none
    }
    .cart-widget .items .summary>pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        color: #757575;
        margin: 0 !important
    }
}

@media(min-width: 768px) {
    .loyalty-card-page {
        padding-bottom: 90px
    }
    .loyalty-card-page>.spinner {
        margin: 50px;
        text-align: center
    }
    .loyalty-card-page>.alert {
        margin: 20px
    }
    .loyalty-card-page .loyalty {
        margin: 42px 20px
    }
    .loyalty-card-page .loyalty .loyalty-card-widget {
        margin: 0 auto;
        width: 400px;
        padding-top: 250px !important
    }
    .loyalty-card-page .loyalty .loyalty-card-widget .details {
        margin: 0 26.5px !important
    }
    .loyalty-card-page .loyalty .loyalty-card-widget .details .balance {
        margin-top: 10% !important;
        font-size: 35px !important
    }
    .loyalty-card-page .loyalty .loyalty-card-widget .details .customer-info {
        margin-top: 8.5% !important;
        margin-left: 5px !important;
        font-size: 22.7px !important;
        line-height: 34px !important;
        letter-spacing: 2px !important
    }
    .loyalty-card-page .loyalty .claim-info {
        margin: 0 2px;
        margin-top: 58px;
        text-align: center
    }
    .loyalty-card-page .loyalty .claim-info .title {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 1px);
        font-weight: 700;
        color: #27283e
    }
    .loyalty-card-page .loyalty .claim-info .subtitle {
        white-space: pre-wrap;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        color: #757575;
        line-height: 24px;
        letter-spacing: .3px;
        width: 390px;
        margin: 5px auto
    }
}

@media(min-width: 768px) {
    .session-view-widget {
        height: 30px;
        background: #def2d6;
        padding: 14.5px 20px;
        align-items: center;
        display: flex;
        justify-content: center
    }
    .session-view-widget .details {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, min-content);
        grid-template-rows: 1fr;
        white-space: nowrap
    }
    .session-view-widget .icon {
        display: none
    }
    .session-view-widget .ordering-for {
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left
    }
    .session-view-widget .ordering-for .collection-type {
        font-weight: 700
    }
    .session-view-widget .datetime-and-address {
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0;
        margin-left: 4px;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .session-view-widget .datetime-and-address .desktop-datetime-address {
        display: none
    }
    .session-view-widget .datetime-and-address .mobile-datetime-address {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .session-view-widget .datetime-and-address .mobile-datetime-address .to {
        font-weight: 400
    }
    .session-view-widget .actions .cancel {
        font-weight: 700;
        color: #086e37;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0;
        margin-left: 10px;
        cursor: pointer
    }
    .session-view-widget .actions .edit,
    .session-view-widget .actions .discard {
        display: none
    }
}

@media(min-width: 768px) {
    .no-coupons {
        margin-top: 60px
    }
    .no-coupons>.icon {
        margin: 0 auto;
        display: block
    }
    .no-coupons>.text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 26px;
        color: #757575;
        width: 240px;
        margin: 15px auto;
        text-align: center
    }
}

@media(min-width: 768px) {
    .coupons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        max-width: 864px;
        margin: 29px auto;
        gap: 20px 6px;
        margin-bottom: 52px
    }
    .coupons .coupon {
        position: relative;
        background-image: url("/themes/theme-kn/images/coupon-background-desktop.svg");
        background-repeat: no-repeat;
        background-size: cover;
        width: 400px;
        min-height: 154px
    }
    .coupons .coupon .body {
        display: grid;
        grid-template-rows: min-content 1fr min-content;
        grid-template-columns: 1fr min-content;
        grid-template-areas: "code         icon" "description  icon" "discount     availability";
        padding: 20px 10px 30px 35px;
        min-height: 120px;
        gap: 0px 5px;
        color: #27283e
    }
    .coupons .coupon .body.used {
        filter: grayscale(1);
        color: #27283e69
    }
    .coupons .coupon .body .code {
        grid-area: code;
        font-family: "IBM Plex";
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 24px;
        letter-spacing: 1px
    }
    /*.coupons .coupon .body .icon {*/
    /*    grid-area: icon;*/
    /*    width: 40px;*/
    /*    height: 32px;*/
    /*    padding-left: 30px*/
    /*}*/
    .coupons .coupon .body .icon.available {
        right: 0
    }
    .coupons .coupon .body .description {
        grid-area: description;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 24px;
        display: -webkit-box;
        max-height: 63px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
    .coupons .coupon .body .discount {
        grid-area: discount;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 20px;
        margin-top: auto;
        color: #27283e
    }
    .coupons .coupon .body .availability {
        grid-area: availability;
        text-transform: uppercase;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        color: #4cbba1;
        letter-spacing: 1px;
        position: relative;
        margin-top: auto
    }
}

@media(min-width: 768px) {
    .collection-type-selector-widget {
        margin: 10px 0px 10px 0px;
        /*background-color: var(--color-menu-tag);*/
        display: flex;
        place-content: space-between;
        align-items: center
    }
    
    .collection-type-selector-widget2 {
        padding: 10px;
        background-color: var(--color-menu-tag);
        display: flex;
        place-content: space-between;
        align-items: center
    }
    .collection-type-selector-widget2 .collection-types {
        width: 100%;
        /*min-width: 300px*/
    }
    .online-ordering .menu-page>.body>ul>li>.menu .collection-type-selector-widget2 {
        grid-area: collection-type-selector;
    }
    .collection-type-selector-widget .collection-types {
        width: 100%;
        /*min-width: 300px*/
    }
    .collection-type-selector-widget .collection-types .collection-type-single {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: #d67300;
        padding: 10px 0
    }
    .collection-type-selector-widget .collection-types .collection-type-single span {
        cursor: pointer;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left
    }
    .collection-type-selector-widget .collection-types .collection-type-single span:last-of-type {
        margin-left: 1em
    }
    .collection-type-selector-widget .collection-types .collection-type-widget {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr;
        grid-auto-columns: 1fr;
        overflow: hidden;
        padding: 4px;
        gap: 5px;
        border-radius: 10px;
        background-color: #e2e3e3;
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type {
        position: relative;
        text-align: center;
        padding: 3px 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: transparent;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order .collection-label,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type .collection-label {
        padding: 1px
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order span,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type span {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: var(--color-title-menu)
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order.selected,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type.selected {
        background-color: #ffffff
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order.selected .check,
    .collection-type-selector-widget .collection-types .collection-type-widget .collection-type.selected .check {
        margin-right: 10px;
        left: 33px;
        width: 16px
    }
    .collection-type-selector-widget .collection-types .collection-type-widget .start-order {
        background-color: var(--button-success-bg);
        color: var(--button-success-fg)
    }
    .collection-type-selector-widget .start-ordering-link {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: #d67300;
        cursor: pointer
    }
}

@media(min-width: 768px) {
    .order-success-page {
        background-color: #fff
    }
    .order-success-page.page>.header {
        padding: 0px;
        box-shadow: none
    }
    .order-success-page .order-success-page-wrapper {
        max-width: 630px;
        margin: 0 auto
    }
    .order-success-page .order-success-page-wrapper .checkout-banner {
        text-align: center;
        margin: 36px 20px
    }
    .order-success-page .order-success-page-wrapper .checkout-banner .icon {
        width: 93px;
        margin-bottom: 24px
    }
    .order-success-page .order-success-page-wrapper .checkout-banner .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) + 14px);
        line-height: 27px;
        letter-spacing: -1px;
        color: #27283e
    }
    .order-success-page .order-success-page-wrapper .order-placed-time {
        margin: 67px 20px;
        margin-bottom: 36px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        text-align: center;
        letter-spacing: .4px;
        color: #9e9e9e
    }
    .order-success-page .order-success-page-wrapper .buttons {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 60px;
        max-width: 200px
    }
    .order-success-page .order-success-page-wrapper .buttons button {
        width: 100%;
        display: grid;
        row-gap: 10px;
        border-radius: 8px;
        padding: 6px
    }
    .order-success-page .order-success-page-wrapper .buttons button#order-history-button {
        background-color: #ffffff;
        border: 2px solid #4cbba1;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 6px);
        line-height: 22px;
        text-align: center;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: #4cbba1;
        margin-bottom: 26px
    }
    .order-success-page .order-success-page-wrapper .buttons button#back-to-menu-button {
        padding: 0px;
        background: transparent;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 6px);
        line-height: 17px;
        text-align: center;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: #757575;
        box-shadow: none
    }
    .loyalty-card-modal {
        width: 422px !important;
        background-color: #fff
    }
    .loyalty-card-modal .loyalty-banner {
        margin: 21px;
        text-align: center
    }
    .loyalty-card-modal .loyalty-banner .icon {
        margin-bottom: 8px
    }
    .loyalty-card-modal .loyalty-banner .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        text-align: center;
        letter-spacing: -0.4px;
        color: #27283e;
        margin-bottom: 4px
    }
    .loyalty-card-modal .loyalty-banner .subtext {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 22px;
        text-align: center;
        letter-spacing: -0.1px;
        color: #757575
    }
    .loyalty-card-modal .card {
        margin: 0px 54px;
        margin-top: 37px
    }
    .loyalty-card-modal .card .loyalty-card-widget .details {
        margin: 0 20.5px
    }
    .loyalty-card-modal .caption {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 16px;
        text-align: center;
        letter-spacing: 0;
        color: #757575;
        margin: 30px 53px
    }
    .loyalty-card-modal .button {
        background: #4cbba1;
        border-radius: 8px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: #ffffff;
        padding: 8px 0;
        margin: 21px 30px;
        margin-top: 41px;
        align-content: flex-end;
        cursor: pointer
    }
}

@media(min-width: 768px) {
    .order-status-widget {
        padding: 30px 31px 30px 31px;
        margin: 0 20px;
        margin-bottom: 24px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px
    }
    .order-status-widget .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #f5f5f5;
        display: flex;
        margin-bottom: 16px
    }
    .order-status-widget .progress-bar .progress.success {
        background-color: #086e37
    }
    .order-status-widget .progress-bar .progress.danger {
        background-color: #b0204b
    }
    .order-status-widget .progress-bar .progress.warning {
        background-color: #d67300
    }
    .order-status-widget .caption {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px
    }
    .order-status-widget .caption .status {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 1.5px;
        text-align: left;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #757575
    }
    .order-status-widget .caption .step {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 1.5px;
        text-align: right;
        color: #757575;
        text-transform: uppercase
    }
    .order-status-widget .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 1px);
        font-style: normal;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: .15px;
        text-align: left;
        color: #27283e;
        margin-bottom: 10px
    }
    .order-status-widget .sub-text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .5px;
        text-align: left;
        color: #757575
    }
    .order-status-widget .payment-message {
        border-radius: 4px;
        padding: 8px 8px 8px 10px;
        margin-top: 16px;
        display: grid;
        grid-template-columns: min-content 1fr;
        column-gap: 10px
    }
    .order-status-widget .payment-message .icon {
        margin-top: 3px
    }
    .order-status-widget .payment-message .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .3px;
        color: #27283e
    }
    .order-status-widget .payment-message.primary {
        background-color: #e5efff
    }
    .order-status-widget .payment-message.primary .icon {
        fill: #5c84e5
    }
    .order-status-widget .payment-message.warning {
        background-color: #ffebcf
    }
    .order-status-widget .payment-message.warning .icon {
        fill: #d67300
    }
    .order-status-widget .payment-message.danger {
        background-color: #ffe7df
    }
    .order-status-widget .payment-message.danger .icon {
        fill: #b0204b
    }
}

@media(min-width: 768px) {
    .order-view-widget .order-summary {
        display: grid;
        row-gap: 9px;
        padding: 33px 31px 26px 31px;
        margin: 0 20px;
        margin-bottom: 24px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px
    }
    .order-view-widget .order-summary .collection-time {
        padding-bottom: 2px
    }
    .order-view-widget .order-summary .pickup-info {
        padding-bottom: 5px
    }
    .order-view-widget .order-summary .delivery-info {
        padding-bottom: 2px
    }
    .order-view-widget .order-summary .payment-method {
        padding-bottom: 2px
    }
    .order-view-widget .order-summary .label {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 700;
        line-height: 23px;
        letter-spacing: .25px;
        text-align: left;
        color: #27283e;
        margin-bottom: 1px
    }
    .order-view-widget .order-summary .value {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .25px;
        text-align: left;
        color: #27283e;
        margin-bottom: 4px
    }
    .order-view-widget .order-summary .payment-method .value {
        display: flex
    }
    .order-view-widget .order-summary .payment-method .wallet,
    .order-view-widget .order-summary .payment-method .brand {
        height: 25px;
        margin-right: 5px
    }
    .order-view-widget .order-summary .payment-method .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575
    }
    .order-view-widget .order-summary .transaction-fee .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575
    }
    .order-view-widget .cart-summary {
        padding: 31px 30px 30px 32px;
        margin: 0 20px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px
    }
    .order-view-widget .cart-summary .cart-items {
        margin-bottom: 16px;
        border-bottom: 1px solid #e0e0e0
    }
    .order-view-widget .cart-summary .cart-items .cart-item {
        display: grid;
        grid-template-areas: "quantity item price";
        grid-template-columns: .5fr 4.25fr 1fr;
        column-gap: 1px;
        row-gap: 17px;
        margin-bottom: 13px
    }
    .order-view-widget .cart-summary .cart-items .cart-item .quantity {
        grid-area: quantity;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e
    }
    .order-view-widget .cart-summary .cart-items .cart-item .item {
        grid-area: item
    }
    .order-view-widget .cart-summary .cart-items .cart-item .item .name {
        grid-area: name;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 4px
    }
    .order-view-widget .cart-summary .cart-items .cart-item .item .summary {
        grid-area: summary;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: .4px;
        text-align: left;
        color: #757575;
        white-space: pre-wrap;
        padding-bottom: 5px
    }
    .order-view-widget .cart-summary .cart-items .cart-item .price {
        grid-area: price;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: right;
        letter-spacing: .25px;
        color: #27283e
    }
    .order-view-widget .cart-summary .amounts {
        display: grid;
        row-gap: 9px
    }
    .order-view-widget .cart-summary .amounts>div {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: max-content
    }
    .order-view-widget .cart-summary .amounts>div .label,
    .order-view-widget .cart-summary .amounts>div .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #757575
    }
    .order-view-widget .cart-summary .amounts>div:last-child {
        margin-top: 8px
    }
    .order-view-widget .cart-summary .amounts>div:last-child .label,
    .order-view-widget .cart-summary .amounts>div:last-child .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e
    }
}

@media(min-width: 768px) {
    .page {
        position: relative;
        min-height: calc(100vh - 59px - 250px);
        background: #fafafa
    }
}

@media(min-width: 768px)and (max-width: 1280px) {
    .page {
        padding: 0 32px
    }
}

@media(min-width: 768px) {
    .page>.header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: #fafafa;
        padding-top: 102px;
        padding-bottom: 22px;
        width: 100%;
        z-index: 2
    }
    .page>.header .wrapper {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto
    }
    .page>.header .wrapper .title {
        font-family: var(--font-family);
        font-style: normal;
        font-size: 32px !important;
        font-weight: 700;
        line-height: 41.6px;
        letter-spacing: 0px;
        text-align: center !important
    }
    .page>.header .actions button {
        background-color: #fff;
        padding: 7px 14px
    }
    .page>.header .actions button .icon {
        color: #92929d;
        font-size: 20px
    }
    .page>.header .actions button .label {
        color: var(--color-primary)
    }
    .page>.header .actions a:link {
        text-decoration: none
    }
}

@media(min-width: 768px) {
    .page>.body {
        max-width: auto;
        margin-left:20px;
        margin-right:20px;
    }
    .page>.body>.spinner {
        margin: 50px;
        text-align: center
    }
}

@media(min-width: 768px) {
    .ReactModalPortal .ReactModal__Overlay {
        background: rgba(82, 82, 82, .72) !important;
        z-index: 1000;
        height: 100vh !important
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content {
        border-radius: 0 !important;
        padding: 0 !important;
        border: unset !important;
        background: none !important;
        top: 120px !important
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal {
        position: relative;
        max-height: calc(100vh - 240px);
        overflow: hidden auto;
        background-color: #ffffff;
        margin: 0 auto;
        border-radius: 16px;
        width: 525px
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal::-webkit-scrollbar {
        width: 5px
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal::-webkit-scrollbar-track {
        background: transparent
    }
    .ReactModalPortal .ReactModal__Overlay .ReactModal__Content .modal::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .deal-widget {
        display: flex;
        flex-flow: column;
        max-height: calc(100vh - 240px)
    }
    .deal-widget .item-body {
        padding-bottom: 72.25px;
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll
    }
    .deal-widget .item-body::-webkit-scrollbar {
        width: 5px
    }
    .deal-widget .item-body::-webkit-scrollbar-track {
        background: transparent
    }
    .deal-widget .item-body::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .deal-widget .item-body::-webkit-scrollbar {
        width: 0
    }
    .deal-widget .item-body .close-icon {
        position: absolute;
        top: 25px;
        right: 8px;
        margin-right: 19px;
        background: #ffffff;
        width: 16px;
        padding: 7px;
        border-radius: 100%;
        z-index: 2;
        cursor: pointer
    }
    .deal-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 23px;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .deal-widget .item-image.no-image {
        margin-top: unset
    }
    .deal-widget .item-name {
        position: sticky;
        top: 0;
        background: #ffffff;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) + 6px);
        font-weight: 700;
        line-height: 31.2px;
        color: #27283e;
        z-index: 1
    }
    .deal-widget .item-name::before {
        content: "";
        display: block;
        height: 16px;
        position: sticky;
        -webkit-position: sticky;
        top: 57.2px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, .14)
    }
    .deal-widget .item-name.no-image::before {
        margin-top: 10px
    }
    .deal-widget .item-name>.container {
        background-color: #ffffff;
        padding: 25px 32px;
        padding-bottom: 18px;
        position: sticky;
        -webkit-position: sticky;
        top: 0px;
        margin-top: -16px;
        z-index: 3
    }
    .deal-widget .item-details {
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        padding: 0 32px
    }
    .deal-widget .item-details * {
        margin: 0
    }
    .deal-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .deal-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 17px;
        margin-bottom: 16px
    }
    .deal-widget .item-details .item-price-and-sold-out .item-price {
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        letter-spacing: .5px;
        color: #27283e
    }
    .deal-widget .item-details .item-price-and-sold-out .item-sold-out,
    .deal-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .deal-widget .deal-body {
        margin-top: 28px
    }
    .deal-widget .deal-body .deal-pizzas {
        padding-top: 0
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza {
        margin-top: 31px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza:first-child {
        margin-top: 0
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr max-content;
        padding: 16px 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fafafa
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 2px);
        color: #27283e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .requiredness {
        padding: 4px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 400;
        color: #757575;
        letter-spacing: .5px;
        line-height: 18px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .selected::before {
        content: url("/images/green-check.svg");
        padding-right: 5px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .required {
        color: #086e37
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title .error {
        background-color: #ffe7df;
        color: #b0204b
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header>.form-item.switch label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #27283e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header>.switch {
        display: flex;
        justify-content: flex-start
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .header>.switch>label {
        margin: 0;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 18px;
        letter-spacing: 0;
        color: #27283e !important
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body {
        padding: 16px 32px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry {
        margin-top: 8px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry:first-child {
        margin-top: 0
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button {
        cursor: pointer;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr min-content min-content;
        gap: 15px;
        padding: 18px 16px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        align-items: center
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button .text {
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #27283e;
        line-height: 14px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button .text.no-pizza {
        color: #9e9e9e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .choose-pizza-button .extra-charge {
        white-space: nowrap;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #9e9e9e
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .summary>pre {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        color: #757575;
        margin: 17px 2px;
        margin-bottom: 12px;
        letter-spacing: .3px;
        line-height: 18px;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .customize-pizza-button {
        cursor: pointer;
        margin-left: 2px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        color: #4cbba1;
        letter-spacing: 1.2px;
        margin-bottom: 28px
    }
    .deal-widget .deal-body .deal-pizzas .deal-pizza .body .deal-pizza-entry .choose-container .customize-pizza-button.customize {
        margin-top: 20px
    }
    .deal-widget .deal-body .deal-items {
        padding: 12px 0;
        display: grid;
        grid-gap: 35px
    }
    .deal-widget .deal-body .deal-items .deal-item>.header {
        padding: 16px 32px;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr max-content;
        align-items: center;
        margin-bottom: 11px;
        background-color: #fafafa
    }
    .deal-widget .deal-body .deal-items .deal-item>.header .title {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        color: #27283e
    }
    .deal-widget .deal-body .deal-items .deal-item>.modifiers .modifier-widget .header .title .modifier-name {
        font-weight: 500
    }
    .deal-widget .deal-body .deal-modifiers {
        padding: 20px 0
    }
    .deal-widget .actions .add-to-cart-widget {
        padding: 24px 30px 24px 30px
    }
    .deal-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        z-index: 2;
        display: flex;
        flex-direction: row
    }
    .deal-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .deal-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .deal-pizza-list-widget {
        display: flex;
        flex-flow: column;
        height: 100%;
        font-family: var(--font-family);
        font-style: normal
    }
    .deal-pizza-list-widget input[type=radio] {
        cursor: pointer;
        display: none
    }
    .deal-pizza-list-widget input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%;
        color: #27283e;
        letter-spacing: .1px;
        cursor: pointer
    }
    .deal-pizza-list-widget input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 14px;
        height: 14px
    }
    .deal-pizza-list-widget input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .deal-pizza-list-widget .item-header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99;
        padding: 20px 32px
    }
    .deal-pizza-list-widget .item-header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .deal-pizza-list-widget .item-header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .deal-pizza-list-widget .item-header .close {
        cursor: pointer;
        margin-right: 4px;
        margin-bottom: 5px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 700;
        line-height: 21px;
        text-transform: uppercase;
        color: #4cbba1
    }
    .deal-pizza-list-widget .item-body {
        height: 100%;
        overflow: hidden;
        margin-bottom: 26px
    }
    .deal-pizza-list-widget .pizzas {
        display: grid;
        gap: 15px;
        padding: 10px 32px;
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll;
        max-height: calc(100vh - 352px)
    }
    .deal-pizza-list-widget .pizzas::-webkit-scrollbar {
        width: 5px
    }
    .deal-pizza-list-widget .pizzas::-webkit-scrollbar-track {
        background: transparent
    }
    .deal-pizza-list-widget .pizzas::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .deal-pizza-list-widget .pizzas .pizza {
        padding: 14px 0;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        overflow: hidden;
        position: relative;
        cursor: pointer
    }
    .deal-pizza-list-widget .pizzas .pizza .soldout-overlay {
        background: #ababab36;
        width: 100%;
        height: 100%;
        position: absolute;
        cursor: not-allowed;
        left: 0;
        top: 0
    }
    .deal-pizza-list-widget .pizzas .pizza .header {
        padding: 0 10px 0 15px;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .1px;
        color: #27283e;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .deal-pizza-list-widget .pizzas .pizza .header .name {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%
    }
    .deal-pizza-list-widget .pizzas .pizza .price {
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 150%;
        letter-spacing: .4px;
        color: #757575;
        white-space: nowrap
    }
    .deal-pizza-list-widget .pizzas .pizza .description {
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 150%;
        letter-spacing: .1px;
        color: #757575;
        margin: 0;
        padding: 5px 15px 0 40px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .half-and-half-widget {
        display: flex;
        flex-flow: column;
        max-height: calc(100vh - 240px)
    }
    .half-and-half-widget .item-body {
        padding-bottom: 72.25px;
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll
    }
    .half-and-half-widget .item-body::-webkit-scrollbar {
        width: 5px
    }
    .half-and-half-widget .item-body::-webkit-scrollbar-track {
        background: transparent
    }
    .half-and-half-widget .item-body::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .half-and-half-widget .item-body::-webkit-scrollbar {
        width: 0
    }
    .half-and-half-widget .item-body .close-icon {
        position: absolute;
        top: 25px;
        right: 8px;
        margin-right: 19px;
        background: #ffffff;
        width: 16px;
        padding: 7px;
        border-radius: 100%;
        z-index: 2;
        cursor: pointer
    }
    .half-and-half-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 23px;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .half-and-half-widget .item-image.no-image {
        margin-top: unset
    }
    .half-and-half-widget .item-name {
        position: sticky;
        top: 0;
        background: #ffffff;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) + 6px);
        font-weight: 700;
        line-height: 31.2px;
        color: #27283e;
        z-index: 1
    }
    .half-and-half-widget .item-name::before {
        content: "";
        display: block;
        height: 16px;
        position: sticky;
        -webkit-position: sticky;
        top: 57.2px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, .14)
    }
    .half-and-half-widget .item-name.no-image::before {
        margin-top: 10px
    }
    .half-and-half-widget .item-name>.container {
        background-color: #ffffff;
        padding: 25px 32px;
        padding-bottom: 18px;
        position: sticky;
        -webkit-position: sticky;
        top: 0px;
        margin-top: -16px;
        z-index: 3
    }
    .half-and-half-widget .item-details {
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        padding: 0 32px
    }
    .half-and-half-widget .item-details * {
        margin: 0
    }
    .half-and-half-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .half-and-half-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 17px;
        margin-bottom: 16px
    }
    .half-and-half-widget .item-details .item-price-and-sold-out .item-price {
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        letter-spacing: .5px;
        color: #27283e
    }
    .half-and-half-widget .item-details .item-price-and-sold-out .item-sold-out,
    .half-and-half-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .half-and-half-widget .half-and-half-pizzas {
        display: grid;
        grid-gap: 28px;
        font-family: var(--font-family);
        font-style: normal;
        margin-top: 28px
    }
    .half-and-half-widget .half-and-half-pizzas p {
        margin: 0;
        margin-bottom: 11px
    }
    .half-and-half-widget .half-and-half-pizzas .header {
        padding: 16px 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25.5px;
        background-color: #fafafa
    }
    .half-and-half-widget .half-and-half-pizzas .header .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .pizza-half {
        font-size: calc(var(--font-title) - 2px);
        font-weight: 700;
        margin-right: 8px;
        color: #27283e
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .requiredness {
        padding: 0px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--font-title) - 6px);
        color: #757575;
        font-weight: 400;
        letter-spacing: .5px;
        line-height: 18px
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .selected::before {
        content: url("/images/green-check.svg");
        padding-right: 5px
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .required {
        color: #086e37
    }
    .half-and-half-widget .half-and-half-pizzas .header .title .error {
        background-color: #ffe7df;
        color: #b0204b
    }
    .half-and-half-widget .half-and-half-pizzas .half-and-half-pizza-entry {
        padding: 16px 32px
    }
    .half-and-half-widget .half-and-half-pizzas .choose-pizza-button {
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 30px 14px 16px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 22.5px;
        letter-spacing: .2px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        background: #ffffff;
        color: #9e9e9e;
        background-image: url("/images/right-arrow-head-icon.svg");
        background-repeat: no-repeat;
        background-position: right 14px bottom 19px;
        cursor: pointer
    }
    .half-and-half-widget .half-and-half-pizzas .choose-pizza-button .label.with-input {
        color: #27283e
    }
    .half-and-half-widget .half-and-half-pizzas .choose-pizza-button .extra-charge {
        display: flex;
        grid-gap: 5px
    }
    .half-and-half-widget .half-and-half-pizzas .summary {
        margin: 0;
        padding: 16px 0 0px 2px;
        white-space: pre-wrap;
        font-family: var(--font-family);
        font-weight: 400;
        font-style: normal;
        font-size: calc(var(--font-title) - 6px);
        line-height: 16px;
        letter-spacing: .25px;
        color: #757575
    }
    .half-and-half-widget .half-and-half-pizzas .customize-pizza-button {
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 16.9px;
        letter-spacing: 1px;
        background: #ffffff;
        color: #4cbba1;
        box-shadow: none;
        padding: 20px 3px
    }
    .half-and-half-widget .half-and-half-pizzas .edit-pizza-button {
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 16.9px;
        letter-spacing: 1px;
        background: #ffffff;
        color: #4cbba1;
        box-shadow: none;
        padding: 12px 0 0 2px
    }
    .half-and-half-widget .actions {
        margin-top: 33px
    }
    .half-and-half-widget .actions .add-to-cart-widget {
        padding: 24px 30px 24px 30px
    }
    .half-and-half-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        z-index: 2;
        display: flex;
        flex-direction: row
    }
    .half-and-half-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .half-and-half-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .half-and-half-pizza-list-widget {
        display: flex;
        flex-flow: column;
        height: 100%;
        font-family: var(--font-family);
        font-style: normal
    }
    .half-and-half-pizza-list-widget input[type=radio] {
        cursor: pointer;
        display: none
    }
    .half-and-half-pizza-list-widget input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%;
        color: #27283e;
        letter-spacing: .1px;
        cursor: pointer
    }
    .half-and-half-pizza-list-widget input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 14px;
        height: 14px
    }
    .half-and-half-pizza-list-widget input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .half-and-half-pizza-list-widget .item-header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99;
        padding: 20px 32px
    }
    .half-and-half-pizza-list-widget .item-header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .half-and-half-pizza-list-widget .item-header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .half-and-half-pizza-list-widget .item-header .close {
        cursor: pointer;
        margin-right: 4px;
        margin-bottom: 5px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 700;
        line-height: 21px;
        text-transform: uppercase;
        color: #4cbba1
    }
    .half-and-half-pizza-list-widget .item-body {
        height: 100%;
        overflow: hidden;
        margin-bottom: 26px
    }
    .half-and-half-pizza-list-widget .pizzas {
        display: grid;
        gap: 15px;
        padding: 10px 32px;
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll;
        max-height: calc(100vh - 352px)
    }
    .half-and-half-pizza-list-widget .pizzas::-webkit-scrollbar {
        width: 5px
    }
    .half-and-half-pizza-list-widget .pizzas::-webkit-scrollbar-track {
        background: transparent
    }
    .half-and-half-pizza-list-widget .pizzas::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .half-and-half-pizza-list-widget .pizzas .pizza {
        padding: 14px 0;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        overflow: hidden;
        position: relative;
        cursor: pointer
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .soldout-overlay {
        background: #ababab36;
        width: 100%;
        height: 100%;
        position: absolute;
        cursor: not-allowed;
        left: 0;
        top: 0
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .header {
        padding: 0 10px 0 15px;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .1px;
        color: #27283e;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .header .name {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .price {
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 150%;
        letter-spacing: .4px;
        color: #757575;
        white-space: nowrap
    }
    .half-and-half-pizza-list-widget .pizzas .pizza .description {
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 150%;
        letter-spacing: .1px;
        color: #757575;
        margin: 0;
        padding: 5px 15px 0 40px
    }
}

@media(min-width: 768px) {
    .order-history-page {
        background: #fafafa
    }
    .order-history-page .list {
        max-width: 630px;
        margin: 0 auto;
        margin-bottom: 100px
    }
    .order-history-page .list .order-list-view {
        display: grid;
        grid-template-areas: "collection-type status" "time time" "address address" "customer customer" "grand-total grand-total";
        grid-template-columns: 1fr auto;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        margin: 22px 0px;
        padding: 24px;
        cursor: pointer
    }
    .order-history-page .list .order-list-view .status {
        grid-area: status;
        display: block;
        margin-bottom: 9px
    }
    .order-history-page .list .order-list-view .collection-type {
        grid-area: collection-type;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 22px;
        letter-spacing: .1px;
        color: #27283e;
        margin-bottom: 9px
    }
    .order-history-page .list .order-list-view .time {
        grid-area: time;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 22px;
        letter-spacing: .5px;
        color: #27283e
    }
    .order-history-page .list .order-list-view .address {
        grid-area: address;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 22px;
        letter-spacing: .5px;
        color: #27283e;
        margin-bottom: 8px
    }
    .order-history-page .list .order-list-view .customer {
        grid-area: customer;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        line-height: 17px;
        letter-spacing: .2px;
        color: #757575;
        margin-bottom: 8px
    }
    .order-history-page .list .order-list-view .grand-total {
        grid-area: grand-total;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        line-height: 16px;
        letter-spacing: .2px;
        color: #757575
    }
}

@media(min-width: 768px) {
    .order-view-page>.header {
        padding: 0
    }
    .order-view-page>.header .wrapper {
        display: none
    }
    .order-view-page .body {
        max-width: 670px;
        padding-bottom: 92px
    }
    .order-view-page .body .order-placed-time {
        padding: 71px 0px 42px 0px;
        margin: 0 auto;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: .4px;
        text-align: center;
        color: #9e9e9e
    }
    .order-view-page .body .buttons {
        display: flex;
        justify-content: center
    }
    .order-view-page .body .buttons>button {
        background-color: transparent;
        border: none;
        box-shadow: none;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 1.5px;
        text-align: center;
        color: #9e9e9e;
        text-transform: uppercase
    }
    .order-view-page .body .order-view-header {
        margin-top: 87px
    }
    .order-view-page .body .order-view-header>.header {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: bold;
        font-size: calc(var(--font-title) + 14px);
        line-height: 48px;
        text-align: left;
        color: #27283e;
        margin: 0 20px 23px 20px
    }
    .order-view-page .body .order-view-header .order-view-crumbs {
        position: relative;
        display: flex;
        flex-direction: row;
        margin: 0px 20px -1px 20px
    }
    .order-view-page .body .order-view-header .order-view-crumbs>span {
        align-self: center;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .25px;
        text-align: left;
        color: #27283e
    }
    .order-view-page .body .order-view-header .order-view-crumbs .caret-right {
        height: 14px;
        width: 14px;
        margin: 14px;
        background-position: center;
        background-image: url("/images/caret-right-icon.svg");
        background-size: contain;
        background-repeat: no-repeat
    }
}

@media(min-width: 768px) {
    .badge {
        display: inline;
        border-radius: 15em;
        padding: 6.5px 15px;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 17px;
        letter-spacing: .25px
        
    }
    .badge.success {
        background: #def2d6;
        color: #086e37
    }
     .badge_danger{
        background:red;
    }
    .badge.failure {
        background: #ffe7df;
        color: #b0204b
    }
    .badge.primary,
    .badge.warning {
        background: #ffebcf;
        color: #d67300
    }
    
}

@media(min-width: 768px) {
    .confirm-dialog.discounted-items-alert .swal2-content {
        padding: 0
    }
    .confirm-dialog.discounted-items-alert .swal2-title {
        text-align: left;
        font-size: calc(var(--font-title) - 2px);
        font-weight: 500
    }
    .confirm-dialog.discounted-items-alert .swal2-html-container {
        text-align: left;
        margin: 0 30px;
        font-size: 14px
    }
    .firebaseui-dialog {
        display: flex !important;
        flex-direction: row;
        position: relative !important;
        top: 25px !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 100px !important;
        height: min-content;
        width: min-content;
        margin: 0 auto !important;
        background: #ffebcf;
        border: 1px solid #f8bd79;
        border-radius: 8px;
        padding: 10px 15px 10px 15px
    }
    .firebaseui-dialog .firebaseui-dialog-icon-wrapper {
        display: flex;
        align-items: center;
        min-height: unset
    }
    .firebaseui-dialog .firebaseui-dialog-icon-wrapper .mdl-spinner {
        background-image: url("/images/spinner.svg");
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        background-position: center
    }
    .firebaseui-dialog .firebaseui-dialog-icon-wrapper .mdl-spinner__layer {
        display: none
    }
    .firebaseui-dialog .firebaseui-progress-dialog-loading-icon {
        margin-right: 10px !important
    }
    .firebaseui-dialog .firebaseui-progress-dialog-message {
        display: flex;
        align-items: center;
        min-height: unset;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .1px;
        text-align: center;
        color: #d67300
    }
    .checkout-widget {
        padding: 0 !important;
        display: flex;
        flex-flow: column;
        height: calc(100vh - 240px);
        font-family: var(--font-family);
        font-style: normal;
        box-sizing: border-box
    }
    .checkout-widget .spinner-container {
        margin-top: 120px
    }
    .checkout-widget img {
        object-fit: cover
    }
    .checkout-widget input[type=text] {
        padding: 13px 22px;
        border-radius: 8px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .5px
    }
    .checkout-widget .checkout-header {
        font-size: calc(var(--font-title) + 1px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e;
        padding: 21px 32px
    }
    .checkout-widget .checkout-header .close-icon {
        position: absolute;
        top: 22px;
        right: 28px;
        width: 15px;
        cursor: pointer
    }
    .checkout-widget .firebaseui-phone-number .firebaseui-country-selector {
        padding-top: 10px;
        height: auto !important
    }
    .checkout-widget .firebaseui-phone-number button {
        box-shadow: none !important
    }
    .checkout-widget .form {
        padding-top: 10px;
        width: 90%;
        margin: 0 auto
    }
    .checkout-widget .body {
        margin-top: 20px
    }
    .checkout-widget .sections {
        display: flex;
        flex-grow: 1;
        flex-flow: column;
        justify-content: space-between;
        margin-top: 30px;
        padding: 0 32px;
        height: 100%
    }
    .checkout-widget .sections div:only-child {
        display: grid;
        flex-flow: column;
        height: 100%
    }
    .checkout-widget .sections .title {
        text-align: center
    }
    .checkout-widget .sections .title .header {
        margin-top: 11px;
        display: block;
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 27.3px;
        color: #27283e
    }
    .checkout-widget .sections .title .subtitle {
        display: block;
        width: 90%;
        margin: auto;
        margin-top: 6px;
        margin-bottom: 11px;
        box-sizing: border-box;
        padding: 0 32px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .5px;
        color: #757575
    }
    .checkout-widget .sections .display-name .subtitle {
        width: 70%;
        margin-bottom: 0
    }
    .checkout-widget .sections .icon {
        margin: 0 auto;
        height: 80px;
        width: 80px;
        background-repeat: no-repeat;
        background-position: center
    }
    .checkout-widget .sections .icon.customer-display-name {
        background-image: url("/images/customer-name-icon-desktop.svg")
    }
    .checkout-widget .sections .icon.coupon {
        background-image: url("/images/coupon-icon-desktop.svg")
    }
    .checkout-widget .sections .icon.comment {
        background-image: url("/images/comment-icon.svg")
    }
    .checkout-widget .sections .icon.payment {
        background-image: url("/images/payment-icon-desktop.svg")
    }
    .checkout-widget .sections .update-display-name {
        margin-top: 35px
    }
    .checkout-widget .sections .custom-coupon {
        display: grid !important;
        grid-auto-flow: column;
        grid-template-columns: 1fr min-content
    }
    .checkout-widget .sections .custom-coupon input {
        border-radius: 8px 0 0 8px
    }
    .checkout-widget .sections .custom-coupon .apply-btn {
        position: relative;
        border: 1px solid #e0e0e0;
        border-left: none;
        cursor: pointer;
        border-radius: 0 8px 8px 0;
        display: flex;
        height: calc(100% - 2px);
        justify-content: center;
        align-items: center;
        padding: 0px 22px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 400;
        letter-spacing: 1px;
        background-color: #f5f5f5
    }
    .checkout-widget .sections .suggested-coupon {
        display: grid;
        grid-template-areas: "zigzag content";
        grid-template-columns: 12px 1fr;
        border-top: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        background-color: #ffffff;
        box-shadow: 0px 0px 8px 1px rgba(48, 47, 58, .1)
    }
    .checkout-widget .sections .suggested-coupon .content {
        grid-area: content
    }
    .checkout-widget .sections .suggested-coupon .zigzag {
        grid-area: zigzag;
        width: 12px;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 47%, #e9e9e9 47%, #e9e9e9 52%, #ffffff 52%), linear-gradient(315deg, #ffffff 47%, #e9e9e9 47%, #e9e9e9 52%, rgba(225, 225, 225, 0.3) 52%);
        background-repeat: repeat-y;
        background-size: 23px 23px
    }
    .checkout-widget .sections .suggested-coupon .content {
        display: grid;
        align-items: center;
        grid-template-rows: repeat(3, min-content);
        grid-template-columns: 1fr min-content;
        grid-template-areas: "name          actions" "description   actions" "discount      actions";
        gap: 0px 5px;
        color: #27283e;
        margin-left: 10px
    }
    .checkout-widget .sections .suggested-coupon .content .name {
        grid-area: name;
        font-family: "IBM Plex";
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 1.25px;
        text-align: left;
        color: #27283e;
        margin-top: 15px
    }
    .checkout-widget .sections .suggested-coupon .content .description {
        grid-area: description;
        min-height: 34px;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        color: #757575;
        margin-top: 8px;
        margin-bottom: 8px
    }
    .checkout-widget .sections .suggested-coupon .content .discount {
        grid-area: discount;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: .1px;
        text-align: left;
        color: #27283e;
        text-transform: lowercase;
        margin-bottom: 13px
    }
    .checkout-widget .sections .suggested-coupon .content .actions {
        grid-area: actions
    }
    .checkout-widget .sections .suggested-coupon .content .actions button {
        padding: 4px 14px;
        margin-right: 15px;
        margin-left: 15px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 1px;
        color: #4cbba1;
        background-color: #ffffff;
        border: 2px solid #4cbba1;
        border-radius: 8px;
        cursor: pointer
    }
    .checkout-widget .sections .applied-coupon {
        display: grid;
        grid-template-areas: "zigzag content";
        grid-template-columns: 12px 1fr;
        border-top: 1px solid #4cbba1;
        border-right: 1px solid #4cbba1;
        border-bottom: 1px solid #4cbba1;
        background-color: #eff8f9;
        box-shadow: 0px 0px 8px 1px rgba(48, 47, 58, .1)
    }
    .checkout-widget .sections .applied-coupon .content {
        grid-area: content
    }
    .checkout-widget .sections .applied-coupon .zigzag {
        grid-area: zigzag;
        width: 12px;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 47%, #4cbba1 47%, #4cbba1 52%, #eff8f9 52%), linear-gradient(315deg, #eff8f9 47%, #4cbba1 47%, #4cbba1 52%, rgba(225, 225, 225, 0.3) 52%);
        background-repeat: repeat-y;
        background-size: 23px 23px
    }
    .checkout-widget .sections .applied-coupon .content {
        display: grid;
        align-items: center;
        margin-left: 10px;
        grid-template-rows: min-content 1fr min-content min-content;
        grid-template-columns: 1fr min-content;
        grid-template-areas: "name      icon" "desc      icon" "discount  icon" "actions   icon"
    }
    .checkout-widget .sections .applied-coupon .content .name {
        grid-area: name;
        font-family: "IBM Plex";
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 2.2px;
        text-align: left;
        color: #27283e;
        margin-top: 15px
    }
    .checkout-widget .sections .applied-coupon .content .description {
        grid-area: desc;
        max-height: 34px;
        min-height: 48px;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        margin-top: 5px;
        margin-bottom: 4px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        color: #757575
    }
    .checkout-widget .sections .applied-coupon .content .description .learn-more {
        color: #086e37;
        cursor: pointer;
        letter-spacing: 0;
        white-space: nowrap
    }
    .checkout-widget .sections .applied-coupon .content .discount {
        grid-area: discount;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: .5px;
        text-align: left;
        color: #27283e;
        text-transform: uppercase
    }
    .checkout-widget .sections .applied-coupon .content .icon {
        grid-area: icon;
        width: 16px;
        height: 16px;
        background-color: #4cbba1;
        border-radius: 50%;
        padding: 8px;
        margin-right: 24px;
        margin-left: 24px
    }
    .checkout-widget .sections .applied-coupon .content .actions {
        grid-area: actions
    }
    .checkout-widget .sections .applied-coupon .content .actions button {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 1px;
        margin-top: 16px;
        margin-bottom: 17px;
        padding: 0;
        color: #4cbba1;
        background-color: #eff8f9;
        box-shadow: none;
        cursor: pointer
    }
    .checkout-widget .sections .ineligible-coupon {
        margin: 15px 0px;
        display: grid;
        grid-template-areas: "icon     description" ".        reset";
        grid-template-columns: min-content 1fr;
        gap: 15px 10px;
        padding: 19px 20px 20px 19px;
        background: #fef4f0
    }
    .checkout-widget .sections .ineligible-coupon .error.icon {
        grid-area: icon;
        width: 22px !important;
        height: 20px !important
    }
    .checkout-widget .sections .ineligible-coupon .description {
        grid-area: description;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: .1px;
        text-align: left;
        color: #27283e
    }
    .checkout-widget .sections .ineligible-coupon .reset {
        grid-area: reset;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: normal;
        line-height: 16px;
        letter-spacing: 1.5px;
        text-align: left;
        color: #b0204b;
        text-transform: uppercase;
        cursor: pointer
    }
    .checkout-widget .sections .use-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 4px);
        line-height: 19px;
        text-align: center;
        color: #4cbba1;
        margin-top: 35px;
        cursor: pointer
    }
    .checkout-widget .sections .redeem-coupon .coupons {
        margin: 0;
        margin-top: 32px;
        padding-bottom: 20px;
        grid-gap: 10px;
        display: flex;
        flex-flow: column
    }
    .checkout-widget .sections .redeem-coupon .coupons .recommended-coupon {
        margin: 24px 25px 0 25px !important;
        text-transform: uppercase;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        line-height: 15.6px;
        letter-spacing: 1.5px;
        color: #d67300
    }
    .checkout-widget .sections .redeem-coupon .coupons .note {
        font-size: calc(var(--font-title) - 5px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        font-family: var(--font-family);
        letter-spacing: unset;
        margin: unset;
        text-transform: unset;
        color: #27283e;
        padding: 0 15px;
        margin: 0 20px !important
    }
    .checkout-widget .sections .redeem-coupon .coupons .note .learn-more {
        color: #d67300;
        cursor: pointer;
        white-space: nowrap
    }
    .checkout-widget .sections .comments .add-comments textarea {
        padding: 15px 16px 25px 16px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .25px
    }
    .checkout-widget .sections .comments .add-comments .actions {
        margin-top: 16px
    }
    .checkout-widget .sections .comments .add-comments .actions .cancel {
        display: none
    }
    .checkout-widget .sections .comments .add-comments .actions .clear {
        cursor: pointer;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        line-height: 15.6px;
        letter-spacing: 1.5px;
        color: #4cbba1
    }
    .checkout-widget .sections .comments .add-comments .form-input {
        margin: 0;
        padding: 0
    }
    .checkout-widget .sections .comments .body {
        display: flex;
        flex-flow: column;
        grid-gap: 19px
    }
    .checkout-widget .sections .comments .saved-comments {
        display: flex;
        flex-flow: column;
        grid-gap: 15px
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment {
        display: flex;
        flex-flow: row;
        padding: 14px 15px 12px 13px;
        border-radius: 8px;
        border: 1px solid #e0e0e0
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment input[type=radio] {
        cursor: pointer;
        display: none
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%;
        color: #27283e;
        letter-spacing: .1px;
        cursor: pointer
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 14px;
        height: 14px
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment .comment {
        width: 100%
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment.selected {
        border: 1px solid #4cbba1
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment input[type=radio]+label {
        margin-left: 27px
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment input[type=radio]+label::before {
        top: 2px;
        left: -27px
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment .icon {
        width: 24px;
        height: 24px;
        margin: 0
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment .icon.edit {
        margin-left: auto;
        margin-right: 12px;
        background-image: url("/images/pen-icon.svg")
    }
    .checkout-widget .sections .comments .saved-comments .saved-comment .icon.remove {
        background-image: url("/images/trash-icon.svg")
    }
    .checkout-widget .sections .comments .add-new-comment {
        cursor: pointer;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 21px;
        letter-spacing: .25px;
        color: #4cbba1
    }
    .checkout-widget .sections .payment .payment-types {
        display: flex;
        flex-flow: column;
        grid-gap: 14px
    }
    .checkout-widget .sections .payment .payment-types .payment-type {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 14.5px
    }
    .checkout-widget .sections .payment .payment-types .payment-type input[type=radio] {
        cursor: pointer;
        display: none
    }
    .checkout-widget .sections .payment .payment-types .payment-type input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%;
        color: #27283e;
        letter-spacing: .1px;
        cursor: pointer
    }
    .checkout-widget .sections .payment .payment-types .payment-type input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 14px;
        height: 14px
    }
    .checkout-widget .sections .payment .payment-types .payment-type input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .checkout-widget .sections .payment .payment-types .payment-type.selected {
        border: 1px solid #4cbba1
    }
    .checkout-widget .sections .payment .payment-types .payment-type label {
        white-space: nowrap;
        display: flex;
        width: 100%
    }
    .checkout-widget .sections .payment .payment-types .powered-by-stripe {
        display: flex;
        margin-top: 2px
    }
    .checkout-widget .sections .payment .payment-types .powered-by-stripe .description {
        padding-right: 10px;
        font-size: calc(var(--font-title) - 6px);
        font-weight: normal;
        line-height: 16px;
        letter-spacing: .25px;
        color: #757575
    }
    .checkout-widget .sections .payment .payment-types .powered-by-stripe .logo {
        margin: auto 0
    }
    .checkout-widget .sections .order-view-widget {
        margin-top: -25px;
        display: flex;
        flex-flow: column;
        grid-gap: 30px
    }
    .checkout-widget .sections .order-view-widget .order-summary,
    .checkout-widget .sections .order-view-widget .cart-summary {
        margin: 0
    }
    .checkout-widget .sections form>.form-items {
        grid-gap: 16px
    }
    .checkout-widget .alert {
        margin: 10px 0;
        box-shadow: none
    }
    .checkout-widget .step-buttons {
        display: grid;
        grid-gap: 6px;
        grid-template-areas: "previous continue";
        grid-auto-flow: column;
        padding-top: 55px;
        padding-bottom: 32px;
        margin-top: auto;
        margin-left: auto
    }
    .checkout-widget .step-buttons .button,
    .checkout-widget .step-buttons button.place-order,
    .checkout-widget .step-buttons button.continue,
    .checkout-widget .step-buttons button.previous {
        width: 100%;
        font-size: calc(var(--font-title) - 4px);
        padding: 12px 20px;
        text-transform: uppercase
    }
    .checkout-widget .step-buttons .spin.icon {
        margin: 0;
        margin-right: 7px;
        height: unset;
        width: unset
    }
    .checkout-widget .step-buttons button.previous {
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        line-height: 15.6px;
        letter-spacing: 1.5px;
        grid-area: previous;
        background-color: transparent;
        box-shadow: none;
        color: #757575
    }
    .checkout-widget .step-buttons button.continue {
        grid-area: continue;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        line-height: 15.6px;
        letter-spacing: 1.5px;
        background-color: #4cbba1;
        color: var(--button-success-fg);
        width: max-content;
        border-radius: 8px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .session-create-modal {
        width: 450px !important
    }
    .session-create-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .session-create-modal>.header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .session-create-modal>.header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .session-create-modal .main-display .collection-type-selector {
        margin-bottom: 32px;
        padding: 0 32px
    }
    .session-create-modal .main-display .collection-type-selector .title {
        display: none
    }
    .session-create-modal .main-display .collection-type-selector .collection-types {
        display: grid;
        gap: 16px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min-content 1fr min-content;
        gap: 15px;
        padding: 15px 9px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        cursor: pointer;
        padding: 20px 25px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type .radio {
        padding: 6.5px;
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-self: center;
        position: relative;
        left: 3px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type .text {
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        color: #27283e;
        display: flex;
        align-self: center;
        letter-spacing: .4px
    }
    .session-create-modal .main-display .collection-type-selector .collection-types .collection-type .text {
        font-weight: 500;
        letter-spacing: .4px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector {
        margin-bottom: 30px;
        padding: 0 32px;
        display: grid;
        grid-template-areas: "title       image" "date-list   date-list";
        grid-template-columns: 1fr max-content
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .title {
        grid-area: title;
        display: flex;
        align-self: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 4px);
        color: #27283e;
        margin-bottom: 25px;
        margin-top: 11px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .image {
        grid-area: image;
        position: relative;
        top: 7px;
        right: -7px;
        width: 39px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .third-party-delivery-banner {
        display: flex;
        flex-flow: row;
        grid-gap: 7px;
        width: 100%;
        background: #ffebcf;
        border-radius: 4px;
        padding: 16px;
        padding-right: 12px;
        box-sizing: border-box;
        margin-bottom: 8px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .third-party-delivery-banner .message {
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 16.9px;
        letter-spacing: .4px;
        margin: 0
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .third-party-delivery-banner .message span {
        font-weight: 500;
        color: #d67300
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .third-party-delivery-banner .arrow-link {
        cursor: pointer
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .collection-dates-and-times {
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll;
        max-height: calc(100vh - 498px);
        grid-area: date-list
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .collection-dates-and-times::-webkit-scrollbar {
        width: 5px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .collection-dates-and-times::-webkit-scrollbar-track {
        background: transparent
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .collection-dates-and-times::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .session-create-modal .main-display .session-create .collection-date-and-time-selector .holiday-info {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        margin-bottom: 8px;
        color: #27283e;
        border-radius: 4px;
        padding: 10px;
        background: #ffebcf
    }
    .session-create-modal .main-display .session-create .edit-delivery-address-widget {
        padding-bottom: 100px
    }
    .session-create-modal .main-display .session-create .edit-delivery-address-widget .invalid {
        border-color: #e0e0e0 !important
    }
    .session-create-modal .main-display .session-create .action-buttons {
        display: grid;
        grid-gap: 17px;
        padding: 0 32px;
        box-sizing: border-box;
        width: 100%;
        padding: 15px 32px;
        padding-bottom: 32px
    }
    .session-create-modal .main-display .session-create .action-buttons .start-order {
        background: #4cbba1;
        color: #ffffff;
        width: 100%;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        letter-spacing: 1.5px;
        padding: 14px
    }
    .session-create-modal .main-display .session-create .action-buttons .start-order.disabled {
        opacity: .5;
        background: #4cbba1 !important;
        color: #ffffff !important;
        border-color: unset !important;
        cursor: not-allowed
    }
}

@media(min-width: 768px) {
    .loyalty-card-widget {
        position: relative;
        padding-top: 62.5%;
        width: 100%;
        max-width: 500px;
        border-radius: 10px;
        box-shadow: 1px 3px 4px 1px rgba(0, 0, 0, .25)
    }
    .loyalty-card-widget img,
    .loyalty-card-widget .imgix img {
        width: 100%;
        border-radius: 10px;
        position: absolute;
        top: 0
    }
    .loyalty-card-widget .details {
        position: absolute;
        top: 0;
        margin: 0 26.5px;
        width: calc(100% - 53px)
    }
    .loyalty-card-widget .details .balance {
        margin-top: 12%;
        font-family: "larabie";
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) + 5px);
        color: #ffffff;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, .8);
        letter-spacing: 1.3px;
        margin-left: 4.5px
    }
    .loyalty-card-widget .details .count-progress {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-gap: 5px;
        margin-top: 15%
    }
    .loyalty-card-widget .details .count-progress .count {
        background-color: #e0e0e0;
        border-radius: 10px;
        height: 10px;
        box-shadow: inset 0px 2px 4px rgba(0, 0, 0, .29)
    }
    .loyalty-card-widget .details .count-progress .count.active {
        background-color: #33d169;
        border: 1px solid rgba(0, 0, 0, .21);
        box-shadow: inset 0px -2px 4px rgba(0, 0, 0, .2), inset 0px -3px 3px rgba(0, 0, 0, .5)
    }
    .loyalty-card-widget .details .customer-info {
        margin-top: 9%;
        font-family: "larabie";
        font-style: normal;
        font-weight: 500;
        font-size: font-size: var(--font-title);
        color: #ffffff;
        text-shadow: 1px 1px 1px #363636;
        line-height: 28px;
        text-transform: uppercase;
        margin-left: 3px;
        letter-spacing: .3px
    }
    .loyalty-card-widget .details .customer-info .name {
        -webkit-line-clamp: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .pizza-widget {
        display: flex;
        flex-flow: column;
        max-height: calc(100vh - 240px)
    }
    .pizza-widget .item-body {
        padding-bottom: 72.25px;
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll
    }
    .pizza-widget .item-body::-webkit-scrollbar {
        width: 5px
    }
    .pizza-widget .item-body::-webkit-scrollbar-track {
        background: transparent
    }
    .pizza-widget .item-body::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .pizza-widget .item-body::-webkit-scrollbar {
        width: 0
    }
    .pizza-widget .item-body .close-icon {
        position: absolute;
        top: 25px;
        right: 8px;
        margin-right: 19px;
        background: #ffffff;
        width: 16px;
        padding: 7px;
        border-radius: 100%;
        z-index: 2;
        cursor: pointer
    }
    .pizza-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 23px;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .pizza-widget .item-image.no-image {
        margin-top: unset
    }
    .pizza-widget .item-name {
        position: sticky;
        top: 0;
        background: #ffffff;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) + 6px);
        font-weight: 700;
        line-height: 31.2px;
        color: #27283e;
        z-index: 1
    }
    .pizza-widget .item-name::before {
        content: "";
        display: block;
        height: 16px;
        position: sticky;
        -webkit-position: sticky;
        top: 57.2px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, .14)
    }
    .pizza-widget .item-name.no-image::before {
        margin-top: 10px
    }
    .pizza-widget .item-name>.container {
        background-color: #ffffff;
        padding: 25px 32px;
        padding-bottom: 18px;
        position: sticky;
        -webkit-position: sticky;
        top: 0px;
        margin-top: -16px;
        z-index: 3
    }
    .pizza-widget .item-details {
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        padding: 0 32px
    }
    .pizza-widget .item-details * {
        margin: 0
    }
    .pizza-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .pizza-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 17px;
        margin-bottom: 16px
    }
    .pizza-widget .item-details .item-price-and-sold-out .item-price {
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        letter-spacing: .5px;
        color: #27283e
    }
    .pizza-widget .item-details .item-price-and-sold-out .item-sold-out,
    .pizza-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .pizza-widget .pizza {
        padding: 28px 0
    }
    .pizza-widget .actions .add-to-cart-widget {
        padding: 24px 30px 24px 30px
    }
    .pizza-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        z-index: 2;
        display: flex;
        flex-direction: row
    }
    .pizza-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .pizza-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .basic-item-widget {
        display: flex;
        flex-flow: column;
        max-height: calc(100vh - 240px)
    }
    .basic-item-widget .item-body {
        padding-bottom: 72.25px;
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll
    }
    .basic-item-widget .item-body::-webkit-scrollbar {
        width: 5px
    }
    .basic-item-widget .item-body::-webkit-scrollbar-track {
        background: transparent
    }
    .basic-item-widget .item-body::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .basic-item-widget .item-body::-webkit-scrollbar {
        width: 0
    }
    .basic-item-widget .item-body .close-icon {
        position: absolute;
        top: 25px;
        right: 8px;
        margin-right: 19px;
        background: #ffffff;
        width: 16px;
        padding: 7px;
        border-radius: 100%;
        z-index: 2;
        cursor: pointer
    }
    .basic-item-widget .item-body .close-icon.no-image {
        background: #eeeeee;
        top: 23px;
        box-shadow: 0px 2px 2px rgba(49, 48, 62, .08), 0px 6px 10px rgba(49, 48, 62, .1)
    }
    .basic-item-widget .item-image.no-image {
        margin-top: unset
    }
    .basic-item-widget .item-name {
        position: sticky;
        top: 0;
        background: #ffffff;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) + 6px);
        font-weight: 700;
        line-height: 31.2px;
        color: #27283e;
        z-index: 1
    }
    .basic-item-widget .item-name::before {
        content: "";
        display: block;
        height: 16px;
        position: sticky;
        -webkit-position: sticky;
        top: 57.2px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, .14)
    }
    .basic-item-widget .item-name.no-image::before {
        margin-top: 10px
    }
    .basic-item-widget .item-name>.container {
        background-color: #ffffff;
        padding: 25px 32px;
        padding-bottom: 18px;
        position: sticky;
        -webkit-position: sticky;
        top: 0px;
        margin-top: -16px;
        z-index: 3
    }
    .basic-item-widget .item-details {
        font-family: var(--font-family);
        font-style: normal;
        background: #fff;
        padding: 0 32px
    }
    .basic-item-widget .item-details * {
        margin: 0
    }
    .basic-item-widget .item-details .item-description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #757575
    }
    .basic-item-widget .item-details .item-price-and-sold-out {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        padding-top: 17px;
        margin-bottom: 16px
    }
    .basic-item-widget .item-details .item-price-and-sold-out .item-price {
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        letter-spacing: .5px;
        color: #27283e
    }
    .basic-item-widget .item-details .item-price-and-sold-out .item-sold-out,
    .basic-item-widget .item-details .item-price-and-sold-out .item-unavailable {
        background: #e0e0e0;
        padding: 2px 8px;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e;
        border-radius: 4px;
        margin: 0 16px
    }
    .basic-item-widget .modifiers {
        margin-top: 30.5px
    }
    .basic-item-widget .actions .add-to-cart-widget {
        padding: 24px 30px 24px 30px
    }
    .basic-item-widget .spinner-container {
        position: absolute;
        top: 42px;
        left: calc(50% - 280px / 2);
        background: #ffebcf;
        border: 1px solid #f8bd79;
        box-sizing: border-box;
        border-radius: 8px;
        height: 51px;
        gap: 10px;
        padding: 14px;
        z-index: 2;
        display: flex;
        flex-direction: row
    }
    .basic-item-widget .spinner-container .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        text-align: center;
        letter-spacing: .1px;
        color: #d67300
    }
    .basic-item-widget .spinner-container .spinner {
        animation: spin 2s linear infinite
    }
}

/*@media(min-width: 768px) {*/
    .footer-widget {
        background-color: var(--color-footer);
        height: 150px;
    }
    .footer-widget .wrapper {
        max-width: 1280px;
        height: calc(250px - 112px);
        margin: 0 auto;
        display: grid;
        grid-template-columns: min-content 1fr max-content;
        padding: 16px 10px
        padding-bottom:20px;
        padding-top:20px;
        padding-right:20px;
        padding-left:20px;
    }
    .footer-widget .wrapper .powered-by .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        letter-spacing: 1.7px;
        color: #ffffff
    }
    .footer-widget .wrapper .content {
        margin-left: 17%;
        margin-top: 0px
    }
    .footer-widget .wrapper .content .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 1px);
        font-style: normal;
        font-weight: 500;
        letter-spacing: .15px;
        line-height: 25px;
        color: #ffffff;
        width: 55%;
        margin-bottom: 28px
    }
    .footer-widget .wrapper .content .cta {
        text-decoration: none;
        border: 2px solid #4cbba1;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 500;
        letter-spacing: 1.4px;
        color: #4cbba1;
        width: fit-content;
        padding: 10px 18px;
        text-align: center;
        border-radius: 8px
    }
    .footer-widget .wrapper .links {
        display: flex;
        gap: 16px
    }
    .footer-widget .wrapper .links>h3 {
        text-decoration: none;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 52px;
        letter-spacing: .47px;
        color: #ffffff
    }
    .footer-widget .wrapper .title-footer {

        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;


        color: #ffffff
    }
/*}*/

@media(min-width: 768px) {
    .restaurant-header-widget,
    .store-header-widget {
        display: flex;
        flex-direction: horizontal;
        justify-content: space-between;
        align-items: center
    }
    .restaurant-header-widget .name,
    .store-header-widget .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 2px);
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        text-align: left;
        color: var(--color-menu-text)
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .suburbs-list-widget {
        padding: 32px;
        padding-top: 0;
        display: grid;
        grid-template-areas: "title             image" "suburb-search     suburb-search" "suburb-list       suburb-list";
        grid-template-columns: 1fr max-content;
        background: #ffffff
    }
    .suburbs-list-widget .title {
        grid-area: title;
        display: flex;
        align-self: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 4px);
        color: #27283e;
        margin-bottom: 25px;
        margin-top: 11px
    }
    .suburbs-list-widget .image {
        grid-area: image;
        position: relative;
        top: 7px;
        right: -7px;
        width: 39px
    }
    .suburbs-list-widget .suburb-search {
        grid-area: suburb-search;
        position: relative
    }
    .suburbs-list-widget .suburb-search .search-icon {
        position: absolute;
        z-index: 1;
        top: 17px;
        left: 15px;
        opacity: .55;
        width: 16px
    }
    .suburbs-list-widget .suburb-search input {
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 2px);
        padding: 15px 42px;
        margin-bottom: 8px;
        outline: none;
        width: -webkit-fill-available;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        letter-spacing: .4px;
        color: #27283e
    }
    .suburbs-list-widget .suburbs {
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll;
        max-height: calc(100vh - 474px);
        grid-area: suburb-list;
        display: grid;
        gap: 9px
    }
    .suburbs-list-widget .suburbs::-webkit-scrollbar {
        width: 5px
    }
    .suburbs-list-widget .suburbs::-webkit-scrollbar-track {
        background: transparent
    }
    .suburbs-list-widget .suburbs::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .suburbs-list-widget .suburbs .no-suburb-found {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        color: #757575;
        text-align: center;
        margin-top: 30px
    }
    .suburbs-list-widget .suburbs .suburb {
        display: flex;
        justify-content: space-between;
        padding: 14px 9px 14px 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio] {
        cursor: pointer;
        display: none
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%;
        color: #27283e;
        letter-spacing: .1px;
        cursor: pointer
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 14px;
        height: 14px
    }
    .suburbs-list-widget .suburbs .suburb input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .suburbs-list-widget .suburbs .suburb .name .postcode {
        font-weight: 400;
        color: #757575;
        margin-left: 8px
    }
    .suburbs-list-widget .suburbs .suburb .delivery-charge {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        color: #757575;
        white-space: nowrap
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .edit-delivery-address-widget {
        padding: 0 32px;
        display: grid;
        grid-template-areas: "title          image" "edit-delivery  edit-delivery";
        grid-template-columns: 1fr max-content
    }
    .edit-delivery-address-widget .title {
        grid-area: title;
        display: flex;
        align-self: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 4px);
        color: #27283e;
        margin-bottom: 25px;
        margin-top: 11px
    }
    .edit-delivery-address-widget .image {
        grid-area: image;
        position: relative;
        top: 7px;
        right: -7px;
        width: 39px
    }
    .edit-delivery-address-widget .edit-delivery-address-body {
        grid-area: edit-delivery;
        background: #fafafa;
        font-size: calc(var(--font-title) - 5px);
        padding: 14px 16px 5px 16px;
        border-radius: 8px
    }
    .edit-delivery-address-widget .edit-delivery-address-body .form-items {
        grid-gap: 16px !important
    }
    .edit-delivery-address-widget .edit-delivery-address-body .form-item * {
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 22.5px;
        letter-spacing: .1px
    }
    .edit-delivery-address-widget .edit-delivery-address-body .form-item input {
        padding: 14px
    }
    .edit-delivery-address-widget .edit-delivery-address-body .form-item .invalid {
        border-color: #e0e0e0 !important
    }
    .edit-delivery-address-widget .edit-delivery-address-body .selected-suburb {
        color: #27283e;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 22.5px;
        letter-spacing: .1px;
        padding: 14px;
        background: #ffffff;
        background-image: url("/images/form-select-icon.svg");
        background-repeat: no-repeat;
        background-position: right 13px bottom 20px;
        background-position-y: center;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        cursor: pointer
    }
    .edit-delivery-address-widget .edit-delivery-address-body .subtitle {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 8px);
        margin: 0;
        margin-top: 18px;
        line-height: 16.9px;
        letter-spacing: .4px;
        color: #757575
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .update-delivery-address-widget {
        width: 450px !important;
        font-family: var(--font-family);
        font-style: normal;
        letter-spacing: .25px;
        color: #27283e;
        height: 100%
    }
    .update-delivery-address-widget .header-section {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99;
        padding: 0 32px
    }
    .update-delivery-address-widget .header-section .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .update-delivery-address-widget .header-section .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .update-delivery-address-widget .header-section .close-icon {
        width: 15px;
        margin-right: 5px
    }
    .update-delivery-address-widget .suburbs-list-widget {
        padding-top: 28px;
        padding-bottom: 72px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body {
        display: grid
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .edit-delivery-address-widget {
        background: #ffffff;
        padding-top: 17px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .edit-delivery-address-widget .edit-delivery-address-body {
        margin-bottom: 110px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .edit-delivery-address-widget .edit-delivery-address-body .invalid {
        border-color: #e0e0e0 !important
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .action-buttons {
        display: flex;
        flex-flow: row-reverse;
        gap: 17px;
        padding: 0 32px;
        box-sizing: border-box;
        width: 100%;
        padding: 24px 32px;
        padding-top: 0
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .action-buttons .update-address-button {
        background: #4cbba1;
        color: #fff;
        width: 100%;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        letter-spacing: 1.5px;
        padding: 14px
    }
    .update-delivery-address-widget .update-delivery-address-widget-body .action-buttons .cancel-order-button {
        background: #ffffff;
        border: 2px solid #4cbba1;
        color: #4cbba1;
        width: 100%;
        font-size: calc(var(--font-title) - 6px);
        font-weight: 500;
        letter-spacing: 1.5px;
        padding: 13px
    }
}

@media(min-width: 768px) {
    .swal2-modal {
        border-radius: 8px !important;
        width: 400px !important;
        padding: 0px !important;
        margin: 0 !important
    }
    .swal2-modal .swal2-header {
        position: relative;
        padding: 10px 32px
    }
    .swal2-modal .swal2-content {
        white-space: pre-wrap;
        padding: 0 32px
    }
    .swal2-modal .swal2-content #swal2-content {
        margin-bottom: 20px
    }
    .swal2-modal .swal2-content #swal2-content>b {
        font-weight: 700
    }
    .swal2-modal .swal2-title {
        justify-content: center;
        margin-top: 15px;
        width: 100%;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 2px);
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0px;
        color: #27283e
    }
    .swal2-modal .swal2-html-container {
        margin: 0 auto;
        position: relative;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        color: #27283e;
        text-align: center
    }
    .swal2-modal .swal2-actions {
        display: flex;
        gap: 8px;
        flex-direction: row-reverse;
        justify-content: space-between !important;
        padding: 28px;
        padding-top: 15px;
        padding-bottom: 20px;
        margin: 0;
        background: #fcfcfc;
        border-radius: 0px 0px 16px 16px;
        box-shadow: inset 0px 1px 0px #e8ecf1
    }
    .swal2-modal .swal2-actions button {
        font-family: "Poppins" !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 15.6px !important;
        letter-spacing: 1.5px !important;
        text-align: center !important;
        padding: 12px;
        text-transform: uppercase
    }
    .swal2-modal .swal2-actions .confirm-button {
        flex: 1;
        background: #4cbba1 !important;
        border-radius: 8px !important
    }
    .swal2-modal .swal2-actions .cancel-button {
        flex: 1;
        background: #fcfcfc !important;
        box-shadow: inset 0px 0px 1px 2px #e8ecf1 !important;
        border-radius: 8px !important;
        color: #757575
    }
}

@media(min-width: 768px) {
    .add-to-cart-widget {
        display: grid;
        background-color: linear-gradient(0deg, #ffffff, #ffffff);
        grid-template-columns: 1fr auto
    }
    .add-to-cart-widget .quantity {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 500;
        line-height: 23px;
        letter-spacing: .1px;
        align-self: center
    }
    .add-to-cart-widget .quantity label {
        display: none
    }
    .add-to-cart-widget .quantity .quantity-actions {
        display: flex;
        gap: 18px
    }
    .add-to-cart-widget .quantity .quantity-actions .inc-icon,
    .add-to-cart-widget .quantity .quantity-actions .dec-icon {
        width: 24px;
        text-align: center
    }
    .add-to-cart-widget .quantity .quantity-actions .number {
        grid-area: number;
        align-self: center
    }
    .add-to-cart-widget .total-price {
        display: none
    }
    .add-to-cart-widget>.add-to-cart-button {
        background: #4cbba1 !important;
        font-family: var(--font-family);
        border-radius: 8px;
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 1.5px;
        text-align: center;
        padding: 12px 17px 12px 17px;
        color: #ffffff
    }
    .add-to-cart-widget>.add-to-cart-button span {
        margin-left: .5em;
        font-weight: 700
    }
    .add-to-cart-widget>.add-to-cart-button.disabled {
        opacity: .5;
        color: #fff !important
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .deal-item .modifier-widget .header {
        background-color: transparent
    }
    .deal-item .modifier-widget .options {
        padding: 0 32px
    }
    .modifier-widget {
        font-family: var(--font-family);
        color: #27283e
    }
    .modifier-widget input[type=checkbox] {
        display: none
    }
    .modifier-widget input[type=checkbox]+label {
        position: relative;
        margin-left: 25px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%;
        font-style: normal;
        letter-spacing: .1px
    }
    .modifier-widget input[type=checkbox]+label::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -28px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        width: 16px;
        height: 16px
    }
    .modifier-widget input[type=checkbox]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1;
        background-image: url("/images/icon-check-light.svg");
        background-repeat: no-repeat;
        background-position: center
    }
    .modifier-widget input[type=radio] {
        cursor: pointer;
        display: none
    }
    .modifier-widget input[type=radio]+label {
        position: relative;
        margin-left: 25px;
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 500;
        line-height: 150%;
        color: #27283e;
        letter-spacing: .1px;
        cursor: pointer
    }
    .modifier-widget input[type=radio]+label::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -28px;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        width: 14px;
        height: 14px
    }
    .modifier-widget input[type=radio]:checked+label::before {
        background: #4cbba1;
        border: 1px solid #4cbba1
    }
    .modifier-widget .header {
        padding: 16px 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25.5px;
        background-color: #fafafa
    }
    .modifier-widget .header .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px
    }
    .modifier-widget .header .title .modifier-name {
        font-size: calc(var(--font-title) - 2px);
        font-weight: 700;
        margin-right: 8px
    }
    .modifier-widget .header .title .requiredness {
        padding: 0px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--font-title) - 6px);
        color: #757575;
        font-weight: 400;
        letter-spacing: .5px;
        line-height: 18px
    }
    .modifier-widget .header .title .selected::before {
        content: url("/images/green-check.svg");
        padding-right: 5px
    }
    .modifier-widget .header .title .required {
        color: #086e37
    }
    .modifier-widget .header .title .error {
        background-color: #ffe7df;
        color: #b0204b
    }
    .modifier-widget .header .max-quantity {
        color: #757575;
        font-weight: normal;
        font-size: calc(var(--font-title) - 5px);
        line-height: 22px;
        letter-spacing: .25px
    }
    .modifier-widget .options {
        padding: 32px;
        display: grid;
        grid-gap: 8px
    }
    .modifier-widget .options .option {
        display: grid;
        grid-template-columns: 1fr min-content min-content;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        cursor: pointer
    }
    .modifier-widget .options .option .option-form-input {
        width: 100%;
        padding: 14px;
        padding-right: 8px
    }
    .modifier-widget .options .option .wrapper {
        display: flex;
        grid-gap: 20px;
        height: fit-content;
        align-self: center;
        margin-right: 10px
    }
    .modifier-widget .options .option .wrapper .quantity {
        display: flex;
        grid-gap: 10px;
        font-size: calc(var(--font-title) - 1px);
        font-weight: 400
    }
    .modifier-widget .options .option .wrapper .quantity .inc-icon,
    .modifier-widget .options .option .wrapper .quantity .dec-icon {
        background: #eeeeee;
        width: 24px;
        border-radius: 50%;
        text-align: center;
        color: #3a3a4e
    }
    .modifier-widget .options .option .wrapper .extra-charge {
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 150%;
        white-space: nowrap;
        color: #757575;
        align-self: center
    }
    .modifier-widget .options .option.selected {
        border: 1px solid #4cbba1
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .pizza-customize-widget {
        display: flex;
        flex-flow: column
    }
    .pizza-customize-widget .item-header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99;
        padding: 20px 32px
    }
    .pizza-customize-widget .item-header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .pizza-customize-widget .item-header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .pizza-customize-widget .item-header .done-button {
        padding-top: 5px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 700;
        line-height: 16.9px;
        color: #4cbba1;
        cursor: pointer
    }
    .pizza-customize-widget .item-body {
        margin-bottom: 26px;
        overflow: hidden auto;
        background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll;
        max-height: calc(100vh - 330px)
    }
    .pizza-customize-widget .item-body::-webkit-scrollbar {
        width: 5px
    }
    .pizza-customize-widget .item-body::-webkit-scrollbar-track {
        background: transparent
    }
    .pizza-customize-widget .item-body::-webkit-scrollbar-thumb {
        background-color: #27283e50;
        border-radius: 20px
    }
    .pizza-customize-widget .item-body .modifiers {
        display: flex;
        flex-flow: column;
        grid-gap: 36px;
        margin-bottom: 8px;
        padding-top: 14px;
        overflow: auto
    }
    .pizza-customize-widget .item-body .modifiers .remove-toppings .extra-charge {
        display: none
    }
}

@media(min-width: 768px) {
    .table-booking-history-page {
        background: #fafafa
    }
    .table-booking-history-page.page>.header {
        padding: 0px;
        box-shadow: none
    }
    .table-booking-history-page .header {
        padding: 0
    }
    .table-booking-history-page .header .wrapper {
        position: relative;
        font-family: "Poppins"
    }
    .table-booking-history-page .header .wrapper .nav {
        display: none
    }
    .table-booking-history-page .header .wrapper .banner-image {
        position: relative;
        max-width: 1280px
    }
    .table-booking-history-page .header .wrapper .banner-image .mobile {
        display: none
    }
    .table-booking-history-page .header .wrapper .store-title {
        display: none
    }
    .table-booking-history-page .header .wrapper #page-title-anchor {
        display: none
    }
    .table-booking-history-page .wrapper .overlap {
        display: grid;
        row-gap: 32px;
        column-gap: 24px;
        position: relative;
        top: -150px;
        max-width: 630px;
        margin: 0px auto
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in {
        grid-area: 1/1/2/3;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .section {
        padding: 48px 59px
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .section .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 10px);
        font-style: normal;
        font-weight: 700;
        line-height: 44px;
        letter-spacing: 0px;
        text-align: center;
        color: #27283e;
        margin-bottom: 10px
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .section .sub-text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .15px;
        text-align: center;
        color: #757575;
        margin-bottom: 32px;
        padding: 0px 50px
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .section .protocols {
        display: grid;
        grid-template-columns: 160px 160px 160px;
        grid-gap: 16px;
        justify-items: center;
        justify-content: center
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .section .protocols .mobile {
        display: none
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .section .protocols .text {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: .15px;
        color: #27283e;
        margin: 0px
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .buttons {
        background: #eff8f9;
        padding: 32px 0px
    }
    .table-booking-history-page .wrapper .overlap .open-for-dine-in .buttons button {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 500;
        line-height: 23px;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        background: #1faa89;
        border-radius: 4px;
        padding: 9.5px 16px;
        margin: 0px auto
    }
    .table-booking-history-page .wrapper .overlap .location,
    .table-booking-history-page .wrapper .overlap .previous-booking {
        display: grid;
        grid-template-areas: "text icon" "sub-text icon";
        grid-template-columns: 1fr min-content;
        row-gap: 8px;
        column-gap: 10px;
        align-items: center;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        padding: 23px 24px
    }
    .table-booking-history-page .wrapper .overlap .location .text,
    .table-booking-history-page .wrapper .overlap .previous-booking .text {
        grid-area: text;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 6px);
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: #27283e
    }
    .table-booking-history-page .wrapper .overlap .location .sub-text,
    .table-booking-history-page .wrapper .overlap .previous-booking .sub-text {
        grid-area: sub-text;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .15px;
        color: #757575
    }
    .table-booking-history-page .wrapper .overlap .location .highlight,
    .table-booking-history-page .wrapper .overlap .previous-booking .highlight {
        color: #1faa89
    }
    .table-booking-history-page .wrapper .overlap .location img,
    .table-booking-history-page .wrapper .overlap .previous-booking img {
        grid-area: icon
    }
    .table-booking-history-page .wrapper .overlap .location {
        grid-area: 2/1/3/2
    }
    .table-booking-history-page .wrapper .overlap .location.grow {
        grid-column: 1/span 2
    }
    .table-booking-history-page .wrapper .overlap .previous-booking {
        grid-area: 2/2/3/3;
        cursor: pointer
    }
    .table-booking-history-page .wrapper .overlap .mobile {
        display: none
    }
    .table-booking-history-page .wrapper .banner {
        padding: 0
    }
    .table-booking-history-page .wrapper .banner .table-booking-title {
        display: none
    }
    .table-booking-history-page .wrapper .banner .table-booking-title.hide {
        display: none
    }
    .table-booking-history-page .wrapper .banner .not-available-banner {
        background: #ffe7df;
        padding: 22.5px 20px
    }
    .table-booking-history-page .wrapper .banner .not-available-banner .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19.5px;
        letter-spacing: .4px;
        color: #b0204b
    }
    .table-booking-history-page .wrapper .banner .not-available-banner .message b {
        font-weight: 600
    }
    .table-booking-history-page .wrapper .banner .book-table-banner {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        background: #ffebcf;
        padding: 16px 20px
    }
    .table-booking-history-page .wrapper .banner .book-table-banner .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 17px;
        color: #d67300
    }
    .table-booking-history-page .wrapper .banner .book-table-banner button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 5px);
        line-height: 16.9px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #d67300;
        background: #ffebcf;
        padding: 7.5px 16px;
        border: 1.5px solid #d67300;
        box-sizing: border-box;
        border-radius: 4px
    }
    .table-booking-history-page .wrapper .table-bookings {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 81px;
        margin-top: 44px
    }
    .table-booking-history-page .wrapper .table-bookings .section {
        margin-bottom: 24px
    }
    .table-booking-history-page .wrapper .table-bookings .section .heading {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) + 3px);
        line-height: 26px;
        color: #27283e;
        margin-bottom: 42px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking {
        display: grid;
        grid-template-areas: "booked-for status-icon" "customer customer" "details details" "hr hr" "status status";
        grid-template-columns: 1fr min-content;
        grid-template-rows: max-content;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        padding: 15px 16px 20px 16px;
        margin-bottom: 24px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .bookedFor {
        grid-area: booked-for;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 600;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e;
        margin-bottom: 7px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status-icon {
        grid-area: status-icon;
        margin-bottom: 7px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .customer {
        grid-area: customer;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 24px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 16px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .details {
        grid-area: details;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e;
        margin-bottom: 16px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking hr {
        grid-area: hr;
        width: 100%;
        border: 1px solid #e0e0e0;
        margin: 0px 0px 16px 0px
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status {
        grid-area: status;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #9e9e9e
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status b {
        font-weight: 600
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status .success {
        color: #086e37
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status .warning {
        color: #d67300
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking .status .danger {
        color: #b0204b
    }
    .table-booking-history-page .wrapper .table-bookings .section .table-booking:last-child {
        margin-bottom: 31px
    }
    .table-booking-history-page .wrapper .table-bookings .section.upcoming-table-bookings .empty-table-booking .message::after {
        content: "No upcoming bookings yet"
    }
    .table-booking-history-page .wrapper .table-bookings .section.past-table-bookings .empty-table-booking .message::after {
        content: "No previous bookings yet"
    }
    .table-booking-history-page .wrapper .table-bookings .section .empty-table-booking {
        text-align: center;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        padding: 32px 0px
    }
    .table-booking-history-page .wrapper .table-bookings .section .empty-table-booking .icon {
        margin: 0px auto 21.96px auto
    }
    .table-booking-history-page .wrapper .table-bookings .section .empty-table-booking .icon-mobile {
        display: none
    }
    .table-booking-history-page .wrapper .table-bookings .section .empty-table-booking .message {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: 14.5px;
        line-height: 17px;
        text-align: center;
        letter-spacing: .25px;
        color: #757575
    }
    .table-booking-history-page .wrapper .table-bookings .section:last-child {
        margin-bottom: 109px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .table-booking-page {
        background: #fafafa
    }
    .table-booking-page.page>.header .title {
        line-height: 20px
    }
    .table-booking-page form .form-items>.form-buttons {
        margin-top: 21px
    }
    .table-booking-page form .form-input input {
        font-size: calc(var(--font-title) - 4px);
        line-height: 21px;
        letter-spacing: 0px
    }
    .table-booking-page form .form-select-pax .label {
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px
    }
    .table-booking-page form .form-select-pax .sub-text {
        font-size: calc(var(--font-title) - 6px);
        line-height: 18px;
        letter-spacing: .25px;
        margin-bottom: 24px
    }
    .table-booking-page form .form-single-select-pill .label {
        font-size: calc(var(--font-title) - 4px);
        line-height: 30px
    }
    .table-booking-page form .form-single-select-pill.optional>.label::after {
        content: "(Optional)";
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 30px;
        letter-spacing: .5px;
        color: #757575;
        margin-left: 8px
    }
    .table-booking-page form .form-single-select-pill .option {
        font-size: calc(var(--font-title) - 4px);
        line-height: 25px;
        letter-spacing: .5px;
        padding: 8px 14px
    }
    .table-booking-page form .form-text-area label {
        font-size: calc(var(--font-title) - 4px);
        line-height: 50px
    }
    .table-booking-page form .form-text-area .sub-text {
        font-size: calc(var(--font-title) - 6px);
        line-height: 5px;
        letter-spacing: .25px
    }
    .table-booking-page form .form-text-area textarea {
        font-size: calc(var(--font-title) - 3px);
        letter-spacing: 0px
    }
    .table-booking-page form .form-select-icon input,
    .table-booking-page form .form-select-pax img {
        cursor: pointer
    }
    .table-booking-page form .form-buttons {
        display: flex;
        justify-content: flex-end;
        margin-top: 37px
    }
    .table-booking-page form .form-buttons button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        background: #4cbba1;
        border-radius: 8px;
        padding: 14px 42px
    }
    .table-booking-page form .form-buttons button.disabled {
        cursor: unset;
        opacity: .5;
        color: #fff !important;
        background: #4cbba1 !important
    }
    .table-booking-page .body>.wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 64.25px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        max-width: 799px;
        margin: 35px auto;
        padding: 37.5px 32px 32px 32px
    }
    .table-booking-summary-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .table-booking-summary-modal>.header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .table-booking-summary-modal>.header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .table-booking-summary-modal>.header .close-icon {
        width: 16px
    }
    .table-booking-summary-modal .buttons {
        display: flex;
        justify-content: flex-end;
        padding: 24px 32px
    }
    .table-booking-summary-modal .buttons .confirm-button {
        order: 2;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        line-height: 15.6px;
        text-align: center;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #fff;
        background: #4cbba1;
        border-radius: 8px;
        padding: 12px 20px
    }
    .table-booking-summary-modal .buttons .back-button {
        order: 1;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 6px);
        line-height: 15.6px;
        text-align: center;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #757575;
        background: #fff;
        border-radius: 8px;
        box-shadow: none;
        padding: 12px 20px
    }
}

@media(min-width: 768px) {
    .form-select-pax {
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        border-radius: 8px;
        background: #fff;
        padding: 20px 16px 16px 16px
    }
    .form-select-pax .label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 25px;
        color: #27283e;
        margin-bottom: 4px
    }
    .form-select-pax .sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575;
        margin-bottom: 12px
    }
    .form-select-pax .options {
        display: grid;
  grid-template-columns: 1fr 1fr 1fr;
    max-width: 100%;  
        column-gap: 16px;
        align-items: center;

    }
    .form-select-pax .options input {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 1px);
        line-height: 20px;
        color: #27283e;
        text-align: center;
        padding: 15px 0px
    }
    .form-select-pax .options input::-webkit-outer-spin-button,
    .form-select-pax .options input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0
    }
    .form-select-pax .options input[type=number] {
        -moz-appearance: textfield
    }
}

@media(min-width: 768px) {
    .form-single-select-pill .label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        line-height: 47px;
        color: #27283e;
        margin-bottom: 7px
    }
    .form-single-select-pill .options.large {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 8px;
        row-gap: 8px
    }
    .form-single-select-pill .options.small {
        display: flex;
        flex-wrap: wrap
    }
    .form-single-select-pill .options .option {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        color: #757575;
        background: #fff;
        border: 1.5px solid #e0e0e0;
        box-sizing: border-box;
        border-radius: 50px;
        cursor: pointer;
        margin: 0px 8px 8px 0px;
        padding: 8.5px 15px
    }
    .form-single-select-pill .options .option.selected {
        background: #4cbba1;
        color: #fff
    }
}

@media(min-width: 768px) {
    .customer-login-flow-widget {
        position: relative;
        display: grid;
        grid-template-rows: min-content 1fr;
        font-family: var(--font-family);
        font-style: normal;
        box-sizing: border-box;
        padding-bottom: 32px;
        /*height: calc(100vh - 240px)*/
    }
    .customer-login-flow-widget .top-header {
        display: grid;
        align-items: center;
        justify-content: space-between;
        padding: 23px 26px;
        box-sizing: border-box;
        grid-template-areas: "back-button step-indicator close-button"
    }
    .customer-login-flow-widget .top-header .back-button {
        grid-area: back-button;
        cursor: pointer
    }
    .customer-login-flow-widget .top-header .back-button img {
        height: 17px;
        width: 17px
    }
    .customer-login-flow-widget .top-header .close-button {
        grid-area: close-button;
        cursor: pointer
    }
    .customer-login-flow-widget .top-header .close-button img {
        height: 17px;
        width: 17px
    }
    .customer-login-flow-widget .top-header .step-indicator {
        grid-area: step-indicator;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 23px;
        letter-spacing: .1px;
        text-align: left;
        color: #757575
    }
    .customer-login-flow-widget .body {
        /*margin: 0 32px*/
    }
    .customer-login-flow-widget .body .intro {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 29px 0px 32px 0px
    }
    .customer-login-flow-widget .body .intro .title {
        margin-top: 7px;
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 27px;
        letter-spacing: 0px;
        text-align: center;
        color: #27283e
    }
    .customer-login-flow-widget .body .intro .subtitle {
        margin-top: 6px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .25px;
        text-align: center;
        color: #757575
    }
    .customer-login-flow-widget .form {
        padding-top: 10px;
        width: 90%;
        margin: 0 auto
    }
    .customer-login-flow-widget form {
        display: flex;
        flex-flow: column;
        padding-top: 0 !important;
        box-sizing: border-box;
        height: 100%
    }
    .customer-login-flow-widget form .form-items {
        padding-bottom: 10px;
        grid-gap: 20px
    }
    .customer-login-flow-widget form .form-items .form-input input {
        height: 52px;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 500;
        line-height: 23px;
        letter-spacing: .1px
    }
    .customer-login-flow-widget form .form-items .form-input input::placeholder {
        color: #9e9e9e;
        font-weight: normal;
        font-size: calc(var(--font-title) - 4px);
        line-height: 21px;
        letter-spacing: .15px
    }
    .customer-login-flow-widget form .form-items .form-input ::-webkit-input-placeholder {
        color: #757575
    }
    .customer-login-flow-widget form .form-items .form-input ::-moz-placeholder {
        color: #757575
    }
    .customer-login-flow-widget form .form-items .form-input :-ms-input-placeholder {
        color: #757575
    }
    .customer-login-flow-widget form .form-items .form-input :-moz-placeholder {
        color: #757575
    }
    .customer-login-flow-widget form .form-buttons {
        margin-top: auto
    }
    .customer-login-flow-widget button {
        width: 100%;
        margin: 16px 0;
        padding: 16px 20px;
        border-radius: 8px;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase
    }
    .customer-login-flow-widget button span {
        color: #ffffff
    }
    .customer-login-flow-widget button.disabled {
        background-color: #4cbba1 !important;
        opacity: .5;
        cursor: not-allowed
    }
    .customer-login-flow-widget .grecaptcha-badge {
        visibility: hidden
    }
    .customer-login-flow-widget #recaptcha-wrapper {
        position: fixed !important;
        bottom: 0;
        left: 50%;
        height: 75vh;
        overflow: auto;
        transform: translateX(-50%)
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .third-party-delivery-widget {
        font-family: var(--font-family);
        font-style: normal;
        display: flex;
        flex-flow: column;
        grid-gap: 16px
    }
    .third-party-delivery-widget a {
        width: 100%;
        height: 52px;
        box-sizing: border-box;
        text-decoration: none;
        border-radius: 8px;
        border: 2px solid #e0e0e0;
        text-align: center
    }
    .third-party-delivery-widget a .service-name {
        display: block;
        padding: 12px 0;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .25px;
        color: #27283e
    }
    .third-party-delivery-widget a .service-logo {
        display: block;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 14px 0
    }
    .third-party-delivery-widget a #ubereats {
        padding: 17px 0
    }
    .third-party-delivery-widget a #deliveroo {
        padding: 8px 0
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .third-party-delivery-services-modal {
        font-family: var(--font-family);
        font-style: normal;
        width: 450px !important;
        padding-bottom: 32px
    }
    .third-party-delivery-services-modal .header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .third-party-delivery-services-modal .header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .third-party-delivery-services-modal .header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .third-party-delivery-services-modal .section {
        padding: 32px;
        padding-top: 0px
    }
    .third-party-delivery-services-modal .section .unavailability-message {
        margin-top: 0;
        margin-bottom: 25px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 21px;
        letter-spacing: .25px;
        color: #27283e
    }
    .third-party-delivery-services-modal .section .get-order-message {
        margin-top: 0;
        margin-bottom: 25px;
        font-size: calc(var(--font-title) - 4px);
        font-weight: 700;
        line-height: 21px;
        color: #27283e
    }
    .third-party-delivery-services-modal .actions>.back-button {
        cursor: pointer;
        margin: 0px auto;
        padding: 0;
        background: none;
        box-shadow: none;
        font-size: calc(var(--font-title) - 5px);
        font-weight: 400;
        line-height: 16.9px;
        letter-spacing: 1px;
        color: #757575
    }
}

@media(min-width: 768px) {
    .table-booking-success-page.page>.header {
        padding: 0px;
        box-shadow: none
    }
    .table-booking-success-page .body .wrapper {
        margin-top: 90px
    }
    .table-booking-success-page .body .wrapper .banner {
        text-align: center;
        padding: 0px;
        margin-bottom: 30px
    }
    .table-booking-success-page .body .wrapper .banner .icon {
        margin-bottom: 14px
    }
    .table-booking-success-page .body .wrapper .banner .icon.mobile {
        display: none
    }
    .table-booking-success-page .body .wrapper .banner .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) + 14px);
        line-height: 50px;
        color: #27283e;
        margin-bottom: 16px
    }
    .table-booking-success-page .body .wrapper .banner .sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        text-align: center;
        letter-spacing: .25px;
        color: #757575
    }
    .table-booking-success-page .body .wrapper>.status {
        padding: 24px;
        margin: 32px 0px 24px 0px;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(146, 129, 129, .1);
        border-radius: 8px;
        max-width: 630px;
        margin: 0px auto 24px auto
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #f5f5f5;
        display: flex;
        margin-bottom: 16px
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar .progress.success {
        background-color: #086e37
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar .progress.danger {
        background-color: #b0204b
    }
    .table-booking-success-page .body .wrapper>.status .progress-bar .progress.warning {
        background-color: #d67300
    }
    .table-booking-success-page .body .wrapper>.status .caption {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px
    }
    .table-booking-success-page .body .wrapper>.status .caption .status {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 8px);
        line-height: 13px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #757575
    }
    .table-booking-success-page .body .wrapper>.status .caption .step {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #757575
    }
    .table-booking-success-page .body .wrapper>.status .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-success-page .body .wrapper>.status .sub-text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 17px;
        letter-spacing: .4px;
        color: #757575
    }
    .table-booking-success-page .body .wrapper .summary {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 24px;
        letter-spacing: .25px;
        color: #27283e;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        max-width: 630px;
        margin: 0px auto 48px auto;
        padding: 24px
    }
    .table-booking-success-page .body .wrapper .summary .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 21px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-success-page .body .wrapper .summary .contact-details,
    .table-booking-success-page .body .wrapper .summary .special-requests {
        margin-top: 15px
    }
    .table-booking-success-page .body .wrapper .buttons .view-menu-button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        text-align: center;
        letter-spacing: 1.25px;
        text-transform: uppercase;
        color: #fff;
        background: #4cbba1;
        border-radius: 8px;
        min-width: 335px;
        margin: 0px auto;
        padding: 14px 0px 13px 0px
    }
    .table-booking-success-page .body .wrapper .buttons .back-button {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 16.9px;
        text-align: center;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #757575;
        background: transparent;
        border-radius: 8px;
        box-shadow: none;
        min-width: 335px;
        padding: 14px 0px 13px 0px;
        margin: 10px auto 0px auto
    }
}

@media(min-width: 768px) {
    nav {
        grid-area: nav;
        display: flex;
        overflow-y: scroll;
        background-color: #fff;
        box-shadow: 0px 0px 3px rgba(104, 122, 155, .25);
        flex-direction: column;
        z-index: 999;
        width: 400px;
        padding-bottom: 10px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        margin-left: 50px;
        transform: translateX(120%);
        transition: transform 300ms;
        scrollbar-width: none;
        scrollbar-color: transparent transparent
    }
    nav::-webkit-scrollbar {
        width: 1px
    }
    nav::-webkit-scrollbar-track {
        background: transparent
    }
    nav::-webkit-scrollbar-thumb {
        background-color: transparent
    }
    nav.show {
        transform: none
    }
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 60px;
        margin: 0 20px;
        text-align: center
    }
    .profile .name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 1px);
        letter-spacing: 0px;
        color: #27283e;
        margin-top: 17px
    }
    .profile .email,
    .profile .phone-number {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        letter-spacing: .5px;
        line-height: 21px;
        color: #757575
    }
    .nav-links {
        display: grid;
        gap: 5px;
        padding: 0 32px;
        padding-top: 24px
    }
    .nav-links .link {
        display: flex;
        flex-direction: row;
        margin: 5px 0;
        padding: 17px;
        padding-left: 16px;
        align-items: center;
        cursor: pointer;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1)
    }
    .nav-links .link .icon {
        color: #92929d;
        font-size: calc(var(--font-title) + 3px);
        margin-right: 9px
    }
    .nav-links .link .label {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 21px;
        letter-spacing: .5px;
        color: #27283e;
        display: inline-block;
        white-space: nowrap
    }
    .powered-by-ordereats {
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: 70px
    }
    .powered-by-ordereats .text {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 5px);
        letter-spacing: .4px;
        line-height: 17px;
        color: #757575
    }
    .overlay.show {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .4);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 998
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .table-booking-edit-booking-details-widget .form-group .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 4px);
        line-height: 16px;
        color: #27283e;
        margin-bottom: 24px
    }
    .table-booking-edit-booking-details-widget .form-buttons {
        margin-top: 14px
    }
    .table-booking-date-picker-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .table-booking-date-picker-modal>.header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .table-booking-date-picker-modal>.header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .table-booking-date-picker-modal>.header .close-icon {
        width: 16px
    }
    .table-booking-date-picker-modal .note {
        background-color: #ffebcf;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 5px);
        line-height: 18px;
        color: #27283e;
        margin: 0 32px;
        padding: 10px
    }
    .table-booking-date-picker-modal .note .store-hours-link {
        color: #d67300;
        cursor: pointer
    }
    .table-booking-date-picker-modal>.date-picker-widget {
        margin: 17px 24px 0px 24px
    }
    .table-booking-date-picker-modal>.date-picker-widget {
        margin: 7px 86px 41px 86px
    }
    .table-booking-time-picker-modal>.header {
        display: flex;
        justify-content: space-between;
        padding: 32px;
        font-family: var(--font-family);
        font-style: normal;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 99
    }
    .table-booking-time-picker-modal>.header .title {
        font-size: calc(var(--font-title) + 3px);
        font-weight: 700;
        line-height: 24.7px;
        color: #27283e
    }
    .table-booking-time-picker-modal>.header .close-icon {
        width: 15px;
        position: relative;
        cursor: pointer;
        right: -4px
    }
    .table-booking-time-picker-modal>.header .close-icon {
        width: 16px
    }
    .table-booking-time-picker-modal .collection-times {
        padding: 32px;
        padding-top: 0px
    }
    .table-booking-time-picker-modal .collection-times .collection-time {
        display: flex;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        border-radius: 8px;
        align-items: center;
        margin-bottom: 8px;
        padding: 14.5px 12.5px;
        cursor: pointer
    }
    .table-booking-time-picker-modal .collection-times .collection-time input[type=radio] {
        filter: opacity(0.8);
        margin: 0px 14px 0px 0px
    }
    .table-booking-time-picker-modal .collection-times .collection-time .value {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: normal;
        font-size: calc(var(--font-title) - 3px);
        line-height: 21px;
        letter-spacing: .3px;
        color: #27283e
    }
}

@media(min-width: 768px) {
    .table-booking-edit-contact-details-widget .booking-details-banner {
        display: grid;
        grid-template-areas: "booked-for edit" "pax pax" "seating-area seating-area";
        grid-template-columns: 1fr min-content;
        background: #ffebcf;
        padding: 23px 24px 22.39px 24px
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .booked-for {
        grid-area: booked-for;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 27px;
        letter-spacing: .25px;
        color: #d67300
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .edit {
        grid-area: edit;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 5px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #d67300
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .pax {
        grid-area: pax;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 19px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-edit-contact-details-widget .booking-details-banner .seating-area {
        grid-area: seating-area;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 26px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-edit-contact-details-widget .form-group .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 4px);
        line-height: 16px;
        color: #27283e;
        margin-bottom: 24px
    }
    .table-booking-edit-contact-details-widget .form-buttons {
        margin-top: 20px
    }
}

@media(min-width: 768px) {
    .table-booking-summary-widget {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .25px;
        color: #27283e;
        background: #fff;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);
        border-radius: 8px;
        margin: 0px 32px 24px 32px;
        padding: 24px
    }
    .table-booking-summary-widget .section-name {
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 700;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22.5px;
        letter-spacing: .25px;
        color: #27283e
    }
    .table-booking-summary-widget .contact-details,
    .table-booking-summary-widget .special-requests {
        margin-top: 24px
    }
}

@media(min-width: 768px) {
    #toasts-container {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: grid;
        grid-gap: 15px;
        z-index: 1001
    }
    #toasts-container .wrapper {
        text-align: center
    }
    .toast {
        display: inline-grid;
        grid-template-columns: min-content max-content;
        font-family: var(--font-family);
        align-items: center;
        padding: 15px 20px;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0px 10px 16px rgba(49, 49, 59, .1)
    }
    .toast .icon {
        margin-top: -4px;
        margin-right: 10px
    }
    .toast .message {
        font-size: calc(var(--font-title) - 3px);
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0em;
        text-align: left;
        max-width: 60vw
    }
    .toast button.close {
        margin-left: 10px;
        padding: 0;
        border: 0;
        background-color: transparent;
        box-shadow: none;
        opacity: .5;
        color: #363636;
        font-size: 1.4rem
    }
    .toast.success {
        border: 1px solid #8bc1a4;
        background-color: var(--message-success-bg);
        color: var(--message-success-text)
    }
    .toast.info {
        border: 1px solid #d67300;
        background-color: var(--message-warning-bg);
        color: var(--message-warning-text)
    }
    .toast.error {
        border: 1px solid #d9657a;
        background-color: var(--message-error-bg);
        color: var(--message-error-text)
    }
    .toast.warning {
        background-color: var(--message-warning-bg);
        color: var(--message-warning-text)
    }
    .toast.loading {
        border: 1px solid #d67300;
        background-color: #ffebcf;
        color: #d67300
    }
    .toast.loading .spinner {
        width: 22px;
        height: 22px;
        margin-right: 8px;
        color: #d67300;
        animation: spin 1s infinite linear
    }
}

@media(min-width: 768px) {
    .spinner-container {
        text-align: center
    }
    .spinner-container .spinner {
        width: 30px;
        height: 30px;
        margin: 0 auto;
        animation: spin 1s infinite linear
    }
    .spinner-container .message {
        text-align: center;
        margin-top: 15px;
        font-family: var(--font-family);
        font-style: normal;
        font-size: 15px
    }
}

@media(min-width: 768px) {
    .collection-time-selector-widget {
        display: grid;
        gap: 9px
    }
    .collection-time-selector-widget .collection-date-and-time {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min-content 1fr min-content;
        gap: 15px;
        padding: 15px 9px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        cursor: pointer
    }
    .collection-time-selector-widget .collection-date-and-time .radio {
        padding: 6.5px;
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-self: center;
        position: relative;
        left: 3px
    }
    .collection-time-selector-widget .collection-date-and-time .text {
        align-items: center;
        font-family: var(--font-family);
        font-style: normal;
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        color: #27283e;
        display: flex;
        align-self: center;
        letter-spacing: .4px
    }
    .collection-time-selector-widget .collection-date-and-time.disabled {
        background: #f5f5f5;
        cursor: unset
    }
    .collection-time-selector-widget .collection-date-and-time.disabled .text {
        color: #757575
    }
}

@media(min-width: 768px) {
    .menu-search-widget {
        display: block
    }
    .menu-search-widget.hidden {
        display: none
    }
    .menu-search-widget .searchbox {
        display: flex;
        flex-direction: row;
        background: #ffffff;
        box-sizing: border-box;
        border-radius: 100px;
        width: 194px;
        margin-right: 25px;
        padding: 6px;
        padding-left: 8.13px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        font-weight: normal;
        font-style: normal
    }
    .menu-search-widget .searchbox.inactive {
        background: rgba(255, 255, 255, .1)
    }
    .menu-search-widget .searchbox.inactive input {
        color: #a9a9b8
    }
    .menu-search-widget .searchbox.active {
        background: #ffffff
    }
    .menu-search-widget .searchbox.active input {
        color: #27283e
    }
    .menu-search-widget .searchbox .search-icon {
        margin: auto 0;
        margin-left: 3px;
        height: 16.41px;
        filter: invert(0.6);
        pointer-events: none
    }
    .menu-search-widget .searchbox .clear-input-icon {
        cursor: pointer;
        padding-right: 5px;
        margin-left: auto
    }
    .menu-search-widget .searchbox input {
        margin: auto 0;
        margin-left: 6px;
        border: none;
        background: none;
        height: 20px;
        width: 128.08px;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        font-weight: normal;
        font-style: normal
    }
    .menu-search-widget .searchbox input:focus {
        outline: none
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

/* list view big screen*/

@media(min-width: 768px) {
    .item-list-widget {
        display: flex;
        flex-flow: column;
        grid-area: items;
        grid-gap: 33px;
        border-right: 1px solid #e0e0e0;
                border-left: 1px solid #e0e0e0;

        margin-top: 0px;
        margin-bottom: 31.5px;
        padding: 0px 32px 37vh 32px
    }
    .item-list-widget .items-per-category .category-summary {
        display: flex;
        flex-flow: column;
        font-family: var(--font-family);
        font-style: normal
    }
    .item-list-widget .items-per-category .category-summary .link-anchor {
        width: 100%;
        position: relative;
        top: -200px
    }
    .item-list-widget .items-per-category .category-summary .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 6px);
        font-weight: 700;
        line-height: 32px;
        letter-spacing: .15px;
        word-break: break-word;
        color: var(--color-title-menu)
    }
    .item-list-widget .items-per-category .category-summary .description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: .33px;
        grid-area: description;
        margin-top: 14px;
        margin-right: 75px;
        color: var(--color-title-description)
    }
    .item-list-widget .items-per-category .items-container {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(335px, 1fr));
        margin: 27.5px 0 20px 0
    }
    .item-list-widget.no-items-found .no-results {
        padding-top: 153px;
        padding-bottom: 265px;
        margin: auto;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 1px);
        font-weight: 400;
        text-align: center;
        line-height: 25.5px;
        color: #757575
    }
    .item-list-widget.no-items-found .no-results .text {
        margin-top: 7px
    }
    .item-list-widget.no-items-found .no-results span {
        font-weight: 700;
        line-height: 22.1px
    }
    .item-list-widget .search-results-message {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        font-style: normal;
        line-height: 21px;
        letter-spacing: .15px;
        color: #27283e
    }
    .item-list-widget .search-results-message .collection-type {
        font-weight: 700;
        letter-spacing: unset
    }
}



@media (min-width: 768px) {
    .item-card-widget {
        overflow: hidden;
        position: relative;
        height: 170px;
        width: 100%;
        border: 1px solid #e2e2e2;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .05);
        box-sizing: border-box;
        border-radius: 8px;
        background-color: #ffffff;
        cursor: pointer;
    }

    .item-card-widget .body {
        display: flex;
        flex-direction: row; /* Horizontal layout for image and info */
        height: inherit;
        box-sizing: border-box;
    }

    .item-card-widget .body .image img {
        width: 100%;
        height: 170px;
        object-fit: cover;
    }

    .item-card-widget .body .item-info {
        display: flex;
        flex-direction: column; /* Stacks children vertically */
        justify-content: space-between; /* Pushes content to top and bottom */
        height: 100%; /* Ensures full height */
        padding: 15px;
        width:100%;
    }

    .item-card-widget .body .item-info .name {
        font-size: calc(var(--font-title) - 2px);
        font-weight: 700;
        margin-bottom: 7.4px;
        
    }

    .item-card-widget .body .item-info .description {
    
        
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        align-self: start;
        word-wrap: break-word;
        text-align: left;

        color: var(--color-description-item);
        margin-bottom: 3px;
        
        
    }

    .item-card-widget .body .item-info .price-and-sold-out {
        display: flex;
        justify-content: space-between; /* Aligns price to the left and button to the right */
        align-items: center; /* Ensures vertical alignment */
        margin-top: auto; /* Ensures it stays at the bottom */
    }

    .item-card-widget .body .item-info .price-and-sold-out .price {
        font-size: 14px;
        color: #27283e;
        text-align: left;
    }
    
     .item-card-widget .body .item-info .price-and-sold-out .button-add {
        font-size: 14px;
        color: #27283e;
        text-align: right;
        margin-right:0px;
       
    }


    .item-card-widget .body .item-info .price-and-sold-out .button-add{
        background-color: #007bff;
        color: #fff;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.3s;
    }

    .item-card-widget .body .item-info .price-and-sold-out .customize-button:hover {
        background-color: #0056b3;
    }
}



/* end  list view big screen*/





/* grid view big screen*/

@media(min-width: 768px) {
    .item-list-widget-grid {
        display: flex;
        flex-flow: column;
        grid-area: items;
        grid-gap: 33px;
        border-right: 1px solid #e0e0e0;
                border-left: 1px solid #e0e0e0;

        margin-top: 0px;
        margin-bottom: 31.5px;
        padding: 0px 32px 37vh 32px
    }
    .item-list-widget-grid .items-per-category .category-summary {
        display: flex;
        flex-flow: column;
        font-family: var(--font-family);
        font-style: normal
    }
    .item-list-widget-grid .items-per-category .category-summary .link-anchor {
        width: 100%;
        position: relative;
        top: -200px
    }
    .item-list-widget-grid .items-per-category .category-summary .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) + 6px);
        font-weight: 700;
        line-height: 32px;
        letter-spacing: .15px;
        word-break: break-word;
        color: var(--color-title-menu)
    }
    .item-list-widget-grid .items-per-category .category-summary .description {
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: .33px;
        grid-area: description;
        margin-top: 14px;
        margin-right: 75px;
        color: var(--color-title-description)
    }
    .item-list-widget-grid .items-per-category .items-container-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(335px, 1fr));
        margin: 27.5px 0 20px 0
    }
    .item-list-widget-grid.no-items-found .no-results {
        padding-top: 153px;
        padding-bottom: 265px;
        margin: auto;
        font-family: var(--font-family);
        font-style: normal;
        font-size: calc(var(--font-title) - 1px);
        font-weight: 400;
        text-align: center;
        line-height: 25.5px;
        color: #757575
    }
    .item-list-widget-grid.no-items-found .no-results .text {
        margin-top: 7px
    }
    .item-list-widget-grid.no-items-found .no-results span {
        font-weight: 700;
        line-height: 22.1px
    }
    .item-list-widget-grid .search-results-message {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-weight: 400;
        font-style: normal;
        line-height: 21px;
        letter-spacing: .15px;
        color: #27283e
    }
    .item-list-widget-grid .search-results-message .collection-type {
        font-weight: 700;
        letter-spacing: unset
    }
}



@media (min-width: 768px) {
    .item-card-widget-grid {
        overflow: hidden;
        position: relative;
        height: 170px;
        width: 100%;
        border: 1px solid #e2e2e2;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, .05);
        box-sizing: border-box;
        border-radius: 8px;
        background-color: #ffffff;
        cursor: pointer;
    }

    .item-card-widget-grid .body {
        display: flex;
        flex-direction: row; /* Horizontal layout for image and info */
        height: inherit;
        box-sizing: border-box;
    }

    .item-card-widget-grid .body .image img {
        width: 100%;
        height: 170px;
        object-fit: cover;
    }

    .item-card-widget-grid .body .item-info {
        display: flex;
        flex-direction: column; /* Stacks children vertically */
        justify-content: space-between; /* Pushes content to top and bottom */
        height: 100%; /* Ensures full height */
        padding: 15px;
        width:100%;
    }

    .item-card-widget-grid .body .item-info .name {
        font-size: calc(var(--font-title) - 2px);
        font-weight: 700;
        margin-bottom: 7.4px;
        
    }

    .item-card-widget-grid .body .item-info .description {
       /*font-size: 12px;
        color: var(--color-description-item);
        margin-bottom: 8px;*/
        
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0;
        align-self: start;
        word-wrap: break-word;
        text-align: left;

        color: var(--color-description-item);
        margin-bottom: 3px;
        
    }

    .item-card-widget-grid .body .item-info .price-and-sold-out {
        display: flex;
        justify-content: space-between; /* Aligns price to the left and button to the right */
        align-items: center; /* Ensures vertical alignment */
        margin-top: auto; /* Ensures it stays at the bottom */
    }

    .item-card-widget-grid .body .item-info .price-and-sold-out .price {
        font-size: 14px;
        color: #27283e;
        text-align: left;
    }
    
     .item-card-widget-grid .body .item-info .price-and-sold-out .button-add {
        font-size: 14px;
        color: #27283e;
        text-align: right;
        margin-right:0px;
       
    }


    .item-card-widget-grid .body .item-info .price-and-sold-out .button-add{
        background-color: #007bff;
        color: #fff;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.3s;
    }

    .item-card-widget-grid .body .item-info .price-and-sold-out .customize-button:hover {
        background-color: #0056b3;
    }
}



/* end  grid view big screen*/

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}


@media(min-width: 768px) {
    .category-list-widget {
        grid-area: categories;
        gap: 10px;
        overflow: visible;
        position: sticky;
        top: 53px;
        width: 100%;
        background:#fff;
        margin-top: 0px;
        margin-bottom: 31.5px;
        padding-top: 0px;
        padding-bottom: 37vh
    }
    .category-list-widget .header-desktop {
        display: block;
        font-family: var(--font-family);
        font-size: var(--font-title);
        font-weight: 700;
        line-height: 24px;
        letter-spacing: 0;
        color: var(--color-title-menu)
    }
    .category-list-widget #categories-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: unset;
        padding-bottom: unset;
        overflow: hidden;
        margin-top: -1px;
         max-height:80vh;
                overflow-y: auto; /* Adds a scrollbar when content overflows */
    }
    .category-list-widget #categories-container::-webkit-scrollbar {
        display: none
    }
    .category-list-widget #categories-container .category {
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        word-wrap: break-word;
        padding: 0px;
        border: unset !important;
        color: #000 !important;
        margin-right: 0
    }
    .category-list-widget #categories-container .category.selected {
        border-bottom: 2px solid #27283e;
        background-color: unset !important
    }
    .category-list-widget #categories-container .category .name {
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 18.2px;
        text-align: left;
        width: max-content;
        padding: 20px 0 10px 0;
        color: var(--color-title-description)
    }
    .category-list-widget #categories-container .category .name.selected {
        font-weight: 700;
        color: var(--color-title-menu);
        padding: 21px 0 6px 0;
        border-bottom: 3px solid var(--color-title-menu);
    }
}

@media(min-width: 768px) {
    .store-closed-info-widget {
        height: 30px;
        background: #ffe7df;
        padding: 10px 20px;
        align-items: center;
        display: flex;
        justify-content: flex-start;
        font-family: var(--font-family);
        font-size: calc(var(--font-title) - 4px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0;
        text-align: left;
        color: #b0204b
    }
    .store-closed-info-widget span {
        margin-right: 7px;
        font-weight: 700
    }
}

@media(min-width: 768px) {
    .item-available-weekly-hours-widget {
        background: #ffebcf;
        font-weight: 500;
        font-size: calc(var(--font-title) - 3px);
        line-height: 22px;
        letter-spacing: .1px;
        color: #d67300;
        border-radius: 4px;
        padding: 8px 16px
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .otp-for-mobile-number-request-widget {
        font-family: var(--font-family);
        font-style: normal;
        height: 100%;
        display: grid;
        grid-template-rows: min-content 1fr min-content
    }
    .otp-for-mobile-number-request-widget .error {
        display: none
    }
    .otp-for-mobile-number-request-widget .supporting-text {
        font-size: calc(var(--font-title) - 6px);
        font-weight: normal;
        line-height: 16px;
        letter-spacing: .15px;
        text-align: center;
        color: #757575
    }
    .otp-for-mobile-number-request-widget .supporting-text a {
        text-decoration: none;
        color: #4cbba1
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .otp-verifier-widget {
        font-family: var(--font-family);
        font-style: normal;
        height: 100%;
        display: grid
    }
    .otp-verifier-widget .otp-input-wrapper {
        display: flex;
        justify-content: center
    }
    .otp-verifier-widget .otp-input-wrapper .otp-input {
        grid-gap: 8px
    }
    .otp-verifier-widget .otp-input-wrapper input {
        width: 48px !important;
        height: 52px;
        border-radius: 6px;
        border: 1px solid #bdbdbd;
        box-sizing: border-box;
        font-weight: 400;
        font-size: calc(var(--font-title) + 7px);
        line-height: 32.5px
    }
    .otp-verifier-widget .error-banner {
        background: #ffe7df;
        margin: 20px auto 0 auto;
        width: 335px;
        box-sizing: border-box;
        padding: 16px;
        display: flex;
        flex-flow: row;
        grid-gap: 10.95px
    }
    .otp-verifier-widget .error-banner .red-warning-icon {
        display: block;
        height: min-content
    }
    .otp-verifier-widget .error-banner .error-message {
        font-weight: 400;
        font-size: calc(var(--font-title) - 4px);
        line-height: 20px;
        color: #27283e
    }
    .otp-verifier-widget .resend-otp {
        margin: 32px 0;
        text-align: center;
        font-size: calc(var(--font-title) - 3px);
        font-weight: 400;
        line-height: 22.5px;
        letter-spacing: .25px
    }
    .otp-verifier-widget .resend-otp .resend {
        font-weight: 700;
        color: #4cbba1;
        cursor: pointer
    }
    .otp-verifier-widget .recaptcha-branding {
        width: 328px;
        margin: 0 auto;
        margin-top: auto;
        font-size: calc(var(--font-title) - 6px);
        font-weight: normal;
        line-height: 16px;
        letter-spacing: .15px;
        text-align: center;
        color: #757575
    }
    .otp-verifier-widget .recaptcha-branding a {
        text-decoration: none;
        color: #4cbba1
    }
}

:root {
    --safe-area-inset-top: 0px;
    --safe-area-inset-right: 0px;
    --safe-area-inset-bottom: 0px;
    --safe-area-inset-left: 0px
}

@supports(top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left)
    }
}

@supports(top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left)
    }
}

@media(min-width: 768px) {
    .customer-display-name-update-widget {
        font-family: var(--font-family);
        font-style: normal;
        height: 100%;
        display: grid;
        grid-template-rows: min-content 1fr
    }
}

/*IMPORT FONT*/
/*@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Black Italic.otf") format("opentype");
    font-weight: 900;
    font-style: italic
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Bold Italic.otf") format("opentype");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Hairline Italic.otf") format("opentype");
    font-weight: 100;
    font-style: italic
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Hairline.otf") format("opentype");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Light Italic.otf") format("opentype");
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Medium Italic.otf") format("opentype");
    font-weight: 500;
    font-style: italic
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Regular Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Thin Italic.otf") format("opentype");
    font-weight: 200;
    font-style: italic
}

@font-face {
    font-family: "Poppins";
    src: url("/fonts/Poppins Thin.otf") format("opentype");
    font-weight: 200;
    font-style: normal
}

@font-face {
    font-family: "Ocra";
    src: url("/fonts/OCRA Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "Ocra";
    src: url("/fonts/OCRA Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-ThinItalic.ttf") format("truetype");
    font-weight: 100;
    font-style: italic
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-ExtraLightItalic.ttf") format("truetype");
    font-weight: 200;
    font-style: italic
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: "IBM Plex";
    src: url("/fonts/IBMPlexMono-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic
}

@font-face {
    font-family: "larabie";
    src: url("/fonts/larabie.ttf") format("truetype")
}

@font-face {
    font-family: "larabie";
    src: url("/fonts/larabie.ttf") format("truetype")
}*/

* {
    touch-action: manipulation
}

html,
body {
    margin: 0;
    scroll-behavior: smooth
}

body {
    background-color: #fff;
    overscroll-behavior-y: none
}

a {
    color: var(--link-fg);
    cursor: pointer
}

b {
    font-weight: 500
}

textarea {
    resize: none
}

.component {
    background-color: var(--color-bg)
}

button {
    cursor: pointer;
    box-shadow: 0px 0px 3px rgba(104, 122, 155, .25)
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.highlight::before {
    content: "";
    background: #d1ebff;
    position: absolute;
    left: 0;
    right: -2px;
    bottom: 2px;
    height: 16px;
    z-index: -1
}





.swal2-popup.swal2-toast {
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: .625em;
    overflow-y: hidden;
    background: #fff;
    box-shadow: 0 0 .625em #d9d9d9
}

.swal2-popup.swal2-toast .swal2-header {
    flex-direction: row;
    padding: 0
}

.swal2-popup.swal2-toast .swal2-title {
    flex-grow: 1;
    justify-content: flex-start;
    margin: 0 .6em;
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-footer {
    margin: .5em 0 0;
    padding: .5em 0 0;
    font-size: .8em
}

.swal2-popup.swal2-toast .swal2-close {
    position: static;
    width: .8em;
    height: .8em;
    line-height: .8
}

.swal2-popup.swal2-toast .swal2-content {
    justify-content: flex-start;
    padding: 0;
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-icon {
    width: 2em;
    min-width: 2em;
    height: 2em;
    margin: 0
}

.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 1.8em;
    font-weight: 700
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
    .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
        font-size: .25em
    }
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    top: .875em;
    width: 1.375em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: .3125em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: .3125em
}

.swal2-popup.swal2-toast .swal2-actions {
    flex-basis: auto !important;
    width: auto;
    height: auto;
    margin: 0 .3125em;
    padding: 0
}

.swal2-popup.swal2-toast .swal2-styled {
    margin: 0 .3125em;
    padding: .3125em .625em;
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-styled:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, .4)
}

.swal2-popup.swal2-toast .swal2-success {
    border-color: #a5dc86
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 1.6em;
    height: 3em;
    transform: rotate(45deg);
    border-radius: 50%
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -.8em;
    left: -.5em;
    transform: rotate(-45deg);
    transform-origin: 2em 2em;
    border-radius: 4em 0 0 4em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -.25em;
    left: .9375em;
    transform-origin: 0 1.5em;
    border-radius: 0 4em 4em 0
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
    top: 0;
    left: .4375em;
    width: .4375em;
    height: 2.6875em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
    height: .3125em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
    top: 1.125em;
    left: .1875em;
    width: .75em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
    top: .9375em;
    right: .1875em;
    width: 1.375em
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
    -webkit-animation: swal2-toast-animate-success-line-tip .75s;
    animation: swal2-toast-animate-success-line-tip .75s
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
    -webkit-animation: swal2-toast-animate-success-line-long .75s;
    animation: swal2-toast-animate-success-line-long .75s
}

.swal2-popup.swal2-toast.swal2-show {
    -webkit-animation: swal2-toast-show .5s;
    animation: swal2-toast-show .5s
}

.swal2-popup.swal2-toast.swal2-hide {
    -webkit-animation: swal2-toast-hide .1s forwards;
    animation: swal2-toast-hide .1s forwards
}

.swal2-container {
    display: flex;
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .625em;
    overflow-x: hidden;
    transition: background-color .1s;
    -webkit-overflow-scrolling: touch
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(0, 0, 0, .4)
}

.swal2-container.swal2-backdrop-hide {
    background: 0 0 !important
}

.swal2-container.swal2-top {
    align-items: flex-start
}

.swal2-container.swal2-top-left,
.swal2-container.swal2-top-start {
    align-items: flex-start;
    justify-content: flex-start
}

.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
    align-items: flex-start;
    justify-content: flex-end
}

.swal2-container.swal2-center {
    align-items: center
}

.swal2-container.swal2-center-left,
.swal2-container.swal2-center-start {
    align-items: center;
    justify-content: flex-start
}

.swal2-container.swal2-center-end,
.swal2-container.swal2-center-right {
    align-items: center;
    justify-content: flex-end
}

.swal2-container.swal2-bottom {
    align-items: flex-end
}

.swal2-container.swal2-bottom-left,
.swal2-container.swal2-bottom-start {
    align-items: flex-end;
    justify-content: flex-start
}

.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom-right {
    align-items: flex-end;
    justify-content: flex-end
}

.swal2-container.swal2-bottom-end>:first-child,
.swal2-container.swal2-bottom-left>:first-child,
.swal2-container.swal2-bottom-right>:first-child,
.swal2-container.swal2-bottom-start>:first-child,
.swal2-container.swal2-bottom>:first-child {
    margin-top: auto
}

.swal2-container.swal2-grow-fullscreen>.swal2-modal {
    display: flex !important;
    flex: 1;
    align-self: stretch;
    justify-content: center
}

.swal2-container.swal2-grow-row>.swal2-modal {
    display: flex !important;
    flex: 1;
    align-content: center;
    justify-content: center
}

.swal2-container.swal2-grow-column {
    flex: 1;
    flex-direction: column
}

.swal2-container.swal2-grow-column.swal2-bottom,
.swal2-container.swal2-grow-column.swal2-center,
.swal2-container.swal2-grow-column.swal2-top {
    align-items: center
}

.swal2-container.swal2-grow-column.swal2-bottom-left,
.swal2-container.swal2-grow-column.swal2-bottom-start,
.swal2-container.swal2-grow-column.swal2-center-left,
.swal2-container.swal2-grow-column.swal2-center-start,
.swal2-container.swal2-grow-column.swal2-top-left,
.swal2-container.swal2-grow-column.swal2-top-start {
    align-items: flex-start
}

.swal2-container.swal2-grow-column.swal2-bottom-end,
.swal2-container.swal2-grow-column.swal2-bottom-right,
.swal2-container.swal2-grow-column.swal2-center-end,
.swal2-container.swal2-grow-column.swal2-center-right,
.swal2-container.swal2-grow-column.swal2-top-end,
.swal2-container.swal2-grow-column.swal2-top-right {
    align-items: flex-end
}

.swal2-container.swal2-grow-column>.swal2-modal {
    display: flex !important;
    flex: 1;
    align-content: center;
    justify-content: center
}

.swal2-container.swal2-no-transition {
    transition: none !important
}

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal {
    margin: auto
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
    .swal2-container .swal2-modal {
        margin: 0 !important
    }
}

.swal2-popup {
    display: none;
    position: relative;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    width: 32em;
    max-width: 100%;
    padding: 1.25em;
    border: none;
    border-radius: .3125em;
    background: #fff;
    font-family: inherit;
    font-size: 1rem
}

.swal2-popup:focus {
    outline: 0
}

.swal2-popup.swal2-loading {
    overflow-y: hidden
}

.swal2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.8em
}

.swal2-title {
    position: relative;
    max-width: 100%;
    margin: 0 0 .4em;
    padding: 0;
    color: #595959;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word
}

.swal2-actions {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.25em auto 0;
    padding: 0 1.6em
}

.swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
    opacity: .4
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1))
}

.swal2-actions:not(.swal2-loading) .swal2-styled:active {
    background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2))
}

.swal2-loader {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin: 0 1.875em;
    -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border-width: .25em;
    border-style: solid;
    border-radius: 100%;
    border-color: #3085d6 transparent #3085d6 transparent
}

.swal2-styled {
    margin: .3125em;
    padding: .625em 2em;
    box-shadow: none;
    font-weight: 500
}

.swal2-styled:not([disabled]) {
    cursor: pointer
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #3085d6;
    color: #fff;
    font-size: 1.0625em
}

.swal2-styled.swal2-deny {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #dd6b55;
    color: #fff;
    font-size: 1.0625em
}

.swal2-styled.swal2-cancel {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #aaa;
    color: #fff;
    font-size: 1.0625em
}

.swal2-styled:focus {
    outline: 0;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, .4)
}

.swal2-styled::-moz-focus-inner {
    border: 0
}

.swal2-footer {
    justify-content: center;
    margin: 1.25em 0 0;
    padding: 1em 0 0;
    border-top: 1px solid #eee;
    color: #545454;
    font-size: 1em
}

.swal2-timer-progress-bar-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: .25em;
    overflow: hidden;
    border-bottom-right-radius: .3125em;
    border-bottom-left-radius: .3125em
}

.swal2-timer-progress-bar {
    width: 100%;
    height: .25em;
    background: rgba(0, 0, 0, .2)
}

.swal2-image {
    max-width: 100%;
    margin: 1.25em auto
}

.swal2-close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    padding: 0;
    overflow: hidden;
    transition: color .1s ease-out;
    border: none;
    border-radius: 0;
    background: 0 0;
    color: #ccc;
    font-family: serif;
    font-size: 2.5em;
    line-height: 1.2;
    cursor: pointer
}

.swal2-close:hover {
    transform: none;
    background: 0 0;
    color: #f27474
}

.swal2-close::-moz-focus-inner {
    border: 0
}

.swal2-content {
    z-index: 1;
    justify-content: center;
    margin: 0;
    padding: 0 1.6em;
    color: #545454;
    font-size: 1.125em;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    word-wrap: break-word
}

.swal2-checkbox,
.swal2-file,
.swal2-input,
.swal2-radio,
.swal2-select,
.swal2-textarea {
    margin: 1em auto
}

.swal2-file,
.swal2-input,
.swal2-textarea {
    box-sizing: border-box;
    width: 100%;
    transition: border-color .3s, box-shadow .3s;
    border: 1px solid #d9d9d9;
    border-radius: .1875em;
    background: inherit;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06);
    color: inherit;
    font-size: 1.125em
}

.swal2-file.swal2-inputerror,
.swal2-input.swal2-inputerror,
.swal2-textarea.swal2-inputerror {
    border-color: #f27474 !important;
    box-shadow: 0 0 2px #f27474 !important
}

.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
    border: 1px solid #b4dbed;
    outline: 0;
    box-shadow: 0 0 3px #c4e6f5
}

.swal2-file::-moz-placeholder,
.swal2-input::-moz-placeholder,
.swal2-textarea::-moz-placeholder {
    color: #ccc
}

.swal2-file:-ms-input-placeholder,
.swal2-input:-ms-input-placeholder,
.swal2-textarea:-ms-input-placeholder {
    color: #ccc
}

.swal2-file::-ms-input-placeholder,
.swal2-input::-ms-input-placeholder,
.swal2-textarea::-ms-input-placeholder {
    color: #ccc
}

.swal2-file::placeholder,
.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: #ccc
}

.swal2-range {
    margin: 1em auto;
    background: #fff
}

.swal2-range input {
    width: 80%
}

.swal2-range output {
    width: 20%;
    color: inherit;
    font-weight: 600;
    text-align: center
}

.swal2-range input,
.swal2-range output {
    height: 2.625em;
    padding: 0;
    font-size: 1.125em;
    line-height: 2.625em
}

.swal2-input {
    height: 2.625em;
    padding: 0 .75em
}

.swal2-input[type=number] {
    max-width: 10em
}

.swal2-file {
    background: inherit;
    font-size: 1.125em
}

.swal2-textarea {
    height: 6.75em;
    padding: .75em
}

.swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: .375em .625em;
    background: inherit;
    color: inherit;
    font-size: 1.125em
}

.swal2-checkbox,
.swal2-radio {
    align-items: center;
    justify-content: center;
    background: #fff;
    color: inherit
}

.swal2-checkbox label,
.swal2-radio label {
    margin: 0 .6em;
    font-size: 1.125em
}

.swal2-checkbox input,
.swal2-radio input {
    margin: 0 .4em
}

.swal2-validation-message {
    display: none;
    align-items: center;
    justify-content: center;
    padding: .625em;
    overflow: hidden;
    background: #f0f0f0;
    color: #666;
    font-size: 1em;
    font-weight: 300
}

.swal2-validation-message::before {
    content: "!";
    display: inline-block;
    width: 1.5em;
    min-width: 1.5em;
    height: 1.5em;
    margin: 0 .625em;
    border-radius: 50%;
    background-color: #f27474;
    color: #fff;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center
}

.swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 1.25em auto 1.875em;
    border: .25em solid transparent;
    border-radius: 50%;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 3.75em
}

.swal2-icon.swal2-error {
    border-color: #f27474;
    color: #f27474
}

.swal2-icon.swal2-error .swal2-x-mark {
    position: relative;
    flex-grow: 1
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    display: block;
    position: absolute;
    top: 2.3125em;
    width: 2.9375em;
    height: .3125em;
    border-radius: .125em;
    background-color: #f27474
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: 1.0625em;
    transform: rotate(45deg)
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: 1em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-error.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
    -webkit-animation: swal2-animate-error-x-mark .5s;
    animation: swal2-animate-error-x-mark .5s
}

.swal2-icon.swal2-warning {
    border-color: #facea8;
    color: #f8bb86
}

.swal2-icon.swal2-info {
    border-color: #9de0f6;
    color: #3fc3ee
}

.swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd
}

.swal2-icon.swal2-success {
    border-color: #a5dc86;
    color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 3.75em;
    height: 7.5em;
    transform: rotate(45deg);
    border-radius: 50%
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -.4375em;
    left: -2.0635em;
    transform: rotate(-45deg);
    transform-origin: 3.75em 3.75em;
    border-radius: 7.5em 0 0 7.5em
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -.6875em;
    left: 1.875em;
    transform: rotate(-45deg);
    transform-origin: 0 3.75em;
    border-radius: 0 7.5em 7.5em 0
}

.swal2-icon.swal2-success .swal2-success-ring {
    position: absolute;
    z-index: 2;
    top: -.25em;
    left: -.25em;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: .25em solid rgba(165, 220, 134, .3);
    border-radius: 50%
}

.swal2-icon.swal2-success .swal2-success-fix {
    position: absolute;
    z-index: 1;
    top: .5em;
    left: 1.625em;
    width: .4375em;
    height: 5.625em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    display: block;
    position: absolute;
    z-index: 2;
    height: .3125em;
    border-radius: .125em;
    background-color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
    top: 2.875em;
    left: .8125em;
    width: 1.5625em;
    transform: rotate(45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
    top: 2.375em;
    right: .5em;
    width: 2.9375em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
    -webkit-animation: swal2-animate-success-line-tip .75s;
    animation: swal2-animate-success-line-tip .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
    -webkit-animation: swal2-animate-success-line-long .75s;
    animation: swal2-animate-success-line-long .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
    -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
    animation: swal2-rotate-success-circular-line 4.25s ease-in
}

.swal2-progress-steps {
    align-items: center;
    margin: 0 0 1.25em;
    padding: 0;
    background: inherit;
    font-weight: 600
}

.swal2-progress-steps li {
    display: inline-block;
    position: relative
}

.swal2-progress-steps .swal2-progress-step {
    z-index: 20;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: #3085d6;
    color: #fff;
    line-height: 2em;
    text-align: center
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: #3085d6
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step {
    background: #add8e6;
    color: #fff
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line {
    background: #add8e6
}

.swal2-progress-steps .swal2-progress-step-line {
    z-index: 10;
    width: 2.5em;
    height: .4em;
    margin: 0 -1px;
    background: #3085d6
}

[class^=swal2] {
    -webkit-tap-highlight-color: transparent
}

.swal2-show {
    -webkit-animation: swal2-show .3s;
    animation: swal2-show .3s
}

.swal2-hide {
    -webkit-animation: swal2-hide .15s forwards;
    animation: swal2-hide .15s forwards
}

.swal2-noanimation {
    transition: none
}

.swal2-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.swal2-rtl .swal2-close {
    right: auto;
    left: 0
}

.swal2-rtl .swal2-timer-progress-bar {
    right: 0;
    left: auto
}

@supports (-ms-accelerator:true) {
    .swal2-range input {
        width: 100% !important
    }
    .swal2-range output {
        display: none
    }
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
    .swal2-range input {
        width: 100% !important
    }
    .swal2-range output {
        display: none
    }
}

@-moz-document url-prefix() {
    .swal2-close:focus {
        outline: 2px solid rgba(50, 100, 150, .4)
    }
}

@-webkit-keyframes swal2-toast-show {
    0% {
        transform: translateY(-.625em) rotateZ(2deg)
    }
    33% {
        transform: translateY(0) rotateZ(-2deg)
    }
    66% {
        transform: translateY(.3125em) rotateZ(2deg)
    }
    100% {
        transform: translateY(0) rotateZ(0)
    }
}

@keyframes swal2-toast-show {
    0% {
        transform: translateY(-.625em) rotateZ(2deg)
    }
    33% {
        transform: translateY(0) rotateZ(-2deg)
    }
    66% {
        transform: translateY(.3125em) rotateZ(2deg)
    }
    100% {
        transform: translateY(0) rotateZ(0)
    }
}

@-webkit-keyframes swal2-toast-hide {
    100% {
        transform: rotateZ(1deg);
        opacity: 0
    }
}

@keyframes swal2-toast-hide {
    100% {
        transform: rotateZ(1deg);
        opacity: 0
    }
}

@-webkit-keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: .5625em;
        left: .0625em;
        width: 0
    }
    54% {
        top: .125em;
        left: .125em;
        width: 0
    }
    70% {
        top: .625em;
        left: -.25em;
        width: 1.625em
    }
    84% {
        top: 1.0625em;
        left: .75em;
        width: .5em
    }
    100% {
        top: 1.125em;
        left: .1875em;
        width: .75em
    }
}

@keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: .5625em;
        left: .0625em;
        width: 0
    }
    54% {
        top: .125em;
        left: .125em;
        width: 0
    }
    70% {
        top: .625em;
        left: -.25em;
        width: 1.625em
    }
    84% {
        top: 1.0625em;
        left: .75em;
        width: .5em
    }
    100% {
        top: 1.125em;
        left: .1875em;
        width: .75em
    }
}

@-webkit-keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0
    }
    65% {
        top: 1.25em;
        right: .9375em;
        width: 0
    }
    84% {
        top: .9375em;
        right: 0;
        width: 1.125em
    }
    100% {
        top: .9375em;
        right: .1875em;
        width: 1.375em
    }
}

@keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0
    }
    65% {
        top: 1.25em;
        right: .9375em;
        width: 0
    }
    84% {
        top: .9375em;
        right: 0;
        width: 1.125em
    }
    100% {
        top: .9375em;
        right: .1875em;
        width: 1.375em
    }
}

@-webkit-keyframes swal2-show {
    0% {
        transform: scale(.7)
    }
    45% {
        transform: scale(1.05)
    }
    80% {
        transform: scale(.95)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes swal2-show {
    0% {
        transform: scale(.7)
    }
    45% {
        transform: scale(1.05)
    }
    80% {
        transform: scale(.95)
    }
    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes swal2-hide {
    0% {
        transform: scale(1);
        opacity: 1
    }
    100% {
        transform: scale(.5);
        opacity: 0
    }
}

@keyframes swal2-hide {
    0% {
        transform: scale(1);
        opacity: 1
    }
    100% {
        transform: scale(.5);
        opacity: 0
    }
}

@-webkit-keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: .0625em;
        width: 0
    }
    54% {
        top: 1.0625em;
        left: .125em;
        width: 0
    }
    70% {
        top: 2.1875em;
        left: -.375em;
        width: 3.125em
    }
    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em
    }
    100% {
        top: 2.8125em;
        left: .8125em;
        width: 1.5625em
    }
}

@keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: .0625em;
        width: 0
    }
    54% {
        top: 1.0625em;
        left: .125em;
        width: 0
    }
    70% {
        top: 2.1875em;
        left: -.375em;
        width: 3.125em
    }
    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em
    }
    100% {
        top: 2.8125em;
        left: .8125em;
        width: 1.5625em
    }
}

@-webkit-keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em
    }
    100% {
        top: 2.375em;
        right: .5em;
        width: 2.9375em
    }
}

@keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em
    }
    100% {
        top: 2.375em;
        right: .5em;
        width: 2.9375em
    }
}

@-webkit-keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg)
    }
    5% {
        transform: rotate(-45deg)
    }
    12% {
        transform: rotate(-405deg)
    }
    100% {
        transform: rotate(-405deg)
    }
}

@keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg)
    }
    5% {
        transform: rotate(-45deg)
    }
    12% {
        transform: rotate(-405deg)
    }
    100% {
        transform: rotate(-405deg)
    }
}

@-webkit-keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    50% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    80% {
        margin-top: -.375em;
        transform: scale(1.15)
    }
    100% {
        margin-top: 0;
        transform: scale(1);
        opacity: 1
    }
}

@keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    50% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    80% {
        margin-top: -.375em;
        transform: scale(1.15)
    }
    100% {
        margin-top: 0;
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0
    }
    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0
    }
    100% {
        transform: rotateX(0);
        opacity: 1
    }
}

@-webkit-keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow: hidden
}

body.swal2-height-auto {
    height: auto !important
}

body.swal2-no-backdrop .swal2-container {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    max-width: calc(100% - .625em * 2);
    background-color: transparent !important
}

body.swal2-no-backdrop .swal2-container>.swal2-modal {
    box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}

body.swal2-no-backdrop .swal2-container.swal2-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%)
}

body.swal2-no-backdrop .swal2-container.swal2-top-left,
body.swal2-no-backdrop .swal2-container.swal2-top-start {
    top: 0;
    left: 0
}

body.swal2-no-backdrop .swal2-container.swal2-top-end,
body.swal2-no-backdrop .swal2-container.swal2-top-right {
    top: 0;
    right: 0
}

body.swal2-no-backdrop .swal2-container.swal2-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

body.swal2-no-backdrop .swal2-container.swal2-center-left,
body.swal2-no-backdrop .swal2-container.swal2-center-start {
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

body.swal2-no-backdrop .swal2-container.swal2-center-end,
body.swal2-no-backdrop .swal2-container.swal2-center-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

body.swal2-no-backdrop .swal2-container.swal2-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

body.swal2-no-backdrop .swal2-container.swal2-bottom-left,
body.swal2-no-backdrop .swal2-container.swal2-bottom-start {
    bottom: 0;
    left: 0
}

body.swal2-no-backdrop .swal2-container.swal2-bottom-end,
body.swal2-no-backdrop .swal2-container.swal2-bottom-right {
    right: 0;
    bottom: 0
}

@media print {
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
        overflow-y: scroll !important
    }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)>[aria-hidden=true] {
        display: none
    }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
        position: static !important
    }
}

body.swal2-toast-shown .swal2-container {
    background-color: transparent
}

body.swal2-toast-shown .swal2-container.swal2-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto
}

body.swal2-toast-shown .swal2-container.swal2-top-left,
body.swal2-toast-shown .swal2-container.swal2-top-start {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0
}

body.swal2-toast-shown .swal2-container.swal2-center-left,
body.swal2-toast-shown .swal2-container.swal2-center-start {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-center {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%)
}

body.swal2-toast-shown .swal2-container.swal2-center-end,
body.swal2-toast-shown .swal2-container.swal2-center-right {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-left,
body.swal2-toast-shown .swal2-container.swal2-bottom-start {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0
}

body.swal2-toast-shown .swal2-container.swal2-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-end,
body.swal2-toast-shown .swal2-container.swal2-bottom-right {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto
}

body.swal2-toast-column .swal2-toast {
    flex-direction: column;
    align-items: stretch
}

body.swal2-toast-column .swal2-toast .swal2-actions {
    flex: 1;
    align-self: stretch;
    height: 2.2em;
    margin-top: .3125em
}

body.swal2-toast-column .swal2-toast .swal2-loading {
    justify-content: center
}

body.swal2-toast-column .swal2-toast .swal2-input {
    height: 2em;
    margin: .3125em auto;
    font-size: 1em
}

body.swal2-toast-column .swal2-toast .swal2-validation-message {
    font-size: 1em
}

.description-cart {
    font-size: calc(var(--font-title) - 4px);
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0;
    word-wrap: break-word;
    color: #27283e;
    margin-top:10px;
    margin-bottom:15px;

}
.description-details {
    font-size: calc(var(--font-title) - 4px);
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    word-wrap: break-word;
    color: var(--color-title-description)
    margin-bottom:15px;

}
.card-info {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    margin-top:20px;
    margin-bottom:20px;
    text-align: center;
}
.your-order {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-title-menu)
}
.delivery-option .grey-fields, #voucher_code, #redeem_points  {
    width:95% !important;
    border: 1px solid #e2e2e2;
    border-radius: 5px;;
    background: #e2e3e3;
    color: #1e1e1e;
    padding: 8px 10px;
    margin-bottom:10px;
}

.delivery-opt .grey-fields, #voucher_code, #redeem_points  {
    width:95% !important;
    border: 1px solid #e2e2e2;
    border-radius: 5px;;
    background: #e2e3e3;
    color: #1e1e1e;
    padding: 8px 10px;
    margin-bottom:10px;
}
.line-division {
    border-top: 1px solid #e2e2e2;
    margin:20px 0px 20px 0px;
}
.clear-cart {
    font-size: calc(var(--font-title) - 6px) !important;
    position: static;
    color: #27283e;
    background: rgba(39, 40, 62, 0.1);
    padding: 6px 8px;
    border-radius:5px;
    font-weight: 500;
}
a.clear-cart {
     text-decoration:none;
}
.change-address-kn, .change-location-kn {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 6px) !important;
    position: static;
    color: #27283e;
    background: rgba(39, 40, 62, 0.1);
    padding: 6px 8px;
    border-radius:5px;
    font-weight: 500;
    
}
a.change-address-kn, .change-location-kn{
     text-decoration:none;
}

.black-button{
    padding: 10px 13px !important;
    border-radius:5px;
    font-size: calc(var(--font-title) - 3px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    background-color:#363636;
    margin-top:15px;
    color:#fff;
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 5px) !important;
   /* border:1px solid #363636;*/
       border:2px solid #fff;

}
a.black-button:hover,
button.black-button:hover,
input.black-button:hover,
input.black-button:focus,
a.black-button:focus
{
    text-decoration:none;
    color:#fff;
    background:#252a2c;
    border:1px solid #252a2c;
}
.disabled-button{
    display:none !important;
    background:#ccc !important;
    /*border:1px solid #ccc;*/
    color:#fff;
}
/*.top-menu-wrapper {display:none}*/
.menu-top-menu {display:none}
.footer-divider {display:none !important;}
.frm-subscribe {display:none !important;}
.section-footer {display:none !important;}
.logo-mobile {display:none !important;}
.search-map-wrap, #ui-datepicker-div{display:none;}
.gmnoprint{display:none !important;}
#redirect{display:none !important;}
.cc-add-wrap, .credit_card_wrap{display:none}

.delivery-option {text-align: center;}

.tag span{
    font-family: var(--font-family);
    padding:6px 12px;
    font-size: calc(var(--font-title) - 6px);
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
   display:block;
     overflow-wrap: break-word;
     max-width:90vw;
     width:100%;
     
 
 text-align: center;
 color:#fff;
 border-radius:1em;
    
}


/************  START TABS *************/
.tabs-wrapper,
.connected-wrap
{
/*border:1px solid #c9c7c7;*/
}

ul#tabs {
list-style-type: none;
padding: 0;
text-align: center;
margin-top: 15px;

}

ul#tabs li {
display: inline-block;
padding: 5px 15px;
margin-bottom: 4px;
cursor: pointer;
font-family: var(--font-family);
font-size: calc(var(--font-title) - 4px);
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: 0;
text-align: center;
color: #a9a9b8;
}

ul#tabs li a,
ul#mobile-menu li a
{
color:#474d5d;
}

ul#tabs li:hover {
color:var(--color-title-selected);
/*border-bottom:2px solid #f75d34;*/
}
ul#tabs li.active {
color: var(--color-title-selected) !important;
/*border-bottom:2px solid #f75d34;*/
}

ul#tabs li.active i{
color:var(--color-title-selected);
}

ul#tab {
list-style-type: none;
margin: 0;
padding:0px 0px;
}

ul#tab > li {
display: none;
}
ul#tab li.active {
display: block;
}
/************  END TABS *************/

.section-menu ul#tabs li i{
font-size:30px;
display:none;
}

.logo-site {
max-width: 170px;
min-width:170px;
}

.news-button {
border-radius: 5px;
font-size: calc(var(--font-title) - 3px);
padding: 14.5px 16px;
margin-left:-20px;
}
.email {
   border-radius: 5px !important;
   padding: 14px 16px !important;
}

.social-wrap {
    text-align: center;
}
.mytable {
    display: table;
    width: 100%;
}
.social-wrap .mycol {
    width: 16%;
}
.mytable .mycol {
    display: table-cell;
}
.border {
    border: 0px solid red;
}
.social-wrap a {
    margin:5px;
    color: #919eaf;
    font-size: calc(var(--font-title) + 2px);
}
li {
    list-style: none;
}

.box-grey {
    width: 100%;
    margin: auto;
    padding: 60px 120px;
        font-family: var(--font-family);

}
.merchant-opening-hours {
    text-align:center;
}
.merchant-opening-hours a{
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 2px);
    font-style: normal;
    font-weight: 500;
    text-decoration:none;
    color:#27283e;
}
.day-open{
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 3px);
    font-weight: 400;
}
.section-label .section-label-a {
    padding-bottom: 15px;
}
.box-rating {
    padding:0px 15px 30px 15px;
    text-align:center;
}
.review-input-wrap {
    width: 50%;
    margin: 0px auto auto auto;
    padding:30px 0px 30px 0px;
}
.merchant-review-wrap {
    width: 50%;
    padding:15px 30px 10px 30px;

}
.row-review {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    margin-bottom:10px;
    padding:20px 0px 2px 0px;
}
.box-reviews {
    margin-top:60px;
    margin-bottom:60px;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    font-family: var(--font-family);

}
.merchant-review-wrap img.img-circle{
    height:60px;
    width:60px;
}
.client-name {
    font-family: var(--font-family);
    font-size: var(--font-title);
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    color: #27283e;
}
.details-review {
    float:left;
    text-align: left;
}
.details-review2 {
    float:right;
    text-align: right;
}
.title-rating {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) + 22px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    color: #27283e;
}
.review_notification_wrap {
    background:#def2d6;
    padding:10px 15px;
    border-radius:5px;
}
.review-button {
    border-radius: 5px;
    font-size: calc(var(--font-title) - 8px);
    padding: 14.5px 16px;
    margin-top: 20px;
}

#merchant-map {
    border-radius:10px 10px 0px 0px;
    max-width: 100%;
    min-height: 300px;
    max-height: 300px;
    box-shadow: 0px 0px 8px rgb(49 48 62 / 10%);
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    
}
.merchant-details {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align:left;
    margin-top: 14px;
    color: #27283e;
}

.merchant-details p {
    font-size: calc(var(--font-title) - 4px);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .33px;
    grid-area: description;
    margin-top: 14px;
    color: #757575;
}
.book-table-kn {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align:left;
    margin-top: 14px;
    color: #27283e;
    width:70%;
    padding-bottom:100px;
}

.order-table-kn {
        max-width:450px !important;
        padding-bottom:50px !important;
        margin-bottom: 100px !important;
        margin-left:auto;
        margin-right:auto;
         font-family: var(--font-family);
    font-size: calc(var(--font-title) - 1px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align:left;
    margin-top: 14px;
    color: #27283e;
    padding:10px;
    
    }
.font-form {
    font-size: calc(var(--font-title) - 4px);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .33px;
    grid-area: description;
    margin-top: 14px;
    color: #757575;
}
.book-table-kn span {
    margin-left:-16px;
}
.button-table {
    margin-top:20px;
    border-radius: 5px;
    font-size: calc(var(--font-title) - 3px);
    padding: 12px 16px;
    border: none;
    font-weight:400;
}
#booking_time {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
   /* background: #fff;
    border: 1px solid #e0e0e0;*/
    box-sizing: border-box;
    border-radius: 8px;
}

#photos {
    margin-top:10px;
    margin-bottom:10px;
}

#photos img {
width: 100% !important;
height: 150px !important;
object-fit: cover;
border-radius:8px;
}

.table-hours {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    margin-bottom: 10px;
    border-bottom: none;
    border-top: none;
}
.table {
    margin-bottom:0px;

}
.table>thead>tr>th {
    vertical-align: bottom;
    border: none;
    padding: 3px 8px 8px 8px;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 12px;
    line-height: 1.42857143;
    vertical-align: top;
    border-bottom: 1px solid #e2e2e2;
    text-align: center;
}

.button-login {
    background: transparent;
    border: none;
    box-shadow:none;
    padding:0px;
}
.button-login img {
    width: 28px;
    height: 28px;
}
.restaurant-name {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 700;
    font-size: calc(var(--font-title) + 12px);
    line-height: 21px;
    color: #FFF;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 2px 4px rgb(0 0 0 / 5%);
}
.button-checkout {
    font-family: var(--font-family);
    padding: 10px 13px;
    border-radius: 5px;
    font-size: calc(var(--font-title) - 3px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    background-color: var(--color-btn-primary);
    color: #fff;
}

.edit_item {
    border-radius: 5px;
    line-height: 24px;
    margin-right:5px;
    color: var(--color-btn-primary);
}
.edit_item img {
    width:15px;
    opacity: 0.8;
}
.manage .c {
    text-align: right;
}

#username, #password, #first_name, #last_name,
#contact_phone, #email_address, #password, #cpassword, 
#card_name, #billing_address, #cvv, #order_change,
#credit_card_number, #expiration_month, #expiration_yr, 
#street, #city, #state, #zipcode, #country_code, 
#location_name, #delivery_instruction, .saved_address_block,
#dinein_number_of_guest, #dinein_table_number, #dinein_special_instruction {
   margin-bottom:10px !important; 
}
.section-forgotpass{display:none;}
.section-create-account{display:none;}
.section-guest-account{display:none;}

.login-form{display:none;}
#confirm_phone {display:none;}


.close-password {
    font-size: calc(var(--font-title) - 7px);
    position: static;
    color: #27283e;
    background: var(--color-btn-secondary);
    padding: 15px 20px;
    border-radius:8px;
    text-align:center;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    cursor: pointer
}
a.close-pass, a.create-account,a.login-account,a.guest-account {
     text-decoration:none;
     color:#FFF;
}
.button-create-account, .button-login-form,.button-guest-account {
    width: 95%;
    margin: 0px 0px 16px 0px ;
    padding: 19px 20px;
    border-radius: 8px;
    font-weight: 400;
    font-size: calc(var(--font-title) - 3px);
    line-height: 19px;
    text-align: center;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.button-create-account,.button-login-form,.button-guest-account {
    font-size: calc(var(--font-title) + 2px);
    margin-right: 0px
}

.button-create-account,.button-login-form,.button-guest-account {
    background-color: var(--color-btn-secondary);
    color: #222
}
.intl-tel-input {
    position: relative;
    display: inline !important;
}
.footer-buttons {margin-top:70px}

/*.modal-content {
    border:none !important;
    border-radius:17px !important;
    width:0%;
}
*/
.search_foodname {
    padding:22px 0px 20px 10px !important;
    box-shadow: none !important;
}
.typeahead__container.hint .typeahead__field [contenteditable], .typeahead__container.hint .typeahead__field input, .typeahead__container.hint .typeahead__field textarea {
background: 0 0;
padding: 22px 0px 20px 10px !important;
}
.search-food-wrap{
    z-index: 0;
    margin-top:10px;
    margin-bottom:10px;
    position:relative;
}
ul#tab .search-food-wrap li{
    display:block;
}
ul#tab .search-food-wrap .easy-autocomplete-container{
    z-index:9999;
}

.search-food-wrap button{
    position:absolute;
    background:none;
    border:none;
    font-size: calc(var(--font-title) + 2px);
    position: absolute;
    right: 10px;
    top: 8px;
}
.search-food-wrap a.clear_search_item{
    font-size: calc(var(--font-title) + 10px);
    color: #282c3f;
    position: absolute;
    right: 15px;
    top: 10px;
    display:none;
}
.search-food-wrap .typeahead__list a{
    width:100%;
}
.clear-search {
    font-size: calc(var(--font-title) - 6px);
    position: static;
    color: #27283e;
    background: rgba(39, 40, 62, 0.1);
    padding: 6px 8px;
    border-radius:5px;
    font-weight: 500;
}

a.clear-search {
     text-decoration:none;
}
.change-address {
    font-size: calc(var(--font-title) - 6px);
    position: static;
    color: #27283e;
    background: rgba(39, 40, 62, 0.1);
    padding: 6px 8px;
    border-radius:5px;
    font-weight: 500;
}

.form-delivery-address {
    margin:auto;
    width: 80%;
    padding:50px 20px 50px 20px;
}
.form-delivery-order {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    margin:auto;
    padding:20px;
}
#address_book_id, #expiration_month, 
#expiration_yr, #country_code {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 3px);
    line-height: 21px;
    color: #27283e;
    padding: 14.5px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    border-radius: 8px;
}
#order_change {
    margin-top:10px;
    margin-bottom:10px;
    width:100% !important;
}
.button-edit {
    background: var(--color-btn-primary);
    width: 100%;
    margin: 10px 0px 10px 0px;
    padding: 16px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: calc(var(--font-title) - 3px);
    line-height: 19px;
    text-align: center;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    cursor: pointer
}
a.button-edit {
    text-decoration:none !important;
}
.title-place {
    font-family: var(--font-family);
    font-size: var(--font-title);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-title-menu);
    margin-left: -10px;
}
.description-place  {
    font-size: calc(var(--font-title) - 4px);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: .33px;
    grid-area: description;
    color: #757575;
    margin-left: -10px;
}
.title-receipt {
    font-family: var(--font-family);
    font-size: var(--font-title);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-title-menu);
}
.box-grey-receipt {
    font-family: var(--font-family);
    width: 50%;
    margin: auto;
    padding: 17px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}
#receipt-content{
    padding:5px;
}
.icon-success {
    font-size:100px;
    margin-bottom:20px;
    color: green;
}
.enter-address-wrap {
    width:450px;
    padding:20px;
}
.enter-address-wrap > .section-label > a.section-label-a {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 3px);
    font-style: normal;
    font-weight: 700;
    color: var(--color-title-menu);
    text-decoration:none;
}
.enter-address-wrap .green-button {
    background: var(--color-btn-primary);
    width: 100%;
    color:#FFF;
    margin: 10px 0px 10px 35px;
    padding: 12px;
    border-radius: 5px;
    border:none;
}
.enter-address-wrap > #frm-modal-enter-address > .food-item-actions > .col-md-3 > a.orange-button {
    display:none;
}
.view-food-item-wrap {
    width:450px;
    padding:20px;
}
.view-food-item-wrap2 {
   width: 100%;
    padding: 20px;
    text-align: left;
    height:90vh;
   /* height: 620px;*/
    overflow-y: auto;
}

.view-food-title {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 3px);
    font-style: normal;
    font-weight: 700;
    color: var(--color-title-menu);
}
.button-review {
    background: var(--color-btn-primary);
    width: 100%;
    color:#FFF;
    margin-top: 10px;
    padding: 12px;
    border-radius: 5px;
    border:none;
}

.fancybox-wrap, .fancybox-skin {
    border-radius:10px !important;
}
.logo-food {
    /*max-width:120px;
    max-height:120px;
    min-width:120px;
    min-height:120px;*/
    object-fit: cover;
   /* border-radius:50%;*/
    
      display: block;
    width: 100%;
padding:0;
margin-left:-8px;
margin-right:-20px;
    object-fit: cover;
}


.header-item {
    display: flex;
    align-items: center;
}
.text-item {
    font-family: var(--font-family);
    font-size: var(--font-title);
    font-style: normal;
    font-weight: 700;
    color: var(--color-title-menu);
    text-align:center;
}
.text-item-size{
    font-family: var(--font-family);
    font-size:14px
    font-style: normal;
    font-weight: 500;
    color: var(--color-title-item);
 
    text-align:center;
}
.text-item-des {
    font-family: var(--font-family);
    font-size: var(--font-title);
    font-style: normal;
    font-weight: 700;
    color: var(--color-title-menu);
}
.button-update-cart {
    background: var(--color-btn-primary);
    width: 50%;
    color:#FFF;
    margin: 10px 20px 10px 5px;
    padding: 12px;
    border-radius: 5px;
    border:none;
    text-transform: uppercase;
    text-align:center;
    font-size:13px;
    cursor: pointer
}

.button-cart-close {
    background: var(--color-btn-secondary);
    width: 50%;
    color:#FFF;
    margin: 10px 5px 10px 20px;
    padding: 12px;
    border-radius: 5px;
    border:none;
    text-transform: uppercase;
    text-align:center;
    font-size:13px;
    cursor: pointer
}
.food-item-actions-2 , .quantity-wrap-small{
    font-family: var(--font-family);
   display: flex;
   align-items: center; 
}
.quantity-botton {
    width:50%;
    text-align: left;
    margin-left: 20px;
}
.quantity-botton > a {
    padding: 7px 10px 7px 10px;
    border: 1px solid;
    border-radius: 50%;
}
.quanti-box-input {
    border-radius: 100% !important;
    padding: 9px !important;
    width: 40px !important;
    text-align: center;
    border: none !important;
    background: transparent !important;
}
.ing-itens-mark {
   font-family: var(--font-family);
   border:1px solid #e0e0e0; 
   margin:10px 0px 10px 0px;
   padding:15px 10px 15px 10px;
   border-radius:8px;
   display:flex; 
   cursor:pointer;
}
.addon-itens-mark {
   font-family: var(--font-family);
   border:1px solid #e0e0e0; 
   margin:10px 0px 10px 0px;
   padding:15px 10px 15px 10px;
   border-radius:8px;
   display:flex; 
   cursor:pointer;
}
.active-addon {
    border:1px solid var(--link-fg); 
}
.addon_qty_im  {
    border-radius:100% !important;
    padding:9px !important;
    width:40px !important;
    text-align:center;
    border:none !important;
    background:transparent !important;
}
.quantity-wrap-small > a {
    padding: 6px 7px 6px 7px;
    border: 1px solid;
    border-radius: 50%;
    font-size: calc(var(--font-title) - 6px);
}
.panel-footer {
    padding: 10px;
    background-color: #fff;
    border-top: none;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.close {
    opacity:1 !important;
}
.close-button,.closebtn {
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 3px 9px rgb(0 0 0 / 15%);
}
.item-order-list {
   box-shadow: 0px 2px 4px rgb(0 0 0 / 5%);
   font-family: var(--font-family);
   border:1px solid #e0e0e0; 
   margin:10px 0px 10px 0px;
   padding:15px 10px 15px 10px;
   border-radius:8px;
   
}
.cart_total_wrap {
    font-family: var(--font-family);
    font-size:15px;
    font-weight:700;
    color:var(--color-title-menu);
}
.summary-wrap {
    font-family: var(--font-family);
    font-size:13px;
    font-weight:400;
    color:var(--color-title-menu);
}
/*.summary-wrap1 {
    overflow-y: scroll;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
.summary-wrap1::-webkit-scrollbar { 
    width: 0;
    height: 0;
}*/
.summary-wrap1 {
    overflow: scroll;
   /* height:100%;*/
    /* display: flex;
        flex-flow: column;*/
    /*height:550px;*/
   /* margin-bottom: 15px;*/
}
.capitalize {
  text-transform: capitalize;
}
.pac-container {
    z-index: 10000 !important;
    font-family: "Poppins" !important;
    border-radius:0px 0px 8px 8px !important;
}
.pac-logo:after {
    background-image: none !important;
}
.save-delivery-options input {
    background: var(--color-btn-primary);
    color:#FFF;
    border:none;
    text-transform: uppercase;
    text-align:center;
    font-size:13px;
}
input.save-delivery-options:hover
{
    text-decoration:none;
    color:#2c2c2c !important;
}

p.description-details-selected {
    display: unset;
    font-family: var(--font-family);
    font-style: normal;
    font-size: calc(var(--font-title) - 5px);
    font-weight: 700;
    line-height: 16.9px;
    letter-spacing: .4px;
    color: var(--color-title-menu);
}
a.button_cancel {
    font-size: calc(var(--font-title) - 5px) !important;
    border-radius:4px;
    padding:4px;
    color: var(--color-title-menu) !important;
}
.preview-bar {
    z-index: 999999;
    width: 100%;
    padding: 20px;
}
.noty_bar {
    padding:8px !important;
    font-family: var(--font-family);
    font-style: normal;
    font-size: calc(var(--font-title) - 5px);
    font-weight: 500;
}
.availability {
    text-align: right;
    grid-area: availability;
    text-transform: uppercase;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 500;
    font-size: calc(var(--font-title) - 5px);
    color: #4cbba1;
    letter-spacing: 1px;
    position: relative;
    margin-top: auto;
    margin-right: 25px;
}
.cupom-title {
    padding: 40px 0px 20px 120px;
    font-family: var(--font-family);
    font-size: var(--font-title);
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-title-menu);
    margin-left: -10px;
}
.descrition-title {
    font-family: var(--font-family);
    font-size: calc(var(--font-title) - 3px);
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.5px;
    text-align: center;
    color: #27283e;
    margin-bottom: 20px;
}
.gallery_merchant {
    width: 150px;
    height: 150px;
    border-radius:8px;
    margin:10px;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 10%);
}
a.forgot-pass-link3 {
    font-size: calc(var(--font-title) - 4px);
}
.item-menu-desktop > ul#tabs li {
    color: var(--color-menu-text)
}

/* <!-- Ronald Task loyalty Start -->*/
.cardimg{
    border-radius: 10px !important;

    top: 15px!important;
    right: 15px!important;
    width: 110px!important;
}
.balancees{
    font-family: "larabie";
    font-style: normal;
    font-weight: 500;
    font-size: 23px;
    color: #ffffff;
    text-shadow: 0px 1px 1px rgba(0,0,0,.8);
    letter-spacing: 1.3px;
    margin-left: 4.5px;
}
/* <!-- Ronald Task loyalty End -->*/
/*

html,body{
font-weight: 400;
margin:0;
padding:0;
height:100%;
font-size:14px;
color:#474d5d;

}

html,body,div,a,h1,h2,h3,h4,h5,p{
}

a {
   outline: 0 !important;
}


ul,li{
margin:0 ;
padding:0 ;
}

li{
list-style:none;
}

.clear{
clear:both;
}

.left{
float:left;
}

.right{
float:right;
}

.header-wrap{
background:#21B0D1;
min-height:114px;
color:#FFFFFF;
font-size:13px;
font-family:'Roboto',sans-serif;
}

.main{
width:964px;
margin:auto;
}

.section-top{
margin-top:25px;
}

.section-top i{
font-size:18px;
width:20px;
}

.section-top ul{
padding:0;
}

.section-top a{
color:#FFFFFF;
}

.section-top a:hover, .footer-wrap a:hover{
color:#FFFFFF;
text-decoration:underline;
}

.logo-wrap{
margin-top:35px;
}

.section-top li{
padding-bottom:4px;
}

.logo-wrap img{
max-height:60px;
}

.section-right{
float:right;
}

#top-menu li, .section-social li{
float:left;
margin-right:10px;
}

.section-social{
float:right;
margin-top:10px;
}

.section-social i{
color: #FFFFFF;
font-size: 25px;
margin-left: 5px;
margin-right: 10px;
margin-top: 4px;
}

.section-social a{
display:block;
border:1px solid #FFFFFF;
width: 30px; height: 30px;  -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;


}

.section-social .fa-facebook{
margin-left:8px;
}

.section-social a:hover i, .section-social a:hover{

text-decoration:none;

}

.section-social a:hover{
margin-top:-5px;
}


.section-social .fa-twitter-square{
}

.section-social .fa-google-plus{
}

.sub-header{
width:100%;
min-height:40px;
background:#FFFFFF;
z-index:500;
}

.uk-active .sub-header{
border-bottom:1px solid #ccc;

border-bottom:none;
border-top:none;

box-shadow:0 5px 5px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 5px 5px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 5px 5px 2px rgba(0, 0, 0, 0.1);

}

.sub-header ul{
padding:0;
margin:0;
margin-left:20px;
}

.sub-header ul li{
float:left;
font-size:15px;
}

.sub-header ul li a{
line-height:40px;
display:block;
color:#AAAAAA;
font-family:'Roboto',sans-serif;
padding:0px 15px;
position:relative;
min-width:200px;
text-align:center;
}

.line{
height:4px;
background:#21B0D1;
margin-top:-4px;
display:none;
}

.sub-header ul li a:hover{

text-decoration:none;
}

.sub-header ul li.active a{
color:#21B0D1;
}

.order-steps li a.inactive{
pointer-events:none;
}

.sub-header ul li.current .line{
display:block;
}

.banner-wrap{
min-height:350px;
background:url("../images/icons/Category/Menu/010-food-16.png") repeat-x center center;
background-size:cover !important;
position:relative;
}

.bg-fadein{
opacity: 1.0;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
-o-transition: background 1.5s linear;
-ms-transition: background 1.5s linear;
transition: background 1.5s linear;
}

.search-wrapper{
width:478px;
min-height:206px;

background:url("../images/bg-transparent.png");
border:1px solid #606264;
}

.search-wrapper h2{
color:#FFFFFF;
text-align:center;
}

.search-wrapper .inner{
margin:30px 10px;
}

.search-wrap{
margin:auto;
width:478px;
padding-top:60px;
}

.rounded{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px; 
-khtml-border-radius: 2px;
}

.rounded2{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
}

.search-input-wrap{
position:relative;
background:#FFFFFF;
}

.search-input-wrap #s,
#advance-search .search-input-wrap input[type="text"],
.search-input-wrap #zipcode,
.search-input-wrap #address
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
font-size: 20px;
padding: 8px 20px;
width: 85%;
}

.search-input-wrap button{
background: #21B0D1;
border: none;
height: 40px;
position: absolute;
width: 69px;
}

.search-input-wrap button i{
color:#fff;
font-size:20px;
}

.search-wrapper p{
text-align:center;
color:#FFFFFF;
}


.browse-wrapper{
background:#FFFFFF;
padding-top:20px;
}

.browse-wrapper .main, .footer-wrap .main, .footer-sub .main,
.search-result-wrapper .main,
.page-right-sidebar .main
{
min-height:80px;
padding:20px;
}

.footer-sub .main{
min-height:inherit;
}

ul.list-line li{
float: left;
margin-right: 15px;
width: 30%;
margin-bottom:8px;
}

ul.list-line li a{
color:#21B0D1;

}

ul.list-line li a:hover{
color:#363636;
text-decoration:none;
}

.footer-wrap{
background:#333333;
color:#FFFFFF;
font-size:12px;
}

.footer-wrap ul{
margin:0;
padding:0;
}

.footer-wrap a{
color:#FFFFFF;
}

.footer-soocial{
padding-left:0px;
}

.footer-soocial ul{
padding-left:0px;
}

.footer-soocial li{
float:left;
margin-right:8px;
}

.footer-soocial li a{
color:#FFFFFF;
font-size:20px;

display:block;
border:1px solid #FFFFFF;
width: 25px; height: 25px;  -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 


}

.footer-soocial li a i{
margin-left: 6px;
margin-top: 3px;
}
.footer-soocial li a:hover{
text-decoration:none;
opacity:0.5;

-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); 

}

.footer-sub{
background:#222222;
color:#FFFFFF;
}

.footer-sub p{
margin:0;
padding:0;
}

.back-top{
border: 1px solid #606264;
bottom: 50px;
display: block;
height: 40px;
margin-right: 70px;
position: fixed;
right: 0;
width: 40px;
background:url("../images/bg-transparent.png");
z-index:500;
display:none;

-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}

.to-top{
background:url("../images/top-scroller.png") no-repeat 0px 0px;
width:34px;
height:34px;
display:block;
position:absolute;
top:4px;
left:3px;
}

.to-top:hover{
background:url("../images/top-scroller.png") no-repeat 0px -40px;
}

.back-top i{
color:#FFFFFF;
font-size:20px;
margin:10px;
}

.browse-wrapper ul{
border-bottom:1px solid #444444;
}

.preloader{
display:block;
position:fixed;
z-index:9999;
top:0;
right:0;
height:64px;
width:64px;
border:1px solid #EEEEEE;
background:url("../images/Preloader_2.gif") no-repeat;
}





.search-result-wrapper .main, .page-right-sidebar .main,
.page .main{
background:#FFFFFF;
margin-top:15px;
margin-bottom:15px;
padding-bottom:50px;
}

.page .main{
min-height: 80px;
padding: 20px;
}


.search-result-wrapper #table_list p, .restaurant-wrap p, .restaurant-wrap h5,
.rating-wrapper p
{
margin:0;
padding:0;
}

.search-result-wrapper #table_list h5{
padding:0;
margin:0;
}

.search-result-wrapper #table_list h5 a, .restaurant-wrap h5,
#restaurant-mini-list h5 a
{
color:#CB202D;
font-weight:600;
}

.grid  .grid-1, .grid  .grid-2{
}

.grid .grid-1, .page-right-sidebar .grid .grid-2{
width:35%;
}

.grid  .grid-2, .page-right-sidebar .grid .grid-1{

width:60%;
margin-right:12px;
}

.search-box-wrap{
border:1px solid #ccc;
margin:2px 10px;
background:#eee;
padding:8px;
margin-bottom:20px;
}

.search-box-wrap h4{

margin:0;
}

.search-box-wrap a{
display:block;
border-bottom:1px solid #ccc;
padding:5px 0px ;
}

.search-box-wrap a .right{
padding-right:10px;
}

.search-box-wrap a i{
color:#ccc;
font-size:20px;
}

.text-field-wrap input[type="text"]{
border:none;
padding:5px 8px;
background:none;
width:80%;
}

.text-field-wrap{
background:#fff;
border:1px solid #ccc;
position:relative;
}

.text-field-wrap button{
background: #21B0D1;
border: medium none;
position: absolute;
height:26px;
width:50px;
right:0;
}

.text-field-wrap button i{
color:#FFFFFF;
font-size:15px;
}

.dataTables_info{
float:left;
}

.dataTables_paginate{
float:right;
}

.dataTables_paginate a{
border:1px solid #ccc;
padding:4px 13px;
background:#FFFFFF;
margin-right:3px;
color:#2D2D2A;
}

.dataTables_paginate a:hover{
color:#CB202D;
text-decoration:none;
}

.dataTables_paginate a.paginate_disabled_previous, .dataTables_paginate a.paginate_disabled_next{
opacity:0.3;
}

.dataTables_paginate a.paginate_disabled_previous:hover, .dataTables_paginate a.paginate_disabled_next:hover{
color:#2D2D2A;
cursor:auto;
}

#table_list img, .restaurant-wrap img{
max-width:90px;
max-height:90px;
}

.restaurant-wrap img{
max-width:100px;
max-height:100px;
}

.rate-wrap h6{
background:#3F7E00;
color: #FFFFFF;
display: block;
font-size: 16px;
margin: 0;
padding: 6px 9px;
text-align: center;
width: 30px;
}

.rate-wrap span{
text-transform:uppercase;
color:#8D8D85;
 font-size: 10px;
}

.opening-hours-wrap{
position:relative;
font-size:13px;
}

.opening-hours-wrap ul{
margin:15px 0;
padding:0;
background:#222222;
color:#C2C2C2;
padding:8px 12px;
font-size:13px;
position:absolute;
width:350px;
display:none;
}

.opening-hours-wrap ul i{
color: #222222;
font-size: 25px;
position: absolute;
top: -15px;
}

.opening-hours-wrap ul li{
display:table;
}
.opening-hours-wrap ul li span,
.opening-hours-wrap ul li value
{
display:table-cell;
min-width:100px;
}

.opening-hours-wrap:hover ul{
display:block;
}

.restaurant-wrap, .rating-wrapper{
margin-bottom:15px;
}

.btn-flat-grey{
background-color: #F4F4F2;
color: #4A4A47;
display: block;
height: 41px;
line-height: 43px;
margin-right: 3px;
text-indent: 4px;
transition: background-color 0.15s ease-out 0s;
text-transform:uppercase;
text-align:left;

text-indent:20px;
font-weight:bold;
}

.btn-flat-grey i{
font-size:18px;
}

.btn-flat-grey:hover{
background:#CBCBC8;
text-decoration:none;
color: #4A4A47;
}

.br-widget a span{
background: #9A9A93;
color: #FFFFFF;
display: inline-block;
height: 20px;
margin-right: 2px;
padding: 4px 6px;
width: 15px;
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; 
-khtml-border-radius: 3px;
}

.rating-wrapper p{
font-size:12px;
text-transform:uppercase;
font-size:11px;
}

.br-current-rating{
font-size:12px;
font-weight:bold;
text-indent:240px;
height:20px;
}



.br-widget a.level-1.br-active span, .br-widget a.level-1.br-selected span{
background:#CB202D;
}

.br-widget a.level-2.br-active span, .br-widget a.level-2.br-selected span{
background:#DE1D0F;
}

.br-widget a.level-3.br-active span, .br-widget a.level-3.br-selected span{
background:#FF7800;
}

.br-widget a.level-4.br-active span, .br-widget a.level-4.br-selected span{
background:#FFBA00;
}

.br-widget a.level-5.br-active span, .br-widget a.level-5.br-selected span{
background:#EDD614;
}

.br-widget a.level-6.br-active span, .br-widget a.level-6.br-selected span{
background:#9ACD32;
}

.br-widget a.level-7.br-active span, .br-widget a.level-7.br-selected span{
background:#5BA829;
}

.br-widget a.level-8.br-active span, .br-widget a.level-8.br-selected span{
background:#3F7E00;
}

.br-widget a.level-9.br-active span, .br-widget a.level-9.br-selected span{
background:#305D02;
}

.br-widget a.level-1.br-active span{
background:#CB202D;
}

.menu{
}

.menu .menu-category{
display:block;	
background:#3399FF;
color:#FFFFFF;
text-decoration:none;
padding:8px;
position:relative;
border-bottom:1px solid #fff;
}

.menu .menu-category i{
position:absolute;
right:20px;
}

.menu ul{
margin:0;
padding:0;
margin-top:10px;
margin-bottom:10px;
}

.menu ul li{
margin:0;
padding:0;
float:left;
width:49%;
}

.menu ul li .proce-wrap{
text-indent:60px;
}
*/
.view-item-wrap{
width:600px;
min-height:200px;
padding:10px 20px;
background:#FFFFFF;
font-size:13px;
font-family: 'PT Sans', sans-serif;
}

.view-item-wrap p,.view-item-wrap h1{
margin:0 !important;
}

.view-item-wrap h1{
font-size:20px;
}

.view-item-wrap .section h3{
background:#F2F2F2;
color:#363636;
margin-bottom:3px;
margin-top:3px;
padding:1px 5px;
font-size: 14px;
}

.view-item-wrap .section li{
float:left;
margin-right:10px;
}

.view-item-wrap .section.section-addon li{
float:none;
margin-right:0px;
}

.view-item-wrap .section li span{
display:block;
float:left;
padding:4px 8px;
}

.view-item-wrap .section li span.size{

min-height:20px;
}

.view-item-wrap .section li span.price{

min-height:20px;
}


.quantity-wrap{
}

.quantity-wrap input[type="text"]{
text-align:center;
}

.quantity-wrap a{
display:block;

float:left;
background:#655B4F;
position:relative;
color: #C8C1B8;
padding:2px 12px;
border:1px solid #0E0E0D;
}

.quantity-wrap.quantity-wrap-small a{
padding:4px;
height:15px;
}

.quantity-wrap.quantity-wrap-small a i{
margin-top:1px;
}

.quantity-wrap.quantity-wrap-small input[type="text"]{
padding:3px;
width:25px;
}

.quantity-wrap .numeric_only{
padding:4px;
}

.quantity-wrap a:hover{
text-decoration:none;
background:#73685a;
}

.quantity-wrap a i{
color: #C8C1B8;
font-size: 14px;

margin-top:5px;
}

.special-instruction{
margin-left:10px;
}

.notes-wrap{
margin-top:10px;
display:block;
}


.formtest1md1{
margin-top:10px;
display:none;
}

.formtest1md2{
margin-top:10px;
display:none;
}

.formtest1md3{
margin-top:10px;
display:none;
}

.formtest2md2{
margin-top:10px;
display:none;
}

.formtest2md3{
margin-top:10px;
display:none;
}


.formtest3md3{
margin-top:10px;
display:none;
}



.view-item-wrap p{
margin:0;
padding:0;
}

.action-wrap{
margin-top:10px;
padding: 4px 10px;
background:#1F3A60;
}

.action-wrap .uk-button{
text-transform:uppercase;
font-family: 'PT Sans', sans-serif;
}

.order-list-wrap{

}

.order-list-wrap h5{
text-align:center;
padding:8px 0px;
font-weight:600;
color:#CB202D;
}

.item-order-list{
padding-bottom:5px;
padding-top:5px;
}

.item-row .a,
.item-row .b,
.item-row .c,
.item-row .d,
.summary-wrap .a
{
float:left;
}

.item-row .manage, .summary-wrap .manage{
float:right;
}


.item-row .a{
width:25px;
text-indent:2px;
}

.item-row .c{
margin-right:1px;
}

.item-row .d, .summary-wrap .b{
width:80px;
text-align:right;
}

.item-row .b{
margin-right:1px;
width:150px;
word-break: normal;
}

.item-row a{
font-size:20px;
margin-right:5px;
color:#9A9A93;
}

.item-row a:hover{
color:#CB202D;
text-decoration:none;
}

.summary-wrap .a{
text-align: right;
width: 210px;
}

.summary-wrap{
padding-top:10px;
}

.bold{
font-weight:bold;
}
.summary-wrap .bold{
font-size:14px;
}

.order-list-wrap p{
}

.order-list-wrap p.uk-text-small{
text-align:left;
font-style:italic;
margin:0;
padding:0;
}

.order-list-wrap .uk-button{
display:block;
margin:auto;
width:90%;
}


.sections h2.text-left{
margin:0;
margin-bottom:6px;
}

.normal-price{
text-decoration:line-through;
}

.sale-price{
color:#D4232B;
font-size:13px;
font-weight:600;
}

.delivery_options{
margin: auto;
width: 80%;
margin-bottom:10px;
}

.delivery_options h5{
margin:0;
padding:0;
margin-bottom:8px;
}

.delivery_options input[type="text"], .delivery_options select{
display:block;
width:100%;
padding:3px 5px;
margin-bottom:5px;
}

.checkout-page h3{
margin-top:0px;
}

.checkout-page form{
min-height:260px;
}

.spacer{
height:10px;
}
.spacer2{
height:20px;
}

.hidden, .change_wrap{
display:none;
}


.receipt-wrap.order-list-wrap{
padding:15px 10px;
}

.receipt-main-wrap{
width:410px;
margin:auto;
}

.input-block .label{
width:50%;
float:left;
}

.input-block .value{
width:50%;
float:right;
text-align:right;
}

.spacer-small{
padding-top:5px;
padding-bottom:5px;
}

/*.menu{
border:1px solid #AFAFAF;
}

.menu ul{
margin:0;
padding:0;
}

.menu ul li{
border-right:1px solid #AFAFAF;
display:block;
padding:5px 8px;
width:271px;
border-bottom:1px solid #AFAFAF;
}

.menu ul.menu-ul li.last{
border-bottom:none;
}

.menu ul li.even{
border-right:none;
}

.sale-price{
padding-left:10px;
}

.menu-ul li a{
color:#474d5d;
}

.menu-ul li:hover{
background:#FCEFE7;
}

.sortby_text{
}

.login-modal-wrap, .pop-wrap{
width:431px;
margin:auto;
background:#fff;
}

.login-modal-wrap .modal-header, .pop-wrap .modal-header{
background:#F4F4F2;
padding:5px 8px;
}

.login-modal-wrap .modal-header h3,
.pop-wrap .modal-header h3
{
margin:0;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}

.login-modal-wrap .modal-header a{
color:#ccc;
font-size:20px;
}

.login-modal-wrap .modal-header a:hover{
opacity:0.5;
}

.login-modal-wrap p{
text-align:center;
}

.modal-body{
padding:20px 20px;
font-weight:normal;
}

.login-btn-wrap{
margin:auto;
width:200px;
}

.login-btn-wrap a{
margin-right:10px;
}

.fb-link-login{
background:#3B5998;
color:#FFFFFF;
display:block;
width:80%;
font-family: 'PT Sans', sans-serif;
position:relative;
margin:auto;
}

.fb-link-login:hover{
color:#FFFFFF;
text-decoration:none;
}

.fb-link-login .label{
color:#FFFFFF;
display:block;
float:left;
width:50px;
height:40px;
position:relative;
background:#2B4988;
}
.fb-link-login .label i{
font-size: 30px;
font-weight: bold;
left: 20px;
position: absolute;
top: 5px;
}

.fb-link-login span{
display: block;
float: left;
font-size: 18px;
left: 70px;
position: absolute;
top: 9px;
}

.section2,.section3, .section-forgotpass,
.hide
{
display:none;
}

.review-content-wrap{
width:500px;
display:none;
}

#review_content{
width:100%;
min-height:80px;
margin-top:5px;
}

.review-content-wrap input[type="submit"]{
margin-top:5px;
}

.write-review.active{
background:#CB202D;
color:#FFFFFF;
}

.rating_handle {
padding-left:20px;
}

.list-reviews{
border:1px solid #ccc;
padding:10px;
margin-bottom:8px;
}

.list-reviews h4{
margin:0 0 0 10px;
padding-top: 10px;
}

.list-reviews .head{
border-bottom:1px solid #ccc;
padding-bottom:5px;
}

.avatar{
position:relative;
font-size:20px;
border:1px solid #ccc;
width: 38px; height: 38px;
-moz-border-radius: 35px ; -webkit-border-radius: 35px ; border-radius: 35px ;
}

.avatar i{
color: #444444;
font-size: 28px;
left: 8px;
position: absolute;
top: 5px;
}

.reviews-wrap h4{
}

#google_map_wrap{
border:1px solid #E4E7EA;
width:100%;
height:400px;
}

.uk-form-row{
position:relative;
}

.dataTables_processing{
height: 155%;
position: absolute;
width: 100%;
background:rgb(255, 255, 255); background:rgba(255,255,255,0.4);
z-index:2;
}

.dataTables_processing p{
font-weight:normal;
color:#fff;
padding:8px;
font-size: 20px;
left: 35%;
position: absolute;
top:30%;
z-index: 10;
background:url("../images/bg-transparent.png");
border:1px solid #606264;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; 
-khtml-border-radius: 5px;
}

.dataTables_wrapper{
position:relative;
}

.review-action{
width:140px;
padding-top:10px;
padding-bottom:10px;
}

.review-action .edit-review{
margin-right:10px;
}

#review_content.uk-form-width-large{
min-height:150px;
}

.print_wrap{
margin:10px;
}

.page-right-sidebar .left-content{
width: 60%;
}

.page-right-sidebar .right-content{
width:35%;
}

.order-history li a{
margin-right:15px;
}


.main.packages-wrap{
padding-top:60px;
padding-bottom:60px;
}

.view-receipt-pop{
width:400px;
padding:10px;	
}

.packages-wrapper{
float:right;
position:relative;
left:-50%;
text-align:left;
}

.packages-list{
list-style:none;
position:relative;
left:50%;
}

.packages-list li{
float:left;
width:218px;
border-right:5px solid #F0F0F0;
 position:relative;
}

.packages-list li:last-child{
border-right:none;
}

.packages-list li h2{
margin:0;
text-align:center;
background:#F9F9F9;
color:#959CA4;
padding:10px 0px;
min-height:60px;
}

.packages-list li h3, .packages-list li p, .packages-list li a{
color:#55A2E8;
margin:0;
text-align:center;
padding:8px 0px;
}

.packages-list li p{
background:#F9F9F9;
}

.packages-list li a{
font-weight:bold;
display:block;
color:#fff;
text-decoration:none;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.packages-list li a:hover{
opacity:0.5;
}

.packages-list li p.even{
background:#fff;
}

.packages-wrap h2.uk-h2{
text-align:center;
}

.signup-merchant-wrap{
width:80%;
}

.signup-merchant-wrap h3{
text-align:center;
}

.signup-merchant-wrap .chosen-choices li.search-field {
line-height:30px;
}

.signup-merchant-wrap .chosen-choices li.search-field  input[type="text"]{
height:30px !important;
border:1px solid blue;
}

.merchant-step-section .order-steps{
}

.cc_page .dataTables_info, .search-box-wrap .filter_minimum_clear,
.search-box-wrap .frm_search_name_clear
{
display:none;
}

.nomargin{
margin:0;
padding:0;
}

#contact-page .uk-form-row, #lost-pass-wrap .uk-form-row{
width:65%;
}

#contact-page #google_map_wrap{
height:300px;
margin-bottom:20px;
}


.logo-wrap a h1{
color:#fff;
font-size:50px;
overflow:hidden;
}

.logo-wrap a:hover{
text-decoration:none;
}



.footer-address{
}

.sigin-fb-wrap{
margin: auto;
width: 155px;
}

.or{
margin-top:20px;
text-align:center;
font-weight:bold;
position:relative;
width:250px;
margin:20px auto;
}

.or span{
border-bottom: 1px solid #DDDDDD;
display: block;
position: absolute;
top: 9px;
width: 100px;
}

.or span.r{
right:0;
}

.quantity-wrap a:hover{
color:#fff;
}

ul#bottom-menu li a, ul#top-menu a{
}

.header-wrap .section-mobile-menu-link{
margin-left:15px;
margin-top:20px;
display:none;
}

.section-mobile-menu-link a{
color:#fff;
font-size:40px;
}

.section-mobile-menu-link a:hover{
color:#fff;
opacity:0.5;
}

.search-wrapper h2{
margin-bottom:4px;
}

.search-wrapper p.uk-text-muted{
margin:0;
margin-bottom:5px;
}

.no-resto h4{
margin:0;
margin-top:5px;
}

#mobile-menu a i{
margin-right:10px;
}

#mobile-menu a{
text-transform:capitalize;
}

.packages-wrap .frm-resume-signup, .ie-no-supported-msg{
display:none;
}



.menu-ul .menu-item .left{
width:auto;
}

.menu-ul .menu-item .left{
}

.language-wrapper{
position:absolute !important;
top:0;
right:0;
}

.language-wrapper ,fa-globe{
}


#menu-with-bg{
background-size:cover;
min-height:500px;
position:relative;
}

#menu-with-bg-wrap{
position:relative;
background:#fff;
}

#menu-with-bg-wrap .main{
position:relative;
margin-top:-200px;
margin-bottom:0px;
z-index:2;
}

#menu-wrap .merchant-info1{
margin-bottom:20px;
}

#menu-with-bg-wrap .rating-wrapper{
width:95%;
}

#menu-with-bg-wrap .rating-wrapper img{
width:90px;
display:block;
float:left;
height:100px;
}

#menu-with-bg-wrap .rating-wrapper .write-review-wrap{
width:170px;
display:block;
float:right;
}

#menu-with-bg-wrap .rating-wrapper .write-review-wrap a{
margin-top:55px;
}

#menu-with-bg-wrap .rating-wrapper a.write-review i{
text-indent:10px;
}

#menu-with-bg-wrap .rating-wrapper h5{
font-size:35px;
color:#434142;
margin-top:10px;
display:block;
position:absolute;
max-width:450px;
}

#menu-with-bg-wrap .rating-wrapper .rate-wrap{
float:right;
margin-right:25px;
}

#menu-with-bg-wrap .merchant-info2{
margin-bottom:40px;
}

#menu-with-bg-wrap .merchant-info2 h5{
color: #CB202D;
font-weight: 600;
margin:0;
}

#menu-with-bg-wrap .merchant-info2 p{
margin:0;
padding:0;
}

.menu-with-bg-border{

box-shadow:-5px -5px 10px -5px #333333;
-webkit-box-shadow:-5px -5px 10px -5px #333333;
-moz-box-shadow:-5px -5px 10px -5px #333333;

padding-right:10px;
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:-1;
}


.voucher_wrap .remove_voucher{
display:none;
}
.ops_notification{
margin-top:20px;
text-align:center;
display:none;
}
.ops_notification p{
margin:0;
}

.ops_notification h3{
color:#21B0D1;
}

.direction_wrap{
margin-top:20px;
}

#origin{
width:100%;
}
.direction_output{
margin-top:5px;
display:none;
width:100%;
border:1px solid #ddd;
}

#flexslider li{
margin-right:20px;
}

#flexslider{
box-shadow:none;
}


.two-columns .grid-1{
width:60%;
margin-right:35px;
}

.two-columns .grid-2{
width:35%;
}

#tabs {

}

#tabs .uk-width-small-1-3{
margin:0;
padding:0;
}

#tabs .uk-width-medium-1-2{
margin: 0 0 0 15px;
padding: 0;
width: 60%;
}

#tabs .uk-tab-left li{
border-bottom:1px solid #e5e5e1;
background:linear-gradient(white,#f0f0f0);
text-decoration:none;
border-right:1px solid #e5e5e1;
}
#tabs .uk-tab-left li.uk-active{
border-right:none;
}

#tabs .uk-tab-left li a{
color:#3B65A7;
}

#tabs .uk-tab-left li.uk-active a{
margin:0;
border:none;
}



#wrapper {

}

#wrapper .uk-width-small-1-3{
margin:0;
padding:0;
}

#wrapper .uk-width-medium-1-2{
margin: 0 0 0 15px;
padding: 0;
width: 100%;
}

#wrapper .uk-tab-left li{
border-bottom:1px solid #e5e5e1;
background:linear-gradient(white,#f0f0f0);
text-decoration:none;
border-right:1px solid #e5e5e1;
}
#wrapper .uk-tab-left li.uk-active{
border-right:none;
}

#wrapper .uk-tab-left li a{
color:#3B65A7;
}

#wrapper .uk-tab-left li.uk-active a{
margin:0;
border:none;
}

#tab-left-content{
padding-top:8px;
overflow:hidden;
}

#restaurant-mini-list{
border-bottom:1px solid #ddd ;
padding-bottom:10px;
position:relative;
margin-top:10px;
}

#tab-left-content #restaurant-mini-list:last-child{
}

#restaurant-mini-list h5, #restaurant-mini-list p{
margin:0;
}

#restaurant-mini-list .uk-width-7-10{
padding-left:10px;
}

#restaurant-mini-list .rate-wrap {
position: absolute;
right: 0;
top: 0;
}

#restaurant-mini-list p{
width:80%;
}

.section-to-menu-user .uk-button-dropdown{
margin-top:-5px;
padding-bottom:8px;
}

.maps_side{
min-height:470px;
width:100%;
border:1px solid #ddd;
}

.pagination{
margin-top:10px;
margin-bottom:10px;
}

.view-map{
font-size:12px;
}

.change-address{

color: #8CC14C;
font-size: 11px;
font-weight: normal;
}

.hr_op{
z-index:200;
}

.share-wrap ul{
margin:0;
padding:0;
}

.share-wrap ul li{
float:left;
margin-right:8px;
}

.share-wrap ul li a i{
font-size:35px;
}

.share-wrap ul li a{
transition:all 0.2s ease-in-out 0s;
}

.share-wrap ul li a i.fa-facebook-square{
color:#4460AE;
}
.share-wrap ul li a i.fa-twitter-square{
color:#078CB9;
}
.share-wrap ul li a i.fa-linkedin-square{
color:#2C86BA;
}
.share-wrap ul li a i.fa-google-plus-square{
color:#BE3939;
}

.share-wrap ul li a:hover{
opacity:0.5;
}

.qq-upload-list{
display:none;
}

.advance-search .search-wrap{
width:55%;
}

#search-tabs{
display:none;
}

.advance-search ul li a{
font-size:14px;
font-weight:normal;
font-family: "Open Sans","Roboto","sans-serif";
}

.advance-search .ui-tabs{
background:none;
padding:0;
margin:0;
-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
}

.advance-search .ui-widget-header{
background:none;
border:none;
}

.advance-search .ui-tabs .ui-tabs-nav{
padding:0;
}

.advance-search #tabs-1,
.advance-search #tabs-2,
.advance-search #tabs-3,
.advance-search #tabs-4,
.advance-search #tabs-5
{
color:#fff;
font-size:14px;
font-weight:normal;
font-family: "Open Sans","Roboto","sans-serif";
background:url("../images/bg-transparent.png");
border:none;
-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
}

#advance-search .ui-state-default{
background:url("../images/bg-transparent.png");
border:none;
-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
}

#advance-search .ui-state-default.ui-tabs-active{
border-top:2px solid #F48933;
}

#advance-search .ui-state-default a
{
color:#fff;
}

#advance-search #search-tabs{
border:none;
}

#advance-search .search-input-wrap button{
right:0;
height:43px;
}
#advance-search .search-input-wrap #s,
#advance-search .search-input-wrap input[type="text"]
{
color:#363636;
font-weight:normal;
font-family: "Open Sans","Roboto","sans-serif";
height:auto;
}

#advance-search .search-input-wrap .uk-autocomplete{
width:85%;
}

#advance-search .uk-dropdown{
width:80%;
}

.search-map-wrap{
border:1px solid #ccc;
width:1000px;
margin:auto;
background:#fff;
margin-top:10px;
min-height:300px;
}
.search-map-wrap, #ui-datepicker-div{
display:none;
}

.payment-provider-wrap{
margin-left:20px;
display:none;
}
.payment-provider-wrap img{
max-width:60%;
padding-right:10px;
}

.payment-provider-wrap li{
height:80px;
width:120px;
float:left;
}

.offers-wrap{
display:inline-table;
padding:5px 10px;
background:#E9E5DC;
color:#1D7396;
font-size:14px;
position:relative;
}

.menu-wrapper .offers-wrap{
margin-top:10px;
}

#table_list .offers-wrap{
display: inline-block;
margin-top: 8px;
padding: 5px 8px;
text-align: center;
text-transform: uppercase;
}
#table_list .uk-badge{
margin-top:5px;
}

.marker-info-wrap{
}

.marker-info-wrap .uk-thumbnail{
float: left;
margin-right: 10px;
width: 100px;
height:100px;
}

.footer-sub .footer-a{
border:0px solid red;
width:38%;
padding-right:5px;
}
.footer-sub .footer-b{
border:0px solid red;
}
.tbl-wraper{
display:table;
}
.tbl-wraper .tbl-col{
display:table-cell;
}
.footer-b p{
font-size:12px;
}
.footer-sub input[type="text"]{
color:#7C7B7B;
background:#333333;
font-size:13px;
border:none;
padding:6px 8px;
margin-left:5px;
margin-right:5px;
min-width:200px;
}
.footer-a p{
padding-top:5px;
}

.footer-sub input[type="submit"]{
background:none;
border:1px solid #333333;
color:#7C7B7B;
padding:6px 8px;
}
.footer-sub input[type="submit"]:hover{
color:#333;
}

.featured-restaurant-list{
background:#222222;
padding:10px;
padding-bottom:15px;
border-bottom:5px solid #444444;
}

.bxslider{
display:none;
}

.featured-restaurant-list h2{
color:#fff;
font-size:20px;
text-align:center;
}
.featured-restaurant-list .bx-wrapper .bx-viewport{
background:none;
border:none;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}

.featured-restaurant-list .bx-wrapper img{
height: 100px;
width: 140px;
}
.featured-restaurant-list .bx-wrapper img:hover{
opacity:0.5;
}
.featured-restaurant-list p{
color:#fff;
text-align:center;
font-size:12px;
}
.featured-restaurant-list a p:hover, .featured-restaurant-list a:hover{
color:#21B0D1;
text-decoration:none;
}
.feature-merchant-loader{
color:#fff;
font-size:16px;
text-align:center;
}
.bxslider-2, .bxslider-3{
display:none;
}

.table-div{
display:table;
width:100%;
}

.table-col-1{
display:table-cell;
width:40px;
}
.table-col-2{
display:table-cell;
}

.active-menu-2 .table-col-1, .active-menu-1 .table-col-1{
width:10%;
vertical-align:middle;
padding-bottom:10px;
padding-top:10px;
}

.active-menu-2 .table-col-2, .active-menu-1 .table-col-2{
width:30%;
vertical-align:top;
padding-bottom:10px;
padding-top:10px;
}
.active-menu-1 .table-col-1{
padding-left:8px;
}
.active-menu-1 .table-col-2{
padding-right:8px;
}

.active-menu-1 .table-div{
border:1px solid #D3D3D3;
border-bottom:none;
}
.active-menu-1 .table-div.last{
border:1px solid #D3D3D3;
}

.active-menu-2 h2{
color: #363636;
font-size: 15px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 2px;
text-transform: uppercase;
}

.active-menu-2 img{
height:70px;
width:70px;
display:block;
margin:auto;
-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}

.ux-price{
position:relative;
height:35px;
color:#363636;
}

.ux-price h4{
margin:0;
padding:0;
position:absolute;
top:0;
font-weight:bold;
font-size:13px;
letter-spacing:2px;
background:#fff;
padding-right:5px;
max-width:70%;
}

.ux-price h5{
letter-spacing:2px;
position:absolute;
top:0;
right:0;
margin:0;
font-size:12px;
background:#EAEAEA;
padding:5px 6px;
font-weight:bold;
}

.ux-price samp{
border-bottom: 1px dashed #AAAAAA;
display: block;
position: absolute;
top: 10px;
width: 100%;
}

.active-menu-2 p{
color: #AAAAAA;
font-size: 12px;
line-height: normal
}
.active-menu-2 a:hover p, .active-menu-2 a:hover, .active-menu-2 a:hover .ux-price h4,
.active-menu-1 a:hover p, .active-menu-1 a:hover, .active-menu-1 a:hover .ux-price h4
{
text-decoration:none;
color:#CB202D;
}
 .active-menu-2 a:hover .ux-price h5{
 background:#CB202D;
 color:#fff;
}

.active-menu-2 a:hover img, .active-menu-1 a:hover img{
opacity:0.5;
}

.active-menu-1 img{
width: 100px;
}

.active-menu-1 .ux-price samp{
display:none;
}

.active-menu-1 p{
color: #4D4F52;
font-size: 12px;
}
.categories-wrap{
float:right;
margin-bottom:-40px;
}

.signup-selection h3{
text-align:center;
}


.signup-selection .table{
display:table;
margin:auto;
}

.signup-selection .table li{
display:table-cell;
}

.signup-selection .table li a{
margin:10px;
display:block;
text-align:center;
padding:8px 9px;
}
.signup-selection .table li a h5{
margin:0;
padding:0;
font-size:20px;
font-weight:bold;
}

.signup-selection .table li a p{
margin-bottom:0;
margin-top:5px;
}

.signup-selection .table li a:hover{
text-decoration:none;
opacity:0.5;
}

.signup-selection .table li a.a{
background:#40B9C6;
color:#fff;
}
.signup-selection .table li a h5{
color:#fff;
}

.signup-selection .table li a.b{
background:#C92D22;
color:#fff;
}
.page .main.signup-selection{
min-height:300px;
}

.ingredients-label{
font-weight:400;
color:#659F13;
margin-top:5px!important;
font-style:normal !important;
}

.spicydish-icon{
display:block;
max-width: 20px;
}



.order-list-wrap .spicydish-icon
{
max-width: 20px;
}

.spicydish-icon.spicydish-cat{
display:inline-block;
margin-left:5px;
}

.active-menu-2 img.spicydish-cat{
max-width: 25px;
width:25px;
height:auto;
}


.advance-search{
position: relative;
}

.receipt-wrap{
position:relative;
}
.close-receipt{
display: block;
padding: 5px;
position: absolute;
right: 10px;
top: 5px;
}


.form-signup-new .intl-tel-input,
.uk-form .intl-tel-input
{
width:100%;
}
.form-signup .intl-tel-input,
.uk-form .intl-tel-input
{
width:100%;
}

.profile-forms  .intl-tel-input{
width:auto;
}


#fax_page .input-block .label,
#fax_page .input-block .value,
#fax_page .summary-wrap .a,
#fax_page .item-row .d,
#fax_page .summary-wrap .b
{
font-family: arial;
font-size: 16px;
height: 30px;
line-height: 25px;
}

#fax_page .item-row .a,
#fax_page .item-row .b
{
font-family: arial;
font-size: 15px;
height: 30px;
line-height: 25px;
}

.tip-wrapper{
display:table;
}
.tip-wrapper li{
display:table-cell;
padding-right:10px;
}

.tip-wrapper li a{
display:block;
padding:8px;
background:#CCCCCC;
color:#fff;
font-weight:bold;
}

.tip-wrapper li a:hover{
text-decoration:none;
}

.tip-wrapper li a.active{
background:#6886AA;
}


#menu-wrap .write-review-wrap h5{
line-height:1;
}

.full_map_page{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#fff;
}
#map_area{
position:relative;
height:100%;
}

.full_map_search{
position:absolute;
top:5%;
left: 8%;
z-index:999;
padding:2px;
width:405px;
}

.full_map_search input[type="text"]{
width:320px;
}

.full_map_search a,
.full_map_search span.sep
{
color:#21B0D1;
}

.full_map_search a i{
padding-right:5px;
}
.full_map_search .uk-form-row{
background:#fff;
padding:2px;
}

.google-login{
background:#F05B3F;
color: #FFFFFF;
display: block;
font-size: 12px;
margin: 8px auto auto;
padding: 1px;
text-align: center;
width: 150px;
}
.google-login:hover{
color:#fff;
text-decoration:none;
background:#F36044;
}

.receipt-wrap .rc_logo{
display: block;
margin: auto;
max-height: 70px;
max-width: 200px;
}

.view-item-wrap .section li span.rupyaINR{
display: inline;
float: none;
padding: 0;
}
.strike-tru{
text-decoration:line-through;
color:#D4232B;
margin-right:10px;
}

.mytable{
display:table;
}

.mytable .col{
display:table-cell;
}


.mytabl2e .col{

}
.mytable .col .spicydish-icon{
margin-right:5px;
}

.mytable.dish-category{
display:inline-table;
margin-bottom:8px;
}

.active-menu-2 img.spicydish-icon{
height:auto;
width:auto;
}

.active-menu-2 a:hover .ux-price h5 .strike-tru{
color:#fff;
}

.new-merchant-header{
min-height:250px;	
min-height:300px;
max-width:100%;	
background-position:center top;
background-size:cover;
border-bottom:2px solid #ccc;
background-color:#363636;
}

.page-right-sidebar.has-banner .main{
margin-top:0px;
}

.new-menu-wrapper .main{
width:1000px;
}

.page-right-sidebar.new-menu-wrapper .left-menu-content{
width:65%;
float:none;
display:table-cell;
vertical-align:top;
}

.page-right-sidebar.new-menu-wrapper .right-menu-content{
width:35%;
margin-right:0;
float:none;
display:table-cell;
vertical-align:top;
}

.page-right-sidebar.new-menu-wrapper #menu-wrap{
display:table;
width:100%;
}

.page-right-sidebar.new-menu-wrapper .order-list-wrap{
margin-left:30px;
}

.mytable.separate-category-menu{
width:100%;
}

.mytable.separate-category-menu .col.col-category{
width:22%;
vertical-align:top;
}

.mytable.separate-category-menu .col.col-menu{
vertical-align:top;
}

.mytable.separate-category-menu .menu ul li{
width:235px;
}

.side-bar-category li{
padding-top:5px;
padding-bottom:5px;
}
.side-bar-category li a{
color:#363636;
}
.side-bar-category li a:hover{
color:#21B0D1;
text-decoration:none;
}

.side-bar-category{
margin:0;
padding:0;
width:100%;
}

.scroll-parent,
.scroll-parent2
{
min-height:500px;
position:relative;
}

.scroll-child,
.scroll-child2
{
position:absolute;
top: 0px;
}

.scroll-child.scroll-active
{
padding-top:45px;
}

.order-list-wrap.scroll-child2{
width:85%;
}

.back-top-menu
{
color: #363636;
display: block;
margin-top:20px;
}

.back-top-menu:hover{
color:#005599;
text-decoration:none;
}

.map-address-wrap{
padding-bottom:10px;
}

.map_address{
display:block;
height:300px;
}
.map-address-wrap-inner{
display:none;
}


.categories-wrap-mobile,
.search-result-wrapper .filter-search-bar
{
display:none;
}

.filter-search-bar{
font-size:16px;
margin-bottom:20px;
}


.recaptcha{
margin-top:15px;
margin-bottom:15px;
}

.uk-notify,
.pac-container
{
z-index:99999 !important;
}

.order-order-history{
display:none;
}

.food-gallery-wrap{
padding-left:inherit;
}
.food-gallery-wrap img{
max-width:100px;
}
.view-item-wrap .section .food-gallery-wrap li{
margin-right:10px;
}

.mini-pic{
height:55px;
width:60px;
border:1px solid #ddd;
background-size:cover !important;
background-repeat:no-repeat !important;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px; 
-khtml-border-radius: 2px;
}

body .mfp-wrap,
body .mfp-bg
{
z-index:9999;
}



.search-input-wrap.search-input-wrap-normal button{
position:relative;
}
.search-input-wrap.search-input-wrap-normal{
padding:10px 8px;
}

.search-input-wrap.search-input-wrap-normal label{
font-size:18px;
font-weight:bold;
width:80px;
}
.search-input-wrap.search-input-wrap-normal select{
width: 80%;
font-size:16px;
}
.input-search-wrap{
text-align:right;
padding-top:5px;
padding-right:6px;
}
.area-hidden{
display:none;
}

#search-by-postcode .uk-dropdown{
width:100%;
}

.search-input-wrap #zipcode,
.search-input-wrap #address{
width:95%;
}


.points-earn{
font-size:13px;
text-align:center;
color:#999999;
}


@media print {
    html, body {
        border: 1px solid white;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
    }
}


.button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; 
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}

.icon{
font-size:35px;
}
.hidden{
    display: none;
}
#showmobile{
 display: block;
}

@media only screen and (min-width : 768px) {
 #showmobile{
        display: none!important;
    }

}


  
    

    
    .btn-new {
        
        border: solid 1px black;
         border-width:5px;  
    border-style:double;
        background:white;
        color:black;
    }


.myform {
  border: .5em solid lighten(deepskyblue, 30%);
  border-radius: .2em;
  max-width: 600px;
  margin: 3em auto;
  padding: 1em;
}



.newdesign {
  display: flex;
  
  flex-direaction: column;
  justify-content: center;
  align-items: center;
  
  margin: 0;
  min-height: 100vh;
  background: #3498DB;
  font-family: "Open Sans";
}
.signin {
  padding: 1em;
  margin: 1em;
  border-radius: 1em;
  text-align: left;
  background: white;
  color: rgba(0,0,0,0.75);

  }
  
  .error {
    background: rgba(255, 0, 0, 0.4);
    color: white;
    text-shadow:  0 1px 0 rgba(255, 100, 100, 0.75);
    
    margin-left: -1em;
    margin-right: -1em;
    margin-bottom: 1ex;
    
    padding: 1ex;
    
    border-top: 1px solid rgba(255, 100, 100, 0.75);
    border-bottom: 1px solid rgba(255, 100, 100, 0.75);
  }
  
.buttonlong {
    display: block;
    width: 100%;
    
    text-align: left;
    font-size: 1.1em;
    padding: 1ex;
    border: 2px solid #ECF0F1;
    transition: border ease 500ms;
    border-radius: 1ex;
    font-family: "Open Sans";
    background: #ECF0F1;
    color: #181818;
   
}

.rounded10{
     border-radius: 1ex;
}

.rounded5{
     border-radius: 1ex;
}


.blink{
 
  -webkit-border-radius: 10px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}
@-webkit-keyframes glowing {
  0% { -webkit-box-shadow: 0 0 3px #68f94e; }
  50% { -webkit-box-shadow: 0 0 40px #68f94e; }
  100% { -webkit-box-shadow: 0 0 3px #68f94e; }
}

@-moz-keyframes glowing {
  0% { -moz-box-shadow: 0 0 3px #68f94e; }
  50% { -moz-box-shadow: 0 0 40px #68f94e; }
  100% { -moz-box-shadow: 0 0 3px #68f94e; }
}

@-o-keyframes glowing {
  0% {  box-shadow: 0 0 3px #68f94e; }
  50% {box-shadow: 0 0 40px #68f94e; }
  100% { box-shadow: 0 0 3px #68f94e; }
}

@keyframes glowing {
  0% {  box-shadow: 0 0 3px #68f94e; }
  50% {box-shadow: 0 0 40px #68f94e; }
  100% { box-shadow: 0 0 3px #68f94e; }
}

.blink {
  -webkit-animation: glowing 3000ms infinite;
  -moz-animation: glowing 3000ms infinite;
  -o-animation: glowing 3000ms infinite;
  animation: glowing 3000ms infinite;
}


.panel-heading{
background:#006dcc;
}

.scroll_mobile{
     
    position:relative;
    min-width:330px;
    min-height:500px;
    top:10px;
    padding:0px 0px 0px 0px;
    overflow-y:auto;
     overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

.scroll_container {
    background-color:white;
    width:350px;
    height:520px;
    color:#999999;
    border:2px solid #363636;
    border-radius:1ex;
    overflow:hidden;
  
    text-align:justify;
     overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 
  
    position:relative;
}


.scroll_content {
    position:relative;
    width:300px;
    height:420px;
    top:10px;
    padding:0px 0px 0px 0px;
    overflow-y:auto;
     overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

.stickyrice {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  font-size: 20px;
}


.btn-new {
        
        border: solid 1px black;
         border-width:5px;  
    border-style:double;
        background:white;
        color:black;
    }


.panel-heading{
background:#006dcc;
}

#menu-img {
    width: 35px;
    height: 35px;
   background: white;

}


.float-bottom-left{
	position:fixed;
	width:300px;
	height:60px;
	bottom:480px;
	left:10px;
	background-color:transparent;
	color:#FFF;
	border-radius:50px;
	text-align:center;

padding-top:5px;
padding-left:5px;

}

.float-bottom-left-desktop{
	width:300px;
	height:60px;
	left:10px;
	background-color:transparent;
	color:#FFF;
	border-radius:50px;
	text-align:center;
padding-top:5px;
padding-left:5px;

 position: fixed;
    bottom: 0;
    width: 100%;

}






.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 10px;
}
.btn-circle.btn-lg  {
  width: 40px;
  height: 40px;
  padding: 5px 5px;
  font-size: 13px;
  line-height: 1.33;
  border-radius: 35px;
	background-color:cornflowerblue;
color:white;
text-align:center;
}
.btn-circle.btn-xl {
  width: 60px;
  height: 60px;
  padding: 5px 5px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
text-align:center;
	background-color:#d6ed90;
}


#navbar {

  overflow: auto;
    white-space: nowrap;
}

#navbar a {
  float: left;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 0px 0px;
  text-decoration: none;
  font-size: 16px;
paddding-top:5px;
padding-bottom:5px;
font-weight:bold;
}

#navbar a:hover {
  color: white;
}

#navbar a.active {
  color:white;
}

content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 45px;
  width: 100%;
}

.sticky + .content {
  padding-top: 70px;
}

.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;

}

.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
.scrollmenu a:hover {
    background-color: #777;
}

.subnav{
  border-bottom:  1px solid #DADADA;
  background-color: #F7F7F7;
  width:100%;
  height:40px;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
white-space: nowrap;
  overflow-x: scroll;

  -ms-overflow-style: -ms-autohiding-scrollbar; 
}
.wrapper {
    display:inline-block;
    padding: 0 4px;
}

#tabs1{
display: block;

}
#showcatbutton{
display: block;
}
@media only screen and (min-width : 768px) {
 #navbar{
        display: none!important;
    }
#tabs1{
        display: none!important;
    }

#showcatbutton{
        display: none!important;
    }

#showcat{

display:none;

}

}



     
    

@media only screen and (min-width : 768px) {
 #navbar{
        display: none!important;
    }

 #show{
        display: none!important;
    }


.float-bottom-left-desktop{
	position:fixed;
	width:60px;
	height:380px;
	top:100px;
	left:10px;
	background-color:transparent;
	color:#FFF;
	border-radius:50px;
	text-align:center;
padding-top:5px;
padding-left:5px;

}

.btn-circle.btn-lg  {
  width: 85px;
  height: 40px;
  padding: 10px 10px;
  font-size: 13px;
  line-height: 1.33;
  border-radius: 10px;
	background-color:white;
color:blue;
}


}

 .title_message {

    float: center;
    margin: 0px auto 0px 0px;
    width: 28%;
    display: block;
text-align:center;
  }


@media screen and (max-width: 600px) {
  .title_message {
   
    clear: both;
    float: center;
    margin: 5px 0px 0px 0px;

 font-size:10px;
text-align:center;
        display: block;
  }
}



*/
.box
{
    width:80px;

    height:80px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

}



@media screen and (max-width: 320px) {
.box-1 {
    width:50%;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

  }
}
@media screen and (min-width: 321px) and (max-width: 430px) {
.box-1 {
   width:50%;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

  }
}
@media screen and (min-width: 430px)  and (max-width: 680px){
.box-1{
   width:50%;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

  }
}
@media screen and (min-width: 681px)  and (max-width: 980px){
.box-1{
   width:50%;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

  }
}

.box-1{
   width:50%;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

  }


.box-2
{
    width:210px;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

}

.box-2-active
{
    width:210px;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;
background:green;
text-decoration:underline;
color:blue;

}


.box-3
{
    width:100px;

    height:60px;
    float:left;
  object-fit: cover;
   overflow: hidden;
border: 1px solid #ddd;
text-align:center;

}

.container_element
{ white-space:nowrap
    max-width:100%;
    margin:auto;
    overflow-x:scroll;
    overflow-y:hide;
  -webkit-overflow-scrolling:touch;


}

.inner_container
{
width:600px;
height:400px;
}


.floating-action-button {
  position: relative;
  top: 100px;
  margin-left: 50px;
}
ul.dropdown-menu {
  box-shadow: none;
  border: 0;
  min-width:0;
  background:transparent
}

.icon-bar {
    width: 100%;
    background-color: transparent;
    overflow: auto;
}

.icon-bar a {
    float: left;
    width: 20%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: white;
    font-size: 16px;
}

.icon-bar a:hover {
    background-color: #363636;
}

.active {
}




.float-left{
	position:fixed;
	width:60px;
	height:60px;
	bottom:5px;
	left:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
padding-top:16px;
padding-left:5px;

}

.float-top-left{
	position:fixed;
	width:60px;
	height:60px;
	top:80px;
	left:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
padding-top:16px;
padding-left:5px;

}

.float-bottom-left{
	position:fixed;
	width:60px;
	height:260px;
	bottom:40px;
	left:10px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
padding-top:5px;
padding-left:5px;

}

.float-right{
	position:fixed;
	width:60px;
	height:60px;
	bottom:5px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}


.my-float{
	margin-top:22px;
}




@media only screen and (min-width : 768px) {
 .container-new {
             width:100%;
margin-left:10px;
margin-right:10px;
height:80%;
     
    }
}




@media only screen and (min-width : 1200px) {
 .container-new {
             width:40%;
    margin-left: 400px;
height:80%;
}
.float-right{
 margin-right: 400px;

    }
.float-left{
 margin-left: 400px;

    }
}


#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}



.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.badge_info {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #0074d9;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}


.frame {
  display: block;
 width:100%;
  float: left;
  margin: 10px;
  margin-left:-10px;
  padding: 10px 10px 10px 10px;
  background-color: rgb(255, 255, 255);
  border: thin solid #ddd;
  border-radius: 3px;
  box-shadow: 3px 3px 10px rgba(255, 255, 255, 0.8); 
}
.photoframe img {
  background-color: rgb(125, 125, 125);
}
.frame-min {
  display: block;
 width:95%;
  float: left;
  
  padding: 10px 10px 10px 10px;
  background-color: rgb(255, 255, 255);
  border: thin solid #ddd;
  border-radius: 3px;
  box-shadow: 3px 3px 10px rgba(255, 255, 255, 0.8); 
}
.photoframe img {
  background-color: rgb(125, 125, 125);
}


.dialog-ovelay {
    position: fixed;
  
    left: 0;
    right: 0;
    bottom: 50;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 999999
}
.dialog-ovelay .dialog {
    width: 320px;
    margin: 100px auto 0;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom:100px;
}
.dialog-ovelay .dialog header {
    padding: 10px 8px;
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e5e5
}
.dialog-ovelay .dialog header h3 {
    font-size: 16px;
    padding:10px 10px 10px 10px;
    font-weight:bold;
    margin: 0;
    color: #363636;
    background:#fff;
    display: inline-block;
}
.dialog-ovelay .dialog header .fa-close {
    float: right;
    color: #c4c5c7;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0 2px;
    border-radius: 1px    
}
.dialog-ovelay .dialog header .fa-close:hover {
    color: #b9b9b9
}
.dialog-ovelay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #673AB7;
    color: #a2a2a2
}
.dialog-ovelay .dialog .dialog-msg {
    padding: 12px 10px
}
.dialog-ovelay .dialog .dialog-msg p{
    margin: 0;
   font-size: 18px;
    padding:10px 10px 10px 10px;
    font-weight:bold;
    margin: 0;
    color: #fff;
    background:#363636;
}
.dialog-ovelay .dialog footer {
    border-top: 1px solid #e5e5e5;
    padding: 8px 10px
}
.dialog-ovelay .dialog footer .controls {
    direction: rtl
}
.dialog-ovelay .dialog footer .controls .button {
    padding: 15px 15px;
    border-radius: 3px;
}
.button {
  cursor: pointer
}
.button-default {
    background-color: rgb(248, 248, 248);
    border: 1px solid rgba(204, 204, 204, 0.5);
    color: #363636;
        font-weight:600;

}
.button-danger {
    background-color: #f44336;
    border: 1px solid #d32f2f;
    color: #f5f5f5;
    font-weight:600;
}
.link {
  padding: 5px 10px;
  cursor: pointer
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
 /* box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);*/
 background:#fff;
  font-family: var(--font-family);
    font-style: normal;
    font-weight: 400
}

@media(min-width: 768px) {
.section-item-list {
    width:100%;
 height:400px;
  padding: 1rem;
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: thin;
  overflow-y : scroll !important;
       -webkit-overflow-scrolling: touch;

}
.section-item-list::-webkit-scrollbar {
  width: 20px;
}

.section-item-list::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

.section-item-list::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 6px solid rgba(0, 0, 0, 0.18);
  border-left: 0;
  border-right: 0;
  background-color: #8070d4;
}
}
/*body {
  font-family: "system-ui";
  line-height: 1.4;
  padding: 1rem;
  background-color: #f7f7f7;
  min-height: 1200px;
}

* {
  box-sizing: border-box;
}*/

@media(max-width: 767px) {
   .section-item-list {
    width:100%;
 /*height: 100%;*/
  padding: 1rem;
 

   }
}

.section-item-list-2 {
    width:100%;
     height: 100%;

  padding: 1rem;
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: thin;
  overflow-y : scroll !important;
       -webkit-overflow-scrolling: touch;

}
.section-item-list-2::-webkit-scrollbar {
  width: 20px;
}

.section-item-list-2::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
}

.section-item-list-2::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 6px solid rgba(0, 0, 0, 0.18);
  border-left: 0;
  border-right: 0;
  background-color: #8070d4;
}
.captilaized{
    text-transform: capitalize;

}

button{
    -webkit-appearance: none;
}
:root {
    --switches-bg-color:  green;
    --switches-label-color: white ;
    --switch-bg-color: white;
    --switch-text-color: goldenrod ;
}
.switches-container {
    margin-top:10px;
    margin-bottom:10px;
    
  /* max-width: 16em;
     width:60%;*/
     display: inline-flex;
width: max-content;
  height:70px;
  border-radius: 10em;
  box-shadow: 5px 5px 5px 5px #cfd8dc;
  position: relative;
    margin-left:auto;
    margin-right:auto;
    padding:5px 5px 5px 5px;

}


.blink{
 /*background-color: #004A7F;*/
  -webkit-border-radius: 10px;
  border-radius: 3px;
  border: none;
 /*color: #FFFFFF;*/
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
 /* font-size: 30px;*/
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}
@-webkit-keyframes glowing {
  0% { -webkit-box-shadow: 0 0 3px #68f94e; }
  50% { -webkit-box-shadow: 0 0 40px #68f94e; }
  100% { -webkit-box-shadow: 0 0 3px #68f94e; }
}

@-moz-keyframes glowing {
  0% { -moz-box-shadow: 0 0 3px #68f94e; }
  50% { -moz-box-shadow: 0 0 40px #68f94e; }
  100% { -moz-box-shadow: 0 0 3px #68f94e; }
}

@-o-keyframes glowing {
  0% {  box-shadow: 0 0 3px #68f94e; }
  50% {box-shadow: 0 0 40px #68f94e; }
  100% { box-shadow: 0 0 3px #68f94e; }
}

@keyframes glowing {
  0% {  box-shadow: 0 0 3px #68f94e; }
  50% {box-shadow: 0 0 40px #68f94e; }
  100% { box-shadow: 0 0 3px #68f94e; }
}

.blink {
  -webkit-animation: glowing 3000ms infinite;
  -moz-animation: glowing 3000ms infinite;
  -o-animation: glowing 3000ms infinite;
  animation: glowing 3000ms infinite;
}

 .modal-backdrop {
  z-index: -1;
}

/*took from old */
.top-body{

   /* max-height: calc(100vh - 250px);
    overflow-y: auto;
    margin-top:3px;*/
     width:100% !important;
       height:calc(100vh - 250px) !important;
    overflow-y: auto;

}

.modal-body{

   /* max-height: calc(100vh - 250px);
    overflow-y: auto;
    margin-top:3px;*/
     width:100% !important;
  
       max-height:calc(100vh - 270px) !important;
    overflow-y: auto;

}

.modal{
    position:fixed;
    bottom:0px;

}

/*.modal-content{
  max-height: 100vh;
  overflow-y: auto;
  padding-bottom:20px ;
  max-width:500px;
    min-width:360px;
height:calc(100vh - 53px);
    border:none !important;
        width:100% !important;
}*/

 ::-webkit-scrollbar-track {
    background-color: #F4F4F4;
}
::-webkit-scrollbar {
    width: 3px;
    background: #F4F4F4;
}
::-webkit-scrollbar-thumb {
    background: #dad7d7;
}
/*#global-modal .modal-header{
        height:auto !important;
    
}*/
.modal-body{
       /* height:calc(100vh - 360px) !important;*/
}
/*.modal-footer{
    
    margin-top:0px;
}*/




/*@media all and (min-width: 767px){

.modal {
  text-align: center;
  padding: 0!important;
}
.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: 100px;
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

}*/

.scroll_content {
  
    width:550px;
    margin-left:auto;
    margin-right:auto;
  
}


@media all and (max-width: 767px){
.scroll_content {
      width: 550px;
}

}

.scroll_content {
    position:relative;
    top:0px;
    padding:2px 2px 2px 2px;
   margin-top:20px;
   height:auto;
   min-height:800px;
   background: #fff;
   margin-bottom:80px;
   margin-left:0px;
   padding-right:0px;

  overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.mobile-bottom-nav{
	position:fixed;
	bottom:0;

	z-index:1000;
	
	will-change:transform;
	transform: translateZ(0);
	
	display:flex;	
	
	height:70px;
	
	background-color:#fff;
	

}

.mobile-top-nav{
	position:fixed;
	top:0;

	z-index:1000;
	
	will-change:transform;
	transform: translateZ(0);
	
	display:flex;	
	
	height:70px;
	
	box-shadow: 0 -2px 5px -2px #333;
	background-color:#fff;
	

} 


.contact-container {
    background:url("../images/wallpaper.png");
    
background-size: cover;
  position: relative;
}

.contact-container::before {
 content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px); /* Adjust the blur value as needed */
}

/* General styles */
.fancybox-wrap, .fancybox-outer {
    z-index: 9999;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    overflow: hidden;
}

.fancybox-inner {
    max-height: 90vh;
    overflow-x: hidden;
    position: relative;
    background-color: #fff;
    min-height: calc(100vh + 53px);
    padding-bottom: 50px;
}

.modal-image-container .close-button{
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 50%;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.modal-image-container .close-button img {
    width: 24px;
    height: 24px;
}



.close-button{
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 50%;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

 .close-button img {
    width: 24px;
    height: 24px;
}


.text-item-des {
    padding: 0px;
    position: relative;
    z-index: 10;
}



/* Desktop styles */
@media screen and (min-width: 768px) {
    .fancybox-wrap, .fancybox-outer {
        width: 100vw;
        top:20px;
        margin: auto;
        position: fixed;
        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
        margin-bottom: 80px;
    }
    
    
    
    .modal-image {
        display: block;
        width: 100%;
        min-width: 550px;
        max-height: 350px;
        object-fit: cover;
        margin: 0;
        padding: 0;
    }

    .mobile-bottom-nav {
        max-width: 550px;
        box-sizing: border-box;
    }
    
    .fancybox-inner{
         max-height: 60vh;
    overflow-y: auto;
    }
    
    .below-image-content {
    position: relative;
   
    padding: 30px !important;
    margin-bottom:80px;
    padding-bottom: 50px;
}
}

.fancybox-skin {
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
    .fancybox-wrap, .fancybox-outer {
        width: 100vw;
        top: 2vh;
        left: 0;
        right: 0;
        margin: auto;
        position: fixed;
        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
        margin-bottom: 180px;
    }
    
    .modal-image {
        display: block;
        width: 100%;
        max-height: 250px;
        object-fit: cover;
        margin: 0;
        padding: 0;
    }
    
    .below-image-content {
    position: relative;
    
    padding: 30px !important;
    margin-bottom:180px;
    padding-bottom: 50px;
     flex: 1 1 auto;
  min-height: 0;                         /* critical for iOS */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fancybox-inner{
         max-height: 50vh;
    overflow-y: auto;
    }
    .mobile-bottom-nav {
        margin-top: 90px;
        width: 100vw;
        box-sizing: border-box;
    }
}

.fancybox-wrap, .fancybox-outer, .fancybox-inner, .fancybox-skin {
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    padding-bottom: 50px;
}

.section-label-addon {
    display: block;
    padding: 20px 25px;
     background-color: #cfcfcf;  /* Darken the blue on hover */
      overflow: visible; /* Ensuring it's set to visible */
    border-radius: 5px;         /* Rounded corners */
    position: relative;         /* To position the icon to the right */
    margin-bottom: 10px;        /* Space below the button */
    cursor: pointer;            /* Makes it look clickable */
    text-decoration: none;      /* Removes underlines if using <a> tags */
    transition: background-color 0.3s;  /* Smooth color change on hover */
    border:solid 1px #c0c0c0;
    border-radius:0.5em;
    
}

.section-label-addon:hover {
     background-color: #ffffff;  /* Darken the blue on hover */
   
}

.section-icon {
     width: 20px;  /* example size, adjust as needed */
    height: 20px;
        z-index: 1;
     position: absolute;
    right: 15px;          /* 15px space from the right edge */
    top: 50%;             /* Center the icon vertically */
        transform: translateY(-50%); /* Shift the icon upwards by half of its height to truly center it */
}

.section-label-addon:active {
    background-color: #ffffff;  /* Darken the blue on hover */
}
.sticky-item-name {
    
    position: sticky;
    top: 0;
    z-index: 1000; /* or any other appropriate z-index value */
    /* any other styles you want to apply when the item becomes sticky */
    
      display: block;
        width: 100%;
        max-height: 80px;
        object-fit: cover;
        margin: 0;
        padding-top: 20px;
                padding-bottom: 20px;

          font-family: var(--font-family);
    font-size: var(--font-title);
    font-style: normal;
    font-weight: 700;
    color: var(--color-title-menu);
}



.below-image-content .item-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left:0;
}

.sticky-item-name .close-button {
    display: block;
    margin-right:-20px;
  
    order: 2;
}
.selected_cat {
  /*background-color: blue; */
  background-color:var(--color-menu-header);
                color:var(--color-title-selected);
                font-family:var(--font-family);
                padding:10px;
                border-radius:0.5em;
  
  
}

.panel-footer {
    background: #fff;
    border: none;
  margin-bottom:10px;
  padding-left:30px;
}

.button-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px; /* Space between qty-block and add-to-cart button */
}

.qty-block, .add-to-cart-button {
    height:45px; /* Same height for both */
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-block {
    flex: 2;
    border-radius: 22px;
    overflow: hidden;
    border: 0px solid #ccc;
    /*background-color: silver;*/
}

.qty-button {
    /*background-color: silver;
    color: white;*/
    border:1px solid #ccc;
    padding:5px;
    border-radius:50%;
    
  
    text-align: center;
    cursor: pointer;
    color:#363636;
    font-weight: 600;
}

.iconify {
    vertical-align: middle;
}

.qty-input {
    font-size: 18px !important; /* This will override any previous border styles */;
    font-weight: 800 !important; /* This will override any previous border styles */;
    color: #363636;
    border: none;
    padding: 0;
    text-align: center;
    margin-right: 20px;
    width: 20px;
       border: none !important; /* This will override any previous border styles */ 
}

.add-to-cart-button {
    flex: 2;
   /* background-color: #007BFF;
    color: white;*/
    border: none;
    padding: 0 20px;
    cursor: pointer;
        border: none !important; /* This will override any previous border styles */
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
       margin-right: 20px;
      
}

.mobile-bottom-nav {
    padding-top: 10px;
    padding-bottom: 10px;
}