/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    --primary-color: #fcb43c;
    --primary-color-transparent: #fcb43c05;
    --primary-color-light: #facc7a;
    --primary-hover-color: #e1912d;
    --dark-highlight-color: #1B1B1F;
    --dark-ultra-color: #131315;
    --restaurant-navbar-color: #CBCBCB;

    --font-color: #EBEBEB;
    --font-color-form: #21252A;
    --background-color: #21252A;
    --dark-hover-color: #1C1F24;
    --border-color-form-unfocused: white;
    --dropdown-color: #1c1e23;

    --danger-color: #e85252;
    --danger-hover-color: #de4242;
    --slider-color: #CCCCCC;
    --tables-color: #666666;
    --border-color: #999999;
    --medium-color: #b3b3b3;
    --light-color: #eeeeee;
    --light-hover-color: #e0e0e0;
    --valid-color: #94b708;
    --dark-color: #21252A;
    --business-title-color: #EBEBEB;

    --header-height: 70px;
    --border-radius: 6px;
}

html {
    font-size: 14px;
    overflow-y: scroll;
}

body {
    font-family: "Rubik", sans-serif;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--background-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover-color);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Rubik", sans-serif;
}

h1, .h1 {
    font-family: "Rubik", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
}

h2, .h2 {
    font-family: "Rubik", sans-serif;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 400;
}

h3, .h3 {
    font-size: 1.3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.h5 {
    font-weight: 400;
}

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

.text-right {
    text-align: right !important;
}

.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.btn {
    font-weight: 500;
    font-family: "Rubik", sans-serif;
    border-radius: var(--border-radius);
}

.btn:focus {
    outline: none;
    box-shadow: none !important;
}

.btn-with-icon {
    display: flex;
    align-items: center;
}
.btn-with-icon svg {
    margin-right: .5rem;
}

.btn.btn-xl {
    padding: 0.8rem 4.5rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: 1px solid var(--primary-color);
    transition: background-color .3s;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: var(--background-color);
    transition: background-color .3s;
}

.btn-primary:disabled {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--background-color);
    opacity: .75;
}

.btn-outline-primary {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    background-color: var(--background-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
    background-color: var(--dark-hover-color);
    border-color: var(--primary-hover-color);
    color: var(--primary-hover-color);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:disabled {
    color: var(--font-color);
    background-color: var(--background-color);
    border: 1px solid var(--font-color);
}

.btn-secondary:disabled {
    opacity: 0.67;
}

.btn-close {
    color: var(--font-color);
}

svg[data-bs-toggle="tooltip"] {
    margin-left: .5rem;
    margin-bottom: 2px;
}

[data-bs-toggle="tooltip"] {
    cursor: pointer;
    color: var(--primary-color);
}

.tooltip.show {
    opacity: 1 !important;
}

.tooltip .tooltip-inner {
    text-align: left !important;
}
.tooltip .tooltip-inner {
    max-width: 350px;
}

datalist {
    z-index: 9999999 !important;
}

.form-control {
    border: 2px solid var(--border-color-form-unfocused);
    transition: .3s border-color;
    border-radius: var(--border-radius);
    color: var(--font-color-form);
    font-family: "Rubik", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    box-shadow: none;
    appearance: auto;
}

.form-select {
    font-size: 1.2rem
}

textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover,
select:hover,
select.form-control:hover {
    border: 2px solid var(--primary-color-light);
    transition: .3s border-color;
    outline: 0 none;
    box-shadow: none;
}

textarea:focus,
textarea.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
select.form-control:focus {
    border: 2px solid var(--primary-hover-color);
    transition: .3s border-color;
    outline: 0 none;
    box-shadow: none;
}

textarea, textarea.form-control:not(.restaurant-menu-description) {
    min-height: 10rem;
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select {
    height: 40px;
}

select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("/images/icons/chevron-down.svg") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 5px) center !important;
    background-size: 14px !important;
}

input[type="time" i]::-webkit-calendar-picker-indicator {
    display: none !important;
}

.input-icon {
    height: 3rem;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.input-icon svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary-color);
}

.input-icon + input {
    padding-left: 3rem;
}

@media (min-width: 1200px) {
    .bg-white-xl {
        background-color: white;
    }
}

[onclick] {
    cursor: pointer;
}

.form-floating>label {
    color: var(--background-color);
}

.dropup .dropdown-menu,
.dropdown:not(.restaurant-menu-price-days) .dropdown-menu {
    border-radius: var(--border-radius);
    background: var(--dropdown-color);
    line-height: 1.75rem;
}

.dropup .dropdown-menu li,
.dropup .dropdown-menu li a,
.dropdown:not(.restaurant-menu-price-days) .dropdown-menu li,
.dropdown:not(.restaurant-menu-price-days) .dropdown-menu li a {
    color: var(--font-color);
    cursor: pointer;
    transition: .3s;
    font-style: normal;
}

.dropup .dropdown-menu li:hover,
.dropup .dropdown-menu li a:hover,
.dropdown:not(.restaurant-menu-price-days) .dropdown-menu li:hover,
.dropdown:not(.restaurant-menu-price-days) .dropdown-menu li a:hover,
.dropup .dropdown-menu li:focus,
.dropup .dropdown-menu li a:focus,
.dropdown:not(.restaurant-menu-price-days) .dropdown-menu li:focus,
.dropdown:not(.restaurant-menu-price-days) .dropdown-menu li a:focus {
    background: transparent;
    color: var(--primary-color-light);
}

.dropdown-info {
    font-style: italic !important;
}

.dropdown-info:hover {
    color: var(--font-color) !important;
    cursor: unset !important;

}

/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/
.modal-content {
    background-color: var(--background-color);
}

.modal-closer {
    width: 96px;
}

.modal-title {
    color: var(--font-color);
}

.modal-close {
    border: 0;
    background-color: var(--background-color);
    color: var(--font-color);
}

.modal-header {
    border-bottom: 0 !important;
}

.modal-footer {
    border-top: 0 !important;
}

.modal-close:hover {
    color: var(--light-hover-color);
}

.modal-backdrop {
    z-index: 996;
}

/*--------------------------------------------------------------
# Swiper
--------------------------------------------------------------*/
.swiper-wrapper {
    padding-bottom: 2rem;
}

.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--dark-highlight-color);
    opacity: 1;
    border: 2px solid var(--primary-color);
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Add item link
--------------------------------------------------------------*/
.add_item_link,
#add-staff-member {
    display: flex;
    align-items: center;
    vertical-align: bottom;
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--background-color);
    border: 0;
    box-shadow: none;
    padding: 0;
    transition: background-color .3s;
}

.add_item_link-container {
    padding-bottom: 4px;
}

.add_item_link:hover,
#add-staff-member:hover {
    background: var(--primary-hover-color);
}

.add_item_link svg,
#add-staff-member svg {
    height: 22px;
    width: 22px;
}

/*--------------------------------------------------------------
# AI chatbot
--------------------------------------------------------------*/
.chatbot-btn {
    position: fixed;
    right: 15px;
    bottom: 15px;
    padding: 0;
    z-index: 996;
    background: transparent;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: none;
}

.chatbot-btn svg {
    transition: all 0.4s;
}

.chatbot-btn:hover svg {
    fill: #e17128;
    transform: rotate(-10deg) scale(1.2);
    color: #fff;
}

#chatbot {
    visibility: hidden;
    position: fixed;
    width: 100%;
    max-width: 400px;
    height: 100%;
    max-height: 600px;
    right: 1rem;
    bottom: 0;
    background: var(--dark-highlight-color);
    box-shadow: 0 0 16px rgb(0 0 0 / 50%);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    z-index: 999;
}

#chatbot.fs {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    right: 0
}

@media (max-width: 991px) {
    #chatbot {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        right: 0
    }

    #chatbot .bi-fullscreen,
    #chatbot .bi-fullscreen-exit {
        display: none;
    }
}

#chatbot.active {
    visibility: visible;
}

#chatbot .bi {
    margin-right: 5px;
}

#chatbot.fs .bi-fullscreen {
    display: none;
}

#chatbot:not(.fs) .bi-fullscreen-exit {
    display: none;
}

#chatbot .heading {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--background-color);
    color: var(--font-color);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

#chatbot .heading .bi {
    cursor: pointer;
}

#chatbot .content {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: block;
    overflow: auto;
    height: calc(100% - 100px);
}

#chatbot .content ol {
    margin-top: 8px;
    margin-bottom: 0;
}

#chatbot .content ol li {
    margin-top: 8px;
    margin-bottom: 0;
}

#chatbot .content * {
    overflow-anchor: none;
}

#chatbot .content #anchor {
    overflow-anchor: auto;
    height: 1px;
}

#chatbot #messages {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
}

#chatbot #messages .message {
    border-radius: 25px;
    padding: 10px 15px;
    margin: 4px 10px;
    max-width: min(90%, 750px);
    word-wrap: break-word;
}

#chatbot #messages .message.gsbot {
    align-self: flex-start;
    position: relative;
    background-color: var(--background-color);
    color: var(--font-color);
}

#chatbot #messages .message.gsbot.loading {
    display: flex;
}

#chatbot #messages .message.gsbot.loading div {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    margin-right: 5px;
    border-radius: 5px;
    background: var(--font-color);
    display: inline-block;
}

#chatbot #messages .message.gsbot.loading div:last-of-type {
    margin-right: 0;
}

@keyframes typing {
    0% {
        margin-top: 5px;
    }
    25% {
        margin-top: 0;
    }
    50% {
        margin-top: 5px;
    }
    100% {
        margin-top: 5px;
    }
}

#chatbot #messages .message.gsbot.loading div:first-of-type {
    animation: typing 1s infinite ease-in-out;
    animation-delay: 0s;
}

#chatbot #messages .message.gsbot.loading div:nth-of-type(2) {
    animation: typing 1s infinite ease-in-out;
    animation-delay: .25s;
}

#chatbot #messages .message.gsbot.loading div:last-of-type {
    animation: typing 1s infinite ease-in-out;
    animation-delay: .5s;
}

#chatbot #messages .message.user {
    align-self: flex-end;
    background-color: var(--primary-color);
    color: var(--background-color);
}

#chatbot .prompt {
    height: 50px;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
}

#chatbot .prompt .btn {
    height: 40px;
    width: 40px;
    border-radius: 50px;
    margin: 5px 1rem 5px 0;
}

#chatbot .prompt input.form-control {
    margin: 5px 5px 5px 1rem;
    height: 40px;
    width: calc(100% - 45px - 2rem);
    font-size: 1rem;
}

#chatbot .error {
    padding: 0 1rem;
}

#chatbot #suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0;
}
#chatbot #suggestions .btn {
    margin: 0.25rem 1rem;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    height: var(--header-height);
    transition: all 0.5s;
    z-index: 997;
    background: var(--background-color);
    box-shadow: 0 6px 10px 0 rgb(0 0 0 / 15%);
}

#header .logo svg {
    width: 164px;
    margin-left: -16px;
}

#navbar .add-menu-button {
    color: var(--background-color);
    padding: 6px 8px 5px 8px;
    justify-content: center;
    width: fit-content;
    min-width: 128px;
    background-image: radial-gradient(circle, #fccc68 0%, #f4a434 100%);
    border: 0;
    transition: all .3s;
    font-weight: 500;
}

#navbar .add-menu-button:hover {
    color: var(--background-color);
    border: 0;
    filter: brightness(1.1);
}

@media (max-width: 991px) {
    #navbar {
        width: 100%;
        flex: 0 0 auto;
        flex-direction: row-reverse;
    }

    #mobile-toggle-wrapper {
        display: flex;
        width: 40px;
        justify-content: start;
    }

    .restaurant-menu-cart {
        padding: 0 !important;
    }

    #header .logo {
        width: calc(100% - 112px);
    }

    #header .logo svg {
        margin: 0;
    }

    #navbar .restaurant-menu-cart,
    #navbar .mobile-nav-toggle-wrapper {
        width: 56px;
    }

    #navbar .add-menu-button {
        display: none;
    }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/*
* Desktop Navigation
*/
.navbar {
    padding: 0;
}

@media (min-width: 991px) {
    .navbar > ul > li {
        margin-left: 32px;
    }
}

.navbar ul:not(.tip-options-dropdown, .inside-collapse, .select2-results__options) {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar div[id^="collapse"] {
    padding: 0 0 0.5rem 0;
}

.navbar ul.inside-collapse {
    list-style: none;
    padding: 0;
}

.navbar .navbar-dropdown ul.inside-collapse a {
    padding-left: 2.5rem !important;
}

.navbar .navbar-dropdown ul li.collapse-wrapper>a>svg {
    transition: .3s;
}

.navbar .navbar-dropdown ul li.collapse-wrapper>a:not(.collapsed)>svg {
    transform: rotate(-180deg);
    transition: .3s;
}

.navbar .navbar-dropdown ul li.collapse-wrapper>a:not(.collapsed) {
    color: var(--primary-color);
    background: var(--dark-highlight-color);
}

.navbar li {
    position: relative;
}

.navbar .navbar-dropdown ul li.line {
    padding-left: 2.5rem;
    padding-right: 1.5rem;
}

.navbar .navbar-dropdown ul li.line hr {
    margin: 8px 0;
}

.navbar a:not(.order-block-clickable), .navbar a:not(.order-block-clickable):focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 16px;
    color: var(--font-color);
    white-space: nowrap;
    transition: 0.3s color;
}

.navbar a i, .navbar a:focus i {
    line-height: 0;
    margin-left: .3rem;
    color: var(--primary-color);
    transition: .3s transform;
}

.navbar .active:not(.flatpickr-input), .navbar .active:focus {
    color: var(--primary-color-light);
}

.navbar .navbar-dropdown ul:not(.inside-collapse){
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + 30px);
    margin: 0;
    padding: .5rem 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: var(--dark-highlight-color);
    transition: 0.3s;
    border-radius: var(--border-radius);
    min-width: 224px;
}

.navbar .navbar-dropdown ul a {
    padding: .5rem 1.5rem !important;
    font-size: .9rem !important;
    font-weight: 400;
    color: var(--font-color);
    transition: .3s color;
}

@media (min-width: 992px) {
    .navbar>.navbar-item {
        margin-left: 32px;
    }

    .navbar .navbar-dropdown ul li.collapse-wrapper>a:not(.collapsed):hover {
        background-color: var(--dark-ultra-color);
    }

    .navbar .navbar-dropdown>ul {
        box-shadow: 0 0 4px 2px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,0.5);
    }

    .navbar .navbar-dropdown ul a:hover, .navbar .navbar-dropdown ul .active:hover, .navbar .navbar-dropdown ul li:hover > a {
        background-color: var(--dark-ultra-color);
    }
}

.navbar .navbar-dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .navbar-dropdown .navbar-dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .navbar-dropdown .navbar-dropdown ul.dropdown-left {
    top: 0;
    left: calc(100% - 400px);
    visibility: hidden;
}

.navbar .navbar-dropdown .navbar-dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

.navbar .navbar-dropdown .navbar-dropdown.dropdown-left:hover > ul {
    opacity: 1;
    top: 0;
    left: calc(100% - 400px);
    visibility: visible;
}

.navbar:not(.navbar-mobile) .navbar-dropdown:hover a i {
    transition: .3s;
    transform: rotate(-180deg);
}

.navbar #user-role {
    color: var(--primary-color);
    background-color: var(--dark-ultra-color);
    padding: 2px 8px;
    font-size: 1rem;
    margin-left: 6px;
    border-radius: var(--border-radius);
}

/**
* Mobile Navigation
*/
.mobile-nav-toggle {
    color: var(--font-color);
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
    color: #fff;
}

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar:not(.navbar-mobile)>.navbar-item {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(33, 38, 42, 0.9);
    transition: 0.3s;
    z-index: 999;
}

.navbar-mobile a i {
    display: none;
}

.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 20px;
    left: 20px;
}

.navbar-mobile>.navbar-item {
    display: block !important;
    position: absolute;
    top: 55px;
    right: 0;
    bottom: 15px;
    left: 0;
    padding: 10px 0;
    background-color: var(--background-color);
    overflow-y: auto;
    transition: 0.3s;
}

.navbar-mobile .language-choice {
    top: 96px;
}

.navbar-mobile a, .navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--font-color);
}

.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
    margin: 1rem;
}

.navbar-mobile .navbar-dropdown ul:not(.inside-collapse) {
    position: static;
    padding: .5rem 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: var(--dark-highlight-color);
    border-radius: 0;
}

.navbar-mobile .navbar-dropdown ul li {
    min-width: 200px;
}

