html,
body {
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
    font-weight: 300;
    direction: ltr;
    margin: auto;
    background-color: #2d2d2d;
    overflow: hidden;
    animation-name: fadeIn;
    animation-duration: 1s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/IRANSansWeb_Bold.eot');
    src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),
        /* IE6-8 */
        url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),
        /* FF39+,Chrome36+, Opera24+*/
        url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/eot/IRANSansWeb_Medium.eot');
    src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),
        /* IE6-8 */
        url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),
        /* FF39+,Chrome36+, Opera24+*/
        url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/eot/IRANSansWeb_Light.eot');
    src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),
        /* IE6-8 */
        url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),
        /* FF39+,Chrome36+, Opera24+*/
        url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot');
    src: url('../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),
        /* IE6-8 */
        url('../fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),
        /* FF39+,Chrome36+, Opera24+*/
        url('../fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/IRANSansWeb.eot');
    src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
        /* IE6-8 */
        url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),
        /* FF39+,Chrome36+, Opera24+*/
        url('../fonts/woff/IRANSansWeb.woff') format('woff'),
        /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: Outfit;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/ttf/Outfit-ExtraLight.ttf') format('truetype');
    font-display: swap;
}

.txt-dark {
    color: #2d2d2d;
}

h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
button,
span,
a,
select,
option {
    font-family: Outfit;
    font-size: 18px;
    font-weight: 100;
    white-space: nowrap;
    overflow: hidden;
    color: #fcfcfc;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: keep-all;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

h1 {
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #0f0f0f;
}

* {
    box-sizing: border-box;
}

*:focus {
    outline: 0 !important;
}

/*::-webkit-scrollbar {*/
/*    width: 5px;*/
/*    background-color: #2c3e50;*/
/*}*/

/*!* Track *!*/
/*::-webkit-scrollbar-track {*/
/*    box-shadow: inset 10px 10px 5px rgba(0, 0, 0, 0.4);*/
/*    border-radius: 1px;*/
/*}*/

/*!* Handle *!*/
/*::-webkit-scrollbar-thumb {*/
/*    background: #fcfcfc;*/
/*    border-radius: 5px;*/
/*}*/

/*!* Handle on hover *!*/
/*::-webkit-scrollbar-thumb:hover {*/
/*    background: #ffa502;*/
/*}*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

body {

    filter: contrast(1.06);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.active {
    display: inline-block;
}

.disable {
    text-shadow: none !important;
    color: #6c6c6c !important;
}

.mgb5 {
    margin-bottom: 5%;
}

.fx-c {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fx-j-c {
    display: flex;
    justify-content: center;
}

.fx-a-c {
    display: flex;
    align-items: center;
}

.alert-error {
    width: 100%;
    height: 100%;
    background-color: brown;
    color: #fcfcfc;
}

/*------------------------------------------------------------------------------------------------------------*/
#base {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*box-shadow: inset 0 0 193px 91px rgba(255, 255, 255, .1);*/
    /*background-image: url("http://localhost/hoplayer/public/assets/images/background.jpg");*/
    /*background-size: cover;*/
    /*background-position: center;*/
    /*background-color: #212529;*/
    /*filter: drop-shadow(0px 2px 3px rgba(0,0,0,.9));*/
}

#header {
    width: 100%;
    height: 7%;
    box-shadow: 0 2px 17px -5px black;
    /*background: aqua;*/
}

#sec-header {
    display: flex;
    width: 100%;
    height: 100%;
}

/*---------------Menu*/
.menu {
    display: flex;
    width: 15%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#menu {
    display: none;
    position: absolute;
    width: 50%;
    height: 100%;
    bottom: 0;
    animation: mymove 1s;
    background-color: #2d2d2d;
}

@keyframes mymove {
    from {
        left: -50% !important;
    }

    to {
        left: 0 !important;
    }
}

#menu-sec {
    width: 100%;
    height: 100%;
}

.menu-logo,
.menu-artist,
.menu-albums,
.menu-songs,
.menu-playlist,
.menu-genre,
.menu-equ {
    display: flex;
    width: 100%;
    height: 5%;
    padding-left: 10%;
    margin-bottom: 10%;
    justify-content: start;
    align-items: center;
}

.icon-logo {
    width: 25px;
    height: 25px;
    background-image: url("../images/svg/headphone.svg");
    background-size: contain;
    background-position: center;
}

.menu-logo span,
.menu-albums span,
.menu-artist span,
.menu-songs span,
.menu-playlist span,
.menu-genre span,
.menu-equ span {
    font-family: Outfit;
    font-size: 14px;
    margin-left: 10%;
}

.icon-menu,
.icon-artist,
.icon-albums,
.icon-songs,
.icon-playlist,
.icon-genre,
.icon-search,
.icon-list,
.icon-equ {
    width: 25px;
    height: 25px;
    background-image: url("../images/svg/menu.svg");
    background-position: center;
    background-size: contain;
}

.icon-artist {
    background-image: url("../images/svg/musician.svg");
}

.icon-albums {
    background-image: url("../images/svg/album.svg");
}

.icon-songs {
    background-image: url("../images/svg/music.svg");
}

.icon-playlist {
    background-image: url("../images/svg/playlista.svg");
}

.icon-genre {
    background-image: url("../images/svg/guitar.svg");
}

.icon-equ {
    background-image: url("../images/svg/equalizer.svg");
}

