@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    margin: 0;
    padding: 0;
    /*background-image: url('../img/background1.png');*/
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Poppins';
}

body.homeBG {
    background-image: url('../img/menu_bkg.png');
}

body.menuBG {
    background-image: url('../img/menu_bg.png');
}

body.itemsBG {
    background-image: url('../img/menu_bg.png');
}

body.cartBG {
    background-image: url('../img/menu_bg.png');
}

body.orderBG {
    background-image: url('../img/menu_bg.png');
}

input[type='text'],
input[type='number'],
textarea {
    font-size: 16px;
}

@font-face {
    font-family: 'playfair_displayregular';
    src: url('../fonts/playfairdisplay-regular-webfont.woff2') format('woff2'),
        url('../fonts/playfairdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-regular-webfont.woff2') format('woff2'), url('../fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato-bold.woff2') format('woff2'), url('../fonts/lato-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'nunitoregular';
    src: url('../fonts/nunito-regular-webfont.woff2') format('woff2'), url('../fonts/nunito-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.navbar {
    padding: 10px 0;
}

.navbar-brand {
    padding: 0 40px;
    margin: 0;
}

.navbar-side {
    width: calc(50% - 100px);
    display: flex;
    justify-content: center;
}

.navbar a {
    text-decoration: none;
}

.latobold {
    font-family: 'latobold';
}

h2.logo {
    font-size: 28px;
    font-weight: 400;
    color: #fff;
}

h2.logo strong {
    font-size: 35px;
    color: #edf828;
    font-weight: 600;
}

h2.center-logo {
    margin: 0 25px;
}

#navbarSupportedContent {
    justify-content: center;
}

ul.navbar-nav {}

ul.navbar-nav li.nav-item {
    margin-right: 30px;
    position: relative;
    display: flex;
    align-items: center;
}

li.cart {
    width: 102px;
}

ul.navbar-nav li.nav-item:last-child {
    margin-right: 0;
}

ul.navbar-nav li.nav-item a.nav-link {
    color: #292d32;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    line-height: 27px;
    border-bottom: solid 5px transparent;
    padding: 0;
    cursor: pointer;
    text-wrap: nowrap;
}

.languageButton {
    outline: 0;
}

.languageButton:focus {
    outline: 0;
}

ul.navbar-nav li.nav-item a.nav-link.active {
    color: #000;
    /* font-weight: 700; */
    margin-top: 7px;
}

ul.navbar-nav li.nav-item a.nav-link.active:after {
    display: block;
    content: '';
    border-bottom: solid 5px #000;
    margin: 0 auto;
    width: 30%;
    border-radius: 10px;
    margin-top: 3px;
    overflow: hidden;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    color: #edf828;
}

ul.navbar-nav li.nav-item a.nav-link:hover {
    color: #000;
    /* font-weight: 600; */
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute !important;
    top: 80%;
    left: 0;
    z-index: 1;
}

/*.dropdown:hover .dropdown-menu {
	display: block;
}*/

.dropdown-item {
    font-family: 'Poppins';
}

.content {
    display: flex;
    align-items: center;
    /*height: 88vh;*/
}

.content-menu {
    height: 70vh;
}

#title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 20px;
    color: #000;
}

h1,
h2 {
    font-family: 'playfair_displayregular';
    font-style: normal;
    font-weight: 700;
}

h2.swal2-title {
    font-family: 'Poppins';
    font-weight: 500;
}

.adyen-checkout-sr-panel__msg {
    display: none !important;
}

#title h1 {
    margin-top: 0;
    font-size: 60px;
    line-height: 70px;
    text-transform: capitalize;
    color: #000000;
    margin-bottom: 20px;
}

#title p,
#title span,
a,
p {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 150%;
    /*text-transform: capitalize;*/
    color: #292d32;
}

a {
    text-decoration: none;
    color: #2176ff;
}

.mr-5 {
    margin-right: 50px;
}

#button {
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 18px;
    font-family: 'Poppins';
    width: 120px;
    /*height: 50px;*/
    background: #2176ff;
    box-shadow: 0px 8px 24px rgba(33, 118, 255, 0.34);
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    color: #fff;
    font-size: 18px;
    display: inline-block;
}