.navbar-mobile .navbar-dropdown ul a {
    padding: .5rem 1.5rem;
    color: var(--font-color);
}

.navbar.navbar-mobile .navbar-dropdown.open a i {
    transition: .3s;
    transform: rotate(180deg);
}

/*--------------------------------------------------------------
# Radio Button / Checkbox
--------------------------------------------------------------*/
label.form-label {
    margin-bottom: .5rem;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
}

input[type="radio"] + label, input[type="checkbox"] + label {
    width: 100%;
    font-size: .9rem;
    font-family: "Rubik", sans-serif;
    padding: 0;
    cursor: pointer;
    transition: color .3s, border-color .3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

input[type="radio"] + label svg, input[type="checkbox"] + label svg {
    height: 1rem;
    width: 1rem;
    margin-bottom: 4px;
    color: var(--primary-color);
}

input[type="radio"] + label svg + span, input[type="checkbox"] + label svg + span {
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    margin-left: .5rem;

}

input[type="radio"] + label:hover, input[type="checkbox"] + label:hover {
    color: var(--primary-color-light);
}

input[type="radio"]:checked + label.radio, input[type="checkbox"]:checked + label.radio {
    display: none;
}

input[type="radio"] + label .radio circle, input[type="checkbox"] + label .radio circle {
    transition: fill .3s;
}

input[type="radio"]:not(:checked) + label .radio circle, input[type="checkbox"]:not(:checked) + label .radio circle {
    fill: white
}

input[type="radio"]:checked + label .radio circle, input[type="checkbox"]:checked + label .radio circle.marker {
    fill: var(--primary-hover-color);
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    padding-top: var(--header-height);
    margin-bottom: 64px;
}

.hero {
    height: calc(100vh - var(--header-height));
    background: url("../img/hero-bg.jpg") fixed center 0;
    background-size: cover;
    color: white;
    min-height: 880px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero .frame {
    max-width: 900px;
    width: calc(100% - 2rem);
    padding: 2rem 7rem 5rem 7rem;
    background: rgba(0, 0, 0, 0.86);
}

.hero h1 {
    font-size: 4.5rem;
    padding-top: 2rem;
    margin: 0.25rem;
    font-weight: 200;
    color: var(--primary-color);
    font-family: 'Dancing Script', sans-serif;
}

.hero p {
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    margin: 3.5rem 0 4.5rem 0;
    font-size: 2rem;
    text-transform: uppercase;
}

@media (max-width: 800px) {
    .hero {
        min-height: 500px;
    }

    .hero h1 {
        font-size: 3rem;
        padding-top: 0;
    }

    .hero p {
        font-size: 1.5rem;
        margin: 2rem 0 3.5rem 0;
    }

    .hero .frame {
        padding: 1.5rem;
    }
}

#landing #landing-content > section {
    display: flex;
    align-items: center;
    margin-top: 64px;
}

#landing #landing-content > section > div {
    background-color: var(--dark-highlight-color);
    height: 364px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#landing #landing-content h2 {
    font-size: 2rem;
    font-weight: 400;
    margin-top: 0;
    font-style: italic;
    margin-bottom: 1.5rem;
}

#landing #landing-content p {
    text-align: justify;
    margin-bottom: 0;
}

#landing #landing-content > #first > img {
    width: 45%;
}

#landing #landing-content > #first > div {
    padding: 0 4.5rem;
    width: 55%;
}

#landing #landing-content > #second {
    flex-direction: row-reverse;
}

#landing #landing-content > #second > img {
    width: 45%;
}

#landing #landing-content > #second > div {
    width: calc(55% + 3rem);
    margin-right: -3rem;
    padding: 0 7rem 0 4rem;
}

#landing #landing-content > #third > img {
    width: 45%;
    z-index: 2;
}

#landing #landing-content > #third > div {
    width: calc(55% + 3rem);
    margin-left: -3rem;
    padding: 0 4rem 0 7rem;
    z-index: 1;
}

@media (min-width: 992px) {
    #landing #landing-content > #second > img {
        align-self: baseline;
    }

    #landing #landing-content > #second > div {
        align-self: end;
    }

    #landing #landing-content > #third > img {
        align-self: end;
    }

    #landing #landing-content > #third > div {
        align-self: baseline;
    }

    #landing #landing-content > #second,
    #landing #landing-content > #third {
        height: 400px;
    }
}

@media (max-width: 1199px) {
    #landing #landing-content > #first > div {
        height: 400px;
    }
}

@media (min-width: 1400px) {
    #landing #landing-content > #second,
    #landing #landing-content > #third {
        height: 440px;
    }
}

@media (max-width: 991px) {
    #landing #landing-content > section {
        flex-direction: column-reverse !important;
        padding: 0;
        margin: 2rem 0;

    }

    #landing #landing-content > section > div,
    #landing #landing-content > section > img {
        width: 100% !important;
    }

    #landing #landing-content > section > div {
        padding: 2rem !important;
        margin: 0 1rem !important;
        height: fit-content !important;
    }

    #landing #landing-content h2 {
        text-align: center;
    }
}

@media (max-width: 575px) {
    #landing #landing-content h2 {
        font-size: 1.5rem;
    }
}

.cards-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 80px;
}

.landing-card {
    background-color: black;
    font-weight: 500;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    box-shadow: 0 0 1rem black;
    margin: 0 1.5% 4rem 1.5%;
    width: 30%;
    aspect-ratio: 2.1;
    color: var(--font-color);
    position: relative;
    transition: color .3s;
}

@media (max-width: 991px) {
    .landing-card {
        width: 45%;
    }
}

@media (max-width: 767px) {
    .landing-card {
        width: 100%;
        margin: 0 0 4rem 0;
    }
}

.landing-card svg {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    left: 50%;
    width: 48px;
    color: var(--primary-color);
}

.landing-card svg.coach {
    width: 64px;
}

/*--------------------------------------------------------------
# Restaurant Search Results
--------------------------------------------------------------*/

@media (min-width: 1200px) {
    #restaurant-detail-container,
    #restaurant-detail.restaurant-detail-edit.container {
        max-width: 1000px;
    }
}

.restaurant-details > div > .restaurant-detail {
    padding: .5rem 0;
    font-size: 1rem;
    display: flex;
    align-items: start;
}

.restaurant-details > div > .restaurant-detail > .restaurant-detail-icon,
.restaurant-details > div > .restaurant-detail > .restaurant-detail-text {
    font-size: .875rem;
}

.restaurant-details > div > .restaurant-detail > .restaurant-detail-icon > svg {
    margin-right: 16px;
    height: 20px;
    width: 20px;
    color: var(--primary-color);
}

.full-width-card {
    width: calc(100% + 32px);
    padding: 1rem;
}

.business {
    position: relative;
}

.restaurant-business {
    margin: 0 -1rem 1rem -1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}

a .restaurant-business {
    color: var(--font-color);
    text-decoration: none;
    transition: .3s transform;
    margin: 1rem -1rem 2rem -1rem;
}

@media (max-width: 575px) {
    .restaurant-details > div > .restaurant-detail > .restaurant-detail-icon > svg {
        width: 16px;
        height: 16px;
    }

    .restaurant-details > div > .restaurant-detail {
        padding: .25rem 0;
    }
}

@media (min-width: 576px) {
    .restaurant-business {
        border-radius: var(--border-radius);
    }

    a .restaurant-business .full-width-card {
        padding: 2rem 1rem;
    }
}

@media (min-width: 768px) {
    .restaurant-business {
        margin: 0 -1rem 1rem -2rem;
    }

    a .restaurant-business {
        margin: 0 0 2rem 0;
    }

    #business-search .business,
    #businesses .business {
        transition: .3s transform;
    }

    #business-search .business:hover,
    #businesses .business:hover {
        transform: scale(1.02);
        transition: .3s transform;
    }

    .full-width-card {
        width: 66.66666667%;
        padding: 1rem 2rem;
    }

    a .restaurant-business .full-width-card {
        padding: 2rem 2rem 0 2rem;
        height: 170px;
    }
}

.restaurant-image-aside img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

#business-search .restaurant-business .restaurant-image-aside {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

@media (max-width: 767px) {
    #business-search .restaurant-business .restaurant-image-aside {
        display: block;
        position: relative;
        width: 100%;
        aspect-ratio: 1.3333333333333333;
        border-radius: 0;
    }

    #business-search .restaurant-business .restaurant-image-aside img {
        aspect-ratio: 1.3333333333333333;
        border-radius: 0;
    }

    #business-search .restaurant-business .overview {
        display: none;
    }

    #business-search .restaurant-business .backdrop {
        width: 100%;
        background: rgba(11, 11, 37, 0.5);
        color: white;
        position: absolute;
        padding: 0 1rem;
        margin-top: -60px;
        height: 60px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    #business-search .restaurant-business .backdrop {
        display: none;
    }
}

#restaurant-detail .symfony-collection {
    list-style: none;
}

#restaurant-detail .symfony-collection li {
    padding: .25rem 0;
}

#restaurant-detail .symfony-collection li select,
#restaurant-detail .symfony-collection li input:not([type="file"]):not([type="checkbox"]),
#restaurant-detail .symfony-collection li textarea {
    transition: .3s border-color, .3s box-shadow;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color-form);
    background-color: #fff;
    font-family: "Rubik", sans-serif;
    background-clip: padding-box;
    border: 2px solid var(--border-color-form-unfocused);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: auto;
    border-radius: var(--border-radius);
}

#restaurant-detail .symfony-collection li input:not([type="file"]):not([type="checkbox"]):hover {
    border: 2px solid var(--primary-color-light);
    cursor: pointer;
}

#restaurant-detail .restaurant-details .symfony-collection li {
    display: flex;
    align-items: center;
    padding: 0;
}

#restaurant-detail .restaurant-details .symfony-collection-remove,
.menu-restaurant-price-row-remove,
.menu-restaurant-language-alt-remove {
    color: var(--primary-color);
    transition: color .3s;
}

#restaurant-detail .restaurant-details .symfony-collection-remove:hover,
.menu-restaurant-price-row-remove:hover,
.menu-restaurant-language-alt-remove:hover {
    color: var(--primary-hover-color);
    transition: color .3s;
}

.alt-remove-hidden {
    visibility: hidden;
}

#restaurant-detail .restaurant-details .symfony-collection-remove svg {
    width: 20px;
    height: 20px;
    margin-right: 7px;
}

#restaurant-detail .restaurant-details-opening-hours .table-wrapper {
    width: 100%;
    display: block;
    overflow-y: auto;
    max-width: calc(100vw - 2rem);
}

#restaurant-detail .restaurant-details-opening-hours .symfony-collection {
    display: flex;
    flex-wrap: wrap;
}

#restaurant-detail .restaurant-details-opening-hours .symfony-collection li {
    display: inline-flex;
    align-items: end;
    padding: 0 .5rem 0 0;
    vertical-align: bottom;
    margin: 2px 0;
}

#restaurant-detail .restaurant-details-opening-hours .symfony-collection li .symfony-collection-remove,
#restaurant-detail #restaurant-type .symfony-collection li .symfony-collection-remove,
#restaurant-detail .restaurant-details-phones .symfony-collection li .symfony-collection-remove {
    margin-bottom: 10px;
}

#restaurant-detail .restaurant-details-opening-hours .symfony-collection li .add_item_link-container button,
#restaurant-detail #restaurant-type .symfony-collection li .add_item_link-container button,
#restaurant-detail .restaurant-details-phones .symfony-collection li .add_item_link-container button {
    margin-bottom: 5px;
    margin-top: 5px;
}

#restaurant-detail .restaurant-details-opening-hours .symfony-collection li input {
    width: 96px !important;
    padding: 0.375rem .5rem !important;
}

#restaurant-detail .restaurant-details-opening-hours .symfony-collection li label {
    display: none;
}

#restaurant-detail .restaurant-details-opening-hours #restaurant-details-opening-hours-weekday .symfony-collection li:first-of-type > div > div label,
#restaurant-detail .restaurant-details-opening-hours #restaurant-details-opening-hours-monday .symfony-collection li:first-of-type > div > div label {
    display: initial;
}

#restaurant-detail .restaurant-details-opening-hours td > label,
#restaurant-detail .restaurant-details-opening-hours td > label {
    margin-top: 4px;
}

#restaurant-detail .restaurant-details-opening-hours #restaurant-details-opening-hours-weekday td > label,
#restaurant-detail .restaurant-details-opening-hours #restaurant-details-opening-hours-monday td > label {
    margin-top: 24px;
}

#restaurant-detail .restaurant-details-opening-hours table tr td {
    vertical-align: top;
    padding: .25rem 0;
}

#restaurant-detail .restaurant-details-opening-hours table tr td:first-of-type label {
    padding-right: 1rem;
}

#restaurant-detail .restaurant-details-opening-hours .symfony-collection li > div[id*="business_form"],
#restaurant-detail .restaurant-details-opening-hours .symfony-collection li > div > div[id*="business_form"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: .35rem;
}

#restaurant-detail .restaurant-details .restaurant-details-phones .symfony-collection {
    display: flex;
    flex-wrap: wrap;
}

#restaurant-detail .restaurant-details .restaurant-details-phones .symfony-collection li {
    display: inline-flex;
    width: 50%;
    min-width: max(350px, 50%);
    max-width: 100%;
    padding: 0 .5rem 0 0;
    align-items: end;
}

@media (max-width: 991px) {
    #restaurant-detail .restaurant-details .restaurant-details-phones .symfony-collection li {
        margin-top: 0.5rem;
    }
}

@media (max-width: 767px) {
    #restaurant-detail .restaurant-details .restaurant-details-phones .symfony-collection li {
        width: 100%;
        min-width: 100%;
    }
}

#restaurant-detail .restaurant-details .restaurant-details-phones .symfony-collection li > div:not(.add_item_link-container) {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-gap: .5rem;
    width: calc(100% - 20px);
}

#restaurant-detail #restaurant-our-team .symfony-collection {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

#restaurant-detail #restaurant-our-team .symfony-collection li {
    display: block;
}

#restaurant-detail #restaurant-our-team .symfony-collection #editable-member-dropdown {
    position: relative;
    top: calc(-100% + 2.5rem);
    right: 1.25rem;
    margin-left: auto;
    width: 40px;
}

#restaurant-detail #restaurant-our-team .symfony-collection #editable-member-dropdown .btn {
    color: var(--font-color);
}

#restaurant-detail #restaurant-our-team .symfony-collection .editable-member-visibility {
    position: relative;
    color: var(--font-color);
    top: -100%;
    left: 1rem;
    width: 40px;
}

#restaurant-detail #restaurant-our-team .symfony-collection .editable-member-visibility .btn {
    color: var(--font-color);
}

#restaurant-detail #restaurant-our-team .symfony-collection li {
    width: 100%;
}

@media (min-width: 768px) {
    #restaurant-detail #restaurant-our-team .symfony-collection li {
        width: 50%;
    }
}

@media (min-width: 992px) {
    #restaurant-detail #restaurant-our-team .symfony-collection li {
        width: 33.33333333%;
    }
}

#restaurant-detail #restaurant-our-team .symfony-collection li > .editable-member {
    text-align: center;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
    padding: 2rem;
    margin: 30px 15px;
    background: var(--dark-highlight-color);
    min-height: calc(100% - 60px);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--font-color);
    transition: opacity .3s;
}

#restaurant-detail #restaurant-our-team .symfony-collection li > div.add_item_link-container {
    margin: 30px 15px;
}

@media(max-width: 767px) {
    #restaurant-detail #restaurant-our-team .symfony-collection li > div.add_item_link-container {
        margin: 0 14px;
    }
}

#restaurant-detail #restaurant-our-team .symfony-collection li > div.editable-member.staff-member-hidden {
    opacity: .3;
    border-color: var(--font-color) !important;
}

.editable-member-visibility-btn[data-hidden="true"] svg.view-icon-visible {
    display: none;
}

.editable-member-visibility-btn[data-hidden="false"] svg.view-icon-invisible {
    display: none;
}