/*---------------Section*/
.section {
    width: 65%;
    height: 100%;
    padding-left: 5%;
}

.st-row {
    width: 50%;
    height: 100%;
}

.row-top {
    width: 100%;
    height: 50%;
}

.row-down {
    width: 100%;
    height: 50%;
}

.sec-name {
    padding-top: 3%;
}

.sec-name span,
.sec-num span {
    font-family: Outfit;
    font-size: 14px;
}

/*-------------Search*/
#search {
    width: 100%;
    height: 100%;
}

#search-i {
    display: flex;
    width: 100%;
    height: 20%;
    justify-content: center;
    align-items: center;
}

#s-input {
    width: 80%;
    height: 30%;
    padding: 3%;
    color: #2d2d2d;
    border: none;
    border-radius: 5px;
}

#s-result {
    width: 100%;
    height: 50%;
    padding: 5%;
}

.s-r-i {
    width: 100%;
    height: 10%;
    background-color: dimgray;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding-left: 4%;
    margin-bottom: 2%;
}

.search {
    width: 10%;
    height: 100%;
}

.icon-search {
    background-image: url("../images/svg/search.svg");
}

/*----------------List*/
.list {
    width: 10%;
    height: 100%;
}

.icon-list {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAW0lEQVR4nO3UMQqAMAxG4XeiDnopHV30Cp7FXlFQCulsCibT/8Fbm0JJQSRTBa7oIbfVTcA50O4ZMtvB4rICC8EeqyvAMVC75KfNErx70krd+BLx8DXj7xLhFy8XkRz/1SSb/wAAAABJRU5ErkJggg==");
}


#main {
    position: absolute;
    top: 9%;
    width: 100%;
    height: 79%;
    filter: drop-shadow(0 9px 6px rgba(0, 0, 0, .6));
    overflow-y: auto;
    box-shadow: inset 0 0 14px -7px black;
    /*background: #0f0f0f;*/
}

/*-------------------------------------------------Home - Artists-----------------------------------*/
#artists,
#albums,
#songs,
#playlist {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 4%;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: baseline;
}

#playlist {
    flex-wrap: wrap;
    align-content: start;
}

#songs {
    flex-wrap: wrap;
}

.row-a {
    width: 30%;
    height: 20%;
    margin-bottom: 4%;
}

.row-a-songs,
.row-a-playlist,
.row-a-songs-search {
    display: flex;
    width: 100%;
    height: 8%;
    margin-bottom: 2%;
}

.row-a-songs-search {
    height: 15%;
}

.row-a-playlist {
    background-color: #2d2d2d;
    color: #fcfcfc;
    border-radius: 5px;
}

.img-artist {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
}

.img-artist-songs {
    width: 20%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    background-size: cover;
    background-position: center;
}

.num-playlist {
    width: 20%;
    height: 100%;
}

.artist-content {
    position: absolute;
    display: flex;
    width: 100%;
    height: 30%;
    bottom: 0;
    flex-wrap: wrap;
    border-radius: 0 0 5px 5px;
    background-color: #00000091;
    color: aliceblue;
}

.artist-content-songs {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    border-radius: 0 5px 5px 0;
    background-color: #00000091;
    color: aliceblue;
}

.artist-name,
.artist-name-songs {
    width: 100%;
    height: 50%;
}

.artist-name-songs {
    justify-content: start;
    padding-left: 5%;
}

.artist-name-songs span {
    font-size: 14px;
}

.playlist-name {
    padding-left: 2%;
}

.playlist-name span {
    font-size: 16px;
}

.a-c-row {
    display: flex;
    width: 100%;
    height: 50%;
}

.albums-num {
    width: 50%;
    height: 100%;
}

.songs-num {
    width: 50%;
    height: 100%;
    border-left: 1px solid #fcfcfc;
}

.artist-name span {
    font-family: Outfit;
    font-size: 14px;
}

.albums-num span,
.songs-num span {
    font-family: Outfit;
    font-size: 11px;
}

/*----------------------------------- Artist*/
.archive-artist {
    width: 100%;
    height: 100%;
    padding: 2%;
}

.desc-album {
    display: flex;
    width: 100%;
    height: 9vh;
    margin-bottom: 1vh;
    background-color: #636363;
    align-items: center;
    padding: 1%;
    border-radius: 5px;
}

.cover-album {
    width: 20%;
    height: 8vh;
}

.img-album {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
}

