:root {
    --color1: #DDECD5;
    --color2: #8f9c9b;
    --color3: #E4F4C3;
    --color3-hover: #b3c786;
    --color4: #f48e89;
    --color4-hover: #e4bab8;
    --color5: #e8f3f2;
    --color6: #11867b;
    --color6-hover: #3ecf8e;
}

html {
    font-family: 'Quick Sand', 'Averta' , sans-serif;
}

body {
    font-family: 'Quick Sand', 'Averta' , sans-serif;
}

#vue-merchant-details > div.merchant-top-header  h4 {
    color: var(--color4);
}
#vue-merchant-details > div.d-block.d-lg-none  h5{
    color: var(--color4);
}
#vue-merchant-details > div.merchant-top-header  ul > li,
#vue-merchant-details > div.merchant-top-header  ul > li > a {
    color: var(--color2)
}

div.d-flex.justify-content-between  div  h5,
#vue-merchant-menu > section > h5,
#menu-category  a{
    color: var(--color4);
}
div > div > div > div > div.col-lg-8.col-md-8.d-flex.align-items-center.fixed-height > div > div.d-flex.align-items-center.mb-1 > h6,
div > div > div > div > div.p-2 > div.d-flex.align-items-center.mb-1 > h6,
div > div > div > div > div.d-flex.align-items-start.align-items-stretch > div.p-2.borderx.w-100 > div > div > h6,
div > div > div.col-9.p-0 > div > div.col-lg-8.col-md-8.d-flex.align-items-center.fixed-height > div > div > h6
{
    font-weight: 600;
    font-size: 16px!important;
    color: var(--color6);
}
div > div > div > div > div.col-lg-8.col-md-8.d-flex.align-items-center.fixed-height > div > p.bold.m-0.prices,
div > div > div > div > div.p-2 > div.d-flex.justify-content-between.align-items-center.w-100 > h5,
div > div > div > div > div.row.align-items-center > div.col > div > div.col-6.text-center > h5,
div > div > div > div > div.p-2 > div.d-flex.justify-content-between.align-items-center.w-100 > h5,
div > div > div.col-9.p-0 > div > div.col-lg-8.col-md-8.d-flex.align-items-center.fixed-height > div > div.btn-group.btn-group-toggle.input-group-small.flex-wrap > label,
div > div > div.col-9.p-0 > div > div.col-lg-8.col-md-8.d-flex.align-items-center.fixed-height > div > .prices
{
    font-size: 14px!important;
    font-weight: 400!important;
}

div > div > div > div > div.col-lg-4.col-md-4.d-flex.align-items-center.justify-content-start.justify-content-lg-center > a,
div > div > div.col-9.p-0 > div > div.col-lg-4.col-md-4.d-flex.align-items-center.justify-content-start.justify-content-lg-center > div > a,
div > div > div.col-9.p-0 > div > div.col-lg-4.col-md-4.d-flex.align-items-center.justify-content-start.justify-content-lg-center > a,
div > div > div > div > div.row.align-items-center > div.col > div > div.col-6.text-right > button,
#vue-merchant-menu > div.el-affix > div > div > button,
div.row > div > div > div > div.p-2 > div.d-flex.justify-content-between.align-items-center.w-100 > div > button,
div > div > div.col-3.p-0 > div > div.position-absolute.button-fixed-buttom a,
.btn-green{
    border: 0;
    font-weight: bold;
    background:linear-gradient(-90deg, rgba(59,169,163,255) 0%, rgba(75,202,165,255) 0%, rgba(85,226,166,255) 100%)
}
.el-button--success,
#itemModal  button.add_to_cart,
.btn-group .active,
#vue-cart > div > div.section-cart > a{
    color: white!important;
    border: none!important;
    background: linear-gradient(-90deg, rgba(16,150,153,1) 0%, rgba(17,134,123,1) 5%, rgba(12,246,224,1) 100%)!important;
}
.btn-group .active{
    font-size: 12px!important;
    font-weight: 500!important;
}
#itemModal  button.add_to_cart:disabled,
#vue-cart > div > div.section-cart > a:disabled{
    background: #b2b2b2;
}

.zmdi-view-dashboard,
.zmdi-view-agenda{
    color: var(--color6);
}

#menu-category  a:hover{
    color: var(--color4-hover)!important;
}

.qty-btn{
    border:1.5px solid var(--color6);
    color: var(--color6)!important;
    background: white!important;
    font-weight: bold;
}
.qty-btn:hover{
    border:1.5px solid var(--color6-hover);
    color: var(--color6-hover)!important;
}

.item-remove{
    border:1.5px solid var(--color4-hover);
    color: var(--color4-hover)!important;
    background: white!important;
    font-weight: bold;
}
.item-remove:hover{
    border:1.5px solid var(--color4);
    color: var(--color4)!important;
}

.category-owlcarousel .nav-link.active:after,
.category-carousel .nav-link.active:after {
    border-bottom: 3px solid var(--color5);
}
#menu-category > div.owl-stage-outer > div > div > a{
    color: var(--color6);
}
#menu-category > div.owl-stage-outer > div > div > a:hover{
    color: var(--color6-hover)!important;
}


@media only screen and (min-width: 600px) {
    p{
        font-size: 13px!important;
    }
    .menu-category a{
        font-size: 15px!important;
    }

}
#vue-cart-preview > li{
    padding-right: 8px;
}
.badge-dark{
    background: var(--color6);
}
#itemModal .modal-footer button{
    font-weight: bold;
}
#item-details > div > div > div > div > h5{
    color:var(--color4);
}
.checkout-page h5,.checkout-page h6{
    color: var(--color6);
    font-weight: 500;
}

div > div > div > div > div.col-lg-8.col-md-8.d-flex.align-items-center.fixed-height > div > div.btn-group.btn-group-toggle.input-group-small label:only-child,
div > div > div.col-9.p-0 > div > div > div > div.btn-group.btn-group-toggle.input-group-small > label:only-child,
div > div > div.col-9.p-0 > div > div.col-lg-8.col-md-8.d-flex.align-items-center.fixed-height > div > div.btn-group.btn-group-toggle.input-group-small.flex-wrap label:only-child{
    background: transparent!important;
    border: 0!important;
    color: #212529!important;
    outline: none!important;
    box-shadow: none!important;
    padding: 0!important;
    font-weight: 500!important;
    font-size: 14px!important;
}
.promo-off{
    position: absolute;
    right: 0;
    font-size: 14px;
    top: 14px;
    padding: 2px 4px;
    background: red;
    font-weight: bold;
    color: white!important;
    border-radius: 8px 0 0 8px;
}