.dots {
    display: flex;
    height: 0px;
    float: left;
    flex-direction: row-reverse;
    position: relative;
    top: -5px;
}

.dotsreverse {
    flex-direction: row;
    float: right;
}

.dot {
    margin: 4px;
    background-color: var(--color-orange-a50);
    border-radius: 100%;
    display: inline-block;
    position: relative;
}

.dots .dot:nth-child(n) {
    top: -4px;
    width: 3px;
    height: 3px;
}

.dots .dot:nth-child(2n) {
    top: 4px;
    width: 3px;
    height: 3px;
}

.dots .dot:nth-child(1){width:4px;height:4px;top:5px;right:0px;opacity:100%;}
.dots .dot:nth-child(2){width:2px;height:2px;top:4px;right:-2px;opacity:96%;}
.dots .dot:nth-child(3){width:4px;height:4px;top:-5px;right:0px;opacity:92%;}
.dots .dot:nth-child(4){width:3px;height:3px;top:-4px;right:0px;opacity:88%;}
.dots .dot:nth-child(5){width:3px;height:3px;top:4px;right:-4px;opacity:84%;}
.dots .dot:nth-child(6){width:2px;height:2px;top:-6px;right:0px;opacity:80%;}
.dots .dot:nth-child(7){width:2px;height:2px;top:3px;right:0px;opacity:76%;}
.dots .dot:nth-child(8){width:3px;height:3px;top:-4px;right:-2px;opacity:72%;}
.dots .dot:nth-child(9){width:4px;height:4px;top:5px;right:0px;opacity:68%;}
.dots .dot:nth-child(10){width:3px;height:3px;top:-6px;right:6px;opacity:64%;}
.dots .dot:nth-child(11){width:2px;height:2px;top:3px;right:-6px;opacity:60%;}
.dots .dot:nth-child(12){width:4px;height:4px;top:5px;right:0px;opacity:56%;}
.dots .dot:nth-child(13){width:2px;height:2px;top:4px;right:-2px;opacity:52%;}
.dots .dot:nth-child(14){width:2px;height:2px;top:-3px;right:0px;opacity:48%;}
.dots .dot:nth-child(15){width:2px;height:2px;top:4px;right:0px;opacity:44%;}

.borderBottomSep {
    position: relative;
}

.borderBottomSep:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    height: 1px;
    width: 50%;
    background: linear-gradient(
	90deg,
	var(--color-orange-a50) 50%,
	rgba(0, 0, 0, 0) 95%,
	rgba(0, 0, 0, 0) 100%
	);
}

.borderBottomSep:after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: -1px;
    height: 1px;
    width: 50%;
    background: linear-gradient(
	270deg,
	var(--color-orange-a50) 50%,
	rgba(0, 0, 0, 0) 95%,
	rgba(0, 0, 0, 0) 100%
	);
}
