/*********** AUDIO ***********/

.right *{
    box-sizing: border-box;
}

/**** right part ****/

.right{
    direction: ltr;
    width: 100%;
    position: fixed;
    bottom: -220px;
    left: 0px;
    box-sizing: border-box;
    background: rgba(25,28,36,0.9);
    transition: all 0.3s ease-in-out;
    z-index: 5;
}

.duration{
    width: calc(100% - 12px);
    height: 8px;
    position: static;
}

#duration_slider{
    -webkit-appearance: none;
    width: calc(100% + 12px);
    height: 4px;
    position: absolute;
    top: -2px;
    left: 0px;
    cursor: pointer;
    background: #5c5d73;
}

.progress_Audio{
    width: 0%;
    height: 4px;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
    background: linear-gradient(to right, #99ab50, #dad828) repeat scroll 0% 0%;
}

.thumb_Audio{
    width: 12px;
    height: 12px;
    position: absolute;
    top: -4px;
    left: 0px;
    pointer-events: none;
    border-radius: 50%;
    background: #fff;
}

#duration_slider::-moz-range-thumb {
    opacity: 0;
}

#duration_slider::-webkit-slider-thumb{
    opacity: 0;
}


.AKD-contAudio{
    width: 100%;
    padding: 22px 45px;
    display: flex;
    justify-content: space-around;
	align-items: center;
    transition: all 0.3s ease-in-out;
}

.AKD-nameAudio{
    direction: rtl;
    width: 25%;
    padding-right: 30px;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.AKD-nameAudio img{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 16px;
    right: 0px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}

#title{
    margin: 0px 0px 5px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

#artist{
    margin: 0px;
    font-size: 12px;
    font-weight: 200;
    color: #7a7c9b;
}

.right .middle{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.right .middle button{
    height: 34px;
    width: 34px;
    padding: 0px;
    margin: 0px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    outline: none;
    color:#6c6d85;
    font-size: 24px;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
}

#play{
    width: 54px;
    height: 54px;
    color:#fff;
    font-size: 18px;
    background: -webkit-linear-gradient(left, #99ab50, #dad828);
}

/*** volume part ***/

.AKD-AttrAudio {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.volume {
    width: 42px;
    height: 42px;
    padding-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: #50535e;
    transition: all 0.3s ease-in-out;
}

.volume i {
    position: absolute;
    left: 9px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    background: -webkit-linear-gradient(left, #99ab50, #dad828);
    background-clip: border-box;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.left_Activ .fa-volume-up::before {
    content: "\f2e2";
    color: #888;
    -webkit-text-fill-color: #888;
    -moz-text-fill-color: #888;
}

#volume {
    -webkit-appearance: none;
    width: 110px;
    height: 4px;
    margin-right: 20px;
    display: inline-block;
    position: absolute;
    left: 75px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#volume::-moz-range-thumb {
    opacity: 0;
}

#volume::-webkit-slider-thumb{
    opacity: 0;
}

.volume:hover {
    width: 167px;
}

.volume:hover #volume {
    left: 40px;
}

#auto,
#shuffle{
    height: 42px;
    width: 42px;
    padding-top: 2px;
    margin: 0px 16px;
    display: flex;
    justify-content: center;
	align-items: center;
    position: relative;
    top: 0px;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    background: #50535e;
    transition: all 0.3s ease-in-out;
}

#shuffle{
    margin: 0px 0px 0px 16px;
}

#auto:hover{
    top: -4px;
}

#shuffle:hover{
    top: -4px;
}

