body {
    display: flex;
    flex-direction: column;
}
section,
header {
    flex: 1 0 auto;
}
header {
    padding-top: 80px;
    overflow: auto;
}
#mainNav {
    padding:0;
}
@media screen and (max-width:992px) {
    header {
        padding-top: 51px;
    }
}
header .header-content {
    position: initial;
    top: initial;
    -webkit-transform: initial;
    -ms-transform: initial;
    transform: initial;
}
@media screen and (max-width:767px) {
    section,
    header{
        flex: 0 0 auto;
    }
}
body.modal-open {
    overflow: hidden !important;
}
body .form-control {
    box-shadow: none;
}

label.error {
    right: 18px;
}
.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn, .form-control, button, input, select, textarea {
    border-radius: 5px;
}
#delivery-zones-results .zipcode-btn {
    border-radius: 0;
    border-bottom: 1px solid #e9e9e9;
    padding: ;
}
#zipcode-btn-wrap a.zipcode-btn {
    padding: 10px 15px;
    font-size: 17px;
}
.m-none {
    margin: 0 !important;
}
.mx-1 {
    margin: 0 1rem;
}
.essimo-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border: none;
    padding: 1.25rem;
    font-size: 1.5rem !important;
    font-weight: bolder;
    background-color: darkorange !important;
    color:#ffffff;
    box-shadow: 0 5px 6px rgba(0,0,0,0.15);
    transition: .3s ease;
    border-radius: 5px;
}
.essimo-button__edged {
    border-radius: 0 !important;
}
.position-relative {
    position: relative;
}
/**
 * HEADER CSS
 */
#navbar__scroll {
    margin-top: 51px;
    background-color: #e9e9e9;
}
.navbar-header {
    display: flex;
}
#mainNav .navbar {
    border: none;
}
#mainNav .navbar-toggle {
    margin-right: 0;
    margin-left: 0;
    border: none;
}
#mainNav .navbar-collapse {
    max-height: initial;
    border: none;
}
#mainNav .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 5px;
}
#mainNav .navbar-toggle .icon-bar {
    width: 26px;
    height: 3px;
}
#restaurant-logo {

    display: flex;
    align-items: center;
    padding: 0;
    margin-left: 1rem;
}
#restaurant-logo img {
    /*height: 50px;*/
    margin-top: 0;
}
.discount-wrap {
    display: flex;
    flex: 2;
    flex-direction: column;
    justify-content: space-evenly;

    margin-left: 1rem;
}
.discount-number {
    color: #F05F40;
    font-size: 2.5rem;
}
.icon-bar,
.discount-text {
    color: #555;
}
.discount-text {
    font-size: 2rem;
}

.dark .discount-text {
    color: #ffffff;
}
.text-x1 {
    font-size: 1rem;
}
.text-x1-5 {
    font-size: 1.5rem;
}
.text-x2 {
    font-size: 2rem;
}
.discount--bold {
    font-weight: bold;
}
.discount--bolder {
    font-weight: bolder;
}

.discount--white {
    color: #ffffff;
}

.discount--red {
    color: #F05F40;
}
.service-box-wrap {
    margin-top: 2rem;
}
@media screen and (max-width:1199px) {
    .discount-wrap .discount-number {
        font-size: 1.5rem;
    }
    .discount-wrap .discount-text {
        font-size: 1rem;
    }
    .discount-wrap {
        justify-content: center;
    }
}
@media screen and (max-width:767px){
    #restaurant-logo {
        margin-left: 0;
    }
    #mainNav .navbar-collapse {
        box-shadow: 0 5px 6px rgba(0,0,0,0.15);
    }

    .service-box-wrap {
        margin-top: 0;
    }

    #workflow-header div.service-box h3{
        display:initial;
        font-weight: bolder;
        color: #ffffff;
    }

    #workflow-header .service-box i {
        font-size: 2rem;
    }

    #workflow-header .service-box {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    .nav-menu-toggle:focus,
    .nav-menu-toggle:hover {
        background-color: transparent !important;
    }
    .nav-menu-toggle.collapsed .toggle-close {
        display: none;
        transition: .3s ease;
    }
    .nav-menu-toggle.collapsed .toggle-open {
        display: block;
        transition: .3s slide;
    }

    .nav-menu-toggle .toggle-close {
        display: block;
        font-size: 2rem;
        color: #888;
        transition: .3s ease;
    }
    .nav-menu-toggle .toggle-open {
        display: none;
        transition: .3s ease;
    }
}

