.music_area{
    position: relative;
    margin-top: -148px;
    @media #{$mobile_device}{
        background: #000;
        margin-top: 0;
        padding-bottom: 30px;
    }
    .audioplayer {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        margin: 1em 0;
        padding: 0 24px;
        width: 100%;
        height: auto;
        align-items: center;
        border: 1px solid #DDE2E6;
        border-radius: 4px;
        background: transparent;
        margin: 0;
        padding: 0;
        border: none;
    }
    .audioplayer-time-current {
        margin-left: 24px;
        display: none;
    }
    .audioplayer-bar-played {
        flex-direction: row-reverse;
        z-index: 2;
        height: 8px;
        background: #615CFD;
        border-radius: 30px;
    }
    .audioplayer-bar-loaded {
        z-index: 1;
        height: 2px;
        background: #DDE2E6;
        border-radius: 30px;
    }
    .audioplayer-bar-played::after {
        display: flex;
        position: absolute;
        content: '';
        box-sizing: border-box;
        top: -5px;
        right: -1px;
        margin-right: -5px;
        width: 12px;
        height: 12px;
        background-color: #fff;
        border-radius: 6px;
        display: none;
    }
    .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
        content: '';
        justify-content: center;
        width: 0;
        height: 0;
        margin-left: 2px;
        border-top: 7px solid transparent;
        border-right: none;
        border-bottom: 7px solid transparent;
        border-left: 12px solid #fff;
    }
    
    .audioplayer:not(.audioplayer-playing) .audioplayer-playpause {
        background: rgba(91, 130, 255, 0);
        border: 1px solid #fff;
    }
    .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a::after {
        left: 10px;
        top: 1px;
    }
    .audioplayer-bar {
        position: relative;
        display: flex;
        margin: 0 10px;
        height: 12px;
        flex-basis: 0;
        flex-grow: 1;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        display: flex;
        top: -3px;
        margin-right: 30px;
    }
    .audioplayer-bar::before {
        content: '';
        position: absolute;
        top: 5px;
        width: 100%;
        height: 8px;
        background-color: #333334;
        @include border-radius(30px);
    }
    .audioplayer-time-duration {
        margin-right: 24px;
        display: none;
    }
    .audioplayer-playpause {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        cursor: pointer;
        transition: all .2s ease-in-out;
    }
    .audioplayer-bar-loaded {
        z-index: 1;
        height: 8px;
        background: #333333;
        border-radius: 30px;
    }
    .audioplayer-volume-adjust > div {
        position: relative;
        display: flex;
        width: 60px;
        height: 8px;
        cursor: pointer;
        background-color: #333333 !important;
        border-radius: 30px;
    }
    .audioplayer-volume-adjust div div {
        position: absolute;
        top: 0;
        left: 0;
        height: 8px;
        background-color: #0059FF;
        border-radius: 30px;
    }
    .audioplayer-volume-adjust div div {
        position: absolute;
        top: 0;
        left: 0;
        height: 8px;
        background-color: #615CFD;
        border-radius: 30px;
    }
    .audioplayer-bar-loaded {
        z-index: 1;
        height: 2px;
        background: #DDE2E6;
        border-radius: 30px;
        display: none !important;
    }
    .music_field{
        @media #{$mobile_device}{
            margin-bottom: 30px;
        }
        .thumb{
            overflow: hidden;
            float: left;
            margin-right: 50px;
        }
        .audio_name{
            overflow: hidden;
            position: relative;
            top: 15px;
            @media #{$mobile_device} {
                overflow: inherit;
            }
            // flo
            .name{
                margin-bottom: 12px;
                h4{
                    font-size: 30px;
                    font-weight: 600;
                    margin-bottom: 0;
                    color: #fff;
                }
                p{
                    margin-bottom: 0;
                    font-size: 14px;
                    font-weight: 400;
                    color: #808080;
                }
            }
        }
    }
    .music_btn{
        text-align: right;
        @media #{$mobile_device}{
            text-align: left;
        }
    }
    &.music_gallery{
        margin-top: 0;
        padding-bottom: 50px;
        border-bottom: 1px solid #EFEFEF;
        padding-top: 145px;
        background: #fff;
        @media #{$mobile_device} {
            padding-top: 50px;
        }
        .audioplayer-bar-loaded {
            z-index: 1;
            height: 8px;
            background: #DFDEFF !important;
            border-radius: 30px;
        }
        &.inc_padding{
            padding-bottom: 130px;
            @media #{$mobile_device} {
                padding-bottom: 50px;
            }
            @media #{$tablet_device} {
                padding-bottom: 70px;
            }
        }
    }
    .audioplayer-volume-button a::before {
        width: 0;
        height: 0;
        border-top: none;
        border-right: none;
        border-bottom: noe;
        border-left: none;
        top: -8px;
        content: "\f100";
        font-family: Flaticon;
        color: #fff;
        font-weight: 900;
    }
}

.music_gallery .audioplayer-bar::before ,.music_gallery .audioplayer-volume-adjust > div {

	background-color: #DFDEFF;
}
.music_gallery .audioplayer:not(.audioplayer-playing) .audioplayer-playpause {
	background: rgba(91, 130, 255, 0);
	border: 1px solid #615CFD !important;
}
.music_gallery .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
	border-left: 12px solid #615CFD !important;
}
.music_gallery .music_field .audio_name .name h4 {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 0;
	color: #001D38;
}
.music_gallery .audioplayer-volume-button a:before {
    width: 0;
    height: 0;
    border-top: none;
    border-right: none;
    border-bottom: noe;
    border-left: none;
    top: -4px;
    content: "\f100";
    font-family: Flaticon;
    color: #615CFD;
    font-weight: 900;
}
.audioplayer-volume-button a {
	display: flex;
	width: 0;
	height: 8px;
	background-color: 0;
	position: relative;
}
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a::after {
	left: 10px;
	top: -2px;
	width: 6px;
	height: 6px;
	border: 6px double #9A9FB0;
	border-width: 6px 6px 0 0;
	border-radius: 0 12px 0 0;
	transform: rotate(45deg);
	display: none;
}
.music_gallery .audioplayer-volume-button a::before {
	width: 0;
	height: 0;
	border-top: none;
	border-right: none;
	border-bottom: noe;
	border-left: none;
	top: -8px;
	content: "\f100";
	font-family: Flaticon;
	color: #615CFD;
	font-weight: 900;
}
.music_gallery .audioplayer-volume-adjust > div {
	position: relative;
	display: flex;
	width: 80px;
	height: 8px;
	cursor: pointer;
	background-color: #DFDEFF !important;
	border-radius: 30px;
}