#restaurant-detail #restaurant-our-team .symfony-collection li > div input:not([type='checkbox']),
#restaurant-detail #restaurant-our-team .symfony-collection li > div select,
#restaurant-detail #restaurant-our-team .symfony-collection li > div textarea {
    margin-bottom: .5rem;
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container {
    height: 200px;
    width: 200px;
    overflow: hidden;
    text-align: center;
    margin: 0 calc((100% - 200px) / 2) 1rem calc((100% - 200px) / 2);
    border-radius: 100px;
    cursor: pointer;
    border: 2px solid var(--background-color);
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container:hover .our-team-drop-container-placeholder {
    opacity: 0.75;
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container .our-team-drop-container-placeholder.visible {
    opacity: 1;
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container .member-img {
    height: 200px;
    transition: filter .3s;
    filter: brightness(1);
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container .member-img img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center center;
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container:hover .member-img {
    filter: brightness(.5);
    transition: filter .3s;
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container .our-team-drop-container-placeholder {
    position: relative;
    transition: opacity .3s;
    opacity: 0;
    top: -200px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 200px;
    color: var(--background-color);
    background-color: var(--font-color);
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container .our-team-drop-container-placeholder > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 200px;
    height: 200px;
}

#restaurant-detail #restaurant-our-team .symfony-collection .our-team-drop-container .our-team-drop-container-placeholder div span {
    font-size: 1.2rem;
}

#restaurant-detail #restaurant-our-team .modal-content .modal-body {
    text-align: left;
}

#restaurant-detail #restaurant-our-team .modal-content .modal-body input,
#restaurant-detail #restaurant-our-team .modal-content .modal-body textarea {
    border: 1px solid var(--border-color);
}

#add-gastroplanet-product-modal > div > div > div.modal-body {
    padding-left: 0;
    padding-right: 0;
}

#restaurant-detail #gallery .symfony-collection {
    display: flex;
    flex-wrap: wrap;
}

#restaurant-detail #gallery .symfony-collection .gallery-image,
#restaurant-detail #business-information .gallery-image {
    text-align: right;
    height: calc(200px + 1rem);
 }

#restaurant-detail #gallery .symfony-collection .gallery-image .symfony-collection-remove {
    position: relative;
    top: calc(-100% + 1rem);
    right: 1rem;
    color: var(--font-color);
}

#restaurant-detail #gallery .symfony-collection .gallery-image img,
#restaurant-detail #gallery #gallery-logo img {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0.5rem 1rem 0.5rem 0;
    border-radius: var(--border-radius);
    object-fit: cover;
    object-position: center center;
}

#restaurant-detail #gallery .symfony-collection #gallery-alert {
    color: var(--danger-color);
    margin: .5rem;
}

#restaurant-detail #gallery .symfony-collection #gallery-drop-container {
    display: flex;
    width: 200px;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    cursor: pointer;
    background-color: var(--dark-highlight-color);
    font-size: 1.2rem;
}

#restaurant-detail.restaurant-detail-edit #restaurant-type .symfony-collection {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    vertical-align: bottom;
}

#restaurant-detail.restaurant-detail-edit #restaurant-type .symfony-collection li {
    margin: .5rem .5rem 0 0;
    display: inline-flex;
    vertical-align: middle;
    align-items: end;
}

#restaurant-detail.restaurant-detail-edit #restaurant-type .symfony-collection li .select2 {
    min-width: 200px;
}

#restaurant-detail.restaurant-detail-edit h3 + .add_item_link,
#restaurant-detail.restaurant-detail-edit h2 + .add_item_link {
    display: inline-flex;
    margin-left: .5rem;
    margin-top: 0;
    vertical-align: center;
}

#restaurant-gallery {
    white-space: nowrap;
    width: 100%;
}

#restaurant-gallery .restaurant-gallery-image-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#restaurant-gallery .restaurant-gallery-image-container a.glightbox {
    width: 100%;
}

#restaurant-gallery .restaurant-gallery-image-container .restaurant-gallery-image,
#restaurant-gallery .restaurant-gallery-image-container .restaurant-gallery-video {
    aspect-ratio: 1;
    width: 100%;
    object-fit: cover;
}

#restaurant-gallery .restaurant-gallery-image-container .restaurant-gallery-video {
    filter: brightness(0.5);
    transition: filter .3s;
}

#restaurant-gallery .restaurant-gallery-image-container .restaurant-gallery-video:hover {
    filter: brightness(0.6);
    transition: filter .3s;
}

#restaurant-gallery .restaurant-gallery-image-container .restaurant-gallery-video-play {
    position: relative;
    width: 6rem;
    height: 6rem;
    left: -50%;
    transform: translateX(-50%);
    z-index: 999;
    color: white;
    opacity: .5;
    transition: opacity .3s;
}

#restaurant-gallery .restaurant-gallery-image-container:hover .restaurant-gallery-video-play {
    opacity: .8;
    transition: opacity .3s;
}

#restaurant-gallery-slider .swiper-wrapper {
    padding-bottom: 4rem;
}

#restaurant-gallery-slider .swiper-button-prev,
#restaurant-gallery-slider .swiper-button-next {
    color: var(--font-color);
    top: calc(50% - 2rem);
}

#restaurant-detail ul:not(.editable-member-menu, .editable-product-menu, .restaurant-menu-photo-container, .restaurant-menu-price-days-menu) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    -webkit-appearance: none;
}

@media (max-width: 767px) {
    #restaurant-detail ul {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 400px) {
    #restaurant-detail ul {
        grid-template-columns: auto;
    }
}

#restaurant-detail ul i {
    padding-right: 2px;
    color: var(--primary-color);
    font-size: 24px;
    line-height: 1;
}

#restaurant-detail ul li {
    padding: .5rem 0;
}

#restaurant-aside-opening-hours table tr td {
    vertical-align: top;
}

#restaurant-aside-opening-hours table tr td:not(:last-of-type) {
    padding-right: .5rem;
}

#restaurant-our-team .swiper-slide {
    height: auto;
}

#restaurant-our-team .member {
    text-align: center;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
    padding: 2rem;
    margin: 30px 15px;
    background: var(--dark-highlight-color);
    min-height: calc(100% - 60px);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

#restaurant-our-team .member img, #restaurant-our-team .member svg {
    width: 200px;
    max-width: 100%;
    border-radius: 50%;
    margin: 0 0 30px 0;
}

#restaurant-our-team .member h4,
#restaurant-our-team .editable-member h4 {
    font-weight: 400;
    margin-bottom: 2px;
    font-size: 18px;
}

#restaurant-our-team .member span,
#restaurant-our-team .editable-member span {
    display: block;
    font-size: 13px;
}

#restaurant-our-team .member p,
#restaurant-our-team .editable-member p {
    padding-top: 10px;
    font-size: 14px;
    font-style: italic;
}

#restaurant-our-team .member p {
    color: white;
}

#restaurant-our-team .cropper-crop-box,
#restaurant-our-team .cropper-view-box {
    border-radius: 50% !important;
}

@media(min-width: 400px) {
    #insert-menu {
        padding: 0.375rem 2rem;
    }
}

#menu .modal-footer button {
    width: 96px;
    display: inline-block !important;
}

.list-group-item {
    color: var(--font-color);
    background-color: var(--background-color);
    border-color: rgba(0,0,0,.25);
}

.list-group-item.active {
    color: var(--primary-color);
    background-color: var(--background-color);
    border-color: rgba(0,0,0,.25);
}

.list-group-item:hover {
    background-color: var(--background-color);
    color: var(--primary-color-light)
}

.customer-entity svg {
    width: 50%;
    height: 50%;
    margin-bottom: 1rem;
    color: var(--primary-color);
    background-color: var(--background-color);
    border-radius: 1000px;
    border: 4px solid var(--primary-color);
}

.customer-entity img {
    margin-bottom: 1rem;
    border-radius: 50% 50%;
}

#back-to-business {
    margin-top: 24px;
}

#back-to-business * {
    color: var(--font-color);
}

#back-to-business h2 {
    font-size: 2rem;
}

#back-to-business svg {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    margin-right: 2px;
}

@media (max-width: 575px) {
    #back-to-business {
        margin-top: 24px;
    }

    #back-to-business * {
        color: var(--font-color);
    }

    #back-to-business h2 {
        font-size: 1.5rem;
    }

    #back-to-business svg {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
        margin-right: 2px;
    }
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    overflow-x: auto;
    z-index: 100 !important;
    position: sticky;
    top: 70px;
}

@media(max-width: 399px) {
    #business-search.business-form {
        padding-left: 0;
        padding-right: 0;
    }
}

#business-search .progress-steps {
    background: var(--dark-highlight-color);
    border-radius: var(--border-radius);
}

.progress-step div h2 {
    font-size: 1.4rem;
    margin: 0;
    padding: 1.5rem;
    white-space: nowrap;
    color: var(--restaurant-navbar-color);
    transition: color .3s;
}

@media(max-width: 575px) {
    #restaurant-detail-title-info-wrapper .progress-step div h2 {
        font-size: 1.1rem;
        padding: 0.75rem 0.75rem;
    }

    #progress-steps-dropdown > svg {
        width: 18px;
        height: 18px;
    }
}

.progress-step:hover div h2 {
    color: var(--primary-color-light);
}

.progress-step.active div h2, #statistic_title {
    color: var(--primary-color);
}

#statistic_title {
    font-weight: bold;
}

.progress-step div[aria-disabled="true"] h2 {
    color: var(--border-color);
    cursor: auto;
}

/*--------------------------------------------------------------
# Select2
--------------------------------------------------------------*/
.select2-container.select2-container--default .select2-selection--single {
    border-radius: var(--border-radius);
    display: block;
    width: 100%;
    height: 40px;
    padding: 0.375rem 0.75rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid var(--border-color-form-unfocused);
    transition: .3s border-color;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

:not(.disabled)+.select2-container.select2-container--default .select2-selection--single:hover {
    border: 2px solid var(--primary-color-light);
}

:not(.disabled)+.select2-container.select2-container--default .select2-selection--single:focus {
    border: 2px solid var(--primary-color);
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: url("/images/icons/chevron-down.svg");
    background-color: transparent;
    background-size: contain;
    border: none !important;
    height: 14px !important;
    width: 14px !important;
    top: 7px;
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__clear {
    font-weight: 300;
    margin-top: -7px;
    color: var(--tables-color);
    font-size: 24px;
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #000000;
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    color: var(--font-color-form);
    padding: 0;
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: .5rem;
    right: .5rem;
}

.select2-container--default .select2-results__option--selected {
    background-color: white !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--font-color-form) !important;
    background-color: var(--light-hover-color) !important;
}

li.select2-results__option {
    color: var(--font-color-form);
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.pagination ul {
    list-style: none;
    padding: 0;
    width: 100%;
}

.pagination ul li.page-item a {
    margin: 0 8px;
}

.pagination ul li.page-item a,
.pagination .pagination-mobile div div a {
    border-radius: var(--border-radius);
    font-size: 14px;
    padding: .375rem .75rem;
    background: transparent;
    border-width: 2px;
}

.pagination .pagination-mobile div div span,
.pagination .pagination-mobile div div a {
    margin: 0 4px;
    display: inline-block;
}

.pagination ul li.page-item.disabled a.page-link,
.pagination .pagination-mobile div div a.page-link.disabled {
    background: transparent;
    border-color: #999;
    color: #999;
    pointer-events: none;
}

.pagination ul li.page-item.dots a.page-link {
    border: 0;
    padding: .375rem;
    background-color: transparent;
}

.pagination ul li.page-item a.page-link,
.pagination-mobile a.page-link {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pagination ul li.page-item.active a.page-link,
.pagination-mobile a.page-link.active {
    color: var(--dark-highlight-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination ul li.page-item:first-child .page-link,
.pagination ul li.page-item:last-child .page-link,
.pagination-mobile .page-link:first-child,
.pagination-mobile .page-link:last-child {
    border-radius: var(--border-radius);
}

.pagination ul li.page-item:not(:first-child),
.pagination-mobile .page-link:not(:first-child) {
    margin-left: 0;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
    margin-top: auto;
    display: flex;
    flex-direction: column-reverse;
}

#footer .footer-top {
    padding: 30px 0 30px 0;
    box-shadow: inset 0 16px 16px rgba(0, 0, 0, 0.15);
}

#footer .footer-top h4 {
    font-size: 16px;
    padding-bottom: 12px;
}

#footer .footer-top .footer-mission p {
    font-size: 1.5rem;
    font-family: "Rubik", sans-serif;
    font-weight: 300;
}

main:has(.business-form) + #footer .footer-opener {
    margin-bottom: 80px;
}

#footer .footer-opener {
    cursor: pointer;
}

#footer .footer-opener svg {
    height: 20px;
    width: 20px;
    transform: rotate(0deg);
}

#footer .footer-opener svg .st0 {
    fill: var(--primary-color);
    stroke: transparent;
}

#footer .footer-opener + .footer-top {
    display: none;
}

#footer .footer-opener.open svg {
    transform: rotate(180deg);
}

#footer .footer-opener.open + .footer-top {
    display: block;
}

#footer .footer-top .footer-links {
    margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: var(--primary-color);
    font-size: 24px;
}

#footer .footer-top .footer-links ul li {
    padding: 8px 0;
    display: flex;
    align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
    padding-top: 0;
}

#footer .footer-top .footer-links ul a {
    color: var(--font-color);
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
    text-decoration: none;
    color: var(--primary-color-light);
}

[list]::-webkit-calendar-picker-indicator {
    display: none;
}

.spinner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block;
}

.goverlay {
    z-index: 9991;
}

/*--------------------------------------------------------------
# Animation keyframes
--------------------------------------------------------------*/
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Login / Register
--------------------------------------------------------------*/

#login-form-wrapper,
#expat-register-form-wrapper {
    max-width: 400px;
    width: 100%;
}

#login-form-wrapper label,
#expat-register-form-wrapper label {
    margin-bottom: 0.25rem;
    margin-left: 1px;
    cursor: inherit;
    justify-content: left;
}

#registerBtn {
    background: var(--dark-hover-color);
    font-weight: 500;
    padding: .5rem 1rem;
    font-size: 1.1rem;
    color: var(--primary-color);
    display: flex;
    margin: 1rem auto;
    justify-content: center;
    align-items: center;
    width: 400px;
    max-width: 100%;
    border: thin solid var(--primary-color);
    border-radius: var(--border-radius);
    transition: color .3s, border-color .3s, background-color .3s;
}

#registerBtn:hover {
    cursor: pointer;
    color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    background-color: var(--primary-color-transparent);
}

#expat-register-form-wrapper label a {
    margin-left: 3px;
}

#expat-register-form-wrapper label:hover {
    color: var(--font-color);
}

#expat-register-form-wrapper #expat-register-agree-terms {
    display: flex;
    align-items: center;
    margin: 1rem 0;
}

#expat-register-form-wrapper #expat-register-agree-terms input {
    margin-bottom: 3px;
    margin-right: 4px;
    margin-left: 1px;
}

#expat-register-form-wrapper button {
    height: 40px;
    width: 100%;
    margin-top: 1rem;
}

#expat-register-password-wrapper {
    position: relative;
}

#expat-register-password-wrapper>div {
    position: absolute;
    right: 10px;
    top: 6px;
    cursor: pointer;
}

#expat-register-password-wrapper>div.hidden {
    visibility: hidden;
}

#expat-register-password-wrapper>div svg {
    width: 20px;
    height: 20px;
    color: var(--background-color);
}

#expat-register-form-wrapper input[type="checkbox"] + label {
    font-size: 1rem;
}

/*--------------------------------------------------------------
# Forgot password
--------------------------------------------------------------*/

#forgot-password-form-wrapper {
    justify-content: center;
    padding: 80px 0;
}

#forgot-password-form-wrapper form {
    margin: 2rem 0;
}

#forgot-password-form-wrapper .form-label {
    margin-bottom: 0.25rem;
}

#forgot-password-form-wrapper form .btn {
    width: 100%;
    margin-top: 2.5rem;
    height: 40px;
}

#forgot-password-form-result {
    justify-content: center;
    text-align: center;
    padding: 80px 0;
}

#forgot-password-form-result h1 {
    margin-bottom: 2rem;
    font-size: 1.6rem;
}

@media (min-width: 720px) {
    #forgot-password-form-result span {
        font-size: 1.3rem;
    }
}

#forgot-password-form-result #to-home-page {
    margin-top: 32px;
    max-width: 256px;
    min-height: 40px;
    width: 100%;
}

#forgot-password-form-result #to-home-page a {
    color: #FFFFFF;
}

#InfoModal .modal-header {
    padding-bottom: 0;
}

#InfoModal .modal-body svg {
    color: var(--primary-color);
}

.g_id_signin {
    display: flex;
    justify-content: center;
}

.g_id_signin.d-sm-none {
    display: inline-flex;
}

.divider::before {
    height: 1px;
    content: "";
    background-color: #ccc;
    width: 50%;
}

hr.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    text-align: center;
    height: 1.5em;
    background: none;
    opacity: 1;
}

hr.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 0.5em;
    line-height: 1.5em;
    background-color: var(--background-color);
    color: var(--font-color);
}