#button:hover {
    background-color: #666;
}

.QRCode img {
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    float: right;
    box-shadow: -23px -23px 45px 0 rgba(255, 255, 255, 0.42);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url('../img/menu_img.svg');
}

.homeContainer {
    width: 90%;
}

h2 {
    font-size: 40px;
    line-height: 60px;
}

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

@media screen and (max-width: 366px) {
    .confirm {
        font-size: xx-small;
    }
}

.MenuBlock {
    width: 18%;
    margin: 1%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0px 8px 24px rgba(33, 118, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    text-align: center;
    float: left;
    cursor: pointer;
}

img {
    vertical-align: inherit;
}

.loadingContainer {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullPopupImage {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 20px 20px 0 0;
}

.fullImage {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 20px 20px 0 0;
}

.welCome_header {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 7px 15px;
    /* object-fit: cover; */
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-radius: 20px 20px 0 0;
}

.fullCartImage {
    width: 100%;
    height: 95px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 20px;
}

.MenuBlock:nth-child(6n + 0) {
    clear: both;
}

.MenuBlock:hover {
    background: #2176ff;
    transition: background-color 0.3s ease;
}

.MenuBlock:hover p {
    color: #fff;
}

.custom-confirm-btn {
    background: #2176ff;
    box-shadow: 0 8px 24px rgba(33, 118, 255, 0.34);
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    border: 0;
    padding: 10px 22px;
    color: #fff;
    float: left;
    margin: 5px;
}

.custom-confirm-btn-dis {
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.custom-confirm-btn-dis:hover {
    background: rgba(0, 0, 0, 0.3) !important;
    cursor: default !important;
}

.custom-cancel-btn {
    background: #ff3b4e;
    box-shadow: 0 8px 24px rgb(191, 22, 25, 0.34);
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    border: 0;
    padding: 10px 22px;
    color: #fff;
    float: left;
    margin: 0 5px;
}

/* Tab Style */
.warpper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.tabs {
    cursor: pointer;
    background: #fff;
    display: inline-block;
    color: #adb5bd;
    box-shadow: 0px 8px 24px rgba(33, 118, 255, 0.08);
    border-radius: 20px;
    font-size: 16px;
    transition: all 0.2s ease;
    margin-bottom: 20px;
}

.tab {
    padding: 7px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.panels {
    width: 100%;
    /* overflow: hidden; */
}

.panel {
    display: none;
    animation: fadein 0.8s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.panel-title {
    font-size: 1.5em;
    font-weight: bold;
}

.radio {
    display: none;
}

#one:checked~.panels #one-panel,
#two:checked~.panels #two-panel,
#three:checked~.panels #three-panel,
#four:checked~.panels #four-panel {
    display: block;
}

#one:checked~.tabs #one-tab,
#two:checked~.tabs #two-tab,
#three:checked~.tabs #three-tab,
#four:checked~.tabs #four-tab {
    background: #2176ff;
    box-shadow: 0px 4px 24px rgba(255, 113, 91, 0.06);
    border-radius: 20px;
    color: #fff;
}

.menu-item {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 0px 0px 20px 20px;
    padding: 10px;
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.MenuItemBlock {
    margin: 50px 0;
    /* min-height: 400px; */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}

.item-name {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    word-break: break-word;
    line-height: 29px;
    /*text-transform: capitalize;*/
}

.item-header {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    word-break: break-all;
    line-height: 29px;
    /*text-transform: capitalize;*/
    color: green;
}

.item-text {
    text-align: center !important;
    margin: 0;
    font-weight: 500;
    font-size: 17px;
    /*word-break: break-all;*/
    line-height: 24px;
    /*text-transform: capitalize;*/
}

.item-description {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: fit-content;
}

.item-description:hover {
    cursor: pointer;
    text-decoration: underline;
}

.item-price {
    font-weight: 700;
    font-size: 23px;
    line-height: 28px;
    text-transform: capitalize;
    color: #000000;
    float: left;
    margin-right: 10px;
}

.item-textarea {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    /*text-transform: capitalize;*/
    color: #292d32;
    margin-bottom: 0.5em;
    padding: 3px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(56, 176, 0, 0.08);
    border-radius: 5px;
}

.pageTitle {
    font-family: 'latobold';
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    margin-bottom: 20px;
}

.item-checkbox {
    margin-bottom: 1.2em;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    /*text-transform: capitalize;*/
    color: #292d32;
}

.item-dropdown {
    margin-bottom: 1em;
    font-family: 'Poppins';
    font-style: normal;
    /* font-weight: 700; */
    font-size: 20px;
    /* line-height: 100%; */
    /* text-transform: capitalize; */
    color: #292d32;
    width: 100%;
    box-shadow: 0 8px 24px rgba(56, 176, 0, 0.08);
    border-radius: 5px;
}

.UsersBlock {
    float: right;
}

.UsersBlock p {
    font-size: 18px;
    margin: 5px 0 0 0;
}

.item-price sub {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    text-decoration: line-through;
}

.add-to-cart {
    background: #2176ff;
    box-shadow: 0px 8px 24px rgba(33, 118, 255, 0.34);
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    border: 0;
    padding: 10px 22px;
    color: #fff;
    width: 100%;
    float: left;
}

.add-to-cart:hover,
.add-to-cart:focus,
.custom-confirm-btn:hover {
    outline: 0;
    opacity: 0.8;
}

.add-to-cart:before {
    content: '';
    background: url('../img/cart_img_white.png');
    height: 22px;
    width: 20px;
    display: block;
    float: left;
}

.add-to-cart-grey {
    background: #aaaa;
    box-shadow: 0 8px 24px rgba(33, 118, 255, 0.34);
    border-radius: 10px;
    font-size: 18px;
    font-weight: 500;
    border: 0;
    padding: 10px 22px;
    color: #fff;
    width: 100%;
    float: left;
    pointer-events: none;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.reserve-table {
    background: #2176ff;
    box-shadow: 0 8px 24px rgba(33, 118, 255, 0.34);
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    border: 0;
    padding: 10px 22px;
    color: #fff;
    width: 75%;
    float: left;
}

.reserve-table:hover,
.reserve-table:focus,
.custom-confirm-btn:hover {
    outline: 0;
    opacity: 0.8;
}

.heart {
    width: 27px;
    height: 27px;
    background: url('../img/heart_icon_spirte.png') no-repeat;
    background-position: 0 0;
    cursor: pointer;
    transition: background-position 1s steps(10);
    transition-duration: 0s;
}

.heart.is-active {
    transition-duration: 0.5s;
    background-position: -28px 0;
}

.stage {
    float: right;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-top: 2px;
}

.total_p {
    color: #2176ff;
    float: left;
}

.price_p {
    float: right;
}

/* Model */
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: visible;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: auto;
	height: 100vh;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.rdtPicker {
    width: 100%;
    /*position: fixed !important;*/
    top: -175px;
    left: 0;
}

.popup {
    border-radius: 5px;
    width: 40%;
    transition: all 0.5s ease-in-out;
    overflow: auto;
    max-height: 100%;
    /*position: relative;*/
}

.popup::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* Set the thumb color to transparent */
}

/* Style for Firefox and other browsers (optional) */
.popup {
    scrollbar-width: thin;
    /* For Firefox and other non-WebKit browsers */
    scrollbar-color: transparent transparent;
    /* Set the scrollbar color to transparent */
}

/* Style for WebKit-based browsers (Chrome, Safari, etc.) */
.popup::-webkit-scrollbar {
    width: 0;
    /* Width of the scrollbar */
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Poppins, Arial, sans-serif;
}

.popup .close {
    position: absolute;
    top: 15px;
    right: 15px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.popup .close:hover {
    color: #06d85f;
}

.popup .content {
    max-height: 30%;
    overflow: auto;
}

.body-locked {
    overflow: hidden;
}

span {
    cursor: pointer;
}

.minus,
.plus {
    width: 60px;
    height: 40px;
    box-shadow: 0 8px 24px rgba(56, 176, 0, 0.08);
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #292d32;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color: #292d32;
}

.minus:hover,
.plus:hover {
    color: #2176ff;
    border: 1px solid #2176ff;
}

input,
input:disabled {
    height: 40px;
    width: 73%;
    text-align: center;
    font-size: 20px;
    font-family: 'Poppins';
    box-shadow: 0px 8px 24px rgba(56, 176, 0, 0.08);
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    border: none;
    background-color: white;
    color: inherit;
}

input[type='checkbox'] {
    width: 30px;
    margin-right: 0.5em;
}

.loginContainer {
    position: relative;
    height: 100%;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.show-first {
    transform: translateX(0%);
    opacity: 1;
}

.paymentInput iframe {
    height: 42px !important;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Poppins';
    color: #000;
    font-size: 14px;
    letter-spacing: 1px;
    background: #f8f9fa;
    text-align: left;
    border: none;
}

.show-second {
    transform: translateX(-100%);
    opacity: 0;
}

/**** ADYEN STYLING START ****/
.adyen-checkout__button__text {
    color: white !important;
}

.gpay-card-info-container {
    min-width: auto !important;
}

/**** ADYEN STYLING END ****/

@media screen and (max-width: 700px) {
    .box {
        width: 70%;
    }

    .popup {
        width: 70%;
    }
}

.add-to-cart.cart1 {
    /*padding:10px 100px;*/
    box-shadow: none;
}

.menu-item-popup {
    padding: 15px;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(0);
    /* min-height: 400px; */
}

/*.navbar-collapse.collapse {
    position: absolute;
    top: 50px;
    background: rgba(0,0,0,.55);
}*/
.float-left {
    float: left;
}

.float-right {
    float: right;
}

.MenuItemMain.row {
    margin-right: -12px;
    margin-left: -12px;
    width: 100%;
}

.MenuItemBlock.col-md-3 {
    padding-right: 12px;
    padding-left: 12px;
}

/* Cart Page */
body.bg-none {
    background: none;
}

.overlay-white {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../img/background.png);
    min-height: 100%;
    background-size: cover;
}

.cart-main {
    display: flex;
}

.cart-left {
    width: 68%;
    /* float: left; */
    height: 30%;
}

.cart-right {
    width: 32%;
    /* float: right; */
    background: #f5f6f7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 50px 0px 0px 50px;
    padding: 30px;
    padding-right: 20px;
}

@media screen and (max-width: 1200px) {
    .cart-main {
        flex-direction: column;
    }

    .warpper {
        margin-bottom: 0px;
    }
}

#formCart {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

#formCart fieldset {
    /*width: 85%;*/
    margin: 0 auto;
    padding-bottom: 30px;
    position: relative;
}

.formCartBlock .panels {
    background: #fff;
    border: 0 none;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 20px;
}

.form-card {
    text-align: left;
}

/**** Custom Radio Start ****/
.custom-radio {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.custom-radio-input {
    display: none;
}

.custom-radio-label {
    position: relative;
    display: block;
    width: 100%;

    border-radius: 10px;
    background-color: #f8f9fa;
    color: #000;
    border: 2px solid #f8f9fa;
    cursor: pointer;
    padding: 8px 15px 8px 15px;
    font-family: 'Poppins';
    color: #000;
    font-size: 14px;
}

.custom-radio-input:checked+.custom-radio-label {
    border: 2px solid #000;
}

/**** Custom Radio End ****/
#formCart fieldset:not(:first-of-type) {
    display: none;
}

#formCart input,
#formCart textarea,
#formCart select {
    padding: 8px 15px 8px 15px;
    border-radius: 10px;

    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Poppins';
    color: #000;
    font-size: 14px;
    letter-spacing: 1px;
    background: #f4f4f4;
    text-align: left;
    border: none;
}

#formCart input,
#formCart select {
    padding: 0px 15px 0px 15px;
    height: 37px;
}

#formCart .chkAddress {
    width: auto;
    float: left;
    height: 20px;
}

#formCart select:focus {
    border: none;
}