.row-right {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.row-left {
    width: 20%;
    height: 100%;
}

.add-favourite {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.icon-add-favourite {
    width: 4vh;
    height: 4vh;
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/svg/add-favorite.svg);
}

.name-album {
    width: 100%;
    height: 60%;
}

.name-album span {
    font-family: Outfit;
    font-size: 30px;
}

.con-album {
    display: flex;
    width: 100%;
    height: 40%;
}

.num-s-album {
    width: 100%;
    height: 100%;
}

.num-s-album span {
    font-family: Outfit;
    font-size: 13px;
}

.time-s-album {}

.sec-songs-album {
    width: 100%;
    height: auto;
    padding: 0 4%;
    margin-bottom: 4%;
    border-radius: 5px;
    background: #373737;
}

.ssa-row {
    display: flex;
    width: 100%;
    height: 10%;
    align-items: center;
    justify-content: space-between;
    padding: 6% 2%;
    margin-top: 4%;
    border-radius: 5%;
}

.ssa-num {
    width: 10%;
    height: 100%;
    flex-direction: column;
    color: white;
}

.ssa-num span {
    font-family: Outfit;
    font-size: 13px;
}

.ssa-ctr {
    width: 60%;
    height: 100%;
}

.ssa-dld {
    width: 10%;
    height: 100%;
}

.icon-dld,
.icon-dlu {
    width: 25px;
    height: 25px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbUlEQVR4nO3SMQrCQBRF0YHYBFJqssZsIFlCbCSQLVi6yCMjUwTbjIX6Lzw+r3m3+SkFQQYj5gMZX0NBNTDheiBT+h/EC38FWPB4e9Xcl5qSBjcMpZ+x4lRNUoZbbLiU21UV7EQ97vl+RBD8Fk+jafcK4uS2lQAAAABJRU5ErkJggg==");
    background-position: center;
    background-size: contain;
}

.icon-dlu {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAbElEQVR4nO3SMQrCYAwG0EA7SUerZ+wF2iO0iwiujh70SaGDCEXEXwqaBx8h00cgESm9ggNu84xvwA4XtMtsShdUOOG47HucUZcsGXHF8JB5H4uVpFXoMX2QPv4HuqdXfTfd1jf8GvnCKQq5A6JW99FKRjTwAAAAAElFTkSuQmCC");
}

.mor-songs-album {
    display: none;
    width: 100%;
    height: auto;
    padding: 1% 0;
}

.art-songs-album {
    display: flex;
    width: 100%;
    height: 50px;
    margin-bottom: 1%;
    border-radius: 5px;
    background-color: #fcfcfc;
}

.num-s-a {
    width: 10%;
    height: 100%;
}

.num-s-a span {
    font-family: Outfit;
    font-size: 15px;
}

.name-s-a {
    width: 60%;
    height: 100%;
    justify-content: left;
}

.name-s-a h3 {
    font-family: Outfit;
    font-size: 13px;
}

.time-s-a {
    width: 20%;
    height: 100%;
}

.time-s-a span {
    font-family: Outfit;
    font-size: 11px;
}

.option-s-a {
    width: 10%;
    height: 100%;
}

.option-s-a span {
    font-family: Outfit;
    font-size: 10px;
}

/*------------------------------------------------------------------------------------*/
/*Welcome*/
#welcome {
    width: 100%;
    height: 100%;
}

.welcome {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.header-w {
    width: 100%;
    height: 20%;
}

.header-w h1 {
    font-size: 64px;
    font-weight: 100;
}

.main-w {
    width: 100%;
    height: 60%;
    flex-direction: column;
    justify-content: space-evenly;
}

.icon-music {
    width: 50%;
    height: 38%;
    background-image: url("http://localhost/hoplayer/public/assets/images/music.png");
    background-size: cover;
    background-position: center;
}

.main-w input[type='submit'] {
    width: 55%;
    height: 10%;
    /*padding:  5% 0;*/
    /*margin-top: 5%;*/
    border: none;
    border-radius: 5px;
    color: #d9d9d9e3;
    background-color: #000000d9;
}

.footer-w {
    display: flex;
    width: 100%;
    height: 20%;
    flex-direction: column;
    align-items: center;
}

.footer-w span {
    margin-bottom: 2%;
}

/*------------------------------Landing Page------------------------------*/
#home {
    width: 100%;
    height: 100%;
    padding: 2%;
    direction: rtl;
    /*background-color: #0f0f0f;*/
}

#new {
    display: flex;
    width: 100%;
    height: 30%;
}

.sec-n {
    display: flex;
    width: 100%;
    height: 100%;
}

.sec-n-title {
    width: 100%;
    height: 10%;
}

.sec-n-title h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

/*------------------------------Player------------------------------*/
#footer {
    display: flex;
    width: 94%;
    height: 10%;
    /* padding: 1%; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 2vh;
}

#progress-data {
    width: 0;
    height: 3%;
    background: #eb644075;
    top: 1vh;
    position: absolute;
    z-index: 1;
}

#player {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    /*flex-wrap: wrap;*/
    flex-direction: column-reverse;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-color: brown;*/
    filter: invert(0.03);
    /*border-radius: 10px;*/
    /*box-shadow: inset 0 0 65px -35px rgba(255, 0, 0, .3);*/
    /*border-top: 2px solid #eb644075;*/
}

#nav {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.pns {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: #00000066;
    border-radius: 10px;
}

.r-pns {
    display: flex;
    width: 90%;
    height: 55%;
    justify-content: space-around;
    border-radius: 5px;
    background-color: #EFF5F5;
    filter: drop-shadow(0px 6px 7px rgba(0, 0, 0, .9));
}