hr.hr-text:before {
    content: "";
    background-color: var(--font-color);
    position: absolute;
    left: 0;
    margin: 0 1em;
    top: 50%;
    width: calc(100% - 2em);
    height: 1px;
}

/*--------------------------------------------------------------
# Restaurant registration
--------------------------------------------------------------*/

.registration-steps {
    padding: 1.5rem 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    background-color: var(--dark-hover-color);
}

.registration-steps a,
.registration-steps button {
    width: 160px;
}

#restaurant-our-team-add,
#restaurant-places-add {
    margin-left: 12px;
}

#restaurant-places-remove {
    height: 20px;
    width: 20px;
}

#restaurant-places-print span {
    padding-left: 0.5rem;
}

#member-send-invitation-wrapper > div {
    direction: rtl;
    align-items: center;
    display: flex;
    padding-top: 0.5rem;
}

#member-send-invitation-wrapper > div label {
    padding-left: 6px;
    width: 100%;
}

#member-send-invitation-wrapper > div input[type='checkbox'] {
    height: 16px;
    width: 16px;
    accent-color: var(--primary-color);
}

#restaurant-places > div:first-child {
    margin-bottom: 2rem;
}

#restaurant-places-remove {
    margin-left: 2px;
}

#restaurant-places-collection {
    padding-left: 1rem;
    padding-right: 1rem;
}

#restaurant-places-collection li .editable-member {
    width: min(calc(100% - 40px), 500px);
    display: inline-block;
    padding-bottom: 1.5rem;
}

#restaurant-places-collection li .editable-member > div {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 6px;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: #fff;
    color: var(--font-color);
    border-radius: var(--border-radius);
    border: 0;
    position: relative;
}

#restaurant-places-collection li .editable-member > div svg {
    width: 32px;
    height: 32px;
}

#restaurant-places-collection img {
    width: 100%;
    border-radius: var(--border-radius);
    border: 0;
    position: absolute;
}

#edit-member-invitation-sent {
    color: rgb(107, 165, 252);
}

#edit-member-invitation-accepted {
    color: #6fcc87;
}

#edit-member-invitation-declined {
    color: #ff5f6c;
}

@media(max-width: 991px) {
    #business-information #restaurant-submit button {
        width: 100%;
    }
}

#restaurant-detail #restaurant-our-team .symfony-collection .no-border {
    border: 0;
}

select.decoration option:hover {
    box-shadow: 0 0 10px 100px #a88b18 inset !important;
}

/*--------------------------------------------------------------
# Restaurant Menu
--------------------------------------------------------------*/

@font-face {
    font-family: 'Pulpo Rust 100';
    src: url('/gastroplanet/fonts/42289.ttf');
}

@font-face {
    font-family: 'Feltro Normal';
    src: url('/gastroplanet/fonts/42781.ttf');
}

.navbar .restaurant-menu-cart {
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
}

@media(max-width: 399px) {
    .navbar .restaurant-menu-cart {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.navbar .restaurant-menu-cart a {
    padding-right: 0;
    padding-left: 0;
}

.restaurant-menu-cart svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    margin-right: 0.5rem;
    transition: color .3s;
}

.restaurant-menu-cart svg * {
    fill: var(--font-color);
}

.navbar .restaurant-menu-cart a:hover svg {
    color: var(--primary-color-light);
}

.restaurant-menu-cart-amount {
    color: var(--primary-color);
}

nav#delivery-options {
    margin: 2rem 0 1rem 0;
}

#delivery-options>button:not(#tip-options-button) {
    color: var(--font-color);
    transition: color .3s;
    border: 1px solid var(--font-color);
    text-transform: unset;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background-color: var(--dark-hover-color);
}

#delivery-options>button:not(#tip-options-button).active {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.restaurant-menu-item-wrapper {
    align-items: start;
    padding: 1.5rem 0;
    min-height: 128px;
    display: flex;
    flex-wrap: wrap;
}

.restaurant-menu-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.restaurant-menu-item-details div.justify-content-end>a,
.restaurant-menu-item-details div.justify-content-end>button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
}

.restaurant-menu-item-details > div > button > svg {
    margin-right: 8px;
    color: var(--background-color);
}

.restaurant-menu-item-details .dropdown-menu li a.restaurant-menu-item-price {
    width: unset;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .restaurant-menu-item-details > div > div > div {
        padding-right: 0;
    }

    .restaurant-menu-item-details a.restaurant-menu-item-price,
    .restaurant-menu-item-details button.restaurant-menu-item-price,
    .restaurant-menu-item-details button.price-dropdown-button {
        justify-content: center;
    }

    .restaurant-menu-item-details a.restaurant-menu-item-price {
        margin-top: 0.75rem;
    }

    .restaurant-menu-item-wrapper {
        padding: 1rem 0 1.5rem 0;
    }
}

.restaurant-menu-item-details .restaurant-menu-item-price {
    font-style: normal;
    font-size: 1.1rem;
}

.restaurant-menu-item-details .restaurant-menu-item-price svg {
    color: var(--background-color);
}

.likes {
    padding-left: 12px;
}

.likes>button,
.likes>div {
    color: var(--font-color);
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.likes>button svg,
.likes>div svg {
    width: 20px;
    height: 20px;
}

@media(max-width: 480px) {
    .likes>button svg,
    .likes>div svg {
        width: 16px;
        height: 16px;
    }
}

.likes>button span,
.likes>div span {
    font-size: 0.9rem;
}

.restaurant-menu-cart-summary {
    position: fixed;
    top: var(--header-height);
    right: 0;
    background-color: var(--dark-hover-color);
    border-left: 3px solid var(--primary-color);
    height: calc(100vh - var(--header-height));
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 0.75rem 0.75rem var(--primary-color);
    max-width: 400px;
    width: 100%;
    transition: .3s right ease-in-out;
}

.restaurant-menu-cart-summary>div,
.restaurant-menu-cart-summary>nav {
    padding-left: 32px;
    padding-right: 32px;
}

.restaurant-menu-cart-summary.restaurant-menu-cart-summary-hidden {
    right: -420px;
}

@media(max-width: 400px) {
    .restaurant-menu-cart-summary {
        border: 0;
    }

    .restaurant-menu-cart-summary>div,
    .restaurant-menu-cart-summary>nav {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.restaurant-menu-cart-summary.hidden {
    transition: all 0.3s;
    visibility: hidden;
    opacity: 0;
}

#delivery-block,
#pickup-block {
    background-color: white;
    border-radius: 6px;
}

.order-block-clickable {
    display: block;
    padding: 0.75rem 1rem;
}

.order-information,
.order-block-clickable svg {
    color: var(--dark-ultra-color);
}

#delivery-block h3,
#pickup-block h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 12px;
    font-weight: 400;
    color: rgb(33, 37, 42);
    opacity: .65;
}

#delivery-block .order-information > div,
#pickup-block .order-information > div {
    line-height: 1.2;
}

.restaurant-menu-cart-summary #delivery-block form>#form-fields>div,
.restaurant-menu-cart-summary #pickup-block form .modal-body>div:not(:first-child) {
    margin-top: 0.5rem;
}

.restaurant-menu-cart-summary #pickup-block form span[id$="_alert"],
.restaurant-menu-cart-summary #delivery-block form span[id$="_alert"] {
    color: var(--danger-color);
    font-style: italic;
}

#pickup-block.not-valid a svg.bi-pencil-fill,
#pickup-block.not-valid a>div>h3,
#delivery-block.not-valid a svg.bi-pencil-fill,
#delivery-block.not-valid a>div>h3 {
    color: var(--danger-hover-color);
}

#choose-delivery-wrapper {
    height: 56px;
}

select#choose-delivery {
    min-height: 56px;
    height: fit-content;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.1rem;
    scrollbar-width: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
}

select#choose-delivery+label {
    z-index: 3;
    padding-top: 1rem;
}

select#choose-delivery.chosen {
    padding-top: 1.3rem;
}

select#choose-delivery::-webkit-scrollbar {
    width: 0;
}

select#choose-delivery:focus {
    background-image: none !important;
}

select#choose-delivery option {
    padding: 4px 0.5rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

select#choose-delivery option:hover {
    background-color: var(--light-hover-color);
    color: var(--background-color);
}

select#choose-delivery option:checked {
    box-shadow: 0 0 10px 100px var(--background-color) inset;
    color: red;
}

.restaurant-menu-cart-items {
    background-color: var(--dark-ultra-color);
    padding-bottom: 0.5rem;
}

.restaurant-menu-cart-item {
    padding-bottom: 0.25rem;
}

.restaurant-menu-cart-item>div:first-child svg {
    margin-left: 6px;
}

.restaurant-menu-cart-item>div:not(:first-child) {
    margin-top: 0.5rem;
}

@media(max-width: 575px) {
    .restaurant-menu-cart-item>div:nth-child(2) {
        padding-left: 4px;
    }
}

.restaurant-menu-cart-summary>#back {
    position: sticky;
    top: -1px;
    background-color: var(--dark-hover-color);
}

.restaurant-menu-cart-summary>#back>svg {
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex: 0 0 auto;
    color: var(--medium-color);
}

.restaurant-menu-cart-summary h2 {
    text-transform: uppercase;
    width: 100%;
    color: var(--primary-color);
    text-align: center;
    font-weight: 500;
}

.restaurant-menu-cart-summary .remove-from-basket {
    color: var(--medium-color);
}

#tip-options-button {
    width: 100%;
    height: 40px;
}

#tip-options-button svg {
    margin-left: 0.5rem;
    transition: .3s;
    transform: rotate(-180deg);
}

#tip-options-button.show svg {
    transform: rotate(0);
}

#tip-options {
    background-color: var(--dark-ultra-color);
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    border: 0;
}

#tip-options a {
    font-size: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#tip-options li:first-child>span {
    display: block;
    padding: 4px 10px 8px 10px;
}

.restaurant-menu-cart-item-price {
    text-align: right;
}

.cart-pay-button-wrapper {
    width: 397px;
    background-color: var(--dark-hover-color);
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1.5rem 32px;
    justify-content: center;
    display: flex;
    transition: right .3s ease-in-out;
}

.restaurant-menu-cart-summary-hidden .cart-pay-button-wrapper {
    right: -420px;
}

.restaurant-menu-cart-summary::-webkit-scrollbar {
    width: 6px;
}

.restaurant-menu-cart-summary::-webkit-scrollbar-track {
    background: transparent;
}

.restaurant-menu-cart-summary::-webkit-scrollbar-thumb {
    background: var(--medium-color);
    border-radius: 6px;
}

@media (max-width: 400px) {
    .cart-pay-button-wrapper {
        width: 100%;
        padding: 1.5rem 16px;
    }
}

.restaurant-menu-course,
#restaurant-detail-container #about h3,
#restaurant-detail-container #contact h3 {
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Feltro Normal', sans-serif;
    color: var(--primary-color);
    overflow: hidden;
    padding: 2rem 0;
    text-transform: capitalize;
    margin-top: 0;
}

@media (max-width: 991px) {
    .restaurant-menu-course:first-child {
        padding-top: 1rem;
        padding-bottom: 0;
    }
}

.restaurant-menu-course:before,
.restaurant-menu-course:after,
#restaurant-detail-container #about h3:before,
#restaurant-detail-container #about h3:after,
#restaurant-detail-container #contact h3:before,
#restaurant-detail-container #contact h3:after {
    background-color: var(--primary-color);
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.restaurant-menu-course:before,
#restaurant-detail-container #about h3:before,
#restaurant-detail-container #contact h3:before {
    right: 0.75em;
    margin-left: -50%;
}

.restaurant-menu-course:after,
#restaurant-detail-container #about h3:after,
#restaurant-detail-container #contact h3:after {
    left: 0.75em;
    margin-right: -50%;
}

#restaurant-detail-container .alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#menu aside {
    padding-right: 5rem;
}

#menu aside h2 {
    font-size: 1.2rem;
    padding-bottom: .25rem;
    margin-bottom: .5rem;
    font-weight: 400;
    border-bottom: thin solid var(--primary-color);
}

#menu aside .filter-item {
    margin-left: 15%;
    padding: .25rem 1rem;
    cursor: pointer;
    transition: color .3s;
    font-size: .9rem;
    font-weight: 400;
}

@media(max-width: 767px) {
    #restaurant-menu-filter-collapse-container {
        padding-right: 0;
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
}

#restaurant-menu-filter-collapse {
    padding: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--dark-highlight-color);
    position: relative;
}

#restaurant-menu-filter-collapse button {
    position: absolute;
    right: 1rem;
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--medium-color);
}

#restaurant-menu-filter-collapse .filter-item-wrapper {
    margin-bottom: 2rem;
}

#restaurant-menu-filter-collapse .filter-item {
    padding: .25rem 1rem;
    cursor: pointer;
    transition: color .3s;
}

#restaurant-menu-filter-collapse h2 {
    font-size: 1.2rem;
}

#restaurant-menu-filter-collapse h2 {
    border-bottom: thin solid var(--primary-color);
    width: fit-content;
    margin-top: 1rem;
}

#restaurant-menu-filter-collapse h2>svg {
    margin-bottom: 4px;
}

#restaurant-detail-container #filters-selection-wrapper,
#business-search #filters-selection-wrapper {
    background-color: var(--background-color);
    padding-bottom: 1rem;
    padding-top: 1rem;
}

#restaurant-menu-sticky-wrapper {
    position: sticky;
    z-index: 1;
    top: 64px;
}

#restaurant-menu-sticky-wrapper>div {
    background-color: var(--background-color);
}

@media (max-width: 991px) {
    #restaurant-detail-container #filters-selection-wrapper,
    #business-search #filters-selection-wrapper {
        padding-bottom: 0.5rem;
    }
}

#business-search #filters-selection-wrapper {
    padding-right: 0;
}

#filters-selection-wrapper>section>section {
    margin-left: 12px;
    margin-right: 0;
}

#filters-selection-wrapper>section>section:last-of-type {
    margin-left: auto;
}

@media (min-width: 992px) {
    #filters-selection-wrapper {
        flex-direction: row-reverse;
    }
}

@media(max-width: 991px) {
    #filters-selection-wrapper>section:first-child {
        flex-direction: row-reverse;
    }
}

#menu aside .filter-item:hover {
    color: var(--primary-color-light);
}

#menu #filters-selection {
    display: flex;
    flex-wrap: wrap;
}

#business-search #filters-selection {
    padding-left: 0;
    padding-top: 0;
}

@media (max-width: 991px) {
    #menu #filters-selection {
        padding-top: 0.5rem;
    }
}

#menu #filters-selection .filter-item-selection {
    display: flex;
    align-items: center;
    padding: .25rem .25rem .25rem .5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-color);
    margin: 0 8px 8px 0;
    height: 40px;
    background: transparent;
    cursor: pointer;
    transition: background-color .3s;
    color: var(--primary-color);
    font-size: 1rem;
}

#menu #filters-selection .filter-item-selection[data-filter-reversed="1"] span {
    background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}

#restaurant-detail-container #menu #filters-selection .filter-item-selection svg {
    width: 20px;
    height: 20px;
}

#menu #filters-selection .filter-item-selection:hover {
    background-color: var(--dark-hover-color);
}

@media (max-width: 991px) {
    #menu #filters-selection .filter-item-selection {
        height: 32px;
    }
}

#menu #filters-selection .filter-item-selection:hover {
    background-color: var(--dark-hover-color);
}

#restaurant-detail-container #about>section>p {
    text-align: justify;
}

.restaurant-menu-item-wrapper.hidden,
.restaurant-menu-item-wrapper.hidden-by-search {
    display: none;
}

@media (min-width: 767px) {
    #restaurant-detail-content .restaurant-menu-section {
        margin-right: 0;
    }
}

.restaurant-menu-section.hidden {
    display: none;
}

.editable-product h4 {
    font-size: 1.2rem;
    font-weight: 500;
    white-space: normal;
    font-style: normal !important;
}

.editable-product-gallery-container {
    padding-right: 1rem;
}

@media (max-width: 575px) {
    .restaurant-menu-item-details > div > div {
        justify-content: space-between;
    }

    .restaurant-menu-item-details > div > button {
        width: 100%;
        justify-content: center;
    }
}

.editable-product-main-image {
    aspect-ratio: 1;
    border-radius: var(--border-radius);
    border: 0;
    background-color: var(--dark-ultra-color);
    color: var(--font-color);
    margin-left: 1px;
    margin-right: 1px;
}

.editable-product-other-images {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2px;
}

.editable-product-other-images > div {
    aspect-ratio: 1;
    padding-top: 2px;
    padding-right: 1px;
    padding-left: 1px;
}

