@import url(https://fonts.googleapis.com/css?family=Tajawal:300,400,500,700,900&display=swap&subset=arabic);li,section,ul {
    padding: 0
}

.custom-btn,.section-title,.section-title h3 {
    margin: 15px auto;
    position: relative
}

.custom-btn,.form-group,.nav-pills li,.orderPhoneInput,.page-content,.relative,.section-title,.section-title h3,.section-title p,li,section,ul {
    position: relative
}

.loader,body,header {
    width: 100%
}

.custom-btn,.main-section,.tabs {
    overflow: hidden
}

body,section {
    background-color: #fcfcfc
}

.m-meal-desc ul,li,ul {
    list-style: none
}

*,:focus {
    outline: 0!important
}

:root {
    --main_color: #ffde54;
    --second_color: #ff3d00
}

.rtl .text-left,[dir=rtl] .text-left {
    text-align: left!important
}

.en_font {
    direction: ltr;
    font-size: 14px!important
}

.red-bc {
    background-color: var(--second_color)!important;
    color: #fff!important
}

.green-bc {
    background: #5aca5f!important
}

.blue-bc {
    background: #03a9f4!important
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth
}

body {
    font-family: Tajawal,sans-serif;
    font-weight: 700
}

.section-color {
    background-color: #f9f9f9
}

.section-title {
    display: block;
    font-size: 30px;
    color: #f35e23;
    text-align: center
}

.catering-container {
    background-color: #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.05)!important;
    transition: .3s
}

.catering-container:hover {
    box-shadow: none!important;
    transform: translateY(-5px)
}

.action-btn {
    text-align: center;
    border-top: 1px solid rgba(0,0,0,.05)!important;
    padding: 15px
}

.custom-btn,.form-control {
    color: #050505;
    padding: 0 15px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none
}

.section-title h3 {
    color: #060606;
    display: block;
    font-size: 40px;
    line-height: 25px
}

.section-title p {
    display: block;
    font-size: 12px;
    color: #777;
    line-height: 20px;
    letter-spacing: .5px;
    text-transform: lowercase;
    max-width: 767px;
    margin: 0 auto
}

a,a:focus,a:hover {
    cursor: pointer;
    text-decoration: none
}

li,ul {
    display: block;
    margin: 0
}

.custom-btn {
    display: inline-block;
    vertical-align: middle;
    border: 0;
    line-height: 30px;
    text-align: center;
    font-size: 11px;
    border-radius: 0;
    background-color: var(--main_color);
    box-shadow: none
}

.hint,img,label {
    display: block
}

.form-control,.form-group,label {
    text-align: right
}

.custom-btn i {
    margin: 0 5px
}

.custom-btn:focus,.custom-btn:hover {
    background-color: var(--second_color);
    color: #fff
}

img {
    max-width: 100%;
    height: auto;
    margin: 0 auto
}

.form-group {
    margin: 10px auto
}

.loader,header {
    position: fixed
}

label {
    font-size: 14px;
    line-height: 30px;
    margin: 5px 0;
    color: #050505
}

.resturant_details h3 i,label i {
    margin-left: 5px
}

.form-control {
    border: 1px solid #f0f6f6;
    margin: 0 auto;
    height: 45px;
    font-weight: 700;
    line-height: 45px;
    border-radius: 5px;
    font-size: 12px;
    letter-spacing: .5px;
    outline: 0;
    box-shadow: none
}

.en_font,.modal-title {
    letter-spacing: 1px
}

.form-control:focus,.form-control:hover {
    outline: 0;
    border: 1px solid #ecf1f4;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

textarea.form-control {
    height: 90px!important;
    resize: none;
    overflow-x: hidden;
    line-height: 30px;
    padding: 10px 15px
}

.hint {
    font-size: 11px;
    line-height: 25px;
    color: #777
}

.radio-wrap {
    display: inline-block;
    text-align: center;
    margin: auto;
    min-width: 120px;
    vertical-align: middle
}

.checkbox-wrap input[type=checkbox],.m-body button.close.mobile,.menu-button,.mobile ul,.mobile-order-action,.modal-body.m-meal-body .m-meal-img .m-meal-status input[type=file],.radio-wrap input[type=checkbox],.radio-wrap input[type=radio],small.mobileIcon {
    display: none
}

.iti__country-list {
    left: 0
}

.radio-wide {
    text-align: right;
    display: block
}

.radio-wrap label {
    vertical-align: middle;
    display: inline-block
}

.radio-wrap .cat-number {
    vertical-align: middle;
    margin: 0
}

.loader {
    top: 0;
    left: 0;
    height: 100%;
    background-color: #fff;
    z-index: 9999
}

.spinner {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    position: absolute;
    text-align: center;
    -webkit-animation: 2s linear infinite sk-rotate;
    animation: 2s linear infinite sk-rotate
}

.dot1,.dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    border-radius: 100%;
    -webkit-animation: 2s ease-in-out infinite sk-bounce;
    animation: 2s ease-in-out infinite sk-bounce
}