#btnHome {
    width: 4vh;
    height: 4vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABuklEQVR4nO3Yv2sUQRjG8U+UXKMoKlpFsdBCA9pqIVaihdhqqU3+BVuLRG2tLAL+BUFsNI02/oitpImgWHkYO0sPwZGFFzyWi+fe3e5mYb4wsMzOPO887L4z7y6ZTCaT+cslfIlWXHeSO9jGtWjb0dcZ5nAPn3BmqP8UtvAIe+1y9uMZXuPoiPuH8BLrOGiXchKbeIz5f4ybjzGbMWcU75DwRsNcRB93K8xZwjdcHnEvDbXGuIXvuD7B3CuxCdxu08hcJPVnnJ1C5zQ+xiawp2kj+/AUb3FsBnqH8QrPcaApIyfwAatjkroqhdZqaNdu5AK+VkzqqizhV51GbkZS31A/V/Fj1kaKpF7GbyxqjsUwshxrmDqp1+KkbnRPD1LEXou1TMx7PEGvRSO9WMPGNELnSqJNk4auz9ch2hSpM6JtxEx1iLYRM9Uh2kbMVIdoGzFThbH3MSjVTCn6VmqKWYvoICraMkfws0tGUgM6E5ONlMhPZFbkV6tEfrVmRfEDbqHB7fd4xJw5D/HiP8yMO/QGMWaciXU8UAO9MNMfUXqUy5DiO3snVnYoX4ZbP2IVMTOZTCaTyWR0lD/Oe5dSfK6fRQAAAABJRU5ErkJggg==);
}

#btnSearch {
    width: 4vh;
    height: 4vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB80lEQVR4nO2YwU5TURCGv25wIQRYqFCfAkp3jdU3QATCEyi8A3RJwBeQGDWprtgTrK+gQOANqsYKIaGJlAVsINP8Jo2Jhno799w259uc5DadOX/vmX/mFCKRSCQSCcsIsAB8APaBBnCpdQ94D8wDw2SUcWATaAK7wHNgGpgEhrQW9Nw+PwM2gDEyxDxwAmxpw7chD7zW9+YITA6oAHVg6j9j2Fv7CqwqXhAqwGfgQcI4E8AXiQlynOo9ENEpxuI9JeXCPklwnP6GmcExMEpKvAReOcU2A1gnpT7R7MKduiUva3bvM4vAjnOOj8Az5xztjm1NzZNloOqcgwN5vyczsmNXfsoqPbE6+eGcoz0A2uzkyR3lcaXh6Fi/eag378qeGpd3jRw652jfJ14451gB3qUxY9l9wpNPwJJzjnbHbcpZvOrjNK15a0MzkQdvFT8VxjT9FhyK3NzqPikyp/tDr5qjxfkGzBKANY0SScVMyNatCZYJQE7X03qC+cuO03eJuAZaocSg43AsA8h34U5vVBOz2nwrC2JGdbMza65pFC9K2JDWop7XZLH2P9i9jhiZEWPc1aWoqvqxKfZKv/yROvbSP/pEpsQkpQT8kpgL4Al9LuY8iskgpUF6M4//MIBHDIiYBn1OWY13O/RGIpFIJDLY3AAJgXSVnOyU7AAAAABJRU5ErkJggg==);
}

#btnLiberty {
    width: 4vh;
    height: 4vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACT0lEQVR4nO3YSaiPURjH8c81XTLP17VDsrrCxlAsLdgTVjKlyFSspAxRUoYylQxZKCVDhluGiJRbxg0SC+ONrLkbvXnIQu79/8//ve9N77feejud53fOeZ9zzvs8DyUlJSUlJSVVMRKbcAPv0YavaMEeTO6AxpTo2xK2baF1HRsxQo70xA58xmHMiUX1wFBMw2a8xhWM+YtG1nY1+mR9p2JIaDRgLo7gC7ZFe00ZiDu4EJNvb8Gr8REL/2hfFG2rOjDBBlzCbQyowfx/T6wZ+1BXgd1EvMR6bMALNFVgX4cDuFYrz6zDZXSrwrYxFpM9o6qw7xZbcY1EMrd+wPhEjZTtMSEugv4JGhbgnOI5j3kpAqexWPEswckUgacVHtC8aMLjFIFWDFc8I/EpReA7eimeXviWIvC5C3mkNUXgWfzYimYSnqQIHMNKxbMKR1P/I1nMUzRXMD9FoE+ck7GKY1xEw9lcktiK44rjFLbUQiiLcd5hps5nVozdr1aCsyNwG63zaMDbSOBqym7cQ738qcd97MpDvHvcYMcrTLAqpQ4nIhvNxsyF7Oa4hf15DeCn5++ir5zJkqQH2J6D9g48wiCdxOA4L3trtM0yjZ3xgYbpZPpGUeJEYnGge5SXbqams6m3y9lIh3tXGZ6fiYNdjX1NybxxKCqPlYT8I8ILB/MoxKWwDK+ietgeWVn1OZbqoszAGyz/R58VUTKdrovTGJfAxQgzftEQbc1VFusKoS4qlO+iHjUv3tfmHBXkRpYmP4ynK6TMJSUlJSUl/zc/AP0saHwZcfhBAAAAAElFTkSuQmCC);
}

