.setting-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 60px;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
}

.circle-player {
    width: 50%;
    /*padding: 20px;*/
    position: relative;
    height: 60px;
    cursor: pointer;
    float: left;
}
.repeat-player {
    width: 50%;
    /*padding: 20px;*/
    position: relative;
    height: 60px;
    cursor: pointer;
    float: left;
}

.circle-player svg {
    position: absolute;
    left: 0;
}
.repeat-player svg {
    position: absolute;
    left: 0;
}

.circle-player .play-icon {
    width: 36px;
    height: 36px;
    top: 12px;
    left: 12px;
}
.repeat-player .repeate-icon {
    width: 36px;
    height: 36px;
    top: 19px;
    left: 19px;
}
.circle-player .play-icon.play {
    left: 13px;
}

#circle {
    width: 60px;
    height: 60px;
}

#circle circle {
    stroke-width: 3.5px;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    fill: transparent;
}

#circle #disk {
    fill: white;
}

#circle #pad {
    stroke: #93d68a;
}

#circle #bar {
    stroke: #c0e0de;
    display: none;
}

.repeat-play svg{
    position: absolute;
}