#player {
    width: 100%;
    margin-top: 20px;
    height: 500px;
    margin: 0 30px auto auto !important;
}

.audio-player {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 0;
    margin: 0 auto;
    background-color: white;
    border: 1px solid black;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

    .audio-player .player-controls {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .audio-player #playAudio {
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        border: none;
        width: 30px;
        height: 30px;
        background: url("../image/play-buttton.png") no-repeat center;
        background-size: contain;
        margin: 0 20px;
    }

        .audio-player #playAudio.pause {
            background: url("../image/pause-buttton.png") no-repeat center;
            background-size: contain;
        }

    .audio-player p {
        margin: 0 10px 0 5px;
        line-height: 1;
        display: inline-flex;
    }

        .audio-player p small {
            font-size: 10px;
        }

    .audio-player #seekObjContainer {
        position: relative;
        width: 95%;
        margin: 0 5px;
        height: 10px;
    }

        .audio-player #seekObjContainer #seekObj {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #e3e3e3;
            border: 1px solid black;
        }

            .audio-player #seekObjContainer #seekObj #percentage {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                background-color: gray;
            }