.dot1 {
    background-color: var(--main_color)
}

.dot2 {
    top: auto;
    background-color: var(--second_color);
    bottom: 0;
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

@-webkit-keyframes sk-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes sk-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes sk-bounce {
    0%,100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes sk-bounce {
    0%,100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

::-webkit-scrollbar {
    width: 3px;
    background-color: var(--main_color)
}

::-webkit-scrollbar-track {
    background-color: var(--main_color)
}

::-webkit-scrollbar-thumb {
    background-color: var(--second_color);
    border-radius: 50px
}

header {
    background-color: #fff;
    min-height: 70px;
    right: 0;
    top: 0;
    z-index: 999;
    -webkit-transition: .4s ease-in;
    -moz-transition: .4s ease-in;
    -o-transition: .4s ease-in;
    transition: .4s ease-in
}

.logo,.reviews-catering-logo,header .logo {
    display: inline-block;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0 10px 10px;
    position: absolute;
    background-color: #fff;
    width: 100px;
    height: 90px;
    top: 0
}

.reviews-catering-logo {
    right: 115px
}

.logo img,.reviews-catering-logo img,header .logo img {
    height: 100%
}

.logo span,header .logo span {
    position: absolute;
    background-color: var(--second_color);
    font-size: 9px;
    width: 100%;
    right: 0;
    left: 0;
    bottom: -20px;
    margin: auto;
    line-height: 20px
}

header .custom-btn {
    float: left;
    border-radius: 25px;
    margin: 20px 5px
}

.main-section {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 180px 0 90px;
    display: block;
    background: url(../images/background_image.jpeg) bottom/cover no-repeat fixed;
    text-align: center
}

/* @media (max-width: 576px) { */
    .main-section {
        background:url(../images/banners/banner_mobile.webp) center/cover no-repeat fixed
    }

    .cart-card {
        flex-direction: column!important
    }

    .item-delete {
        top: 4%!important
    }

    .cart-quantity p {
        font-size: 20px!important;
        margin: 0!important
    }

    button.quantity i {
        font-size: 24px
    }

    .col-xs-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 5px
    }
/* } */

@media (min-width: 577px) {
    .main-section {
        background:url(../images/banners/banner_mobile.webp) center/cover no-repeat fixed
    }
}

@media (min-width: 768px) {
    .main-section {
        background:url(../images/banners/banner_mobile@2x.webp) center/cover no-repeat fixed
    }
}

@media (min-width: 992px) {
    .main-section {
        background:url(../images/banners/banner.webp) center/cover no-repeat fixed
    }
}

@media (min-width: 1200px) {
    .main-section {
        background:url(../images/banners/banner@2x.webp) center/cover no-repeat fixed
    }
}

#home-register-btn {
    background-color: #f34423;
    color: #fff;
    width: 12rem
}

.main-section:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.main-section img {
    width: 140px;
    position: relative;
    margin-bottom: 25px
}

.main-section h3 {
    color: #fff;
    font-size: 28px;
    margin: 15px auto;
    line-height: 40px
}

.main-section p {
    margin: 15px auto;
    color: #ccc;
    max-width: 767px;
    font-size: 20px;
    font-weight: lighter
}

.page-head {
    position: relative;
    display: block;
    width: 100%;
    text-align: right;
    /* padding: 100px 0 0; */
    margin-bottom: 0
}

.page-head:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5)
}

.page-head .resturant-head,.page-head2 .resturant-head {
    display: block;
    margin-bottom: -40px;
    position: relative;
    z-index: 99
}

.page-head .resturant-head img {
    background-color: #fff;
    padding: 25px;
    display: inline-block;
    width: 150px;
    border-radius: 5%;
    box-shadow: 7px 7px 6px #888
}

.page-head .resturant-head h3 {
    color: #000;
    font-size: 16px;
    margin: 15px;
    display: inline-block
}

.catering-item,.resturant-item {
    display: block;
    margin: 5px auto;
    padding: 15px;
    text-align: center;
    position: relative
}

.resturant_details,.tabs {
    position: sticky;
    background-color: #fff
}

.resturant-item:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.05)!important
}

.catering-item img,.resturant-item img {
    width: auto;
    height: 100px;
    margin: auto
}

.catering-item h3,.resturant-item h3 {
    display: block;
    line-height: 30px;
    color: var(--second_color);
    font-size: 16px;
    margin: 5px auto
}

.catering-item p,.resturant-item p {
    display: block;
    margin: 5px auto;
    line-height: 20px;
    font-size: 12px;
    color: #444
}