#menu .editable-product-other-images > div > img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--font-color);
}

#menu .editable-product .editable-product-description {
    font-style: italic;
    padding-right: 0.5rem;
}

.editable-product-description>span {
    display: none;
}

.product-attributes {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    font-style: italic;
}

.product-attributes.xx-small {
    display: none;
}

.product-attributes svg {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

.product-attributes>div {
    display: flex;
    align-items: center;
    max-width: 128px;
    width: 100%;
}

@media(max-width: 480px) {
    .editable-product-description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 0.9rem;
    }

    .editable-product-description>span {
        display: inline-block;
    }

    .editable-product-description.expanded>span {
        display: none;
    }

    .editable-product-description.expanded {
        overflow: visible;
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
    }

    .product-attributes svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
}

@media(max-width: 420px) {
    .product-attributes.owner:not(.xx-small) {
        display: none;
    }

    .product-attributes.xx-small {
        display: flex;
    }
}

.editable-product-name h4 {
    font-size: 1.2rem;
}

.editable-product-name .sku {
    font-weight: 400;
    font-style: italic;
    color: var(--medium-color);
    font-size: 1rem;
    margin-right: 6px;
}

.editable-product-dropdown button {
    padding: 2px 0 0 0;
    margin-left: 1.5rem;
}

@media(min-width: 992px) {
    .editable-product-dropdown button {
        margin-right: 1rem;
    }
}

.editable-product-dropdown svg {
    color: var(--font-color);
}

.editable-product-delete-modal .btn-danger {
    color: var(--background-color);
    background-color: var(--danger-color);
    border: 2px solid var(--danger-color);
}

.editable-product-delete-modal .btn-danger:hover {
    color: var(--background-color);
    background-color: var(--danger-hover-color);
    border: 2px solid var(--danger-hover-color);
}

#restaurant-detail .editable-product-menu li {
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer;
}

@media (min-width: 576px) {
    .modal-dialog.modal-dialog-menu {
        max-width: 550px;
    }
}

@media (min-width: 800px) {
    .modal-dialog.modal-dialog-menu {
        max-width: 800px;
    }
}

#restaurant-menu-add button {
    margin-top: 0;
    margin-left: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#restaurant-menu-show-hidden label {
    font-size: 1rem;
    width: fit-content;
}

#restaurant-menu-show-hidden label:hover {
    color: var(--font-color);
}

#restaurant-menu-show-hidden input {
    box-shadow: none;
}

#menu .registration-restaurant-details {
    padding-right: 1.75rem;
}

@media (min-width: 992px) {
    #menu .product-code-wrapper {
        margin-top: 28px;
    }
}

#menu .product-visibility {
    position: absolute;
    margin-top: -55px;
    margin-left: 145px;
}

#menu .product-visibility input.apple-switch {
    margin-top: 2px;
}
#menu .product-visibility label {
    margin-bottom: 0;
    margin-left: .5rem;
    vertical-align: top;
    display: inline;
}

#menu .restaurant-menu-photos > div,
#menu .restaurant-menu-photos > label {
    margin-left: 1.5rem;
}

#menu .restaurant-menu-drop-container {
    display: flex;
    width: 100%;
    min-width: 76px;
    aspect-ratio: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: var(--border-radius);
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--background-color);
    font-size: 0.75rem;
    transition: .3s background-color;

}

#menu .restaurant-menu-drop-container:hover {
    background-color: var(--primary-hover-color);
}

#menu .restaurant-menu-photo-container {
    padding-left: 2.25rem;
    -webkit-appearance: none;
    list-style: none;
    display: grid;
    grid-template-columns: auto auto auto;
}

@media (max-width: 991px) {
    #menu .restaurant-menu-photo-container {
        padding-left: 0.8rem;
    }

    #menu .restaurant-menu-photos > div,
    #menu .restaurant-menu-photos > label {
        margin-left: 0;
    }
}

#menu .restaurant-menu-photo-container .restaurant-menu-photo-item {
    padding: 0;
    min-width: calc(76px + 0.5rem);
}

#menu .restaurant-menu-photo-container .restaurant-menu-photo-item:last-child {
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
}

#menu .modal h6 {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

#menu .editable-product .modal select {
    appearance: none;
}

.restaurant-menu-language-alt {
    padding: 1rem;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    background-color: #1b1b1f;
    position: relative;
}

.restaurant-menu-language-alt .col-md-1 {
    display: flex;
    justify-content: end;
    padding-right: 1rem;
}

#menu .restaurant-menu-item-wrapper img {
    aspect-ratio: 1;
    border-radius: 4px;
    padding: 0;
    object-fit: cover;
    border: 2px solid var(--font-color);
    margin: 0;
    width: 100%;
}

#menu .restaurant-menu-item-wrapper img.product-img-placeholder {
    aspect-ratio: inherit;
    object-fit: contain;
}

#menu .restaurant-menu-item-wrapper .modal img {
    border: 0;
    width: 100%;
    max-width: unset;
    border-radius: 0;
}

#menu .restaurant-menu-item-wrapper .modal .carousel-control-next-icon,
#menu .restaurant-menu-item-wrapper .modal .carousel-control-prev-icon {
    filter: drop-shadow(2px 2px 2px #000);
}

#menu #restaurant-menu-search {
    position: relative;
    margin-bottom: 8px;
}

#menu #restaurant-menu-search input {
    padding-right: 32px;
}

#menu #restaurant-menu-search input:placeholder-shown + button {
    display: none;
}

#menu #restaurant-menu-search input {
    background-color: var(--background-color);
    color: var(--font-color);
    border: 1px solid var(--font-color);
}

#menu #restaurant-menu-search button {
    position: absolute;
    color: var(--font-color);
    background-color: var(--background-color);
    top: 8px;
    right: 2px;
    border: 0;
}

#menu #restaurant-menu-search svg {
    width: 20px;
    height: 20px;
    color: var(--medium-color);
}

@media(max-width: 991px) {
    #restaurant-detail-content #restaurant-menu-filter {
        width: fit-content;
        height: 40px;
    }

    #mobile-search-trigger {
        width: 30px;
        height: 40px;
        padding: 0 0 0 10px;
        margin-left: 12px;
    }

    #mobile-search-trigger svg {
        width: 20px;
        height: 20px;
    }
}

#menu #restaurant-menu-filter button {
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    padding: 0;
}

#menu #restaurant-menu-filter svg {
    width: 20px;
    height: 20px;
}

#menu #restaurant-menu-filter svg+svg {
    width: 14px;
    height: 14px;
    margin-left: 0.5rem;
    transition: .3s;
}

#menu #mobile-search-close {
    padding: 0 4px 0 0;
    margin-bottom: 8px;
}

#menu #mobile-search-close svg {
    color: var(--medium-color);
    width: 28px;
    height: 28px;
}

#restaurant-menu-preferences {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

#restaurant-menu-preferences button,
#selector-language-currency button {
    background-color: var(--background-color);
    color: var(--font-color);
    font-weight: 400;
    height: 40px;
    margin-left: 20px;
    margin-bottom: 0.125rem;
    width: fit-content;
    white-space: nowrap;
    border: 1px solid var(--font-color);
}

@media (max-width: 991px) {
    #restaurant-menu-preferences button,
    #selector-language-currency button {
        margin-left: 0;
    }
}

#restaurant-menu-preferences button>span:nth-child(2) {
    opacity: .6;
}

#restaurant-menu-preferences .dropdown-menu,
#selector-language-currency .dropdown-menu {
    background-color: var(--dropdown-color);
    padding: 2rem 0.5rem;
}

#restaurant-menu-preferences h3,
#selector-language-currency h3 {
    text-transform: uppercase;
    color: var(--font-color);
    font-size: 1rem;
    padding-left: 2rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

#restaurant-menu-preferences ul,
#selector-language-currency ul {
    list-style: none;
    background-color: var(--dropdown-color);
    margin: 0;
    padding-right: 1.5rem;
    line-height: 1.75rem;
}

#restaurant-menu-preferences>.dropdown-menu>div>div:last-child,
#selector-language-currency>.dropdown-menu>div>div:last-child {
    border-left: 1px solid var(--font-color);
}

#restaurant-menu-preferences>.dropdown-menu>div>div:last-child ul,
#selector-language-currency>.dropdown-menu>div>div:last-child ul {
    padding-right: 1rem;
    margin-left: 1px;
}

#restaurant-menu-preferences ul li,
#selector-language-currency ul li {
    color: var(--font-color);
    cursor: pointer;
}

#restaurant-menu-preferences ul li.selected,
#selector-language-currency ul li.selected {
    color: var(--primary-color);
}

#restaurant-menu-preferences ul li.selected:before,
#selector-language-currency ul li.selected:before {
    content: "";
    height: 1rem;
    width: 1rem;
    display: block;
    float: left;
    margin-left: -1.4em;
    margin-top: 3px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("/images/icons/check2.svg");
}

#restaurant-menu-preferences button svg,
#selector-language-currency button svg {
    transition: .3s;
}

#restaurant-menu-preferences button.show svg,
#selector-language-currency button.show svg {
    transform: rotate(-180deg);
}

@media(max-width: 575px) {
    #restaurant-menu-preferences>.dropdown-menu.show,
    #selector-language-currency>.dropdown-menu.show {
        display: flex;
        justify-content: center;
        right: -1rem;
        top: 0;
        width: 100%;
    }
}

.restaurant-menu-language-alt-lang {
    padding-right: 0.5rem;
}

.restaurant-menu-language-alt > div,
.restaurant-menu-price-row > div {
    width: 100%;
}

#menu .restaurant-menu-delivery-time span {
    padding-left: 6px;
}

#menu .restaurant-menu-delivery-time > div {
    padding-right: 0.25rem;
}

#menu .modal textarea {
    resize: none;
    font-style: italic;
    height: 8rem;
}

#menu .modal select {
    border-radius: var(--border-radius);
}

#menu .restaurant-menu-weight > div:first-child {
    padding-right: 0.25rem;
}

#menu .restaurant-menu-weight select[name="unit_of_measure"] {
    padding-top: 20px;
}

#menu .restaurant-menu-weight > div:nth-child(2) {
    padding-left: 0.25rem;
}

#menu .restaurant-menu-tags-h {
    margin-top: 2rem;
}

#menu .restaurant-menu-tags h2 {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    font-weight: 500;
}

#menu .restaurant-menu-tags h2:first-letter {
    text-transform: capitalize;
}

#menu .restaurant-menu-tags ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    margin-bottom: 1.5rem;
    padding-left: 1rem;
}

#menu .restaurant-menu-tags ul li {
    display: flex;
    min-width: 128px;
    margin-bottom: .5rem;
}

#menu .restaurant-menu-tags ul li label {
    padding-right: 12px;
    padding-left: 6px;
}

#menu #menu-form-sort-tags-toggle {
    color: var(--font-color);
    font-weight: 400;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

#menu #menu-form-sort-tags-toggle svg {
    width: 28px;
    height: 28px;
    margin-right: 6px;
}

.restaurant-menu-price-date-container,
.restaurant-menu-price-time-container {
    display: flex;
}

#menu .restaurant-menu-price-amount,
#menu .restaurant-menu-price-currency,
#menu .restaurant-menu-price-amount:hover,
#menu .restaurant-menu-price-currency:hover,
#menu .restaurant-menu-price-amount:focus,
#menu .restaurant-menu-price-currency:focus {
    border: 1px solid var(--tables-color);
    box-shadow: none;
}

#menu .restaurant-menu-price-variant-name-wrapper {
    padding-bottom: .5rem;
}

@media (min-width: 992px) {
    #menu .restaurant-menu-price {
        padding-right: 0.5rem;
    }
}

#menu .restaurant-menu-price-amount.focused {
    border-left: 1px solid var(--primary-color);
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

#menu .restaurant-menu-price-amount {
    margin-right: 1px;
    border-right: 0;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    width: 86px;
}

#menu .restaurant-menu-price-amount:focus,
#menu .restaurant-menu-price-amount:hover {
    border-right: 0;
}

#menu .modal .restaurant-menu-price-currency {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    width: 76px;
}

.restaurant-menu-price-date-container > div,
.restaurant-menu-price-time-container > div {
    flex: 0 0 auto;
    width: 50%;
}

.restaurant-menu-price-time-container > div > .flatpickr-wrapper {
    width: 100%;
}

.restaurant-menu-price-date-container {
    padding-bottom: 0.5rem;
}

#menu .modal .restaurant-menu-price-time-container input:not(.numInput) {
    width: 100%;
    background-color: white;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}

.flatpickr-time input.numInput {
    background-color: white;
    border-radius: var(--border-radius);
    font-weight: 400;
}

.flatpickr-time input.numInput:hover,
.flatpickr-time input.numInput:focus {
    border: 0;
}

.flatpickr-calendar.hasTime .flatpickr-time,
.flatpickr-time .numInputWrapper {
    border-radius: var(--border-radius);
    border: 0;
}

.flatpickr-calendar {
    width: 196px;
}

.flatpickr-time .numInputWrapper span {
    border: 0;
}

.flatpickr-time .numInputWrapper .arrowUp {
    margin-top: 4px;
    padding-right: 8px;
}

.flatpickr-input[readonly] {
    background-color: white !important;
}

#menu .modal .restaurant-menu-price-time-container label {
    color: var(--background-color);
    opacity: 0.65;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

#menu .modal .restaurant-menu-price-time-container > div {
    position: relative;
}

.restaurant-menu-price-date-container > div:first-child,
.restaurant-menu-price-time-container > div:first-child {
    padding-right: 0.25rem;
}

.restaurant-menu-price-date-container > div + div,
.restaurant-menu-price-time-container > div + div {
    padding-left: 0.25rem;
}

.restaurant-menu-price-date-container > div + div > label,
.restaurant-menu-price-time-container > div + div > label {
    padding-left: 1rem;
}

.restaurant-menu-price-time-container > div button {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 8px;
    background-color: white;
    border: 0;
    color: var(--background-color);
    padding: 0;
    margin: 0;
}

.restaurant-menu-price-time-container > div:first-child button {
    right: calc(8px + 0.25rem);
}

.restaurant-menu-price-time-container button svg {
    width: 20px;
    height: 20px;
    color: var(--background-color);
}

.restaurant-menu-price-row {
    padding: 1rem;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    background-color: #1b1b1f;
}

.restaurant-menu-price-row-remove,
.restaurant-menu-language-alt-remove {
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    justify-content: end;
}

.restaurant-menu-price-row-remove svg,
.restaurant-menu-language-alt-remove svg {
    width: 32px;
    height: 32px;
}

@media (min-width: 992px) {
    .restaurant-menu-price-row .restaurant-menu-price-days {
        padding-left: 0.5rem;
    }
}

.restaurant-menu-price-days-col {
    padding-right: 0;
}

.restaurant-menu-price-days button.dropdown-toggle {
    width: 100%;
    background-color: white;
    color: var(--background-color);
    border-radius: var(--border-radius);
    height: 50px;
    text-align: left;
    font-weight: 400;
    cursor: unset;
}

.restaurant-menu-price-days button.dropdown-toggle::after {
    display: none;
}

#menu .restaurant-menu-price-days .restaurant-menu-price-days-menu,
#menu .editable-product-dropdown ul {
    border-radius: var(--border-radius);
}

#menu .restaurant-menu-price-days .restaurant-menu-price-days-menu {
    width: calc(100% - 0.5rem);
}

@media(max-width: 991px) {
    #menu .restaurant-menu-price-days .restaurant-menu-price-days-menu {
        width: 100%;
    }
}

#menu .restaurant-menu-price-days button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#menu .restaurant-menu-price-days li {
    padding: 0 0.75rem 0.25rem 0.75rem;
}

#menu .restaurant-menu-price-days li:first-child {
    border-bottom: 1px solid var(--tables-color);
    margin-bottom: 0.25rem;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

#menu .restaurant-menu-price-days label {
    display: flex;
    align-items: center;
}

#menu .restaurant-menu-price-days li span {
    padding-left: 0.5rem;
}

#menu .modal.fade.show label.form-label {
    font-weight: 400;
}

#menu .restaurant-menu-chosen-days {
    padding-left: 0;
    padding-right: 0;
    font-size: 1.2rem;
    border: 0;
    box-shadow: none;
    cursor: unset;
    background-color: #FFFFFF;
    height: 50px;
}

#menu .restaurant-menu-chosen-days:hover,
#menu .restaurant-menu-chosen-days:focus {
    border: 0;
    box-shadow: none;
}

.restaurant-menu-mandatory {
    color: #ff6a6a;
}

