canvas {
    max-width : none !important;
}

#awp-wrapper {
    /*position:relative;*/
    min-width   : 320px;
    line-height : normal !important;
    max-width   : 960px;
    top         : 140px;
    margin      : 0 auto;
    font-family : Helvetica Neue, Helvetica, Arial, sans-serif;
}

.awp-player-thumb-wrapper {
    position : relative;
    width    : 100px;
    height   : 100px;
    float    : left;
    overflow : hidden;
}

.awp-player-thumb {
    position                    : absolute;
    width                       : 100px;
    height                      : 100px;
    border-radius               : 100%;
    overflow                    : hidden;
    -webkit-backface-visibility : hidden;
    -moz-backface-visibility    : hidden;
    -webkit-mask-image          : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.awp-player-thumb img {
    display   : block;
    position  : absolute;
    max-width : none;
    height    : 100%;
    width     : auto !important;
    min-width : 100px;
}

.awp-player-holder {
    position : relative;
    height   : 140px;
    overflow : hidden;
}


.awp-playback-toggle {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 50px;
    height   : 50px;
}

.awp-playback-toggle i {
    position    : absolute;
    width       : 50px;
    height      : 50px;
    font-size   : 30px !important;
    line-height : 50px !important;
    color       : #666 !important;
    text-align  : center;
    display     : inline-block;
}


.awp-info {
    position       : relative;
    pointer-events : none;
    left           : 55px;
    top            : 5px;
}

.awp-player-artist {
    font-size : 13px;
    color     : #555;
    margin    : 0;
    padding   : 0;
}

.awp-player-title {
    font-size     : 18px;
    color         : #666;
    display       : inline-block;
    margin        : 0;
    margin-bottom : 3px;
    padding       : 0;
}


.awp-waveform-wrap {
    position   : relative;
    margin-top : 20px;
    height     : 50px;
    overflow   : hidden;
}

.awp-waveform-preloader {
    position          : absolute;
    left              : 40%;
    top               : 50%;
    -webkit-transform : translate(-50%, -50%);
    -ms-transform     : translate(-50%, -50%);
    transform         : translate(-50%, -50%);
    color             : #aaa;
    font-size         : 18px;
    pointer-events    : none;
    opacity           : 0;
}

.awp-waveform-img {
    display        : none;
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    pointer-events : none;
}

.awp-waveform-img-load {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
}

.awp-waveform-img-progress-wrap {
    position     : absolute;
    top          : 0;
    left         : 0;
    width        : 0;
    height       : 100%;
    overflow     : hidden;
    border-right : 3px solid #0000ff;
}

.awp-waveform-img-progress {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
}

.awp-waveform-img-load img,
.awp-waveform-img-progress img {
    display : block;
    width   : 100%;
    height  : 100%;
}


.awp-icon-color {
    color              : #aaa !important;
    -webkit-transition : color 0.3s ease-in-out;
    transition         : color 0.3s ease-in-out;
}

.awp-icon-rollover-color {
    color              : #ffd454 !important;
    -webkit-transition : color 0.3s ease-in-out;
    transition         : color 0.3s ease-in-out;
}

.awp-contr-btn-i {
    position    : absolute;
    top         : 0;
    left        : 0;
    width       : 25px;
    height      : 25px;
    text-align  : center;
    display     : inline-block;
    font-size   : 15px !important;
    line-height : 25px !important;
}

.awp-media-time-current {
    position       : relative;
    left           : 5px;
    bottom         : 0;
    float          : left;
    margin         : 0 !important;
    padding        : 3px !important;
    color          : #aaa !important;
    font-size      : 13px !important;
    width          : auto;
    pointer-events : none;
}

.awp-media-time-total {
    position       : relative;
    right          : 5px;
    bottom         : 0;
    float          : right;
    margin         : 0 !important;
    padding        : 3px !important;
    color          : #aaa !important;
    font-size      : 13px !important;
    width          : auto;
    pointer-events : none;
}

.awp-volume-wrapper {
    position : absolute;
    width    : 80px;
    height   : 25px;
    top      : 8px;
    right    : 17px;
}

.awp-volume-seekbar {
    position     : absolute;
    bottom       : 10px;
    left         : 50%;
    margin-left  : -45px;
    width        : 90px;
    height       : 30px;
    cursor       : pointer;
    touch-action : none;
    background   : rgba(200, 54, 54, 0.01);
}

.awp-player-volume {
    position : absolute;
    width    : 25px;
    height   : 25px;
    left     : 0;
    top      : 0;
}

.awp-player-volume i {
    position    : absolute;
    width       : 25px;
    height      : 25px;
    font-size   : 18px !important;
    line-height : 25px !important;
    color       : #666 !important;
    text-align  : center;
    display     : inline-block;
}

.awp-volume-seekbar {
    position     : absolute;
    left         : 70px;
    top          : 4px;
    width        : 70px;
    height       : 16px;
    cursor       : pointer;
    touch-action : none;
}

.awp-volume-bg {
    position   : absolute;
    top        : 5px;
    left       : 10px;
    width      : 50px;
    height     : 5px;
    background : #AAAAAA;
}

.awp-volume-level {
    position   : absolute;
    top        : 5px;
    left       : 10px;
    width      : 0px;
    height     : 5px;
    background : #b1232c;
}


#awp-playlist-list {
    display : none;
}

