@-webkit-keyframes rot {
        from {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    .rotation {
        -webkit-animation: rot 8s linear 0s infinite;
        animation: rot 8s linear 0s infinite;
    }
    .audio-image {
        background: url('../images/cd.png') no-repeat center;
        background-size: 100%;
    }
    .progress {
        background: white;
        height: 10px;
        /*-webkit-box-shadow: 0 1px 2px rgb(0 0 0 / 50%) inset;*/
        /*box-shadow: 0 1px 2px rgb(0 0 0 / 50%) inset;*/
        overflow: hidden;
        border-radius: 9999px;
        position: relative;
        cursor: pointer;
    }
    .progress .back {
        height: 100%;
        border-radius: 2px;
        background: rgb(183, 211, 12);
    }
    .progress .pointer {
        width: 10px;
        height: 16px;
        background: #ffdc19;
        border-radius: 40%;
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        -o-transition: opacity 0.3s;
        transition: opacity 0.3s;
        position: absolute;
        top: -3px;
         left: 0;
    }
    .playing {color: black}

    /* audio effects switch */
    #effect_switch{ display: none; }
    .button-label{
        position: relative;
        display: inline-block;
        width: 64px;
        height: 20px;
        background-color: #b7b7b7;
        box-shadow: #b7b7b7 0 0 0 2px;
        border-radius: 30px;
        overflow: hidden;
        cursor: pointer;
    }
    .circle{
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
    }
    .button-label .text {
        line-height: 20px;
        font-size: 16px;
        vertical-align: super;
    }

    .on { color: #fff; display: none; text-indent: 8px;background: #28a745;}
    .off { color: #fff; display: inline-block; text-indent: 25px;}
    .button-label .circle{
        left: 0;
        transition: all 0.3s;
    }
    #effect_switch:checked + label.button-label .circle{
        left: 44px;
    }
    #effect_switch:checked + label.button-label .on{ display: inline-block; }
    #effect_switch:checked + label.button-label .off{ display: none; }
    #effect_switch:checked + label.button-label{
        background-color: #28a745;
        box-shadow: #28a745 0 0 0 2px;
    }
    
.listswidth{width:628px;}
@media (max-width: 680px){
    .listswidth{width:100%;}
}