/**
 * FOOTER CSS
 */
.copyright-text {
    color: #333333;
    margin: 0;
    padding: 0 1rem;
}
.hide-on-medium-up {
    display: none !important;
}
@media screen and (max-width:767px) {
    footer.footer {
        min-height: 0;
    }
    .footer .container {
        display: none;
    }
    .dark .copyright-text {
        color: #ffffff;
    }

    .hide-on-medium-up {
        display: block !important;
    }
}
/**
 * SECTION CSS
 */
@media screen and (max-width:767px) {

    #services {
        background: #ffffff;
        background-image: none !important;
    }
    #services,
    #orderform {
        padding: 50px 0 50px 0;
    }
    #services .workflow-wrap,
    #orderform .workflow-wrap {
        display:none;
    }

    #services .mobile-compact,
    #orderform .mobile-compact {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

/**
 * MODAL CSS
 */
.modal-title {
    font-weight: bold;
}

@media screen and (max-width:767px) {

    .modal {
        height: 100%;
    }
    .modal-dialog,
    .modal-content {
        padding: 0 !important;
        margin: 0;
        height: inherit;
    }
    .modal-content {
        display: flex;
        flex-direction: column;
        border: none;
    }
    .modal p {
        margin: 0;
    }
    .modal-open .modal {
        overflow-y: hidden;
    }
    .modal-title {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        font-size: 1.5rem;
        min-height: auto;
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;
    }
    .modal-header .close {
        margin: 0;
        font-size: 2rem;
        width: 2rem;
        opacity: 1;
        filter: alpha(opacity=100);
    }
    .modal-body {
        overflow: auto;
        height: inherit;
    }
    .cont-wrapper {
        display:block;
        overflow: hidden;
        padding-bottom: 2rem;
    }
    .modal-body h5 {
        font-weight: bold;
    }
    #order-nav-tabs {
        display: none;
    }
}

/**
 * BASKET CSS
 */
#total {
    border-bottom: none;
}
#services #basket-modal .hide-on-services {
    display: none;
}
#orderform #basket-modal .hide-on-orderform {
    display: none;
}

#basket-modal .modal-header a {
    font-size: 2rem;
}
#services .basket-button-wrap-orderform {
    display: none;
}
#orderform .basket-button-wrap-orderform {
    top: 50px;
    height: 60px;
    background: #fafafa;
    flex-direction: revert;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    z-index: 2;
}
#orderform .basket-button-wrap-orderform button,
#orderform .basket-button-wrap-orderform a  {
    background: transparent;
    font-size: 2rem;
    width: 2rem;
}
#services .basket-button-wrap {
    bottom: 0;
}
#orderform .basket-button-wrap {
    display: none;
    top: 61px;
    z-index: 123;
}
.basket-button-wrap-orderform,
.basket-button-wrap {
    display:flex;
    flex-direction:column;
    position: fixed;
    right: 0;
    left:0;
}
#discount-total {
    font-weight: normal !important;
    font-size: inherit !important;
}
.basket-article-price {
    color: #000;
    margin-right: .5rem;
}
.extras-list {
    font-size: inherit !important;
}
input.basket-item-counter {
    box-shadow: none !important;
    width: 3rem !important;
}
.basket-item-counter-b {
    background-color: #e9e9e9 !important;
    color: darkorange !important;
    border-radius: 3px !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0;
}
.basket-item-counter-b .fa{
    font-size: 1rem !important;
}
.basket-item-wrap {
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto !important;
}
.basket-item-wrap .input-group-btn {
    width: inherit !important;
}
.orderform-button-wrap {
    display: none;
}
@media screen and (max-width:767px) {
    #orderform {
        padding-top: 110px;
        padding-bottom: 0;
    }
    #data-container-order {
        margin-bottom: 0;
    }
    #basket-modal {
        padding-right: 0 !important;
    }
    #basket-modal #basket {
        height: calc(100% - 145px);
        overflow-y: scroll;
        margin: 0;
        padding: 0;
    }
    #basket-modal .orderform-button-wrap {
        display: initial;

    }
    #basket-modal .topic {
        display: none;
    }
    #basket-modal .modal-body {
        padding: 0;
    }
    #basket-modal #total  {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-top: 1px solid #e5e5e5;
        background-color: white;
    }
    #basket-modal #pay-options {
        display: none;
    }
    #basket-modal #basket .overflow-wrap,
    #basket-modal #basket .basket-extras-wrap,
    #basket-modal #basket .fill-div-basket,
    #basket-modal #basket p {
        padding: 0 1rem;
    }
    #basket-modal #order-button {
        padding: 1.25rem;
        font-size: 1.5rem;
        font-weight: bolder;
        background-color: darkorange;
        color: #ffffff;
    }

    #article-container-wrap .article-name,
    .basket-article-name,
    .basket-article-price,
    #total-amount {
        font-size: 1.15rem !important;
    }

}