.awp-playlist-holder {
    position : relative;
    top      : 0px;
    width    : 100%;
    overflow : hidden;
}

.awp-playlist-inner {
    margin     : 20px;
    min-height : 100px;
    max-height : 150px;
}

.awp-playlist-item {
    position    : relative;
    top         : 0px;
    left        : 0px;
    overflow    : hidden;
    line-height : 40px;
}

.awp-playlist-item > a {
    border : 0;
}

.awp-playlist-item:last-child {
    margin-bottom : 0px !important;
}

.awp-playlist-non-selected {
    float           : left;
    color           : #eee !important;
    text-decoration : none;
    margin-right    : 10px;
}

.awp-playlist-selected {
    float           : left;
    color           : #ffd454 !important;
    text-decoration : none;
    margin-right    : 10px;
}

.awp-playlist-title {
    font-size   : 14px;
    color       : #444;
    text-shadow : 1px 1px 3px #111;
}

.awp-download, .awp-link {
    float      : right;
    color      : #fff !important;
    font-size  : 13px !important;
    width      : 30px;
    text-align : center;
}

.awp-download i, .awp-link i {
    line-height : 40px;
    color       : inherit;
}

.awp-download:hover, .awp-link:hover {
    color : #ffd454 !important;
}


.awp-playlist-filter-msg {
    position    : absolute;
    top         : 0px;
    left        : 0px;
    width       : 100%;
    line-height : 140px;
    display     : none;
}

.awp-playlist-filter-msg p {
    font-size      : 15px !important;
    color          : #fff !important;
    vertical-align : middle !important;
    text-align     : center !important;
    padding        : 0 !important;
    margin         : 0 !important;
    line-height    : inherit !important;
}


.awp-bottom-bar {
    position   : relative;
    top        : 0px;
    clear      : both;
    height     : 30px;
    width      : 100%;
    overflow   : hidden;
    border-top : 1px solid #232323;
    margin-top : 30px;
}

.awp-search-filter {
    position              : relative;
    margin-left           : 20px;
    width                 : 125px !important;
    height                : 18px !important;
    top                   : 50%;
    margin-top            : -9px;
    padding               : 0 !important;
    border                : 0 !important;
    -moz-border-radius    : 0 !important;
    -webkit-border-radius : 0 !important;
    border-radius         : 0 !important;
    background            : #222 !important;
    color                 : #fff !important;
    box-shadow            : none !important;
    line-height           : 1 !important;
    float                 : left;
    outline               : none;
}

.awp-sr-bar-i {
    display     : inline-block;
    font-size   : 15px !important;
    line-height : 30px !important;
}

.awp-sort-alpha {
    position   : relative;
    left       : 5px;
    top        : 0px;
    width      : 25px;
    height     : 100%;
    text-align : center;
    float      : left;
}

.awp-share-item {
    position     : relative;
    top          : 0px;
    right        : 20px;
    width        : 25px;
    height       : 100%;
    margin-right : 5px;
    text-align   : center;
    float        : right;
}


.awp-tooltip {
    position       : absolute;
    background     : #222;
    text-align     : center;
    z-index        : 10000;
    border         : 1px solid #333;
    pointer-events : none;
}

.awp-tooltip p {
    width       : inherit;
    font-size   : 12px !important;
    color       : #999 !important;
    margin      : 0 5px !important;
    padding     : 0 !important;
    line-height : 20px !important;
    white-space : nowrap;
}

.awp-tooltip-num {
    direction : ltr !important;
}

.awp-download-confirm {
    position          : absolute;
    left              : 50%;
    top               : 50%;
    -webkit-transform : translate(-50%, -50%);
    -ms-transform     : translate(-50%, -50%);
    transform         : translate(-50%, -50%);
    border            : 1px solid #555;
    opacity           : 0;
    z-index           : 1000;
    display           : none;
}

.awp-download-confirm p {
    padding    : 10px 5px !important;
    font-size  : 14px;
    color      : #fff;
    background : #333;
    text-align : center;
}

.awp-preloader {
    position    : absolute;
    width       : 36px;
    height      : 30px;
    top         : 50%;
    left        : 50%;
    margin-left : -16px;
    margin-top  : -15px;
    background  : #111 url('/data/loading.gif') no-repeat center center;
}


.awp-hidden {
    opacity : 0;
    filter  : alpha(opacity=0);
}

.awp-visible {
    opacity            : 1;
    -webkit-transition : opacity 500ms ease-out;
    -moz-transition    : opacity 500ms ease-out;
    transition         : opacity 500ms ease-out;
}


/* scroll */
.awp-playlist-inner .mCSB_inside > .mCSB_container {
    margin-right : 30px;
}


@media (max-width : 860px) {

    .awp-player-thumb-wrapper {
        position : relative;
        width    : 70px;
        height   : 70px;
        float    : left;
        overflow : hidden;
    }

    .awp-player-thumb {
        position                    : absolute;
        width                       : 70px;
        height                      : 70px;
        border-radius               : 100%;
        overflow                    : hidden;
        -webkit-backface-visibility : hidden;
        -moz-backface-visibility    : hidden;
        -webkit-mask-image          : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    }

    .awp-player-thumb img {
        display   : block;
        position  : absolute;
        max-width : none;
        height    : 100%;
        width     : auto !important;
        min-width : 70px;
    }


}