.status-order{position:relative;width:100%;max-width:500px;margin:40px auto;padding:20px;box-sizing:border-box}.status-order .status-box{display:flex}.status-order .status-box>div{position:relative;flex:1;padding-top:50px;text-align:center;font-size:18px;color:var(--primary);opacity:0.4}.status-order .status-box>div.active{opacity:1}.status-order .status-box>div.active ~ div{color:var(--text-light)}.status-order .status-box>div.active ~ div:after{background:var(--text-light)}.status-order .status-box>div.link{cursor:pointer}.status-order .status-box>div:before{content:attr(data-icon);font-family:"Material Icons";position:absolute;top:0;left:0;bottom:auto;right:0;width:70px;margin:auto;font-size:40px;z-index:2}.status-order .status-text{width:100%;max-width:500px;margin:40px auto;line-height:28px;text-align:center}

.order-status .order-canceled{display:block;margin-top:40px;font-size:20px}.order-status .order-canceled>.title{font-weight:bold}.order-status .order-canceled .stage{margin-top:20px;line-height:28px}.order-status .delivered{text-align:center}.order-status .delivered .button{display:inline-block;vertical-align:top;padding:0 20px;border-radius:24px;line-height:48px;font-size:20px;background:#18d497;color:white;cursor:pointer}.order-status .tracking{margin:40px auto;padding:20px;background:white;box-shadow:0 0px 4px rgba(0,0,0,0.1)}.order-status .tracking>.title{line-height:28px;font-weight:bold;font-size:20px}.order-status .tracking>.data{line-height:32px;text-align:left;font-size:20px;clear:both}.order-status .tracking>.data>span{float:right}