.catering-item .custom-btn:hover,.resturant-item .custom-btn:hover,.resturant_details h3 {
    color: var(--second_color)
}

.catering-item .custom-btn,.resturant-item .custom-btn {
    border: 2px dashed var(--second_color);
    background-color: transparent;
    font-size: 12px;
    line-height: 35px;
    padding: 0 30px;
    border-radius: 25px
}

.meal-item,.tabs {
    border-radius: 5px
}

.nav-pills .nav-link,.tabs .tabs-title {
    display: block;
    padding: 0 15px;
    line-height: 45px
}

.resturant_details {
    padding: 25px;
    margin: 15px auto;
    top: 90px
}

.resturant_details h3 {
    margin: 0 auto 15px;
    font-size: 14px
}

.meal-item,.resturant_menu,.tabs,p.copyrights {
    margin: 15px auto
}

.resturant_details ul li {
    line-height: 30px;
    margin: 10px auto;
    font-size: 12px;
    color: #777
}

.resturant_details ul li i {
    background-color: #fcfcfc;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #030303;
    border-radius: 50%;
    margin-left: 5px;
    float: right
}

.resturant_details ul li .custom-btn {
    display: block;
    max-width: 190px;
    font-size: 14px;
    line-height: 40px;
    text-transform: uppercase;
    word-spacing: 3px;
    margin-bottom: 0
}

p.copyrights {
    text-align: center;
    font-size: 11px;
    width: 100%;
    padding: 15px 0;
    margin: 15px 0 0;
    background: var(--bg_color);
}

.resturant_menu {
    padding: 15px;
    background-color: #fff
}

.tabs {
    top: 120px;
    display: block;
    padding: 0;
    max-height: 520px;
    overflow-y: auto
}

.categ-name,.meal,.meal img,.meal-item,.meal-item .meal-img {
    overflow: hidden
}

@media (min-width: 768px) {
    .tabs {
        position:fixed;
        position: sticky;
        top: 20%
    }

    .res-custom {
        display: none
    }
}

.tabs .tabs-title {
    background-color: var(--main_color);
    font-size: 13px;
    text-align: right
}

.tabs .tabs-title button {
    float: left;
    width: 30px;
    height: 45px;
    border: 0;
    background-color: transparent;
    line-height: 45px;
    text-align: center;
    display: none;
    padding: 0;
    margin-left: -15px
}

.categ-name,.meal .meal-cont span,.meal-item .meal-img span {
    background-color: var(--main_color)
}

.nav-pills .nav-link {
    font-size: 12px;
    color: #060607;
    overflow: hidden;
    border-bottom: 1px solid #f4f4f4;
    border-right: 1px solid #f4f4f4;
    border-radius: 0
}

.nav-pills li:last-child .nav-link {
    border-radius: 0 0 5px 5px
}

.nav-pills .nav-link span {
    float: left
}

@media only screen and (min-width: 769px) {
    .tabs.nav-pills .nav-link:hover {
        color:var(--second_color);
        background-color: #fbfbfb
    }
}

.tabs.nav-pills .nav-link.active,.tabs.nav-pills .show>.nav-link {
    color: var(--second_color);
    background-color: #fbfbfb
}

.categ-name {
    display: inline-block;
    padding: 0 25px;
    font-size: 12px;
    line-height: 35px;
    color: #060607;
    border-radius: 25px
}

.meal-item {
    display: block;
    border: 1px solid #f8f8f8;
    background-color: #fff
}

.meal-item .meal-img {
    position: relative;
    width: 100%
}

.meal-item .meal-img img,.modal-body .form-group,.onlineOrder_actionBtn a,.waitingList-selection .waiting {
    width: 100%
}

.meal-item .meal-img span {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #000;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 5px
}

.meal-item .meal-img .btn-group {
    background-color: var(--second_color);
    border-radius: 5px
}

.meal-item .meal-img .btn-group .dropdown-toggle {
    color: #fff;
    font-size: 17px
}

.meal-item .meal-cont,iframe {
    background-color: #fff;
    padding: 15px
}

.meal-item .meal-cont h3 {
    font-size: 14px;
    line-height: 20px;
    color: var(--second_color)
}

.meal-item .meal-cont ul li {
    font-size: 9px;
    border: 1px solid #eee;
    padding: 0 8px;
    line-height: 20px;
    border-radius: 5px;
    display: inline-block;
    margin: 1px;
    vertical-align: middle
}

.categ-tab-name,.meal-item .meal-cont .price {
    border-radius: 5px;
    padding: 0 15px;
    display: block
}

.meal-item .meal-cont .price {
    text-align: center;
    margin: 15px auto 0;
    line-height: 30px;
    font-size: 12px;
    max-width: 160px;
    color: #000;
    background-color: #f5f5f5
}

