/* DESKTOP/PC CSS CODES
 /*This is the desktop/pc css code for all website desktop/pc view.
 Modified by: Gnax Oneboss
 Company: Merge Technology, Concept
 Contact: +2347085932089
 */
body { height: 100%; background: #f1f3f4; background-repeat: repeat; font-size: 18px; font-family: system-ui, Arial, sans-serif; font-weight: 400; padding: 0; margin: 0 auto; min-width: 0; line-height: 1.7; color: #212121; text-align: left;  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a:link { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.4; color: #000; }
h1 { font-size: 25px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
/* HOMEPAGE AND POST LIST CSS
Css for styling the homepage and post list
*/
/* Post list */
.pc-gmenu { background: #fff; margin: 10px 0; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; width: 60%; }
.pc-sidebar { width: 40%; margin: 10px 0; }
.pc-wide { display: flex; gap: 15px; align-items: flex-start; margin: 0 auto; width: 85%; }
.pc-trending { background: #000; padding: 10px 15px; margin: 15px; color: #fff; font-size: 15px; text-align: center; text-transform: uppercase; font-weight: bold; border-radius: 4px; }
.pc-menu { position: relative; background: #fff; margin: 10px; float: left; display: inline-block; width: 46%; height: 300px; }
.pc-list-image { padding: 0; margin: 0; width: 100%; height: 190px; max-height: 190px; }
.pc-list { padding: 10px; font-size: 16px; font-weight: bold; line-height: 1.4; }
.pc-list a { color: #333; }
.pc-list-date { background: #ff0000; position: absolute; left: 0; top: 0; display: block; padding: 10px; color: #fff; font-size: 12px; }
.pc-sticky { position: sticky; top: 20px; }

/* PAGINATION AND FOOTER CSS
Css for styling the page numbers and footer
*/
/* Page Display */
.pc-no-page { background: #1151d3; color: #fff; padding: 4px 10px; margin: 4px 4px 5px 4px; display: inline-block; border-radius: 4px; font-weight: bold; }
.pc-page a { background: #efefef; padding: 4px 10px; margin: 4px 4px 5px 4px; color: #000; display: inline-block; font-weight: bold; border-radius: 4px; }
.pc-page-numbers { text-align: center; display: inline-block; color: #333; padding: 10px; font-size: 16px; }
.pc-total-page { background:#fff; padding: 8px 10px; color: #333; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; border-radius: 5px; display: flex; justify-content: center; width: 30%; margin: 0px auto 10px auto; }

/* Footer css */
.pc-footer-board { background: #111; color: #fff; padding: 20px 100px; text-align: center; font-size: 14px; }
.pc-bottom { padding: 10px; text-align: left; color: #fff; }
.pc-bottom-link a { color: #fff; padding: 8px; margin: 4px 0px; font-size: 15px; display: inline-block; font-size: 15px; }

/* HEADERS, DROP-DOWN AND SIDEBARS */
/* Header */
.pc-header { background: #111; color: #fff; border-bottom:2px solid #444; padding: 10px 100px; }
.pc-center { display: flex; justify-content: space-between; align-items: center; }
.pc-header a { color: #fff; font-size: 20px; font-weight: 600; padding: 10px 12px; }
.pc-logo img { width: auto; height: 50px; }
.pc-main { background: #fff; margin: 15px; }
.pc-tab button, .pc-tab a { background: #1c1c1c; padding: 4px 8px; margin: 8px 10px; border: 1px solid #333; color: #fff; transition: 0.3s; text-transform: uppercase; font-size: 15px; font-weight: normal; display: inline-block; }
.pc-tab button.active { color: #fff; border-bottom: 2px solid #fff; }
.pc-view { padding: 10px 40px; font-size: 18px; font-weight: 500; text-transform: capitalize; display: none; grid-template-columns: 6fr auto; gap: 10px; }
.pc-view a { display: inline-block; padding: 6px; text-align: left; text-shadow: 1px 1px 1px #bcbcbc; color: #222; margin: 4px 30px; }
.pc-search form { display: flex; justify-content: space-around; align-items: center; width: 100%; }
.pc-search input { margin-right: 10px; padding: 10px; border-radius: 5px; width: 70%; box-shadow: #f0f0f0 0 1px 3px inset; background: #f5f5f5; border: none; }
button[type=submit] { background: #0167ff; color: #fff; font-weight: bold; padding: 10px 20px; border: none; border-radius: 5px; width: 30%; }
.pc-bg { background: #333; padding: 10px; }
.pc-grid img { width: 95%; margin: 10px; }
.right { display: inline-block; float: right; margin-top: 2px; color: #fff; }
a.minor { background: #0167ff; color: #fff; padding: 10px; font-weight: bold; border-radius: 10px; }

/* Sidebars */
.pc-head-title { background: #000; color: #fff; padding: 8px; margin: 0px 10px; text-align: left; font-size: 20px; font-weight: bold; text-transform: capitalize; }
.pc-group { background: #fff; color: #333; padding: 5px; margin: 0px 10px 15px 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.pc-result1 a { background: #0167ff; color: #fff; font-size: 15px; padding: 6px; display: inline-block; margin: 6px 0px 6px 6px; }
ul.pc-result { list-style: none; margin: 0px; padding: 0px; }
ul.pc-result li a, div.pc-result span a { color: #fff; font-size: 17px; }
.pc-results a { background: #0167ff; color: #fff; padding: 6px 10px; font-size: 17px; }
.pc-results { margin: 6px 0px 6px 6px; display: inline-block; }
.pc-result-no { background: #000; color: #fff; padding: 7px 10px; }
.pc-week { position: relative; margin-bottom: 50px; }
.pc-week-title { background: #fff; color: #333; padding: 10px; margin: 0px 20px -30px 20px; position: absolute; font-weight: bold; bottom: 0; }
.pc-week-img { display: flex; justify-content: center; }
.pc-week-img img{ height: 200px; width: 95%; }
.pc-week-download a { background: #0167ff; color: #fff; padding: 8px; text-transform: uppercase; margin: 0px auto 10px auto; width: 50%; display: flex; justify-content: center; text-align: center; float: center; }
.pc-featured { background: #fff; color: #333; border-bottom: 1px solid #e5e5e5; padding: 0px 8px; }
.pc-featured-image { width: 90%; height: 50px; }
.pc-featured-title { text-align: left; line-height: 1.2; color: #333; font-size: 14px; font-weight: 600; padding: 0px 6px; }

/* ADVERTISMENT CSS & SEARCH PAGE/FORM
Css for styling ads 
*/
.ads { background: #333333; color: #fff; padding: 20px; }
.ads img{ width: 95%; display: flex; justify-content: center; }
.adslink { display: flex; justify-content: center; align-items: center; }
.adslink a { background: #1151d3; color: #fff; padding: 5px 15px; font-size: 17px; margin: 0 auto 10px auto; text-align: center; font-weight: bold; text-transform: uppercase; }
.adspost img { margin: 15px; width: 80%; height: 200px; display: flex; justify-content: center; }
.sticky { background: rgba(0, 0, 0, 0.8); padding: 6px 10px 0px 10px; min-height: 90px; bottom: 0; right: 0; left: 0; position: fixed; z-index: 999; transition: transform 0.4s ease; }
.sticky.hide { transform: translateY(100%); }
.close { background: #f1f3f4; font-size: 15px; padding: 0px 8px; border-radius: 2px; color: #333; position: absolute; top: 4px; right: 4px; }
.join-telegram { border:1px solid #0088cc; border-radius: 2px; background: #f0f8ff; display: flex; align-items: center; padding:7px; justify-content:space-between; margin:10px 0; }
.join-telegram a { text-decoration: none; background: #0088cc; color: #fff!important; padding: 5px 10px; border-radius: 2px; flex-shrink: 0; }
.join-whatsapp { border:1px solid #00da5f; border-radius: 2px; background: #e4f7ec; display: flex; align-items: center; padding:7px; justify-content:space-between; margin:10px 0; }
.join-whatsapp a { text-decoration: none; background: #00da5f; color: #fff!important; padding: 5px 10px; border-radius: 2px; flex-shrink: 0; }
.menu { padding: 8px; border-bottom: 1px solid #e5e5e5; }
.label { font-size: 15px; border-bottom: 2px solid #1151d3; }
.search-info { font-size: 25px; }
.search-info-sub { font-size: 15px; }
select[name=folder], .search-tag { padding: 12px; border-radius: 5px; width: 60%; box-shadow: #f0f0f0 0 1px 3px inset; background: #f5f5f5; border: 1px solid #ccc; }

.search-image { width: 80px; height: 60px; border-radius: 10%; margin: auto; }
.result-desc { font-size: 14px; }
.search-title { font-size: 16px; font-weight: bold; line-height: 1.4; padding: 10px; }

/* CSS FOR SONG CHARTS, MUSIC LIST E.T.C */
/* Song chart css */
.comment-list { background: #fff; padding: 10px; margin: 10px; border: 1px solid #e5e5e5; color: #414141; border-radius: 5px; font-size: 15px; }
.reply-list { background: #fff; padding: 10px; margin: 10px 8px 10px 50px; border: 1px solid #e5e5e5; color: #414141; border-radius: 5px; font-size: 15px; }
.reply-form { display: none; color: #333; margin-left: 70px; transition: 1.5s; }
.comment-little { padding: 10px 0px; font-size: 13px; color: #333; }
.comment-group { background: #eee; padding: 10px; }
.avatar { float: left; border-radius: 100%; width:35px; height:35px; margin-right: 6px; }
.comment-head { display: inline-block; }
.comment-text { padding: 10px 0px; }
.reply-textarea { border: 1px solid #e5e5e5; height: 3em; }
.reply-name { border: 1px solid #e5e5e5; padding: 4px; }
.reply-submit { padding: 6px 8px; font-size: 14px; }
.reply { margin: 0px 8px; }
.comment-title { background: #eee; font-size: 17px; padding: 12px; border-bottom: 1px solid #e5e5e5; }
.comment-little { font-size: 13px; color: #333; }
.rmenu-post { padding: 20px; border-bottom: 1px solid #e5e5e5; font-weight: 400; font-family: system-ui, Arial, sans-serif; line-height: 1.8; font-size: 17px; }
.tag-title { background: #000; padding: 5px 8px; margin: 5px; font-weight: 400; display: inline-block; color: #fff; text-transform: uppercase; }
.tags-list a { background: #eee; padding: 5px 8px; margin: 5px; font-weight: 500; display: inline-block; color: #000; text-transform: uppercase; }
.update { font-family: "Open Sans", Helvetica, sans-serif; font-size: 15px; border-left: 5px solid #efefef;  padding: 10px; }
.message { background: #90f0c9; color: #333; border: 1px solid #1151d3; padding: 10px; margin: 10px; }
.link { padding: 6px 0px 0px 6px; font-size: 16px; }
.link a { color: #414141; font-size: 16px; }
.title { font-size: 24px; font-weight: 600; font-family: inherit; color: #000000; line-height: 1.5; }
.post-title { border-bottom: 1px solid #e5e5e5; color: #333; text-align: left; padding: 15px 10px 0px 10px; }
.title-menu { color: #333; font-size: 22px; padding: 10px; text-align: left; font-weight: 400; text-transform: capitalize; border-bottom: 1px solid #e5e5e5; }
.view-list { padding: 4px 8px 0px 8px; bottom: 0; border-bottom: 1px solid #e5e5e5; font-size: 18px; }
.list { text-align: left; line-height: 1.3; color: #333; font-size: 16px; font-weight: 500; padding: 0px 6px; }
.list-image { width: 100%; height: 55px; margin: auto; border-radius: 4px; }
.cat a { background: #1151d3; color: #fff; padding: 8px 10px; font-size: 16px; font-weight: 500; text-transform: uppercase; }
.player-wrap { background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 16px; }
.fmenu { background: #fff; margin: 15px 2px; }
.fmenu-post { margin: 0px 5px; padding: 10px; border-bottom: 1px solid #e5e5e5; }
.fthumb { position: relative; }
.fcat a { background: #1151d3; color: #fff; padding: 4px 6px; top: 0; left: 0; position: absolute; font-size: 13px; font-weight: 400; }
.fview { color: #fff; position: absolute; top: 0; right: 0; font-size: 12px; margin: 6px 8px; }
.flink { padding: 8px 6px; font-size: 14px; position: absolute; bottom: 0; left: 0; }
.flink a { color: #fff; font-size: 14px; }

/* Cover Image */
.player-top-wrap { position: relative; width: 100%; height: 170px; }
.track-no { background: #fff; border-radius: 50%; position: absolute; top: 15px; left: 15px; color: #333; font-weight: 600; font-size: 25px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 10; }
.player-cover-wrap { display: flex; justify-content: center; align-items: center; padding-top: 24px; }
.player-cover { width: 150px; height: 150px; transition: opacity 0.3s ease; flex-shrink: 0; }
img.player-cover { object-fit: cover; border-radius: 50%; display: block; box-shadow: 0 8px 24px rgba(0,0,0,0.2); animation: spinRecord 8s linear infinite; animation-play-state: paused; }
img.player-cover.spinning { animation-play-state: running; }
@keyframes spinRecord {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.player-cover-info { padding: 0px 15px; }
.player-title { font-size: 20px; font-weight: 700; }
.player-feat { color: #888; font-size: 14px; opacity: 0.85; }

/* Progress */
.player-progress-wrap { padding: 0px 20px; }
.player-progress { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: #e0e0e0; outline: none; cursor: pointer; }
.player-progress::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #1151d3; cursor: pointer; }
.player-time { display: flex; justify-content: space-between; font-size: 13px; color: #888; }

/* Controls */
.player-controls { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 0px 20px 24px; }
.ctrl-btn { width: 52px; height: 52px; border-radius: 50%; border: none; background: #f0f0f0; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.ctrl-play { width: 60px; height: 60px; background: #1151d3; color: #fff; font-size: 22px; }
.ctrl-play:disabled { background: #b0b0b0; cursor: not-allowed; opacity: 0.6; }

/* Track List */
.tracklist-wrap { display: flex; flex-direction: column; gap: 2px; margin-bottom: 15px; }
.track-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: #fff; border-radius: 10px; cursor: pointer; transition: background 0.2s; border-bottom: 1px solid #e5e5e5; }
.track-item.active { background: #e8f0fe; }
.track-img-wrap img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
.track-img-wrap { position: relative; flex-shrink: 0; width: 50px; height: 50px; }
.track-info { flex: 1; min-width: 0; }
.track-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: 13px; color: #888; line-height: 1.2; }
.track-down { display: flex; justify-content: center; align-items: center; margin-bottom: 25px; }
.track-down span>a { background: #1151d3; color: #fff; padding: 8px 12px; border-radius: 12px; font-weight: 500; font-size: 18px; }

/* Coming Soon Banner */
.coming-soon-banner { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; gap: 8px; backdrop-filter: blur(4px); border-radius: 12px; }
.coming-soon-banner span { font-size: 40px; }
.coming-soon-banner p { font-size: 20px; font-weight: 700; margin: 0; }
.coming-soon-banner small { font-size: 13px; opacity: 0.75; }

/* Disabled progress bar */
.player-progress:disabled { opacity: 0.4; cursor: not-allowed; }
/* Soon badge in track list */
.track-soon { font-size: 11px; background: #f0f0f0; color: #888; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.also-like-group { display: flex; flex-wrap: wrap; justify-content: center; border-bottom: 1px solid #e5e5e5; }
.also-like-container { margin: 10px 0px; display: inline-block; width: 47%; }
.also-like-image img { padding: 0; margin: 0; width: 95%; max-width: 95%; height: 100px; max-height: 100px; }
.also-like-title { color: #333; text-align: left; font-weight: bold; font-size: 14px; line-height: 1.4; }
.promote { background: #f0f0f0; padding:10px; margin: 10px; font-size: 17px; text-align: center; color: #000; }
.bar { font-size: 14px; color: #333; padding-bottom: 4px; }
li { color: #333; padding: 4px; font-size: 16px; }
input[name=fname] { margin: 4px; padding: 8px; width: 85%; }
textarea { box-shadow: #f0f0f0 0 1px 3px inset; background: #f5f5f5; margin: 4px; padding: 10px; height: 6em; width: 85%; }
input[type=submit] { background: #1151d3; padding: 8px 10px; font-weight: bold; border: none; color: #fff; font-size: 16px; }
blockquote { background: #f9f9f9; padding: 0px 10px; margin: 10px; font-size: 15px; color: #5b5b5b; border-left: 4px solid #e5e5e5; }
.download { display: flex; justify-content: center; align-items: center; font-size: 16px; }
.download a { background-color: #1151d3; color: #fff; padding: 8px 15px; text-align: center; font-weight: 500; border-radius: 4px; }
.download a:visited { color: #fff; }
.download a:hover { color: #fff; }
.download a:active { color: #fff; }


/* CATEGORY LIST, FORUM LIST AND CHART CSS
Css style for categories listing & top charts
*/
.main { margin: 0 10px; }
.main a { background: #fff; color: #333; border: 1px solid #e5e5e5; padding: 6px 8px; font-size: 15px; margin: 6px 8px; display: inline-block; font-weight: 600; text-transform: uppercase; }
.rgroup { background: #fff; padding: 10px; }
.select { color: #333; font-size: 14px; font-weight: bold; padding: 8px; border-radius: 20px; display: inline-block; float: right; }
.forum-category-names { background: #fff; margin: 0; padding: 5px; border: 5px solid #008db0; border-right: none; border-left: none; }
.forum-list { background: #fff; display: flex; justify-content: left; border-bottom: 1px solid #e5e5e5; }
.forum-space { padding: 10px; }
.forum-piece { padding: 0 10px; font-size: 13px; color: #333; }
.forum-stats { background: #e5e5e5; color: #000; font-size: 14px; padding: 15px; text-align: center; width: 50px; margin-right: 0; margin-left: auto; }

/* Song Charts Css */

.chart-title { font-weight: bold; margin: 10px; color: #333; }
.chart-date { font-weight: bold; margin: 10px; font-size: 18px; }
.chart-image { width: 100%; height: 46px; border-radius: 10%; margin: auto; }
.chart-artist { font-size: 13px; color: #64707d; }
.chart-menu { padding: 0px 10px; border-bottom: 1px solid #e5e5e5; }
.chart-no { padding: 10px; text-align: center; }
.movement { font-size: 12px; }
.up { color: #00da5f; font-weight: bold; }
.down { color: #ff0000; font-weight: bold; }
.neutral { color: #64707d; }
.new { background: #00da5f; color: #fff; padding: 2px 4px; border-radius: 2px; font-weight: bold; }

/* ARTIST  PROFILE AND USERS PAGE  CSS
Css for styling users profile, artist page
*/

.profile-card { background: #fff; padding: 10px; margin: 10px; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.profile-bio { padding: 10px; font-style: italic; font-style: itLic; }
.info-text { text-transform: capitalize; font-style: italic; color: #888; }

/* Artist Page and profile */

.artist-profile { background: #000; color: #fff; }
.artist-image { margin: 0px 0px -50px 15px; position: absolute; left: 0; bottom: 0; }
.artist-image img { border-radius: 100%; min-width: 120px; max-height: 125px; border: 5px solid #fff; }
.artist-banner { position: relative; }
.artist-banner img { width: 100%; height: 200px; }
.artist-action a { background: #333; color: #fff; padding: 4px; display: inline-block; margin: 10px; text-align: center; border: 1px solid #333; }
.artist-card { background: #fff; color: #333; padding: 20px 10px; }

/* Artist Page */

.artist-group { background: #333; }
.artist-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
.artist-top { background: #fff; color: #333; padding: 10px; }
.artistimage img { padding: 0; margin: 0; width: 100%; max-width: 100%; height: 120px; max-height: 120px; border-radius: 10px; }
.artist-title { font-weight: bold; color: #333; }
.artist-list { background: #fff; width: calc(40% - 20px); /* Subtract 40px for margins */ margin: 10px; border-radius: 10px; padding: 16px; }
.alpha a { background: #000; color: #fff; display: inline-block; padding: 2px 5px; margin: 4px; }

/* Error CSS Code */

.error_head { font-size: 50px; font-weight: bold; text-align: center; margin: 100px 10px; }
.error { font-size: 18px; font-weight: bold; text-align: center; margin: 50px 10px; }

.grid { display: grid; grid-template-columns: repeat(4, 80px); gap: 20px; }
.hot-artist img { margin: 0px 20px; border-radius: 50%; width: 100%; height: 80px; }
.hot-small { text-align: center; font-size: 15px; font-weight: bold; }

/* Streamed Artist CSS code*/
.stream-artist { display: inline-block; margin: 15px 0px; }
.stream-img img { margin: 0px 4px; border-radius: 50%; width: 100px; height: 100px; }
.stream-img { position: relative; }
.stream-no { background: #fff; position: absolute; top: 10px; left: 10px; color: #000; font-weight: bold; opacity: 0.6; z-index: 1; padding: 2px 6px; border-radius: 50%; }
.stream-small { text-align: center; font-size: 15px; font-weight: bold; }
.stream-little { color: #333; font-size: 10px; text-align: center; }