*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body
{
    background: #fff;
    font-family: 'Poppins', sans-serif;
}

label
{
    font-weight:normal;
}

.errorSpan
{
    color:red;
    font-weight:normal;
    padding:2px;
    display:none;
}

a
{
    text-decoration:none;
}

/*Index Page*/

.top-header
{
    padding: 10px;
    background-color: #FFCC5F;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.top-header .material-icons
{
    margin-right: 10px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: 0.5s ease color;
}

.top-header .material-icons:hover
{
    color:#3F3F3F;
}

.top-header p
{
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 20px;
    font-weight: normal;
    color: #fff;
    cursor: pointer;
    transition: 0.5s ease color;
}

.top-header p:hover
{
    color:#3F3F3F;
}

.login-button ul
{
    list-style: none;
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

.login-button ul li
{
    font-weight: normal;
    color: #fff;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.5s ease color;
}

.login-button ul li:hover
{
    color:#FFCC5F;
}

.top-bar
{
    background:#3F3F3F;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}

.top-bar .logo 
{
    padding: 15px 15px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.top-bar .logo img
{
    width:90%;
}

.top-bar .logo span
{
    color:#FFCC5F;
}

.top-bar .serch-box
{
    padding: 0;
}
.top-bar .serch-box form
{
    display: flex;
    align-items: center;
}

.top-bar .serch-box .form-control
{
    border:none;
    max-width:100%;
    border-radius: 0;
    box-shadow: none;
}

#resizing_select 
{
    width: 70px;
    background:#FFCC5F;
} 
   
#width_tmp_select
{
    display : none;
} 

.top-bar .serch-box .search-button
{
    background: #FFCC5F;
    color:#fff;
    border-radius: 0;
    font-size: 0;
}

.top-bar .serch-box .search-button:hover
{
    color:#3F3F3F;
}

.top-bar .menu-icon .material-icons
{
    color:#fff;
    float: left;
    font-size: 35px;
    cursor: pointer;
    transition: color 0.5s;
}

.top-bar .menu-icon .material-icons:hover
{
    color:#FFCC5F;
}

.top-bar .search-icon .material-icons
{
    background:#FFCC5F;
    font-size: 35px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    float:left;
}

.top-bar .cart-icon
{
    color: #FFCC5F;
    cursor:pointer;
    font-size: 26px;
    transition: 0.5s ease color;
}

.top-bar .cart-icon:hover
{
    color: #fff;
}

.live-result
{
    position: absolute;
    top:40px;
    background: #fff;
    z-index: 101;
    padding:10px 10px;
    box-shadow: 0 0 2px 1px #202020;
    transition: all 0.5s ease;
}

.live-result ul
{
    list-style: none;
    margin: 0;
}

.live-result ul li
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px;
    cursor: pointer;
}

.live-result ul li:hover
{
    background: #ffcc5f73;
}

.live-result ul li img
{
    width: 80px;
    height: 80px;
    padding:5px;
}

.live-result ul li span
{
    font-size: 15px;
    color: #707070;
    display: block;
    white-space: normal;
}

.live-result ul li small
{
    color: #707070;
    padding: 5px;
}

/*Banner Area*/

.slide-show
{
    position: absolute;
}

.slide-show .slide-show-container img
{
    width:100%;
    height: 350px;
}

/* Deal of the day */

.deal-of-day
{
    padding:10px 10px
}

.deal-of-day h5
{
    text-align: center;
}

.deal-of-day img
{
    width: 100%;
    height: 468px;
    padding:10px;
}

/* Side Menu */


.side-menu
{
    position: fixed;
    top:0;
    left:0;
    background: #f6ffff;
    max-width: 350px;
    height: 100%;
    padding: 0;
    color:#fff;
    z-index: 102;
    display: none;
    overflow-y: scroll;
}

.side-menu .menu-header
{
    background: #3f3f3f;
    box-shadow: 0 2px 0 0 #000 !important;
}

.menu-signature span
{
    padding: 10px;
    font-size: 20px;
    color: #ffcc5f;
    font-weight: normal;
    float: left;
}

.menu-close span
{
    float: right;
    padding: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.menu-close span:hover
{
    font-size: 30px;
    color: #ffcc5f;
}

.menu-items ul
{
    list-style: none;
    padding: 10px;
}

.menu-items ul li 
{
    font-size: 20px;
    line-height: 2;
    cursor: pointer;
    transition: color 0.5s ease;
    font-weight: normal;
    color: #202020;
}

.menu-items ul li:hover
{
    color: #9f54e4;
}


/* Shop Later */
.shop-later-results,
.order-history-results
{
    position: fixed;
    top:0;
    left:0;
    background: #f6ffff;
    max-width: 1020px;
    overflow-y: scroll;
    height: 100%;
    padding: 0;
    color:#fff;
    z-index: 99;
    display: none;
}

.shop-later-results .shop-later-header,
.order-history-results .shop-later-header
{
    background: #3f3f3f;
    box-shadow: 0 2px 0 0 #000 !important;
}

.shop-later-heading span
{
    padding: 10px;
    font-size: 20px;
    color: #ffcc5f;
    font-weight: normal;
    float: left;
}

.shop-later-heading .material-icons
{
    padding: 15px;
}

.shop-later-close span,
.order-history-close span
{
    float: right;
    padding: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.shop-later-close span:hover,
.order-history-close span:hover
{
    font-size: 30px;
    color: #ffcc5f;
}

.shop-later-content
{
    padding:10px !important;
}

.shop-later-content .product-container
{
    display: flex;
    justify-content: end;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px !important;
}

.empty-message
{
    text-align: center;
    color: #202020;
    font-weight: normal;
    font-family: monospace;
}

/* order history */

.order-history-content
{
    padding:10px !important;
}

.order-history-content .order-history-list
{
    padding:15px;
}

.order-history-content .order-history-list li
{
    padding:10px;
    background: #edf3f3;
    margin-bottom:5px;
    cursor: pointer;
    transition: 0.5s ease box-shadow;
}

.order-history-content .order-history-list li:hover
{
    box-shadow: 0 2px 0 0 #dababa;
}

.order-history-content .order-history-list li .delivery-order-details
{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.order-history-content .order-history-list li .product-image-container
{
    margin: 0;
    padding: 5px 0 5px 0;
}

.order-history-content .order-history-list li .product-image-container img
{
    width:80px;
    height: 80px;   
}

.order-history-content .order-history-list li .product-name-container
{
    margin: 0;
    padding: 5px 0 5px 0;
}

.order-history-content .order-history-list li .product-name-container .product-name
{
    color:#707070;
    font-weight: normal;
    font-size: 15px;
}

.order-history-content .order-history-list li .product-name-container .seller-name
{
    color: #707070;
    font-size: 15px;
}

.order-history-content .order-history-list li .price-container
{
    margin: 0;
    padding: 5px 0 5px 0;
}

.order-history-content .order-history-list li .price-container .price
{
    color: #707070;
    font-weight: normal;
    font-size: 15px;
}

.order-history-content .order-history-list li .track-details-container
{
    margin: 0;
    padding: 5px 0 0 0;
}

.order-history-content .order-history-list li .track-details-container .track-status
{
    color: #707070;
    font-size: 15px;
}

.order-history-content .order-history-list li .rate-review-container
{
    margin: 0;
    padding: 0 0 5px 0;
}

.order-history-content .order-history-list li .rate-review-container .rate-span
{
    color: #9f54e4;
    font-size: 15px;
    font-weight: normal;
}

.order-history-content .order-history-list li .rate-review-container .rate-span .material-icons
{
    color:#FFCC5F;
}


.order-details-container
{
    background: #edf3f3;
    position: fixed;
    bottom: 0;
    color: #707070;
    padding: 10px !important;
    height: 255px;
    max-width: 1013px;
    box-shadow: 0 0 2px 2px #dababa;
    display: none;
}

.order-details-container .customer-details-container .close-button
{
    margin:0;
}

.order-details-container .customer-details-container .close-button span
{
    float:right;
    cursor:pointer;
    transition: 0.5s ease color;
}

.order-details-container .customer-details-container .close-button span.return-product
{
    color:#9f54e4;
    float: left;
    font-weight: normal;
}

.order-details-container .customer-details-container .close-button span:hover
{
    color:#28a745;
}

.order-details-container .customer-details-container .address-heading
{
    font-weight: normal;
}


.order-details-container .customer-details-container .rating-heading
{
    font-weight: normal;
    font-size: 12px;
    padding:5px;
    color:#28a745;
}

/* progress bar */

.progress-bar-container .step
{
    text-align: center;
}

.progress-bar-container .step .step-text
{
    font-weight: normal;
}

.progress-bar-container .step .step-bullet
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-bar-container .step .step-bullet p 
{
    width: 25px;
    height: 25px;
    margin: 0;
    border:1px solid #28a745;
    border-radius: 100%;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    transition: 0.5s ease background-color;
}

.progress-bar-container .step .step-bullet p.delivery-status
{
    background-color: #28a745;
    color: #fff;
}

.progress-bar-container .step .step-bullet p.delivery-status::after
{
    content:'';
    position: absolute;
    width: 632px;
    background-color: #28a745;
    height: 2px;
    bottom:11px;
    left:26px;
    z-index: -5;
    animation: deliveryBox 1.5s;
}


@keyframes deliveryBox 
{
    from
    {
        width: 0;
    }
    to
    {
        width: 632px;
    }
}

.progress-bar-container .step .step-bullet p.dispatch-status
{
    background-color: #28a745;
    color: #fff;
}

.progress-bar-container .step .step-bullet p.dispatch-status::after
{
    content:'';
    position: absolute;
    width: 300px;
    background-color: #28a745;
    height: 2px;
    bottom:11px;
    left:26px;
    z-index: -5;
    animation: dispatchBox 1.5s;
}


@keyframes dispatchBox 
{
    from
    {
        width: 0;
    }
    to
    {
        width: 300px;
    }
}

.progress-bar-container .step .step-bullet p.delivery-status-others
{
    background-color: #28a745;
    color: #fff;
}

.progress-bar-container .step .step-bullet p.dispatch-status-others
{
    background-color: #28a745;
    color: #fff;
}

.progress-bar-container .step .step-bullet p.ordered-status
{
    background-color: #28a745;
    color: #fff;
}

.progress-bar-container .step .date-text
{
    font-weight: normal;
    font-size: 12px;
    margin: 0;
    padding-top: 2px;
}

.order-ratings-active
{
    color: #28a745;
    cursor: pointer;
}

.order-ratings-inactive
{
    color:#707070;
    cursor: pointer;
}


.return-form-container
{
    position: fixed;
    max-width: 500px;
    padding: 10px !important;
    background-color: #f6ffff;
    left:0;
    bottom: 0;
    display: none;
}

.return-form-container form .form-group
{
    margin-bottom: 10px;
}

.return-form-container form .form-group .form-control
{
    background-color: #edf3f3;
    box-shadow: none;
    border: none;
} 

.return-form-container form .form-group .agreement-checkbox
{
    margin-right:2px;
    font-size: 10px;
}

.return-form-container form .form-group label
{
    font-size: 15px;
}
/* Search Area */

.search-results
{
    position: fixed;
    top:0;
    right:0;
    background: #f6ffff;
    max-width: calc(100% - 350px);
    overflow-y: scroll;
    height: 100%;
    padding: 0;
    color:#fff;
    z-index: 1000;
    display: none;
}

.search-results .search-header
{
    background: #3f3f3f;
    box-shadow: 0 2px 0 0 #000 !important;
}

.search-heading span
{
    padding: 10px;
    font-size: 20px;
    color: #ffcc5f;
    font-weight: normal;
    float: left;
}

.search-close span
{
    float: right;
    padding: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.search-close span:hover
{
    font-size: 30px;
    color: #ffcc5f;
}

.contact
{
    float:right;
}

.contact span
{
    font-size:15px;
}

.search-results .filtter-area 
{
    padding: 10px;
}

.search-results .filtter-area .filter
{
    float: left;
    cursor: pointer;
    color:#202020;
    font-weight: normal;
    transition: color 0.5s ease;
}

.search-results .filtter-area .filter:hover
{
    color: #FFCC5F;
}

.search-results .filtter-area .filter span
{
    float: left;
}

.filter-background
{
    padding: 10px !important;
    display: none;
}

.filtered-background
{
    padding: 10px !important;
}

.filters-content form .form-group
{
    margin-bottom: 0 !important;
}

.filters-content form .form-group .form-control
{
    font-size: 12px;
    margin-top: 2px;
    box-shadow: none;
    border: none;
    outline:none;
    background: #FFCC5F;
    color: #202020;
}

.filter-container
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.filter-container .form-group
{
    margin-left: 5px;
    margin-right: 5px;
}


.filter-container input[type='submit']
{
    font-size:small;    
}

.empty-content
{
    color:#707070;
    text-align: center;
    font-weight: normal;
}

.filter-button
{
    padding:5px !important;
}

.filter-button button
{
    float: right;
}

.product-filter-container
{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.filter-heading
{
    color: #707070 !important;
    font-size: 18px;
    text-align: center;
    font-weight: normal;
}

.shop-content
{
    padding:10px !important;
}


.profile-img img
{
    width:100%;
    height:auto;
    box-shadow:0 0 10px 0 #7b6f6f;
    border-radius:10%;
}

.shop-details
{
    margin-top:10px;
}

.shop-details a
{
    text-decoration:none;
    color:#202020;
}

.shop-details a:hover
{
    color:#9f54e4;
    text-decoration:none;
}

.shop-details hr
{
    border-bottom: 1px solid #FFCC5F;
}

.no-records
{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFCC5F;
    font-weight: normal;
}


/* Cart Area */

.cart-area
{
    position: fixed;
    top:0;
    right:0;
    background: #3f3f3f;
    max-width: 950px;
    overflow-y: scroll;
    max-height: 100%;
    padding: 10px;
    color:#fff;
    z-index: 103;
    display: none;
}

.cart-area .cart-header
{
    box-shadow: 0 2px 0 0 #000 !important;
}

.cart-heading span
{
    padding: 10px;
    font-size: 20px;
    color: #ffcc5f;
    font-weight: normal;
    float: left;
}

.cart-heading .count
{
    color:#fff;
}

.cart-close span
{
    float: right;
    padding: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.cart-close span:hover
{
    font-size: 30px;
    color: #ffcc5f;
}

.cart-content
{
    padding: 15px;
    margin: auto;
}

.cart-content table
{
    border-collapse:collapse;
}

.cart-content table thead
{
    background: #FFCC5F;
    color: #202020;
}

.cart-content table thead th:last-child
{
    text-align: end;
}

.cart-content table tbody
{
    background-color: #fff;
}

.cart-content table tbody td:last-child
{
    text-align: end;
}

.cart-content table tbody td .form-control
{
    background: #fff !important;
    box-shadow: none;
    border: none;
}

.cart-content .empty-cart tbody
{
    background: #3F3F3F;
}

.cart-content .empty-cart tbody td:last-child
{
    text-align: center !important;
    padding: 10px;
    border: none;
    font-weight: normal;
    color: #FFCC5F;
}

.choose-mode
{
    padding: 0 10px;
}

.choose-mode label
{
    color:#FFCC5F;
    padding: 5px;
}

.choose-payMode
{
    padding: 0 10px !important;
}

.choose-payMode label
{
    color:#202020;
    padding: 5px;
}

/* Servie Icon Area */

.service-icons
{
    margin: auto;
    z-index: 10;
}

.service-icons .shadow
{
    box-shadow: 0 6px 14px 0px #8bb1b7;
}

.service-icons .card
{
    border: none;
    cursor: pointer;
    transition: 0.5s ease;
    background: #f9f0f0;
    border-radius: 0;
}



.service-icons .card .card-body
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-icons .card .card-body img
{
    width: 50px;
    height: 50px;
    transform:transform .2s;
}

.service-icons .card:hover .card-body img
{
    transform: scale(1.5);
}

.service-icons .card .card-body p
{
    font-size: 15px;
    font-family: monospace;
    font-weight: normal;
    line-height: 1.2;
    margin-top: 20px;
    text-align: center;
}

.deliver
{
    background:#e6ca8d !important;
}

.service-search
{
    margin: auto;
    background: #3F3F3F;
}

.service-search form
{
    padding: 5px 0;
    margin: auto;
}

.service-search form .form-group
{
    margin: 0;
    padding: 0;
}

.service-search form .form-group .form-control
{
    background: #f9f0f0;
    box-shadow: none;
    border-radius: 0;
    border: none;
    outline: none;
}

.service-search form .form-group .search-button
{
    background: #f9f0f0;
    border-radius: 0;
    font-size: 15px;
    padding-left: 20px;
    padding-bottom: 0;
    box-shadow: none;
    transition: color 0.5s ease
}

.service-search form .form-group .search-button:hover
{
    color: #e6ca8d;
}

.service-search form .form-group .search-button:focus
{
    box-shadow: none;
}
/* Best Selling Area */

.best-offers
{
    margin-top:40px;
    border-top: 16px solid #3F3F3F;
}

.best-offers-container{
    margin:auto;
    padding:10px 10px;
}

.best-offers-container h3{
    text-align:center;
}

.best-offers-container p{
    text-align:center;
}

.best-offers-container .card
{
    border:none;
    background:transparent;
}
.best-offers-container .card .card-body img
{
    width:100%;
    height: 170px;
    border-radius: 20px;
    cursor:pointer;
    transition: all .2s ease-in-out;
}

.best-offers-container .card .card-body img:hover
{
    transform: scale(1.05);
}

.best-offers-container .card .card-body h5
{
    font-size:16px;
    font-weight:500;
    margin:0;
    padding-top:10px;
    text-align:center;
}

.best-offers-container .card .card-body p
{
    font-size:12px;
    font-weight:500;
}

/* Product Section */

.top-products
{
    margin-top:40px;
    border-top: 16px solid #3F3F3F;
}

.top-products-heading
{
    margin:auto;
    padding:15px 15px;
}

.top-products-heading h3
{
    text-align: center;
}

.product-container-row
{
    background: #f9f0f0;
}

.product-container
{
    margin: auto;
}

.product-container .card
{
    position: relative;
    width: 280px;
    height: 350px;
    margin:20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;    
}

.product-container .card:focus
{
    outline: none;
}

.product-container .card .imgBx img 
{
    width:100%;
    height: 340px;
}

.product-container .card .content
{
    position: absolute;
    bottom: -320px;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    flex-direction: column;
    background: #003466d6;
    box-shadow: 0 -10px 10px rgba(0,0,0,0.1);
    border:1px solid rgba(255,255,255,0.2);
    transition: bottom 0.5s;
    padding: 2px;
}

.product-container .card:hover .content
{
    bottom: 0;
}

.product-container .card .content .contentBx
{
    color:#fff;
    text-align: center;
}

.product-container .card .content .contentBx .shop-later
{
    position: absolute;
    top:0;
    right:0;
    padding:10px;
    cursor: pointer;
}

.product-container .card .content .contentBx .shop-later .empty
{
    font-size: 30px;
}

.product-container .card .content .contentBx .shop-later .filled
{
    position: absolute;
    top:0;
    right: 0;
    font-size: 30px;
    padding: 10px;
    opacity: 0;
    transform:translateY(25px);
    transform: all 5.0s ease;
}

.product-container .card .content .contentBx .shop-later:hover .filled
{
    transform:translateY(0px);
    opacity: 1;
}

.product-container .card .content .contentBx .shop-later .add-later-active
{
    position: absolute;
    top:0;
    right: 0;
    font-size: 30px;
    padding: 10px;
}

.product-container .card .content .contentBx a
{
    text-decoration:none;   
}

.product-container .card .content .contentBx h3
{
    color:#FFCC5F;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
    font-size: 18px;
    font-family: monospace;
    text-align: center;
    margin:20px 0 15px;
    line-height: 1.1em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(-20px);
    transition-delay: 0.4s;
}

.product-container .card:hover .content .contentBx h3
{
    opacity: 1;
    transform: translateY(0px);
}

.product-container .card .content .contentBx h3 span
{
    font-size: 12px;
    font-weight: 500;
    text-transform: initial;
    color:#fff !important;
}

.slick-prev:before, .slick-next:before
{
    color: black !important;
    font-size: 30px !important;
}


/* Footer */

footer
{
    background: #3F3F3F;
}

footer .list-area
{
    margin:auto;
    padding:10px 20px;
}

footer .list-area ul
{
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding:0;
}

footer .list-area ul li
{
    padding:10px 10px;
    color:#fff;
    font-size: 16px;
    font-weight: normal;
}

footer .list-area ul li a
{
    text-decoration: none;
    color: #fff;
    transition: color 0.5s ease;
}

footer .list-area ul li a:hover
{
    color: #FFCC5F;
}

footer .list-area hr
{
    border-bottom: 1px solid #FFCC5F;
}

footer .serving-areas
{
    margin: auto;
}

footer .serving-areas h2
{
    color:#FFCC5F;
    font-size: 18px;
    font-weight: normal;
    padding:10px 10px;
}

footer .serving-areas p
{
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    padding: 10px 10px;
}

footer .serving-areas ul
{
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding:0;
}

footer .serving-areas ul li
{
    padding:10px 10px;
    color:#fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.5s ease;
}

footer .serving-areas ul li:hover
{
    color:#FFCC5F;
}

footer .serving-areas hr
{
    border-bottom: 1px solid #FFCC5F;
}

.copyright-area
{
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.copyright-area p
{
    color:#fff;
    padding:10px 10px;
}

.copyright-area ul
{
    list-style: none;
    padding:0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.copyright-area ul li
{
    padding:10px 10px;
    color:#fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.5s ease;
}

.copyright-area ul li:hover
{
    color:#FFCC5F;
}

/*Mobile View Search */

.search-box-mobile
{
    display:none;
    max-width: 420px;
    position: absolute;
    z-index: 1;
    right: 0;
    background: #fff;
}

.search-box-mobile form
{
    display: flex;
    justify-content: space-between;
}

.search-box-mobile form .form-group
{
    margin:0;
    padding-top:5px;
}

.search-box-mobile form .form-group .form-control
{
    border:none;
    width:auto;
    max-width:100%;
}

.search-box-mobile form .form-group .form-control:focus
{
    box-shadow:none;
    outline:none;
    border:none;
}

.search-box-mobile form .form-group .search-button
{
    background: #FFCC5F;
    color:#fff;
    border-radius:0;
    float:right;
    margin-top:-5px;
}

/* Mobile View Deal of the Day */

.deal-of-day-mobile
{
    padding:10px;
}
.deal-of-day-mobile h3
{
    text-align: center;
}

.deal-of-day-mobile img
{
    width: 100%;
}

/* Shop Register Form */

#RegForm
{
    left:0;
}

#LoginForm
{
    left:-400px;
}

#Indicator
{
    width:80px;
    border:none;
    background:#FFCC5F;
    height:3px;
    margin-top:8px;
    transform:translateX(180px);
    transition: transform 1s;
}

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

.form-button span
{
    padding:10px;
    cursor:pointer;
    font-weight:normal;
    color:#555;
    font-family:'Poppins', sans-serif;
}

.form-area form
{
    position:absolute;
    width:90%;
    transition: transform 1s;
}

/* User Register Form */

#userIndicator
{
    width:80px;
    border:none;
    background:#FFCC5F;
    height:3px;
    margin-top:8px;
    transform:translateX(180px);
    transition: transform 1s;
}

#userLoginForm
{
    left:-400px;
}
	
#userRegForm
{
    left:0;
}


.forgot_pass
{
    color:#707070;
    cursor:pointer;
    transition:color 0.5s ease;
}

.forgot_pass:hover
{
    color:#9f54e4;
}

.otp-message
{
    background:#FFCC5F;
    color:#202020;
    padding:10px;
}
/* Modal Styling - Shop Register */

.register .modal-dialog
{
    position: fixed;
	margin: auto;
    width: 100%;
    max-width: 405px;
    height: 100%;
    max-height: 320px;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}

.register .modal-dialog
{
    right: 0;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
	        transition: opacity 0.3s linear, right 0.3s ease-out;
}

.register .modal-dialog .modal-content
{
    height: 100%;
	overflow-y: auto;
	border-radius: 0;
	border: none;
}

.register .modal-dialog .modal-content .modal-body
{
    overflow:hidden;
}

/* Modal Styling - User Register */

.user-register .modal-dialog
{
    position: fixed;
	margin: auto;
    width: 100%;
    max-width: 400px;
	height: 100%;
	max-height:380px;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}

.user-register .modal-dialog
{
    right: 0;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
	        transition: opacity 0.3s linear, right 0.3s ease-out;
}

.user-register .modal-dialog .modal-content
{
    height: 100%;
	overflow-y: auto;
	border-radius: 0;
	border: none;
}

.user-register .modal-dialog .modal-content .modal-body
{
    overflow:hidden;
}

/* Checkout Page */

.checkout-top-bar
{
    background: #3f3f3f;
}

.checkout-top-bar .logo
{
    padding:15px 15px;
    font-size: 20px;
    font-weight: normal;
    color:#fff;
    float: left;
}

.checkout-top-bar .logo img
{
    width:90%;
}

.checkout-top-bar .logo span
{
    color: #FFCC5F;
}

.checkout-top-bar .main-menu ul
{
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    float: right;
    margin:0;
}

.checkout-top-bar .main-menu ul li
{
    font-size: 20px;
    padding:15px 15px;
    font-weight: normal;
    color:#fff;
}

.checkout-top-bar .main-menu ul li a
{
    text-decoration: none;
    color:#fff;
    transition: color 0.5s ease;
}

.checkout-top-bar .main-menu ul li a:hover
{
    color: #FFCC5F;
}
.checkout-top-bar .main-menu ul li a span
{
    font-size: 25px;
    font-weight: normal;
    padding-top: 5px;
}

.billing-area
{
    margin: auto;
    padding: 10px 10px;
}

.billing-area h2
{
    padding: 5px;
    font-size: 20px;
    font-family: monospace;
    border-bottom: 1px solid #FFCC5F;
}

.purchaseArea
{
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px 10px;
    background: #FFCC5F;
    border-radius:5px;
    height:fit-content;     
}

.purchaseArea h2
{
    padding: 10px;
    font-size: 20px;
    font-family: monospace;
}

.purchaseArea .form-control
{
    background: #FFCC5F;
    color: #202020;
    box-shadow: none;
    border: none;
    outline: none;
}

.finalAmount{
    padding: 10px;
    font-weight: normal;
}

.finalCost .form-control
{
    text-align: center;
}

/*Payment Reciept*/

.reciept-area
{
    background:#FFCC5F;
    padding:10px !important;
    margin-top:10px;
}

.reciept-area .check-mark
{
    text-align:center;
}

.reciept-area .check-mark span
{
    font-size:46px;
    color:#fff;
}

.reciept-area .thanks-purchased
{
    text-align:center;
}

.reciept-area .thanks-purchased p
{
    font-weight:normal;
    font-family:monospace;
    font-size:18px;
}

.reciept-area .order-details tbody
{
    background: #fff;
}

.reciept-area .menu-pay a
{
    text-decoration:none;
    color:#202020;
    font-size:18px;
    font-weight:normal;
    transition: color 0.5s ease;
}
.reciept-area .menu-pay a:hover
{
    color:#fff;
}

/* Chat Icon */

.chat
{
    position:fixed;
    bottom:0;
    right:10px;
    z-index:1;
    width:100%;
    max-width: 80px;
    cursor:pointer;
    transition: all .2s ease-in-out;
    display: none;
}

.chat:hover
{
    transform: scale(1.1);
}

.chat img{
    width:100%;
}

.chatbox
{
    background: #FFCC5F;
    max-width: 350px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding:10px;
    display: none;
}

.chatbox .chatbox-head
{
    box-shadow: 0 2px 0 0 #cca758 !important;
}

.chatbox-header span
{
    padding: 10px;
    font-size: 16px;
    color: #3F3F3F;
    font-weight: normal;
    float: left;
}

.chatbox-close span
{
    float: right;
    padding: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.chat-form
{
    padding: 10px;
}

.chat-form .form-group .form-control
{
    box-shadow: none;
}

.chat-form .form-group button
{
    float: right;
}

.thanks-message-div
{
    background: #ffcc5f;
    padding: 10px;
    text-align: center;
    transition: all 0.5s ease;
}

.thanks-message
{
    color: #202020;
    text-align: center;
    font-weight: normal;
    padding: 10px !important;
    transition: all 0.5s ease;
}

/* Index Service Area */

.live-products-fetch
{
    position: fixed;
    top:57px;
    right:0;
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 10px;
    color:#202020;
    z-index: 100;
    overflow-y: scroll;
    display: none;
}

.live-product-area .live-product-head
{
    box-shadow: 0 2px 0 0 #000 !important;
}

.live-product-heading
{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.live-product-heading span
{
    padding: 10px;
    font-size: 15px;
    color: #707070;
    font-weight: normal;
    float: left;
}

.live-product-heading .form-control
{
    box-shadow: none;
    outline: none;
    background: #FFCC5F;
    color: #3F3F3F;
    font-weight: normal;
    width: fit-content;
    font-size: 12px;
    margin-left:5px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.live-product-close span
{
    float: right;
    padding: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.live-product-close span:hover
{
    font-size: 30px;
    color: #202020;
}

.no-shop-error 
{
    text-align: center;
    padding-top: 5px;
}
.delivery-area, 
.look-area
{
    position: fixed;
    top:0;
    right:0;
    background: #3f3f3f;
    max-width: 550px;
    height: 100%;
    padding: 10px;
    color:#fff;
    z-index: 100;
    overflow-y: scroll;
    display: none;
}

.delivery-area .delivery-head,
.look-area .look-head
{
    box-shadow: 0 2px 0 0 #000 !important;
}

.delivery-heading span,
.look-area .look-heading span
{
    padding: 10px;
    font-size: 18px;
    color: #ffcc5f;
    font-weight: normal;
    float: left;
}

.delivery-close span,
.look-close span
{
    float: right;
    padding: 10px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.delivery-close span:hover,
.look-close span:hover
{
    font-size: 30px;
    color: #ffcc5f;
}

.delivery-area form
{
    padding: 10px !important;
}

.pickup-heading
{
    padding:10px;
    background: #FFCC5F;
    box-shadow:  0 0 2px 0 #202020;
    color:#000;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.5s ease;
}

.pickup-heading:hover
{
    background: #ddae48;
}

.pickup-heading span
{
    padding: 5px;
}

.pickup-form
{
    background: #fff;
    color: #000;
    padding: 5px !important;
}

.drop-heading
{
    padding:10px;
    background: #FFCC5F;
    box-shadow:  0 0 2px 0 #202020;
    color:#000;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.5s ease;
}

.drop-heading:hover
{
    background: #ddae48;
}

.drop-heading span
{
    padding: 5px;
}

.drop-form
{
    background: #fff;
    color: #000;
    padding: 5px !important;
    display: none;
}

.drop-form .buttton 
{
    justify-content: flex-end;
}

/* Serivce Form Index */

.look-area form
{
    padding: 10px !important;
}

.look-form-heading
{
    padding:10px;
    background: #FFCC5F;
    box-shadow:  0 0 2px 0 #202020;
    color:#000;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.5s ease;
}

.look-form-heading:hover
{
    background: #ddae48;
}

.look-form-heading span
{
    padding: 5px;
}

.service-booking-form
{
    background: #fff;
    color: #000;
    padding: 5px !important;
}

/* Single Page styling */

.notFound
{
    height:90%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    font-weight:normal;
    color:grey;
}

.rate-card
{
    height: fit-content;
    background: #FFCC5F;
    box-shadow:  0 0 2px 0 #202020;
    margin-bottom: 10px;
}

.booking-form-heading
{
    padding:10px !important;
    background: #ddae48;
    color:#000;
    font-weight: normal;
    cursor: pointer;
    transition: background 0.5s ease;
}

.booking-form-heading:hover
{
    background: #FFCC5F;
}

.booking-form
{
    padding: 5px !important;
}

.booking-form h3
{
    font-size: 15px;
    text-align: center;
    width: 100%;
    font-weight: normal;
    color: #202020;
}

.booking-form .form-group input[type=checkbox]
{
    margin-right: 10px;
    margin-left: 10px;
}

.booking-form .form-group input[name=totalPrice]
{
    text-align: end;
}

.service-price-user
{
    float:right;
    color:#707070;
    font-weight:normal;
    padding:2px;
}

.submit-shop-button .form-group
{
    margin-bottom: 0 !important;
}

.notice-area
{
    text-align: center;   
    font-size: 12px;
    font-weight: 600;
    color: #707070;
    background: #fff;
    padding: 5px !important;
}

.shop-heading-area
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px !important;
    border-bottom: 1px solid #FFCC5F;
}

.shop-heading-area h3
{
    font-family:monospace;
    margin:0;
}

.shop-heading-area .number
{
    font-family: monospace;
    padding-right: 15px;
    font-weight: normal;
}

.shop-heading-area span .material-icons
{
    font-size: 15px;
}

.shop-address-area
{
    padding: 5px 10px 0 10px !important;
}

.shop-address-area p .material-icons
{
    font-size: 15px;
}

.shop-address-area p a .location-marker
{
    font-size: 22px;
}

.shop-address-area p .pay-options
{
    font-family: monospace;
    font-weight: normal;
    font-size: 20px;
    padding-left: 10px;
}

.shop-instruction-area
{
    padding:0 10px 0 10px !important;
}

.shop-instruction-area p
{
    width: 95%;
    text-align: justify;
    color: #707070;
}

.shop-keypoints-area
{
    padding:0 10px 0 10px !important;
}

.shop-keypoints-area ul
{
    list-style: none;
}

.shop-keypoints-area ul li .material-icons
{
    font-size: 15px;
    color: #FFCC5F;
    padding-right: 10px;
    font-weight: normal;
}

.shop-product
{
    padding: 10px !important;
    margin-top:20px;
    border-top: 12px solid #707070;
}

.product-heading
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}

.product-heading h3
{
    font-family: monospace;
    font-size: 28px;
    font-weight: normal;
    color: #3F3F3F;
}

.product-heading .form-control
{
    box-shadow: none;
    outline: none;
    background: #FFCC5F;
    color: #3F3F3F;
    font-weight: normal;
}

.shop-product-container .product-container,
.live-product-area .product-container
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px !important;
}

.pagination-area
{
    margin:auto;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-area a
{
    color: #202020;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination-area a.active
{
    background-color: #FFCC5F;
    color: #3F3F3F;
    font-weight: normal;
    border-radius: 5px;
}

.pagination-area a:hover:not(.active)
{
    background-color:#3F3F3F;
    color: #fff;
    border-radius: 5px;
}

/* Review Section  */

.shop-rating-container
{
    padding: 10px !important;
    margin-top: 20px;
    border-top: 12px solid #707070;
}

.shop-rating-container .rating-header
{
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
}

.shop-rating-container .rating-header .average-rating,
.shop-rating-container .rating-header .progress-bar-section
{
    flex-basis: 30%;
    text-align: center;
}

.shop-rating-container .rating-header .average-rating ul
{
    list-style: none;
    display: inline-flex;
    margin: 0;
}


.shop-rating-container .rating-header .average-rating ul .active
{
    color: #FFCC5F;
}

.shop-rating-container .rating-header .average-rating ul .inactive
{
    color: #000;
}

.shop-rating-container .rating-header .progress-bar-section ul
{
    list-style: none;
}

.shop-rating-container .rating-header .progress-bar-section ul li
{
    display: flex;
    justify-content: space-between;
}

.shop-rating-container .rating-header .progress-bar-section ul li label
{
    font-weight: normal;
    font-size: 12px;
}

.shop-rating-container .rating-header .progress-bar-section ul li .material-icons
{
    color: #FFCC5F;
    font-size: 15px;
}

.shop-rating-container .rating-header .progress-bar-section ul li .progress
{
    width: 80%;
    height: 12px;
}

.shop-rating-container .rating-header .average-rating .rating-count
{
    color: #ffc107;
    font-size: 25px;
    font-weight: normal;
}

.shop-rating-container .rating-header .average-rating .total-reviews
{
    color: #707070;
    font-weight: normal;
}

.shop-rating-container .rating-header .button-area p
{
    color: #707070;  
    font-weight: normal;  
}

.shop-rating-container .rating-header .button-area button
{
    width: 100%;
    font-weight: normal;
}

.shop-rating-container .review-comment-section
{
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #dad3d3;
}

.shop-rating-container .review-comment-section .reviewer-image
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-rating-container .review-comment-section .reviewer-image span
{
    padding-left: 12px;
    padding-right: 12px;
    font-size: 25px;
    font-weight: normal;
    color: #fff;
    background: #9f54e4;
    border-radius: 50%;
}

.shop-rating-container .review-comment-section .reviewer-comment .active
{
    color: #FFCC5F;
}

.shop-rating-container .review-comment-section .reviewer-comment .inactive
{
    color: #000;
}

/* Review modal styling */

.user-review-stars
{
    text-align: center;
}

.user-review-stars span
{
    font-size: 35px;
    cursor: pointer;
}

.user-review-form button[type=submit]
{
    width:100%;
}

.signature
{
    color:#707070;
    font-size: 12px;
}

.see-all-section 
{
    text-align:center;
    padding:5px;
}

.see-all-section .all-reviews-button
{
    color: #707070;
    font-weight: normal;
    cursor: pointer;
    transition: 0.5s all ease;
}

.see-all-section .all-reviews-button:hover
{
    color:#FFCC5F;
}


/* Product Ratings Section */

.star-container
{
    list-style: none;
    margin:0;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.star-container .star-list
{
    padding: 10px 5px;
    cursor: pointer;
}

.star-container .star-list .active
{
    color: #FFCC5F;
}


.image-slider-container
{
    padding:10px;
}


.product-details-container
{
    padding-top: 10px;
}

.product-details-container h3
{
    font-size: 16px;
    color: #707070;
    font-family: Helvetica Neue;
}

.product-details-container h3 a
{
    text-decoration: none;
    font-weight: normal;
    font-size: 16px;
    color: #707070;
    font-family: Helvetica Neue;
}

.product-details-container h1
{
    font-size: 50px;
    line-height: 60px;
    margin: 25px 0;
}

.product-details-container h4
{
    margin: 20px 0;
    font-size: 22px;
    font-weight: normal;
}

.product-details-container select
{
    display: block;
    padding: 10px;
    margin-top: 20px;
    border: 1px solid #FFCC5F;
}

.color-attribute,
.color-attribute-cart
{
    background: #000;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0;
    box-shadow: none;
    margin-top: 20px;
    border:1px solid #707070;
    margin-left:10px;
    transition:0.5s all;
}

.color-attribute:hover
{
    width: 40px;
    height: 40px;
}


.color-attribute:focus
{
    outline: none;
}

.color-attribute-active
{
    outline: none;
    width: 40px;
    height: 40px;
}

.button-cart-container
{
    margin-top: 20px;
}

.button-cart-container input
{
    width: 50px;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;
    border: 1px solid #FFCC5F;
}

.button-cart-container button
{
    display: inline-block;
    background: #918345;
    color: #fff;
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
}

.button-cart-container button:hover
{
    background: #3F3F3F;
    color:#fff;
}

.button-cart-container h3
{
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
    color:#000;
}

.button-cart-container h3 .iconify
{
    color: #918345;
    margin-left: 10px;
    font-size: 22px;
}

.button-cart-container p
{
    font-weight: 600;
}


.related-product-container
{
    margin-top: 30px;
    padding:10px;
}

.related-product-container h3
{
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
}

/* Policy Page */

.side-menu-faqs
{
    padding: 10px;
    border-right: 1px solid #707070;
}

.side-menu-faqs ul
{
    list-style: none;
}

.side-menu-faqs ul li
{
    margin-bottom: 10px;
    border-bottom: 1px solid #707070;
    padding: 5px;
    color:#9f54e4;
    cursor:pointer;
    font-weight: normal;
    transition: 0.5s ease color;
}

.side-menu-faqs ul li:hover
{
    color: #FFCC5F;
}

.policy-container
{
    padding: 10px 10px;
    margin:auto;
}

.policy-container h2
{
    padding-bottom: 5px;
    font-size:22px;
    color: #707070;
    font-family: monospace;
    font-weight: normal;
}

.policy-container h2::after
{
    content: "";
    position: absolute;
    bottom: -10px;
    left:15px;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
}

.policy-container .faq-container
{
    font-size: 15px;
}

.policy-container .faq-container li
{
    margin-bottom: 2px;
}

.policy-container .sublist
{
    padding:10px;
}

.policy-container h5
{
    font-size: 15px;
    font-weight: normal;
}

.policy-container p
{
    font-size: 15px;
}

.top-arrow
{
    position: fixed;
    right: 2px;
    bottom: 2px;
    font-size: 32px;
    font-weight: normal;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    background-color: #003466;
    cursor: pointer;
    transition: 0.5s ease all;
    color: #fff;
    display: none;
}

.top-arrow:hover
{
    box-shadow: 0 2px 5px 0 #000;
}


.trackMenu
{
    list-style: none;
    position: absolute;
    top: 45px;
    background: #fff;
    color: #150101;
    z-index: 101;
    padding: 10px;
    text-align: center;
    box-shadow: 0 0 2px 0px #000;
    display: none;
}

.trackMenu li
{
    padding: 10px;
    cursor: pointer;
    transition: 0.5s all ease;
    display: flex;
    justify-content: center;
}

.trackMenu li:hover
{
    font-weight: 600;
}

.trackMenu input
{
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

.trackMenu input:focus
{
    box-shadow:none;
    outline:none;
}

.trackMenu .mobileTrackButton
{
    border-radius: 0;
    padding:0;
}


.search-loader
{
    position: absolute;
    z-index: 1000;
    width: 90%;
    height: 100%;
    top: 0;
    display: none;
}

.search-loader img
{
    left: 50%;
    position: absolute;
    top: 250px;
}

/* Mobile Responsive Style */

@media (min-width: 600px) 
{
    .slide-show .slide-show-container img
    {
        height: 500px;
    }
}

@media (min-width: 800px)
{
    .chat
    {
        max-width: 90px;
    }
}

/* @media (min-width: 992px) and (max-width:1024px)
{
    .live-result
    {
        top: 64px;
    }
} */

@media (max-width: 992px)
{
    #resizing_select 
    {
        max-width: 150px;
    }
}


@media(max-width:250px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:130px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 130px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 70px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 70px;
        }
    }
}

@media(max-width:280px) and (min-width:251px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:143px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 143px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 82px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 82px;
        }
    }
}

@media(max-width:370px) and (min-width:281px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:195px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 195px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 97px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 97px;
        }
    }
}

@media(max-width:415px) and (min-width:369px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:232px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 232px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 100px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 100px;
        }
    }
}


@media(max-width:480px) and (min-width:416px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:300px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 300px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 125px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 125px;
        }
    }
} 

@media(max-width:514px) and (min-width:481px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:322px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 322px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 150px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 150px;
        }
    }
}

@media(max-width:545px) and (min-width:515px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:332px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 332px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 150px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 150px;
        }
    }
}

@media(max-width:571px) and (min-width:546px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:352px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 352px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 150px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 150px;
        }
    }
}

@media(max-width:610px) and (min-width:572px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:375px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 375px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 180px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 180px;
        }
    }
}