/**
 * LANDING CSS
 */
.btn-mobile {
    padding: .5rem 1rem;
    font-size: 2rem;
    font-weight: bolder;
    background-color: #96c11f;
    color: #ffffff;
}

@media (max-width:767px){
    #delivery-zones-search {
        padding: 10px 20px !important;
        font-size: 1.5rem !important;
    }

    .zones-search-icon {
        font-size: 2rem !important;
    }

    #delivery-zones-results a.zipcode-btn {
        margin: 0 !important;
        padding: 1rem !important;
    }
}

/**
 * ESSEN BESTELLEN CSS
 */
#preorder_date {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#preorder_time_today,
#preorder_time_tomorrow{
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.articles {
    min-height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#preorder input[type="radio"] {
    margin-top: 0;
}
#preorder,
#payment-wrapper{
    margin-top: 1rem;
}
#payment-wrapper .tab-content {
    padding: .5rem 1rem !important;
    background: #e9e9e9;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}
.order-text-agb,
#payment-wrapper .tab-content p {
    font-size: 12px !important;
    padding: 0 !important;
}
#coupon-wrapper {
    border-top: none;
    position: relative;
}
#coupon-wrapper .rotating {
    position: absolute;
    right: 1rem;
    bottom: 0;
    line-height: 1rem;
    font-size: 2.5rem;
    height: 1rem;
    top: 3.5rem;
}
#coupon {
    border: 1px solid #ccc !important;
    box-shadow: none;
}
#payment-wrapper {
    padding: inherit;
}
#order-nav-tabs-order {
    flex-direction: column;
    border-radius: 5px;
}
#order-nav-tabs-order input {
    display: block;
}
#order-nav-tabs-order li {
    width: 100%;
}
#order-nav-tabs-order a {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: .5rem 2rem !important;
    align-items: center;
}
#order-nav-tabs-order a h5 {
    font-weight: bold;
}

#order-nav-tabs-order li:first-child a,
#order-nav-tabs-order li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#order-nav-tabs-order li:last-child a,
#order-nav-tabs-order li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.nav-tabs > li {
    background-color: #fafafa;
}
#order-submit-wrap {
    margin-top: 1rem;
    background-color: #ffffff !important;
}
#order-submit-wrap, 
#contact-info, 
.login-wrapper {
    background-color: #e9e9e9;
}
#order-submit-wrap p {
    margin-bottom: 1rem;
}
#order-submit-wrap a {
    color: #000000 !important;
}
#order-submit-wrap p label,
#order-submit-wrap p input {
    margin: 0 !important;
}
#order-submit-wrap p,
.login-wrapper small,
.login-wrapper p,
#contact-info {
    color: #000 !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
#takeout .btn.active,
#takeout .btn:active {
    color: #000;
    box-shadow: 0px 6px 10px rgba(0,0,0,0.15);
    z-index: 1;
}
.nav-tabs > li > a,
#takeout .btn,
#takeout .btn,
.extras-product-title,
.temp-price,
.extras-child .glyphicon {
    color: #777777;
}
#takeout .btn,
#takeout .btn {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #fafafa;
}
#takeout .btn.active,
#takeout .btn:active {
    background-color: #ffffff;
}
#takeout label:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
#takeout label:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.order-text-agb,
#order-submit-wrap label{
    font-weight: normal !important;
}
.order-text-agb a {
    font-weight: bold;
}
#services div.tab-content,
#basket,
#order-form{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.back-to-orderform {
    display: none;
}

@media (max-width:767px) {
    .back-to-orderform {
        display: initial;
    }
    #login-wrapper {
        display: none;
    }
    #coupon-wrapper .rotating {
        font-size: 1rem;
        top: 2.5rem;
    }
    #order-nav-tabs-order a h5 {
        font-weight: bold;
        font-size: 1rem;
    }
    #payment-wrapper .tab-content p {
        font-size: .75rem;
    }
    #order-submit-wrap {
        margin-top: 0;
    }
    #services div.tab-content,
    #basket,
    #order-form {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
.online-option img {
    height: 60px;
}
@media (max-width:992px) {

    .online-option h5 {
        font-size: initial;
    }
}

