@import "flashblock.css";

.kc-musicplayer {
    width: 230px;
    height: 230px;
    margin: 0 auto
}

.kc-musicplayer .sm2_link {
    display: none
}

.ui360,
.sm2-360ui {
    position: relative;
    width: 230px;
    height: 230px;
    min-width: 230px;
    min-height: 230px;
    margin: 0
}

.sm2-360ui {
    background-color: #f9f9f9;
    background-color: rgba(0, 0, 0, .025);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .15);
    border-radius: 100%;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    -webkit-transition-property: background, border, box-shadow;
    transition-property: background, border, box-shadow
}

.sm2-360ui:hover {
    background-color: rgba(0, 0, 0, .1);
    border-color: rgba(0, 0, 0, .15);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .15)
}

.ui360,
.ui360 * {
    vertical-align: middle
}

.sm2-360ui {
    position: relative;
    display: inline-block;
    float: left;
    *display: inline;
    clear: left
}

.sm2-360ui.sm2_playing,
.sm2-360ui.sm2_paused {
    z-index: 10
}

.ui360 a {
    float: left;
    display: inline;
    position: relative;
    color: #000;
    text-decoration: none;
    left: 3px;
    top: 18px;
    text-indent: 50px
}

.ui360 a.sm2_link {
    text-indent: 0
}

.ui360 a,
.ui360 a:hover,
.ui360 a:focus {
    padding: 2px;
    margin-left: -2px;
    margin-top: -2px
}

.ui360 a:hover,
.ui360 a:focus {
    background: #eee;
    border-radius: 3px;
    outline: none
}

.ui360 .sm2-canvas {
    position: absolute;
    left: 0;
    top: 0
}

.ui360 .sm2-canvas.hi-dpi {
    top: -50%;
    left: -50%;
    -webkit-transform: scale(.5);
    transform: scale(.5)
}

.ui360 .sm2-timing {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    margin: 0;
    font: 11px helvetica neue, helvetica, monaco, lucida, terminal, monospace;
    color: inherit;
    text-align: center;
    line-height: "../";
    color: inherit;
    font-size: 50px;
    line-height: 50px;
    top: 50%;
    margin-top: -25px;
    height: auto
}

.ui360 .sm2-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}

.ui360 .sm2-360btn {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 230px;
    height: 230px;
    margin-left: -50%;
    margin-top: -50%;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3
}

.ui360 .sm2-360data {
    display: inline-block;
    font-family: helvetica
}

.sm2-inline-block .ui360 .sm2-360btn,
.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    cursor: pointer
}

.ui360 .sm2-360ui.sm2_playing .sm2-cover,
.ui360 .sm2-360ui.sm2_paused .sm2-cover {
    display: block
}

.ui360 .sm2-360btn-default::after,
.ui360 .sm2-360ui.sm2_paused .sm2-360btn::after {
    display: block;
    cursor: pointer;
    font-size: 36px;
    font-family: dripicons-v2 !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e01a";
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -28px;
    margin-top: -28px;
    border: 8px solid #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    text-align: center;
    line-height: 65px;
    padding-left: 6px
}

.ui360 .sm2-360ui {
    cursor: pointer
}

.ui360 .sm2-360ui::after {
    display: block;
    cursor: pointer;
    font-size: 36px;
    font-family: dripicons-v2 !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e01a";
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -28px;
    margin-top: -28px;
    border: 8px solid #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    text-align: center;
    line-height: 65px;
    padding-left: 6px
}

.ui360 .sm2-360ui.sm2_dragging::after {
    display: none
}

.ui360 .sm2-360ui.sm2_dragging .sm2-360btn::after {
    display: none
}

.ui360 .sm2-360ui .sm2-360btn::after {
    display: none
}

.ui360 .sm2-360ui.sm2_playing::after {
    display: none
}

.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover::after {
    display: block;
    cursor: pointer;
    font-size: 36px;
    font-family: dripicons-v2 !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e01a";
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -28px;
    margin-top: -28px;
    border: 8px solid #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    text-align: center;
    line-height: 65px;
    padding-left: 6px
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover::after {
    display: block;
    cursor: pointer;
    font-size: 36px;
    font-family: dripicons-v2 !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\e01a";
    top: 50%;
    position: absolute;
    left: 50%;
    margin-left: -28px;
    margin-top: -28px;
    border: 8px solid #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    text-align: center;
    line-height: 65px;
    padding-left: 6px;
    content: "\e019";
    padding-left: 0
}

.ui360 .sm2-360ui.sm2_playing .sm2-timing {
    visibility: visible
}

.ui360 .sm2-360ui.sm2_buffering .sm2-timing {
    visibility: hidden
}

.ui360 .sm2-360ui .sm2-timing,
.ui360 .sm2-360ui .sm2-360btn:hover+.sm2-timing,
.ui360 .sm2-360ui.sm2_paused .sm2-timing {
    visibility: hidden
}

.ui360 .sm2-360ui.sm2_dragging .sm2-timing,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover+.sm2-timing {
    visibility: visible
}

.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover,
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover {
    background: 0 0;
    cursor: auto
}

.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
    background: transparent url(../icon_loading_spinner.gif) no-repeat 50% 50%;
    opacity: .5;
    visibility: visible
}

.sm2-inline-list .ui360,
.sm2-inline-block .ui360 {
    position: relative;
    display: inline-block;
    float: left;
    _display: inline
}

.sm2-inline-block .ui360 {
    margin-right: 8px
}

.sm2-inline-list .ui360 a {
    display: none
}

ul.ui360playlist {
    list-style-type: none
}

ul.ui360playlist,
ul.ui360playlist li {
    margin: 0;
    padding: 0
}

div.ui360 div.metadata {
    display: none
}

div.ui360 a span.metadata,
div.ui360 a span.metadata * {
    vertical-align: baseline
}

@media only screen and (min-width:1170px) {
    .kc-playervolume .ui360 .sm2-timing::before {
        font-size: 11px;
        text-transform: uppercase;
        content: "VOLUME";
        display: block;
        line-height: 10px;
        margin-top: -8px;
        clear: both
    }
}