@import "css/theme/default.css";

.user-active{background-color: var(--dmBackgrounColor);}

.main-content{padding-top: 96px;max-width: 800px;margin: auto; width: 100%;padding: 96px 16px 16px 16px}

.order-status .active:before,.offline-status .offline:before{position:absolute;width:8px;height:8px;content:"";-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;right: 0;left: 0;top: 0;bottom: 0;margin: auto;background: #447FF9}
.order-status .active{position:relative;width:12px;height:12px;;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;vertical-align:middle;-webkit-animation:flash 1s linear infinite;-moz-animation:flash 1s linear infinite;-ms-animation: flash 1s linear infinite;-o-animation: flash 1s linear infinite;animation:flash 1s linear infinite;display: block;background: #B6CDFD}
.offline-status .offline{background-color:#888}

.title-box .title span{width: 100%;max-width: 130px}
.title-box .title:after{content: "";width: 100%;max-width: 666px;height: 1px;background: #98A2B3;display: block}

.main-content .result-box .login-status button {width: 100%;max-width: 328px;height: 52px;background: #13727D;color: #fff;}

.order-item-row{display: flex;flex-direction: row!important;flex-wrap: wrap;gap:32px;}
.order-item-row .order-item{padding: 16px;border: 1px solid #F2F4F7;max-width: 368px;width: 100%;border-radius: 8px}
.order-item .shop-profile .thumbnail{width: 56px;height: 56px;border-radius: 50%;border: 1px solid #EAECF0;}
.order-item .label-status{background: #E8EFFE;border-radius: 200px;padding: 2px 8px;}
.order-item .label-status.sending{background: #E8EFFE;color: #0F43B0;}
.order-item .label-status.complete{background: #E7F8F0;color: #0D824B;}
.order-item .label-status.cancel{background: #FEF3F2;color: #B32318;}
.order-item .time .separator{width: 1px;height: 15px;background: #98A2B3;display: inline-block}

.shop-profile .location-text{width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.product-list{width: 100%;height: 66px;background: #F9FAFB;border-radius: 6px;padding: 8px}
.product-list .food-thumbnail .item{position: relative}
.product-list .food-thumbnail .item img{width: 48px;height:48px;border: 1px solid #EAECF0;border-radius: 50%}
.product-list .food-thumbnail .item .count{width: 20px;height: 20px;background: rgba(52, 64, 84, 0.5);backdrop-filter: blur(4px);border-radius: 50%;position: absolute;top: 0;right: 0;color: #fff;text-align: center;display: flex;align-items: center;justify-content: center}
.order-item .button-process{width: 100%;height: 48px;}
.order-item .button-process > a{width: 100%;/*max-width: 168px;*/height: 48px;display: flex;align-items: center;justify-content: center;border-radius: 8px}
.order-item .button-process > a.order-track, .order-item .button-process > a.reorder{background: #13727D;color: #fff}
.order-item .button-process > a.show-factor{background: #fff;color: #344054;border: 1px solid #D0D5DD;}


.factor-list .factor-item:before{content: "";width: 1px;height: 100%;background: #101828;display: block;position: absolute;}
.factor-list .factor-item.discount-list:before{background: #0D824B}
.factor-list .factor-item > div{padding-right: 8px;}

@media(max-width:800px) {
    .main-content {width: 100%;padding: 56px 16px 16px 16px;}
    /*header .internal-header {display: none !important;}*/
    .active-orders{margin-top: 8px}
    .order-item-row{gap:0;}
    .order-item-row .order-item{max-width: 100%;border: none;padding: 16px 0;border-bottom: 1px solid #F2F4F7;}
}

@keyframes flash {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}