@font-face{
    font-family: "regfont";
    src: url('../fonts/Roboto-Regular.ttf');
}
@font-face{
    font-family: "medfont";
    src: url('../fonts/Roboto-Medium.ttf');
}
@font-face{
    font-family: "boldfont";
    src: url('../fonts/Roboto-Bold.ttf');
}
@font-face{
    font-family: "arfont";
    src: url('../fonts/Cairo-Medium.ttf');
}
:root{
    --dark-color:#077359;
    --dark-color-rgb:11,146,135;
    --secondary-color:#E30613;
    --secondary-color-rgb:227,6,19;
    --section-bg:#F8F8F8;
    --text-color:#828282;
    --dark-blue:#080F3E;
    --med-font:medfont;
    --reg-font:regfont;
    --bold-font:boldfont;
    --ar-font:arfont;
}
.red-txt{color: var(--secondary-color) !important;}
.dark-txt{color: var(--dark-color) !important;}
.bold{
    font-family: var(--bold-font);
}
body{
    font-family:var(--reg-font);
    background: var(--section-bg);
}
.main-btn{
    background: var(--dark-color);
    border-radius: 7px;
    color: white;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.main-btn.btn-danger{
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
.main-btn.btn-outline{
    color: var(--dark-color);
    border-color: var(--dark-color);
    background: none;
}
.main-btn:hover{ color: white;}
.main-btn::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(0,0,0,.2);
    transition: 0.3s all ease-in-out;
    z-index: -1;
}
.main-btn:hover::after{
    content: '';
    width: 100%;
}
.btn-light{ background: white;}
.form-check-input:checked{
    background-color: var(--dark-color);
    border-color: var(--dark-color);
}
a{ text-decoration: none;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.iti input, .iti input[type=text], .iti input[type=tel]{
    direction: ltr;
}
/* Start navbar */
.top-bar{ background: var(--section-bg); height: 40px;}
.top-bar li a{ 
    color: var(--dark-color); 
    font-size: .9rem;
    font-family: var(--med-font);
}
.top-bar li:hover a{ color: var(--secondary-color);}
.top-bar .btn-sm{
    background: var(--secondary-color);
    color: white;
    height: 25px;
    line-height: 18px;
    padding: 0.2rem 0.7rem !important;
    border-radius: 7px;
}
.top-bar .btn-sm:hover{ color: white;}
.lang-btn{ font-family: var(--ar-font) !important; }
.cart-icon:hover{ color: #000 !important;}
.cart-icon svg{ font-size: 1.1rem;}
.cart-icon .badge{
    background: var(--secondary-color);
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -10px;
    font-size: .6rem;
}
.navbar{
    background: white;
}
.navbar li{ margin: 0 .7rem;}
.navbar li a{ 
    color: var(--dark-color); 
    font-size: .9rem;
    font-family: var(--med-font);
}
.navbar li .active,.navbar li:hover a{ color: var(--secondary-color);}
.search-form{
    border-radius: 7px;
    border: 1px solid #ddd;
    overflow: hidden;
    width: fit-content;
}
.search-form .form-control{
    border: none;
    border-radius: 0;
    font-size: .9rem;
    background: #fff;
    width: 250px;
}
.search-form .form-control:focus{ box-shadow: none;}
.search-form .form-control::placeholder { color:var(--text-color);  }
.search-form .btn{
    background: var(--secondary-color);
    border-radius: 7px;
    color: white;
    width: 42px;
}
.navbar-toggler svg{ color: var(--dark-color);}
.navbar-toggler:focus{ box-shadow: none;}
/* End navbar */
/* Start login form */
.main-title{
    color: var(--dark-color);
    font-size: 1.3rem;
    font-family: var(--med-font);
}
.description{
    color: var(--secondary-color);
    
}
.iti{width: 100%;}
.login{ 
    min-height: calc(100vh - 108px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-form{
    width: 400px;
    max-width: 90%;
    margin: 0 auto;
}
.site-form label,.account-form label{
    margin-bottom: .2rem;
    color:var(--text-color);
    font-size: .9rem;
}
.site-form .form-control,.account-form .form-control{ 
    font-size: .9rem;
    min-height: 38px;
}
.site-form .input-group-text,.account-form .input-group-text{ background: #EAEAEB; }
.site-form .input-group-text svg,.account-form .input-group-text svg{ color: var(--text-color);}
.verification-code .form-control{
    width: 45px;
    height: 40px;
    padding: 0.5rem;
    margin: 0 0.3rem;
    border: none;
    text-align: center;
    background: #EAEAEB;
}
.site-form .main-btn,.account-form .main-btn,
.complaint-list .main-btn,.submit-review .main-btn,
.successful-msg .main-btn{ width: 260px; max-width: 100%;}
.complaint-details{ display: none;}
.complaint-txt{ border-radius: 10px;}
.complaint-txt p{ font-size: .85rem;}
.write-text{ border-radius: 10px;}
.write-text .form-control{ font-size: .95rem;}
.send-btn{
    padding: 0;
    width: 38px;
    min-width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    background: var(--dark-color);
}
.verification-code svg{ color: var(--dark-color); font-size: 1.1rem;}
.terms,.have-account a{ color: var(--dark-color); transition: .3s all ease-in-out;}
.terms:hover,.have-account a:hover{ color:var(--dark-blue);}
.have-account{ font-size: .9rem;}
.successful svg{ color: var(--secondary-color);}
.resend-btn{font-size: .9rem;color: var(--secondary-color);}
.resend-btn:hover{color:var(--dark-color)}
/* End login form */
/* Start footer */
.footer{ background: var(--dark-color); font-size: .9rem;}
.info img{ width: 100px;}
.links a{ color: white; font-size: .9rem;}
.footer .btn-light{
    background: white;
    color: var(--dark-color);
}
.footer h5{
    font-size: .9rem;
    color: white;
}
.footer .payment_methods{
    margin-top: 1rem !important;
    background-color: white;
    text-align: center;
}
.footer .payment_methods li{
    width: calc((100% / 3) - 0.7rem);
    margin-bottom: 0.5rem;
}
.footer .payment_methods img {
    width: 100%;
}    
.app-store a{ display: block;}
.app-store img{ width:95%; }
/* End footer */
/* Start bottom bar */
.copy-right{background: var(--dark-blue);}
.social-links a{
    color: white;
    font-size: 1.2rem !important;
    padding: .45rem;
    transition: .3s all ease-in-out;
}
.social-links a:hover{ color: var(--secondary-color);}
.copy-right p{ font-size: .8rem;}
/* End bottom bar */
/* Start top banner */
/* .top-slider .carousel-item{ height: calc(100vh - 257px);} */
.top-slider .carousel-item .container{ height: 100%;}
.top-slider .carousel-item img{ object-fit: cover;width: 100%;}
.top-slider .carousel-caption{
    position: static;
    text-align: start;
    height: 100%;
    align-items: center;
    /* top: 50%;
    bottom: auto;
    right: auto;
    left: 100px;
    transform: translateY(-50%);
    text-align: start;
    width: 400px; */
}
.top-slider .carousel-caption>div{
    width: 400px;
    max-width: 90%;
}
.top-slider .carousel-caption img{
    width: 400px;
    object-fit: contain;
}
.top-slider .carousel-caption h1{
    color: var(--secondary-color);
    font-size: 1.3rem;
}
.top-slider .carousel-caption p{
    margin: 0;
    color: var(--dark-color);
}
.carousel-indicators [data-bs-target]{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #999;
    background: white;
    opacity: 1;
}
.carousel-indicators .active{
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}
/* End top banner */
/* Start how can we serve */
.help-you{ background: var(--dark-color);}
.help-you .btns .btn{ 
    width: 180px; 
    font-size: .9rem; 
    font-family: var(--med-font);
}
.help-you .btns .btn:first-child{ color: var(--secondary-color);}
.help-you .btns .btn:last-child{ color: var(--dark-color);}
/* End how can we serve */
/* Start categories slider */
.categories-slider .box img,.categories-list img{ 
    height: 120px;
    width: 100%; 
    object-fit: cover;
    border-radius: 7px;
    margin-bottom: .5rem;
}
.categories-slider .box h5,.categories-list h5{
    font-size: .9rem;
    font-family: var(--med-font);
    color: var(--dark-color);
}
.categories-slider a{display: inline-block;width: 100%;}
/* End categories slider*/
/* Start pharmacy */
.pharmacy,.categories,.stores{ background: white;}
.pharmacy .box{
    height: 88px;
    border-radius: 7px;
    background: var(--section-bg);
}
.pharmacy .box img{ width: 50px;}
.pharmacy .box p{ color: var(--dark-color);}
.pharmacy .pharmacy-bg{
    background: var(--section-bg);
    height: 200px;
    position: relative;
    overflow: hidden;
}
.pharmacy .pharmacy-bg>img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}
.pharmacy .pharmacy-bg .small-img{ 
    z-index: 1;
    background: rgba(255,255,255, .65);
    padding: 0.5rem;
    border-radius: 5px;
}
.small-img img{width: 70px;}
.pharmacy .pharmacy-bg p{ font-family: var(--ar-font); font-weight: bold;}
.link{ color: var(--secondary-color); font-size: .9rem; z-index: 100;}
/* End pharmacy */
/* Start sec slider */
/* .sec-slider .carousel-item{ height: 300px;} */
/* .sec-slider .carousel-item img{ height: 300px; object-fit: cover;} */
.sec-slider .carousel-caption{
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%,-50%);
    font-family: var(--bold-font);
    width: 500px;
    max-width: 90%;
}
.sec-slider .carousel-caption h5{ font-size: 1.3rem; margin: 0;}
.sec-slider .carousel-indicators .active{ 
    background: var(--dark-color);
    border-color: var(--dark-color);
}
.sec-slider .container img{ border-radius: 7px;}
.sec-slider .container .carousel-caption{
    background: rgba(0,0,0,.2);
}
/* End sec slider */
/* Start top stores */
.top-stores .box{
    background: var(--section-bg);
    border-radius: 7px;
    border: 1px solid #ddd;
    padding: 1rem;
    height: 160px;
}
.top-stores .box>img{
    width: 140px;
    height: 90px;
    object-fit: contain;
    display: initial;
}
.top-stores .category{
    position: absolute;
    bottom: .8rem;
    left: .8rem;
    background:rgba(var(--dark-color-rgb), .25) ;
    padding: .3rem .7rem;
    border-radius: 7px;
    font-size: .8rem;
}
.top-stores span img{ width: 17px !important;}
.owl-dots{ margin-top: 1rem; text-align: center;}
.owl-carousel button.owl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #999;
    background: white;
    margin: 0 3px;
    box-sizing: content-box;
}
.owl-carousel button.owl-dot.active{
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}
/* End top stores */
/* Start shops page */
.shops .box{
    background: white;
    border-radius: 7px;
    border: 1px solid #ddd;
    font-size: .9rem;
    position: relative;
}
.shops .box img{
    width: 85px;
    height: 70px;
    object-fit: contain;
    object-position: center;
}
.shops .content{ width: calc(100% - 100px);}
.shops .box h5{
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shops .box p{ color: var(--secondary-color);}
.shops .status{
    position: absolute;
    top: .7rem;
    right: 1rem;
    color: #3AB148;
}
.shops .status.closed{ color: var(--secondary-color);}
.shops .status svg,.from-to .status svg{
    font-size: .7rem;
    position: relative;
    top: -1px;
}
/* End shops page */
/* Start shop-details */
.shop-banner{
    position: relative;
    /* background: url(../imgs/no-cover.png)no-repeat;
    background-size: cover; */
    border: .5px solid rgb(145, 144, 144);
}
.shop-banner>img{
    width: 100%;
}
.shop-banner-carousel.owl-carousel .owl-item img{
    width: 100%;
}
.shop-banner,.shop-banner-carousel.owl-carousel .owl-item img,.shop-banner-carousel.owl-carousel .owl-stage,.owl-carousel .owl-stage-outer{
    border-radius: 7px;
}
.shop-logo{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    bottom: 0;
    width: 90px;
    height: 90px;
    z-index: 100;
    background: white;
}
.shop-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shop-logo .status{
    position: absolute;
    bottom: .4rem;
    right: .5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3AB148;
}
.shop-logo .status.closed{ background: var(--secondary-color);}
.shop-name{ margin-top: 4rem;}
.shop-name .main-btn{
    width: 445px;
    max-width: 100%;
}
.shop-info,.complaint-info{
    width: fit-content; 
    max-width: 100%;
    margin: 0 auto;
    color: var(--dark-color);
}
.shop-info a{ color: var(--secondary-color);}
.shop-name .search-form{
    width: 445px;
    max-width: 100%;
    margin: 0 auto;
}
.shop-name .search-form .form-control{
    width: 100%;
}
.view-cart p{color:#fff}
.view-cart p>span{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    background: #fff;
    color: var(--secondary-color);
}
.view-cart .btn{
    font-size: .85rem;
    color: var(--secondary-color);
    min-width: 130px;
}
/* End shop-details */
/* Start best selling */
.best-selling .box,.main-list .box{
    background: white;
    border-radius: 7px;
    border: 1px solid #ddd;
    font-size: .85rem;
}
.best-selling img,.main-list img{
    width: 100%;
    height: 90px;
    object-fit: contain;
    border-radius: 7px;
}
.best-selling .box h5,.main-list .box h5{
    color: var(--dark-color);
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.best-selling p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.price,.order-id{ color: var(--secondary-color); min-width: fit-content;}
.main-tabs.nav-pills{
    white-space: nowrap;
    overflow-x: scroll;
    width: 100%;
    display: block;padding-bottom: .5rem;
}
.main-tabs.nav-pills .nav-item{display: inline-block;}
.main-tabs.nav-pills .nav-link{
    background: white;
    border-radius: 7px;
    border: 1px solid #ddd;
    font-size: .9rem;
    color:black;
    margin: 0 1px;
    padding: 0.4rem .8rem;
    min-width: 70px;
}
.main-tabs.nav-pills .nav-link.active{
    background: var(--dark-color);
    color: white;
    border-color: var(--dark-color);
}
.main-tabs.nav-pills::-webkit-scrollbar {height: 5px;}
.main-tabs.nav-pills::-webkit-scrollbar-track { background: var(--section-bg);}
.main-tabs.nav-pills::-webkit-scrollbar-thumb { background: #ddd;}
.main-tabs.nav-pills::-webkit-scrollbar-thumb:hover {background: #ccc;}
/* End best selling */
/* Start main list */
.main-list .box{ overflow: hidden;}
.main-list img{ 
    height: 160px; 
    margin-bottom: .5rem; 
    transition: .3s all ease-in-out;
}
.main-list img:hover{ transform: scale(1.1);}
.main-list h5 a{ color: var(--dark-color);}
.brand img{ 
    width: 30px; 
    height: 30px; 
    object-fit: contain;
}
/* End main list */
/* Start details slider */
.details.box,.cart .box,.track-order .box{
    border-radius: 7px;
    background: white;
    border: 1px solid #ddd;
    font-size: .95rem;
}
.details h3{ font-size: 1.15rem;}
.details h5{ 
    font-size: 1rem; 
    color: var(--dark-color);
    font-family: var(--med-font);
}
.details .rate{ color: var(--secondary-color);}
.color span{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin-right: .7rem;
    cursor: pointer;
}
.color span:nth-child(1){
    background: pink;
}
.color span:nth-child(2){
    background: #088669;
}
.color span:nth-child(3){
    background: #ddd;
}
.color span:nth-child(4){
    background: #000;
}
.size li{
    padding:.4rem;
    border: 1px solid #ddd;
    text-align: center;
    min-width: 50px;
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: .5rem;
}
.size .selected-item,.color .selected-item{ 
    border: 2px solid var(--dark-color);
    box-shadow: -1px 2px 3px rgba(0, 0, 0, .3);
}
.add-remove{
    border-color: var(--dark-color) !important;
    border-radius: 5px;
    overflow: hidden;
}
.add-remove span {
    line-height: 29px;
    width: 33px;
    height: 33px;
    line-height: 33px;
    background: #ddd;
}
.add-remove input {
    width: 50px;
    height: 33px;
    color: var(--dark-color);
    font-family: var(--bold-font);
    text-align: center;
    padding: .2rem;
}
.add-remove input:focus{ box-shadow: none;}
.details .carousel-item,.details .carousel-item img{ 
    height: 390px;
    object-fit: contain;
    border-radius: 7px;
}
.details .carousel-indicators{
    position: static;
    width: 100%;
    margin: .5rem 0 0 0;
}
.details .carousel-indicators [data-bs-target]{
    text-indent: initial;
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    border-radius: 7px;
    overflow: hidden;
    background: none;
}
.details .carousel-indicators [data-bs-target] img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reviews h5{ color: var(--dark-blue); font-size: 1.2rem;}
.rating{ color: var(--secondary-color);}
.rating .rounded-circle{
    min-width: 64px;
}
.reviews,.rating p{ font-size: .85rem; color: var(--dark-blue);}
.reviews .progress {
    height: 0.3rem;
    margin-bottom: 0.7rem;
}
.reviews .progress-bar{ background: var(--dark-blue);}
.two-tabs{ font-size: .95rem;}
.two-tabs.col-md-8 .nav-tabs .nav-item{width: 33%;}
.two-tabs .nav-tabs .nav-link{ font-size: .95rem; color:#ccc;}
.two-tabs .nav-tabs .nav-link:hover{ border-color: transparent;}
.two-tabs .nav-tabs .nav-link.active{ 
    background: none; 
    border: none;
    color: var(--secondary-color);
    border-color: transparent;
    border-bottom: 1px solid var(--secondary-color);
}
.comment-list{ 
    font-size: .95rem;
    display: inline-block;
    width: 100%;
}
.comments:last-of-type{ border-bottom: none !important;}
.comments img{
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.comment-by p{ color: var(--dark-color); font-family: var(--med-font);}
.view-all{ color: var(--secondary-color); font-size: .9rem;}
.write-comment .form-control{ font-size: .9rem;}
.write-comment .main-btn{
    width: 200px;
    background: var(--secondary-color);
}
/* End details slider */
/* Start cart */
.cart .main-title{ color: var(--secondary-color);}
.cart h5,.summary h5{ 
    font-size: 1rem; 
    font-family: var(--med-font);
    color: var(--dark-color);
}
.cart-items{ font-size: .95rem;}
.cart-items .border-bottom:last-of-type{ border: none !important;}
.cart-items img{
    width: 100px;
    height: 100px;
    border-radius: 7px;
    object-fit: cover;
}
.cart-items h6,.summary h6{ 
    color: var(--dark-color); 
    font-family:var(--med-font);
}
.cart-items select{ 
    width: 70px; 
    min-width: 70px;
    padding: .4rem;
}
.item-qty span{
    line-height: 29px;
    width: 33px;
    min-width: 33px;
    height: 33px;
    font-size: .8rem;
    border: 1px solid #ddd;
    display: inline-block;
    border-radius: 5px;
    color: var(--dark-color);
    cursor: pointer;
}
.item-qty input {
    width: 60px;
    height: 33px;
    color: var(--secondary-color);
    font-family: var(--bold-font);
    font-size: 1.2rem;
    text-align: center;
    padding: 0 .5rem;
}
.item-qty input:focus{outline: 0;box-shadow: none;}
.empty-img{
    width: 140px;
}
.delete-item{
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: none !important;
    padding: .5rem .2rem;
}
.summary,.location-form{
    background: var(--section-bg);
    border: 1px solid #ddd;
    border-radius: 7px;
    height: 100%;
}
.summary .price{ color: var(--secondary-color);}
/* End cart */
/* Start checkout */
.select-one .form-check-label{
    color:rgba(0,0,0,.5);
    min-width: 130px;
}
.summary .items p{
    margin-bottom: .2rem;
    opacity: .5;
    font-size: .85rem;
}
.add-coupon{
    background: white;
    border-radius: 7px;
}
.add-coupon a{ color: var(--secondary-color); font-family: var(--med-font);}
.coupon-form .main-btn{font-family: var(--med-font);font-size: .95rem;}
.coupon-form .form-control{
    font-size: .95rem;
    border-radius: 7px 0 0 7px;
}
.checkout-data .upload-btn label{ background: var(--section-bg);}
.main-form label{ color: var(--dark-color); font-family: var(--med-font);}
.main-form .form-control,.main-form .form-select{
    border: none;
    background-color: var(--section-bg);
    font-size: .95rem;
    border-radius: 7px;
    padding: .7rem;
}
.from-to{ position:relative; background: white;}
.from-to div{ z-index: 1; position: relative;}
.from-to::before{
    content: '';
    position: absolute;
    left: 7px;
    top: 15px;
    width: 1px;
    height: calc(100% - 49px);
    background: #ddd;
    z-index: 0;
}
.from-to.p-2{border-radius: 7px;}
.from-to.p-2::before{left: 15px;}
.from-to.p-2 .form-select{ font-size: .85rem;}
.from-to .status{
    color: #3AB148;
    font-size: .95rem;
}
.status svg{font-size: .75rem;}
.status.new{
    color: var(--dark-color);
}
.status.picked{
    color: var(--secondary-color);
}
.status.inprogress{
    color: #3ab1b1;
}
.from-to .address svg{
    color: var(--secondary-color);
    font-size: 1.2rem;
}
.msg{
    background: var(--dark-color);
    border-radius: 7px;
    color: white;
    font-size: .8rem;
}
.msg span{
    width: 30px;
    min-width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border: 1px solid white;
}
/* End checkout */
/* Start select location */
.map,.map iframe{
    width: 100%;
    height: 450px;
    border-radius: 7px;
}
.location-form .form-control,.location-form .form-select{
    border-radius: 7px;
    font-size: .95rem;
    color: var(--text-color);
}
.location-form .form-check-label{ 
    color: var(--secondary-color);
    font-size: .85rem;
}
.location-form .form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
/* End select location */
/* Start shop unregister */
.shop-unregister .order-form .form-control{
    font-size: .95rem;
    border: none;
}
.shop-unregister h5{ font-size: 1rem;}
.upload-btn{
    position: relative;
    overflow: hidden;
    display: inline-block;
}  
.upload-btn label {
    background-color: white;
    border-radius: 7px;
    height: 120px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: .95rem;
    text-align: center;
}
.upload-btn input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;   
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.shop-unregister .main-btn{
    width: 300px;
    max-width: 100%;
}
.img-uploaded{
    border-radius: 7px;
    height: 120px;
    width: 150px;
    margin-right:.5rem;
    margin-bottom:1rem;
    float: left;
    position: relative;
    display: inline-block;
}
.img-uploaded img{ 
    width: 100%; 
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}
.img-uploaded .remove{
    position: absolute;
    top: -10px;
    right: 10px;
    width: 23px;
    height: 23px;
    line-height: 25px;
    border-radius: 50%;
    color: white;
    background:var(--text-color);
    cursor: pointer;
    text-align: center;
}
.branches-list>div:last-child{margin-bottom: 0 !important;}
.branches-list .border-bottom{width: 100%;}
.branches-list>div:last-child .border-bottom{
    border-bottom: none !important;
}
.branches-list h5{
    color: var(--dark-color);
    font-family: var(--med-font);
    font-size: .9rem;
}
.branches-list svg{color: var(--dark-color);}
.branches-list p{font-size: .9rem;}
.branches-list .main-btn{
    min-width: 100px;
    width: 100px;
}
/* End shop unregister */
/* Start track order */
.track-order h4{ font-size: 1rem; font-family: var(--med-font);}
.track-order .main-btn.btn-sm{ 
    background: var(--secondary-color);
    font-family: var(--med-font);
    font-size: .8rem;
}
.track-order .rating{
    color: var(--dark-color);
    font-size: .9rem;
}
.track-order .price{ font-size: .95rem;}
.driver-info,.pay-method,.driver-name{ display: flex;}
.white-box{ 
    border: 1px solid var(--secondary-color) !important;
    border-radius: 7px;
    background: white;
}
.driver-info img,.driver-name img,.drivers-slider img{
    width: 60px !important;
    height: 60px;
    object-fit: cover;
    border-radius: 7px;
}
.track-order h5{
    font-family: var(--med-font);
    font-size: .9rem;
    color: var(--dark-color);
}
.driver-info p,.driver-info a{ 
    color: var(--secondary-color); 
    font-size: .85rem;
}
.drivers-slider.owl-carousel.owl-loaded { display: none;}
.drivers-slider .box{ margin: 1px;}
.drivers-slider h5{
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drivers-slider .main-btn.btn-sm{ background: var(--dark-color);}
.drivers-slider .row .main-btn{ font-size: .85rem; padding: .5rem .2rem;}
.drivers-slider.owl-carousel .owl-nav button.owl-prev{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -.7rem;
}
.drivers-slider.owl-carousel .owl-nav button.owl-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -.7rem;
}
.drivers-slider.owl-carousel .owl-nav button span{font-size: 2rem;}
.pay-method img{ width: 30px;}
.pay-now p{ color: var(--secondary-color); font-size: .95rem;}
.pay-method label{ font-size: .9rem;}
.accept-driver{ display: none;}
/* End track orde */
/* Start viewRating modal */
#viewRating .modal-header .rating{ 
    background: var(--section-bg);
    border-radius: 10px 10px 0 ;
}
#viewRating .comment-list{ font-size: .9rem;}
.modal-header .btn-close{
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    font-size: .8rem;
}
.modal-header .fa-star{ color: var(--dark-color);}
.modal-header .btn-close:focus{ box-shadow: none;}
.modal-body::-webkit-scrollbar {width: 7px;}
.modal-body::-webkit-scrollbar-track { background: var(--section-bg);}
.modal-body::-webkit-scrollbar-thumb { background: #ddd;}
.modal-body::-webkit-scrollbar-thumb:hover {background: #ccc;}
/* Start rating modal */
.rate-input{ display: inline-block;}
.rate-input input{ display: none;}
.rate-input label{float: right;margin: 0 .1rem; }
.rate-input label svg{
    font-size: 1.3rem;
    color:#ddd;
}
.rate-input input:not(:checked) ~ label svg:hover,
.rate-input input:not(:checked) ~ label:hover ~ label svg{
    color: var(--secondary-color);
}
.rate-input input:checked ~ label svg{ color: var(--secondary-color);}
.rate-modal h5{
    font-size: 1rem;
    font-family: var(--med-font);
    color: var(--dark-color);
}
.rate-modal .form-control{
    font-size: .85rem;
    border-radius: 10px;
    border-color: #eee;
}
/* End rating modal */
/* cancel modal  */
.cancel_Order .modal-dialog {
    max-width: 60%; }
.cancel_Order .modal-dialog.modal-sm {
    max-width: 45%; }
.cancel_Order .modal-dialog .close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    font-size: 1.3rem;
    height: 25px;
    line-height: 25px;
    color: #ccc; }
    .cancel_Order .modal-content {
        border-radius: 0.5rem;
    }
    .cancel_Order .modal-dialog .close-modal:focus {
    outline: none !important;
    box-shadow: none; }
    .cancel_Order h6{
        font-family: var(--med-font);
    color: var(--dark-color);
    }
.closed-modal img {
  width: 100px;
  object-fit: contain;
  margin-bottom: 20px; }
.closed-modal p {
  color: #888888;
  font-size: 0.85rem; }
.cancel-modal img {
  width: 80px; }

.cancel-modal .cancel-reasons {
  width: 350px;
  max-width: 100%;
  margin: 0 auto; }
  .cancel-modal .cancel-reasons label,
  .cancel-modal .cancel-reasons .form-control {
    font-size: 0.85rem;
    color: #18181d; }
/* Start my orders */
.my-orders{ background: white; border-radius: 7px;}
.order-item:last-child .order-info{ border: none !important;}
.order-info{ position: relative;}
.order-info::before{
    content: "";
    position: absolute;
    left: -10px;
    top: .9rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--dark-color);
    z-index: 1;
}
.order-info::after{
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 1px;
    height: 100%;
    border-radius: 50%;
    background: var(--dark-color);
    z-index: 0;
}
.order-item:last-child .order-info::after{ display: none;}
.orders-list h5{ font-size: 1rem; color: var(--dark-color);}
.orders-list p>svg{ color: var(--dark-color);}
.order-status{ 
    border-radius: 7px; 
    color: var(--dark-color);
    font-size: .85rem;
    white-space: nowrap;
    min-width: 107px;
    display: inline-block;
    text-align: center;
}
/* End my orders */
/* Start order details */
.order-details{ background: white; border-radius: 7px;}
.chat .box,.contact-us .col-md-4 .box{
    background: var(--section-bg);
    border-radius: 7px;
}
.contact-us{width: 700px;max-width: 100%;}
.profile-img{
    width: 80px;
    height: 80px;
    overflow: hidden;
    display: block;
    margin: 1rem auto;
}
.profile-img img,.chat-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat .rating svg{ color: var(--secondary-color);}
.chat-img{
    width:50px;
    min-width: 50px;
    height: 50px;
    overflow: hidden;
}
.chat-left .chat-img{
    border: 1px solid #ddd;
    object-fit: contain;
    padding: .6rem;
}
.chat-left .chat-content{ border-radius: 10px 10px 10px 0;}
.chat-right .chat-content{ 
    border-radius: 10px 10px 0 10px;
    background:rgba(var(--dark-color-rgb), .05) ;
}
.chat-content video {
    max-height: 220px;
    max-width: 100%;
}
.chat .date{ 
    font-size: .75rem;
    display: inline-block;
    margin-top: .2rem;
}
.chat-content h5{
    font-size: 1rem;
    color: var(--secondary-color);
    font-family: var(--bold-font);
}
.chat-content p{ font-size: .9rem; margin-bottom: 0;}
.order-imgs span,.order-imgs .gallery-img{
    display: inline-block;
    margin-right: .5rem;
    margin-top: .5rem;
}
.order-imgs .gallery-img{cursor: pointer;}
.order-imgs img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.order-total{ width: 270px;max-width: 100%;}
.order-total span{ color: var(--dark-color);}
.note{
    background: var(--dark-color);
    border-radius: 7px;
    font-size: .9rem;
}
.addcart-modal .form-control{ border-radius: 25px;}
.addcart-modal .btn:focus{box-shadow: none;}
.more-options,.more-options:hover{ color: var(--dark-color);}
.options-list{ 
    color: var(--dark-color); 
    display: none;
    min-width: 85px;
}
.options-list .btn{ 
    cursor: pointer;
    width: 30px; 
    height: 30px;
    text-align: center;
    display: inline-block;
    color: var(--dark-color);
    font-size: 1.2rem;
    padding: 0;
}
.options-list .btn:hover{ color: var(--dark-blue);}
.addcart-modal .modal-dialog {
    position: fixed;
    width: 430px;
    max-width: 95%;
    height: 100vh;
    top: 0;
    right: 0;
    margin: 0;
    transform: translate3d(100%, 0, 0) !important;
    transition-duration: .6s !important;
}
.addcart-modal.modal.show .modal-dialog{
    -webkit-transform: translate3d(0%, 0, 0) !important;
    -ms-transform: translate3d(0%, 0, 0) !important;
    -o-transform: translate3d(0%, 0, 0) !important;
    transform: translate3d(0%, 0, 0) !important;
}
.addcart-modal .modal-content {
    min-height: 100%;
    border-radius: 0;
    background: var(--section-bg);
    border: none;
}
.addcart-modal .modal-header{
    background: var(--main-color);
    border-radius: 0;
    border: none;
    padding: .8rem;
}
.addcart-modal .modal-header img{
    width: 55px;
    height: 55px;
    border-radius: 5px;
    object-fit: cover;
}
.addcart-modal .modal-header h5{
    font-size: .95rem;
    font-family: var(--med-font);
    color: var(--dark-color);
}
.addcart-modal .modal-header p{font-size: .85rem;}
.addcart-modal .modal-body {
    height: calc(100vh - 175px);
    overflow-y: scroll;
    padding: .8rem;
}
.addcart-modal .modal-body h5{
    font-size: 1rem;
    color: var(--dark-color);
}
.addcart-modal .main-list img {
    height: 94px;
}
.addcart-modal .brand img{height: 30px;}
.cancel-reason{
    background: var(--section-bg);
    border: 1px solid #ddd;
    border-radius: 7px;
}
.cancel-reason span{color: var(--dark-color);}
.alert-cancel{
    background: var(--secondary-color);
    border: none;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    color: #fff;
}
/* End order details */
/* Start order details ended */
.order-ended h6,.chat-ended{color: var(--dark-color);}
.order-ended .box{background: var(--dark-color);border: none;}
.order-ended .box .two-btns .btn{
    border-radius: 7px;
    font-size: .9rem;
}
.order-ended .cart-items img {
    width: 85px;
    height: 85px;
}
/* Ended order details ended*/
/* Start popover list */
#myPopover{
    padding: 0 0.5rem;
    color: #000;
}
#myPopover:focus{
    outline: none;
    box-shadow: none;
}
#myPopover.main-btn.btn-danger{
    color: white;
    padding: 0.25rem 0.5rem;
}
.popover-arrow{ display: none !important;}
.popover-body{ 
    padding: .3rem .5rem; 
    border-radius: 7px; 
    text-align: center;
    min-width: 140px;
}
.popover-list li{ padding: .5rem; border-bottom: 1px solid #ddd;}
.popover-body .popover-list li:last-child{ border: none;}
.popover-list li a{ color: #666;}
.popover-list li a:hover{ color: var(--dark-color);}
/* End popover list */
/* Start my account page*/
.side-box{ background: var(--section-bg) !important;}
.account-tabs .nav-link{
    position: relative;
    background: white;
    color: var(--text-color);
    border: 1px solid #ddd;
    margin-top: 0.7rem;
    border-radius: 7px;
    height: 47px;
    overflow: hidden;
    text-align: start;
    padding-inline-start: 55px;
}
.account-tabs .nav-link.active{
    background: white;
    color: var(--dark-color);
    font-family: var(--med-font);
    border: 2px solid var(--secondary-color);
}
.account-tabs .nav-link span{
    position: absolute;
    left: 0;
    top: 0;
    width: 47px;
    height:45px;
    line-height: 47px;
    border-radius: 7px;
    background: #EEEFEF;
    color: var(--secondary-color);
    text-align: center;
}
.account-form .border{ border-radius: 7px;}
.account-form label{ font-size: .85rem;}
.account-form p{
    color: var(--dark-color);
    font-family: var(--med-font);
    font-size: .95rem;
    margin: 0;
}
.account-form .feild,.add-money,
.save-form,.change-psw,.transfer-money,.successful-msg{ display: none;}
.add-money .payment-method ul li {
    border: 2px solid #ddd !important;
    padding: 5px;
    border-radius: 10px !important;
    overflow: hidden;
    margin: 0 5px 0 0;
    cursor: pointer;
}
.add-money .payment-method ul li.selected-item {
    border-color: var(--secondary-color) !important;
}
.add-money .payment-method ul li img {
    width: 85px;
    max-width: 100%;
    height: 40px;
    object-fit: contain;
}
.points,.view-cart{
    width: 300px;
    max-width: 90%;
    border-radius: 15px;
    background:var(--dark-color);
    position: fixed;
    bottom: 20px;
    right: 60px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); 
}
.points p {
    font-size: 0.9rem;
    color: #ffffff; 
    text-align: center !important;
}
.points .btn {
    background: #ffffff !important;
    font-size: 0.9rem; 
}
.wallet-info{
    background: var(--dark-color);
    border-radius: 10px 10px 0 0;
    color: white;
}
.wallet-info span{ font-size: .85rem; opacity: .85;}
.wallet-info h4{ font-size: 1rem; font-family: var(--med-font);}
.wallet-info h3{ font-size: 1.5rem;font-family: var(--med-font);}
.wallet-info .btn,.complete-btn.btn{
    color: var(--secondary-color);
    min-width: 170px;
    font-size: .95rem;
}
.complete-btn.btn{color: #fff;}
.my-wallet{
    background:var(--section-bg);
    border-radius: 10px;
}
.person-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.four-input .form-control {
    width: 33px;
    height: 42px;
    margin: 0 5px;
    padding: 5px !important;
    background: var(--light-color);
    border-radius: 15px;
    text-align: center;
}
.successful-msg p {
    color: #888888;
    font-size: 0.85rem;
}
.successful-msg img{width: 75px;}
.transaction-list h5,.transfer-money h5,.successful-msg h5{
    font-size: 1rem;
    color: var(--secondary-color);
    font-family: var(--bold-font);
}
.transaction-list .border-bottom:last-of-type{border: none !important;}
.transaction-list .transfer svg{ color: var(--secondary-color);}
.transaction-list svg,.addresses-list svg{
    font-size: .7rem;
    margin-top: 0.15rem;
    color: var(--dark-color);
}
.transaction-list h6,
.addresses-list h6{ font-size: 1rem; font-family: var(--med-font);}
.transaction-list p,.addresses-list p{ 
    font-size: .85rem;
}
.transaction-list p:last-child{ color: var(--dark-color);}
.transaction-list .transfer p:last-child{ color: var(--secondary-color);}
.addresses-list .main-btn.btn-danger{
    height: 34px;
    line-height: 21px;
    font-size: .9rem;
    width: 75px;
    min-width: 75px;
    text-align: center;
}
.complaint-list p,.orders-list p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    font-size: .85rem;
}
.complaint-form{ display: none;}
.complaint-form h5{ 
    color: var(--dark-color);
    font-size: 1rem;
    font-family: var(--med-font);
}
.complaint-details h5,.add-money h5{
    color: var(--secondary-color);
    font-size: 1rem;
    font-family: var(--med-font); 
}
.back-complaint svg{font-size: 1rem;}
.back-complaint:focus{outline: 0;box-shadow: none;}
.submit-review{display: none;}
.info-page .box{
    background: white;
    border-radius: 7px;
    border: 1px solid #ddd;
    font-size: .95rem;
}
.info-page h5{ font-family: var(--med-font);}
.info-page h6{ font-family: var(--med-font);font-size: .95rem;}
.info-page .box p{ text-align: justify;}
.info-page .box p:last-child{margin-bottom: 0;}
.info-page ul{ margin-inline-end: 1rem;}
.info-page ul li{ margin-bottom: .5rem;text-align: justify;}
.social-list li{ margin: 0 .5rem;}
.social-list li a{ font-size: 1.8rem;}
.social-list .fa-twitter{ color: #03A9F4;}
.social-list .fa-facebook{ color: #1976D2;}
.social-list .fa-instagram{ color: #d6249f;}
.social-list .fa-tiktok{ color: #000;}
.social-list .fa-youtube{ color: #D8362A;}
.social-list .fa-snapchat-square{ color: #FFBE3B;}
.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
    border-radius: 5px;
}
.input-group:focus-within *:focus {
    outline: 0;
    box-shadow: none;
} 
/* End info page */
/* Start join as adriver */
.person-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    background: white;
}
.person-img span{
    position: absolute;
    bottom: -3px;
    right: -5px;
    margin: auto;
    text-align: center;
    font-size:1rem;
    line-height:34px;
    color:#666;
    background:white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
}
.person-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -24px;
}
.join-form .site-form{
    width: 100%;
    max-width: 100%;
}
.join-form .box{ background: #FBFBFB;}
.join-form h4{
    color: var(--secondary-color);
    font-size: 1rem;
    font-family: var(--med-font);
}
.join-form .upload{ cursor: pointer;}
.join-form .main-btn{
    width: 260px;
    max-width: 100%;
}
.join-form .form-check-label{ font-size: .9rem;}
span.error{
    position: absolute;
    bottom: -20px;
    color: red;
    font-size: .8rem;
}
input[type=date], input[type=datetime-local], input[type=month], input[type=time] {
    -webkit-appearance: listbox;
}
.select-date{
    border: 1px solid #ced4da;
    border-radius: 0 .25rem .25rem 0;
}
.select-date.input-group:focus-within{
    outline: 0 ;
    box-shadow: none;
}
.select-date .input-group-text{
    background: #fff !important;
    border: none;
    height: 100%;
}
.datepicker-days .table{direction: ltr !important;}
.datepicker-days .table>:not(:last-child)>:last-child>*{
    border: 0;
    font-size: .8rem;
    font-weight: 100;
}
.datepicker-days .table td{
    border: 0;
    font-size: .8rem;
}
/* end join as adriver */
/* complaint  */
.complaint {
    width: 430px;
    max-width: 100%;
    font-size: 0.9rem; }
    .complaint .product-rate {
      font-size: 0.85rem; }
      .complaint .product-rate p {
        color: #818181; }
      .complaint .product-rate .rate i {
        color: var(--dark-color); }
/* chat popup */
.chat-popup{
    width: 345px;
    max-width: 100%;
    box-shadow: 1px 1px 3px #ddd;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    display: none;
    position: fixed;
    bottom: 0;
    left: 98px;
    background: #fff;
    z-index: 9999;
}
.chat-header .btn:focus{outline: 0;box-shadow: none;}
.chat-header .btn:hover{color: var(--secondary-color);}
.chatpopup-box{
    overflow-y: scroll;
    height: 300px;
}
.chatpopup-box::-webkit-scrollbar {width: 7px;}
.chatpopup-box::-webkit-scrollbar-track { background: var(--section-bg);}
.chatpopup-box::-webkit-scrollbar-thumb { background: #ddd;}
.chatpopup-box::-webkit-scrollbar-thumb:hover {background: #ccc;}
.chat-txt{font-size: .85rem; margin-bottom: .6rem;}
.chat-txt.chat-r{
    flex-direction: row-reverse;
    text-align: -webkit-right;
    margin-left: auto;
}
.wellcome{
    background: var(--dark-color);
    color: #fff;
}
.wellcome p{color: #fff !important;}
.chat-txt .rounded{border-radius: 10px!important;}
.chat-txt>img {
    width: 35px;
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}
.chat-txt h5{
    font-size: .95rem;
    font-family: var(--med-font);
}
.chat-txt p{margin-bottom: .3rem;color: #828282;}
.chat-txt a{
    display: inline-block;
    width: 100%;
    margin-bottom: .3rem;
}
.chat-txt .date{
    font-size: .7rem;
    opacity: .5;
    float: right;
    margin-top: .2rem;
}
.chat-txt.chat-r .date{float: left;}
.file{
    color: var(--dark-color);
    background: var(--main-color); 
    margin: 0.2rem 0;
    width: 140px;
}
.file-name{
    background: rgba(0, 0, 0, .1);
    border-radius: 5px;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}
.file p{
    background: none !important;
    margin: 0 !important;
    color: var(--dark-color);
    opacity: 1;
}
.file span {
    display: block;
    font-size: .7rem;
}
.posted-img {
    display: block;
    max-width: 239px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 5px;
}
.chat-footer textarea {
    resize: none;
    padding: 6px 10px;
    max-height: 80px;
    line-height: normal;
    background: none;
    flex-grow: 1;
    font-size: .85rem;
    border-radius: 10px;
}
.chat-footer .btn-sm{color: var(--dark-color);}
.chat-footer .btn-sm:hover{color: var(--dark-blue);}
.chat-footer .btn-sm:focus{outline: 0; box-shadow:none;}
.chat-footer textarea::-webkit-scrollbar {width: 7px;}
.chat-footer textarea::-webkit-scrollbar-track { background: var(--section-bg);}
.chat-footer textarea::-webkit-scrollbar-thumb {background: #ddd;}
.chat-footer textarea::-webkit-scrollbar-thumb:hover {background: #ccc;}
/* error page */
main{
    min-height: 500px;
}
.error-page{height: 500px;text-align: center;}
.error-page .container{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.error-page .not-found{
    font-size: 7rem;
    opacity: .15;
}
.error-page img {
    width: 90px;
    margin-bottom: 25px;
}
.error-page .empty-img{width: 150px;}
.error-page h3{ 
    color: var(--secondary-color);
    font-size: 1.5rem;
}
.error-page .main-btn{width: 170px;}
.rate{direction: rtl;}
.rate input {
    display: none;
}
.rate label {
    cursor:pointer;
    color:var(--dark-blue);
    font-size: 1.2rem;
}
.rate > input:checked ~ label {
    color: var(--secondary-color);    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: var(--secondary-color);  
}
.ui-menu{z-index: 99999 !important;}
.loading-overlay{
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.spinner {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} 
.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--secondary-color);
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
    0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}
.no-results img{ 
    width:90px !important;
    height: auto !important;
    margin-bottom: 1rem;
}
.no-results img:hover{
    transform: scale(1) !important;
}
.no-results h3{ color: var(--dark-color); font-size: 1.3rem;}
.no-results p{ font-size: .9rem;color: #999;}
/* view receipt modal */
.view-receipt h5{color: var(--secondary-color);font-size: 1rem;}
.receipt-summary{font-size: .9rem;}
.receipt-attachment h6{color: var(--secondary-color);font-size: .9rem;}
.receipt-attachment .img-uploaded,
.receipt-attachment .upload-btn label{
    height: 85px;
    width: 100px;
    background: var(--section-bg);
    font-size: .8rem;
}
.confirm-chat .wellcome img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.confirm-chat .wellcome .status{
    background:#fff;
    color: var(--secondary-color);
    font-size: 0.8rem;
    padding: .1rem .3rem;
    border-radius: 5px;
}
.confirm-chat .wellcome .status svg{ font-size: .6rem;}
.confirm-chat .wellcome h6{font-size: .8rem;}
.confirm-chat .wellcome .rating{color:#fff;}
.confirm-chat .wellcome .rating svg{font-size: .6rem;}
.chat-txt .order-items h5{color: var(--dark-color);font-size: .85rem;}
.chat-txt .order-items h6{color: var(--dark-color);font-size: .8rem;}
.chat-txt .order-items .price{color: var(--secondary-color);font-size: .8rem;}
.chat-txt .order-items img{
    width: 50px;
    height: 50px;
    border-radius: 5px;
}
.chat-txt .order-items > div:last-of-type{border: none !important;}
.invoice-img img{
    width: 74px;
    height: 98px;
    object-fit: cover;
}
.delivering-to img{
    width: 37px;
    height: 37px;
    border-radius: 50%;
}
.delivering-to span{font-size: .85rem;opacity: .65;}
.delivering-to select{font-size: .85rem;}
.delivering-to select:focus{box-shadow: none;}
audio{
    width: 239px;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: -5px;
}
.chat-left .chat-content audio::-webkit-media-controls-panel{background:#F8F8F8;}
.chat-right .chat-content audio::-webkit-media-controls-panel{background: rgba(var(--dark-color-rgb), .05);}
.chat-content audio::-webkit-media-controls-play-button {
    background-color: var(--dark-color);
    border-radius: 50%;
    opacity: 1;
}
.chat-content audio::-webkit-media-controls-time-remaining-display{
    display: none;
}
/* responsive */
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width:  991.98px) and (max-width: 1199px) {
    .shops .appointment{ font-size: .8rem;}
    .search-form .form-control {width: 195px;}
}
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .order-total{ width: 100%;}
    .complaint-list .order-info .text-end{ display: flex; justify-content: end;align-items: center;}
    .complaint-list .order-info .text-end p{ margin: 0 1rem !important;}
    .search-form .form-control {width: 195px;}
    .cancel_Order .modal-dialog.modal-sm {
        width: 90%;
        max-width: 90%;
        margin: 0 auto;
    }
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
    .main-title{font-size: 1.1rem;}
    .login{ min-height:auto; }
    .app-store{ display: flex;}
    .app-store a{ display: inline-block !important; margin-inline-end: 1rem;}
    /* .top-slider .carousel-item{ height: 400px;} */
    .help-you .btns{ margin-top: 1.5rem;}
    .details .carousel-item,.details .carousel-item img{ height:350px;}
    .map,.map iframe{height: 350px;}
    .img-uploaded,.upload-btn label{ height: 95px;width: 105px;}
    .upload-btn label{ font-size: 0.8rem; padding: 0.5rem !important;}
    .order-total{ width: 100%;}
    .complaint-list .order-info .text-end{ display: flex; justify-content: end;align-items: center;}
    .complaint-list .order-info .text-end p{ margin: 0 1rem !important;}
    .shop-info p, .complaint-info p {padding: 0.5rem 1rem !important;}
    .shop-name .main-btn,.shop-name .search-form{width: 350px; margin: 0 auto;}
    .alert-cancel div>span{
        display: block;
        margin: 0 !important;
    }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    html{font-size: 14px;}
    .top-bar { height: auto; }
    .top-bar .container{
        display: flex;
        flex-direction: column;
        justify-content: center !important;
    }
    .top-bar .container .justify-content-end, .social-links {
        justify-content: center!important;
    }
    /* .top-slider .carousel-item{ height: 340px;} */
    /* .top-slider .carousel-caption h1{ font-size: 1rem;}
    .top-slider .carousel-caption p{ font-size: .8rem;} */
    .top-slider .carousel-caption img {
        margin: 2rem auto;
        display: block;
    }
    .shop-info, .complaint-info{width:100%;}
    .shop-info p,.complaint-info p{ padding: .5rem .4rem !important;}
    .details .carousel-item,.details .carousel-item img{ height: 290px;}
    .map,.map iframe{height: 300px;}
    .order-info .text-end{ display: flex; justify-content: end;align-items: center;}
    .order-info .text-end p{ margin: 0 1rem !important;}
    .chat-popup{
        left: 12px;
    }
    .wallet-info .btn {min-width: 100px;}
    .points{position: static;}
    .add-money .payment-method ul li img {width: 70px;}
    .addcart-modal .modal-footer .main-btn{padding: 6px;}
    .item-qty{margin-top: .5rem;}
    .view-cart{
        right: 10px;
    }
    .pharmacy .box{
        justify-content: flex-start !important;
    }
    /* .error-page h3{font-size: 1.1rem;} */
    .error-page .empty-img{width: 100px;}
    .help-you.py-5{
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .py-5 {
        padding-top: 1.5rem!important;
        padding-bottom: 1.5rem!important;
    }
    .person-img{margin-top: 0 !important;}
    .info img { width: 65px;}
    .site-form .col-md-6,
    .join-form .site-form .col-md-12{padding: 0;}
    .img-uploaded, .upload-btn label {
        height: 78px;
        width: 85px;
    }
    .footer .two-btns{display: flex !important;}
    .footer .two-btns .btn{font-size: .8rem; height: 33px;}
    .order-ended .cart-items img{
        width:50px;
        height: 50px;
        margin-inline-end: 0.5rem !important;
    }
    .order-imgs img{
        width:50px;
        height: 50px;
    }
    .chat-img {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
    .chat-content{padding: .5rem !important;}
    .shops .box img {width: 55px;}    
    
}
@media (max-width: 480px) {
    .f32 .flag{margin: 0;}
    .help-you .btns .btn{
        padding: 6px 4px;
    }
    .navbar-brand{display: block;width: 100%;padding-top: 0;}
    .navbar-brand img{width: 100px;}
    .navbar-toggler{padding: 0 3px;}
    .top-slider .carousel-indicators {
        left: auto;
        top: 0;
        flex-direction: column;
        margin: 0 0.5rem;
    }
    .top-slider .carousel-indicators [data-bs-target]{margin: .2rem 0;}
    .site-form{max-width: 100%;}
    .from-to.p-2::before {
        left: 12px;
    }
    .top-bar{padding-top: .2rem;}
    .top-bar li .nav-link{padding: .5rem;}
    .view-cart .btn,.write-comment .main-btn{min-width: auto;width: auto;}
    .wallet-info .btn{padding: .2rem;}
}