.categ-tab-name {
    background-color: #ffde54;
    margin: 0 auto;
    line-height: 40px;
    font-size: 13px
}

.meal {
    background-color: #fff;
    display: block;
    position: relative;
    padding: 20px 120px 20px 20px;
    border: 1px solid #fcfcfc;
    margin: 15px auto;
    border-radius: 5px
}

.meal img {
    position: absolute;
    right: 15px;
    width: 90px;
    top: 20px;
    margin: auto;
    border-radius: 3px
}

.meal .meal-cont {
    display: block;
    position: relative
}

.meal .meal-cont h3 {
    display: block;
    font-size: 16px;
}

.meal .meal-cont h3 span {
    float: left;
    color: #fff;
    background-color: var(--second_color);
    padding: 8px;
    margin: 0;
    font-size: 11px;
    border-radius: 3px
}

.meal .meal-cont p {
    color: #777;
    font-size: 13px;
    margin: 5px auto
}

.meal .meal-cont ul {
    margin-bottom: 5px
}

.meal .meal-cont ul li {
    font-size: 10px;
    padding: 0 7px;
    line-height: 20px;
    display: inline-block;
    margin: 1px 0;
    vertical-align: middle;
    background-color: #fcfcfc
}

.meal .meal-cont span {
    font-size: 12px;
    color: #000;
    padding: 5px 10px;
    margin: 2px auto;
    display: inline-block;
    border-radius: 3px
}

.mobile-navbar {
    display: block
}

/* @media only screen and (max-width: 767px) { */
    .tabs,.tabs.move:before {
        height:100%;
        position: fixed
    }

    .categ-tab-name,.menu-button,.tabs {
        text-align: center
    }

    .mobile-navbar {
        flex-direction: column
    }

    .mobile {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .mobile ul li.burger-btn i {
        color: #dc3545!important
    }

    .mobile ul {
        display: block;
        float: left;
        padding: 20px
    }

    .mobile ul li i {
        font-size: 27px
    }

    .mobile-navbar {
        position: absolute;
        top: 70px;
        display: none;
        right: 0;
        background-color: #fff;
        width: 100%;
        transition: .3s
    }

    .mobile-navbar a.custom-btn {
        width: 100%!important;
        border-radius: 0!important;
        background-color: transparent!important;
        height: auto!important;
        text-align: right!important;
        display: flex;
        margin: 0;
        padding: 4px 20px;
        border-bottom: 1px solid #e4e4e4;
        color: #333!important
    }

    .mobile-navbar a.custom-btn:last-child {
        margin: 0!important
    }

    .mobile-navbar a.custom-btn i {
        margin-left: 10px
    }

    section {
        padding: 15px 0
    }

    .page-head {
        padding: 100px 0 15px;
        margin: 0
    }

    .page-head .resturant-head {
        margin: 15px auto;
        text-align: center
    }

    .page-head .resturant-head img {
        margin: 15px auto;
        padding: 0;
        display: block
    }

    .page-head .resturant-head h3 {
        display: block;
        margin: 5px auto
    }

    .tabs {
        top: 0;
        right: -250px;
        width: 250px;
        max-height: 100%;
        z-index: 9999;
        margin: 0;
        border-radius: 0;
        /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -o-transition: .5s;
        transition: .5s
    }

    .tabs.move:before {
        content: " ";
        width: 100%;
        z-index: -1
    }

    .tabs.move {
        right: 0;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -o-transition: .5s;
        transition: .5s
    }

    .menu-button {
        display: block;
        width: 100%;
        line-height: 40px;
        margin: auto;
        position: fixed;
        z-index: 10000;
        right: 0;
        left: 0;
        bottom: 0;
        font-size: 15px
    }

    .menu-button:focus,.menu-button:hover {
        color: #050505;
        background-color: var(--main_color)
    }

    .tabs .tabs-title button {
        display: inline-block
    }

    .categ-tab-name {
        position: sticky;
        top: 70px;
        z-index: 980;
        text-align: center !important;
        background: unset;
        /* box-shadow: 1px 1px 1px #efefef; */
    }

    .nav-pills .nav-link {
        text-align: right
    }

    .main-section {
        padding: 120px 0 50px
    }

    .main-section img {
        width: 80px
    }

    /* .container {
        max-width: 700px
    } */
/* } */

.m-body .m-img,.m-body .m-logos {
    margin-bottom: 20px;
    overflow: hidden
}

.error p,.m-body .m-title,.modal-footer,.order-sum,.trash-container .m-trash-title {
    text-align: center
}

/* @media only screen and (max-width: 576px) { */
    .meal,.meal img,.meal-img {
        position:relative
    }

    header .logo {
        height: 70px;
        width: 70px;
        left: 50%;
        transform: translate(-50%,0)
    }

    .resturant_details ul li .custom-btn,a.logo span {
        display: none
    }

    section {
        padding-bottom: 50px
    }

    header .custom-btn {
        width: 30px;
        overflow: hidden;
        height: 30px;
        padding: 0;
        line-height: 30px;
        border-radius: 50%
    }

    header .custom-btn i {
        margin: 0;
        line-height: 30px;
        display: block
    }

    .main-section h3 {
        line-height: 20px;
        font-size: 20px
    }

    .meal {
        padding: 4px;
        text-align: center;
        max-width: 290px;
        border-color: #f7f7f7
    }

    span.calories.res-custom {
        font-size: 12px;
        color: #000;
        background-color: var(--main_color);
        padding: 5px 10px;
        margin: 2px auto;
        display: inline-block;
        border-radius: 3px;
        position: absolute;
        bottom: 0;
        right: 5px
    }

    .meal img {
        right: auto;
        top: auto;
        margin: auto;
        width: 100%;
        max-width: 360px
    }

    .meal .meal-cont h3 {
        margin: 15px auto 0;
        text-align: right
    }

    .meal .meal-cont h3 span {
        float: none;
        display: block;
        /* width: 120px; */
        margin: 5px auto;
        text-align: center
    }

    .meal .meal-cont .calories {
        position: absolute;
        top: -40%;
        right: 10%
    }

    span.calories.desk-custom {
        font-size: .75rem;
        line-height: 20px;
        padding: .25rem .75rem;
        margin: 0 auto
    }
/* } */

.m-body .m-title h5,.m-specs p span {
    font-weight: 700;
    color: #ff3d00
}

.m-body {
    padding: 50px
}

.m-body .m-logos {
    display: flex;
    flex-direction: row;
    justify-content: center
}

.m-meal-desc ul li,.m-specs .m-price {
    display: flex;
    flex-direction: row
}

.header-logo img,.m-body .m-logos img {
    width: 90px;
    height: 90px;
    margin: 0!important;
    object-fit: contain
}

.m-body .m-img img {
    border-radius: 10px;
    width: 740px;
    height: 290px;
    object-fit: cover
}

.m-body .m-title h5 {
    margin-bottom: 0;
    font-size: 25px
}

.m-dialog {
    max-width: 888px!important
}

.delivery-location,.m-menu-desc,.m-specs {
    margin-top: 20px
}

.m-meal-desc {
    padding: 20px;
    margin-bottom: 10px
}

.m-meal-desc ul li {
    padding: 10px;
    border-bottom: 1px solid rgba(209,209,209,.658)
}

.m-meal-desc ul li img {
    width: 50px;
    height: 50px;
    margin: 0!important;
    object-fit: cover;
    border-radius: 50%
}

.m-meal-desc ul li .m-meal-title {
    margin-right: 10px;
    margin-top: 6px
}

.m-meal-desc ul li .m-meal-title h6 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px
}

