.recharge-modal-custom {
    width: 85%;
    margin: 60px 0 0 9.7vw;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1050px;
}

.has-recharge-area .per-area-wrap {
    background: rgba(222, 182, 182, 0.2) !important;
    border: 2px solid red !important;
}
.recharge-modal-custom .not-recharge-area,
.recharge-modal-custom .has-recharge-area {
    width: 350px;
    min-width: 350px;
}
.recharge-modal-custom .retrieve-area {
    width: 208px;
    min-width: 208px;
}
.recharge-modal-custom .all-goods-area {
    width: 71%;
}
.recharge-modal-custom .all-retrieve-area {
    width: 27%;
}

.recharge-modal-custom .not-recharge-area,
.recharge-modal-custom .has-recharge-area,
.recharge-modal-custom .retrieve-area {
    display: flex;
    flex-direction: column;
}

.per-area-title {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}

.per-area-title .per-area-tip {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    margin-left: 6px;
}

.per-area-title .per-area-action {
    font-size: 12px;
    font-weight: 400;
    padding: 4px 8px;
    min-width: 60px;
    text-align: center;
    border: 2px solid var(--primary);
    border-radius: 6px;
    background: var(--primary);
    color: #ffffff;
    margin: 0 4px;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    transition: all 0.2s;
    user-select: none;
}
.per-area-title .per-area-action.red-action {
    border: 2px solid var(--red);
    background: transparent;
    color: var(--red);
}
.per-area-title .per-area-action:hover {
    filter: brightness(1.15);
}
.per-area-title .per-area-action:active {
    filter: brightness(0.9) !important;
}

.per-area-wrap {
    padding: 10px;
    background: #f5f5f6;
    border-radius: 10px;
    border: 2px solid var(--primary);
    min-height: 340px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.per-area-wrap#retrieve_drag_area {
    justify-content: center !important;
    align-items: center;
}

.per-area-wrap .recharge-product-preview.preview-wrap {
    width: 158px;
    height: 98px;
    box-shadow: none;
    margin-bottom: 12px;
}
.per-area-wrap .recharge-product-preview.preview-wrap .item-top {
    padding-bottom: 14px;
}
.per-area-wrap .recharge-product-preview.preview-wrap .item-dot {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
}
.per-area-wrap .recharge-product-preview.preview-wrap .item-title {
    font-size: 14px;
}
.per-area-wrap .recharge-product-preview.preview-wrap .item-desc {
    margin-top: 4px;
    font-size: 12px;
}
.per-area-wrap .recharge-product-preview.preview-wrap .item-bottom {
    padding: 3px;
    height: 24px;
    font-size: 10px;
}
.per-area-wrap .recharge-product-preview.preview-wrap .item-finger {
    width: 24px;
    height: 24px;
}
.per-area-wrap .recharge-product-preview.preview-wrap.retrieve-modal {
    border-radius: 5px;
    padding: 10px 7px;
}
.per-area-wrap .recharge-product-preview.preview-wrap.retrieve-modal .retrieve-modal-bg {
    width: 214px;
    height: 199px;
}
.per-area-wrap .recharge-product-preview.preview-wrap.retrieve-modal .retrieve-title {
    top: 30px;
    font-size: 12px;
}
.per-area-wrap .recharge-product-preview.preview-wrap.retrieve-modal .retrieve-desc {
    top: 62px;
    font-size: 15px;
}
.per-area-wrap .recharge-product-preview.preview-wrap.retrieve-modal .retrieve-tip {
    top: 105px;
    font-size: 12px;
    padding: 4px 10px;
    min-width: 100px;
}
.per-area-wrap .recharge-product-preview.preview-wrap.retrieve-modal .retrieve-btn {
    top: 172px;
    font-size: 12px;
    padding: 4px 10px;
    width: 120px;
}
.moving {
    background: transparent !important;
    color: transparent !important;
    border: 2px dashed #666666;
}
.moving * {
    opacity: 0;
}
.dragging {
    opacity: 1 !important;
}
.dragging * {
    opacity: 1 !important;
}
.drag-over {
    outline: 4px dashed var(--primary) !important;
    border-color: transparent !important;
}

.swal2-popup.swal2-modal {
    margin-top: auto !important;
}

.custom-layer-move {
    display: block !important;
    background: rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
    z-index: 99998 !important;
    cursor: default !important;
}
.custom-layer-modal {
    z-index: 99999 !important;
    width: 30% !important;
}