#btnSetting {
    width: 4vh;
    height: 4vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACe0lEQVR4nO2ZzU4TURTHf6FLG0xjFxCCPIKNMSoPYFVcAiZWSdRnUKDaJygr5TX8eAJYNLASFxjcm1A/kB1d1Y3mkH+TSTN3OtW5Y9vcX3KT4X6cM2e45+PeQiAQCAQCo8lL4BfwW82eNxlDToGFyN/2/JMxY1aG9GOGzDBirADLwFTMWBXYjenf1Vg/JqMmmbmyBRwC+3q5efXfA94BHaARs66hMZuzpL55yTBZh5KdC03gACgBBaAOnKjvCHgCXEpYX9acI605kQyTVVKfd2Pu66uZwijXgDXHNnNR0BpbG6UkHat4pKYtYC/hi4J0PPCo4/yL72gr+OIF0PL8sc6ZA34A1z3IvqoQfZmc+Ag8Shi/CGxoi3xT2wPWgemEdWty9lywEPspwbFvA23gFXADuKBmz681FpdLjIKiWS80e+W9wqfLiC/AlYT1Fc1xGfMUeItHZqS8o1wQt53aA4yIGtN2bLMycCZdVupkWsWequ04MjbyCdtOadkGnjvGGtLV05tJlOz2VbEu9oaMZDcVZgexoHf4Z+wskQYLycUh5BYVzbJ8h0yEfB/SEPOPr3ka0p2UrVVP6ezryhPDOPuzlM6+QYbMKiSeOcp0C7/HCq2DqGiuK/x2pMvradKS1WPHWFXJrpIiId76Xwmxh5UPnxOq06qS3bb8oKi2qL7jBCMKkn2XnDhQgediWsmuFSkaW/KJkSka5yahjJ+alINVbVKOuqs5Xj6s4JktnRCTroPiyvweZYVYm/vBcR3U9G3EoAu6JeWAQRd0b4A7jgu6Jjlj//qHGV+ZLjNijNUl9t/8rBBn3MhTV/nd+6Gnm3UVGwgEAoEAGfEHJNGnJqSltkgAAAAASUVORK5CYII=);
}

.pns-h,
.pns-s,
.pns-l,
.pns-p {
    display: flex;
    width: 20%;
    height: 100%;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .5));
}

#progress {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    /*background-color: darkgreen;*/
    filter: drop-shadow(2px 5px 6px rgba(0, 0, 0, 0.9));
}

#plyr {
    width: 100%;
    height: 40%;
    padding: 2%;
    border-radius: 10px;
    background: linear-gradient(179deg, #0000006b, transparent);
}

.flex {
    display: flex !important;
}

.plyr-top {
    display: flex;
    width: 100%;
    height: 20%;
    flex-wrap: wrap;
    flex-direction: column;
}

.plyr-tp-nm {
    display: flex;
    width: 50%;
    height: 50%;
    justify-content: flex-start;
    align-items: center;
}

.plyr-tp-nm h1 {
    margin: 0;
    color: #fcfcfc;
    font-size: 18px;
    font-weight: 100;
    text-shadow: 3px 7px 5px rgba(0, 0, 0, .8);
}

.plyr-tp-at {
    display: flex;
    width: 50%;
    height: 50%;
    justify-content: flex-start;
    align-items: center;
}

.plyr-tp-at h2 {
    margin: 0;
    color: #fcfcfc;
    font-size: 16px;
    font-weight: 100;
    text-shadow: 3px 7px 5px rgba(0, 0, 0, .8);
}

.plyr-tp-on {
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: flex-end;
}

.gtap {
    display: flex;
    width: 33%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.gtap button {
    border: none;

}

.plyr-down {
    width: 100%;
    height: 60%;
}

.plyr-dn-ps,
.plyr-dn-cr,
.plyr-dn-mu {
    display: flex;
    width: 100%;
    height: 33%;
    padding: 0 3%;
    justify-content: center;
    align-items: center;
}

.controls {
    display: none;
}

#plyr-time {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-between;
}

.column {
    flex-direction: column;
}


/*------NEW PLAYER*/
#progress {
    width: 100%;
    height: 100%;
    padding: 2%;
    flex-wrap: wrap;
}

#min-plyr {
    display: flex;
    width: 100%;
    height: 90%;
    justify-content: center;
    align-items: center;
    filter: contrast(1.05);
}

.main-player {
    width: 95%;
    height: 98%;
    padding: 5%;
    /*border: 1px solid #FBC252;*/
    border-radius: 5px;
    background: #ffffff12;
    filter: drop-shadow(0px 0px 13px rgba(255, 123, 84, .35));
}

.clr-main-player {
    width: 100%;
    height: 65%;
}

.footer-main-player {
    width: 100%;
    height: 35%;
}

.hdr-fmp {
    display: flex;
    width: 100%;
    height: 20%;
    justify-content: space-around;
    align-items: center;
}

#btnLyric {
    width: 10%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAACM0lEQVR4nMWWv49MURTHnx8NEiIkdiMSf4FltyBb0IiNP0C1DRGUqBVoJBKiFxEtDaoVQhSSbchaChWCYgpjZu73e94gfhw5mTNyM96+nX3ee/NNvsnMnXPv/cx595x3k6RkkbxB8rSqrktGIQCPSCqATyGEo8NOWiD5rqibzebGQYDIdzudzuZcAJLtgUkrcrxBBDAP4IdnYyGEsCUvAwdIHixqVV2b8QhOhhCmSTYd6FkcV5kQAdh3EZlgTzZ2rnYAE4ATnoVOfF7+CsB5kpeLOi65LABVXe0HVkMIx2o5hIgAfPyKj9/KysA1kteLWlXXDwFw3McfJlUKywM8GQkAyUv+yG7+M0lEJtI0nSpqVV0zRAYeO8DZ2g+h9qogeBXszQJ47xCF3Gq1NuUBiMhYHza3JZehLADbtA8gIuO1A5hIvnGIC8mIy/C3XVri3lELQNTwLAuf48qpDcAkIocyS3ElArDfe/s9kvcBXLWxYQD+S91udwfJp0v1A2s2ABYrAUjTdDuAD774TwC3SZ5x3wHwawCmXAD20m2LvxWRyQzAqf47v3SAdru908rHLCJ7loozCC+zcgFIHvFFF5eLBfC6CoDZ/lV7iNh5j50tDUBEJv1ffSO5LSduDMB37/m7SwNQ1VUAXjnEXFYbbTQaGwA88JiXSdkKIUx7BmyDjwBOkdxlts825r99DSHsS6qQiBwm+SXnctIUkZlKNu8LwFaSFwG8IClmAM/tNVvksvEHZ+NYpalmQ4UAAAAASUVORK5CYII=);
}