.m-meal-desc ul li .m-meal-title p,.m-specs p {
    color: #777;
    font-weight: 400;
    margin-bottom: 0
}

.m-meal-desc ul li .m-meal-title p {
    font-size: 14px
}

.m-specs .m-price p:last-child {
    margin-right: 70px
}

.m-specs p i {
    margin-left: 10px
}

.m-order-btn,.m-submit-btn {
    width: 70%
}

.modal-footer {
    padding: 10px;
    border: 0;
    display: block;
    background-color: #f8f8f8
}

.modal-footer .custom-btn {
    margin: 0 auto!important;
    line-height: 30px
}

.modal-header {
    padding: 0 15px;
    border-bottom: 0;
    display: block;
    position: relative;
    background-color: var(--main_color);
    border-radius: 0
}

.modal-title {
    font-size: 13px;
    line-height: 50px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    word-spacing: 2px
}

.modal-body {
    padding: 15px;
    text-align: right;
    color: #000;
    color: var(--main_color);
    line-height: 25px
}

.modal-body .head-title {
    font-size: 26px;
    line-height: 35px;
    margin: 5px auto;
    text-align: center;
    color: #2b3f4f
}

.modal-content {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    z-index: 98
}

.modal-body h4.alert-text {
    margin: 0 auto;
    font-size: 18px
}

.modal-body .form-group label {
    color: #2b3f4f
}

.modal-body .form-group .form-control,ul.unstyled .styled-chkbox:focus+label::before,ul.unstyled .styled-radio:focus+label::before {
    background: #fff
}

.modal-dialog {
    overflow: hidden;
    padding: 0;
    border-radius: 5px;
    margin: 40px auto 0;
    width: 98%;
    max-width: 420px
}

.modal-dialog.wide {
    max-width: 991px;
    width: 98%
}

