@import "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css";

.screen-reader-text {
    /* Reusable, toolbox kind of class */
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.disabled {
    color: #fff;
    cursor: default;
}

.show {
    display: inline-block !important;
}



.audiocontainer {
    font-family: arial, helvetica, sans-serif;
    font-size: 1em;
    margin: 0 auto;
    width: 500px;
}

    .audiocontainer .player {
        height: 60px;
        margin: 0;
        position: relative;
        width: 400px;
        /* Small devices (tablets, 768px and up) */
        /* Medium devices (desktops, 992px and up) */
        /* Large devices (large desktops, 1200px and up) */
        *zoom: 1;
    }

@media (min-width: 768px) and (max-width: 991px) {
    .audiocontainer .player {
        width: 470px;
    }
}

@media (min-width: 992px) and (max-width: 1100px) {
    .audiocontainer .player {
        width: 470px;
    }
}

@media (min-width: 1200px) {
    .audiocontainer .player {
        width: 470px;
    }
}

.audiocontainer .player .large-toggle-btn {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    float: left;
    font-size: 1.5em;
    height: 50px;
    margin: 0 10px 0 0;
    overflow: hidden;
    padding: 5px 0 0 0;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    width: 54px;
}

    .audiocontainer .player .large-toggle-btn .large-play-btn {
        cursor: pointer;
        display: inline-block;
        position: relative;
        top: -14%;
        color:white;
    }

        .audiocontainer .player .large-toggle-btn .large-play-btn:before {
            content: "\f04b";
            font: 1.5em/1.75 "FontAwesome";
        }

    .audiocontainer .player .large-toggle-btn .large-pause-btn {
        cursor: pointer;
        display: inline-block;
        position: relative;
        top: -13%;
    }

        .audiocontainer .player .large-toggle-btn .large-pause-btn:before {
            content: "\f04c";
            font: 1.5em/1.75 "FontAwesome";
        }

.audiocontainer .player .info-box {
    bottom: 10px;
    left: 65px;
    position: absolute;
    top: 15px;
}

    .audiocontainer .player .info-box .track-info-box {
        float: left;
        font-size: 12px;
        margin: 0 0 6px 0;
        visibility: hidden;
        width: 400px;
        *zoom: 1;
    }

        .audiocontainer .player .info-box .track-info-box .track-title-text {
            display: inline-block;
        }

        .audiocontainer .player .info-box .track-info-box .audio-time {
            display: inline-block;
            padding: 0 0 0 5px;
            width: 80px;
        }

        .audiocontainer .player .info-box .track-info-box:before, .audiocontainer .player .info-box .track-info-box:after {
            content: " ";
            display: table;
        }

        .audiocontainer .player .info-box .track-info-box:after {
            clear: both;
            display: block;
            font-size: 0;
            height: 0;
            visibility: hidden;
        }

.audiocontainer .player .progress-box {
    float: left;
    min-width: 270px;
    position: relative;
}

    .audiocontainer .player .progress-box .progress-cell {
        height: 12px;
        position: relative;
    }

        .audiocontainer .player .progress-box .progress-cell .progress {
            background: #fff;
            border: 1px solid #d9d9d9;
            height: 8px;
            position: relative;
            width: auto;
        }

            .audiocontainer .player .progress-box .progress-cell .progress .progress-buffer {
                background: #337ab7;
                height: 100%;
                width: 0;
            }

            .audiocontainer .player .progress-box .progress-cell .progress .progress-indicator {
                background: #fff;
                border: 1px solid #bebebe;
                border-radius: 3px;
                cursor: pointer;
                height: 10px;
                left: 0;
                overflow: hidden;
                position: absolute;
                top: -2px;
                width: 22px;
            }

.audiocontainer .player .controls-box {
    bottom: 10px;
    left: 350px;
    position: absolute;
}

    .audiocontainer .player .controls-box .previous-track-btn {
        cursor: pointer;
        display: inline-block;
    }

        .audiocontainer .player .controls-box .previous-track-btn:before {
            content: "\f049";
            font: 1em "FontAwesome";
        }

    .audiocontainer .player .controls-box .next-track-btn {
        cursor: pointer;
        display: inline-block;
        color:white;
    }

        .audiocontainer .player .controls-box .next-track-btn:before {
            content: "\f050";
            font: 1em "FontAwesome";
        }

.audiocontainer .player:before, .audiocontainer .player:after {
    content: " ";
    display: table;
}

.audiocontainer .player:after {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.audiocontainer .play-list {
    display: block;
    margin: 0 auto 20px auto;
    width: 100%;
}

    .audiocontainer .play-list .play-list-row {
        display: block;
        margin: 10px 0;
        width: 100%;
        *zoom: 1;
    }

        .audiocontainer .play-list .play-list-row .track-title .playlist-track {
            color: #fff;
            text-decoration: none;
        }

            .audiocontainer .play-list .play-list-row .track-title .playlist-track:hover {
                text-decoration: underline;
            }

        .audiocontainer .play-list .play-list-row .small-toggle-btn {
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            cursor: pointer;
            display: inline-block;
            height: 20px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            text-align: center;
            vertical-align: middle;
            width: 20px;
        }

            .audiocontainer .play-list .play-list-row .small-toggle-btn .small-play-btn {
                display: inline-block;
                color:white;
            }

                .audiocontainer .play-list .play-list-row .small-toggle-btn .small-play-btn:before {
                    content: "\f04b";
                    font: 0.85em "FontAwesome";
                }

            .audiocontainer .play-list .play-list-row .small-toggle-btn .small-pause-btn {
                display: inline-block;
            }

                .audiocontainer .play-list .play-list-row .small-toggle-btn .small-pause-btn:before {
                    content: "\f04c";
                    font: 0.85em "FontAwesome";
                }

        .audiocontainer .play-list .play-list-row .track-number {
            display: inline-block;
            color:white;
        }

        .audiocontainer .play-list .play-list-row .track-title {
            display: inline-block;
        }

            .audiocontainer .play-list .play-list-row .track-title .playlist-track {
                text-decoration: none;
            }

                .audiocontainer .play-list .play-list-row .track-title .playlist-track:hover {
                    text-decoration: underline;
                }

            .audiocontainer .play-list .play-list-row .track-title.active-track {
                font-weight: bold;
            }

        .audiocontainer .play-list .play-list-row:before, .audiocontainer .play-list .play-list-row:after {
            content: " ";
            display: table;
        }

        .audiocontainer .play-list .play-list-row:after {
            clear: both;
            display: block;
            font-size: 0;
            height: 0;
            visibility: hidden;
        }