#btnEqualizer {
    color: #fcfcfc;
    font-size: 16px;
}

.min-fmp {
    width: 100%;
    height: 50%;
}

.title-mfmp {
    display: flex;
    width: 100%;
    height: 40%;
    justify-content: center;
    align-items: center;
}

.artist-mfmp {
    display: flex;
    width: 100%;
    height: 60%;
}

.img-artist-mfmp {
    display: flex;
    width: 25%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

/*.img-artist {*/
/*    width: 60%;*/
/*    height: 60%;*/
/*    background-position: center center;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*    !*border: 1px solid #FBC252;*!*/
/*    border-radius: 50%;*/
/*    box-shadow: inset -2px 3px 5px 0px black;*/
/*    filter: drop-shadow(0px 0px 1.2px  rgba(255,177,0,.95));*/
/*}*/

.name-artist-mfmp {
    display: flex;
    width: 55%;
    height: 100%;
    padding-left: 2%;
    flex-direction: column;
    justify-content: center;
}

.music-title {
    font-family: Outfit;
    margin: 0;
    color: #fcfcfc;
    font-size: 18px;
    text-shadow: 0 0 12px black;
}

.name-artist-mfmp h2 {
    font-family: Outfit;
    margin: 0;
    font-size: 14px;
    font-weight: 100;
    color: #fcfcfc;
    text-shadow: 0px 2px 2px black;
}

.follow-artist-mfmp {
    display: flex;
    width: 20%;
    height: 100%;
    padding-top: 1%;
    justify-content: center;
    align-items: center;
}

#btnFollow {
    font-family: Outfit;
    border-radius: 5px;
    padding: 5% 15%;
    background-color: #FFB100;
    box-shadow: inset -1px 2px 6px 1px rgba(0, 0, 0, .5);
}

.ftr-fmp {
    width: 100%;
    height: 30%;
    padding-top: 3%;
}

#progress-area {
    display: flex;
    height: 25%;
    width: 100%;
    flex-wrap: wrap;
    border-radius: 50px;
    cursor: pointer;
    align-items: center;
    filter: drop-shadow(0px 1px 2px rgba(255, 123, 84, .25));
}

.pgs-ar {
    display: flex;
    width: 100%;
    height: 28%;
    border-radius: 100%;
    background-color: #2d2d2d;
    align-items: center;
}

#progress-bar {
    width: 0;
    height: 60%;
    position: relative;
    border-radius: 100%;
    background: linear-gradient(90deg, darkred 0%, darkblue 100%);
}

#progress-bar::before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    right: -5px;
    z-index: 2;
    opacity: 1;
    background-color: aliceblue;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
    box-shadow: 0 0 3px 1px black;
}

#volume {
    display: none;
}

.timer-ftr-fmp {
    display: flex;
    width: 100%;
    height: 50%;
    padding: 0 5%;
    justify-content: space-between;
    align-items: center;
}

.current-time,
.total-time {
    color: #fcfcfc;
    font-size: 14px;
}

.lyric {
    display: none;
    width: 100%;
    height: 90%;
    padding: 4% 10%;
    font-family: 'IRANSans';
    font-size: 20px;
    text-align: center;
    color: #fcfcfc;
    border-radius: 5px;
    box-shadow: 0 0 33px black;
    overflow-y: scroll;
    background-color: #0000009c;
}

/*.min-plyr-visualizer{*/
/*    width: 100%;*/
/*    height: 60%;*/
/*}*/
/*.contentWrapper {*/
/*    width: 100%;*/
/*    height: 80%;*/
/*    margin: auto;*/
/*    font-size: 22px;*/
/*    font-weight: 200;*/
/*}*/

/*.experiment {*/
/*    display: none;*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 90%;*/
/*}*/

/*#audio_visual{*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transform: rotate(180deg);*/
/*    margin-top: -11px;*/
/*    margin-left: 5px;*/
/*}*/

/*.initiator {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    -webkit-transition: 0.5s ease all;*/
/*    z-index: 10000;*/
/*    cursor: pointer;*/
/*}*/

/*.area {*/
/*    position: relative;*/
/*    !*background: #f8f8f8;*!*/
/*    !*background: -webkit-linear-gradient(#f0f0f0, #f8f8f8);*!*/
/*    !*background: -moz-linear-gradient(#f0f0f0, #f8f8f8);*!*/
/*    !*background: -ms-linear-gradient(#f0f0f0, #f8f8f8);*!*/
/*    width: 360px;*/
/*    height: 360px;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    flex-wrap: wrap;*/
/*    flex-direction: row;*/
/*    align-items: center;*/
/*}*/