.modal-dialog.mid-wide {
    max-width: 767px;
    width: 98%
}

.modal-open {
    overflow: hidden!important
}

.cart-total-info p.cart-total,.loading,.order-sum p,.reservation-header h4 {
    color: red
}

.contact-form,.contact-info {
    padding: 25px;
    background-color: #fff;
    border-radius: 5px;
    margin: 15px auto
}

.form-title {
    width: 100%;
    position: relative;
    text-align: right;
    color: #000;
    font-size: 14px;
    margin: 0 auto 15px
}

.contact-info li {
    color: #040404;
    margin: 10px auto;
    position: relative;
    font-size: 13px;
    line-height: 25px;
    padding: 5px 40px 5px 5px
}

.contact-info li i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    background-color: #ff3d00;
    color: #fff;
    font-size: 11px;
    position: absolute;
    right: 0;
    top: 5px;
    margin: auto
}

.contact-info li a {
    color: #040404
}

.page-title {
    margin: 0 auto 60px;
    color: #fff;
    text-align: center;
    font-size: 17px
}

.m-options-content label,.m-price {
    font-size: 12px
}

.page-head2 {
    position: relative;
    display: block;
    width: 100%;
    background: url(../images/background_image.jpeg) bottom/cover no-repeat;
    text-align: right;
    padding: 140px 0 0;
    margin-bottom: 30px
}

.page-head2:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5)
}

.page-head2 .resturant-head img {
    background-color: #fff;
    padding: 25px;
    display: inline-block;
    width: 120px
}

.modal-content.m-meal-content .modal-body.m-meal-body .action-btns-container .btn-style.add-btn,a.custom-btn.active {
    background-color: red
}

.page-head2 .resturant-head h3 {
    color: #fff;
    font-size: 16px;
    margin: 15px;
    display: inline-block
}

.top-alert-danger,.top-alert-success {
    padding: 15px;
    display: block;
    margin: auto;
    border-radius: 10px;
    text-align: center
}

.top-alert-success {
    color: #099633;
    background-color: #9be99b;
    border-color: #9be99b
}

.top-alert-danger {
    color: #960909;
    background-color: #e99b9b;
    border-color: #e99b9b
}

.m-meal-content .modal-body.m-meal-body .m-meal-checkbox-container,.unstyled {
    padding: 0
}

.m-meal-description,.m-meal-title {
    text-align: start
}

.modal-content.m-meal-content {
    border-radius: 10px;
    padding: 0 30px 30px
}

.modal-dialog.m-meal-dialog {
    max-width: 600px
}

.m-meal-content .modal-header.meal-header {
    background-color: transparent
}

.m-meal-content .modal-header.meal-header .close {
    z-index: 9999;
    cursor: pointer
}

.m-meal-content .modal-body.m-meal-body {
    padding-bottom: 0
}

.m-meal-content .modal-body.m-meal-body #error {
    text-align: center;
    color: #a00;
    opacity: 0;
    transition: opacity .3s
}

.m-meal-content .modal-body.m-meal-body h5 {
    text-align: center;
    color: #ff5e00
}

.unstyled {
    margin: 0;
    list-style-type: none
}

.unstyled li {
    margin: 5px 0
}

.unstyled:last-child li {
    margin-right: 0
}

.checkbox-wrap,ul.centered {
    display: inline-block
}

ul.centered li {
    margin-right: 20px
}

.unstyled .styled-chkbox,.unstyled .styled-radio {
    position: absolute;
    top: -25%;
    right: 0;
    opacity: 0
}

.unstyled .styled-chkbox+label,.unstyled .styled-radio+label {
    position: relative;
    cursor: pointer;
    padding: 0;
    color: #777;
    margin-top: 1px
}

.unstyled .styled-radio+label {
    font-size: 15px
}

ul.unstyled .styled-chkbox+label::before {
    content: "";
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    background: #fff;
    transition: background .3s
}

ul.unstyled .styled-radio+label::before {
    content: "";
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    background: #fff;
    transition: background .3s
}

ul.unstyled .styled-chkbox:hover+label::before,ul.unstyled .styled-radio:hover+label::before {
    background: #eee
}

ul.unstyled .styled-chkbox:checked+label::before,ul.unstyled .styled-radio:checked+label::before {
    background: #28cc19
}

ul.unstyled .styled-radio:checked+label::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 8px;
    transform: translateY(0);
    background: #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.modal-content.m-meal-content .modal-body.m-meal-body .action-btns-container {
    margin: 30px auto 0;
    text-align: center
}

.modal-content.m-meal-content .modal-body.m-meal-body .action-btns-container .btn-style {
    text-decoration: none;
    border: none;
    color: #fff;
    text-align: center;
    padding: 10px 35px;
    font-size: 20px;
    width: 45%;
    margin: 0 auto;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer
}