input::placeholder {
    color: #000;
}

.remove-focus-styles:focus {
    outline: none;
}

#formCart input:focus,
#formCart textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #673ab7;
    outline-width: 0;
}

#formCart .back.action-button,
.paymentSuccessBlock button {
    float: left;
    color: #2176ff;
    background: #fff;
    border: 1px solid #2176ff;
}

#formCart .back.action-button:hover {
    color: #fff;
}

#formCart .action-button,
.DiscountCode .action-button {
    width: 100px;
    background: #2176ff;
    font-weight: 700;
    color: white;
    border: 0 none;
    border-radius: 10px;
    cursor: pointer;
    padding: 8px 5px;
    margin: 10px 0px 10px 5px;
    float: right;
    text-align: center;
}

/*#formCart .action-button:hover,
#formCart .action-button:focus {
	background-color: #2176FF
}*/

#formCart .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;
}

#formCart .action-button-previous:hover,
#formCart .action-button-previous:focus {
    background-color: #000000;
}

.formCartBlock {
    z-index: 0;
    border: none;
    position: relative;
    width: 80%;
    margin: 0 auto;
}

.fs-title {
    font-size: 20px;
    color: #231f20;
    margin-bottom: 15px;
    font-weight: 700;
    text-align: left;
    font-family: 'latobold';
    line-height: 30px;
}

