:root{
    --white:#fff;
    --blue:#0d6efd;
    --black:#333;
    --shadow:0 0px 4px rgb(0 0 0 / 10%),0 0px 10px rgb(0 0 0 / 10%);
    --shadow-left:0 0px 4px rgb(0 0 0 / 10%),0 0px 10px rgb(0 0 0 / 10%);
    --light:#f5f5f6;
    --color-primary:#ffa914;
    --silver:#525252;
    --box-shadow:0 1px 1px rgba(130,140,150,0.15),0 -1px 0px rgba(120,130,140,0.05);
    --box-inset:inset 1px 2px 5px rgba(0,0,0,0.1);
    --font-size:14px;
    --border:#e7eaf3;
    --nav-link:#333;
    --link-active:#ffa914;
    --bs-blue:#1B84FF;
    --bs-success:#17c653;
    --bs-danger:#f8285a;
    --bs-black:#000;
    --header-scroll:rgba(255,255,255,0.5);
    --overflow:rgba(0,0,0,0.2);
    --color-hot:#000000;
    --color-black:#000;
    --link: #1b59b5;
    --exclusivitate: #d14900;
}
*{
    background:0 0;
    margin:0;
    padding:0;
    outline:0;
    border:0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    text-decoration:none
}
::-webkit-scrollbar{
    width:6px
}
::-webkit-scrollbar-track{
    background:var(--white)
}
::-webkit-scrollbar-thumb{
    background:var(--link-active);
    border-radius:50px
}
::-webkit-input-placeholder{
    color:var(--silver);
    font-family:Poppins,serif
}
::-moz-placeholder{
    color:var(--silver);
    font-family:Poppins,serif
}
:-ms-input-placeholder{
    color:var(--silver);
    font-family:Poppins,serif
}
::-ms-input-placeholder{
    color:var(--silver);
    font-family:Poppins,serif
}
::placeholder{
    color:var(--silver);
    font-family:Poppins,serif
}
input{
    font-family:Poppins,serif
}
body{
    display:-ms-grid;
    display:grid;
    background:var(--white);
    font-family:Poppins,serif;
    font-size:var(--font-size);
    color:var(--nav-link);
}
h1{
    font-size:16px;
    text-transform:uppercase;
    font-weight:600
}
h1,h2,h3{
    position:relative;
    margin-bottom:20px;
    font-weight:600
}
h1::before,h2::before,h3::before{
    position:absolute;
    content:"";
    width:50px;
    height:3px;
    background:var(--link-active);
    border-radius:50px;
    bottom:-10px;
    color:var(--nav-link)
}
h1::after,h2::after,h3::after{
    position:absolute;
    content:"";
    width:4px;
    height:4px;
    background:var(--link-active);
    border-radius:50px;
    bottom:-10.5px;
    left:54px
}
h2{
    font-size:16px
}
h3{
    font-size:16px;
    margin-bottom:30px;
    color:var(--nav-link)
}
h3::after{
    bottom:-7.5px
}
h3::before{
    bottom:-7px
}
h2.no_before{
    font-size:14px;
    font-weight:400
}
.no_before::before{
    content:none
}
.no_before::after{
    content:none
}
strong, b {font-weight:600}

li{
    list-style:none
}
a {color: var(--link);}
a:hover {color: var(--link-active);}


