.coupon {
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
    height: 110px;
    display: flex;
    flex-direction: row;
    position: relative
}

.coupon:before,.coupon:after {
    content: "";
    background-color: #fff;
    width: 10px;
    height: 10px;
    overflow: hidden;
    position: absolute;
    z-index: 2;
    left: 115px;
    border-radius: 5px
}

.coupon:before {
    top: -5px
}

.coupon:after {
    bottom: -5px
}

.coupon-l {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.coupon-l-name {
    flex: 1;
    overflow: hidden;
    font-size: 14px
}

.coupon-l-time {
    height: 20px;
    line-height: 20px;
    color: #999;
    font-size: 11px
}

.coupon-l-desc {
    font-size: 12px;
    padding-top: 10px
}

.coupon-l .state-icon {
    position: absolute;
    [dir="ltr"] & {
        right: -10px;
    }
    [dir="rtl"] & {
        left: -10px;
    }
    top: 5px;
    font-size: 60px;
    color: #eee;
    z-index: 3
}

.coupon-r {
    width: 120px;
    background: #61b2fa;
    background: linear-gradient(171deg,#61b2fa,#2c69fb);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 5px 10px;
    overflow: hidden
}

.coupon-r .mj {
    flex: 1;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.coupon-r .mj .amt {
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.coupon-r .mj .amt .num {
    height: 32px;
    line-height: 32px;
    font-size: 32px;
    vertical-align: bottom
}

.coupon-r .mj .amt .zeng {
    font-size: 26px!important
}

.coupon-r .mj .amt .sub {
    vertical-align: bottom;
    font-size: 16px
}

.coupon-r .mj .man {
    font-size: 12px;
    padding-top: 5px
}

.coupon-r .btn {
    background-color: #fff;
    height: 20px;
    line-height: 20px;
    width: 60px;
    border-radius: 10px;
    text-align: center;
    color: #5680e7;
    font-size: 11px;
    padding: 0
}

.coupon .check {
    position: absolute;
    [dir="ltr"] & {
        right: 10px;
    }
    [dir="rtl"] & {
        left: 10px;
    }
    top: 46px;
    z-index: 3
}

.coupon .check .qht-icon-checked,.coupon .check .qht-icon-unchecked {
    font-size: 18px
}

.coupon .check .qht-icon-unchecked {
    color: #aaa
}

.coupon .check .qht-icon-checked {
    color: var(--color-primary)
}

.coupon.red .coupon-r {
    background: var(--color-primary);
    background: linear-gradient(171deg,var(--color-primary-bg),0%,var(--color-primary) 100%)
}

.coupon.red .coupon-r .btn {
    color: var(--color-primary)
}

.coupon.mini {
    height: 90px
}

.coupon.mini:before,.coupon.mini:after {
    [dir="ltr"] & {
        left: 90px
    }
    [dir="rtl"] & {
        right: 90px;
    }
}

.coupon.mini .coupon-r {
    width: 95px
}

.coupon.mini .check {
    top: 36px
}

.coupon.checked:before {
    display: none
}

.coupon.checked:after {
    width: 100%;
    height: 100%;
    [dir="ltr"] & {
        left: 0;
    }
    [dir="rtl"] & {
        right: 0;
    }
    top: 0;
    border: 2px solid var(--color-primary);
    background-color: transparent;
    pointer-events: none
}

.item[data-v-749b3494] {
    padding: 10px
}

.item i[data-v-749b3494] {
    display: none
}

.item[data-v-749b3494]:hover,.item.checked[data-v-749b3494] {
    border: 2px solid var(--color-primary);
    padding: 9px
}

.item.checked i[data-v-749b3494] {
    display: block;
    position: absolute;
    [dir="ltr"] & {
        right: 0;
    }
    [dir="rtl"] & {
        left: 0;
    }
    bottom: 0;
    width: 12px;
    height: 12px;
    overflow: hidden;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAABGdBTUEAALGPC/xhBQAAAAlQTFRF8pye5Dk8////ZxxMawAAADRJREFUCNcNw0ENADAIBME1gTR44KBCkFABPJqQU1kmGaRB6l3b0DjqXYEsGT/0eVReLPwD5YMSYsFZapIAAAAASUVORK5CYII=) no-repeat
}

.jiesuan-wrapper .hd {
    line-height: 22px;
    border-bottom: 2px solid var(--color-primary-border)
}

.jiesuan-wrapper .cell {
    min-height: 38px;
    display: flex;
    align-items: center
}

.jiesuan-wrapper .cell.product {
    align-items: flex-start
}

.jiesuan-wrapper .tips {
    padding: 3px 10px;
    background-color: #fdf6ec;
    color: #e6a23c
}

.jiesuan-wrapper .tips .tip {
    line-height: 24px;
    border-bottom: 1px dotted #e6a23c
}

.jiesuan-wrapper .tips .tip:last-child {
    border-bottom: 0
}

.jiesuan-wrapper .give-row {
    padding-top: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 16px
}

.jiesuan-wrapper .give-row .tag {
    background-color: #ff5722;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    [dir="ltr"] & {
        margin-right: 8px;
    }
    [dir="rtl"] & {
        margin-left: 8px;
    }
    padding: 0 2px
}

.jiesuan .selector {
    list-style: none;
    position: relative;
    border: 1px solid #ddd;
    height: 18px;
    line-height: 18px;
    padding: 5px 10px;
    width: 120px;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    box-sizing: content-box;
    -webkit-user-select: none;
    user-select: none
}

.jiesuan .selector b {
    display: none;
    position: absolute;
    [dir="ltr"] & {
        right: 0;
    }
    [dir="rtl"] & {
        left: 0;
    }
    bottom: 0;
    width: 12px;
    height: 12px;
    overflow: hidden;
    /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAABGdBTUEAALGPC/xhBQAAAAlQTFRF8pye5Dk8////ZxxMawAAADRJREFUCNcNw0ENADAIBME1gTR44KBCkFABPJqQU1kmGaRB6l3b0DjqXYEsGT/0eVReLPwD5YMSYsFZapIAAAAASUVORK5CYII=) no-repeat*/
}

.jiesuan .selector.chuzhi {
    height: 60px;
    line-height: normal;
    padding: 5px 10px;
    width: auto;
    min-width: 120px;
    max-width: 180px
}

.jiesuan .selector:hover,.jiesuan .selector.active {
    border: 2px solid var(--color-primary-border);
    padding: 4px 9px
}

.jiesuan .selector.active b {
    display: block
}

.jiesuan .addr {
    height: 40px;
    overflow-y: hidden
}

.jiesuan .addr.expend {
    height: auto;
    max-height: 145px;
    overflow-y: auto
}

.jiesuan .addr-detail {
    height: 30px;
    line-height: 30px;
    color: #666;
    overflow: hidden
}

.jiesuan .addr-detail span {
    display: inline-block;
    [dir="ltr"] & {
        margin-left: 10px
    }
    [dir="rtl"] & {
        margin-right: 10px;
    }
}

.jiesuan .addr-default {
    margin: 5px 10px;
    background-color: #999;
    color: #fff;
    padding: 0 3px;
    line-height: 20px
}

.jiesuan .addr-links {
    height: 30px;
    line-height: 30px;
    text-align: right;
    display: none
}

.jiesuan .addr-links a {
    [dir="ltr"] & {
        margin-right: 10px
    }
    [dir="rtl"] & {
        margin-left: 10px;
    }
}

.jiesuan .addr .item:hover {
    background-color: var(--color-primary-bg)
}

.jiesuan .addr .item:hover .addr-links {
    display: block
}

.jiesuan .coupon-wrapper {
    border: 1px solid #ddd
}

.jiesuan .coupon-wrapper .coupon-scroll {
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden
}

.jiesuan .coupon-wrapper .coupon-scroll .coupon-item {
    width: 273px;
    -webkit-user-select: none;
    user-select: none
}

.yh-popover-lab {
    flex: 1;
    [dir="ltr"] & {
        text-align: right;
    }
    [dir="rtl"] & {
        text-align: left;
    }
    min-width: 50px
}

.yh-popover-num {
    width: 80px;
    [dir="ltr"] & {
        text-align: right
    }
    [dir="rtl"] & {
        text-align: left;
    }
}