@media(max-width:667px) and (min-width:611px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:405px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 405px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 183px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 183px;
        }
    }
}

@media(max-width:670px) and (min-width:668px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:382px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 382px;
        }
    }
}

@media(max-width:731px) and (min-width:671px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:440px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 440px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 205px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 205px;
        }
    }
}
@media(max-width:740px) and (min-width:732px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:470px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 470px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 210px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 210px;
        }
    }
}

@media(max-width:770px) and (min-width:741px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:490px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 490px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 240px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 240px;
        }
    }
}

@media(max-width:810px) and (min-width:771px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:515px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 515px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 230px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 230px;
        }
    }
}

@media(max-width:860px) and (min-width:811px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:525px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 525px;
        }
    }

    .progress-bar-container .step .step-bullet p.dispatch-status::after
    {
        width: 250px;
    }

    @keyframes dispatchBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 250px;
        }
    }
}

@media(max-width:960px) and (min-width:861px)
{
    .order-details-container
    {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .progress-bar-container .step .step-bullet p.delivery-status::after
    {
        width:622px;
    }

    @keyframes deliveryBox 
    {
        from
        {
            width: 0;
        }
        to
        {
            width: 622px;
        }
    }
}

@media(max-width:1024px)
{
    .search-results
    {
        max-width: 100%;
    }
}

@media only screen and (max-width: 600px)
{
    .live-products-fetch
    {
        top:38px;   
    }
}

@media only screen and (min-width: 600px)
{
    .live-products-fetch
    {
        top:50px;   
    }
}


@media only screen and (min-width: 768px)
{
    .live-products-fetch
    {
        top:60px;   
    }
}

/* Styling Scroll Bar */

::-webkit-scrollbar 
{
    width: 5px;
    background:#FFCC5F;
}

::-webkit-scrollbar-track 
{
    box-shadow: inset 0 0 6px #FFCC5F;
    -webkit-box-shadow: inset 0 0 6px #FFCC5F; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb 
{
    border-radius: 15px;
    box-shadow: inset 0 0 6px #3F3F3F;
    -webkit-box-shadow: inset 0 0 6px #3F3F3F; 
    background:#3f3f3f
}