/*--------------------- Copyright (c) 20126 ----------------------- [Master Stylesheet] Project: CodePlayer - Online Music Radio Stations Version: 6.0.1 Author: Adriano Silva -------------------------------------------------------------------*/
/* ================================================ 1. SISTEMA DE TEMAS (Variáveis CSS) ================================================ */
 :root {
     --bg-body: #14182a;
     --bg-content: #14182a;
     --bg-sidebar: #1b2039;
     --bg-header: #1b2039;
     --bg-card: #1b2039;
     --bg-input: #ffffff;
     --text-primary: #ffffff;
     --text-secondary: #cdcdcd;
     --text-muted: #777777;
     --text-body: #777777;
     --color-accent: #3bc8e7;
     --color-accent-hover: #2bb5d4;
     --color-success: #1db954;
     --color-danger: #e22134;
     --border-color: #252b4d;
     --divider-color: #252b4d;
     --shadow-color: rgba(4, 4, 4, 0.2);
     --shadow-glow: rgba(59, 200, 231, 0.55);
}
 body.theme-light {
     --bg-body: #f5f7fa;
     --bg-content: #f5f7fa;
     --bg-sidebar: #ffffff;
     --bg-header: #ffffff;
     --bg-card: #ffffff;
     --bg-input: #ffffff;
     --text-primary: #1a1a2e;
     --text-secondary: #4a4a4a;
     --text-muted: #888888;
     --text-body: #555555;
     --border-color: #e0e4ec;
     --divider-color: #e0e4ec;
     --shadow-color: rgba(0, 0, 0, 0.1);
     --shadow-glow: rgba(59, 200, 231, 0.4);
}
/* ================================================ 2. BODY E BASE ================================================ */
 body {
     margin: 0;
     font-family: 'Josefin Sans', sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     color: var(--text-body);
     background-color: var(--bg-body);
     transition: background-color 0.3s ease, color 0.3s ease;
}
 h1, h2, h3, h4, h5, h6 {
     color: var(--color-accent);
     transition: color 0.3s ease;
     line-height: 1.2;
}
 a {
     color: var(--color-accent);
     transition: all 0.3s ease;
}
 a:hover {
     text-decoration: none;
}
 a:focus, button:focus {
     outline: none;
}
 .ms_color {
     color: var(--color-accent) !important;
}
 .form-control {
     height: 40px;
     padding: 0 20px;
     font-size: 16px;
     line-height: 20px;
     color: var(--text-body);
     background-color: var(--bg-input);
     border-radius: 5px;
     border: 1px solid transparent;
     transition: all 0.3s ease;
}
 .form-control:focus {
     box-shadow: 0 0 10px var(--shadow-glow);
     border: 1px solid var(--color-accent);
}
 body.theme-light .form-control {
     border: 1px solid var(--border-color);
}
/* Spacing helpers */
 .padder_top100 {
     padding-top: 100px !important;
}
 .padder_top80 {
     padding-top: 80px !important;
}
 .padder_top90 {
     padding-top: 90px !important;
}
 .padder_top5 {
     padding-top: 5px;
}
 .padder_top10 {
     padding-top: 10px;
}
 .padder_top20 {
     padding-top: 20px;
}
 .padder_top110 {
     padding-top: 110px;
}
 .padder_top50 {
     padding-top: 50px;
}
 .padder_top55 {
     padding-top: 55px;
}
 .padder_top60 {
     padding-top: 60px;
}
 .padder_top70 {
     padding-top: 70px;
}
 .padder_top15 {
     padding-top: 15px;
}
 .padder_top30 {
     padding-top: 30px;
}
 .padder_bottom70 {
     padding-bottom: 70px;
}
 .padder_bottom20 {
     padding-bottom: 20px;
}
 .padder_bottom60 {
     padding-bottom: 60px !important;
}
 .padder_bottom30 {
     padding-bottom: 30px !important;
}
 .marger_top20 {
     margin-top: 20px;
}
 .marger_top15 {
     margin-top: 15px;
}
 .marger_bottom30 {
     margin-bottom: 30px;
}
 .marger_bottom100 {
     margin-bottom: 100px;
}
 .marger_bottom25 {
     margin-bottom: 25px;
}
 .marger_top100 {
     margin-top: 100px;
}
 .marger_top60 {
     margin-top: 60px;
}
 .marger_bottom60 {
     margin-bottom: 60px;
}
 .padding_right40 {
     padding-right: 40px;
}
 .ms_relative_inner {
     position: relative;
}
/* ================================================ 3. LOADER ================================================ */
 body.loaded .ms_loader {
     display: none;
}
 .ms_loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1000000;
     background-color: var(--bg-body);
     transition: all 0.3s ease;
}
 .ms_loader .wrap {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}
 .ms_loader .wrap .lines {
     background: linear-gradient(to top, #f85032 0%, #db1ba8 82%, #db1ba8 100%);
}
 @keyframes lines {
     0% {
         height: 0;
    }
     100% {
         height: 35px;
    }
}
 .ms_loader .wrap .lines:nth-child(1) {
     animation: lines 1s 0.1s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(2) {
     animation: lines 1s 0.2s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(3) {
     animation: lines 1s 0.3s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(4) {
     animation: lines 1s 0.4s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(5) {
     animation: lines 1s 0.5s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(6) {
     animation: lines 1s 0.6s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(7) {
     animation: lines 1s 0.7s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(8) {
     animation: lines 1s 0.8s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(9) {
     animation: lines 1s 0.9s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(10) {
     animation: lines 1s 1s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(11) {
     animation: lines 1s 1.1s ease-in-out infinite alternate;
}
 .ms_loader .wrap .lines:nth-child(12) {
     animation: lines 1s 1.2s ease-in-out infinite alternate;
}
/* ================================================ 4. SIDEBAR / NAV ================================================ */
 .ms_sidemenu_wrapper {
     position: fixed;
     width: 80px;
     background-color: var(--bg-sidebar);
     height: 100%;
     z-index: 10000;
     top: 0;
     bottom: 0;
     box-shadow: 0 0 24px 6px var(--shadow-color);
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
 .ms_sidemenu_inner {
     width: 80px;
     background-color: var(--bg-sidebar);
     height: 100%;
     z-index: 1;
     transition: background-color 0.3s ease;
}
 .ms_logo {
     width: 100%;
     display: inline-block;
     text-align: center;
}
 .ms_logo span {
     width: 100%;
     display: none;
     font-size: 18px;
     color: var(--text-primary);
     text-transform: capitalize;
}
 .ms_logo_inner {
     align-items: center;
     justify-content: center;
     display: flex;
     min-height: 164px;
}
 .ms_nav_wrapper {
     padding: 0;
     position: absolute !important;
     left: 0;
     top: 164px;
     right: 0;
     bottom: 70px;
}
 .ms_nav_wrapper ul {
     padding: 0;
     margin: 0;
     list-style: none;
}
 .ms_nav_wrapper ul li {
     width: 100%;
     display: block;
}
 .ms_nav_wrapper ul li a {
     color: var(--text-secondary);
     text-transform: capitalize;
     width: 100%;
     display: block;
     padding: 9px 0;
     position: relative;
     text-align: center;
     font-size: 14px;
     transition: all 0.3s ease;
}
 .ms_nav_wrapper ul li a:after {
     position: absolute;
     height: 2px;
     background-color: var(--border-color);
     bottom: 0;
     left: 20px;
     right: 20px;
     content: "";
     transition: all 0.3s ease;
}
 .ms_nav_wrapper ul li:last-child a:after {
     display: none;
}
 .ms_nav_wrapper ul li a:hover, .ms_nav_wrapper ul li a.active {
     background-color: var(--color-accent);
     color: #ffffff;
}
 .ms_nav_wrapper ul li a:hover:after, .ms_nav_wrapper ul li a.active:after {
     background-color: var(--color-accent);
}
 .ms_nav_wrapper ul li a:hover span.nav_icon > .icon, .ms_nav_wrapper ul li a.active span.nav_icon > .icon {
     transform: scale(1.1);
}
 .ms_nav_wrapper ul.nav_downloads {
     margin-top: 40px;
}
 .ms_nav_wrapper ul.nav_playlist {
     margin-top: 40px;
}
 .ms_nav_wrapper span.nav_icon > .icon {
     width: 25px;
     height: 25px;
     display: inline-block;
     vertical-align: middle;
     background-image: url(../images/svg/icon.svg);
     background-repeat: no-repeat;
     transition: all 0.3s ease;
}
 .ms_nav_wrapper ul li a span.nav_icon {
     margin-right: 0;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_discover {
     background-position: 0 0;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_albums {
     background-position: -30px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_artists {
     background-position: -60px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_genres {
     background-position: -90px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_tracks {
     background-position: -120px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_music {
     background-position: -150px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_station {
     background-position: -180px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_download {
     background-position: -210px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_purchased {
     background-position: -240px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_favourite {
     background-position: -270px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_history {
     background-position: -300px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_fe_playlist {
     background-position: -328px 2px;
}
 .ms_nav_wrapper span.nav_icon > .icon.icon_c_playlist {
     background-position: -360px 2px;
}
 span.nav_text {
     display: block;
     opacity: 0;
     visibility: hidden;
     position: absolute;
     top: 10px;
     left: 100%;
     background-color: #32353d;
     padding: 0 12px;
     white-space: nowrap;
}
 .ms_nav_close {
     width: 55px;
     height: 55px;
     text-align: center;
     line-height: 55px;
     position: absolute;
     right: -24px;
     top: 50%;
     background-color: var(--bg-sidebar);
     border-radius: 100%;
     cursor: pointer;
     transform: translateY(-50%);
     z-index: -1;
     transition: background-color 0.3s ease;
}
 .ms_nav_close i {
     color: var(--text-secondary);
     font-size: 20px;
     position: absolute;
     top: 50%;
     right: 12px;
     transform: translateY(-50%);
     transition: all 0.5s ease;
}
 .ms_sidemenu_wrapper.open_menu {
     width: 200px;
}
 .ms_logo_open {
     display: none;
}
 .ms_sidemenu_wrapper.open_menu .ms_logo_open {
     display: block;
}
 .ms_sidemenu_wrapper.open_menu .ms_logo {
     display: none;
}
 .ms_sidemenu_wrapper.open_menu .ms_sidemenu_inner {
     width: 200px;
}
 .ms_sidemenu_wrapper.open_menu span.nav_text {
     opacity: 1;
     display: inline-block;
     visibility: visible;
     position: relative;
     left: auto;
     top: 0;
     background-color: transparent;
     vertical-align: bottom;
}
 .ms_sidemenu_wrapper.open_menu a {
     text-align: left;
     padding: 9px 20px;
}
 .ms_sidemenu_wrapper.open_menu span {
     display: inline-block;
}
 .ms_sidemenu_wrapper.open_menu .ms_nav_close i {
     transform: translateY(-50%) rotate(180deg);
}
/* ================================================ 5. SIDEBAR TOGGLE (Botão azul) ================================================ */
 .ms_sidebar_toggle {
     position: fixed;
     left: 70px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 9999;
     background: #00a8e8;
     color: #fff;
     border: none;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     transition: left 0.3s ease, background 0.2s, transform 0.3s ease;
}
 .ms_sidebar_toggle:hover {
     background: #1db954;
     transform: translateY(-50%) scale(1.1);
}
 .ms_sidebar_toggle i {
     font-size: 12px;
}
 body.sidebar-expanded .ms_sidebar_toggle {
     left: 200px;
}
 @media (max-width: 768px) {
     .ms_sidebar_toggle {
         display: none;
    }
}
/* ================================================ 6. HEADER ================================================ */
 .ms_content_wrapper {
     position: relative;
     margin-left: 160px;
     margin-right: 80px;
     transition: margin 0.3s ease;
}
 .ms_header {
     position: fixed;
     background-color: var(--bg-header);
     padding: 20px 50px;
     right: 0;
     left: 80px;
     top: 0;
     z-index: 1000;
     backface-visibility: hidden;
     transition: background-color 0.3s ease, left 0.3s ease;
}
 .ms_top_search {
     max-width: 395px;
     position: relative;
     display: inline-block;
     width: 100%;
     float: left;
}
 .search_icon {
     position: absolute;
     right: 0;
     top: 0;
     height: 40px;
     line-height: 40px;
     background-color: var(--color-accent);
     border-radius: 0 5px 5px 0;
     padding: 0 16px;
    /*cursor: pointer;
    */
}
 .ms_top_search .form-control {
     height: 40px;
     padding: 0 20px;
     font-size: 15px;
     line-height: 45px;
     border: none;
     border-radius: 5px;
}
 .ms_top_trend {
     float: left;
     line-height: 40px;
     padding-left: 50px;
}
 .ms_top_trend a {
     color: var(--text-primary);
     transition: color 0.3s ease;
}
 .ms_top_right {
     line-height: 40px;
     display: flex;
     place-content: flex-end;
}
 .ms_top_right .ms_top_lang {
     color: var(--text-primary);
     text-transform: capitalize;
     display: inline-block;
     position: relative;
     cursor: pointer;
     padding-right: 23px;
     transition: color 0.3s ease;
}
 .ms_top_right .ms_top_lang:hover {
     color: var(--color-accent);
}
 .ms_top_right .ms_top_lang:after {
     position: absolute;
     background-color: var(--text-secondary);
     height: 30px;
     width: 2px;
     content: "";
     right: 6px;
     top: 6px;
}
 .ms_btn {
     background-color: var(--color-accent);
     color: #fff;
     height: 30px;
     display: inline-block;
     text-transform: capitalize;
     width: 100px;
     text-align: center;
     line-height: 32px;
     border-radius: 20px;
     margin-left: 15px;
     transition: all 0.4s ease;
}
 .ms_btn:hover {
     color: #ffffff;
     box-shadow: 0 0 20px 0 var(--color-accent);
}
/* ================================================ 7. BOTÃO TOGGLE DE TEMA ================================================ */
 .ms_theme_toggle {
     width: 36px;
     height: 36px;
     border: none;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.08);
     color: var(--text-primary);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     transition: all 0.3s ease;
     font-size: 16px;
     vertical-align: middle;
}
 body.theme-light .ms_theme_toggle {
     background-color: rgba(0, 0, 0, 0.08);
}
 .ms_theme_toggle:hover {
     background-color: var(--color-accent);
     color: #ffffff;
     transform: rotate(20deg) scale(1.1);
     box-shadow: 0 0 15px var(--shadow-glow);
}
 .ms_theme_toggle.switching i {
     animation: themeSpin 0.5s ease;
}
 @keyframes themeSpin {
     0% {
         transform: rotate(0) scale(1);
    }
     50% {
         transform: rotate(180deg) scale(1.3);
    }
     100% {
         transform: rotate(360deg) scale(1);
    }
}
/* ================================================ 8. BANNER ================================================ */
 .ms-banner {
     padding: 0 0 40px;
}
 .ms_banner_img {
     text-align: center;
     max-width: 511px;
     width: 100%;
     float: left;
}
 .ms_banner_text {
     width: calc(100% - 511px);
     float: left;
     padding-top: 135px;
}
 .ms_banner_text h1 {
     font-size: 45px;
     font-weight: bold;
     color: var(--text-primary);
     transition: color 0.3s ease;
}
 .ms_banner_text p {
     margin: 15px 0 40px;
     line-height: 30px;
}
 .ms_banner_text .ms_banner_btn .ms_btn {
     height: 40px;
     width: 100%;
     margin-right: 25px;
     line-height: 45px;
     margin-left: 0;
     max-width: 150px;
     font-weight: 600;
}
 body.theme-light .ms-banner {
     background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
}
/* ================================================ 9. RECENT MUSIC / SLIDERS ================================================ */
 .ms_rcnt_slider {
     position: relative;
}
 .ms_heading {
     width: 100%;
     display: inline-block;
     margin-bottom: 30px;
}
 .ms_heading h1 {
     font-size: 18px;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
     text-transform: capitalize;
}
 .ms_heading h1:after {
     width: 100px;
     height: 5px;
     content: "";
     position: absolute !important;
     bottom: 0;
     left: -15px;
     z-index: 0;
     background: radial-gradient(50% 50%, ellipse closest-side, var(--color-accent), rgba(255, 42, 112, 0) 60%);
}
 .veiw_all {
     float: right;
     position: relative;
     top: 0;
     right: 0;
}
 .veiw_all a {
     color: var(--text-primary);
     text-transform: capitalize;
}
 .veiw_all a:hover {
     color: var(--color-accent);
}
 .ms_rcnt_box {
     text-align: center;
}
 .ms_rcnt_box_img {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
}
 .ms_rcnt_box_img img {
     width: 100%;
     border-radius: 10px;
}
 .ms_rcnt_box_text {
     text-align: left;
     margin-top: 20px;
}
 .ms_rcnt_box_text h3, .w_top_song .w_tp_song_name h3 {
     font-size: 16px;
     margin-bottom: 5px;
}
 .ms_rcnt_box_text h3 a, .w_top_song .w_tp_song_name h3 a {
     color: var(--text-primary);
     transition: color 0.3s ease;
}
 .ms_rcnt_box_text p, .w_top_song .w_tp_song_name p {
     color: var(--text-muted);
     font-size: 14px;
     margin: 0;
     transition: color 0.3s ease;
}
 .ms_rcnt_box_text h3 a:hover, .w_top_song .w_tp_song_name h3 a:hover {
     color: var(--color-accent);
}
 .slider_nav_next, .slider_nav_prev {
     position: absolute;
     top: 52%;
     width: 20px;
     height: 20px;
     margin-top: -22px;
     z-index: 10;
     cursor: pointer;
     background-size: 9px 15px;
     background-position: center;
     background-repeat: no-repeat;
}
 .slider_nav_next {
     background-image: url(../images/svg/right_arrow.svg);
     right: -40px;
     left: auto;
}
 .slider_nav_prev {
     background-image: url(../images/svg/left_arrow.svg);
     left: -40px;
     right: auto;
}
 .ms_box_overlay {
     position: absolute;
     border-radius: 10px;
     background-image: linear-gradient(90deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, var(--color-accent) 0%, rgba(32, 167, 196, 0) 100%);
     height: 100%;
     width: 100%;
     left: 0;
     top: 100%;
     transition: all 0.2s;
}
 .ms_rcnt_box .ms_play_icon, .ms_genres_box .ms_play_icon {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 10;
     transform: translate(-50%, -50%);
}
 .ms_rcnt_box:hover .ms_box_overlay {
     top: 0;
}
 .ms_more_icon {
     position: absolute;
     top: -10%;
     right: 20px;
     cursor: pointer;
     transition: all 0.4s ease;
}
 .ms_rcnt_box:hover .ms_more_icon, .ms_genres_box:hover .ms_more_icon {
     top: 10px;
}
 .ms_main_overlay {
     opacity: 0;
     transition: all 0.4s ease;
}
 .ms_rcnt_box:hover .ms_main_overlay {
     opacity: 1;
}
 ul.more_option {
     padding: 0;
     margin: 0;
     position: absolute;
     top: 5px;
     right: 50px;
     background-color: #fff;
     max-width: 172px;
     width: 100%;
     list-style: none;
     padding: 25px 0 13px 20px;
     text-align: left;
     border-radius: 10px;
     z-index: 100;
     visibility: hidden;
     opacity: 0;
     transform: translateX(-15px);
     transition: all 0.4s ease;
}
 ul.more_option.open_option {
     opacity: 1;
     right: 50px;
     visibility: visible;
     transform: translateX(0);
}
 ul.more_option li a {
     text-align: left !important;
     color: #777;
     padding-bottom: 10px;
     display: block;
     font-size: 13px;
}
/* ================================================ 10. WEEKLY TOP 15 ================================================ */
 .ms_weekly_wrapper {
     padding-top: 50px;
}
 .ms_weekly_wrapper .ms_heading {
     margin-bottom: 10px;
}
 .ms_weekly_box {
     float: left;
     width: 100%;
     padding: 20px 0;
     position: relative;
}
 .weekly_left, .weekly_right {
     float: left;
}
 .weekly_right {
     float: right;
     position: relative;
}
 .weekly_left span.w_top_no {
     font-size: 50px;
     font-weight: bold;
     color: var(--text-muted);
     display: inline-block;
     float: left;
     width: 50px;
     line-height: 50px;
     transition: all 0.3s ease;
}
 .w_top_song {
     float: left;
     padding-left: 40px;
}
 .w_top_song .w_tp_song_img {
     width: 50px;
     float: left;
     position: relative;
     overflow: hidden;
}
 .w_top_song .w_tp_song_name {
     width: calc(100% - 50px);
     float: left;
     padding-left: 20px;
}
 .w_top_song .w_tp_song_img img {
     border-radius: 5px;
     max-width: 100%;
}
 .w_song_time {
     padding-right: 40px;
     color: var(--text-primary);
     transition: color 0.3s ease;
}
 .ms_divider {
     float: left;
     width: 100%;
     border: 0;
     height: 2px;
     background: var(--divider-color);
}
 .ms_weekly_box ul.more_option {
     right: 30px;
     top: 12px;
}
 .w_top_song .ms_song_overlay {
     position: absolute;
     background-color: rgba(0, 0, 0, 0.7);
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 5px;
     opacity: 0;
     transition: all 0.3s ease;
}
 .ms_play_icon {
     position: absolute;
     top: -40%;
     left: 50%;
     cursor: pointer;
     width: 30px;
     transform: translate(-50%, -50%);
     transition: all 0.3s ease;
}
 .ms_weekly_box:hover .ms_play_icon, .ms_weekly_box.ms_active_play .ms_play_icon {
     top: 50%;
}
 .ms_weekly_box:hover .w_tp_song_name h3 a, .ms_weekly_box.ms_active_play .w_tp_song_name h3 a {
     color: var(--color-accent);
}
 .ms_weekly_box:hover .weekly_left span.w_top_no, .ms_weekly_box.ms_active_play .weekly_left span.w_top_no {
     color: var(--color-accent);
}
 @keyframes sound {
     0% {
         opacity: .35;
         height: 3px;
    }
     100% {
         opacity: 1;
         height: 28px;
    }
}
 .bar {
     background: #fff;
     bottom: 1px;
     height: 3px;
     position: absolute;
     width: 2px;
     animation: sound 0ms -800ms linear infinite alternate;
}
/* ================================================ 11. FEATURED ARTISTS, NEW RELEASES, ALBUMS ================================================ */
 .ms_featured_slider, .ms_releases_wrapper {
     position: relative;
     margin: 40px 0 0;
}
 .ms_advr_wrapper {
     text-align: center;
     margin-top: 50px;
     margin-bottom: 10px;
}
 .ms_advr_wrapper.ms_advr2 {
     margin: 31px 0 58px;
}
 .ms_releases_wrapper {
     margin-top: 50px;
     margin-bottom: 9px;
     display: inline-block;
     width: 100%;
}
 .ms_release_slider.swiper-container {
     padding-top: 6px;
}
 .ms_release_box {
     padding-top: 0px;
}
 .slider_dot {
     position: absolute;
     width: 10px;
     height: 10px;
     background-color: var(--color-accent);
     top: -26px;
     left: 38px;
     border-radius: 100%;
     transition: all 0.3s ease;
}
 .slider_dot:after {
     position: absolute;
     width: 6px;
     height: 6px;
     background-color: var(--bg-body);
     top: 2px;
     left: 2px;
     border-radius: 100%;
}
 .ms_fea_album_slider {
     position: relative;
     margin: 52px 0 0;
}
/* ================================================ 12. TOP GENRES ================================================ */
 .ms_genres_wrapper {
     margin: 50px 0 0;
}
 .ms_genres_box {
     margin-bottom: 30px;
     position: relative;
     overflow: hidden;
     border-radius: 10px;
}
 .ms_genres_box img {
     width: 100%;
     border-radius: 10px;
}
 .ms_genres_box:hover .ms_box_overlay {
     top: 0;
}
 .ms_genres_box:hover .ms_main_overlay {
     opacity: 1;
}
 .ovrly_text_div {
     position: absolute;
     width: 100%;
     bottom: -40%;
     padding: 0 20px;
     transition: all 0.4s ease;
}
 .ovrly_text_div span a {
     color: #fff;
     text-transform: capitalize;
}
 span.ovrly_text2 {
     float: right;
}
 .ms_genres_box:hover .ovrly_text_div {
     bottom: 20px;
}
 .ms_genres_box .ms_box_overlay_on {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
     top: 0;
     border-radius: 10px;
     background-image: linear-gradient(90deg, rgb(20, 24, 42) 0%, rgb(237, 63, 179) 0%, rgb(52, 62, 105) 0%, rgba(32, 167, 196, 0) 100%);
     transition: all 0.4s ease;
}
 .ms_box_overlay_on .ovrly_text_div {
     bottom: 20px;
}
 .ms_genres_box:hover .ms_box_overlay_on {
     opacity: 0;
     top: 100%;
}
/* ================================================ 13. LIVE RADIO ================================================ */
 .ms_radio_wrapper {
     position: relative;
     margin: 30px 0 0;
}
 .ms_radio_slider {
     position: relative;
}
/* ================================================ 14. FOOTER ================================================ */
 .ms_footer_wrapper {
     background-image: url(../images/footer_bg.png);
     background-size: cover;
     position: relative;
     z-index: 1;
     margin-bottom: 75px;
     padding-top: 50px;
}
 body.theme-light .ms_footer_wrapper {
     background-image: none;
     background-color: var(--bg-card);
}
 .ms_footer_wrapper:after {
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
     top: 0;
     left: 0;
     z-index: -1;
    /*background-image: linear-gradient(-90deg, rgb(20, 24, 42) 0%, rgba(32, 167, 196, 0) 100%);
     background-color: rgba(20, 24, 42, 0.3);
    */
}
 .ms_footer_inner {
     padding: 0 80px 2px 160px;
}
 .footer_box {
     margin-top: 35px;
     padding-right: 55px;
}
 .ms_footer_logo {
     text-align: center;
     padding-left: 80px;
     padding-bottom: 25px;
}
 .ms_footer_logo span {
     display: block;
     width: 100%;
     color: var(--text-primary);
     text-transform: capitalize;
     font-size: 18px;
     font-weight: 600;
     margin-top: 5px;
}
 h1.footer_title {
     font-size: 18px;
     text-transform: capitalize;
     position: relative;
     padding-bottom: 10px;
     margin-bottom: 18px;
}
 h1.footer_title:after {
     width: 100px;
     height: 5px;
     content: "";
     position: absolute !important;
     bottom: 0;
     left: -15px;
     z-index: 0;
     background: radial-gradient(50% 50%, ellipse closest-side, var(--color-accent), rgba(255, 42, 112, 0) 60%);
}
 .footer_box p {
     color: var(--text-primary);
     line-height: 25px;
     margin: 0;
     transition: color 0.3s ease;
}
 body.theme-light .footer_box p, body.theme-light .foo_con_data span, body.theme-light .ms_copyright p, body.theme-light .share_title, body.theme-light .ms_footer_logo span {
     color: var(--text-body);
}
 .footer_box.footer_subscribe .ms_btn {
     height: 40px;
     line-height: 42px;
     width: auto;
     padding: 0 22px;
     margin-left: 0;
}
 .foo_con_info li .foo_con_icon {
     width: 40px;
     height: 40px;
     display: inline-block;
     text-align: center;
     line-height: 40px;
     float: left;
     border-radius: 5px;
     background-image: linear-gradient(90deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, var(--color-accent) 0%, rgb(32, 167, 196) 100%);
}
 .foo_con_data {
     width: calc(100% - 40px);
     float: left;
     padding-left: 20px;
}
 .foo_con_data span {
     display: block;
     line-height: 25px;
     color: var(--text-primary);
}
 .foo_sharing {
     width: 100%;
     display: inline-block;
     margin-top: 10px;
}
 .share_title {
     display: inline-block;
     color: var(--text-primary);
     text-transform: capitalize;
     float: left;
     line-height: 33px;
}
 .foo_sharing ul {
     padding: 0;
     margin: 0;
     float: left;
     padding-left: 25px;
}
 .foo_sharing ul li {
     display: inline-block;
     margin-right: 5px;
}
 .foo_sharing ul li a {
     width: 30px;
     height: 30px;
     display: inline-block;
     color: #fff;
     text-align: center;
     line-height: 35px;
     border-radius: 5px;
     background-image: linear-gradient(90deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, var(--color-accent) 0%, rgb(32, 167, 196) 100%);
}
 .foo_sharing ul li a:hover {
     box-shadow: 0 0 18px 0 var(--color-accent);
}
 .ms_copyright {
     text-align: center;
     margin-top: 40px;
     width: 100%;
     display: inline-block;
     padding: 0 0 0 80px;
}
 .ms_copyright p {
     color: var(--text-primary);
     margin: 0;
     padding: 20px 0;
     transition: color 0.3s ease;
}
 .ms_copyright p a {
     color: var(--color-accent);
}
 .footer_border {
     width: 250px;
     height: 1px;
     margin: 0 auto;
     z-index: 0;
     background: radial-gradient(50% 50%, ellipse closest-side, var(--color-accent), rgba(255, 42, 112, 0) 60%);
}
/* ================================================ 15. PLAYER ================================================ */
 .ms_player_wrapper {
     background-image: url(../images/player_bg.jpg);
     background-size: cover;
     position: fixed;
     bottom: 0;
     width: 100%;
     z-index: 10000;
     box-shadow: 0 0 24px 6px var(--shadow-color);
     transition: all 0.4s ease;
}
 .ms_player_wrapper.close_player {
     bottom: -75px;
}
 element.style {
}
 .ms_player_close {
     position: absolute;
     top: -26px;
     right: 8px;
     background-color: #6c6e77;
     width: 55px;
     height: 27px;
     text-align: center;
     color: #fbfbfb;
     font-size: 20px;
     line-height: 34px;
     z-index: 1;
     cursor: pointer;
     border-radius: 0px 0px 0 0;
     transition: background-color 0.3s ease;
}
 .ms_player_wrapper:after {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     background-color: rgba(27, 32, 57, 0.6);
     content: "";
     width: 100%;
     height: 100%;
     z-index: -1;
}
 .player_left {
     width: auto;
     position: absolute;
     border-radius: 0 12px 12px 0;
     background-image: linear-gradient(180deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, var(--color-accent) 0%, rgb(32, 167, 196) 100%);
     box-shadow: 0 0 24px 6px var(--shadow-color);
     float: left;
     z-index: 10;
}
 .play_song_name span.que_img {
     width: 50px;
     float: left;
}
 .play_song_name span.que_img img {
     border-radius: 5px;
}
 .play_song_name .que_data {
     width: calc(100% - 50px);
     padding-left: 15px;
     float: left;
}
 .play_song_name h3 {
     font-size: 16px;
     color: #fff;
}
 .play_song_name a {
     color: var(--text-muted);
     font-size: 15px;
}
 span.play-left-arrow {
     float: right;
     width: 20px;
     height: 20px;
     text-align: center;
     border: 1px solid #fff;
     color: #fff;
     line-height: 20px;
     border-radius: 100%;
     cursor: pointer;
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     transition: all 0.5s ease;
}
 .ms_play_song {
     display: inline-block;
     float: left;
     width: 300px;
     padding: 13px 0 15px 30px;
     height: 75px;
}
 .play_song_options {
     float: left;
     position: relative;
     top: 30px;
     margin-right: 50px;
     display: none;
}
 .play_song_options ul {
     padding: 0;
     margin: 0;
     list-style: none;
     transition: all 0.5s ease;
     transform: translateX(-10%);
}
 .play_song_options ul li {
     float: left;
}
 .play_song_options ul li a {
     color: #fff;
     text-transform: capitalize;
     font-size: 15px;
     padding: 8px 20px;
     border-right: 2px solid #cdcdcd;
}
 .play_song_options ul li:first-child a {
     padding-left: 0;
}
 .play_song_options ul li:last-child a {
     border-right: none;
}
 .ms_icon {
     width: 25px;
     height: 25px;
     display: inline-block;
     vertical-align: middle;
     background-image: url(../images/svg/icon.svg);
     background-repeat: no-repeat;
     transition: all 0.3s ease;
     transform: scale(0.9);
}
 i.ms_icon.icon_share {
     background-image: url(../images/svg/share.svg);
     transform: scale(1.1);
     position: relative;
     top: 5px;
}
 .player_left.open_list .play_song_options {
     display: block;
}
 .player_left.open_list .play_song_options ul {
     transform: translateX(0);
}
 .player_left.open_list span.play-left-arrow {
     transform: translateY(-50%) rotate(180deg);
}
/* Audio player core */
 .audio-player a, .audio-player a:hover {
     text-decoration: none;
}
 .audio-player.is_hidden {
     top: 100%;
}
 .hide_player {
     position: absolute;
     bottom: -25px;
     right: 0;
     background: #333;
     color: #ccc;
     padding: 6px 10px;
     line-height: 1;
     display: inline-block;
     text-transform: uppercase;
     font-size: 12px;
     transition: .3s all ease;
}
 .hide_player:hover {
     color: #fff;
}
 .flex-wrap {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
}
 .jp-controls.flex-item {
     flex: 0 0 150px;
}
 .jp-progress-container.flex-item {
     flex: 2 2 350px;
     max-width: 630px;
     width: 100%;
     margin-top: 3px;
}
 .jp-now-playing.flex-item {
     flex: 0 0 145px;
}
 .jp-toggles.flex-item {
     flex: 0 0 106px;
     text-align: center;
}
 .jp-volume-controls.flex-item {
     flex: 0 0 80px;
     margin-left: 40px;
}
 .jp-playlist {
     display: none;
}
 .jp-toggles.flex-item button {
     margin: 8px 10px 0;
}
 .jp-gui.jp-interface.flex-wrap {
     position: relative;
     top: 1px;
}
 .jp-interface .jp-controls button, .jp-interface .jp-toggles button, .jp-interface .jp-volume-controls button {
     background: 0 0;
     border: 0;
     outline: 0;
     color: #7b7c8b;
     line-height: 24px;
     font-weight: 600;
     transition: all .2s linear;
     font-size: 20px;
     padding: 0;
}
 .jp-interface .jp-controls .jp-play i, .jp-interface .jp-controls .jp-previous i, .jp-interface .jp-controls .jp-next i {
     font-size: 23px;
     color: #fff;
}
 .jp-interface .jp-controls .jp-play i {
     padding-left: 5px;
     padding-top: 5px;
}
 .jp-audio.jp-state-playing .jp-play i {
     padding-left: 0;
}
 .jp-audio.jp-state-playing .jp-play i.ms_play_control {
     background-position: 1021px 0 !important;
}
 .jp-progress-container, .jp-volume-bar-container {
     height: 3px;
     padding: 0;
}
 .jp-progress, .jp-seek-bar, .jp-play-bar, .jp-volume-bar, .jp-volume-bar-value {
     height: 3px;
     border-radius: 1px;
}
 .jp-progress {
     margin: 0;
     background-color: #fff;
     border-radius: 15px;
}
 .jp-seek-bar, .jp-volume-bar {
     cursor: pointer;
     background-color: #fff;
     border-radius: 10px;
}
 .jp-play-bar {
     float: left;
     position: relative;
     background-color: var(--color-accent);
     border-radius: 5px;
     overflow: visible !important;
}
 .jp-volume-bar-value {
     float: left;
     position: relative;
     background-color: #aaa;
}
 .jp-progress .bullet, .jp-volume-bar .bullet {
     position: absolute;
     content: "";
     top: -6.5px;
     right: -7px;
     height: 15px;
     width: 15px;
     background: var(--color-accent);
     border-radius: 50%;
     box-shadow: 0 0 15px #fff;
}
 .jp-time-holder {
     position: relative;
     top: 0;
     color: #979797;
     font-size: 12px;
}
 .jp-time-holder .jp-current-time {
     position: absolute;
     left: 0;
     top: 10px;
     color: var(--text-primary);
}
 .jp-time-holder .jp-duration {
     position: absolute;
     right: 0;
     top: 10px;
     color: var(--text-primary);
}
 .jp-track-name {
     color: var(--text-primary);
     font-size: 16px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 100%;
     padding-right: 30px;
}
 .jp-artist-name {
     color: var(--text-muted);
     font-size: 14px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 140px;
}
 .jp-toggles button {
     margin: 0 3px;
}
 .jp-toggles button:hover {
     color: #fff;
}
 .jp-state-looped .jp-toggles .jp-repeat, .jp-state-shuffled .jp-toggles .jp-shuffle, .jp-interface .jp-toggles .playlist-is-visible.jp-show-playlist {
     color: #00c85f;
}
 .jp-volume-controls button {
     float: left;
}
 .jp-volume-controls .jp-volume-bar {
     margin-left: 40px;
     margin-top: 17px;
}
 .jp-volume-bar, .jp-volume-bar-value {
     border-radius: 5px;
}
 .jp-state-no-volume .jp-volume-controls {
     display: none;
}
/* Playlist popup */
 .jp-playlist {
     position: absolute;
     right: 0;
     bottom: -2%;
     background: var(--bg-sidebar);
     padding: 40px 0 25px;
     width: 350px;
     box-shadow: 0 0 24px 6px var(--shadow-color);
     border-radius: 12px 0 0 12px;
     z-index: 10;
     transition: background 0.3s ease;
}
 .jp-playlist ul {
     padding: 0;
     margin: 0;
     max-height: 345px;
}
 .jp-playlist li {
     list-style: none;
     float: left;
     width: 100%;
     position: relative;
     transition: all 0.3s ease;
}
 .jp-playlist li:hover {
     background-color: #2ec8e6;
}
 .jp-playlist li a {
     color: var(--text-primary);
     display: block;
     padding: 10px 20px;
     outline: 0;
     border-bottom: none;
     float: left;
     width: 100%;
}
 .jp-playlist li.jp-playlist-current {
     background-color: var(--border-color);
}
 .jp-playlist h2 {
     text-align: center;
     color: var(--text-primary);
     font-size: 18px;
     text-transform: uppercase;
     padding-bottom: 20px;
}
 .jp-playlist span.que_img {
     width: 50px;
     float: left;
}
 .jp-playlist span.que_img img {
     border-radius: 5px;
}
 .jp-playlist .que_data {
     width: calc(100% - 50px);
     float: left;
     padding-left: 20px;
     line-height: 30px;
}
 .jp_queue_cls {
     position: absolute;
     right: 13px;
     top: 10px;
     color: #fff;
     font-size: 13px;
     cursor: pointer;
}
 .jp_queue_wrapper {
     float: right;
     padding-right: 117px;
     margin-top: 26px;
}
 .jp_queue_wrapper span.que_text {
     background-color: #2ec8e6;
     height: 30px;
     display: inline-block;
     line-height: 33px;
     padding: 0 21px;
     color: #fff;
     text-transform: capitalize;
     border-radius: 20px;
     cursor: pointer;
     z-index: 1;
     transition: all 0.3s ease;
}
 .jp_queue_wrapper span.que_text i {
     width: 12px;
     height: 12px;
     text-align: center;
     background-color: #fff;
     color: var(--color-accent);
     border-radius: 50%;
     line-height: 12px;
     font-size: 11px;
}
 .jp-type-playlist {
     padding-left: 390px;
     padding-right: 80px;
     padding-top: 10px;
     padding-bottom: 10px;
}
 .jp-volume-wrap {
     margin-top: -3px;
}
 .jp_queue_btn {
     text-align: center;
     padding-top: 40px;
     padding-bottom: 50px;
}
 .jp_queue_btn a {
     height: 30px;
     background-color: var(--color-accent);
     color: #fff;
     display: inline-block;
     padding: 0 32px;
     line-height: 32px;
     text-transform: capitalize;
     border-radius: 20px;
     margin: 0 10px;
}
 .jp_quality_optn.custom_select {
     margin-left: 17px;
}
 .jp-type-playlist .nice-select span.current {
     color: #fff;
     text-transform: capitalize;
}
 .jp-type-playlist .nice-select {
     background-color: transparent;
     border-radius: 20px;
     border: solid 1px #fff;
     font-size: 15px;
     height: 30px;
     line-height: 32px;
}
 .jp-type-playlist .nice-select:after {
     border-top: 1px solid #fff;
     border-left: 1px solid #fff;
     border-bottom: none;
     border-right: none;
     margin-top: -1px;
     right: 17px;
     width: 6px;
     height: 6px;
}
 .jp-type-playlist .nice-select.open:after {
     margin-top: -6px;
}
 .jp-type-playlist .nice-select .option {
     line-height: 35px;
     min-height: 35px;
     border-bottom: 1px solid #eded;
}
 .jp-type-playlist .nice-select .list {
     top: auto;
     left: auto;
     right: 0;
     bottom: 189%;
     margin-bottom: 0;
     width: 150px;
     border-radius: 5px 5px 0 0;
     text-transform: uppercase;
     font-size: 12px;
     transform: none;
     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .17);
}
 .jp-interface .ms_play_control {
     background: url(../images/svg/play_icon.svg) !important;
     width: 30px;
     height: 30px;
     background-repeat: no-repeat;
     display: inline-block;
     background-color: transparent;
     cursor: pointer;
}
 button.jp-previous .ms_play_control {
     background-position: 0 0 !important;
}
 button.jp-play .ms_play_control {
     background-position: 941px 0 !important;
}
 button.jp-next .ms_play_control {
     background-position: 869px 0 !important;
}
 .jp-controls.flex-item {
     position: relative;
     top: 4px;
}
 button.jp-mute {
     position: relative;
     top: 0;
     height: 30px;
}
 button.jp-mute .ms_play_control {
     background-position: 220px 0 !important;
     border: 1px solid #fff;
     border-radius: 100%;
}
 button.jp-shuffle .ms_play_control {
     background-position: 140px 0 !important;
     border: 1px solid #fff;
     border-radius: 100%;
}
 button.jp-repeat .ms_play_control {
     background-position: 60px 0 !important;
     border: 1px solid #fff;
     border-radius: 100%;
}
 button.jp-repeat .ms_play_control:hover {
     background-position: 20px 0 !important;
     background-color: #fff !important;
}
 button.jp-shuffle .ms_play_control:hover {
     background-position: 100px 0 !important;
     background-color: #fff !important;
}
 .jp-volume-bar {
     position: relative;
}
 .jp-volume-bar-value {
     position: absolute;
     bottom: 0;
}
 .jp-playlist ul.more_option {
     overflow: inherit;
}
 .jp-playlist ul.more_option li.jp-playlist-current {
     background-color: transparent;
}
 .jp-playlist ul.more_option li:hover {
     background-color: transparent;
}
 .jp-playlist ul.more_option li a:focus {
     color: #777;
}
 .jp-playlist ul.more_option li a {
     padding-bottom: 0;
}
 .jp-playlist ul.more_option {
     top: 90%;
     right: 30px;
     text-align: center;
}
 .jp-playlist ul.more_option li {
     width: auto;
     display: inline-block;
     float: none;
}
 .jp-playlist ul.more_option li a {
     text-align: left !important;
     color: #777;
     display: block;
     font-size: 13px;
     padding: 12px 5px 0;
}
 .jp-playlist ul.more_option li a .opt_icon {
     padding-right: 0;
}
 .jp-playlist ul.more_option:after {
     top: -8px;
     right: 13px;
     border-top: transparent;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-bottom: 8px solid #fff;
}
/* ================================================ 16. PLAYER INFERIOR - Nome + Categoria ================================================ */
 .jp-now-playing {
     display: flex !important;
     align-items: center !important;
     min-height: 50px;
}
 .jp-now-playing .jp-track-name {
     display: flex !important;
     align-items: center !important;
     width: 100%;
     overflow: hidden;
}
 .jp-now-playing .que_img {
     flex-shrink: 0;
     width: 50px !important;
     height: 50px !important;
     border-radius: 5px;
     overflow: hidden;
     margin-right: 12px;
     background-color: var(--bg-sidebar);
     display: inline-block;
     vertical-align: middle;
}
 .jp-now-playing .que_img img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     display: block !important;
}
 .jp-now-playing .que_data {
     display: inline-block !important;
     vertical-align: middle;
     line-height: 1.3;
     overflow: hidden;
     flex: 1;
     min-width: 0;
}
 .jp-now-playing .que_data::first-line, .jp-now-playing .jp-track-name {
     color: var(--text-primary) !important;
     font-size: 15px !important;
     font-weight: 600;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     display: block;
     max-width: 100%;
}
 .jp-now-playing .jp-artist-name {
     color: var(--text-muted) !important;
     font-size: 12px !important;
     font-weight: 400 !important;
     margin-top: 3px;
     text-transform: capitalize;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     display: block;
     max-width: 200px;
}
/* ================================================ 17. ALBUM SINGLE ================================================ */
 .ms_album_single_wrapper {
     position: relative;
     z-index: 10;
     padding: 140px 80px 0 159px;
}
 .ms_album_single_wrapper:after {
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
     top: 0;
     left: 0;
     z-index: -1;
}
 .album_single_img {
     width: 240px;
     float: left;
}
 .album_single_data {
     padding-bottom: 50px;
     display: inline-block;
     width: 100%;
     position: relative;
}
 .album_single_img img {
     border-radius: 10px;
     box-shadow: 0 0 10px 0 var(--shadow-color);
}
 .album_single_text {
     width: calc(100% - 240px);
     float: left;
     padding-left: 35px;
     padding-top: 28px;
}
 .album_single_text h2 {
     font-size: 22px;
     color: var(--text-primary);
     padding-bottom: 10px;
}
 .album_single_text p.singer_name {
     color: var(--text-primary);
     font-size: 15px;
     margin-bottom: 5px;
}
 .album_feature a.album_date {
     display: block;
     color: var(--text-muted);
     margin-bottom: 5px;
}
 .album_btn a.ms_btn {
     height: 40px;
     line-height: 42px;
     width: auto;
     margin-left: 0;
     padding: 0 39px;
     font-size: 16px;
     margin-right: 20px;
     position: relative;
     vertical-align: middle;
}
 a.ms_btn.play_btn {
     width: 150px;
     padding: 0;
}
 .album_btn {
     margin-top: 19px;
     display: inline-block;
}
 .album_more_optn {
     right: 0;
     top: 30px;
     cursor: pointer;
}
 .album_more_optn img {
     transform: scale(1.3);
}
 .album_list_wrapper {
     width: 100%;
}
 .album_list_wrapper > ul {
     padding: 0;
     margin: 0;
     list-style: none;
}
 .album_list_wrapper > ul > li {
     display: inline-block;
     width: 16%;
     color: #2ec8e6;
     position: relative;
     text-transform: capitalize;
     top: auto;
     right: auto;
}
 .album_list_wrapper > ul > li > a {
     color: var(--text-primary);
     margin-top: 10px;
     display: inline-block;
     position: relative;
}
 .album_list_wrapper > ul:hover > li > a {
     color: #2ec8e6;
}
 ul.album_list_name {
     position: relative;
     padding-bottom: 10px;
}
 ul.album_list_name:after {
     position: absolute;
     left: 0;
     top: 100%;
     content: "";
     float: left;
     width: 100%;
     border: 0;
     height: 1px;
     background: rgba(59, 200, 231, 0.61);
}
 .ms_icon1 {
     background: url(../images/svg/play_icon.svg);
     width: 30px;
     height: 30px;
     background-repeat: no-repeat;
     display: inline-block;
     background-color: transparent;
     cursor: pointer;
}
 .ms_icon1.ms_fav_icon {
     background-position: -552px 6px;
}
 .album_list_wrapper > ul:hover .ms_icon1.ms_fav_icon, ul.play_active_song .ms_icon1.ms_fav_icon {
     background-position: -592px 6px;
}
 .ms_icon1.ms_active_icon {
     background-position: -632px 8px;
}
 .album_list_wrapper > ul:hover .ms_icon1.ms_active_icon, ul.play_active_song .ms_icon1.ms_active_icon {
     background-position: -672px 8px;
}
 .play_hover {
     background: url(../images/svg/play_icon.svg);
     width: 35px;
     height: 35px;
     background-repeat: no-repeat;
     display: inline-block;
     background-color: transparent;
     cursor: pointer;
     background-position: -191px 0;
     position: absolute;
     left: -8px;
     top: -30px;
     transform: scale(0.7);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
}
 .album_list_wrapper > ul:hover .play_hover {
     opacity: 1;
     top: 0;
     visibility: visible;
}
 .album_list_wrapper > ul:hover .play_no {
     opacity: 0;
     visibility: hidden;
}
 ul.play_active_song > li > a {
     color: #2ec8e6;
}
 ul.play_active_song .play_no {
     opacity: 0;
     visibility: hidden;
}
 ul.play_active_song .play_hover {
     opacity: 1;
     visibility: visible;
     top: 0;
     background-position: -708px 0;
     transform: scale(1);
}
 .ms_test_wrapper {
     position: relative;
     margin-right: 0;
}
 .ms_test_top {
     display: inline-block;
     width: 100%;
}
 .ms_test_top .ms_test_img {
     width: 50px;
     float: left;
}
 .ms_test_top .ms_test_name {
     width: calc(100% - 50px);
     float: left;
     padding-left: 20px;
}
 .ms_test_top .ms_test_name h3 {
     font-size: 16px;
     color: var(--text-primary);
}
 .ms_test_top .ms_test_name span.cmnt_time {
     color: var(--text-muted);
     font-size: 15px;
}
 .ms_test_box p {
     margin: 0;
     color: var(--text-muted);
     line-height: 25px;
     margin-top: 10px;
     font-weight: 300;
}
 .ms_test_top .ms_test_img img {
     border-radius: 5px;
}
 .ms_cmnt_wrapper {
     width: 100%;
     display: inline-block;
     margin-top: 50px;
}
 .ms_input_group {
     width: 36%;
     float: left;
     padding-right: 63px;
}
 .ms_input_group1 {
     width: 48%;
     float: left;
}
 .ms_input_group2 {
     width: 13%;
     float: right;
}
 .ms_input_group1 .ms_input textarea.form-control {
     height: 100px;
     resize: none;
}
 .ms_input_group2 .ms_input {
     margin-top: 28px;
}
 .ms_input_group2 .ms_input button.ms_btn {
     border: none;
     width: auto;
     padding: 5px 29px;
     height: 40px;
     cursor: pointer;
}
 .album_list_wrapper ul.more_option {
     right: 160px;
     top: 15px;
}
/* ================================================ 18. ARTISTS / STATIONS ================================================ */
 .ms_top_artist {
     margin-top: 50px;
}
 .ms_top_artist .container-fluid {
     padding-left: 0;
     padding-right: 0;
}
 .ms_content_wrapper.ms_artist_content {
     padding-top: 0;
}
 .about_artist {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 30px;
}
 .about_artist a:hover {
     color: var(--color-accent);
     letter-spacing: 1px;
}
 .ms_view_more {
     text-align: center;
     margin-top: 55px;
}
 .ms_view_more a.ms_btn {
     height: 40px;
     line-height: 45px;
     padding: 0 46px;
     width: auto;
     margin: 0;
}
 .ms_weekly_wrapper.ms_free_music .weekly_right {
     position: absolute;
     right: 0;
}
 .ms_weekly_wrapper.ms_free_music .w_song_time {
     padding-right: 30px;
     color: var(--text-primary);
}
 .ms_weekly_wrapper.ms_free_music .ms_icon1.dwnload_icon {
     background-position: -752px 0;
     position: relative;
     top: 10px;
}
 .ms_weekly_wrapper.ms_free_music ul.more_option {
     right: 85px;
     top: 28px;
}
 span.ms_frequency {
     position: absolute;
     top: 40px;
     left: 30px;
     text-transform: uppercase;
     color: #ec1e2a;
     font-weight: 600;
}
 .ms_free_download .album_list_wrapper {
     width: 100%;
     margin-top: -3px;
}
 .ms_free_download .album_list_wrapper > ul > li {
     width: 14%;
}
 .ms_icon1.ms_cross_icon {
     background-position: -792px 0;
     position: relative;
}
 .ms_free_download {
     margin-top: 60px;
}
 .hstry_clear.ms_btn {
     float: right;
}
 .hstry_clear.ms_btn a {
     color: #fff;
}
 .create_playlist {
     width: 252px;
     height: 252px;
     background-color: #343e69;
     border-radius: 10px;
     position: relative;
     cursor: pointer;
}
 .create_playlist i.ms_icon.icon_playlist {
     position: absolute;
     top: 50%;
     left: 50%;
     background-position: -355px -25px;
     width: 30px;
     height: 30px;
     cursor: pointer;
     transform: scale(1) translate(-50%, -50%);
}
/* ================================================ 19. MODAL ================================================ */
 .modal-content {
     padding: 50px 50px 46px;
     background-color: transparent;
     border: none;
     border-radius: 10px;
     background-image: linear-gradient(180deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, var(--color-accent) 0%, rgb(32, 167, 196) 100%);
}
 body.theme-light .modal-content {
     background-image: linear-gradient(180deg, #ffffff 0%, #e0f7ff 50%, #b8e8f5 100%) !important;
}
 .modal {
     overflow: hidden;
}
 .modal-dialog {
     max-width: 930px;
     width: 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) !important;
}
 .centered-modal .modal-dialog {
     margin: auto;
}
 .modal-body {
     padding: 0;
}
 .ms_register_img {
     width: 368px;
     float: left;
}
 .ms_register_form {
     width: calc(100% - 368px);
     float: left;
     padding-left: 50px;
     text-align: center;
}
 .modal-dialog.login_dialog .modal-content .ms_register_form {
     padding-top: 25px;
}
 .ms_register_form .form-control {
     padding: 3px 30px 0 20px;
}
 .fa_icon {
     background-image: url(../images/svg/play_icon.svg);
     width: 30px;
     height: 30px;
     background-repeat: no-repeat;
     display: inline-block;
}
 .modal-dialog button {
     position: absolute;
     right: -12px;
     z-index: 1;
     top: -15px;
     width: 30px;
     height: 30px;
     background-color: #fff;
     opacity: 1;
     border-radius: 100%;
     cursor: pointer !important;
}
 i.fa_icon.form_close {
     background-position: -832px 0;
}
 .ms_register_form h2 {
     font-size: 24px;
     color: #fff;
     text-align: center;
     padding-bottom: 10px;
     margin-bottom: 30px;
     position: relative;
     display: inline-block;
     text-transform: capitalize;
}
 .ms_register_form h2:after {
     width: 100px;
     height: 5px;
     content: "";
     position: absolute !important;
     bottom: 0;
     left: 50%;
     z-index: 0;
     transform: translateX(-50%);
     background: radial-gradient(50% 50%, ellipse closest-side, #fff, rgba(255, 42, 112, 0) 60%);
}
 .ms_register_form .form-group {
     position: relative;
     margin-bottom: 20px;
     display: inline-block;
     width: 100%;
}
 .ms_register_form .form-group span.form_icon {
     position: absolute;
     right: 0;
     top: 5px;
}
 i.fa_icon.form-user {
     background-position: 0 -40px;
}
 i.fa_icon.form-envelope {
     background-position: -38px -40px;
}
 i.fa_icon.form-lock {
     background-position: -80px -40px;
}
 .ms_register_form a.ms_btn, .ms_lang_btn a.ms_btn {
     background-color: transparent;
     height: 40px;
     border: 1px solid #fff;
     margin-left: 0;
     padding: 0 31px;
     line-height: 40px;
     width: auto;
     margin-top: 10px;
}
 .ms_register_form a.ms_btn:hover, .ms_lang_popup .modal-content.add_lang .ms_lang_btn a.ms_btn:hover {
     background-color: #ffffff;
     color: #22bed7;
}
 .ms_register_form p {
     text-align: center;
     color: #fff;
     font-style: italic;
     margin-top: 20px;
     margin-bottom: 0;
     font-weight: 300;
     text-transform: capitalize;
}
 .ms_register_form p a {
     color: #fff;
     font-weight: 600;
     position: relative;
}
 body.theme-light .ms_register_form h2, body.theme-light .ms_register_form p, body.theme-light .ms_register_form p a, body.theme-light .ms_register_form .form-control, body.theme-light .ms_register_form .remember_checkbox {
     color: var(--text-primary) !important;
}
 body.theme-light .ms_register_form .form-control {
     background-color: rgba(255, 255, 255, 0.9);
     border: 1px solid var(--border-color);
}
 .modal-open .ms_main_wrapper {
     filter: blur(2px);
}
 .ms_register_form .remember_checkbox {
     float: left;
     font-size: 15px;
     color: #fff;
     font-weight: 400;
     position: relative;
     padding-left: 21px;
     width: 100%;
     display: block;
     text-align: left;
}
 .ms_register_form .remember_checkbox label input {
     display: none;
}
 .ms_register_form .remember_checkbox label .checkmark {
     position: absolute;
     top: 3px;
     left: 0;
     height: 12px;
     width: 12px;
     text-align: center;
     line-height: 15px;
     border-radius: 2px;
     background-color: #fff;
}
 .ms_register_form .remember_checkbox label {
     cursor: pointer;
}
 .popup_forgot {
     margin-top: 25px;
}
 .popup_forgot a {
     font-size: 16px;
     color: #fff;
     font-weight: 600;
     letter-spacing: 1px;
     position: relative;
}
 .ms_clear_modal .modal-dialog, .ms_save_modal .modal-dialog {
     max-width: 500px;
}
 .ms_clear_modal .modal-dialog .modal-body h1, .ms_save_modal .modal-dialog .modal-body h1 {
     font-size: 18px;
     color: #fff;
}
 .ms_clear_modal .modal-dialog .modal-content, .ms_save_modal .modal-dialog .modal-content {
     padding: 25px;
     text-align: center;
}
 .clr_modal_btn {
     margin-top: 15px;
}
 .clr_modal_btn a {
     height: 30px;
     background-color: #fff;
     display: inline-block;
     padding: 0 17px;
     line-height: 34px;
     text-transform: capitalize;
     font-size: 13px;
     border-radius: 15px;
}
 .clr_modal_btn a:hover {
     color: var(--color-accent);
}
 .save_modal_btn {
     padding: 20px 0;
}
 .save_modal_btn a {
     background-color: #fff;
     display: inline-block;
     padding: 0 15px;
     border-radius: 20px;
     height: 35px;
     line-height: 39px;
     text-transform: capitalize;
     font-size: 14px;
     border: 1px solid #fff;
}
 .save_modal_btn a:hover {
     color: #fff;
     background-color: transparent;
}
 .ms_save_email {
     padding: 0 40px;
     border-top: 1px solid #fff;
     padding-top: 20px;
}
 .ms_save_email h3 {
     font-size: 15px;
     color: #fff;
     text-transform: capitalize;
     padding-bottom: 15px;
}
 button.save_btn {
     position: relative;
     border-radius: 30px;
     width: 100px;
     border: 1px solid #fff;
     margin-top: 15px;
     height: 35px;
     line-height: 33px;
     background-color: transparent;
     color: #fff;
     transition: all 0.3s ease;
}
 button.save_btn:hover {
     background-color: #fff;
     color: var(--color-accent);
}
/* ================================================ 20. MODAL - Botão "register now" / "login now" ================================================ */
 .ms_register_popup .ms_btn, #myModal .ms_btn, #myModal1 .ms_btn {
     background-color: var(--color-accent) !important;
     background-image: none !important;
     color: #fff !important;
     width: 100% !important;
     max-width: 100% !important;
     height: 40px !important;
     line-height: 40px !important;
     padding: 0 20px !important;
     margin: 15px 0 0 !important;
     border: none !important;
     border-radius: 20px !important;
     text-align: center !important;
     text-transform: capitalize !important;
     text-decoration: none !important;
     font-size: 16px !important;
     cursor: pointer !important;
     display: block !important;
     box-shadow: none !important;
     position: relative !important;
     overflow: hidden !important;
}
 .ms_register_popup .ms_btn::before, .ms_register_popup .ms_btn::after, #myModal .ms_btn::before, #myModal .ms_btn::after, #myModal1 .ms_btn::before, #myModal1 .ms_btn::after {
     content: none !important;
     display: none !important;
     background: none !important;
     background-image: none !important;
     width: 0 !important;
     height: 0 !important;
}
 .ms_register_popup .ms_btn:hover, #myModal .ms_btn:hover, #myModal1 .ms_btn:hover {
     background-color: var(--color-accent-hover) !important;
     color: #fff !important;
     box-shadow: 0 0 20px 0 var(--shadow-glow) !important;
}
/* ================================================ 21. MODAL LOGIN - Botão em baixo ================================================ */
 #myModal1 .ms_register_form {
     min-height: 380px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
 #myModal1 .ms_register_form form {
     display: flex;
     flex-direction: column;
     flex: 1;
}
 #myModal1 form .ms_btn {
     margin-top: auto !important;
     margin-bottom: 10px !important;
}
 #myModal1 .remember_checkbox {
     margin-top: 25px !important;
     margin-bottom: 30px !important;
     padding-top: 20px !important;
}
 #myModal1 .popup_forgot {
     margin: 18px 0 12px !important;
     text-align: center;
}
 #myModal1 .ms_register_form > p {
     margin-top: 18px !important;
     text-align: center;
}
/* ================================================ 22. PROFILE / PLANS / UPLOAD ================================================ */
 .ms_profile .ms_top_btn {
     float: right;
     text-align: left;
     width: 56.3%;
     position: relative;
}
 .ms_main_wrapper.ms_profile .ms_header {
     padding: 20px 50px 10px;
}
 .ms_profile .ms_top_btn .ms_btn {
     margin-left: 0;
     position: relative;
     top: 2px;
}
 .ms_admin_name {
     float: right;
     line-height: 30px;
     font-size: 15px;
     color: var(--text-primary);
     text-transform: capitalize;
     position: relative;
     padding-right: 19px;
}
 .ms_admin_name:after {
     content: "";
     position: absolute;
     top: 23px;
     right: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-top: 4px solid var(--text-primary);
}
 .ms_admin_name:hover {
     color: var(--color-accent);
}
 .ms_admin_name:hover:after {
     border-top: 4px solid var(--color-accent);
}
 .ms_admin_name:before {
     position: absolute;
     height: 30px;
     width: 2px;
     content: "";
     left: -21px;
     top: 6px;
}
 .ms_main_wrapper.ms_profile .ms_top_right .ms_top_lang:after {
     right: 19px;
}
 .ms_main_wrapper.ms_profile .ms_top_lang {
     padding-right: 34px;
}
 .ms_admin_name span.ms_pro_name {
     width: 50px;
     height: 50px;
     display: inline-block;
     border-radius: 100%;
     color: #fff;
     text-transform: uppercase;
     text-align: center;
     line-height: 56px;
     margin-left: 10px;
     position: relative;
     top: -3px;
     background-image: linear-gradient(180deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, var(--color-accent) 0%, rgb(32, 167, 196) 100%);
}
 .ms_profile_box {
     background-color: var(--bg-sidebar);
     width: 61%;
     margin: 0 auto;
     text-align: center;
     padding: 50px 0;
     display: inline-block;
     border-radius: 15px;
     margin-bottom: 10px;
}
 .ms_pro_form {
     float: left;
     width: 100%;
     text-align: center;
     margin-top: 15px;
}
 .ms_pro_form .form-group {
     width: 55%;
     display: inline-block;
     padding: 0 12px;
     text-align: left;
     margin-bottom: 25px;
}
 .ms_pro_form .form-group label {
     font-size: 16px;
     color: var(--color-accent);
     margin-bottom: 5px;
}
 .ms_pro_img {
     position: relative;
     display: inline-block;
     cursor: pointer;
}
 .ms_pro_img img {
     width: 155px;
     height: 155px;
     border-radius: 100%;
     border: 2px solid #fff;
}
 .ms_pro_form .ms_btn {
     height: 40px;
     width: 140px;
     line-height: 43px;
     margin-left: 15px;
}
 .ms_profile_wrapper, .ms_account_wrapper {
     text-align: center;
     margin-top: 60px;
     padding-left: 80px;
}
 .ms_profile_wrapper h1, .ms_account_wrapper h2 {
     font-size: 26px;
     color: var(--text-primary);
     font-weight: 400;
     margin-bottom: 30px;
}
 .pro_img_overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 100%;
     background-color: rgba(0, 0, 0, .6);
     border: 2px solid #fff;
     opacity: 0;
     transition: all .3s ease;
}
 .ms_pro_img:hover .pro_img_overlay {
     opacity: 1;
}
 .pro_img_overlay i.fa_icon.edit_icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-position: -110px -39px;
}
 ul.pro_dropdown_menu {
     background-color: #fff;
     max-width: 150px;
     width: 100%;
     right: 0;
     top: 157%;
     position: absolute;
     padding: 10px 15px;
     line-height: 1;
     border-radius: 6px;
     visibility: hidden;
     opacity: 0;
     transition: all 0.3s ease;
}
 ul.pro_dropdown_menu:after {
     content: "";
     position: absolute;
     width: 0;
     height: 0;
     top: -9px;
     right: 34px;
     border-left: 9px solid transparent;
     border-right: 9px solid transparent;
     border-bottom: 9px solid #fff;
}
 ul.pro_dropdown_menu.open_dropdown {
     visibility: visible;
     opacity: 1;
}
 ul.pro_dropdown_menu li a {
     width: 100%;
     display: block;
     padding: 5px 0;
     color: #222;
}
 ul.pro_dropdown_menu li a:hover {
     color: var(--color-accent);
}
 .ms_plan_box {
     background-color: #fff;
     border-radius: 15px;
     padding-bottom: 50px;
     transition: all 0.5s ease;
     overflow: hidden;
     position: relative;
}
 .ms_plan_box .ms_plan_header {
     padding: 40px 0 50px;
     position: relative;
     overflow: hidden;
     z-index: 1;
     border-radius: 15px;
}
 .ms_plan_box .ms_plan_header:after {
     position: absolute;
     width: 606px;
     height: 606px;
     z-index: -1;
     content: "";
     border-radius: 100%;
     top: -417px;
     right: -215px;
     background-color: #2ec8e6;
     box-shadow: inset 0 3px 17px 0 rgba(0, 0, 0, 0.35);
}
 .ms_plan_img {
     width: 100px;
     height: 100px;
     background-color: #fff;
     display: inline-block;
     line-height: 97px;
     border-radius: 100%;
     box-shadow: 0 0 10px 0 rgba(4, 4, 4, 0.1);
}
 .ms_plan_box h3.plan_heading {
     font-size: 22px;
     color: #202020;
     padding-bottom: 7px;
     position: relative;
     display: inline-block;
     margin-bottom: 25px;
     padding-top: 35px;
}
 .plan_dolar {
     width: 89px;
     height: 89px;
     display: inline-block;
     border: 2px solid var(--color-accent);
     line-height: 99px;
     font-size: 40px;
     border-radius: 100%;
     font-weight: 600;
     color: var(--color-accent);
     position: relative;
     background-color: #fff;
     z-index: 1;
}
 .ms_plan_box ul li {
     color: #777;
     font-weight: 600;
     font-size: 18px;
     margin-bottom: 10px;
}
 .ms_plan_btn {
     position: absolute;
     left: 50%;
     bottom: -50%;
     transform: translateX(-50%);
     opacity: 0;
     visibility: hidden;
     transition: all 0.7s ease;
}
 .ms_plan_box a.ms_btn {
     height: 40px;
     line-height: 40px;
     width: 150px;
     margin-left: 0;
     margin-top: 20px;
}
 .ms_plan_box:hover .ms_plan_btn, .ms_plan_box.paln_active .ms_plan_btn {
     opacity: 1;
     visibility: visible;
     bottom: 50px;
}
 .ms_plan_box.paln_active, .ms_plan_box:hover {
     padding-bottom: 110px;
}
 .ms_acc_overview {
     width: 73%;
     background-color: var(--bg-sidebar);
     border-radius: 15px;
     padding: 50px 0;
     text-align: center;
     margin: 30px auto 10px;
}
 .ms_acc_ovrview_list {
     width: 50%;
     display: inline-block;
}
 .ms_acc_ovrview_list ul li {
     text-align: left;
     width: 100%;
     display: block;
     color: var(--text-primary);
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 16px;
     text-transform: capitalize;
}
 .ms_acc_ovrview_list ul li span {
     text-align: left;
     float: right;
     width: 30%;
     color: var(--color-accent);
}
 .ms_upload_wrapper {
     text-align: center;
     padding-left: 80px;
}
 .ms_upload_box {
     background-color: var(--bg-sidebar);
     width: 100%;
     margin: 0 auto;
     text-align: center;
     padding: 50px 0;
     display: inline-block;
     border-radius: 15px;
}
 .ms_upload_box h2 {
     font-size: 26px;
     color: var(--text-primary);
}
 .ms_upload_box img {
     margin: 40px 0 50px;
     cursor: pointer;
}
 .ms_upload_btn a.ms_btn {
     margin-left: 0;
     height: 40px;
     line-height: 43px;
     width: 210px;
     margin: 0 10px;
}
/* ================================================ 23. LANGUAGE POPUP ================================================ */
 .ms_lang_popup .modal-content h1 {
     color: #fff;
     font-size: 22px;
     text-transform: capitalize;
     text-align: center;
     margin-bottom: 15px;
     padding-bottom: 10px;
     position: relative;
}
 .ms_lang_popup .modal-content p {
     color: #fff;
     font-size: 16px !important;
     text-align: center;
     margin-bottom: 30px;
}
 .ms_lang_popup .modal-content ul.lang_list {
     padding: 0;
     margin: 0;
     list-style: none;
}
 .ms_lang_popup .modal-content ul.lang_list li {
     width: 50%;
     float: left;
     padding: 10px 20px;
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-width: 1px 1px 1px 0;
     margin-bottom: -1px;
     margin-right: -1px;
}
 .ms_lang_popup .modal-content {
     padding: 30px 0;
}
 .lang_list label {
     cursor: pointer;
     color: #fff;
     font-size: 16px;
     position: relative;
     font-weight: 500;
     width: 100%;
     text-transform: capitalize;
     transition: all 0.3s ease;
}
 .lang_list label input[type="checkbox"] {
     display: none;
}
 .lang_list label input[type="checkbox"] + .label-text {
     position: absolute;
     right: 0;
     top: 5px;
     width: 14px;
     height: 14px;
     background-color: #fff;
     border: 1px solid #fff;
     border-radius: 50%;
}
 .lang_list label input[type="checkbox"]:checked + .label-text:before {
     content: "\f00c";
     color: #1b2039;
     position: absolute;
     top: 0;
     left: 0;
     font: normal normal normal 14px/1 FontAwesome;
     background-color: #ffffff;
     border-radius: 50%;
}
 .ms_lang_popup .modal-dialog {
     max-width: 500px;
     width: 100%;
}
 .ms_lang_btn {
     display: inline-block;
     width: 100%;
     text-align: center;
     margin-top: 20px;
}
 .ms_lang_btn a.ms_btn {
     cursor: default;
     opacity: 0.2;
}
 .ms_lang_popup .modal-content.add_lang .ms_lang_btn a.ms_btn {
     opacity: 1;
     cursor: pointer;
}
/* ================================================ 24. BLOG ================================================ */
 .ms_blog_wrapper {
     padding-top: 60px;
     position: relative;
}
 .ms_blog_wrapper .ms_blog_section {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
}
 .ms_blog_img img {
     border-radius: 10px;
     width: 100%;
}
 .ms_blog_content {
     padding: 20px;
     color: var(--text-primary);
     background-color: var(--bg-sidebar);
}
 .ms_blog_section .ms_box_overlay_on {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
     top: 0;
     border-radius: 10px;
     background-image: linear-gradient(90deg, rgb(20, 24, 42) 0%, rgb(237, 63, 179) 0%, rgb(52, 62, 105) 0%, rgba(32, 167, 196, 0) 100%);
     transition: all 0.4s ease;
}
 .ms_blog_section:hover .ms_box_overlay_on {
     opacity: 0;
     top: 100%;
}
 .ms_blog_section:hover .ms_main_overlay {
     opacity: 1;
}
 .ms_blog_section:hover .ms_box_overlay {
     top: 0;
}
 .ms_blog_section:hover .ovrly_text_div {
     bottom: 20px;
}
 .ms_blog_section span.ovrly_text1 {
     color: var(--text-primary);
}
 .ms_blog_single_wrapper {
     padding-top: 60px;
}
 .blog_single_img img {
     width: 100%;
     border-radius: 10px;
}
 .blog_single_content {
     color: var(--text-primary);
     padding-top: 30px;
}
 .blog_single_content .ms_blog_title {
     font-size: 22px;
     margin-bottom: 10px;
     text-transform: capitalize;
}
 .blog_single_content blockquote {
     font-size: 18px;
     padding: 20px 20px 20px 65px;
     background-color: var(--bg-sidebar);
     margin-bottom: 40px;
     margin-top: 35px;
     display: inline-block;
     position: relative;
}
 .blog_single_content blockquote:before {
     background-image: url(../images/svg/quote.svg);
     position: absolute;
     width: 40px;
     height: 40px;
     top: -15px;
     left: 16px;
     content: "";
}
 .blog_comments {
     padding-top: 50px;
}
 .blog_comments h1 {
     font-size: 22px;
     text-transform: capitalize;
}
 .ms_comment_section {
     position: relative;
     margin-top: 30px;
     padding: 20px;
     background-color: var(--bg-sidebar);
     color: var(--text-primary);
}
 .ms_comment_section .comment_img {
     position: absolute;
     top: 20px;
     left: 20px;
}
 .ms_comment_section .comment_info {
     padding-left: 120px;
}
 .blog_comments_forms {
     padding-top: 60px;
}
 .comment_input_wrapper {
     margin-bottom: 30px;
}
 .comment_input_wrapper input.cmnt_field, .comment_input_wrapper textarea#comment {
     width: 100%;
     background-color: transparent;
     border: none;
     border-bottom: 1px solid var(--color-accent);
     font-size: 14px;
     color: var(--text-primary);
}
 .comment_input_wrapper textarea#comment {
     height: 100px;
     resize: none;
}
 .comment-form-submit input#comment-submit {
     margin-left: 0;
     border: none;
     width: auto;
     padding: 0 25px;
     cursor: pointer;
     height: 35px;
     line-height: 39px;
}
/* ================================================ 25. SIDEBAR (Blog) ================================================ */
 .widget.widget_search {
     position: relative;
}
 .widget.widget_search button.search_btn.search_icon {
     border: none;
     color: #fff;
     font-size: 13px;
     top: 1px;
     height: 38px;
     line-height: 39px;
}
 .ms_sidebar .widget {
     display: inline-block;
     width: 100%;
}
 .widget.widget_categories {
     margin-top: 40px;
}
 .widget.widget_recent_entries {
     margin-top: 35px;
}
 .widget.widget_tag_cloud {
     margin-top: 30px;
}
 h2.widget-title {
     font-size: 18px;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
     text-transform: capitalize;
     width: 100%;
     margin-bottom: 20px;
}
 h2.widget-title:after {
     width: 100px;
     height: 5px;
     content: "";
     position: absolute !important;
     bottom: 0;
     left: -25px;
     z-index: 0;
     background: radial-gradient(50% 50%, ellipse closest-side, var(--color-accent), rgba(255, 42, 112, 0) 60%);
}
 .widget ul {
     padding: 0;
     margin: 0;
     list-style: none;
}
 .widget.widget_categories ul li a {
     color: var(--text-primary);
     position: relative;
     padding-left: 20px;
}
 .widget.widget_categories ul li a:after {
     position: absolute;
     width: 8px;
     height: 8px;
     background-color: var(--color-accent);
     content: "";
     left: 0;
     top: 3px;
     border-radius: 100%;
}
 .widget.widget_categories ul li a:hover {
     color: var(--color-accent);
}
 .widget.widget_recent_entries ul li {
     margin-bottom: 10px;
     width: 100%;
     display: inline-block;
}
 .widget.widget_recent_entries ul li .recent_cmnt_img {
     float: left;
     width: 50px;
     margin-right: 15px;
}
 .widget.widget_recent_entries ul li .recent_cmnt_data {
     width: calc(100% - 75px);
     float: left;
}
 .widget.widget_recent_entries ul li .recent_cmnt_data h4 {
     margin: 0;
     font-size: 14px;
     line-height: 24px;
     font-weight: 500;
}
 .widget.widget_recent_entries ul li .recent_cmnt_data h4 a {
     color: var(--text-primary);
}
 .widget.widget_recent_entries ul li .recent_cmnt_data h4 a:hover {
     color: var(--color-accent);
}
 .widget.widget_tag_cloud ul li {
     display: inline-block;
}
 .widget.widget_tag_cloud ul li a {
     background-color: var(--color-accent);
     color: #fff;
     padding: 0 13px;
     display: block;
     margin-bottom: 10px;
     height: 32px;
     line-height: 33px;
     border-radius: 20px;
     border: 1px solid var(--color-accent);
}
 .widget.widget_tag_cloud ul li a:hover {
     color: #fff;
     box-shadow: 0 0 20px 0 var(--color-accent);
}
/* ================================================ 26. NOTIFICAÇÕES + FAVORITOS ================================================ */
 @keyframes slideInRight {
     from {
         transform: translateX(120%);
         opacity: 0;
    }
     to {
         transform: translateX(0);
         opacity: 1;
    }
}
 @keyframes slideOutRight {
     from {
         transform: translateX(0);
         opacity: 1;
    }
     to {
         transform: translateX(120%);
         opacity: 0;
    }
}
 .more_option li.is-favourite .icon_fav {
     color: var(--color-danger);
     font-weight: bold;
}
 .more_option li.is-favourite .icon_fav::before {
     content: "♥";
}
 .more_option li:not(.is-favourite) .icon_fav::before {
     content: "♡";
}
 .add-fav-btn.is-favourite, .remove-fav-btn.is-favourite, .player-fav-btn.is-favourite, #add-fav-btn.is-favourite {
     color: var(--color-danger) !important;
}
 .add-fav-btn.is-favourite .icon_fav, .remove-fav-btn.is-favourite .icon_fav, .player-fav-btn.is-favourite i {
     color: var(--color-danger) !important;
}
 @keyframes heartBeat {
     0%, 100% {
         transform: scale(1);
    }
     25% {
         transform: scale(1.3);
    }
     50% {
         transform: scale(0.95);
    }
     75% {
         transform: scale(1.15);
    }
}
 .add-fav-btn.is-favourite, .remove-fav-btn.is-favourite, #add-fav-btn.is-favourite, .player-fav-btn.is-favourite {
     animation: heartBeat 0.6s ease-in-out;
}
 .fav-count {
     background: var(--color-danger);
     color: #fff;
     font-size: 10px;
     font-weight: bold;
     padding: 2px 6px;
     border-radius: 10px;
     margin-left: 5px;
     min-width: 18px;
     text-align: center;
     display: inline-block;
     line-height: 1.2;
}
 .fav-count:empty {
     display: none;
}
 .sidebar-favourites.has-favourites i {
     color: var(--color-danger);
}
/* ================================================ 27. NOTIFICAÇÃO "AGORA A TOCAR" - Clicável ================================================ */
 .code-now-playing {
     position: fixed;
     bottom: 160px;
     left: 90px;
     background: linear-gradient(135deg, var(--bg-sidebar) 0%, #2a3052 100%);
     border: 1px solid rgba(59, 200, 231, 0.3);
     border-radius: 6px;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 360px;
     max-width: 440px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 200, 231, 0.2);
     z-index: 999998;
     color: var(--text-primary);
     font-family: 'Josefin Sans', sans-serif;
     animation: cnpSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     backdrop-filter: blur(10px);
}
 body.theme-light .code-now-playing {
     background: linear-gradient(135deg, #ffffff 0%, #f0f4f8 100%);
     border: 1px solid var(--border-color);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
 @keyframes cnpSlideIn {
     from {
         transform: translateX(-120%);
         opacity: 0;
    }
     to {
         transform: translateX(0);
         opacity: 1;
    }
}
 @keyframes cnpSlideOut {
     from {
         transform: translateX(0);
         opacity: 1;
    }
     to {
         transform: translateX(-120%);
         opacity: 0;
    }
}
 .cnp-cover {
     position: relative;
     width: 56px;
     height: 56px;
     flex-shrink: 0;
     border-radius: 8px;
     overflow: hidden;
     background-color: var(--bg-body);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     text-decoration: none;
     cursor: pointer;
     transition: transform 0.2s;
}
 .cnp-cover:hover {
     transform: scale(1.05);
}
 .cnp-cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}
 .cnp-cover i.fa-music {
     font-size: 24px;
     color: var(--color-accent);
}
 .cnp-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(20, 24, 42, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 16px;
     opacity: 0;
     transition: opacity 0.2s;
}
 .cnp-cover:hover .cnp-overlay {
     opacity: 1;
}
 .cnp-bars {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     background: linear-gradient(to top, rgba(20, 24, 42, 0.9) 0%, rgba(20, 24, 42, 0.4) 50%, transparent 100%);
     display: flex;
     align-items: flex-end;
     justify-content: center;
     gap: 2px;
     padding: 0 6px 6px;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s;
}
 .code-now-playing:hover .cnp-bars {
     opacity: 0.7;
}
 .cnp-bars span {
     width: 3px;
     background: var(--color-accent);
     border-radius: 2px;
     height: 4px;
     animation: cnpBar 0.8s ease-in-out infinite alternate;
     box-shadow: 0 0 4px var(--color-accent);
}
 .cnp-bars span:nth-child(1) {
     animation-delay: 0s;
}
 .cnp-bars span:nth-child(2) {
     animation-delay: 0.1s;
}
 .cnp-bars span:nth-child(3) {
     animation-delay: 0.2s;
}
 .cnp-bars span:nth-child(4) {
     animation-delay: 0.3s;
}
 .cnp-bars span:nth-child(5) {
     animation-delay: 0.4s;
}
 @keyframes cnpBar {
     0% {
         height: 4px;
    }
     100% {
         height: 22px;
    }
}
 .cnp-info {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     display: block;
}
 .cnp-label {
     font-size: 10px;
     color: var(--color-accent);
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: 3px;
     display: flex;
     align-items: center;
     gap: 4px;
}
 .cnp-label i {
     font-size: 10px;
     animation: cnpPulse 1.5s ease-in-out infinite;
}
 @keyframes cnpPulse {
     0%, 100% {
         opacity: 1;
         transform: scale(1);
    }
     50% {
         opacity: 0.6;
         transform: scale(1.2);
    }
}
 .cnp-title {
     font-size: 14px;
     color: var(--text-primary);
     font-weight: 600;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     line-height: 1.2;
     margin-bottom: 2px;
}
 .cnp-title:hover {
     color: var(--color-accent);
}
 .cnp-category {
     font-size: 11px;
     color: var(--text-muted);
     text-transform: capitalize;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 body.theme-light .cnp-title {
     color: var(--text-primary);
}
 body.theme-light .cnp-category {
     color: var(--text-muted);
}
 .cnp-actions {
     display: flex;
     gap: 4px;
     flex-shrink: 0;
}
 .cnp-actions button, .cnp-actions a {
     width: 32px;
     height: 32px;
     border: none;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     font-size: 12px;
     text-decoration: none;
}
 .cnp-actions button:hover, .cnp-actions a:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: scale(1.1);
     color: var(--color-accent);
}
 .cnp-actions .cnp-fav.is-favourite {
     color: var(--color-danger);
     background: rgba(226, 33, 52, 0.15);
}
 .cnp-actions .cnp-play {
     background: rgba(59, 200, 231, 0.2);
     color: var(--color-accent);
}
 .cnp-actions .cnp-play:hover {
     background: var(--color-accent);
     color: #fff;
}
 body.theme-light .cnp-actions button, body.theme-light .cnp-actions a {
     background: rgba(0, 0, 0, 0.05);
     color: var(--text-primary);
}
 @media (max-width: 600px) {
     .code-now-playing {
         left: 10px;
         right: 10px;
         bottom: 85px;
         min-width: auto;
         max-width: none;
    }
     .cnp-actions .cnp-play {
         display: none;
    }
}
/* ================================================ 28. MEDIA QUERIES (Responsivo) ================================================ */
 @media(max-width:1825px) {
     .ms_top_trend {
         padding-left: 20px;
    }
     .ms_profile .ms_top_btn {
         width: 67.3%;
    }
}
 @media(max-width:1800px) {
     .jp-volume-controls.flex-item {
         margin-left: 25px;
    }
     .jp-progress-container.flex-item {
         max-width: 600px;
    }
     body {
         font-size: 15px;
    }
     .ms_profile .ms_top_btn {
         width: auto;
         display: flex;
         place-content: flex-end;
    }
     .ms_admin_name {
         margin-left: 14px;
    }
     .ms_profile .ms_top_btn .ms_btn {
         margin-top: 6px;
    }
     .ms_profile .ms_top_right .ms_top_lang:after {
         display: none;
    }
     .ms_admin_name:before {
         display: none;
    }
     .ms_upload_wrapper {
         padding-top: 50px;
    }
     .ms_free_download .album_list_wrapper > ul > li {
         width: 13%;
    }
     .ms_main_wrapper.ms_profile .ms_top_lang {
         padding-right: 15px;
    }
     .ms_main_wrapper.ms_profile .ms_top_trend {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         width: 35%;
    }
}
 @media(max-width:1700px) {
     .ms_top_search {
         max-width: 20%;
    }
     .ms_top_trend {
         padding-left: 35px;
    }
     .jp-progress-container.flex-item {
         max-width: 50%;
    }
     .jp-type-playlist {
         padding-right: 80px;
    }
     .jp_queue_wrapper {
         padding-right: 40px;
    }
     .w_top_song {
         padding-left: 20px;
    }
     .ms_rcnt_box_text h3, .w_top_song .w_tp_song_name h3 {
         font-size: 14px;
    }
     .footer_box {
         padding-right: 20px;
    }
}
 @media(max-width:1600px) {
     .ms_weekly_wrapper.ms_free_music .weekly_right {
         right: 0;
    }
     .ms_top_right .ms_top_lang:after {
         display: none;
    }
     .ms_header {
         padding: 20px 30px;
    }
     .ms_top_right .ms_top_lang {
         padding-right: 5px;
    }
     .ms_profile .ms_top_btn {
         text-align: right;
    }
     .ms_profile_box {
         width: 80%;
    }
     .jp-progress-container.flex-item {
         max-width: 45%;
    }
     .ms_play_song {
         width: 310px;
    }
     .jp-type-playlist {
         padding-left: 340px;
    }
     .ms_releases_wrapper .w_top_song {
         padding-left: 10px;
    }
     .album_list_wrapper > ul > li > a {
         font-size: 14px;
    }
     .ms_top_artist ul.more_option li a .opt_icon {
         display: none;
    }
     .weekly_left span.w_top_no {
         font-size: 40px;
    }
     .w_top_song {
         padding-left: 10px;
    }
     .ms_top_trend {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         width: 35%;
    }
}
 @media(max-width:1400px) {
     .ms_genres_wrapper.ms_genres_single {
         margin-top: 50px;
    }
     .ms_banner_img {
         max-width: 470px;
    }
     .ms_banner_text {
         width: calc(100% - 470px);
    }
     .ms_banner_text h1 {
         font-size: 29px;
    }
     .ms_play_song {
         width: 281px;
         padding: 15px 0 15px 25px;
    }
     .weekly_left span.w_top_no {
         width: 70px;
    }
     .w_top_song {
         padding-left: 0;
    }
     .w_top_song .w_tp_song_name {
         padding-left: 15px;
    }
     .w_song_time {
         padding-right: 30px;
    }
     .ms_genres_box {
         margin-bottom: 20px;
    }
     .jp-type-playlist {
         padding-left: 300px;
         display: inline-block;
         width: 89%;
         padding-right: 0;
    }
     .footer_box {
         padding-right: 0;
    }
     .ms_weekly_box {
         padding: 20px 0;
         border-bottom: 1px solid var(--border-color);
    }
     .ms_weekly_inner .ms_divider {
         display: none;
    }
     .jp_queue_wrapper {
         padding-right: 15px;
         margin-top: 22px;
    }
     .jp-progress-container.flex-item {
         max-width: 31%;
    }
     .ms_album_single_wrapper {
         padding-left: 160px;
    }
     .slider_nav_prev {
         left: 0;
    }
     .slider_nav_next {
         right: 0;
    }
     .ms_footer_inner {
         padding: 0 80px 2px 140px;
    }
     .ms_content_wrapper {
         margin-left: 140px;
         margin-right: 60px;
    }
     .ms_weekly_wrapper .col-lg-4.col-md-12 {
         padding-right: 20px;
         flex: 0 0 100%;
         max-width: 100%;
    }
}
 @media(max-width:1200px) {
     .ms_content_wrapper {
         margin-right: 50px;
    }
     .ms_rcnt_box_text h3, .w_top_song .w_tp_song_name h3 {
         font-size: 14px;
    }
     .ms_admin_name:before {
         display: none;
    }
     .ms_header {
         padding: 15px 20px 15px 30px;
    }
     .ms_top_search {
         max-width: 25%;
    }
     .ms_banner_img {
         max-width: 50%;
    }
     .ms_banner_text h1 {
         font-size: 27px;
    }
     .ms_banner_text {
         width: calc(100% - 50%);
         padding-top: 85px;
    }
     .ms-banner {
         padding: 0 0 30px;
    }
     .jp-type-playlist {
         padding-left: 270px;
         width: 87%;
    }
     .jp-toggles.flex-item {
         flex: 0 0 120px;
    }
     .jp-volume-controls.flex-item {
         flex: 0 0 55px;
    }
     .ms_play_song {
         width: 250px;
         padding: 10px 0 10px 15px;
         height: 70px;
    }
     .jp-track-name {
         font-size: 13px;
    }
     .play_song_options {
         top: 23px;
    }
     .play_song_options ul li a {
         font-size: 14px;
         padding: 8px 10px;
    }
     .footer_box {
         font-size: 14px;
    }
     .ms_footer_inner {
         padding: 0 30px 0 127px;
    }
     .weekly_left span.w_top_no {
         font-size: 25px;
    }
     .w_top_song .w_tp_song_img {
         width: 45px;
    }
     .w_top_song .w_tp_song_name {
         width: calc(100% - 45px);
    }
     .weekly_left span.w_top_no {
         width: 40px;
    }
     .ms_sidemenu_wrapper {
         width: 90px;
    }
     .ms_rcnt_box .ms_play_icon img, .ms_genres_box .ms_play_icon img {
         width: 30px;
         height: 30px;
    }
     .ms_more_icon {
         top: 0;
    }
     .ovrly_text_div {
         bottom: 0;
    }
     .ms_upload_box h2 {
         font-size: 22px;
    }
     .ms_weekly_box {
         padding: 25px 0 20px;
         border-bottom: 1px solid var(--border-color);
    }
     .ms_weekly_inner .ms_divider {
         display: none;
    }
     .ms_content_wrapper.padder_top80 {
         padding-top: 70px !important;
    }
     .ms_top_trend {
         width: 30%;
    }
}
 @media(max-width:992px) {
     .padder_top90 {
         padding-top: 50px !important;
    }
     .w_top_song .w_tp_song_name {
         padding-left: 12px;
    }
     .ms_top_right .ms_top_lang {
         top: 8px;
    }
     .ms_profile .ms_top_btn .ms_btn {
         margin-top: 8px;
    }
     .ms_main_wrapper.ms_profile .ms_top_lang {
         top: 18px;
    }
     .ms_nav_wrapper ul.nav_playlist {
         margin-bottom: 10px;
    }
     .ms_rcnt_box_img img {
         width: 100%;
    }
     .ms_banner_text {
         width: 100%;
         padding-top: 20px;
         padding-left: 30px;
         text-align: center;
    }
     .ms_banner_img {
         max-width: 100%;
    }
     .jp-type-playlist {
         width: 74%;
         padding-bottom: 10px;
         padding-left: 0;
         margin: 0 auto;
         display: block;
    }
     .ms_play_song {
         width: 100px;
         padding: 13px 0 10px 15px;
         height: 70px;
    }
     .jp_queue_wrapper {
         padding-right: 25px;
         margin-top: 20px;
    }
     .jp-track-name {
         font-size: 13px;
    }
     .play_song_name .que_data {
         display: none;
    }
     .ms_top_search .form-control {
         height: 30px;
         line-height: 47px;
    }
     .ms_header {
         padding: 15px 30px 10px;
    }
     .ms_top_trend {
         display: none;
    }
     .ms_register_popup .modal-content {
         padding: 55px 30px;
    }
     .ms_upload_box {
         width: 80%;
    }
}
 @media(max-width:991px) {
     .ms_blog_wrapper .ms_blog_section {
         margin-bottom: 30px;
    }
     .ms_header {
         padding: 10px 30px;
    }
     .ms_top_right {
         line-height: 1;
         padding-right: 50px;
    }
     .ms_footer_wrapper {
         padding: 0 27px;
    }
     .ms_copyright {
         padding: 0 0 50px;
    }
     .ms_logo_inner {
         min-height: 120px;
    }
     .ms_nav_wrapper {
         top: 140px;
    }
     .ms_upload_wrapper {
         padding-left: 0;
    }
     .ms_profile_box {
         margin-bottom: 0;
    }
     .ms_profile_wrapper, .ms_account_wrapper {
         padding-left: 0;
    }
     .ms_input_group1 {
         width: 54%;
    }
     .ms_cmnt_form .ms_input_group {
         width: 44%;
    }
     .ms_nav_close {
         width: auto;
         height: auto;
         line-height: 1;
         position: fixed;
         right: 20px;
         top: 25px;
         background-color: transparent;
         transform: none;
    }
     .ms_content_wrapper.padder_top80 {
         padding-top: 50px !important;
    }
     .ms_nav_close i {
         color: var(--text-primary);
    }
     .ms_nav_close .fa-angle-right:before {
         content: "\f0c9";
    }
     .ms_top_right .ms_top_lang {
         float: left;
         position: relative;
         top: 8px;
    }
     .ms_top_btn .ms_btn {
         margin-left: 0;
    }
     .ms_sidemenu_wrapper {
         width: 250px;
         left: -250px;
         transition: all 0.5s ease;
    }
     .ms_sidemenu_wrapper.open_menu .ms_nav_close .fa-angle-right:before {
         content: "\f00d";
    }
     span.nav_text {
         opacity: 1;
         display: inline-block;
         visibility: visible;
         position: relative;
         left: auto;
         top: 0;
         background-color: transparent;
         vertical-align: bottom;
         padding: 0 12px;
    }
     .ms_logo {
         display: none !important;
    }
     .ms_logo_open {
         display: block !important;
    }
     .ms_sidemenu_inner {
         width: 200px;
    }
     .ms_sidemenu_wrapper.open_menu {
         left: 0;
    }
     .ms_nav_wrapper ul li a {
         padding: 9px 15px;
    }
     .ms_sidemenu_wrapper.open_menu a {
         text-align: left;
         padding: 9px 15px;
    }
     .ms_header {
         left: 0;
    }
     .ms_content_wrapper {
         margin-left: 0;
         padding: 0 20px;
         margin-right: 0 !important;
    }
     .ms_weekly_wrapper {
         padding: 0 15px 0 30px;
    }
     .ms_rcnt_slider, .ms_featured_slider, .ms_fea_album_slider {
         margin: 0 15px;
    }
     .ms_releases_wrapper {
         padding: 0 15px;
         margin-right: 0;
    }
     .ms_genres_wrapper, .ms_radio_wrapper {
         margin: 30px 15px 0;
    }
     .modal-dialog {
         max-width: 94%;
    }

/* ============================================
   MODAIS RESPONSIVOS - LOGIN / REGISTER / FORGOT
   ============================================ */

/* Wrapper principal dos popups */
.ms_register_popup {
  position: relative;
}

/* Dialog centrado vertical e horizontalmente */
.centered-modal .modal-dialog {
  margin: 1.75rem auto;
  max-width: 930px;
  width: 100%;
  position: relative;
  transform: translateY(0);
}

.register_dialog,
.login_dialog {
  max-width: 930px;
  width: 100%;
}

/* Conteúdo do modal */
.centered-modal .modal-content {
  
  border: none;
  border-radius: 12px;
  overflow: hidden;
  position: relative;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Body do modal - layout flex */
.modal-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 50px;
  flex-wrap: nowrap;
}

/* Coluna da imagem */
.ms_register_img {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.ms_register_img img {
  width: 100%;
  height: auto;
  max-width: 380px;
  display: block;
}

/* Coluna do formulário */
.ms_register_form {
  flex: 0 0 55%;
  max-width: 55%;
}

.ms_register_form h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
}

/* Inputs */
.ms_register_form .form-group {
  position: relative;
  margin-bottom: 18px;
}

.ms_register_form .form-control {
  width: 100%;
  height: 48px;
  padding: 10px 50px 10px 18px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  color: #333;
  background: #fff;
  box-shadow: none;
  outline: none;
}

.ms_register_form .form-control::placeholder {
  color: #999;
}

.ms_register_form .form_icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

/* Botão */
.ms_btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  margin: 15px 0;
}

.ms_btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Texto inferior */
.ms_register_form > p,
.ms_register_form .popup_forgot {
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin: 10px 0 0;
}

.ms_register_form a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.ms_register_form a:hover {
  text-decoration: underline;
}

/* Remember checkbox */
.remember_checkbox {
  color: #fff;
  font-size: 14px;
  margin: 10px 0;
}

.remember_checkbox label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.remember_checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #fff;
}

/* Botão fechar */
.modal-content .close {
  position: absolute;
  top: 12px;
  right: 18px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content .close:hover {
  opacity: 0.8;
}

/* ============================================
   RESPONSIVO
   ============================================ */

/* Tablets - até 991px */
@media (max-width: 991px) {
  .modal-body {
    padding: 30px 30px;
    gap: 20px;
  }

  .ms_register_img {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .ms_register_img img {
    max-width: 260px;
  }

  .ms_register_form {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .ms_register_form h2 {
    font-size: 1.5rem;
    margin-bottom: 18px;
  }
}

/* Mobile - até 767px (EMPILHA) */
@media (max-width: 767px) {
  .centered-modal .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
    width: 100%;

  }

  .register_dialog,
  .login_dialog {
    max-width: 100%;
  }

  .modal-dialog {
    overflow-y: auto;
    max-height: 95vh;
  }

  .modal-body {
    flex-direction: column;
    text-align: center;
    padding: 35px 20px 25px;
    gap: 20px;
  }

  .ms_register_img {
    flex: 0 0 auto;
    max-width: 150px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .ms_register_img img {
    max-width: 150px;
  }

  .ms_register_form {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  .ms_register_form h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .ms_register_form .form-control {
    height: 44px;
    font-size: 14px;
    padding: 10px 45px 10px 14px;
  }

  .modal-content .close {
    top: 8px;
    right: 12px;
    font-size: 20px;
  }
}

/* Mobile pequeno - até 480px */
@media (max-width: 480px) {
  .modal-body {
    padding: 30px 15px 20px;
    gap: 15px;
  }

  .ms_register_img {
    max-width: 120px;
  }

  .ms_register_img img {
    max-width: 120px;
  }

  .ms_register_form h2 {
    font-size: 1.2rem;
  }

  .ms_register_form .form-control {
    height: 42px;
    font-size: 13px;
  }

  .ms_btn {
    padding: 12px;
    font-size: 14px;
  }

  .ms_register_form > p {
    font-size: 13px;
  }
}

/* Ecrãs muito baixos em altura */
@media (max-height: 600px) and (max-width: 767px) {
  .ms_register_img {
    display: none;
  }

  .modal-body {
    padding: 35px 15px 15px;
  }
}

/* Evitar scroll lateral */
html, body {
  overflow-x: hidden;
}

/* Backdrop do modal centrado */
.modal.centered-modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

 @media(max-width:767px) {
     .ms_sidebar {
         margin-top: 30px;
    }
     .ms_album_single_wrapper .album_list_wrapper {
         width: 200%;
    }
     .ms_cmnt_wrapper {
         padding-right: 15px;
    }
     .ms_cmnt_form .ms_input_group {
         width: 100%;
    }
     .album_list_wrapper > ul > li {
         margin-bottom: 10px;
    }
     .ms_cmnt_form .ms_input_group {
         padding-right: 0;
         width: 100%;
    }
     .ms_input_group1 {
         width: 100%;
         padding-top: 20px;
    }
     .ms_test_wrapper {
         margin-left: 0;
         margin-right: 0;
    }
     .album_single_img {
         width: 100%;
    }
     .album_single_text {
         width: 100%;
         padding-left: 0;
         padding-top: 20px;
    }
     .ms_btn {
         width: 85px;
         margin-left: 5px;
    }
     .ms_banner_text h1 {
         font-size: 23px;
    }
     .ms_banner_text .ms_banner_btn .ms_btn {
         margin-right: 13px;
         line-height: 40px;
         margin-left: 0;
         max-width: 110px;
         font-size: 13px;
         height: 35px;
    }
     .jp_quality_optn.custom_select, .jp-volume-controls.flex-item, .jp-toggles.flex-item {
         display: none;
    }
     .ms_releases_wrapper {
         margin-right: 0;
    }
     .ms_play_song {
         padding: 14px 0 10px 15px;
         height: 70px;
    }
     .ms_player_wrapper.close_player {
         bottom: -70px;
    }
     .player_left.open_list .play_song_options {
         display: none;
    }
     .ms_content_wrapper {
         margin-left: 0;
    }
     .ms_upload_box {
         width: 100%;
    }
     .ms_pro_form {
         width: 100%;
         margin-top: 0;
    }
     .ms_pro_form .form-group {
         width: 100%;
    }
     .ms_sidemenu_wrapper, .ms_player_wrapper {
         z-index: 10000;
    }
     .ms_player_wrapper {
         height: 70px;
    }
     .jp-gui.jp-interface.flex-wrap {
         left: 20%;
    }
     .jp-type-playlist {
         width: 100%;
         text-align: center;
         position: absolute;
         right: 0;
         z-index: 1;
         left: auto;
    }
     .ms_footer_inner {
         padding: 0;
    }
     .ms_copyright {
         padding: 0 0 20px;
    }
     .ms_footer_wrapper {
         margin-bottom: 70px;
    }
     .ms_footer_logo {
         padding-left: 0;
         padding-top: 50px;
    }
     .footer_box {
         text-align: center;
    }
     .play_song_name .que_data {
         display: none;
    }
     .ms_play_song {
         width: 80px;
    }
     span.play-left-arrow {
         display: none;
    }
}
 @media(max-width:480px) {
     .ms_banner_text p {
         text-align: center;
    }
     .ms_plan_box ul li {
         font-size: 15px;
         margin-bottom: 5px;
    }
     .jp-playlist {
         width: 80%;
    }
     .ms_sidemenu_wrapper.open_menu .ms_sidemenu_inner {
         width: 180px;
    }
     .ms_sidemenu_inner, .ms_sidemenu_wrapper {
         width: 180px !important;
    }
     .ms_nav_wrapper ul li a {
         font-size: 12px;
    }
}
 @media(max-width:414px) {
     .ms_top_right .ms_top_lang {
         width: 100%;
         text-align: center;
    }
     .ms_banner_text h1 {
         font-size: 18px;
         line-height: 26px;
    }
     .ms_banner_text .ms_banner_btn .ms_btn {
         margin-right: 0;
         max-width: 100px;
         font-size: 12px;
    }
     .footer_box {
         text-align: center;
    }
     .foo_sharing ul {
         padding-left: 0;
    }
     .share_title, .foo_sharing ul {
         width: 100%;
    }
     .ms_banner_btn {
         text-align: center;
    }
     .ms_banner_text h1 {
         text-align: center;
    }
}
 @media(max-width:320px) {
     .ms_header {
         padding: 10px 15px 6px;
    }
     .ms_top_right {
         padding-right: 32px;
    }
     .ms_nav_close {
         right: 2px;
    }
     .ms_lang_popup .modal-content ul.lang_list li {
         padding: 10px;
    }
     .lang_list label {
         font-size: 12px;
    }
     .ms_sidemenu_wrapper.open_menu a {
         padding: 9px 10px;
    }
     .ms_sidemenu_wrapper a {
         font-size: 13px;
    }
     .ms_sidemenu_wrapper.open_menu, .ms_sidemenu_wrapper.open_menu .ms_sidemenu_inner {
         width: 180px;
    }
     .w_top_song .w_tp_song_img {
         width: 100%;
    }
     .w_top_song .w_tp_song_name {
         padding-left: 0;
         margin-top: 15px;
         width: 100%;
    }
     .weekly_right {
         display: none;
    }
     .ms_weekly_box {
         text-align: center;
    }
     .weekly_left span.w_top_no {
         width: 100%;
    }
     .w_top_song {
         width: 100%;
    }
}
/* ================================================ UPLOAD - Image Preview ================================================ */
 .image-upload-wrapper {
     position: relative;
}
 .image-preview {
     position: relative;
     width: 200px;
     height: 200px;
     border: 2px dashed var(--border-color);
     border-radius: 10px;
     background-color: rgba(255, 255, 255, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     overflow: hidden;
     margin-top: 10px;
     transition: all 0.3s ease;
}
 body.theme-light .image-preview {
     background-color: rgba(0, 0, 0, 0.03);
     border-color: var(--border-color);
}
 .image-preview:hover, .image-preview.drag-over {
     border-color: var(--color-accent);
     background-color: rgba(59, 200, 231, 0.1);
     transform: scale(1.02);
}
 .image-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
}
 .image-preview-placeholder {
     text-align: center;
     color: var(--text-muted);
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     pointer-events: none;
}
 .image-preview-placeholder i {
     font-size: 36px;
     color: var(--color-accent);
}
 .image-preview-placeholder span {
     font-size: 13px;
}
 #image-input {
     display: none;
}
 body.theme-light #image-input.form-control {
     background-color: transparent;
}
/* ================================================ DOWNLOAD PAGE - Ícone de Download ================================================ */
 .ms_icon1.ms_dwn_icon {
     background-position: -752px 6px;
     transition: all 0.3s ease;
}
 .album_list_wrapper > ul > li > a:hover .ms_icon1.ms_dwn_icon {
     background-position: -792px 6px;
     transform: scale(1.1);
}
 .album_list_wrapper > ul > li > a {
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 30px;
}
/* Linha clicável para tocar */
 .album_list_wrapper > ul[data-station-id] {
     cursor: default;
     transition: background-color 0.2s ease;
}
 .album_list_wrapper > ul[data-station-id]:hover {
     background-color: rgba(59, 200, 231, 0.05);
}
 .album_list_wrapper > ul[data-station-id] .play-station-trigger {
     cursor: pointer;
}
/* Ajustar quando remove a coluna Duration */
 .album_list_wrapper > ul.album_list_name {
     grid-template-columns: 50px 1fr 1fr 80px 80px 80px;
}
 .album_list_wrapper > ul:not(.album_list_name) {
     grid-template-columns: 50px 1fr 1fr 80px 80px 80px;
     display: flex;
     align-items: center;
     width: 100%;
}
 .album_list_wrapper > ul:not(.album_list_name) > li {
     flex: 1;
     padding: 12px 8px;
     text-align: left;
}
 .album_list_wrapper > ul:not(.album_list_name) > li.text-center {
     text-align: center;
     flex: 0 0 80px;
}
 .album_list_wrapper > ul:not(.album_list_name) > li:first-child {
     flex: 0 0 50px;
}
/* Favourite state */
 .album_list_wrapper > ul[data-station-id] .add-fav-btn.is-favourite .ms_fav_icon {
     background-position: -592px 6px !important;
}
/* ================================================ SEARCH - Tempo Real ================================================ */
 .search-wrapper {
     position: relative;
     width: 100%;
}
 #searchInput {
     padding-right: 45px !important;
     transition: all 0.3s ease;
}
 #searchInput:focus {
     box-shadow: 0 0 0 3px rgba(59, 200, 231, 0.2);
     border-color: var(--color-accent);
}
 .search-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
     right: 0;
     background-color: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 200, 231, 0.1);
     max-height: 480px;
     overflow-y: auto;
     z-index: 1000;
     display: none;
     backdrop-filter: blur(10px);
}
 .search-dropdown.active {
     display: block;
     animation: searchDropIn 0.2s ease;
}
 @keyframes searchDropIn {
     from {
         opacity: 0;
         transform: translateY(-8px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
/* Header do dropdown */
 .search-dropdown-header {
     padding: 12px 16px 8px;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--text-muted);
     font-weight: 600;
     border-bottom: 1px solid var(--border-color);
     background: rgba(0, 0, 0, 0.2);
}
 .search-dropdown-header:first-child {
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
}
/* Item individual */
 .search-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 16px;
     cursor: pointer;
     text-decoration: none;
     color: var(--text-primary);
     transition: all 0.2s ease;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
 .search-item:last-child {
     border-bottom: none;
}
 .search-item:hover, .search-item.active {
     background-color: rgba(59, 200, 231, 0.1);
}
 .search-item.active {
     border-left: 3px solid var(--color-accent);
     padding-left: 13px;
}
 .search-item-image {
     width: 48px;
     height: 48px;
     border-radius: 8px;
     overflow: hidden;
     background-color: var(--bg-body);
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .search-item-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .search-item-image i {
     font-size: 20px;
     color: var(--color-accent);
}
 .search-item-info {
     flex: 1;
     min-width: 0;
     overflow: hidden;
}
 .search-item-title {
     font-size: 14px;
     font-weight: 600;
     color: var(--text-primary);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .search-item-title mark {
     background-color: rgba(59, 200, 231, 0.3);
     color: var(--color-accent);
     padding: 0 2px;
     border-radius: 2px;
}
 .search-item-subtitle {
     font-size: 12px;
     color: var(--text-muted);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .search-item-type {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: rgba(59, 200, 231, 0.15);
     color: var(--color-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     flex-shrink: 0;
}
 .search-item-type.station {
     background: rgba(29, 185, 84, 0.15);
     color: #1db954;
}
 .search-item-type.album {
     background: rgba(155, 89, 182, 0.15);
     color: #9b59b6;
}
 .search-item-type.artist {
     background: rgba(52, 152, 219, 0.15);
     color: #3498db;
}
 .search-item-type.genre {
     background: rgba(241, 196, 15, 0.15);
     color: #f1c40f;
}
/* Loading / Empty / Hint */
 .search-loading, .search-empty, .search-hint {
     padding: 30px 16px;
     text-align: center;
     color: var(--text-muted);
}
 .search-loading i, .search-empty i, .search-hint i {
     font-size: 24px;
     margin-bottom: 8px;
     display: block;
     color: var(--color-accent);
}
 .search-empty i, .search-hint i {
     opacity: 0.5;
}
 .search-hint p, .search-empty p {
     margin: 0;
     font-size: 13px;
}
/* Footer do dropdown */
 .search-footer {
     padding: 10px 16px;
     border-top: 1px solid var(--border-color);
     background: rgba(0, 0, 0, 0.2);
     text-align: center;
     font-size: 11px;
     color: var(--text-muted);
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
}
 .search-footer kbd {
     background: rgba(255, 255, 255, 0.1);
     padding: 2px 6px;
     border-radius: 3px;
     font-size: 10px;
     margin: 0 2px;
}
/* Tema claro */
 body.theme-light .search-dropdown {
     background-color: #ffffff;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
 body.theme-light .search-item {
     color: var(--text-primary);
}
 body.theme-light .search-item:hover, body.theme-light .search-item.active {
     background-color: rgba(59, 200, 231, 0.08);
}
 body.theme-light .search-dropdown-header, body.theme-light .search-footer {
     background: rgba(0, 0, 0, 0.03);
     border-color: var(--border-color);
}
 body.theme-light .search-item-image {
     background-color: #f5f5f5;
}
/* Scrollbar do dropdown */
 .search-dropdown::-webkit-scrollbar {
     width: 6px;
}
 .search-dropdown::-webkit-scrollbar-track {
     background: transparent;
}
 .search-dropdown::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 3px;
}
 .search-dropdown::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.2);
}
/* ============================ TOP RIGHT (Languages + Auth) ============================ */
 .ms_top_right {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 20px;
}
 .ms_top_lang {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #c9c9c9;
     font-size: 14px;
}
 .ms_top_lang .lang_text {
     margin-right: 5px;
}
 .ms_top_lang a {
     color: #888;
     text-decoration: none;
     padding: 4px 8px;
     border-radius: 4px;
     transition: all .3s;
}
 .ms_top_lang a.active, .ms_top_lang a:hover {
     color: #00b4d8;
     background: rgba(0, 180, 216, .1);
}
/* ============================ RECENTLY PLAYED SWIPER ============================ */
 .ms_rcnt_slider {
     padding: 40px 0 30px;
     position: relative;
}
 .ms_rcnt_slider .swiper-container {
     padding: 10px 0;
}
 .ms_rcnt_slider .swiper-slide {
     height: auto;
}
 .ms_rcnt_box {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
    /*background: #1a1d29;
    */
     margin: 5px;
     transition: transform .3s;
}
 .ms_rcnt_box:hover {
     transform: translateY(-5px);
}
 .ms_rcnt_box_img {
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;
     overflow: hidden;
}
 .ms_rcnt_box_img > img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .ms_rcnt_box_text {
     padding: 12px 14px;
}
 .ms_rcnt_box_text h3 {
     font-size: 15px;
     margin: 0 0 4px;
     color: #fff;
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .ms_rcnt_box_text p {
     font-size: 12px;
     color: #888;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
/* ============================ HEADER STRUCTURE FIX ============================ */
 .ms_header_wrapper {
     width: 100%;
     position: relative;
     z-index: 99;
}
 .ms_top_header {
     padding: 15px 0;
     background: #0f1117;
     border-bottom: 1px solid rgba(255,255,255,.05);
}
/* ============================ USER RADIO SUBMISSION ============================ */
 .ms_submit_radio_wrapper {
     padding: 60px 0;
}
 .ms_submit_form {
     background: #1a1d29;
     padding: 30px;
     border-radius: 12px;
     margin-top: 20px;
}
 .ms_submit_form .form-group label {
     color: #c9c9c9;
     font-weight: 500;
     margin-bottom: 6px;
     display: block;
}
 .ms_submit_form .form-control {
     background: #0f1117;
     border: 1px solid #2a2d39;
     color: #fff;
}
 .ms_submit_form .form-control:focus {
     border-color: #00b4d8;
     box-shadow: 0 0 0 3px rgba(0,180,216,.15);
}
 .ms_submit_form .form-text {
     color: #888;
     font-size: 12px;
}
 .ms_submit_form .ms_btn-lg {
     padding: 14px 40px;
     font-size: 16px;
}
/* ============================ ADMIN USER RADIOS GRID ============================ */
 .user-radios-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 20px;
     margin-top: 20px;
}
 .user-radio-card {
     background: #1a1d29;
     border-radius: 12px;
     overflow: hidden;
     border: 2px solid transparent;
     transition: all .3s;
}
 .user-radio-card.pending {
     border-color: #ffc107;
}
 .user-radio-card.approved {
     border-color: #28a745;
}
 .user-radio-card.rejected {
     border-color: #dc3545;
}
 .card-logo {
     position: relative;
     width: 100%;
     aspect-ratio: 16/9;
     background: #0f1117;
}
 .card-logo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .no-logo-big {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     font-size: 60px;
}
 .status-badge {
     position: absolute;
     top: 10px;
     right: 10px;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 700;
}
 .status-pending {
     background: #ffc107;
     color: #000;
}
 .status-approved {
     background: #28a745;
     color: #fff;
}
 .status-rejected {
     background: #dc3545;
     color: #fff;
}
 .card-body {
     padding: 20px;
}
 .card-body h3 {
     color: #fff;
     margin: 0 0 10px;
     font-size: 18px;
}
 .card-body .meta {
     color: #888;
     font-size: 12px;
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 10px;
}
 .card-body .stream-url {
     background: #0f1117;
     padding: 6px 10px;
     border-radius: 4px;
     font-size: 11px;
     word-break: break-all;
}
 .card-body .stream-url code {
     color: #00b4d8;
}
 .card-body .desc {
     color: #b8b8b8;
     font-size: 13px;
     margin: 10px 0;
}
 .admin-note {
     background: rgba(255,193,7,.1);
     border-left: 3px solid #ffc107;
     padding: 8px 12px;
     font-size: 12px;
     margin: 10px 0;
}
 .card-actions {
     display: flex;
     gap: 8px;
     margin-top: 15px;
     flex-wrap: wrap;
}
 .footer_box.footer_app p {
     margin-bottom: 5px;
}
 .footer_box a.foo_app_btn {
     display: inline-block;
     padding: 10px 15px 10px 0px;
}
 .footer_box a.foo_app_btn img {
     border-radius: 5px;
}
 .footer_box.footer_subscribe p {
     margin-bottom: 15px;
}
 .footer_box.footer_subscribe .form-group {
     margin-bottom: 20px;
}
 h1.footer_title {
     font-size: 18px;
     text-transform: capitalize;
     position: relative;
     padding-bottom: 10px;
     margin-bottom: 18px;
}
 h1.footer_title:after {
     width: 100px;
     height: 5px;
     content: "";
     position: absolute !important;
     bottom: 0;
     left: -15px;
     z-index: 0;
     background: -webkit-radial-gradient(50% 50%, ellipse closest-side, #3bc8e7, rgba(255, 42, 112, 0) 60%);
     background: -moz-radial-gradient(50% 50%, ellipse closest-side, #3bc8e7, rgba(255, 42, 112, 0) 60%);
     background: -ms-radial-gradient(50% 50%, ellipse closest-side, #3bc8e7, rgba(255, 42, 112, 0) 60%);
     background: -o-radial-gradient(50% 50%, ellipse closest-side, #3bc8e7, rgba(255, 42, 112, 0) 60%);
}
 .footer_box.footer_contacts ul.foo_con_info {
     padding: 0px;
     margin: 0px;
     list-style: none;
}
 .footer_box.footer_contacts ul.foo_con_info li {
     width: 100%;
     display: inline-block;
}
 .footer_box.footer_contacts ul.foo_con_info li .foo_con_icon {
     width: 40px;
     height: 40px;
     display: inline-block;
     text-align: center;
     line-height: 40px;
     float: left;
     border-radius: 5px;
     background-image: -moz-linear-gradient( 90deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, rgb(59, 200, 231) 0%, rgb(32, 167, 196) 100%);
     background-image: -webkit-linear-gradient(90deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, rgb(59, 200, 231) 0%, rgb(32, 167, 196) 100%);
     background-image: -ms-linear-gradient( 90deg, rgb(22, 26, 46) 0%, rgb(237, 63, 179) 0%, rgb(59, 200, 231) 0%, rgb(32, 167, 196) 100%);
}
/* ============================================ SEARCH DROPDOWN AJAX ============================================ */
 .ms_top_search {
     position: relative;
}
 .search-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
     right: 0;
     background: #ffffff;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
     z-index: 9999;
     max-height: 480px;
     overflow-y: auto;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px);
     transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
 .search-dropdown.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}
/* Secções */
 .search-section-header {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px 8px;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: #ff3b30;
     background: #fafafa;
}
/* Items */
 .search-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 16px;
     text-decoration: none;
     color: #1a1a1a;
     transition: background .15s ease;
     border-left: 3px solid transparent;
}
 .search-item:hover, .search-item.active {
     background: #f3f4f6;
     border-left-color: #ff3b30;
}
 .search-item-image {
     flex-shrink: 0;
     width: 44px;
     height: 44px;
     border-radius: 8px;
     overflow: hidden;
     background: #e5e7eb;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #9ca3af;
     font-size: 18px;
}
 .search-item-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .search-item-info {
     flex: 1;
     min-width: 0;
}
 .search-item-title {
     font-size: 14px;
     font-weight: 600;
     color: #111827;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .search-item-title mark {
     background: #fef08a;
     color: #111827;
     padding: 0 2px;
     border-radius: 2px;
}
 .search-item-subtitle {
     font-size: 12px;
     color: #6b7280;
     margin: 2px 0 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .search-item-type {
     flex-shrink: 0;
     padding: 2px 8px;
     border-radius: 10px;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     background: #f3f4f6;
     color: #6b7280;
}
 .search-item-type.station {
     background: #fee2e2;
     color: #dc2626;
}
 .search-item-type.album {
     background: #dbeafe;
     color: #2563eb;
}
 .search-item-type.artist {
     background: #f3e8ff;
     color: #7c3aed;
}
 .search-item-type.genre {
     background: #d1fae5;
     color: #059669;
}
/* Loading */
 .search-loading {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 24px;
     color: #6b7280;
     font-size: 13px;
}
 .spinner {
     width: 18px;
     height: 18px;
     border: 2px solid #fee2e2;
     border-top-color: #ff3b30;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
}
 @keyframes spin {
     to {
         transform: rotate(360deg);
    }
}
/* Vazio / Hint */
 .search-empty, .search-no-results {
     text-align: center;
     padding: 32px 16px;
     color: #6b7280;
}
 .search-empty i, .search-no-results i {
     font-size: 32px;
     color: #d1d5db;
     display: block;
     margin-bottom: 8px;
}
 .search-no-results p {
     margin: 4px 0;
     font-size: 14px;
     color: #374151;
     font-weight: 600;
}
 .search-no-results small {
     font-size: 12px;
     color: #9ca3af;
}
/* Footer */
 .search-footer {
     border-top: 1px solid #f3f4f6;
     background: #f9fafb;
}
 #searchViewAll {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 12px 16px;
     color: #ff3b30;
     text-decoration: none;
     font-size: 13px;
     font-weight: 600;
     transition: background .15s ease;
}
 #searchViewAll:hover {
     background: #fee2e2;
}
/* Scrollbar */
 .search-dropdown::-webkit-scrollbar {
     width: 6px;
}
 .search-dropdown::-webkit-scrollbar-track {
     background: transparent;
}
 .search-dropdown::-webkit-scrollbar-thumb {
     background: #d1d5db;
     border-radius: 3px;
}
 .search-dropdown::-webkit-scrollbar-thumb:hover {
     background: #9ca3af;
}