.auto_replay i:before{
    background: -webkit-linear-gradient(left, #99ab50, #dad828);
    background-clip: border-box;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.sh_play i:before{
    background: -webkit-linear-gradient(left, #99ab50, #dad828);
    background-clip: border-box;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.cont_speed{
    direction: rtl;
    position: relative;
}

.level_speed{
    width: 100px;
    height: 0px;
    padding: 3px 10px 42px 13px;
    margin: 0px;
    position: absolute;
    bottom: 4px;
    right: 0px;
    border-radius: 20px;
    overflow: hidden;
    list-style: none;
    opacity: 0;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: rgba(108,109,133,0.85);
    transition: all 0.3s ease-in-out;
}

.level_speedActiv{
    height: 203px;
    opacity: 1;
}

.Item_speed {
    width: 100%;
    margin: 8px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.item_Activ{
    color: #83be03;
}

#speed {
    width: 100px;
    height: 42px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0px;
    outline: none;
    border: 0px;
    border-radius: 22px;
    cursor: pointer;
    background: #50535e;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

#speed:hover{
    top: -4px;
}

#speed.speedActiv{
    top: 0px;
}

#speed span{
    display: flex;
    justify-content: space-between;
	align-items: center;
    font-size: 14px;
    font-weight: 500;
    background: -webkit-linear-gradient(left, #99ab50, #dad828);
    background-clip: border-box;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

#speed .Num_speed{
    width: 34px;
    height: 34px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
	align-items: center;
    border-radius: 50%;
    background: #303239;
    transition: all 0.3s ease-in-out;
}

#speed strong {
    margin-right: 5px;
    font-size: 17px;
    font-weight: 500;
}

.timclass{
    position: absolute;
    top: 16px;
    font-size: 14px;
    color: #fff;
}

#tim1{
    left: 16px;
}

#tim2{
    right: 16px;
}

/*********** Activ *************/

.ma-center_Activ {
    padding-bottom: 130px !important;
}

.right_Activ {
    bottom: 0px;
}

#AnimIcon {
    width: 45px;
    margin: 0px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    text-align: center;
    font-size: 18px;
}

#AnimIcon > div{
    width: 2px;
    height: 100px;
    margin-left: 2px;
    border-radius: 3px;
    background-color: #fff;
/*    background: linear-gradient(100deg, rgb(78, 149, 250), rgb(161, 26, 254) 90%);*/
}

.Activ_Anim > div{
    animation: wave_A 1.4s linear infinite;
}

#AnimIcon > .Wave_1 {
    animation-delay: 1.4s !important;
    height: 5px;
}

#AnimIcon > .Wave_2 {
    animation-delay: 1.2s !important;
    height: 22px;
}

#AnimIcon > .Wave_3 {
    animation-delay: 1.0s !important;
    height: 15px;
}

#AnimIcon > .Wave_4 {
    animation-delay: 0.8s !important;
    height: 27px;
}

#AnimIcon > .Wave_5 {
    animation-delay: 0.6s !important;
    height: 16px;
}

#AnimIcon > .Wave_6 {
    animation-delay: 0.4s !important;
    height: 8px;
}

#AnimIcon > .Wave_7 {
    animation-delay: 0.3s !important;
    height: 4px;
}

@keyframes wave_A {
    0%{transform: scaleY(0.1);}
    50%{transform: scaleY(1.3);}
    100%{transform: scaleY(0.1);}
}

.listMinue {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 35px;
    left: -100px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    font-size: 22px;
    color: #fff;
    background-color: #6c6d85;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.listMinue i{
    position: relative;
    transition: all 0.3s ease-in-out;
}

.listMinue .far{
    right: 0px;
    opacity: 1;
}

.listMinue .fas{
    position: absolute;
    left: -50px;
    opacity: 0;
    font-size: 26px;
}

.listIcon_Activ .far{
    position: absolute;
    right: -50px;
    opacity: 0;
}

.listIcon_Activ .fas{
    position: relative;
    left: 0px;
    opacity: 1;
}

#artist{
    display: none;
}


@media only screen and (max-width: 1700px) {
    .right .middle {
        width: auto;
    }

    .AKD-AttrAudio,
    .AKD-nameAudio{
        width: 400px;
    }
}

@media only screen and (max-width: 1200px) {

    .AKD-AttrAudio,
    .AKD-nameAudio{
        width: 350px;
    }

    .volume:hover #volume {
        left: 36px;
    }

    #volume{
        width: 80px;
    }

    .volume:hover {
        width: 132px;
    }

    #auto {
        margin: 0px 10px;
    }

    #shuffle {
        margin: 0px 0px 0px 10px;
    }

    .right .middle button {
        margin: 0px 8px;
    }
}