/*.bar {*/
/*    bottom: 0;*/
/*    background-color: #ffffffc2;*/
/*    -webkit-transition: 0.1ms cubic-bezier(0, 3, 0, 3) all;*/
/*    border: 1px solid;*/
/*    border-radius: 3px;*/
/*}*/
/*.lyric{*/
/*    display: none;*/
/*    width: 100%;*/
/*    height: 90%;*/
/*    padding: 4% 10%;*/
/*    font-family: 'IRANSans';*/
/*    font-size: 20px;*/
/*    text-align: center;*/
/*    color: #fcfcfc;*/
/*    border-radius: 5px;*/
/*    box-shadow: 0 0 33px black;*/
/*    overflow-y: scroll;*/
/*    background-color: #0000009c;*/
/*}*/
/*#display-section{*/
/*    display: flex;*/
/*    width: 100%;*/
/*    height: 20%;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.display-visualizer{*/
/*    display: flex;*/
/*    width: 25%;*/
/*    height: 100%;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.display-visualizer button,*/
/*.display-lyric button{*/
/*    border: none;*/
/*    border-radius: 5px;*/
/*    color: #fcfcfc;*/
/*    padding: 6% 10%;*/
/*    box-shadow: 0 0 9px 1px rgba(255,255,255,.3);*/
/*    background-color: #00000069;*/
/*}*/
/*.display-lyric{*/
/*    display: flex;*/
/*    width: 20%;*/
/*    height: 100%;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.min-plyr-pgs{*/
/*    width: 100%;*/
/*    height: 40%;*/
/*    padding: 2%;*/
/*}*/
/*.min-plyr-pgs-dcn{*/
/*    display: flex;*/
/*    width: 100%;*/
/*    height: 65%;*/
/*    flex-wrap: wrap;*/
/*}*/
/*.mpp-dcn-name{*/
/*    width: 80%;*/
/*    height: 100%;*/
/*}*/
/*.mpp-dn-title{*/
/*    display: flex;*/
/*    width: 100%;*/
/*    height: 40%;*/
/*    align-items: flex-end;*/
/*}*/
/*.music-title{*/
/*    margin: 0;*/
/*    color: #fcfcfc;*/
/*    font-size: 18px;*/
/*    text-shadow: 0 0 12px black;*/
/*}*/
/*.mpp-dn-artist{*/
/*    display: flex;*/
/*    width: 100%;*/
/*    height: 60%;*/
/*    flex-wrap: wrap;*/
/*    justify-content: flex-start;*/
/*    align-items: center;*/
/*}*/
/*.img-artist{*/
/*    width: 20%;*/
/*    height: 52%;*/
/*    margin-right: 5%;*/
/*    border-radius: 100%;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    border: 1px solid #FBC252;*/
/*}*/
/*.music-artist{*/
/*    margin: 0;*/
/*    color: #fcfcfc;*/
/*    font-size: 16px;*/
/*    text-shadow: 0 0 12px black;*/
/*}*/
/*.mpp-dcn-like{*/
/*    display: flex;*/
/*    width: 20%;*/
/*    height: 100%;*/
/*    justify-content: center;*/
/*    flex-direction: column;*/
/*}*/
/*.mpp-dcn-equalizer{*/
/*    width: 60%;*/
/*    height: 20%;*/
/*}*/
/*#btnEqualizer{*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzElEQVR4nO3YSwrCMBSF4R9iR9rdqIvpOuqj69KOdB9KdSM6UQrXWSJIjU3wfBACN5mEkHC4ICIiItIrgDVwBe42r6yejQlwBHbAApjavLe6IxONHcKnP8yGTJyBeWBtCZxIUAc8PKMM7C8D+4eMKtbhsrwRn+2bN9Lab5YFBxzsYfc3MLO5tXo2v9brC66BC3Czt1RbXWQkijcpUbyJFVGGjE/jTUWCFG9So3gj/6xQZyUhjTorP9JFjB6jd1F8FD1S49RZEREREb7iCdF9kzTG+Sk0AAAAAElFTkSuQmCC);*/
/*    background-color: aliceblue;*/
/*    border-radius: 5px;*/
/*}*/
/*.mpp-dcn-follow{*/
/*    width: 60%;*/
/*    height: 20%;*/
/*    margin-top: 10%;*/
/*}*/
/*#btnFollow{*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACK0lEQVR4nO3YOWgVURTG8R8aFFyIaKsWokhwqQwuUcE6BgsbC3FrbQQXEBEsRLSICxq1sjLRqGkVF7AR7FwKo13Ul2AjBIyFaYwMnEAMPvOGNy+54vzhMjCcO/cezplzv3MpKSkpKSkpaSi70IchjGIQD9DhH2EJnuEV9mEp5mAZ9uM1nmCxhFmE9ziL2VVssvfn8A7NEqUPF2u0vYxeCbIJA5FGtTAXH9EqMW7gaM45x9ElMT5gTc4569AvMb5jfs45CzAiMUZiY3lYiG8STK21OeesTzG1ruNYzjkncE1ibIxymqf8fsIGCXIPl2q0vYI7EpYo/SFBqkmUJpxPXaKMi8bHeIMDWB5plD0P4i0epS4aJ7IT90O+/4hnlnrtv1mVlPx/NGNHKNusN7mFHlzFmegSV0qUeTgULewwnqMTR6Jy7cFhnMZdVPAlmqsWCdAUG6zEBjui1NbCalwIhx5ilRliBV5Ge5ttqp5oZin3NbrMaWULPmNvgd/MIrktIjvxCimTMVs1gM3hRGvBKZq1ymN/GV1hV5j8GAhniuRPTnRXcaYQsjCfUizbq0RAlfdt6qQlUqrWfqNWenM60lPvgjdxUvEM5XRksN4Fn2K34hmNDd6ewm78n8mUdF1kB9+LuJSeyYhU6l1wVlxOD09RJvOM9iggeRzplijZaf5zOqtWI+mqUp3GJo1MQSdNUxVnxiY5UdjJ3mjaIhKVqGaV+CcybVdSUlLCLzoy1E9FpcNbAAAAAElFTkSuQmCC);*/
/*    background-color: aliceblue;*/
/*    border-radius: 5px;*/
/*}*/