.purple-text {
    color: #2176ff;
    font-weight: normal;
}

.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right;
}

.fieldlabels {
    color: #000;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: #adb5bd;
    padding: 0;
}

#progressbar .active {
    color: #2176ff;
}

.progress-text {
    font-size: x-small;
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400;
}

#progressbar .active.complete:before {
    content: '';
    background: #2176ff url('../img/check_icon.png') center center no-repeat;
    text-indent: -9999px;
}

#progressbar #basic:before {
    content: '1';
}

#progressbar #billing:before {
    content: '2';
}

#progressbar #confirm:before {
    content: '3';
}

#progressbar #payment:before {
    content: '4';
}

#progressbar li:before {
    width: 36px;
    height: 36px;
    line-height: 30px;
    display: block;
    font-size: 14px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 5px auto;
    padding: 2px;
    font-family: 'latobold';
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1;
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #2176ff;
}

#progressbar li.active:before {
    border: 3px solid #fff;
    outline: 1px solid #2176ff;
    width: 40px;
    height: 40px;
}

.orderProducts img {
    float: left;
}

.orderProducts .p_name {
    float: left;
    margin-left: 10px;
}

.progress {
    height: 20px;
}

.progress-bar {
    background-color: #673ab7;
}

.fit-image {
    width: 100%;
    object-fit: cover;
}