@media only screen and (max-width: 1065px) {

    .AKD-AttrAudio,
    .AKD-nameAudio {
        width: 333px;
    }

    #volume {
        width: 70px;
    }

    .volume:hover {
        width: 117px;
    }

    .right .middle button {
        margin: 0px 7px;
    }
}

@media only screen and (max-width: 1020px){

    .listMinue {
        left: 16px;
    }

    .AKD-contAudio {
        min-height: 110px;
        padding: 25px 16px;
        justify-content: space-around;
    }

    .middle,
    .AKD-AttrAudio {
        margin: auto;
        position: absolute;
        top: 28px;
        right: 0px;
        left: 0px;
    }

    .AKD-nameAudio {
        width: max-content;
        min-height: 60px;
        padding: 0px;
        position: absolute;
        top: 26;
        right: 16px;
    }

    .volume {
        display: none;
    }

    .cont_nam {
        display: none;
    }

    .AKD-AttrAudio {
        width: 214px;
        min-height: 60px;
        opacity: 1;
    }

    .right_Activ {
        min-height: 118px;
    }

    .AttrAudio_Activ {
        position: absolute;
        left: -400px;
        opacity: 0;
    }

    .Audio_rightMove {
        position: absolute;
        right: -400px;
        opacity: 0;
        pointer-events: none;
    }

    .timclass{
        top: 12px;
    }

    #AnimIcon {
        margin: 0 auto;
    }

    .right .middle button {
        margin: 0px 10px;
    }

    #play {
        height: 60px;
        width: 60px;
    }

}

@media only screen and (max-width: 620px){

    .right .middle button {
        height: auto;
        width: auto;
        margin: 0px 8px;
    }

}

@media only screen and (max-width: 350px){

    .right .middle button {
        margin: 0px 7px;
    }

}

/*
@media only screen and (max-width: 1100px) {

    .volume:hover #volume {
        left: 36px;
    }

    #volume{
        width: 80px;
    }

    .volume:hover {
        width: 132px;
    }

}
*/

/*
@media only screen and (max-width: 1020px) {

    .AKD-contAudio {
        justify-content: space-between;
    }

    .AKD-nameAudio {
        width: 300px;
    }

    .right .middle {
        width: max-content;
    }

    .AKD-AttrAudio {
        width: 300px;
    }

    .right .middle button {
        margin: 0px 6px;
    }
}

@media only screen and (max-width: 940px) {

    .timclass{
        top: 12px;
    }

    .AKD-contAudio {
        padding: 22px 45px;
    }

    .AKD-AttrAudio {
        justify-content: flex-start;
    }

    .AKD-nameAudio {
        justify-content: flex-start;
    }

}

@media only screen and (max-width: 888px){

    .middle,
    .AKD-AttrAudio{
        margin: auto;
        position: absolute;
        top: 28px;
        right: 0px;
        left: 0px;
    }




    .AKD-nameAudio {
        width: max-content;
        min-height: 60px;
        position: absolute;
        top: 28;
        right: 16px;
    }

    .AKD-contAudio {
        min-height: 110px;
        padding: 25px 16px;
        justify-content: space-around;
    }

    .volume {
        display: none;
    }

    .cont_nam {
        display: none;
    }

    .AKD-AttrAudio {
        width: 164px;
        min-height: 60px;
        opacity: 1;
    }

    .right_Activ{
        min-height: 118px;
    }

    .AttrAudio_Activ {
        position: absolute;
        left: -400px;
        opacity: 0;
    }

    .listMinue{
        left: 16px;
    }

    .Audio_rightMove {
        position: absolute;
        right: -400px;
        opacity: 0;
        pointer-events: none;
    }

    .right .middle button {
        height: 60px;
        width: 60px;
    }

}


@media only screen and (max-width: 620px) {

}


*/

/*

sh_play
auto_replay
*/