.restaurant-menu-required {
    color: #ff6a6a;
    padding-right: 1rem;
    font-style: italic;
}

#menu .modal .gallery-image {
    text-align: right;
    display: block;
    vertical-align: top;
    position: relative;
}

#menu .modal .gallery-image .image-wrapper {
    aspect-ratio: 1;
    padding-bottom: 0.5rem;
    padding-right: 0.5rem;
}

#menu .modal .gallery-image img {
    display: block;
    width: 76px;
    height: 76px;
    margin: 0;
    border-radius: var(--border-radius);
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 991px) {
    #menu .modal .gallery-image img {
        width: 100%;
        height: 100%;
    }
}

#menu .modal .gallery-image .gallery-image-remove {
    position: absolute;
    top: 0;
    right: 0.75rem;
}

#menu .modal .gallery-image .gallery-image-remove svg {
    width: 16px;
    height: 16px;
    color: var(--light-color);
    filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.9));
}

#restaurant-events-filter {
    padding-right: 1rem;
}

#restaurant-events-filter svg {
    height: 20px;
    width: 20px;
}

#restaurant-events-today {
    padding-top: 1rem;
    min-height: 54px;
}

#restaurant-events-today #show-only-active-orders-wrapper label {
    font-size: 1rem;
}

#restaurant-events-today #business-places-filter-wrapper {
    display: inline-block;
}

#restaurant-events-today #business-places-filter-wrapper .btn {
    padding: 6px;
    display: flex;
}
#restaurant-events-today #business-places-filter-wrapper .btn svg {
    width: 20px;
    height: 20px;
    color: var(--font-color);
}
#restaurant-events-today #business-places-filter-dropdown {
    background-color: var(--dark-hover-color);
    box-shadow: 0 0 4px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,0.5);
    border: 0;
}
#restaurant-events-today #business-places-filter-dropdown .dropdown-item {
    color: white;
}
#restaurant-events-today #business-places-filter-dropdown .dropdown-item:hover {
    background-color: var(--dark-ultra-color);
}

.restaurant-order {
    margin-bottom: 2rem;
}

.restaurant-call {
    margin-bottom: 1rem;
}

#restaurant-events-container [data-bs-toggle="tooltip"] {
    color: unset;
}

#restaurant-events-container .status-sent .restaurant-order-wrapper {
    background-color: var(--primary-color);
    box-shadow: 0 0 0.75rem var(--dark-hover-color);
    color: var(--dark-hover-color);
}

#restaurant-events-container .status-processing .restaurant-order-wrapper  {
    background-color: var(--dark-highlight-color);
    color: var(--primary-color);
    box-shadow: 0 0 0.75rem var(--primary-color);
    border: solid 5px var(--primary-color);
}

#restaurant-events-container .status-completed .restaurant-order-wrapper  {
    background-color: var(--dark-highlight-color);
    box-shadow: 0 0 0.75rem var(--dark-hover-color);
    color: var(--font-color);
    border: solid 3px var(--font-color);
}

#restaurant-events-container .status-cancelled .restaurant-order-wrapper  {
    background-color: var(--dark-highlight-color);
    box-shadow: 0 0 0.75rem var(--dark-hover-color);
    color: #505050;
    border: solid 3px #424345;
}

.status-cancelled .status-color {
    color: var(--font-color);
}

.restaurant-order .restaurant-order-time, .restaurant-call .restaurant-call-time {
    font-style: italic;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}

.restaurant-order-wrapper {
    border-radius: 12px;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}
.restaurant-call-wrapper {
    border-radius: 12px;
    padding: 1rem 1.5rem;
}

@media (max-width: 700px) {
    .restaurant-order-wrapper, .restaurant-call-wrapper {
        padding: 1rem;
    }
}

.restaurant-call.pending .restaurant-call-wrapper {
    background-color: var(--primary-color);
    box-shadow: 0 0 0.75rem var(--dark-hover-color);
}

.restaurant-call.processed .restaurant-call-wrapper {
    background-color: var(--dark-hover-color);
    box-shadow: 0 0 0.75rem var(--primary-color);
    border: 3px solid var(--primary-color);
}

.restaurant-call.processed .restaurant-call-wrapper h1 {
    color: var(--primary-color);
    margin-bottom: 0;
}

.restaurant-call.processed .restaurant-call-wrapper em {
    color: var(--primary-color);
}

.restaurant-call-wrapper h1 {
    color: var(--dark-hover-color);
    margin-bottom: 0;
    font-size: 1.1rem;
}

.restaurant-call-wrapper h1 small {
    font-size: 0.875rem;
    font-weight: 500;
}

.restaurant-call-wrapper .btn-primary {
    border: 0;
}

.restaurant-call.pending .restaurant-call-wrapper .btn-primary {
    background-color: var(--dark-hover-color);
    color: var(--primary-color);
}

.restaurant-call-time-header {
    height: 21px;
}

.status-sent .restaurant-order-wrapper h1 {
    color: var(--dark-hover-color);
}

.status-processing .restaurant-order-wrapper h1 {
    color: var(--primary-color);
}

.restaurant-order-wrapper h1 {
    color: var(--dark-hover-color);
    margin-bottom: 0;
    font-size: 1.3rem;
}

.status-completed .restaurant-order-wrapper h1 {
    color: var(--font-color);
}

.status-cancelled .restaurant-order-wrapper h1 {
    color: #505050;
}

.restaurant-order-wrapper hr {
    opacity: 1;
}

.restaurant-order .restaurant-order-details {
    margin: 0;
    padding-top: 0.75rem;
}

.restaurant-order-details-item {
    margin-bottom: 1rem;
}

@media(max-width: 700px) {
    .restaurant-order-details-item {
        margin-bottom: 0.5rem;
    }
}

.restaurant-order-details-name {
    padding-left: 0.75rem;
}

.restaurant-order .restaurant-order-wrapper .restaurant-order-processed-mark {
    display: flex;
    justify-content: flex-end;
    font-size: .85rem;
    max-width: 45%;
}
.restaurant-order .restaurant-order-wrapper .restaurant-order-processed-mark .text-right {
    margin-top: 4px;
}

.restaurant-order .restaurant-order-wrapper .restaurant-order-note {
    font-style: italic;
    font-size: .85rem;
}

.restaurant-order-wrapper .btn-primary {
    background-color: var(--dark-hover-color);
    color: var(--primary-color);
    border: 0;
}

.restaurant-order-wrapper .btn:last-child {
    margin-right: 0;
}

.restaurant-order-wrapper .btn-primary:hover {
    background-color: var(--background-color);
}

.restaurant-order-wrapper .btn-primary:focus {
    border: 0;
}

.restaurant-order.pending .restaurant-order-details-item {
    cursor: pointer;
}

.restaurant-order.processed .restaurant-order-details-item svg {
    display: none;
}

.restaurant-order.processed:not(.calling) .restaurant-order-wrapper-header {
    padding-bottom: 12px;
}

.restaurant-order-wrapper-header {
    padding-bottom: 10px;
}

.status-sent .restaurant-order-wrapper-header {
    border-bottom: solid 1px var(--dark-hover-color);
}

.status-processing .restaurant-order-wrapper-header {
    border-bottom: solid 1px var(--primary-color);
}

.status-cancelled .restaurant-order-wrapper-header {
    color: #505050;
    border-bottom: solid 1px #505050;
}

.status-completed .restaurant-order-wrapper-header {
    border-bottom: solid 1px var(--font-color);
}

.status-cancelled .dropdown-toggle-split,
.status-completed .dropdown-toggle-split {
    color: white;
}

.status-processing .btn-primary {
    color: var(--dark-hover-color);
    background: var(--primary-color);
}

.status-processing .restaurant-order-wrapper .btn-primary:hover {
    background: var(--primary-hover-color);
}

.restaurant-order.processed .restaurant-order-details {
    border-top: 1px solid var(--font-color);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.restaurant-order-details > div + div {
    margin-top: 0.375rem;
}

#restaurant-events-filter-modal .btn-close {
    color: var(--font-color);
}

#restaurant-events-filter-modal section {
    display: flex;
    flex-direction: column;
}

#restaurant-events-filter-modal h2 {
    font-size: 1.2rem;
    border-bottom: 1px solid var(--font-color);
    padding-bottom: 0.5rem;
    margin-top: 1.75rem;
}

#restaurant-events-filter-modal span {
    cursor: pointer;
}

#restaurant-events-filter-modal .modal-body svg {
    margin-bottom: 2px;
    display: none;
}

#restaurant-events-filter-modal .checked svg {
    display: inline-flex;
}

#restaurant-order-summary-modal .modal-header h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.15rem;
    font-style: italic;
}

#restaurant-order-summary-modal .modal-header button {
    margin-bottom: 1rem;
    padding-right: 0;
}

/*--------------------------------------------------------------
# restaurant detail
-------------------------------------------------------------*/

#subscription-not-paid button:focus {
    box-shadow: none;
}

#restaurant-detail-title {
    position: relative;
    width: 100%;
    aspect-ratio: 2.15;
    background-color: var(--dark-highlight-color);
    border-radius: 12px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

#restaurant-detail-title .restaurant-title-button {
    padding: 6px;
    border-radius: var(--border-radius);
    color: var(--font-color);
    background: rgba(0, 0, 0, 0.7);
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
}

#restaurant-detail-title .restaurant-title-button svg {
    width: 20px;
    height: 20px;
}

#restaurant-detail-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

@media (max-width: 991px) {
    #restaurant-detail-actions {
        top: 1rem;
        right: 1rem;
    }
}

@media (max-width: 399px) {
    #restaurant-detail-actions {
        top: 0.5rem;
        right: 0.5rem;
    }
}

#restaurant-share-modal #share-options-wrapper>div>a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: var(--font-color);
    font-size: 1.1rem;
}

#restaurant-share-modal #share-options-wrapper>div>a>div {
    border-radius: 50%;
    background-color: var(--dark-highlight-color);
    padding: 20px;
    margin-bottom: 1rem;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#restaurant-share-modal #share-options-wrapper>div>a>div>svg {
    width: 28px;
    height: 28px;
}

#restaurant-share-modal #share-options-wrapper #copy-url button {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 6px 6px 0;
    flex: 0 0 auto;
    color: var(--background-color);
}

#restaurant-share-modal #share-options-wrapper #copy-url div {
    width: 100%;
}

#restaurant-share-modal #share-options-wrapper #copy-url label {
    font-size: 0.9rem;
}

#restaurant-share-modal #share-options-wrapper #copy-url div input {
    border-radius: 6px 0 0 6px;
    border: 0;
}

#restaurant-share-modal #share-options-wrapper #copy-url div input:hover,
#restaurant-share-modal #share-options-wrapper #copy-url div input:focus {
    border: 0;
}

#restaurant-share-modal #share-options-wrapper #copy-url svg {
    width: 20px;
    height: 20px;
}

#restaurant-share-modal #share-options-wrapper #copy-url {
    padding: 0 1.75rem;
}

@media (max-width: 399px) {
    #restaurant-share-modal #share-options-wrapper #copy-url {
        padding: 0 1rem;
    }
}

@media (max-width: 991px) {
    #restaurant-detail-title .restaurant-title-button {
        aspect-ratio: 1;
    }
}

#restaurant-detail-title #restaurant-detail-title-img {
    position: absolute;
    width: 100%;
    aspect-ratio: 2.777;
    object-fit: cover;
    top: 0;
    border-radius: 12px 12px 0 0;
}

#restaurant-detail-title #restaurant-detail-title-img-shadow,
#restaurant-detail-title #restaurant-detail-title-img-shadow-white {
    position: absolute;
    width: 100%;
    aspect-ratio: 2.777;
    top: 0;
    border-radius: 12px 12px 0 0;
}

#restaurant-detail-title #restaurant-detail-title-img-shadow {
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%);
}

#restaurant-detail-title #restaurant-detail-title-img-shadow-white {
    background: rgba(255, 255, 255, 0.2);
    transition: opacity .3s;
}

#restaurant-detail-title-info-main.hidden {
    visibility: hidden;
}

@media (max-width: 991px) {
    #restaurant-detail-title {
        margin-top: 0;
        border-radius: 0;
        margin-left: -1rem;
        margin-right: -1rem;
        width: auto;
    }

    #restaurant-detail-title #restaurant-detail-title-img {
        border-radius: 0;
    }

    #restaurant-detail-title #restaurant-detail-title-img-shadow,
    #restaurant-detail-title #restaurant-detail-title-img-shadow-white {
        border-radius: 0;
    }
}

#restaurant-detail-title #restaurant-detail-title-info {
    width: 100%;
    aspect-ratio: 5.2;
    background-color: transparent;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: space-between;
}

#restaurant-detail-title #restaurant-detail-logo-wrapper {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    width: 18%;
    background-color: transparent;
    aspect-ratio: 1;
    display: flex;
    z-index: 3;
}

#restaurant-detail-title #restaurant-detail-logo-wrapper>div {
    position: relative;
    width: 100%;
    background-color: transparent;
}

#restaurant-detail-title #restaurant-detail-title-info img {
    object-fit: contain;
    object-position: center;
    background-color: transparent;
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
}

#restaurant-logo-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-ultra-color);
    border-radius: 50%;
    cursor: pointer;
}

#restaurant-logo-placeholder svg {
    width: 32px;
    height: 32px;
}

@media (max-width: 767px) {
    #restaurant-logo-placeholder svg {
        width: 24px;
        height: 24px;
    }
}

#restaurant-detail-title .restaurant-detail-call-waiter-wrapper {
  position: relative;
  padding: 0;
}

#restaurant-detail-title #restaurant-detail-title-info-wrapper {
    padding-left: calc(18% + 4rem);
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    width: 100%;
    padding-right: 1rem;
    z-index: 2;
}

#restaurant-detail-title #restaurant-detail-title-info-wrapper:first-child {
    padding-left: 2rem;
}

#restaurant-detail-title #restaurant-detail-title-info-main {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-left: 0.5rem;
}

@media (min-width: 992px) {
    #restaurant-detail-title-info-wrapper.small #restaurant-detail-title-info-main {
        align-items: center;
    }
}

#restaurant-detail-title #restaurant-detail-title-info-main h2 {
    font-size: 2.25rem;
    margin: 0 1rem 0 0;
    font-weight: 500;
    color: var(--business-title-color);
}

#restaurant-detail-title #restaurant-detail-name h2.small {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

#restaurant-detail-title #restaurant-detail-title-info.small {
    aspect-ratio: 4.9;
}

@media (max-width: 991px) {
    #restaurant-detail-title #restaurant-detail-logo-wrapper {
        width: 20%;
    }

    #restaurant-detail-title #restaurant-detail-name h2.small {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    #restaurant-detail-title .restaurant-detail-call-waiter-wrapper {
        width: 100%;
        aspect-ratio: 2.777;
    }

    #restaurant-detail-title #restaurant-detail-title-info {
        aspect-ratio: 5;
    }

    #restaurant-detail-title {
        aspect-ratio: 2.05;
    }

    #restaurant-detail-title #restaurant-detail-title-info-wrapper {
        padding-bottom: 2rem;
    }

    #restaurant-detail-title #restaurant-detail-title-info {
        aspect-ratio: 4.5;
    }

    #restaurant-detail-title #restaurant-detail-title-info.small {
        aspect-ratio: 4.3;
    }
}

@media (max-width: 767px) {
    #restaurant-detail-title #restaurant-detail-logo-wrapper {
        left: 1.5rem;
        bottom: 1.5rem
    }

    #restaurant-detail-title #restaurant-detail-title-info-wrapper {
        padding-left: calc(20% + 2.5rem);
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    #restaurant-detail-title #restaurant-detail-title-info-wrapper:first-child {
        padding-left: 1.5rem;
    }

    #restaurant-detail-title #restaurant-detail-title-info-main h2 {
        font-size: 1.75rem;
    }

    #restaurant-detail-title #restaurant-detail-title-info {
        aspect-ratio: 4.3;
    }

    #restaurant-detail-title #restaurant-detail-title-info.small {
        aspect-ratio: 4.1;
    }
}

@media (max-width: 575px) {
    #restaurant-detail-title #restaurant-detail-logo-wrapper {
        width: 22%;
    }

    #restaurant-detail-title #restaurant-detail-name h2.small {
        font-size: 1.2rem;
    }

    #restaurant-detail-title {
        aspect-ratio: 2;
    }

    #restaurant-detail-title #restaurant-detail-title-info-wrapper {
        padding-left: calc(22% + 1.5rem);
        padding-right: 1rem;
    }

    #restaurant-detail-title #restaurant-detail-title-info-wrapper:first-child {
        padding-left: 1rem;
    }

    #restaurant-detail-title #restaurant-detail-logo-wrapper {
        left: 1rem;
        bottom: 1rem;
    }
}