.ProductImage {
    width: 27%;
}

.ProductDesc {
    width: 50%;
    padding-left: 10px;
    margin: 5px 0 0 0;
}

.ProductDesc p {
    font-size: 18px;
    margin-bottom: 5px;
}

.ProductDesc h6 {
    font-size: 13px;
    margin-top: -12px;
    text-overflow: ellipsis;
    overflow: hidden;
    /*white-space: nowrap;*/
}

.orderinformation h6 {
    font-family: 'Poppins';
    color: #767b91;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.orderinformation p {
    color: #231f20;
    font-size: 16px;
    line-height: 20px;
}

.storeTimings {
    text-align: left;
}

.ProductPrice {
    width: 23%;
    text-align: right;
}

.ProductPrice {
    margin-top: 18px;
}

.ProductDesc .minus,
.ProductDesc .plus {
    width: 25px;
    height: 25px;
    padding: 0;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: #fff;
    display: inline-block;
}

.ProductDesc .edit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin-left: 0.325rem;
    background: #2176ff;
    color: white;
}

.ProductDesc .delete {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin-left: 0.25rem;
    background: #bf1619;
    color: white;
}

.ProductDesc input {
    height: 25px;
    width: 42px;
    font-size: 15px;
    border-radius: 6px;
}

.ProductBlock,
.DiscountCode,
.ProductTotal,
.FinalTotal {
    border-bottom: 1px solid #adb5bd;
    float: left;
    width: 100%;
    padding-bottom: 10px;
}

.DiscountCode {
    margin: 20px 0 0 0;
    padding-bottom: 20px;
}

.DiscountCode input {
    font-size: 14px;
    text-align: left;
    width: 100%;
    border-radius: 10px 0 0 10px;
    padding: 0 10px;
}

.DiscountCode .action-button {
    margin: 0;
    padding: 0;
    font-size: 14px;
    border-radius: 0 10px 10px 0;
}

ul {
    padding: 0;
}

/* li {
    list-style: none;
} */
.ProductTotal ul li {
    list-style: none;
}

