.sales_record {
    --record-background-color: #fff;
    --record-background-to: #fff;
    /* 背景颜色 */
    --record-title-size: 20px;
    /*标题字号*/
    --record-title-color: #000;
    /*标题字体颜色*/
    --record-title-font: "Arial";
    /*标题字体*/
    --record-title-italic: normal;
    /*标题倾斜*/
    --record-title-bold: normal;
    /*标题加粗*/
    --record-title-visible: block;
    /*标题显示隐藏*/

    /*销售记录字体*/
    --record-normal-font: "Arial";
    /*销售记录文字*/
    --record-normal-size: 14px;
    --record-normal-color: #666666;
    --record-normal-italic: normal;
    --record-normal-bold: normal;
    /*销售记录标题文字*/
    --record-salestitle-size: 14px;
    --record-salestitle-color: #333333;
    --record-salestitle-italic: normal;
    --record-salestitle-bold: normal;
    /*销售记录显示隐藏*/
    --record-sales_record-visible: block;


}


.sales_record {
    position: relative;
    background-image: linear-gradient(to right, var(--record-background-color), var(--record-background-to));
    width: 100%;

}

.sales_record .mainbox {
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    max-width: calc(var(--product-detail-style-ratio) * 75% + 80px);
    position: relative;
}

@media screen and (max-width: 600px) {
    .sales_record .mainbox {
        /*max-width: 100%;*/
    }
}

.sales_record .module_title {
    margin: 0px auto;
    line-height: 1.2;
    font-size: var(--record-title-size);
    font-family: var(--record-title-font);
    font-style: var(--record-title-italic);
    font-weight: var(--record-title-bold);
    color: var(--record-title-color);
    display: var(--record-title-visible);
    text-align: var(--product-detail-sub-title-align);
}
.sales_record .module_title{width: 100%;word-wrap:break-word }
.sales_record .module_title_show_icon{max-width: calc(100% - 36px)}
.sales_record .module_title_box{display: flex; align-items:center;justify-content: flex-end;}

.sales_record_table_wrap {
    width: 100%;
    display: var(--record-sales_record-visible);
}

.sales_record_info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--record-normal-size) 0;
}

.sales_record_info .time {
    font-size: var(--record-normal-size);
    font-family: var(--record-normal-font);
    font-style: var(--record-normal-italic);
    font-weight: var(--record-normal-bold);
    color: var(--record-normal-color);
    text-align: left;
    line-height: 1.5;

}

.sales_record_info .sales_info {
    display: flex;
    flex-wrap: wrap;
}

.sales_record_info .sales_info .item {
    display: block;
    font-size: var(--record-normal-size);
    font-family: var(--record-normal-font);
    font-style: var(--record-normal-italic);
    font-weight: var(--record-normal-bold);
    color: var(--record-normal-color);
    text-align: left;
    line-height: 1.5;
    padding-right: 30px;

}

.sales_record_info .sales_info .item:last-child {
    padding-right: 0px;
}

.sales_record_info .sales_info .item .icon {
    display: inline-block;
    vertical-align: top;
    height: calc(var(--record-normal-size) * 20 / 14);
    margin: 0px 10px 0px 0px;
}

.sales_record .tables table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}

.sales_record .tables thead tr td {
    font-size: var(--record-salestitle-size);
    color: var(--record-salestitle-color);
    font-style: var(--record-salestitle-italic);
    font-weight: var(--record-salestitle-bold);
    font-family: var(--record-normal-font);
    word-break: keep-all;
}

.sales_record .tables tr {
    height: calc(var(--record-normal-size) * 3);
    border: 1px solid #DDDDDD;
}

.sales_record .tables thead tr {
    background: #f5f5f5;
}

.sales_record .tables td {
    font-size: var(--record-normal-size);
    font-family: var(--record-normal-font);
    font-weight: var(--record-normal-bold);
    color: var(--record-normal-color);
    font-style: var(--record-normal-italic);
    text-align: center;
    padding: 0px 10px;
    word-break: keep-all;
}

.sales_record .tables td .icon {
    height: calc(var(--record-normal-size) * 20 / 14);
    width: calc(var(--record-normal-size) * 20 / 14);
}

.sales_record_pager {
    padding: 20px 0px;

}

.sales_record_pager .page_wrap {
    white-space: nowrap;
    list-style-type: none;
    display: flex;
    justify-content: center;
}

.sales_record_pager .page_wrap li {
    text-align: center;
    margin: 0px 15px;
}

.sales_record_pager .page_wrap li a {
    font-size: 12px;
    line-height: 20px;
    color: var(--common-body-font-color);
    display: inline-block;
    vertical-align: top;
    padding: 0px 3px;
    text-decoration: none;
}

.sales_record_pager .page_wrap li a.current {
    border-bottom: 1px solid var(--common-body-font-emphasisColor);
    color: var(--common-body-font-emphasisColor);
}

.sales_record_pager .page_wrap li a:hover {
    opacity: 0.8;
    color: var(--common-body-font-emphasisColor);
    border-bottom: 1px solid var(--common-body-font-emphasisColor);
}

.sales_record_pager .page_wrap li a img {
    display: inline-block;
    vertical-align: top;
    height: 16px;
    width: auto;
    margin-top: 2px;
}

.sales_record_pager .page_wrap li a .bi {
    color: var(--common-body-font-color);
    font-size: 16px;
}

.sales_record_pager .page_wrap li a:hover .bi {
    color: var(--common-body-font-emphasisColor);
}


@media only screen and (max-width: 600px) {
    .sales_record .module_title {
        padding: 0px 16px;
    }

    .sales_record_info {
        padding: var(--record-normal-size) 16px;
        box-sizing: border-box;
    }

    .sales_record .tables {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding: 0px 16px;
        box-sizing: border-box;
    }

    .sales_record_pager .page_wrap li {
        margin: 0px 5px;
    }


}