@media (max-width: 399px) {
    #restaurant-detail-title #restaurant-detail-title-info-wrapper {
        padding-bottom: 0.75rem;
    }

    #restaurant-detail-title #restaurant-detail-title-info {
        aspect-ratio: 4.0;
    }

    #restaurant-detail-title #restaurant-detail-title-info.small {
        aspect-ratio: 3.7;
    }
}

#restaurant-detail-title #restaurant-detail-name {
    display: flex;
    align-items: center;
}

#restaurant-detail-title #restaurant-detail-name a,
#restaurant-detail-title #restaurant-detail-name a svg {
    transition: color .3s;
}

#restaurant-detail-title #restaurant-detail-name span {
    font-size: 1.5rem;
    padding-left: 1rem;
}

#restaurant-detail-title .edit-btn svg {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
}

#restaurant-detail-title .edit-btn:hover svg {
    color: var(--primary-hover-color);
}

#restaurant-detail-title #restaurant-detail-title-info-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 0.25rem;
}

#restaurant-detail-title #restaurant-detail-title-info-tags.d-sm-none {
    padding-right: 1rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    color: #EBEBEB; /* static */
}

@media(max-width: 575px) {
    #restaurant-detail-title #restaurant-detail-title-info-tags {
        margin-top: 1rem;
    }
}

#restaurant-detail-title #restaurant-detail-title-info-tags span {
    padding-right: 1rem;
    color: #EBEBEB; /* static */
}

@media (max-width: 991px) {
    #restaurant-detail-title #restaurant-detail-title-info-main h2,
    #restaurant-detail-title #restaurant-detail-title-info-tags span {
        color: var(--font-color);
    }
}

div[id^="product-customize-modal"] h6 {
    font-size: 1.1rem !important;
}

div[id^="product-customize-modal"] .form-check label {
    font-size: 1rem;
}

div[id^="product-customize-modal"] .modal-footer {
    justify-content: center;
}

div[id^="product-customize-modal"] .modal-footer .restaurant-menu-item-price {
    width: 67% !important;
}

div[id^="product-customize-modal"] .modal-footer .restaurant-menu-item-price>span:nth-child(2) {
    margin-left: 12px;
}

.side-dishes-wrapper input+label:hover {
    color: var(--font-color);
}

.side-dishes-wrapper input.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.side-dishes-wrapper input.form-check-input:checked + label {
    color: var(--primary-color);
}

.side-dishes-wrapper input.form-check-input:focus {
    box-shadow: none;
}

.ingredients-wrapper {
    padding-left: 0;
}

.ingredients-wrapper li {
    font-weight: 400;
    line-height: 2.5rem;
}

.ingredients-wrapper li:hover {
    color: var(--font-color) !important;
    cursor: unset !important;
}

.ingredients-wrapper li span {
    font-style: normal;
}

.ingredient-amount-decrease,
.ingredient-amount-increase {
    font-size: 1.4rem;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0 4px;
}

.ingredient-amount {
    text-align: center;
    width: 32px;
    display: inline-block;
}

@media (max-width: 575px) {
    .editable-product-name h4 {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .editable-product-name h4 {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    #restaurant-detail-title-info-main-mobile {
        padding-left: 2rem;
    }
    #restaurant-detail-title #restaurant-detail-title-info-main-mobile h2 {
        font-size: 2.25rem;
    }
}

@media (max-width: 575px) {
    #restaurant-detail-container #about h3,
    #restaurant-detail-container #contact h3,
    .restaurant-menu-course {
        font-size: 2rem;
    }

    .restaurant-menu-item-wrapper img,
    #menu .restaurant-menu-item-wrapper img {
        max-width: 100%;
        width: 100%;
    }
}

#restaurant-detail-container #restaurant-detail-navbar-container {
    background-color: var(--dark-highlight-color);
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media(max-width: 991px) {
    #restaurant-detail-navbar-container .progress-step div h2 {
        padding: 1rem;
    }
}

@media(max-width: 767px) {
    #restaurant-detail-navbar-container .progress-step div h2 {
        font-size: 1.2rem;
    }
}

@media(max-width: 575px) {
    #restaurant-detail-navbar-container .progress-step div h2 {
        padding: 0.5rem;
    }
}

@media(max-width: 399px) {
    #restaurant-detail-navbar-container .progress-step div h2 {
        font-size: 1.1rem;
    }
}

#restaurant-detail-container #restaurant-detail-navbar-container #progress-steps-dropdown-container button {
    color: var(--restaurant-navbar-color);
    background-color: var(--dark-highlight-color);
}

#restaurant-detail-container #restaurant-detail-navbar-container #progress-steps-dropdown-container ul {
    font-size: 1.1rem;
}

#restaurant-detail-container #restaurant-detail-navbar-container #progress-steps-dropdown-container ul li {
    color: var(--restaurant-navbar-color);
}

#restaurant-detail-container #restaurant-detail-navbar-container #restaurant-detail-navbar {
    background-color: transparent;
    overflow: hidden;
}

#restaurant-detail-container #restaurant-detail-navbar {
    margin-top: 0;
    justify-content: start;
}

#restaurant-detail-container #restaurant-detail-navbar .progress-step {
    cursor: pointer;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
}

#restaurant-detail-container #restaurant-detail-navbar .progress-step:first-child h2 {
    padding-left: 0;
}

#restaurant-detail-container #restaurant-detail-content > section:not(.active) {
    display: none;
}

@media (max-width: 991px) {
    .restaurant-detail-call-waiter .btn {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .restaurant-detail-call-waiter .btn svg {
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 992px) {
    .restaurant-detail-call-waiter {
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .restaurant-detail-call-waiter .btn {
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .restaurant-detail-call-waiter .btn span {
        margin-left: 6px;
    }

    .restaurant-detail-call-waiter .btn svg {
        color: var(--background-color);
        width: 20px;
        height: 20px;
    }

    .restaurant-detail-call-waiter .btn span+svg {
        width: 14px;
        height: 14px;
        margin-left: 6px;
        transition: .3s;
    }

    .restaurant-detail-call-waiter .btn.show span+svg {
        transform: rotate(-180deg);
    }

    .restaurant-detail-call-waiter .btn:focus {
        background-color: var(--primary-color);
        color: var(--background-color);
        border: 1px solid var(--primary-color);
        box-shadow: 0 0 8px 2px #000000 !important;
    }
}

.hidden {
    display: none !important;
}

#restaurant-detail-content #subscriptions {
    padding: 2rem 1rem;
}

#restaurant-detail-content #subscriptions > div {
    background-color: var(--dark-highlight-color);
    padding: 2.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--border-radius);
    margin: 1rem 0 4rem 0;
}

#restaurant-detail-content #subscriptions > div {
    box-shadow: none !important;
    border: 1px solid var(--primary-color);
}

#restaurant-detail-content #subscriptions > div.active {
    box-shadow: 0 0 16px 1px var(--primary-color) !important;
}

#restaurant-detail-content #subscriptions > div h4 {
    text-transform: uppercase;
    font-size: 1.3rem;
    margin-bottom: 0;
    text-align: center;
}

#restaurant-detail-content #subscriptions > div h4 + span {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}

#restaurant-detail-content #subscriptions > div .subscriptions-line {
    height: 1px;
    width: 48px;
    background-color: var(--primary-color);
}

#restaurant-detail-content #subscriptions > div ul {
    margin: 2rem 0;
}

#restaurant-detail-content #subscriptions > div .price {
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: 500;
}

#restaurant-detail-content #subscriptions > div .price + span {
    color: var(--primary-color);
    margin-bottom: 1.75rem;
}

#restaurant-detail-content #subscriptions > div .valid-until {
    color: var(--valid-color) !important;
}

#restaurant-detail-content #subscriptions > div .expired-at {
    color: #FF6161FF !important;
}

#restaurant-detail-content #subscriptions > div a {
    width: 112px;
    border: 0
}

#restaurant-detail-content #subscriptions > div button:focus,
#restaurant-detail-content #subscriptions > div button:active {
    background-color: var(--primary-color);
    color: var(--background-color);
}

#subscriptions .paybutton + a {
    display: block;
    text-align: center;
    margin-top: .75rem;
}

@media (min-width: 768px) {
    #restaurant-detail-content #subscriptions {
        padding: 4rem 1rem 2rem 1rem;
        justify-content: center;
    }

  #restaurant-detail-content #subscriptions>div {
    margin: 0 2rem 2rem 2rem;
    box-shadow: 0 0 16px 1px rgb(0 0 0 / 70%);
  }
}

@media (min-width: 992px) {
    #restaurant-detail-content #subscriptions {
        padding: 4rem 2rem 2rem 2rem;
        justify-content: center;
    }

    #restaurant-detail-content #subscriptions > div {
        margin: 0 4rem 4rem 4rem;
    }
}

/*--------------------------------------------------------------
# Cookie Banner
--------------------------------------------------------------*/

#cookie-banner-wrapper {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 48px;
    z-index: 999999;
}

#cookie_consent {
    background-color: var(--dark-highlight-color);
    padding: 2rem 4rem 3rem 4rem;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    text-align: justify;
}

#cookie_consent h3 {
    width: 100%;
    text-align: center;
}

#cookie_consent button {
    min-width: 92px;
}

#cookie_consent .btn-outline-primary,
#cookie_consent .btn-outline-primary:active {
    background-color: var(--dark-highlight-color);
}

#cookie_consent #cookie-read-more,
#cookie_consent #cookie-read-less {
    color: var(--primary-color);
}

#cookie_consent #cookie-read-more:hover,
#cookie_consent #cookie-read-less:hover {
    color: var(--primary-hover-color);
}

/*--------------------------------------------------------------
# New business page
--------------------------------------------------------------*/

#new-business-page > div {
    padding-top: 112px;
    height: 576px;
}

#new-business-page button {
    width: 100%;
    height: 100%;
}

#new-business-page #new-business-submit > div {
    height: 100%;
}

@media (max-width: 575px) {
    #new-business-page > div {
        padding-top: 96px;
        height: 500px;
    }
}

/*--------------------------------------------------------------
# card design
-------------------------------------------------------------*/

.card {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 325px;
    height: 170px;
    text-align: left;
    padding: 30px;
    margin-bottom: 50px;
    color: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: var(--dark-hover-color);
}

.card__number {
    font-size: 25px;
    padding: 0 0 5px;
    text-align: center;
}

.card__expiry-date {
    font-size: 14px;
    padding-bottom: 30px;
    text-align: center;
}

.card__owner {
    text-align: left;
}

.card__logo {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 70px;
}

.card__strip {
    background: #000;
    height: 50px;
    margin-bottom: 30px;
}

.card__signature {
    float: left;
    width: 65%;
    height: 40px;
    margin-left: 10px;
    background: #999;
}

.card__ccv {
    float: left;
    margin-top: 5px;
    padding: 7px;
    background: #fff;
    color: #111;
    line-height: 1;
}

.card--front {
    font-size: 16px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.card {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cards input:checked ~ .card {
    filter: grayscale(0);
    box-shadow: 0 0 0.75rem var(--primary-color);
}

.cards input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cards a {
    width: auto !important;
    border: 2px solid var(--primary-color) !important;
}

.load-more-orders {
    cursor: pointer;
}

.load-more-orders:hover {
    color: var(--primary-color);
}

#order-count-wrapper>span {
    color: var(--primary-color);
}

/*--------------------------------------------------------------
# offers
-------------------------------------------------------------*/

.offer-title {
    position: relative;
}

.offer-title img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 5;
    filter: brightness(0.4);
}

.offer-title > div {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    text-transform: uppercase;
    width: 100%;
}

.offer-title h1,
.offer-title h2 {
    margin: 0;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.offer-title h1 {
    font-size: 3.5rem;
}

.offer-title h2 {
    font-size: 1.75rem;
    font-style: italic;
    margin-top: 0.75rem;
}

.offer-content {
    display: flex;
    flex-direction: column;
    padding-top: 2.75rem;
}

.offer-content .offer-slogan {
    font-style: italic;
    align-self: center;
    width: 30%;
    font-size: 1.6rem;
    text-align: center;
    font-weight: 500;
}

.offer-content ul {
    font-size: 1.2rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
    width: 75%;
    align-self: center;
    list-style: none;
    margin-bottom: 0;
}

.offer-content ul li {
    margin-bottom: 2.75rem;
}

.offer-content ul li:before {
    content: "";
    height: 24px;
    width: 24px;
    display: block;
    float: left;
    margin-left: -2.25em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    color: var(--primary-color);
    background-image: url("/images/icons/check2.svg");
}

.offer-content .gastro-circle-wrapper {
    padding-top: 9.5rem;
    padding-bottom: 6rem;
}

.offer-content .gastro-circle-wrapper > .gastro-circle {
    width: 55%;
    aspect-ratio: 1;
    border: 1px solid var(--primary-color);
    border-radius: 1000px;
    position: relative;
}

.offer-content .gastro-circle-wrapper span {
    font-family: 'Allura', sans-serif;
    font-size: 3.5rem;
    text-align: center;
    color: var(--primary-color);
}

.offer-content .gastro-circle-wrapper span + span {
    margin-top: -20px;
}

.offer-content .gastro-circle-info {
    position: absolute;
    background-color: var(--dark-highlight-color);
    border-radius: 1000px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform: translate(-50%, 50%);
    aspect-ratio: 1;
}

.offer-content .gastro-info {
    background-color: var(--dark-highlight-color);
    border-radius: 12px;
    padding: 2.5rem 3rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.offer-content .gastro-circle-info h3,
.offer-content .gastro-info h3 {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.offer-content .gastro-circle-info p,
.offer-content .gastro-info p {
    font-size: 1.2rem;
}

@media (max-width: 1199px) {
    .offer-content .gastro-circle-wrapper span {
        font-size: 2.5rem;
    }
}

@media (max-width: 991px) {
    .offer-title h1 {
        font-size: 2.25rem;
    }

    .offer-title h2 {
        font-size: 1.5rem;
    }

    .offer-content .offer-slogan {
        width: 55%;
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .offer-title h1 {
        font-size: 1.75rem;
    }

    .offer-title h2 {
        font-size: 1.25rem;
    }

    .offer-content .offer-slogan {
        width: 60%;
        font-size: 1.25rem;
    }

    .offer-content ul {
        font-size: 1.1rem;
        width: 100%;
        padding-top: 2rem;
        padding-bottom: 0;
    }

    .offer-content ul li:before {
        height: 20px;
        width: 20px;
    }

    .offer-content .gastro-info h3 {
        font-size: 1.25rem;
    }

    .offer-content .gastro-info p {
        font-size: 1.1rem;
    }

    .offer-title img {
        aspect-ratio: 3;
    }
}

@media (max-width: 575px) {
    .offer-title h1 {
        font-size: 1.5rem;
    }

    .offer-title h2 {
        font-size: 1.1rem;
    }

    .offer-content .offer-slogan {
        width: 80%;
        font-size: 1.1rem;
    }
}

.container-processing {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container-processing input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border-radius: 5px;
    border: solid 1px var(--primary-color);
}

/* On mouse-over, add a grey background color */
.container-processing:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the checkbox is checked, add a blue background */
.container-processing input:checked ~ .checkmark {
    background-color: transparent;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-processing input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-processing .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid var(--primary-color);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#view-all {
    text-align: left;
}

#gs-business-search-form .input-icon svg {
    color: #333;
}

#gs-business-search-form .d-flex {
    flex-direction: column;
}

#gs-business-search-form .input-block {
    width: 100%;
    display: block;
    margin-bottom: 8px;
}

#gs-business-search-form .btn {
    display: inline-block;
    align-self: end;
}

@media (min-width: 768px) {
    #gs-business-search-form .d-flex {
        flex-direction: row;
    }

    #gs-business-search-form .btn {
        /*width: 120px;*/
        display: inline-block;
    }

    #gs-business-search-form .input-block {
        width: calc((100% - 120px) / 2 - 8px);
        margin: 0 8px 0 0;
        display: inline-block;
    }

    .hero #gs-business-search-form .d-flex {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero #gs-business-search-form .input-block {
        width: calc((100% - 8px) / 2);
        margin-bottom: 12px;
    }

    .hero #gs-business-search-form .input-block:last-of-type {
        margin: 0;
    }

    .hero #gs-business-search-form .btn {
        /*width: 144px;*/
    }
}