.ProductTotal ul li p {
    font-size: 16px;
    float: left;
    width: 50%;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ProductTotal ul li p:first-child {
    text-align: left;
}

.ProductTotal ul li p:last-child {
    text-align: right;
}

.ProductTotal ul li p.deli_text {
    color: #292d32;
    font-size: 13px;
    font-weight: 500;
}

.FinalTotal ul li {
    list-style: none;
}

.ProductTotal.FinalTotal ul li p {
    font-size: 18px;
}

.w-85 {
    width: 85%;
}

.btn-grey,
.btn-grey:hover {
    background: #adb5bd;
    border-radius: 12px;
    font-size: 20px;
    color: #fff;
    height: 40px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
}

.btn-grey:hover {
    opacity: 0.9;
}

.ProductTotalMain {
    min-height: 450px;
}

body.viewCart_bg {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(../img/view_cart_bg.png);
    min-height: 100%;
    background-size: cover;
}

.cartBlock {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(50px);
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    float: left;
    width: 100%;
    border-radius: 20px;
    padding: 20px 15px;
}

.viewCart_table {
    float: left;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.viewCart_table th,
.viewCart_table td {
    padding: 5px 10px;
    font-size: 13px;
}

.viewCart_table td p {
    font-size: 13px;
}

.viewCart_table td p.p_name {
    margin-top: 12px;
}

.viewCart_table th:after {
    content: '';
    border-right: 1px solid #ecf0f1;
}

.viewCart_table th span {
    width: 100%;
    float: left;
}

.viewCart_table th:last-child:after {
    border: 0;
}

.btn-status,
.btn-status:hover,
.btn-status:focus {
    background: rgba(255, 195, 0, 0.1);
    border: 1px solid #ffc300;
    border-radius: 22px;
    color: #ffc300;
    font-size: 13px;
    padding: 5px 20px;
}

.btn-status-red,
.btn-status-red:hover,
.btn-status-red:focus {
    background: rgba(195, 0, 0, 0.1);
    border: 1px solid red;
    border-radius: 22px;
    color: red;
    font-size: 13px;
    padding: 5px 20px;
}

.btn-status-blue,
.btn-status-blue:hover,
.btn-status-blue:focus {
    background: rgba(0, 0, 195, 0.1);
    border: 1px solid #2176ff;
    border-radius: 22px;
    color: #2176ff;
    font-size: 13px;
    padding: 5px 20px;
}

.btn-status-green,
.btn-status-green:hover,
.btn-status-green:focus {
    background: rgba(0, 195, 0, 0.1);
    border: 1px solid green;
    border-radius: 22px;
    color: green;
    font-size: 13px;
    padding: 5px 20px;
}

.cartBlock .ProductTotal ul {
    width: 250px;
    float: right;
    padding: 15px 10px;
    margin: 0;
}

.cartBlock .ProductTotal ul li p {
    font-size: 14px;
    font-weight: 500;
}

.cartBlock .ProductTotal ul li:last-child p {
    font-weight: 700;
    margin-bottom: 0;
}

.cartBlock .ProductTotal {
    border-bottom: 1px solid #eee;
}

.CartBlockWidth {
    width: 100%;
}

.cartBlock button {
    font-size: 13px;
    border-radius: 8px;
}

.paymentSuccessBlock {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}

h3 {
    color: #2176ff;
    font-size: 24px;
    font-family: 'latobold';
    font-weight: 700;
}

.paymentSuccessBlock p {
    font-size: 14px;
}

.paymentSuccessBlock button {
    height: 40px;
    font-weight: 700;
    width: 170px;
    margin: 0 auto;
}

.paymentSuccessBlock img,
.paymentSuccessBlock svg {
    margin: 20px auto;
}

.circle-active {
    background-color: #2176ff;
    font-size: 10px;
    position: absolute;

    right: 10px;
    width: 16px;
    height: 16px;
    font-family: 'Poppins';
    border-radius: 50%;
    color: white;
    line-height: 16px;
    text-align: center;
}

.circle-active-mb {
    background-color: #2176ff;
    font-size: 12px;
    position: relative;
    /* top: -1px; */
    /* right: -7px; */
    width: 20px;
    height: 20px;
    font-family: 'Poppins';
    border-radius: 50%;
    color: white;
    line-height: 20px;
    text-align: center;
    display: inline-block;
}

.cartItemsContainer {
    max-height: 40vh;
    overflow-y: scroll;
    border-bottom: 1px solid #adb5bd;
    scrollbar-color: #2176ff #f1f1f1;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/*::-webkit-scrollbar-thumb {
	background-color: #2176FF;
	border-radius: 4px;
}*/

.viewCart_table thead tr {
    border-bottom: 1px solid #eee;
}

#header {
    display: block;
}

.border-secondary {
    border-color: #eee !important;
}

.desktop-none {
    display: none;
}

.mobile-none {
    display: block;
}

.nav-center {
    justify-content: center;
}

.MenuBlock p {
    margin: 0;
    padding-bottom: 1rem;
}

.MenuBlock a {
    display: block;
    text-decoration: none;
}

@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1240px;
    }
}