/*.pgs-vlm{*/
/*    display: flex;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    margin-top: 5%;*/
/*}*/
/*.pgs-vlm input[type=range] {*/
/*    width: 100%;*/
/*    height: 10%;*/
/*}*/
/*.min-plyr-pgs-tm{*/
/*    display: flex;*/
/*    width: 100%;*/
/*    height: 20%;*/
/*    flex-wrap: wrap;*/
/*}*/
/*.total-time,*/
/*.current-time{*/
/*    display: flex;*/
/*    width: 50%;*/
/*    height: 100%;*/
/*    flex-wrap: wrap;*/
/*    align-items: center;*/
/*}*/
/*.current-time{*/
/*    justify-content: flex-start;*/
/*}*/
/*.total-time{*/
/*    justify-content: flex-end;*/
/*}*/
/*#current,*/
/*#total*/
/*{*/
/*    color: #fcfcfc;*/
/*    padding: 2% 8%;*/
/*    border-radius: 5px;*/
/*    background-color: #0000006b;*/
/*    box-shadow: 0 6px 9px 3px rgba(0,0,0,.4);*/
/*}*/

#ftr-plyr {
    display: flex;
    width: 96%;
    height: 7%;
    flex-wrap: wrap;
    background-color: aliceblue;
    border-radius: 5px;
    filter: opacity(0.95);
}

.ftr-plyr-rwn {
    display: flex;
    width: 20%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.ftr-plyr-rwn button {
    border: none;
    border-radius: 5px;
}

#btnPlay {
    width: 4vh;
    height: 4vh;
    background-image: url('../images/svg/play.svg');
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#pause {
    width: 4vh;
    height: 4vh;
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/svg/pause.svg');
}

#replay,
#replay-one {
    width: 4vh;
    height: 4vh;
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/svg/replay-all.svg');
}

#replay-one {
    display: none;
    background-image: url('../images/svg/replay-one.svg');
}

.add-list {
    width: 4vh;
    height: 4vh;
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/svg/archive-add.svg');
}

#next {
    width: 4vh;
    height: 4vh;
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/svg/next.svg');
}

#previous {
    width: 40%;
    height: 40%;
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/svg/previous.svg');
}

#popup {
    position: absolute;
    display: flex;
    width: 100%;
    height: 10%;
    justify-content: center;
    align-items: center;
}

.popuptext {
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: 1%;
    padding: 2% 8%;
}

.alert-success {
    color: white;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .8);
    background-color: #009432;
}

.alert-warning {
    color: black;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .8);
    background-color: #e15f41;
}

/* Popup arrow */
.popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#section-equalizer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.81);
    z-index: 1;
}


:root {
    --primary-color: #00e676;
    --background-color: #1e1e1e;
    --card-color: #2a2a2a;
    --text-color: #ffffff;
    --muted-text: #aaaaaa;
}

.equalizer-card {
    background: var(--card-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.1);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eq-graph {
    display: flex;
    justify-content: space-around;
    align-items: end;
    height: 150px;
    margin-top: 20px;
}

.eq-graph svg {
    height: 100%;
    width: 6px;
}

.eq-bar {
    fill: var(--primary-color);
    transition: height 0.3s ease;
}

.frequencies {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    color: var(--muted-text);
    font-size: 12px;
}

.labels {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
    color: var(--muted-text);
}

.device-name {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

.toggles {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.toggle-box {
    background: var(--card-color);
    border-radius: 16px;
    flex: 1;
    margin: 0 5px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.1);
}

.toggle-box label {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-color);
}

/* Neon Circle % sliders (just static text for now) */
.circle-slider {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #888;
    border-radius: 20px;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:checked+.slider:before {
    transform: translateX(18px);
}

/* Volume */
.volume-section {
    margin-top: 30px;
    padding: 0 20px;
}

.volume-section label {
    display: block;
    text-align: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--muted-text);
}

.volume-section input[type="range"] {
    width: 100%;
    accent-color: var(--primary-color);
}

/* Player */
.player-controls {
    margin-top: 30px;
    text-align: center;
}

audio {
    margin-top: 10px;
    width: 100%;
    max-width: 500px;
}

.eq-sliders {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    margin-top: 20px;
    height: 150px;
}

.eq-sliders input[type="range"] {
    writing-mode: bt-lr;
    /* vertical */
    width: 100px;
    height: 120px;
    accent-color: var(--primary-color);
}



@media only screen and (min-width: 320px) and (max-width: 360px) {}

@media only screen and (min-width: 375px) and (max-width: 400px) {}

@media only screen and (min-width: 425px) and (max-width: 500px) {}

@media only screen and (min-width: 768px) and (max-width: 800px) {}

@media only screen and (min-width: 1024px) and (max-width: 1537px) {}