.text-hr{
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    font-size:12px;
    color:var(--nav-link);
    margin:7px 0
}
.text-hr::before,.text-hr::after{
    content:"";
    height:1px;
    background:var(--border);
    -webkit-box-flex:1;
    -ms-flex:1 1 auto;
    flex:1 1 auto
}
.text-hr::before{
    margin-right:0.5rem
}
.text-hr::after{
    margin-left:0.5rem
}
.js-show_pop{
    position:relative
}
.js-show_pop .show_pop{
    display:none;
    position:absolute;
    background:var(--white);
    padding:8px 10px;
    right:10px;
    border-radius:8px;
    -webkit-box-shadow:var(--shadow);
    box-shadow:var(--shadow);
    z-index:10
}
.js-show_pop.open .show_pop{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.main{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width:100%
}
.content{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    flex-direction:column;
    padding:20px;
    margin-left:240px;
    margin-top:60px
}
.content_track{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.track{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    width:65.5%
}
.sidebar_right{
    width:33%
}
.header{
    z-index:89;
    background-color:var(--white);
    border-bottom:1px solid var(--border);
    position:fixed;
    margin-left:240px;
    padding:0 20px;
    right:0;
    width:calc(100% - 240px);
    -webkit-transition:top 0.5s;
    transition:top 0.5s
}
.header__scrolled{
    top:0;
    -webkit-transition:top 0.5s;
    transition:top 0.5s;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    background-color:var(--header-scroll);
    border-bottom:0
}
.header__hidden{
    top:-100px;
    -webkit-transition:top 0.9s;
    transition:top 0.9s
}

.header__hidden .header__auth {
	top:100px;
}

.header__blur{
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    background-color:var(--header-scroll);
    border-bottom:0
}
.header_content{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:0;
    height:60px
}
.header__mob,.header__mob-logo{
    display:none
}
.header__search{
    position:relative;
    width:100%;
    max-width:450px
}
.header__search .search-box{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.header__search input{
    border-radius:8px;
    padding: 10px 12px 10px 15px;
    background:var(--light);
    width:100%;
    max-width:450px
}
.header__search button{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    cursor:pointer;
    opacity:0.7;
    position:absolute;
    top:8px;
    right:10px
}
.header__search button path{
    fill:var(--silver)
}
.header__search button:hover{
    opacity:1
}
#searchsuggestions {
	 display:none !important
	}
.header__nav{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.header__nav .header__menu{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-right:20px;
    font-size:1.4rem
}
.header__nav .header__menu li{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    padding:5px;
    height:36px;
    width:36px;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:0 1px;
    color:var(--silver)
}
.header__nav .header__menu li:hover{
    border-radius:0.42rem;
    color:var(--link-active);
    cursor:pointer;
    background-color:var(--light)
}
.header__nav .header__menu li:hover .ki-send{
    color:var(--bs-blue)
}
.header__nav .header__menu li:hover .ki-rocket{
    color:var(--bs-success)
}
.header__nav .header__menu li:hover .ki-calendar-tick{
    color:var(--bs-danger)
}
.header__nav .header__menu li:hover .ki-medal-star{
    color:var(--link-active)
}
.header__nav .header__menu li a{
    color:var(--silver);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.header__nav .header__menu .mob-search{
    display:none
}
.popup-send{
    position:absolute;
    top:70px;
    right:130px;
    font-size:14px;
    background:var(--white);
    -webkit-box-shadow:var(--shadow);
    box-shadow:var(--shadow);
    padding:10px 20px 15px;
    border-radius:5px;
    display:none;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.popup-send .send-header{
    font-weight:500;
    margin-bottom:10px;
    width:100%;
    text-align:center
}
.popup-send.active{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.header__login{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.header__name{
    color:var(--silver);
    font-size:14px;
    font-weight:500;
    margin-right:10px
}
.header__avatar{
    width:40px;
    height:40px;
    background:#f9f2e7;
    position:relative;
    cursor:pointer;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    color:#3f4254;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    border-radius:50%;
    -webkit-box-align:end;
    -ms-flex-align:end;
    align-items:flex-end;
    z-index:1;
    overflow:hidden
}
.header__avatar img{
    width:40px;
    height:40px
}
.header__auth{
    width:340px;
    height:100vh;
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    background:var(--white);
    border-left:1px solid var(--border);
    border-top:1px solid var(--white);
    z-index:90;
    -webkit-transition:-webkit-transform 0.3s ease-in-out;
    transition:-webkit-transform 0.3s ease-in-out;
    transition:transform 0.3s ease-in-out;
    transition:transform 0.3s ease-in-out,-webkit-transform 0.3s ease-in-out;
    -webkit-transform:translateX(100%);
    -ms-transform:translateX(100%);
    transform:translateX(100%);
    overflow-y:scroll
}
.header__auth::-webkit-scrollbar{
    width:3px
}
.header__auth::-webkit-scrollbar-track{
    background:var(--white)
}
.header__auth::-webkit-scrollbar-thumb{
    background:#888;
    border-radius:50px
}
.header__auth-header{
    border-bottom:1px solid var(--border);
    height:60px;
    padding:0 15px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-line-pack:center;
    align-content:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    position:relative
}
.header__login.open .header__auth{
    -webkit-transform:none;
    -ms-transform:none;
    transform:none
}
.close{
    position:absolute;
    right:15px;
    font-size:18px;
    color:var(--silver);
    cursor:pointer
}
.close:hover{
    color:var(--bs-danger)
}
.auth-title{
    font-weight:bold
}
.auth-sub{
    font-size:12px;
    color:var(--silver)
}
.login_form{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin-top:20px
}
.login_form span{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:5px 15px
}
.login_form input{
    border-radius:8px;
    padding:10px 12px 10px 15px;
    background:var(--white);
    width:100%;
    border:1px solid var(--border)
}
.login_form .btn{
    margin-top:10px;
    background:var(--blue);
    padding:10px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    color:var(--white);
    border-radius:8px;
    cursor:pointer;
    font-family:Poppins,serif
}
.login_form .btn:hover{
    background:var(--bs-blue)
}
.has-radiobox label{
    position:relative;
    padding-left:32px;
    display:block;
    cursor:pointer
}
.has-radiobox input{
    -moz-appearance:none;
    appearance:none;
    -webkit-appearance:none;
    display:block;
    width:22px;
    height:22px;
    cursor:pointer;
    border:1px solid var(--border);
    background:var(--white);
    border-radius:50%;
    position:absolute;
    left:0;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%)
}
.has-radiobox label input:checked::before{
    content:"";
    background-color:var(--bs-blue);
    width:12px;
    height:12px;
    border-radius:50%;
    position:absolute;
    left:4px;
    top:4px
}
.has-checkbox,.checkbox{
    display:block;
    position:relative;
    padding-left:50px;
    cursor:pointer
}
.has-checkbox,.checkbox label{
    cursor:pointer;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:end
}
.has-checkbox input,.checkbox input{
    -moz-appearance:none;
    appearance:none;
    -webkit-appearance:none;
    display:inline-block;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    height:22px;
    width:40px;
    border-radius:11px;
    background-color:var(--border);
    cursor:pointer;
    -webkit-box-shadow:var(--box-inset);
    box-shadow:var(--box-inset);
    position:absolute;
    left:0;
    top:50%;
    margin-top:-11px;
    padding:initial;
    border:0px
}
.has-checkbox input::before,.checkbox input::before{
    content:"";
    width:20px;
    height:20px;
    border-radius:10px;
    position:absolute;
    left:1px;
    top:1px;
    background-color:var(--white);
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear
}
.has-checkbox input:checked,.checkbox input:checked{
    background-color:var(--bs-success)
}
.has-checkbox input:checked::before,.checkbox input:checked::before{
    left:19px
}
.has-checkbox span{
    font-size:13px;
    margin:0px
}
.login-social{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:10px 15px;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.login-social .btn-social{
    width:48%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:5px 10px;
    border-radius:8px
}
.login-social .btn-social i{
    margin-right:5px;
    font-size:30px
}
.login-social .facebook{
    background:var(--blue);
    color:var(--white)
}
.login-social .facebook:hover{
    background:var(--bs-blue)
}
.login-social .google{
    color:var(--silver);
    background:var(--light);
    border:1px solid var(--border)
}
.login-social .google:hover{
    opacity:0.8
}
.login_auth{
    margin-top:10px;
    text-align:center
}
.login_auth a{
    color:var(--blue)
}
.login_auth:hover a{
    color:var(--link-active)
}
span.login_save{
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
span.login_save a{
    font-size:12px;
    color:var(--blue)
}
span.login_save a:hover{
    color:var(--link-active)
}
.header__link{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.nav-list{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    z-index:88
}
.nav-list > *{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.nav-list .js-show{
    display:none
}
.sidebar{
    width:240px;
    background:var(--white);
    border-right:1px solid var(--border);
    z-index:99;
    position:fixed;
    top:0;
    bottom:0;
    padding:10px 10px 10px 10px;
    height:100vh;
    -webkit-transition:border-radius 0.3s;
    transition:border-radius 0.3s
}
.sidebar__logo{
    height:auto;
    margin:auto;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-top:3px;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.sidebar__logo img{
    height:auto;
    max-width:152px
}
.sidebar__logo img:hover{
    opacity:0.85
}
.sidebar__logo a{
    color:var(--color-primary);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.sidebar .site-title a{
    color:var(--black);
    font-weight:600;
    text-transform:uppercase;
    font-size:16px
}
.sidebar .site-title svg{
    color:var(--color-primary)
}
.sidebar .loading-spin{
    -webkit-animation-duration:0.75s;
    animation-duration:0.75s;
    -webkit-transform-origin:center center;
    -ms-transform-origin:center center;
    transform-origin:center center;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-name:loading;
    animation-name:loading
}
.sidebar .nav{
    margin-top:15px;
    padding:0.75rem 0.75rem;
    overflow-y:scroll;
    height:calc(100vh - 60px);
    width:calc(100% + 10px)
}
.sidebar .nav li a{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    color:var(--bs-black);
    padding:0.3rem 0;
    -webkit-transition:all 0.15s;
    transition:all 0.15s;
    font-size:15px
}
.sidebar .nav a:hover{
    color:#ffa914
}
.sidebar .nav-icon{
    font-size:1.25rem;
    opacity:0.85;
    -webkit-box-flex:0;
    -ms-flex:0 0 1.5rem;
    flex:0 0 1.5rem
}
.sidebar .nav-icon-small{
    font-size:1.25rem;
    opacity:0.9;
    -webkit-box-flex:0;
    -ms-flex:0 0 1.5rem;
    flex:0 0 1.5rem
}
.sidebar .nav::-webkit-scrollbar{
    width:3px
}
.sidebar .nav::-webkit-scrollbar-track{
    background:var(--white)
}
.sidebar .nav::-webkit-scrollbar-thumb{
    background:#888;
    border-radius:50px
}
.sidebar .nav::-webkit-scrollbar-thumb:hover{
    opacity:0.5;
    width:10px;
    cursor:pointer
}
[data-tooltip]:before,[data-tooltip]:after{
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    -webkit-transition-duration:0.8s,0.3s;
    transition-duration:0.8s,0.3s;
    -webkit-transition-delay:0.3s;
    transition-delay:0.3s
}
[data-tooltip]{
    position:relative;
    z-index:999;
    cursor:pointer
}
[data-tooltip]:before{
    position:absolute;
    top:45px;
    margin-bottom:5px;
    padding:7px;
    border-radius:3px;
    background-color:var(--white);
    color:var(--black);
    content:attr(data-tooltip);
    text-align:center;
    font-size:12px;
    line-height:1.2;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:-webkit-max-content;
    width:-moz-max-content;
    width:max-content;
    -webkit-box-shadow:var(--shadow);
    box-shadow:var(--shadow)
}
[data-tooltip]:after{
    position:absolute;
    bottom:150%;
    left:50%;
    margin-left:-5px;
    width:0;
    content:" ";
    font-size:0;
    line-height:0
}
[data-tooltip]:hover:before,[data-tooltip]:hover:after{
    visibility:visible;
    opacity:1
}
.navigation{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
   flex-wrap: wrap;
}
.navigation > *{
    display:flex;
    background:var(--light);
    border-radius:4px;
    -webkit-box-shadow:var(--box-shadow);
    box-shadow:var(--box-shadow);
    position:relative;
    margin:10px 4px;
    margin-bottom:20px;
    height:24px;
    align-items:center;
    justify-content:center;
    color:var(--nav-link);
    padding:0px 12px;
    font-size:16px
}
.navigation a:hover{
    color:var(--link-active)
}
.navigation span{
    color:var(--link-active)
}
.sidebar__logo img{
    width:152px;
    height:32px
}
.track_item{
    width:100%;
    background:var(--light);
    padding:8px;
    border-radius:8px;
    border: 1px solid var(--light);
    -webkit-box-shadow:var(--box-shadow);
    box-shadow:var(--box-shadow);
    position:relative;
    margin-bottom:15px;
    letter-spacing:0.5px;

        
}
.track_item.active {
    border: 1px solid #ffa9143b;
}



.track_about{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:10px;
    position:absolute;
    top:-10px;
    color:var(--white)
}
.track_about > div{
    border-radius:4px;
    margin-right:5px;
    padding:1px 4px 0px
}
.track_hot{
    background:var(--color-hot)
}
.track_live{
    background:var(--bs-danger)
}
.track_exclusivitate{
    background:var(--exclusivitate)
}
.track_explicit{
    background:var(--silver)
}
.track_content{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    width:100%;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.track_cover{
    width:40px;
    height:40px;
    margin-right:10px;
    position:relative;
    border-radius:8px;
    background:var(--link-active)
}
.track_full .track_cover {
    width:180px;
    height:180px;	
}



.track_cover img{
    width:40px;
    height:40px;
    -o-object-fit:cover;
    object-fit:cover
}

.track_full .track_cover img{
    width:200px;
    height:200px;	
}

.track_title{
    margin-bottom:3px
}
.track_text{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.track_title a{
    color:var(--color-black)
}
.track_title a:hover{
    color:var(--link-active)
}
.track_autor a{
    color:var(--silver);
    opacity:0.9
}
.track_autor a:hover{
    color:var(--link-active);
    opacity:1
}
.track_info{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.track_cat,.track_time{
    background:var(--white);
    padding:2px 8px;
    border-radius:5px;
    font-size:12px;
    border:1px solid var(--border);
    margin-left:10px
}
.track_cat a,.track_time a{
    color:var(--nav-link)
}
.track_cat a:hover,.track_time a:hover{
    color:var(--link-active)
}
.track_dots{
    font-size:24px;
    margin-bottom:-4px;
    cursor:pointer;
    position:relative
}
.track_dots .ki-dots-vertical:hover{
    color:var(--link-active)
}
.track_dots__show{
    font-size:12px;
    width:-webkit-max-content;
    width:-moz-max-content;
    width:max-content;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start
}
.track_dots__show li{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin:3px 2px
}
.track_dots__show li:hover{
    color:var(--link-active)
}
.track_dots__show i{
    font-size:14px;
    margin-right:5px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    width:16px
}
.track_progress{
    display:none;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-top:4px
}
.track_progress.play{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.inline_player_wrap{
    width:100%
}
.b_inline_player{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:100%;
    height:15px
}
.b_inline_player .volume{
    margin-left:40px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:0 0 0 30px;
    position:relative;
    width:12%;
    height:100%
}
.b_inline_player .volume .icon{
    position:absolute;
    left:-25px;
    top:-1px;
    opacity:0.8;
    cursor:pointer;
    display:inline-block;
    width:15px;
    height:15px;
    background-size:15px 15px;
    background-repeat:no-repeat;
    background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ1OSA0NTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ1OSA0NTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idm9sdW1lLXVwIj4KCQk8cGF0aCBkPSJNMCwxNTN2MTUzaDEwMmwxMjcuNSwxMjcuNXYtNDA4TDEwMiwxNTNIMHogTTM0NC4yNSwyMjkuNWMwLTQ1LjktMjUuNS04NC4xNS02My43NS0xMDJ2MjA0ICAgIEMzMTguNzUsMzEzLjY1LDM0NC4yNSwyNzUuNCwzNDQuMjUsMjI5LjV6IE0yODAuNSw1LjF2NTMuNTVDMzU0LjQ1LDgxLjYsNDA4LDE0Ny44OTksNDA4LDIyOS41UzM1NC40NSwzNzcuNCwyODAuNSw0MDAuMzVWNDUzLjkgICAgQzM4Mi41LDQzMC45NDksNDU5LDMzOS4xNSw0NTksMjI5LjVDNDU5LDExOS44NSwzODIuNSwyOC4wNDksMjgwLjUsNS4xeiIgZmlsbD0iIzMzMzMzMyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}
.b_inline_player .volume.mute .icon{
    background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ2MS41NSA0NjEuNTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ2MS41NSA0NjEuNTU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0idm9sdW1lLW9mZiI+CgkJPHBhdGggZD0iTTM0NS41MjUsMjI5LjVjMC00NS45LTI1LjUtODQuMTUtNjMuNzUtMTAydjU2LjFsNjMuNzUsNjMuNzVDMzQ1LjUyNSwyMzkuNywzNDUuNTI1LDIzNC42LDM0NS41MjUsMjI5LjV6IE00MDkuMjc1LDIyOS41ICAgIGMwLDIyLjk1LTUuMSw0NS45LTEyLjc1LDY2LjNsMzguMjUsMzguMjVjMTcuODUtMzAuNiwyNS41LTY4Ljg1LDI1LjUtMTA3LjFjMC0xMDkuNjUtNzYuNS0yMDEuNDUtMTc4LjUtMjI0LjRWNTYuMSAgICBDMzU1LjcyNSw4MS42LDQwOS4yNzUsMTQ3LjksNDA5LjI3NSwyMjkuNXogTTM0LjQyNSwwTDEuMjc1LDMzLjE1TDEyMS4xMjUsMTUzSDEuMjc1djE1M2gxMDJsMTI3LjUsMTI3LjVWMjYyLjY1TDM0MC40MjUsMzcyLjMgICAgYy0xNy44NTEsMTIuNzUtMzUuNywyMi45NS01OC42NSwzMC42MDF2NTMuNTVjMzUuNy03LjY1LDY2LjMtMjIuOTUsOTQuMzUtNDUuOWw1MSw1MWwzMy4xNS0zMy4xNDlsLTIyOS41LTIyOS41TDM0LjQyNSwweiAgICAgTTIzMC43NzUsMjUuNWwtNTMuNTUsNTMuNTVsNTMuNTUsNTMuNTVWMjUuNXoiIGZpbGw9IiMzMzMzMzMiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)
}
.progress{
    width:88%;
    height:100%;
    margin:0 10px 0 0
}
.b_range{
    display:inline-block;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    width:100%;
    height:4px;
    padding:5px 0;
    background-color:var(--border);
    background-clip:content-box;
    cursor:pointer;
    border-radius:5px
}
.b_range .loading{
    background:var(--color-primary)
}
.b_range .slider{
    position:relative;
    width:0;
    height:100%;
    background-color:var(--link-active)
}
.b_range .slider:before{
    content:"";
    position:absolute;
    right:-12px;
    top:-4px;
    width:12px;
    height:12px;
    background-color:var(--color-primary);
    border-radius:50%
}
.btn_player{
    position:absolute;
    cursor:pointer;
    z-index:1;
    width:100%;
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    top:1px
}
.btn_player i{
    font-size:36px;
    color:var(--white)
}
.track_full .btn_player i{
    font-size:100px; 
}

.btn_player button{
    cursor:pointer
}
.btn_player.pause .ki-to-right.ki-solid:before{
    content:"\e904"
}
.btn_player.pause i{
    font-size:28px
}
.track_full .btn_player.pause i{
    font-size:72px
}

.track_full {
	margin-top: 30px;
}

.page_lista {
    display: flex;
    justify-content: space-between;
}
.page_lista h1 {
    margin-bottom: 30px;
}

.lista-tabs {
	display: flex;
}
.lista-tabs li {
    background: var(--light);
    padding: 3px 8px;
    border-radius: 5px;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    position: relative;
    height: max-content;
    font-size: 13px;
    margin-left: 5px;
    cursor: pointer;
}
.lista-tabs li:hover {
    background: var(--link-active);
	color: var(--white);
}
.lista-tabs li:hover a {
	color: var(--white);
}

.lista-tabs li a { 
    color: var(--black);

}
.lista-tabs li.active, .lista-tabs li.active a { 
    background: var(--link-active);
	color: var(--white);
}


.lista-tabs li span { 
   margin-left: 5px;
}

.page-loading .loading-spin,.page-loading .loading-bounce > *{
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite
}
.category-description{
    margin-bottom:20px
}

.category-head {
    width: 100%;
    background: var(--light);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--light);
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    position: relative;
    margin-bottom: 30px;
    margin-top: 10px;
    letter-spacing: 0.5px;   
    display:flex;
    align-items: center;
       

    }
.category-head p {
     font-size: 13px;
    }    
    
.category-title h2::after,.category-title h2::before{
     display:none;
    }    
.category-title h2 {
    font-size: 15px;
    margin-bottom: 5px;
}
.category-head i {
    font-size: 80px;
    color: var(--bs-danger);
    margin-right: 15px;
    }    
    @media (max-width:700px){
        .category-head i { display:none;}  
        .category-head {text-align: center;}
    }  




@media (max-width:992px){
    h1{
        font-size:13px;
    }
    h2,h3{
        font-size:13px
    }
    h2.no_before{
        font-size:13px
    }
    .category-description{
        font-size:12px;
        margin-bottom:10px
    }
    .header{
        margin-left:0;
        width:100%;
        padding:0 10px
    }
    .header__auth-header{
        height:50px
    }
    .header_content{
        height:50px
    }
    .track_info{
        display:none
    }
    .header__mob{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
    .header__mob-logo{
        display:block;
        margin-left:-5px
    }
    .header__mob-logo img{
        height:40px;
        width:40px
    }
    .header__mob-logo a{
        color:var(--color-primary);
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -o-object-fit:contain;
        object-fit:contain;
        height:40px;
        width:40px
    }
    .header__search{
        opacity:0;
        visibility:hidden;
        position:absolute;
        top:49px;
        width:100vw;
        max-width:100%;
        -webkit-transition:0.4s;
        transition:0.4s;
        left:0;
        right:-10px;
        border-bottom:1px solid var(--border);
        border-top:1px solid var(--border)
    }
    .header__search input{
        width:100vw;
        min-width:100vw;
        border-radius:0;
        background:var(--white)
    }
    .header__search.active{
        opacity:1;
        visibility:visible
    }
    .header__nav p{
        margin-right:10px
    }
    .header__login{
        margin-right:50px
    }
    .header__hamburger{
        position:absolute;
        width:24px;
        height:22px;
        display:block;
        right:15px;
        cursor:pointer
    }
    .header__hamburger span{
        right:0;
        width:24px;
        height:2px;
        background-color:var(--nav-link);
        border-radius:2px;
        -webkit-transition:0.5s ease;
        transition:0.5s ease;
        position:absolute
    }
    .header__hamburger span:first-child{
        top:0
    }
    .header__hamburger span:nth-child(2){
        top:10px;
        width:24px
    }
    .header__hamburger span:last-child{
        top:20px;
        width:24px
    }
    .header__hamburger-active span:first-child{
        -webkit-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        transform:rotate(-45deg);
        top:9px
    }
    .header__hamburger-active span:nth-child(2){
        opacity:0;
        width:0
    }
    .header__hamburger-active span:last-child{
        width:24px;
        -webkit-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        transform:rotate(45deg);
        top:9px
    }
    .nav-list{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex
    }
    .nav-list > *,.nav-list .js-show{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex
    }
    .nav-list .show{
        display:none
    }
    .hamburger{
        display:block
    }
    .sidebar{
        margin-left:-250px;
        -webkit-transition:0.4s;
        transition:0.4s;
        padding:5px 10px 10px 10px
    }
    .sidebar.active{
        margin-left:0
    }
    .content{
        margin-left:0;
        margin-top:45px
    }
    .header__nav .header__menu .mob-search{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        margin-right:-12px
    }
    .content_track{
        flex-direction:column
    }
    .track{
        width:100%
    }
    .sidebar_right{
        width:100%
    }
    .track_about{
        font-size:8px
    }
    .track_text{
        font-size:14px
    }
    .track_cover{
        width:40px;
        height:40px;
        border-radius:5px
    }
    .track_item{
        padding:5px;
        margin-bottom:10px;
        letter-spacing:0.7px
    }
    .content{
        padding:20px 15px
    }
}
@-webkit-keyframes spinner{
    0%{
        opacity:0;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    50%{
        opacity:1;
        -webkit-transform:scale(0.5);
        transform:scale(0.5)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes spinner{
    0%{
        opacity:0;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    50%{
        opacity:1;
        -webkit-transform:scale(0.5);
        transform:scale(0.5)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@-webkit-keyframes loading{
    0%{
        -webkit-transform:translateZ(0) rotate(0);
        transform:translateZ(0) rotate(0)
    }
    100%{
        -webkit-transform:translateZ(0) rotate(359deg);
        transform:translateZ(0) rotate(359deg)
    }
}
@keyframes loading{
    0%{
        -webkit-transform:translateZ(0) rotate(0);
        transform:translateZ(0) rotate(0)
    }
    100%{
        -webkit-transform:translateZ(0) rotate(359deg);
        transform:translateZ(0) rotate(359deg)
    }
}
@-webkit-keyframes bounce{
    0%{
        -webkit-transform:scaleY(1);
        transform:scaleY(1)
    }
    50%{
        -webkit-transform:scaleY(0);
        transform:scaleY(0)
    }
    100%{
        -webkit-transform:scaleY(1);
        transform:scaleY(1)
    }
}
@keyframes bounce{
    0%{
        -webkit-transform:scaleY(1);
        transform:scaleY(1)
    }
    50%{
        -webkit-transform:scaleY(0);
        transform:scaleY(0)
    }
    100%{
        -webkit-transform:scaleY(1);
        transform:scaleY(1)
    }
}