@media (max-width: 1200px) {
    .circle-active {
        right: -4px;
    }
}

.form_confirm_payment {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 70vh; */
    width: 100%;
}

@media only screen and (max-width: 1199px) {
    .dropdown-menu {
        top: 90%;
    }

    /* .form_confirm_payment {
        height: auto;
    } */

    .navbar-collapse {
        background: rgba(255, 255, 255, 1);
        z-index: 1100;
        position: relative;
        -webkit-box-shadow: 0 2px 4px 2px #dedede;
        -moz-box-shadow: 0 2px 4px 2px #dedede;
        box-shadow: 0 2px 4px 2px #dedede;
        border-radius: 5px;
    }

    .navbar-brand img {
        height: 100px;
        width: 100px;
    }

    .drawer {
        position: fixed;
        top: 0;
        right: -300px;
        width: 250px;
        height: 100vh;
        background-color: #fff;
        /* transition: right 0.3s ease-in-out; */
        transition: none !important;
        z-index: 9;
    }

    button#long-button {
        top: -18px;
        margin-top: 0;
        left: -8px;
    }

    .drawer.open {
        right: 0;
    }

    .navbar-light .navbar-toggler {
        background: none;
        border: none;
    }

    .navbar {
        height: fit-content;
    }

    .languageButton {
        margin-right: 150px;
    }

    .mobile-none {
        display: none !important;
    }

    ul.navbar-nav li.nav-item.cart {
        display: none;
    }

    .desktop-none {
        display: block;
    }

    ul.navbar-nav li.nav-item a.nav-link.active {
        margin-top: 0;
    }

    ul.navbar-nav li.nav-item a.nav-link.active:after {
        border: none;
    }

    ul.navbar-nav li.nav-item.cart {}

    ul.navbar-nav li.nav-item {
        margin: 0 0 20px 0;
    }

    ul.navbar-nav li.nav-item:last-child {
        margin: 0;
    }

    ul.navbar-nav {
        padding: 5px 30px 0;
        height: 100vh;
        margin-top: 50px;
    }

    .btnClose {
        position: absolute;
        right: 0;
    }

    .navbar-collapse .navbar-light .navbar-toggler {
        border-radius: 5px 5px 0 0;
    }

    /* .w-90 {
		-ms-flex: 0 0 90%;
		flex: 0 0 90%;
		max-width: 90%;
	}

	.QRCode {
		margin: 20px auto;
	}

	.QRCode img {
		float: none;
	}

	.ProductTotalMain {
		min-height: 250px;
	}

	.formCartBlock {
		width: 100%;
	}

	.popup {
		width: 60%;
	}

	.MenuBlock {
		margin: 2%;
		width: 29%;
	} */
}

@media screen and (max-width: 1024px) {
    .MenuItemBlock.col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .popup {
        width: 70%;
    }

    .CartBlockWidth {
        width: 100%;
    }
}

@media screen and (max-width: 860px) {
    .MenuItemBlock.col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }
}

