<commit_before>body {
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.player {
    background: #F7F7F7;
    font-family: 'Verdana';
    font-size: 12px;
}

.player .progress-bar {
    width: 100%;
    border: none;
}

.player .progress-bar[value] {
    /* Reset the default appearance */
    /*  -webkit-appearance: none;
*/
    appearance: none;
    width: 250px;
    height: 20px;
}

button {
    color: transparent;
    width: 16px;
    height: 16px;
    border: none;
    box-shadow: none;
    font-size: 0;
    outline-style: none;
    cursor: pointer;
    background: none;
}


/*
button#pause {
    background: url(images/pause.png) no-repeat;
}

button#play {
    background: url(images/play.png) no-repeat;
}
*/

button#speaker {
    background: url(images/speaker.png) no-repeat;
        vertical-align: middle;
}

button#speaker.mute {
    background: url(images/speaker-mute.png) no-repeat;
}

button#loop {
    background: url(images/loop.png) no-repeat;
        vertical-align: middle;
}

button#loop.active {
    background: url(images/loop-active.png) no-repeat;
}

.time {
    position: absolute;
    left: 511px;
    top: 130px;
    font-size: 11px;
}

.radial-progress {
    position: relative;
    width: 170px;
    height: 170px;
    background-color: #d6dadc;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
    width: 170px;
    height: 170px;
    position: absolute;
    border-radius: 50%;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill {
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 1s;
    transition: -ms-transform 1s;
    transition: transform 1s;
}

.radial-progress .circle .mask {
    clip: rect(0px, 170px, 170px, 85px);
}

.radial-progress .circle .mask .fill {
    clip: rect(0px, 85px, 170px, 0px);
    background-color: #97a71d;
}

.radial-progress .inset {
    width: 140px;
    height: 140px;
    position: absolute;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #fbfbfb;
    border-radius: 50%;
}

.play {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;<commit_msg>Design<commit_after>body {
    margin: 0 auto;
    position: relative;
    text-align: center;
    color: #203765;
}

.player {
    background: #F7F7F7;
    font-family: 'Verdana';
    font-size: 12px;
}

.player .progress-bar {
    width: 100%;
    border: none;
}

.player .progress-bar[value] {
    /* Reset the default appearance */
    /*  -webkit-appearance: none;
*/
    appearance: none;
    width: 250px;
    height: 20px;
}

button {
    color: transparent;
    width: 16px;
    height: 16px;
    border: none;
    box-shadow: none;
    font-size: 0;
    outline-style: none;
    cursor: pointer;
    background: none;
}


/*
button#pause {
    background: url(images/pause.png) no-repeat;
}

button#play {
    background: url(images/play.png) no-repeat;
}
*/

button#speaker {
    background: url(images/speaker.png) no-repeat;
        vertical-align: middle;
}

button#speaker.mute {
    background: url(images/speaker-mute.png) no-repeat;
}

button#loop {
    background: url(images/loop.png) no-repeat;
        vertical-align: middle;
}

button#loop.active {
    background: url(images/loop-active.png) no-repeat;
}

.time {
    position: absolute;
    left: 511px;
    top: 130px;
    font-size: 11px;
}

.radial-progress {
    position: relative;
    width: 170px;
    height: 170px;
    background-color: #91b4e5;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
    width: 170px;
    height: 170px;
    position: absolute;
    border-radius: 50%;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill {
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 1s;
    transition: -ms-transform 1s;
    transition: transform 1s;
}

.radial-progress .circle .mask {
    clip: rect(0px, 170px, 170px, 85px);
}

.radial-progress .circle .mask .fill {
    clip: rect(0px, 85px, 170px, 0px);
    background-color: #3a66c5;
}

.radial-progress .inset {
    width: 140px;
    height: 140px;
    position: absolute;
    margin-left: 15px;
    margin-top: 15px;
    background-color: #fbfbfb;
    border-radius: 50%;
}

.play {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
{'fraction_non_alphanumeric': 0.1383229680463221, 'fraction_numerical': 0.040531846450782755, 'mean_word_length': 2.7282174260591527, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6655682', 'n_tokens_mistral': 1848, 'n_tokens_neox': 1670, 'n_words': 385}