.search-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
}

.search-container {
    position: relative;
    align-self: center;
    border-radius: 5rpx;
    background-color: var(--white-color);
    font-family: -regular;
    margin: 20rpx 30rpx;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    color: var(--text-color);
    font-size: 14px;
    text-align: center;
}

.search-input::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    margin-top: -1px;
    background-size: cover;
    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSI2NCA2NCA4OTYgODk2IiB3aWR0aD0iMTQiIGhlaWdodD0iMTkiIHN0eWxlPSIiIGZpbHRlcj0ibm9uZSI+CiAgICAKICAgIDxnPgogICAgPHBhdGggZD0iTTkwOS42IDg1NC41TDY0OS45IDU5NC44QzY5MC4yIDU0Mi43IDcxMiA0NzkgNzEyIDQxMmMwLTgwLjItMzEuMy0xNTUuNC04Ny45LTIxMi4xLTU2LjYtNTYuNy0xMzItODcuOS0yMTIuMS04Ny45cy0xNTUuNSAzMS4zLTIxMi4xIDg3LjlDMTQzLjIgMjU2LjUgMTEyIDMzMS44IDExMiA0MTJjMCA4MC4xIDMxLjMgMTU1LjUgODcuOSAyMTIuMUMyNTYuNSA2ODAuOCAzMzEuOCA3MTIgNDEyIDcxMmM2NyAwIDEzMC42LTIxLjggMTgyLjctNjJsMjU5LjcgMjU5LjZhOC4yIDguMiAwIDAgMCAxMS42IDBsNDMuNi00My41YTguMiA4LjIgMCAwIDAgMC0xMS42ek01NzAuNCA1NzAuNEM1MjggNjEyLjcgNDcxLjggNjM2IDQxMiA2MzZzLTExNi0yMy4zLTE1OC40LTY1LjZDMjExLjMgNTI4IDE4OCA0NzEuOCAxODggNDEyczIzLjMtMTE2LjEgNjUuNi0xNTguNEMyOTYgMjExLjMgMzUyLjIgMTg4IDQxMiAxODhzMTE2LjEgMjMuMiAxNTguNCA2NS42UzYzNiAzNTIuMiA2MzYgNDEycy0yMy4zIDExNi4xLTY1LjYgMTU4LjR6IiBmaWxsPSJyZ2JhKDIwNCwyMDQsMjA0LDEpIj48L3BhdGg+CiAgICA8L2c+CiAgPC9zdmc+');
}


.content-container {
    height: 86vh;
    margin-top: 50px;
    width: 100vw;
}


.order-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 30px;
}

.order-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.order-item:nth-of-type(n+2) {
    margin-top: 15px;
}

.order-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 17px;
    background-color: var(--bg-primary-shallow-color);
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
}

.order-no {
    color: var(--text-color);
    font-size: 24rpx;
    text-align: left;
}

.order-status {
    color: var(--text-color);
    font-size: 24rpx;
    text-align: left;
}

.order-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--white-color);
    padding: 17px;
    border-bottom-left-radius: 5rpx;
    border-bottom-right-radius: 5rpx;
}

.order-caption {
    line-height: 25px;
    color: var(--text-color);
    font-size: 18px;
    text-align: left;
    font-family: SourceHanSansSC-medium;
}

.order-types {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.or-type {
    color: var(--text-color);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.or-count {
    color: var(--text-color);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.or-price {
    color: var(--text-color);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.or-total {
    color: var(--text-color);
    font-size: 16px;
    text-align: left;
    font-family: PingFangSC-medium;
}

.order-remark-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.order-remark-title {
    color: var(--text-color);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.order-remark-content {
    color: var(--text-color);
    font-size: 22rpx;
    text-align: left;
    font-family: PingFangSC-light;
    border-radius: 5px;
    background-color: var(--bg-gray-color);
    flex: 1;
    padding: 7px 10px;
    margin-left: 10px;
}

.icon-position {
    width: 42rpx;
    height: 42rpx;
    margin-right: 10rpx;
}