html{background-color:#edeaea;max-width:640px;margin:auto}
body{margin:0;padding:0}
button:focus {outline: none;}
.status-list{list-style-type:none;padding:0;margin-top: 85px;}
.status-item{padding:10px;color:#bfbfbf;background-color:#fff;margin:10px 0}
.status-item.yes{color:#000}
.error-item{color:red;font-weight:700}
.last4-item{color:red;font-weight:700;background-color:yellow}
.progress-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.7);display:flex;justify-content:center;align-items:center;z-index:9999;display:none}
.loader{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:50px;height:50px;animation:spin 2s linear infinite;position:absolute;top:50%;left:45%;transform:translate(-50%,-50%)}
@keyframes spin{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.status{font-weight:700;font-size:18px;margin-right:20px}
.status.red{color:red}
.arrival-datetime,.express-company,.order-number,.pt{color:#bfbfbf}
.recipient-name,.recipient-phone{color:#000}
.sms-status{background:linear-gradient(90deg, rgb(254, 130, 130), rgb(255, 86, 86));color:#fff;margin:2px;padding:2px 6px;border-radius:3px;font-size:12px;margin-left:3px}
.sms-status.hui{background:linear-gradient(90deg, #969696,#5E5E5E)}
.sms-status.huang{background:linear-gradient(90deg, #FF8F13,#FF7708)}
.tracking-number{background-color:#f3e8e8;color:red;margin:2px;padding:2px 6px;border-radius:3px;font-size:24px;float:right;font-weight:700}
.tracking-number.hui{background-color:#f1ecec;color:#918b8b;font-size:18px}
.huanhang{margin-top:5px}
.shangxian{border-top:1px solid #f9f9f9;margin-top:10px;padding-top:10px}
.marginleft20px{margin-left:20px}
.wrapper{
    height: 120px;
    background-color: #ff5b5b;
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
}
.divlist {
    max-width: 640px;
    margin: 0 auto;
    margin-top: 70px;
}
.search-box{position:relative;height:46px;background:#fff;margin:0 20px;border-radius:8px;box-shadow:0 5px 10px rgba(0,0,0,.1);top:10px}
.search-box input{height:100%;width:90%;outline:0;font-size:16px;font-weight:400;border:none;padding:0 10% 0 20px;background-color:transparent}
.search-box .button{right:20px;font-size:16px;font-weight:400;color:#fff;border:none;padding:8px 20px;border-radius:6px;background-color:#ff5b5b;cursor:pointer}
.search-box .button{position:absolute;top:50%;transform:translateY(-50%)}
.search-type{margin-top:10px}
.close-button{position:absolute;top:50%;right:100px;transform:translateY(-50%);padding:0;width:25px;height:25px;font-size:24px;line-height:25px;text-align:center;background-color:#c1c1c1;color:#fff;border:none;border-radius:50%;cursor:pointer;}
.close-button:hover {color:red}
.express-status-item{right:20px;font-size:16px;font-weight:400;color:#fff;border:none;padding:10px 18px;border-radius:6px;background-color:#f47d7d;cursor:pointer}
.express-status-item.active{background-color:#fff;color:#ff5b5b;font-weight:600;}
.eye-img{cursor:pointer;opacity:.24;width:22px;height:22px;margin-bottom:-5px;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAACXBIWXMAAAsSAAALEgHS3X78AAACF0lEQVRYhe2Yv0/CQBTHSXQzxj/COLqogyZOJvpPOGrYWXWhgInI4HxtCIkjo7kr/iBhcVQ2XXQm+h+oA/i+lcMGi32VFqm5b3Khad979+nj3Y9eJmNkZGRklFq1Wq3ZouNuFRz3wBLq3LLVg2XL57wt39Bw7d2jZ7CBLXwmDloU7iJBnHhwQvaitM8XUmXESBy0XL2Zz9tuhWDfo4J+A0cMioWYicCWRGOTOumMCxoA3kHsWGEtR+55dRkz7KCh3qmPeGCFykUDUC9Up7douI6Y7dx4sLa7S6O8y+jolX5PC0ItD8fAPTzr24QMSNVFn7+CLVQbG7zBpe6LtaulsHiwgS1nMKLvSLCVs8s5qqtHDuyxuF7QfvV6b+ZIXKwUHJlFwzXu6eew5UCjbzCwgclJcMrAn1n89XSvHWDX9pcKfDjlAQYWLGVmlVO3qMsh2JEQeOaHhi+nnsESCmwJ2eSMaA2Avzwos0GZ1uXRH4iMWUM2f4Z11DYnEKYr7YM65fnIHmy/ssyb8mgJ3xkJTGt8jfXmNMf6SijLBYatryzuWH7E9H+Akf5pKwmU6UhgKFWDDipV1VqqprV+wEQXDubOj7dwQFgWqaMnRi1Px9LsZewPNz8lx12PBKuVqu3lADpNG3hflvaT/kRCH7HAaqXqI1QrVZ/5fo17kALfiRykDEsfVdESehh2VAWbPzuqMjIyMjKKTR8I7NqDjklA2wAAAABJRU5ErkJggg==');background-size:22px 22px; display:inline-block;}
.image-preview{cursor:pointer;opacity:.75;width:20px;height:16px;margin-bottom:-2px;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAACXBIWXMAAAsSAAALEgHS3X78AAABQUlEQVRYhe3YsQqCQBgA4INeonfRKLAI2ttaiqCpqZdoaW5obOgZmnuGaM8UMiFsEELzut+MSry08s5/6Icf5UDu8z9P7o6QKGi7XTIrjb6p1JeGqumGormmogXsSkVm1IcLfULfYAALeQ6r1iqban0lGpMZzSxgelQOEe4ZGVYSSlo0hotkNhJ+cwgwiUBmI9GEKByTmMxGDJhBRUP46RIZv5Lvh1gLiLQOq016mi+of7DDhHtoS3tOGhBA8QiRWIBQtXhA2x+IaoiP4wn1dgY9rzd03+l9hhQ9SZzp7OXtL86JWt2B8MpnAsZxMpGpQB5OFvItMA0nA8kFZsWJRnKB34QIZK5AEcjcgXkjhQDzRPKBnocCyV2w+lv9Z+CvyPuCNXHJbw9HN2SxlXTxb5rQbzvRb9zRH32gPzzCfvx2BSGq7fK5exCBAAAAAElFTkSuQmCC');background-size:20px 16px; display:inline-block;}
.remark{font-size:12px;color:#999999}
/* 在小屏幕设备上设置不同的宽度 */
@media screen and (max-width: 390px) {
    .express-status-item {
        padding: 10px 16px;
    }
}
@media screen and (max-width: 350px) {
    .express-status-item {
        font-size: 12px;
        padding: 7px 10px;
    }
}
@media screen and (max-width: 300px) {
    .close-button{
        right: 110px;
    }
    .search-box .button{
        padding: 6px 15px;
    }
    .express-status-item {
        font-size: 12px;
        padding: 8px 11px;
    }
}
@media screen and (max-width: 260px) {
    .close-button{
        right: 115px;
    }
    .search-box .button{
        padding: 5px 14px;
    }
    .express-status-item {
        font-size: 12px;
        padding: 6px 9px;
    }
}
.scroll-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ff5b5b;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    display: none;
    z-index: 1000;
    border-radius: 20px;
}