.modal-content.m-meal-content .modal-body.m-meal-body .action-btns-container .btn-style.delete-btn {
    background-color: orange
}

.modal-body.m-meal-body .m-tables-img,.modal-body.m-meal-body .trash-img {
    margin: 0 auto 30px
}

.modal-body.m-meal-body .trash-img img {
    width: 50px
}

.modal-body.m-meal-body .m-tables-img img {
    width: 115px
}

.trash-container .m-trash-title h5 {
    color: #333!important
}

.trash-container .m-trash-title p {
    color: orange
}

.modal-body.m-meal-body .m-meal-img {
    margin: 0 auto
}

.modal-body.m-meal-body .m-meal-img img {
    width: 120px;
    border-radius: 50%;
    margin-bottom: 30px
}

.modal-body.m-meal-body .m-meal-img .m-meal-status {
    position: relative;
    margin: 0 auto;
    width: 35px
}

.modal-body.m-meal-body .m-meal-img .m-meal-status label {
    position: absolute;
    top: -68px;
    right: -35px;
    width: 35px;
    height: 35px;
    background: grey;
    cursor: pointer;
    border-radius: 50%
}

.modal-body.m-meal-body .m-meal-img label svg {
    color: #fff;
    text-align: center;
    position: absolute;
    top: 7px;
    right: 8px
}

.m-meal-content .modal-body .m-meal-img .status {
    width: 20px;
    position: relative;
    margin: 0 auto
}

.m-meal-content .modal-body .m-meal-img .status img {
    position: absolute;
    top: -55px;
    right: -33px
}

.m-meal-content .modal-body .m-meal-title p {
    text-align: center;
    color: #777
}

.m-meal-content .modal-body .m-meal-tables-view div.col-3 h4 span {
    width: 100%;
    color: #777;
    padding: 7px;
    text-align: center
}

.m-meal-title {
    color: #ff5e00
}

.m-price {
    color: #000;
    background-color: var(--main_color);
    padding: .3rem .75rem;
    line-height: 20px;
    margin: 0 auto;
    display: inline-block;
    border-radius: 3px
}

#br {
    border-top-width: 5px
}

input[type=radio]+label::before {
    border-radius: 50%
}

.error-validate {
    color: #8a0303
}

#datePickerContainer i,#timePickerContainer i {
    position: absolute;
    left: 5%;
    color: #777
}

.gj-textbox-md {
    text-align: right
}

i.gj-icon {
    text-align: left
}

.gj-picker-md [role=header] {
    background: #60798d
}

.review-container {
    padding: 10px;
    border: 2px solid #eee;
    margin-top: 27px;
    border-radius: 5px
}

.header-logo {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px
}

.reviewForm-container {
    padding: 0 30px
}

.review-container h5 {
    color: #b10808;
    text-align: center
}

.review-q {
    margin-top: 30px
}

.review-q p {
    color: #333;
    font-size: 14px
}

.onlineOrder_actionBtn {
    margin-top: 20px;
    text-align: center
}

.meal-img img {
    padding-left: 20px
}

.cart-quantity,.order-count {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0
}

.cart-quantity p,.order-count p {
    margin: 0;
    font-size: 20px
}

.cart-quantity i,.order-count i {
    font-size: 20px;
    margin: 0 10px
}

.cart-quantity i:first-child,.cart-quantity i:last-child,.order-count i:first-child,.order-count i:last-child {
    color: #e0ad21
}

button.quantity:focus {
    box-shadow: none!important
}

a.custom-btn {
    position: relative;
    overflow: visible!important
}

a.custom-btn span {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #f3b354;
    border-radius: 5px;
    width: 20px;
    height: 20px;
    color: #eee;
    line-height: 1.2;
    z-index: 9999999
}

.cart-header,.menu-action,.payment-header {
    padding-top: 30px
}

.cart-card {
    padding: 10px;
    flex-direction: row;
    position: relative!important
}

.cart-img img {
    border-radius: 10px;
    object-fit: cover
}

.cart-content {
    margin-right: 10px
}

.cart-content p {
    font-weight: 400!important;
    font-size: 14px;
    margin-bottom: 5px;
    color: #777
}

.cart-content h4 {
    margin-bottom: 20px;
    color: red
}

.cart-content h5 {
    margin-top: 20px;
    color: red
}

.cart-actionBtns,.cart-notes,.cart-total-info {
    margin: 20px 0
}

.cart-total-info {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
    text-align: center
}

.cart-total-info p {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px
}

.cart-card .cart-content h5 {
    position: absolute;
    bottom: 10%;
    right: 16%
}

.payment-header {
    padding-bottom: 30px
}

.payment-form h6 {
    color: #d3ae08
}