@media screen and (max-width: 1199px) {
    .MenuItemBlock.col-md-3 {
        max-width: 50%;
        flex: 0 0 50%;
    }

    .cart-left,
    .cart-right {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #title {
        position: static;
        height: auto;
        max-width: 100%;
        margin-top: 35px;
        padding: 0;
    }

    .navbar-brand img {
        height: auto;
    }

    .orderProducts {
        text-align: center;
    }

    .orderProducts img {
        float: none;
    }

    .orderProducts .p_name {
        float: none;
        margin-left: 0px;
    }

    .add-to-cart {
        font-size: 16px;
    }

    .pageTitle {
        font-family: 'latobold';
        font-weight: bold;
        font-size: 32px;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .swal2-title {
        font-weight: 100;
        font-size: 20px;
    }

    .swal2-modal .custom-confirm-btn {
        font-size: 14px;
        /*width: 70%;
		margin-top: 10px;*/
    }

    div:where(.swal2-container) div:where(.swal2-popup) {
        width: 90% !important;
    }

    .homeContainer .btnBlock {
        margin: 0 auto;
    }

    .homeContainer {
        width: 100%;
        text-align: center;
    }

    .content-menu {
        height: auto;
    }

    h2 {
        line-height: 40px;
    }

    .navbar-brand {
        margin-top: 0;
        padding: 0;
    }

    .navbar-brand img {
        width: 100px;
        height: 100px;
    }

    ul.navbar-nav li.nav-item a.nav-link.active:after {
        width: 30px;
        margin: 0;
    }

    ul.navbar-nav li.nav-item .cart a.nav-link.active:after {
        margin: 0 auto;
    }

    #title h1 {
        font-size: 45px;
        line-height: 50px;
    }

    .viewCart_table td:nth-child(2) {
        width: 150px;
        float: left;
    }

    .MenuBlock {
        margin: 2%;
        width: 46%;
    }

    h2 {
        font-size: 30px;
    }

    .drawer {
        transition: none;
    }
}

@media screen and (max-width: 590px) {
    .MenuItemBlock.col-md-3 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .fullImage.productImage {
        min-height: 300px !important;
    }
}

@media screen and (max-width: 480px) {
    #title h1 {
        font-size: 35px;
    }

    #title p,
    #title span,
    a,
    p {
        font-size: 16px;
    }

    #progressbar li {
        font-size: 11px;
    }

    .popup {
        width: 94%;
    }

    .add-to-cart.cart1 {
        /*padding:10px 70px;*/
    }

    h2 {
        font-size: 25px;
    }

    .fullImage.productImage {
        min-height: 240px !important;
    }
}

/* ================ FDS Styling Fix ================ */

@media screen and (max-width: 1199px) {
    .navbar-side {
        width: 100%;
        flex-direction: column;
    }

    .navbar-side:nth-child(3) {
        margin-top: 10px;
    }

    ul.navbar-nav {
        height: fit-content;
    }
}

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

    .pageTitle,
    .add-to-cart,
    .latobold {
        word-wrap: break-word;
    }

    .item-name,
    .item-price,
    .float-left {
        word-break: break-all;
    }
}

/* Styles for mobile buttons (visible below 1200px) */
.mobile-button {
    display: block;
}

/* Styles for laptop buttons (visible above 1200px) */
.laptop-button {
    display: none;
}

/* Media query to show/hide buttons based on screen width */
@media only screen and (min-width: 1200px) {

    /* Mobile buttons hidden on laptops */
    .mobile-button {
        display: none;
    }

    /* Laptop buttons visible on laptops */
    .laptop-button {
        display: block;
    }
}

@media screen {}

#language-styling {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbarName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Mobile S (320px and up) */
@media only screen and (min-width: 320px) {
    .navbarName {
        max-width: 60px;
    }
}

/* Mobile M (375px and up) */
@media only screen and (min-width: 375px) {
    .navbarName {
        max-width: 110px;
    }
}

/* Mobile L (425px and up) */
@media only screen and (min-width: 425px) {
    .navbarName {
        max-width: 165px;
    }
}

.invert-color {
    background-color: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: invert(1) grayscale(1) contrast(9);
}

.profileCircle {
    background-color: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    padding: 0;
}

.swal2-container {
    z-index: 200000;
    overflow-y: auto;
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
}

.black_text,
.fieldlabels,
.item-name,
.orderinformation p {
    color: black;
}

.css-1eo1vcn {
    margin: 0 !important;
    padding: 10px !important;
}

.itemDescButton {
    border: none;
    text-align: start;
    padding: 0 !important;
    background-color: transparent;
}

.itemDescButton:focus {
    outline: 0 !important;
}