@media (max-width: 767px) {
    #gs-business-search-form .btn {
        width: 100%;
    }
}

#business-tags span,
#business-tags-mobile span {
    font-size: 1rem;
    font-weight: 400;
    display: inline-block;
    color: var(--primary-color);
    margin-right: .75rem;
}

#business-tags span:last-of-type,
#business-tags-mobile span:last-of-type {
    margin-right: 0;
}

.row.restaurant-business {
    background: var(--dark-highlight-color);
}

.restaurant-business .company-name h2 > span {
    font-weight: 400;
    margin-left: 8px;
    font-size: 1.1rem;
    overflow-wrap: break-word;
}

section[id="settings"] {
    margin-top: 56px;
}

section[id="settings"] h3 {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 400;
}

section[id="settings"] .h3 {
    margin-bottom: 40px;
    color: var(--font-color);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 0;
}

section[id="settings"] .setting-points-container {
    min-height: 224px;
    background: var(--dark-highlight-color);
    box-shadow: -1px 0 10px 2px rgba(0, 0, 0, 0.25);
    padding: 40px 35px;
}

#settings #revolut-api-key-modal label {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

#settings #revolut-api-key-modal .modal-body>div:last-child {
    font-style: italic;
}

#settings #revolut-api-key-modal #revolut-api-key-alert {
    color: var(--danger-color);
    font-style: italic;
}

#settings #revolut-api-key-change {
    padding: 0;
    color: var(--primary-color);
    background-color: var(--dark-highlight-color);
    border: 0;
    box-shadow: none;
    transition: color .3s;
}

#settings #revolut-api-key-change:disabled {
    color: var(--tables-color)
}

#settings #revolut-api-key-change:not([disabled]):hover {
    color: var(--primary-hover-color);
}

#settings #settings-tips-options .symfony-collection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#settings #settings-tips-options .symfony-collection li {
    display: flex;
    width: 33.3333%;
    justify-content: space-between;
}

#settings #settings-tips-options .symfony-collection li input {
    width: calc(100% - 28px);
}

#settings #settings-tips-options .symfony-collection li:nth-child(4) {
    display: none;
}

#settings #settings-tips-options .symfony-collection li a {
    margin-bottom: 0;
}

#settings #settings-tips-options .symfony-collection li .add_item_link-container {
    padding: 0;
}

#settings #settings-tips-options .symfony-collection li .add_item_link {
    margin: 0;
}

#settings #settings-extra-fees>div {
    padding-right: 28px;
}

@media(max-width: 991px) {
    #settings #settings-tips-options .symfony-collection li {
        align-items: center !important;
    }

    #settings #settings-tips-options .symfony-collection li .symfony-collection-remove {
        top: 0;
    }
}

@media(max-width: 767px) {
    #settings #settings-tips-options .symfony-collection li {
        width: 100%;
    }

    #settings #settings-tips-options .symfony-collection li:not(:first-child) {
        margin-top: 1rem;
    }

    #settings #settings-tips-options .symfony-collection li .symfony-collection-remove svg {
        margin: 0;
    }

    #settings #settings-tips-options .symfony-collection li input {
        width: calc(100% - 20px);
    }

    #settings #settings-extra-fees>div {
        padding-right: 20px;
    }
}

input.apple-switch {
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 30px;
    height: 15px;
    background-color: var(--background-color);
    border: 1px solid var(--medium-color);
    border-radius: 50px;
    box-shadow: inset -20px 0 0 0 var(--background-color);
    flex: 0 0 auto;
}

.disabled input.apple-switch {
    background-color: #383A3D;
    border: 1px solid #21252A;
    box-shadow: inset -20px 0 0 0 #666666;
    cursor: not-allowed;
}

input.apple-switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: solid 1px var(--medium-color);
    background: var(--medium-color);
}

input.apple-switch+label:hover {
    color: var(--font-color);
}

.disabled input.apple-switch:after {
    border: solid 1px #21252A;
    background: #383A3D;
    cursor: not-allowed;
}

input.apple-switch:checked {
    box-shadow: inset 20px 0 0 0 var(--primary-color);
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

input.apple-switch:checked:after {
    left: 16px;
    background: var(--dark-hover-color);
    border: 1px solid var(--dark-hover-color);
}

section[id="settings"] .setting-points-container label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

section[id="settings"] label.disabled {
    color: #666666;
}

section[id="settings"] .block-bottom {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-top:15px;
}

section[id="settings"] .block-bottom-position {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

section[id="settings"] fieldset {
    margin-top: 56px;
}

section[id="settings"] legend {
    margin-bottom: 32px;
    font-size: 17px;
    font-weight: 400;
}

section[id="settings"] fieldset label {
    margin-bottom: 5px;
    font-weight: 400;
}

section[id="settings"] .symfony-collection li {
    display: flex;
    align-items: flex-end !important;
    flex-wrap: wrap;
}

section[id="settings"] .symfony-collection._gastro_planet_business_form_delivery_types li {
    position: relative;
}

section[id="settings"] .symfony-collection._gastro_planet_business_form_delivery_types li:not(:first-of-type) {
    margin-top: 2rem;
}

section[id="settings"] .symfony-collection li div[id*="gastro_planet"] {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

section[id="settings"] .symfony-collection li div[id*="gastro_planet"] div {
    margin-right: 0;
}

section[id="settings"] .symfony-collection li div[id*="gastro_planet"] div:last-of-type {
    margin-right: 0;
}

section[id="settings"] .symfony-collection-remove {
    position: relative;
    top: 5px;
}

section[id="settings"] .symfony-collection label {
    font-size: 14px;
    margin-bottom: 5px;
}

#settings ._gastro_planet_business_form_delivery_types .symfony-collection-remove {
    margin-bottom: 0 !important;
    position: absolute;
    top: 20px;
    right: 0;
}

#settings ._gastro_planet_business_form_delivery_types .symfony-collection-remove svg {
    margin: 0;
}

section[id="settings"] .symfony-collection li div[id*="gastro_planet"] {
    width: calc(100% - 20px);
}

section[id="settings"] .symfony-collection li div[id*="gastro_planet"]>div {
    width: 100%;
    padding: 0;
}

@media (min-width: 768px) {
    section[id="settings"] .block-bottom {
        margin-left: 8.33333333%;
        margin-top:0;
    }

    section[id="settings"] .symfony-collection li div[id*="gastro_planet"]>div {
        width: 25%;
        padding-right: 8px;
    }

    #settings ._gastro_planet_business_form_delivery_types .symfony-collection-remove {
        margin-bottom: 0 !important;
        position: absolute;
        top: unset;
        transform: translateY(50%);
        bottom: 22px;
        right: 0;
    }
}

@media (min-width: 992px) {
    section[id="settings"] .symfony-collection li div[id*="gastro_planet"] {
        width: calc(100% - 20px);
    }

    section[id="settings"] .symfony-collection li div[id*="gastro_planet"]>div:first-child,
    section[id="settings"] .symfony-collection li div[id*="gastro_planet"]>div:nth-child(2) {
        width: calc(33.3333% + 6px);
        padding-right: 28px;
    }

    section[id="settings"] .symfony-collection li div[id*="gastro_planet"]>div:nth-child(3) {
        width: calc(16.6667% - 6px);
        padding-right: 8px;
    }

    section[id="settings"] .symfony-collection li div[id*="gastro_planet"]>div:nth-child(4) {
        width: calc(16.6667% - 6px);
        padding-left: 8px;
    }

    section[id="settings"] .symfony-collection-remove {
        position: relative;
        top: -11px;
    }
}

@media (max-width: 991px) {
    .symfony-collection._gastro_planet_business_form_delivery_types .symfony-collection-remove {
        transform: translateY(-50%);
        top: calc(50% + 36px);
    }

    #settings .symfony-collection._gastro_planet_business_form_delivery_types li {
        align-items: center !important;
    }
}

/*--------------------------------------------------------------
# Profile
-------------------------------------------------------------*/

#profile h1,
#businesses h1,
#statistics h1 {
    color: var(--primary-color);
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Feltro Normal', sans-serif;
    overflow: hidden;
    padding: 2rem 0;
    text-transform: capitalize;
    font-weight: 400;
}

#profile h1:before,
#businesses h1:before,
#statistics h1:before {
    background-color: var(--primary-color);
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
    right: 0.75rem;
    margin-left: -50%;
}

#profile h1:after,
#businesses h1:after,
#statistics h1:after {
    background-color: var(--primary-color);
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
    left: 0.75rem;
    margin-right: -50%;
}

@media(min-width: 992px) {
    #statistics-filter .hidden {
        display: block !important;
        visibility: hidden !important;
    }
}

#statistics-filter #filter-tag-clear,
#statistics-filter #filter-product-clear {
    padding: 0 2px;
    margin-left: 4px;
    cursor: pointer;
}

#statistics-filter #filter-tag-clear svg,
#statistics-filter #filter-product-clear svg {
    width: 12px;
    height: 12px;
    color: var(--primary-color);
}

#businesses .business .favourite-business-button {
    width: fit-content;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
}

@media print {
    * {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: unset !important;
    }
    svg, a {
        display: none !important;
    }
    input {
        border: none !important;
        text-align: center;
        padding: 0 !important;
        font-size: 1rem !important;
        height: auto !important;
    }
    div#restaurant-places-collection {
        display: grid !important;
        padding: 0 !important;
        width: 100% !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }
    div#restaurant-places-collection li {
        padding: 1rem !important;
        width: 100% !important;
        list-style: none !important;
    }
    div#restaurant-places-collection li .editable-member,
    div#restaurant-places-collection li img, input {
        width: 100% !important;
    }
    div#restaurant-places-collection li .editable-member > div {
        aspect-ratio: 1;
    }
}

.restaurant-menu-item-wrapper.opacity-faded .editable-product-main-image,
.restaurant-menu-item-wrapper.opacity-faded .editable-product-other-images,
.restaurant-menu-item-wrapper.opacity-faded .editable-product-name,
.restaurant-menu-item-wrapper.opacity-faded .editable-product-description,
.restaurant-menu-item-wrapper.opacity-faded .product-attributes,
.restaurant-menu-item-wrapper.opacity-faded .product-attributes+span,
.restaurant-menu-item-wrapper.opacity-faded .product-attributes+button
{
    opacity: 0.3;
}

textarea.form-control.menu-import-input {
    min-height: 600px;
}
textarea.form-control.menu-import-input::placeholder {
    color: var(--border-color);
}

#import-parsed-products {
    width: 160px;
}
#menu-import-category + span {
    width: 160px !important;
    display: block;
}

#menu-import-parsed .product-name {
    font-family: "Rubik", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    white-space: normal;
    font-style: normal !important;
}

#menu-import-parsed .product-code {
    font-family: "Rubik", sans-serif;
    white-space: normal;
    font-weight: 400;
    font-style: italic;
    color: var(--medium-color);
    font-size: 1rem;
}

#menu-import-parsed .product-description {
    font-family: "Rubik", sans-serif;
    white-space: normal;
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
}
#menu-import-parsed .product-price {
    font-family: "Rubik", sans-serif;
    white-space: nowrap;
    font-weight: 500;
    font-style: normal;
    font-size: 1.2rem;
}

#menu-import-parsed td:last-of-type,
#menu-import-parsed th:last-of-type {
    text-align: right;
}

#menu-import-parsed th {
    font-weight: 400;
}
#menu-import-parsed td {
    margin: 4px;
}

#menu-import-parsed th, #menu-import-parsed td {
    vertical-align: baseline;
}

#gastro_planet_pickup_form_pickup_time select {
    border: none;
    background: none;
}

#order-note-wrapper {
    margin-bottom: 64px;
}

#order-note-wrapper textarea {
    min-height: 56px;
    font-size: 1.1rem;
}

#delivery-form-wrapper {
    width: 100%;
    background-color: var(--dark-hover-color);
    padding-bottom: 96px;
}

#delivery-form-wrapper.sticky {
    position: sticky;
    bottom: 0;
    padding-bottom: 84px;
}

#delivery-form-wrapper.sticky #order-note-wrapper {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    #save-pickup-information,
    #save-delivery-information {
        height: 40px;
    }
}

@media(max-width: 355px) {
    form[name="gastro_planet_pickup_form"] .modal-body>div:nth-child(2) {
        width: 100% !important;
    }

    form[name="gastro_planet_pickup_form"] .modal-body>div:nth-child(3) {
        flex-direction: column-reverse;
    }

    form[name="gastro_planet_pickup_form"] .modal-body>div:nth-child(3)>div:first-child {
        width: 100% !important;
        padding-right: 0 !important;
        margin-top: 0.5rem;
    }
}

#pickup-time-range svg {
    color: var(--primary-color);
    margin-right: 0.5rem;
    flex: 0 0 auto;
    margin-top: 2px;
}

.not-set {
    font-style: italic;
    color: var(--danger-color);
}

#ScanPlaceModal .modal-body {
    padding-left: 1.65rem !important;
    padding-right: 1.65rem !important;
}

#ScanPlaceModal .modal-body #placeReader__scan_region {
    margin-top: 0 !important;
}

#reader__dashboard button,
#placeReader__dashboard button {
    font-weight: 400 !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: var(--border-radius) !important;
    background-color: var(--dark-hover-color) !important;
    padding: .375rem .75rem !important;
    margin-bottom: 0.5rem;
}

#reader__dashboard button:hover,
#placeReader__dashboard button:hover {
    color: var(--primary-hover-color) !important;
    border-color: var(--primary-hover-color) !important;
    background-color: var(--primary-color-transparent) !important;
}

#html5-qrcode-select-camera {
    padding-left: 4px;
    padding-right: 24px;
    border-radius: var(--border-radius);
    margin: 2px 12px 0 12px;
}

@media(min-width: 430px) {
    #placeReader #html5-qrcode-select-camera {
        margin: 2px 64px 0 64px;
    }
}

@media(min-width: 500px) {
    #placeReader #html5-qrcode-select-camera {
        margin: 2px 96px 0 96px;
    }
}
.not-visible {
    display: none;
}

#invitationModal .modal-dialog {
    margin-top: 200px;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 0.75rem var(--primary-color);
    border-radius: var(--border-radius);
}

#invitationModal .modal-dialog .btn-close {
    color: var(--primary-color);
    margin: -0.5rem -0.5rem -0.5rem auto;
    background: none;
    padding: 0;
    width: 24px;
    height: 24px;
}

#invitationModal .modal-dialog span {
    color: var(--primary-color);
}
#invitationModal .modal-dialog p {
    font-size: 1.1rem;
}
#invitationModal .modal-dialog a {
    vertical-align: baseline;
}

@media (min-width: 676px) {
    #invitationModal .modal-dialog {
        max-width: 600px;
    }
}

#delivery-information-modal {
    z-index: 99;
}

.statistic-table{
    width: 100%;
    margin: 29px 0;
    border:solid 1px #5B5B5B;
}

.statistic-table th{
    border: 1px solid #4C4C4C;
    background: #131315;
    text-align: center;
    padding: 10px 12px;
}

.statistic-table td{
    background: #1E1E1E;
    border-right: solid 1px #5B5B5B;
    padding: 10px 12px;
}

/*--------------------------------------------------------------
# Error pages
--------------------------------------------------------------*/

.error-page {
    color: var(--primary-color);
    font-weight: 500;
}

.error-page p:first-of-type {
    font-size: 20px;
    margin-top: 0.5rem;
}

.error-page p:nth-of-type(2) {
    font-size: 28px;
}

.error-page p:nth-of-type(3) {
    font-size: 20px;
    margin-top: 1rem;
}

.error-page p:nth-of-type(3) a {
    text-transform: uppercase;
    transition: color .3s;
}

.error-page p:nth-of-type(3) a:hover {
    color: var(--primary-hover-color);
}

.error-page-logo svg {
    width: 256px;
}

.error-page img {
    max-width: 464px;
}

@media (max-width: 575px) {
    .error-page p:first-of-type,
    .error-page p:nth-of-type(3) {
        font-size: 16px;
    }

    .error-page p:nth-of-type(2) {
        font-size: 20px;
    }

    .error-page-logo svg {
        width: 196px;
    }
}

@media (min-width: 1400px) {
    .error-page p:first-of-type {
        margin-top: 40px;
        margin-bottom: 32px;
    }

    .error-page p:nth-of-type(3) {
        margin-top: 64px;
    }

    .error-page p:first-of-type {
        font-size: 28px;
    }

    .error-page p:nth-of-type(2) {
        font-size: 36px;
    }

    .error-page p:nth-of-type(3) {
        font-size: 28px;
    }

    .error-page img {
        max-width: 512px;
    }
}