.checkout-total,.credit-payment-info,.location-info {
    margin-top: 20px;
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 10px
}

.checkout-total,.waiting-actionBtn {
    padding: 20px;
    text-align: center
}

.location-info a {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0
}

.checkout-total h5 {
    margin: 0;
    color: #c50505
}

.checkout-actionBtns {
    margin: 20px 0;
    text-align: center
}

.item-delete {
    position: absolute;
    top: 10%;
    left: 4%;
    cursor: pointer
}

.item-delete i {
    font-size: 24px;
    color: #bb0303
}

.delivery-location i {
    font-size: 11px;
    color: #777
}

.timePicker input,input[name=date] {
    background-color: #fff!important
}

button[data-action=togglePeriod] {
    background-color: #fe6601!important;
    border-color: #fe6601!important
}

.reservations-actionBtns {
    text-align: center;
    margin-top: 20px
}

.waitingList-selection {
    display: flex;
    width: 100%;
    align-items: center
}

.meal-sizes li {
    padding: 10px 0;
    display: flex;
    align-items: center
}

.meal-sizes li i {
    margin-left: 10px;
    margin-top: -5px;
    color: #daa520
}

.meal-sizes li p {
    margin: 0;
    color: #777;
    font-weight: 400
}

.meal-sizes li p span {
    font-size: 10px;
    color: red;
    font-weight: 400
}

.emptyCart {
    text-align: center;
    padding: 20px 0
}

a.a2a_dd img {
    height: 30px;
    width: auto
}

#alert-error,#alert-success {
    padding: 10px;
    border-radius: 5px;
    position: fixed;
    top: 3%;
    left: 2%;
    z-index: 99999!important;
    transform: translateX(-114%);
    animation: .5s forwards moveToRight
}

#alert-error {
    background-color: #f8d7da;
    border-color: #f5c6cb
}

#alert-success {
    background-color: #def8d7;
    border-color: #9bce99
}

input.error {
    padding: 10px;
    background-color: #f8d7da!important;
    border-color: #f5c6cb!important;
    border-radius: 5px
}

#alert-error p,#alert-success p,.error p {
    margin-bottom: 0
}

#alert-error p {
    color: #721c24
}

#alert-success p {
    color: #348831
}

#alert-error.hide,#alert-success.hide {
    animation: .5s forwards moveToLeft
}

@keyframes moveToRight {
    0% {
        transform: translateX(-114%);
        display: block
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes moveToLeft {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-114%);
        display: none
    }
}

a.custom-btn.active {
    color: #fff
}

section.services-banner img {
    width: -webkit-fill-available
}

section.services-banner {
    margin-top: 71px;
    background-image: url(../images/services-banners/1500-desktop.jpg);
    height: 200px;
    background-position-y: top;
    background-repeat-y: no-repeat;
    background-size: 100% 100%
}

.services-banner .btn {
    width: 5%;
    position: absolute;
    bottom: 10%;
    background-color: #f34423;
    color: #fff!important;
    font-size: x-small
}

.services-banner .btn.right {
    right: 33%
}

.services-banner .btn.left {
    left: 34%
}

.orderPhoneInput p {
    position: absolute;
    top: 59%;
    left: 3%
}

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

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

section.cateringBanner img {
    border-radius: 15px
}

section.cateringBanner {
    margin-top: 50px
}

/* @media (max-width: 576px) { */
    section.cateringBanner {
        padding-bottom:0;
        margin-bottom: 0 !important;
        margin-top: 0;
    }
/* } */

.copyrights a {
    color: #ff3d00
}

#card-number, #expiration-date, #card-holder, #cvv {
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 10px;
}


/* meal modal animation  */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(
            0,
            -20%,
            0
        ); /* from opacity 0 and -y (simulates 'drop') */
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0); /* to opacity 1 and y=0 */
    }
}

/* .fade-in{
    animation: fadeIn 400ms ease-in both;
} */
/* meal modal close icon */
.close-circle {
    width: 35px;
    height: 35px;
    background: transparent;
    border: 2px solid var(--main_color);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.close-circle:after {
    width: 20px;
    height: 3px;
    background-color: var(--main_color);
    content: "";
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -1px;
    position: absolute;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-radius: 30px;
    /*@include transform-origin(100%,100%);*/
}
.close-circle:before {
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -1px;
    width: 20px;
    height: 3px;
    background-color: var(--main_color);
    content: "";
    position: absolute;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 30px;
    /*@include transform-origin(0%,0%);*/
}

.img-preloader {
    position: absolute;
    left: -45%;
    height: 100%;
    width: 45%;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
    background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
    background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
    animation: loading 1s infinite;
    z-index: 45;
}


@keyframes loading {
    0%{
      left: -45%;
    }
    100%{
      left: 100%;
    }
  }