.ps-steps {
    position: relative;
    width: 100%;
    /* background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAABCAYAAADErm6rAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAAQAAAACPxYBeAAAAFUlEQVQIHWNgIAGcvf64HoRJ0MIAACaUBg3AG3+SAAAAAElFTkSuQmCC);
    background-repeat: repeat-y;
    background-size: 24px;
    background-position-y: 100px;
    background-position-x: 16px; */
}
.ps-steps--top{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 16px;
    z-index: 10;
    background: #ffffff;
}
.ps-steps--bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 16px;
    z-index: 10;
    background: #ffffff;
}
.ps-steps-item {
    position: relative;
    margin-bottom: 8px;
    z-index: 100;
}

.ps-steps-item--head {
    padding-left: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 64px;
    border-radius: 4px;
}


.ps-steps-item--head-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 12px;
    color: #666666;
    border-radius: 50%;
    /* border: 6px solid #ffffff; */
    background: rgba(242, 243, 245, 1);
}
.ps-steps-item--head-desc{
    padding-left: 12px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    box-sizing: border-box;
}

.ps-steps-item--body{
    padding-left: 56px;
    width: 100%;
    height: 0px;
    overflow: hidden;
    box-sizing: border-box;
}

/* .ps-steps-item--head.is-edit:hover {
    background: #F2F4F6;
    cursor: pointer;
} */
.ps-steps-item--head .ps-steps-item--head-icon font{
    display: inline-block;
}
.ps-steps-item--head .ps-steps-item--head-icon i{
    display: none;
}
.ps-steps-item--head.is-edit .ps-steps-item--head-icon i{
    display: inline-block;
    color: rgba(0, 204, 150, 1);
}
.ps-steps-item--head.is-edit .ps-steps-item--head-icon font{
    display: none;
}
.ps-steps-item--head.is-complete .ps-steps-item--head-icon{
    background: rgba(0, 204, 150, 0.1);
}
.ps-steps-item--head.is-complete .ps-steps-item--head-icon font{
    color: rgba(0, 204, 150, 1);
}
.ps-steps-item--head.is-checked .ps-steps-item--head-icon{
    background: #0075FF;
}
.ps-steps-item--head.is-implement .ps-steps-item--head-icon{
    background: rgba(0, 204, 150, 1);
}
.ps-steps-item--head.is-implement .ps-steps-item--head-icon font{
    color: rgba(255, 255, 255, 1);
}
.ps-steps-item--head.is-implement .ps-steps-item--head-desc{
    font-weight: 600;
}
.ps-steps-item--head.is-edit.is-implement .ps-steps-item--head-icon i{
    color: rgba(255, 255, 255, 1);
}

.ps-steps-item--body.is-complete{
    height: 0px;
    overflow: hidden;
}
.ps-steps-item--body.is-implement{
    height: auto;
}
.ps-steps-item--body.is-checked{
    height: auto;
}

.ps-steps.ps-steps--horizontal{
    display: flex;
    background: unset;
}
.ps-steps.ps-steps--horizontal .ps-steps-line{
    width: 60px;
    height: 2px;
    background: #E7ECF3;
    margin-left: 36px;
}
.ps-steps-item:nth-last-of-type(1) .ps-steps-line{
   display: none;
}

.ps-steps.ps-steps--vertical .ps-steps-item--body{
    border-left: 2px solid #E7ECF3;
    margin-left: 25px;
    min-height: 60px;
}
.ps-steps.ps-steps--vertical .ps-steps-item--body.is-implement .body-content{
    display: block;
}
.ps-steps.ps-steps--vertical .ps-steps-item--body .body-content{
    display: none;
}
.ps-steps.ps-steps--vertical .ps-steps-item:nth-last-of-type(1) .ps-steps-item--body{
    border-left: unset;
    min-height: unset;
}
.ps-steps.ps-steps--vertical .ps-steps-item--body{
    padding-left: 25px;
}