#bc-steps:first-child .bc-step {
    border-bottom-left-radius: 0;
}
#bc-steps:last-child .bc-step {
    border-bottom-right-radius: 0;
}

/**
 * EXTRAS MODAL CSS
 */

#extras-modal {
    padding-right: 0 !important;
}
#extras-modal .extras-child.active {
    width: calc(50% - 2px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 6px;
    z-index: 2;
}
#extras-container .input-group-btn {
    padding-left: 0 !important;
}
#extras-modal .extras-child.active .extras-product-title,
#extras-modal .extras-child.error .extras-product-title,
#extras-modal .extras-child.active .temp-price,
#extras-modal .extras-child.error .temp-price,
#extras-modal .extras-child.active .glyphicon,
#extras-modal .extras-child.error .glyphicon{
    color: #ffffff;
}
#extras-modal .modal-extras-left .modal-header {
    z-index: 1;
    position: relative;
    padding-bottom: 1rem;
}
#extras-modal p.description {
    width: 90%;
    padding-right: 0;
    font-weight: normal;
    color: #777;
}
#extras-modal .extras-child {
    background-color: #fafafa;
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: bold;
}
#extras-modal .extras-child.active {
    background-color: rgb(75, 191, 107);
}
#extras-modal .extras-child.error {
    background-color: rgb(252, 147, 124);
}
#extras-cost,
#extras-modal .comments {
    width: 50%;
}
.modal-extras-right-wrap {
    padding-right: 0;

}
.modal-extras-right {
    width: 100%;

}
.modal-extras-right__inner {
    display: flex;
    align-items: center;
    padding-right: 0;
    padding-left: 0;
    gap: 1rem;
}
@media (max-width:768px) {
    #extras-modal p.description {
        padding-left: 36px;
    }
    #extras-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    #extras-modal .modal-body {
        padding: 0;
        overflow: hidden;
    }
    .modal-header.mobile-modal-header__toppings {
        padding: 15px !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    .modal-header.mobile-modal-header__toppings .modal-title {
        flex-direction: column;
        align-items: flex-start;
    }
    #extras-modal .modal-extras-left .modal-header {
        flex-direction: column;
    }
    #extras-modal .modal-extras-left .modal-header > * {
        width: 100%;
    }
    #extras-modal .modal-extras-left .modal-title {
        flex-direction: row;
        padding: 0 15px;
        margin: 5px 0;
        font-style: italic;
    }
    .modal-extras-right-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #e5e5e5 !important;
        padding-top: 5px;
    }
    .modal-extras-right__inner {
        padding-right: 15px;
        padding-left: 15px;
    }
    #extras-modal .modal-extras-left {
        height: calc(100% - 239px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    #extras-cost p {
        margin: 0 !important;
    }
    #extras-cost,
    #extras-modal .comments {
        width: 100%;
    }
    #extras-modal .extras-child {
        margin-left: 0 !important;
        padding: .75rem 15px;
    }
    textarea.comment-textarea {
        border: 1px solid #ccc;
    }
}

.active-group-cap {
    color: #ffffff;
}

.shake-animation {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#confirm-status-wrap {
    background-color: white;
}

#discount-header h2 {
    font-size: 16px !important;
    line-height: 35px;
    word-break: keep-all;
    float: initial !important;
}

.footer-info__app--link {
    margin-left: 1rem;
}

.app-links {
    margin-bottom: 1rem;
}

.app-links__wrap {
    display: flex;
    justify-content: center;
}

.app-links__title {
    font-weight: bold;
}

.app-links__image {
    position: relative;
    height: 50px;
    width: 168px;
    background-repeat: no-repeat;
    margin: 0 .5rem;
    background-size: cover;
}
.app-links__link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.app-links__image--google {
    background-image: url('../../assets/img/storebadges/google_play_50.png');
}

.app-links__image--apple {
    background-image: url('../../assets/img/storebadges/app_store_50.png');
}

@media (max-width:768px) {
    .header-content__title {
        font-size: 24px;
        font-weight: bold;
    }
    .app-links__wrap {
        display: flex;
        justify-content: space-evenly;
    }
    .app-links__title {
        font-size: 1rem;
    }

    .app-links__image {
        height: 40px;
        width: 135px;
        margin: 0;

    }
    .app-links__image--google {
        background-image: url('../../assets/img/storebadges/google_play_40x2.png');
    }

    .app-links__image--apple {
        background-image: url('../../assets/img/storebadges/app_store_40x2.png');
    }
}