:root {
    --arc-size: 50px;
}

.yq-timerow{
    width:100%;
    position:relative;
    overflow: hidden;
	margin-bottom:0px !important;
}

.yq-v-segment{
    position:absolute;
    left:0px;
    top:0px;
    height: calc(100% - var(--arc-size));
    width: var(--arc-size);
    display:flex;
    justify-content: center;
    align-items: start;
    overflow: hidden;

    svg{
        width: 5px;
        transform: scaleY(0);
        transform-origin: 0% 50%;
    }
}

.yq-h-segment{
    position:absolute;
    left: var(--arc-size);
    bottom: 0px;
    width: calc(100% - (var(--arc-size)*2));
    height: var(--arc-size);
    display:flex;
    align-items: center;
    transform-origin: 0% 50%;
    overflow: hidden;

    svg{
        height: 5px;
        transform: scaleX(0);
        transform-origin: 0% 50%;
    }
}

.yq-arc{
    position:absolute;
    width: var(--arc-size);
    height: var(--arc-size);
    bottom:0px;
    left:0px;
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
}

.yq-antiarc{
    position:absolute;
    width: var(--arc-size);
    height: var(--arc-size);
    bottom:0px;
    right:0px;
    transform: rotate(180deg);
    stroke-dasharray: 17;
    stroke-dashoffset: -17;
}

.yq-timeline-div{
    width:100%;
    height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:100;
}

.yq-timerow:nth-child(2n) .yq-timeline-div{
    
    transform: scaleX(-1);
}