body {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
}

.controls > button {
    background-color: #4d2c91;
    color: white !important;
    border-radius: 5px !important;
    text-transform: unset !important;
}
.controls > button:hover {
    background-color: #745AAA;
}
.controls > button[data-recording="true"] {
    background-color: #ff2038 !important;
}
.recordings > .row {
    width: auto;
    height: auto;
    padding: 0px;
    background: white !important;
}
.recordings > .row > audio {
    outline: none;
    background: white !important;
}
.recordings > .row > a {
    display: inline-block;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
    background-color: #0093E9;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#0093E9), to(#80D0C7));
    background-image: -o-linear-gradient(bottom, #0093E9 0%, #80D0C7 100%);
    background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
    float: right;
    margin-left: 20px;
    cursor: pointer;
}
.recordings > .row > a:hover {
    text-decoration: none;
}
.recordings > .row > a:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0093E9), to(#80D0C7));
    background-image: -o-linear-gradient(top, #0093E9 0%, #80D0C7 100%);
    background-image: linear-gradient(180deg, #0093E9 0%, #80D0C7 100%);
}