@charset "utf-8";
/*
Theme Name: songsara v2026
Theme URI: https://songsara.net
Description: songsara
Version: 1.1.45
Author: MR Design
Author URI: https://songsara.net
*/

/* Shared surface portal: lifecycle ownership lives in js/ss-surface-runtime.js. */
#ss-surface-host {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
}

#ss-surface-host[hidden] {
    display: none;
}

.ss-action-surface__handle {
  display: none;
}

.ss-action-surface__panel {
  pointer-events: auto;
}

.ss-action-surface__backdrop--managed {
  position: fixed;
  inset: 0;
  display: block;
  background: transparent;
  pointer-events: auto;
}

.ss-action-surface__backdrop--managed[data-ss-action-surface-mode="sheet"],
.ss-action-surface__backdrop--managed[data-ss-action-surface-mode="dialog"] {
  background: rgba(8, 8, 8, .54);
}

@media (max-width: 759.98px) {
  .ss-action-surface--mobile-sheet {
    transform: translate3d(0, var(--ss-action-surface-motion-y, 0px), 0) !important;
  }

  .ss-action-surface__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2px;
    margin: 0 0 6px;
    touch-action: none;
  }

  .ss-action-surface__handle span {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
  }
}
html, body, div, input, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}
[hidden] {
  display: none !important;
}
:root {
  --ss-chrome-surface: #1a1a1a;
  --ss-chrome-border: #242424;
  --ss-safe-area-top: env(safe-area-inset-top, 0px);
  --ss-safe-area-right: env(safe-area-inset-right, 0px);
  --ss-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --ss-safe-area-left: env(safe-area-inset-left, 0px);
  --ss-chrome-safe-top: var(--ss-safe-area-top);
  --ss-chrome-mobile-safe-surface: var(--ss-chrome-surface);
  --ss-mobile-tabbar-surface: var(--ss-chrome-surface);
  --ss-chrome-contextual-z: 10130;
  --ss-action-surface-root-z: 10131;
  --ss-action-sheet-backdrop-z: 10070;
  --ss-action-sheet-panel-z: 10071;
  --ss-action-sheet-open-z: 10072;
  --ss-action-sheet-mobile-radius: 22px 22px 0 0;
  --ss-action-sheet-mobile-max-height: min(70vh, 520px);
  --ss-sheet-mobile-bottom-padding-compact: max(12px, var(--ss-safe-area-bottom));
  --ss-sheet-mobile-bottom-padding: max(14px, var(--ss-safe-area-bottom));
  --ss-sheet-mobile-bottom-padding-roomy: max(20px, var(--ss-safe-area-bottom));
  --ss-action-sheet-mobile-bottom-padding: max(18px, var(--ss-safe-area-bottom));
  --ss-action-sheet-mobile-padding: 16px 16px var(--ss-action-sheet-mobile-bottom-padding);
  --ss-action-sheet-mobile-tabbar-padding: var(--ss-action-sheet-mobile-bottom-padding);
}
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  input[type="button"]:focus:not(:focus-visible),
  input[type="submit"]:focus:not(:focus-visible),
  input[type="reset"]:focus:not(:focus-visible),
  [tabindex]:focus:not(:focus-visible) {
    outline: 0 !important;
  }

  .btn:focus:not(:focus-visible),
  .btn.focus:not(:focus-visible),
  input[type="button"].btn:focus:not(:focus-visible),
  input[type="submit"].btn:focus:not(:focus-visible),
  input[type="reset"].btn:focus:not(:focus-visible) {
    box-shadow: none !important;
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input[type="button"]:focus-visible,
  input[type="submit"]:focus-visible,
  input[type="reset"]:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid rgba(251, 203, 7, .72);
    outline-offset: 3px;
  }
}



@font-face {
	font-family: iranyekan;
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
	font-display: swap;
	src: url('fonts/YekanBakh-Light.woff2') format('woff2');
}
@font-face {
	font-family: iranyekan;
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	font-display: swap;
	src: url('fonts/YekanBakh-Regular.woff2') format('woff2');
}

@font-face {
	font-family: iranyekan;
	font-style: normal;
	font-weight: 600;
	font-stretch: normal;
	font-display: swap;
	src: url('fonts/YekanBakh-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: iranyekan;
	font-style: normal;
	font-weight: bold;
	font-stretch: normal;
	font-display: swap;
	src: url('fonts/YekanBakh-Bold.woff2') format('woff2');
}

@font-face {
	font-family: iranyekan;
	font-style: normal;
	font-weight: 800;
	font-stretch: normal;
	font-display: swap;
	src: url('fonts/YekanBakh-ExtraBold.woff2') format('woff2');
}

@font-face {
	font-family: iranyekan;
	font-style: normal;
	font-weight: 900;
	font-stretch: normal;
	font-display: swap;
	src: url('fonts/YekanBakh-Black.woff2') format('woff2');
}

@font-face {
	font-family: iranyekan;
	font-style: normal;
	font-weight: 950;
	font-stretch: normal;
	font-display: swap;
	src: url('fonts/YekanBakh-ExtraBlack.woff2') format('woff2');
}






::selection {
  background-color: #ccc;
  color: #fff;
}
::-moz-selection {
  background-color: #242424;
  color: #fff;
}
::-webkit-scrollbar {
  width: 18px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 1px #242424;
  -moz-box-shadow: inset 0 0 0 1px #242424;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #242424;
}
html, body {
  direction: rtl;
  font: 14px iranyekan;
  font-weight: 400;
  background: #1a1a1a;
  color: #fff;
  margin: 0;
  padding: 0;
  height: 100%;
}
html {
  scrollbar-gutter: stable;
}
.wrapper {
  min-height: 100%;
  height: auto;
  margin: 0 auto -50px auto;
}
.clear {
  clear: both
}
.alert-danger {
  color: #fff;
    background-color: #242424;
    border-color: #333;
  text-align: right;
}
.alert-danger a {
  text-decoration: none;
  color: #fbcb07 !important;
}
.alert-danger a:hover {
  color: #ccc;
}
#header {
  background-color: var(--ss-chrome-surface);
  position: sticky;
  top: 0;
  z-index: 10050;
  width: 100%;
  right: 0;
  left: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  display: block;
  border-bottom: 1px solid var(--ss-chrome-border);
  overflow: visible;
}

/*
 * Installed iPad Web Apps use the desktop/tablet chrome at widths >= 760px
 * while still exposing a non-zero top safe area. Keep the header controls out
 * of the translucent Status Bar without changing ordinary Browser/desktop UI.
 */
@media (min-width: 760px) and (display-mode: standalone) {
  #header {
    padding-top: var(--ss-chrome-safe-top);
  }
}
.topmenu .container-fluid {
  padding-left: 18px;
  padding-right: 18px;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  justify-content: flex-start;
  direction: rtl;
}
.header-right-cluster {
  display: contents;
}
.header-nav .mainlogo,
.header-mobile-logo {
  float: none;
  text-align: right;
  margin-top: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header-search-slot {
  flex: 1 1 auto;
  max-width: 500px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header-search-slot[data-search-host-state="empty"] {
  display: none;
}
.ss-header-search {
  display: grid;
  width: 100%;
  max-width: 500px;
  margin: 0;
  min-width: 0;
  height: 50px;
  border-radius: 999px;
  overflow: hidden;
  background: #242424;
  border: 1px solid #2b2b2b;
  direction: ltr;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
}
.ss-header-search:focus-within {
  border-color: #3a3a3a;
  background: #2a2a2a;
}
.ss-header-search__input {
  margin: 0;
  width: 100%;
  height: 50px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eee;
  padding: 0 18px;
  text-align: right;
  direction: rtl;
  font-size: 16px;
}
.ss-header-search__input::placeholder {
  color: #8c8c8c;
}
.ss-header-search__input::-webkit-search-decoration,
.ss-header-search__input::-webkit-search-cancel-button,
.ss-header-search__input::-webkit-search-results-button,
.ss-header-search__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.ss-header-search__button {
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ss-header-search__button i {
  color: #cfcfcf;
  font-size: 26px;
  line-height: 1;
}
.ss-header-search__clear {
  width: 42px;
  height: 42px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #b8b8b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ss-header-search__clear:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.ss-header-search__clear[hidden] {
  display: none !important;
}
.topmenu .userpanel.header-actions {
  margin-top: 0;
  float: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  flex: 0 0 auto;
  direction: ltr;
  margin-right: 0;
}
.header-notification-module {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.header-login-link,
.header-account-link {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
}
.header-login-link {
  -webkit-tap-highlight-color: transparent;
}
.header-login-link:hover,
.header-account-link:hover {
  background: #2d2d2d;
  color: #fff;
}
.header-login-link > i {
  transition: opacity .18s ease, transform .18s ease;
}
.header-login-link__loader {
  position: absolute;
  inset: 0;
  display: none !important;
  margin: auto;
  min-height: 0;
  pointer-events: none;
}
.header-login-link.is-loading {
  background: transparent;
  cursor: wait;
  pointer-events: none;
}
.header-login-link.is-loading:hover,
.header-login-link.is-loading:focus,
.header-login-link.is-loading:active {
  background: transparent;
}
.header-login-link.is-loading > i {
  opacity: 0;
  transform: scale(.72);
}
.header-login-link.is-loading .header-login-link__loader {
  display: inline-flex !important;
}
.header-avatar {
  float: none;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-avatar img {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  margin: 0;
  display: block;
}
.header-actions .bell-artist.dropdown,
.header-actions .dropdown {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
  position: relative;
  z-index: 10051;
  top: 0;
}
.header-actions .bell-artists {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  position: relative;
  top: 0;
}
.header-actions .bell-artists:hover {
  background: #2d2d2d;
}
.header-actions .bell-artists i,
.header-actions .bell-badge {
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
}
.header-actions .notif-panel-desk {
  position: absolute;
  z-index: 10052;
  left: 0;
  right: auto;
  direction: rtl;
  text-align: right;
}
.header-actions .notif-panel-desk .notif-header-bar,
.header-actions .notif-panel-desk .notif-tabs,
.header-actions .notif-panel-desk .notif-panels,
.header-actions .notif-panel-desk .notif-item,
.header-actions .notif-panel-desk a {
  direction: rtl;
  text-align: right;
}
body.ss-chrome-search-owner-page .header-search-slot[data-shared-search-host="header"] {
  display: none;
}

@media (max-width: 759.98px) {
  #header {
    padding-top: var(--ss-chrome-safe-top);
    background-color: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  body.ss-chrome-mobile-top-contextual #header,
  body.ss-chrome-mobile-top-search-owned #header,
  body.ss-chrome-mobile-top-page-owned #header,
  body.ss-chrome-mobile-top-auth-minimal #header {
    height: auto;
    min-height: 0;
    padding-top: var(--ss-chrome-safe-top);
    background: var(--ss-chrome-mobile-safe-surface);
    border-bottom: 0 solid var(--ss-chrome-border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    pointer-events: none;
  }
  body.ss-chrome-mobile-top-contextual #header .topmenu,
  body.ss-chrome-mobile-top-search-owned #header .topmenu,
  body.ss-chrome-mobile-top-page-owned #header .topmenu,
  body.ss-chrome-mobile-top-auth-minimal #header .topmenu {
    display: none !important;
  }
  body.ss-chrome-mobile-top-contextual #header + .clear,
  body.ss-chrome-mobile-top-search-owned #header + .clear,
  body.ss-chrome-mobile-top-page-owned #header + .clear,
  body.ss-chrome-mobile-top-auth-minimal #header + .clear {
    display: none;
  }
  .topmenu .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .header-nav {
    display: flex;
    min-height: 54px;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 10px 0 14px;
    direction: rtl;
  }

  .header-mobile-logo {
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .header-mobile-logo a {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .header-mobile-logo img {
    width: 150px;
    max-width: 100%;
    height: auto;
  }

  #header .header-mobile-logo--appmark {
    flex: 0 0 auto;
    display: none;
  }

  body.ss-chrome-mobile-header-brand-home #header .header-mobile-logo--appmark {
    display: flex;
  }

  #header .header-mobile-logo--appmark a {
    width: auto;
  }

  #header .header-mobile-logo--appmark img {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    object-fit: cover;
  }

  body.ss-chrome-mobile-header-utility-compact .header-nav {
    min-height: 56px;
    padding: 8px 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body.ss-chrome-mobile-notice-hidden .header-notification-module {
    display: none !important;
  }

  .topmenu .userpanel.header-actions {
    flex: 0 0 auto;
    min-width: 0;
  }

  .header-search-slot {
    flex: 1 0 100%;
    display: flex;
    max-width: none;
    justify-content: stretch;
    margin-top: 2px;
  }

  .header-search-slot[data-shared-search-host="header"] {
    display: none;
  }

  .ss-header-search {
    height: 52px;
    max-width: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.026));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }

  .ss-header-search:focus-within {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.032));
    border-color: rgba(255, 255, 255, 0.14);
  }

  .ss-header-search__button,
  .ss-header-search__input {
    height: 52px;
  }

  .ss-header-search__button {
    width: 48px;
  }

  .ss-header-search__button i {
    font-size: 21px;
  }

  .ss-header-search__input {
    font-size: 15px;
    padding: 0 14px;
  }

  .ss-header-search__clear {
    width: 40px;
    height: 40px;
    margin-right: 6px;
  }
}

@media (min-width: 760px) {
  .header-nav {
    display: grid;
    grid-template-columns: minmax(88px, 1fr) minmax(280px, 500px) minmax(88px, 1fr);
    align-items: center;
    gap: 18px;
    direction: ltr;
  }

  .header-mobile-logo {
    display: flex !important;
    grid-column: 3;
    margin-left: 0;
    justify-self: end;
  }

  .topmenu .userpanel.header-actions {
    grid-column: 1;
    justify-self: start;
    margin-right: 0;
  }
  .header-search-slot {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    max-width: 500px;
    justify-self: center;
  }

  .ss-header-search {
    display: grid;
  }
}
.alert-app-noti {
    background: #242424;
    margin: 0 10px;
}
.app-icon a {
    color: #fff;
    float: right;
    direction: rtl;
}
.app-icon img {
    color: #999;
    float: right;
    direction: rtl;
}
.buy-c-under2 {
    color: #da4c4c;
    background-color: #242424;
    border-color: #242424;
    padding-right: 5px; 
    margin-top: 10px;
}
.buy-c-under1 a {
    text-align: center !important;
    margin-top: 15px;
    display: block;
    color: #516e8b !important;
    background: #343a40;
}

.unseenCircle {
	border-radius: 50%;
    padding: 5px;
    margin-top: 15px;
    margin-right: -15px;
    width: 11px;
    position: absolute;
    height: 11px;
    background: #fbcb07;
}
.notif-desc{
    text-align: right;
    direction: rtl;
    margin-right: 5px;
    color: #666;
    font-size: 12px;
    border-bottom: 1px solid #333;
    margin-top: -10px;
    padding-bottom: 10px;
}
.notifinfo {
  text-align: left;
  line-height: 1.6em;
  list-style: none;
  direction: ltr;
}
.notifinfo li {
  display: list-item;
  padding-right: 5px !important;
  padding-left: 0px !important;
}
.artist-noti {
    font: 13px iranyekan;
    max-height: 37.5px;
    height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    text-align: left;
    direction: ltr;
    color: #ccc;
}
.album-noti {
    color: #fff;
    padding-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
    max-height: 70px;
    height: auto;
    display: block;
    overflow: hidden;
    text-align: left;
    direction: ltr;
    letter-spacing: -.05em;
    line-height: 1.2;
}


.bell-notification {
    position: absolute;
    right: -0.7em;
    top: -0.7em;
    min-width: 1em;
    padding: 0.4em;
    border-radius: 0.8em;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7em;
    color: white;
    line-height: .75em;
}
.mainmenus {
  margin-top: 5px;
  float: left;
}
.mainmenus ul {
  margin-top: 5px;
  list-style: none;
  float: left;
}
.mainmenus ul li {
  float: left;
  line-height: 45px;
}
.mainmenus ul li a {
  color: #fff;
}
.mainmenus ul li a:hover {
  color: #ccc;
  transition: 0.4s;
}
.mainmenus a {
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  margin-right: 15px;
}
.mainmenus a:hover {
  color: #1a1a1a;
  transition: 0.4s;
}
.d-mainmenu-l {
  padding-left: 15px;
  line-height: 55px;
  cursor: pointer;
}
.menu-noti2 {
  left: auto;
}
.menu-noti2 li a {
  color: #717171;
  padding: 8px 5px;
  font-size: 16px;
  font-weight: 500;
}
.menu-noti2 li a:hover {
  color: #fff;
  background-color: #1a1a1a;
}
.d-mainmenu-l-u {
  left: 0;
  border-radius: 0px;
  top: 40px;
  overflow-y: auto;
  max-height: 360px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  border: none;
  width: 290px;
}
.d-mainmenu-l-u li a {
  text-align: right;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  color: #666;
  line-height: 1.7;
  padding: 5px;
  margin-right: 0px;
}
.d-mainmenu-l-u li a:hover {
  color: #ffffff;
  background-color: #808080;
}
.searcharea {
  width: 290px;
  float: left;
  text-align: left;
  direction: ltr;
  color: #555;
}
.searcharea input[type=text] {
  font: 13px iranyekan;
  padding: 5px;
  color: #474647;
  margin: auto 0px;
  transition: all 0.5s cubic-bezier(.6, -.28, .74, .05);
  width: 230px;
}
.searcharea input[type=text]::-webkit-input-placeholder {
  color: #ccc
}
.submit-sr button[type=submit] {
  background: #676767;
  color: #ffffff;
  cursor: pointer;
  border: none;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 10px;
  top: 0;
}
.submit-sr button[type=submit] :hover {
  color: #474747;
}
.search-form {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  left: 0;
  padding: 15px;
  display: flex;
  background: #212121;
}
.search-form .close {
  color: #fff;
  font-size: 2.5rem;
  opacity: .9;
  padding-left: 10px;
}
.search-form .close:hover {
  color: rgba(255, 255, 255, .5)
}
.mainlogo {
  float: right;
  text-align: right;
  margin-top: 7px;
}
.breadcrumb {
  border-radius: 3px;
  margin-bottom: -5px;
  margin-top: 15px;
  background: none;
  overflow: hidden;
  text-align: right;
  line-height: 1.6;
}
}
.breadcrumb i {
  color: #737373;
  font-size: 12px
}
.breadcrumb a {
  color: #ddd;
  text-decoration: none;
  font: normal 15px iranyekan;
}
.breadcrumb a:hover {
  color: #999;
}
.breadcrumb ul {
  list-style: none
}
.breadcrumb ul li {
  float: right;
  position: relative;
  font: normal 12px iranyekan;
}
.breadcrumb ul li a {
  color: #666;
  text-decoration: none;
  padding: 0px 5px;
  transition: 0.3s;
  font: normal 13px iranyekan;
}
.breadcrumb ul li a:hover {
  color: #1a1a1a;
}
.artist-img {
  float: right;
}
.artist-img img {
  margin-right: 10px;
  border: 1px solid #333;
  border-radius: 125px;
  width: 175px;
  height: 175px;
}
.artist-img:hover {
  opacity: 0.6;
  transition: .5s ease;
}
.artist-details{
  margin-top: 5px;
  float: right;
}
.artist-details h1 {
  font-size: 24px;
  color: #fff;
  margin-top: 10px;
  font-weight: 600;
  display: inline-block;
}
.artist-details h2 {
	font-size: 20px;
    font-weight: 400;
    display: inline-block;
    color: #b9b8b8;
    letter-spacing: -1.0px;
    margin-right: 10px;
	direction: ltr;
}
.artist-details h3 {
  font-size: 12px;
  line-height: 1.7;
  text-align: justify;
  color: #999;
}
.artist-details h6 {
display: inline-block;
  font-size: 12px;
  line-height: 1.7;
  text-align: justify;
  color: #999;
  margin-top: 5px;
}
.artist-title {
  margin: 10px;
  background: #7b7b7b;
  color: #fff;
  float: right;
  padding: 3px;
  border-radius: 3px;
}
.artist-header {
  float: right;
  width: 100%;
  text-align: right;
  margin-bottom:5px;
}
.h3-artist {
  padding-top: 5px;
}
.h3-artist p {
    font-size: 12px;
    line-height: 1.6;
    text-align: justify;
    color: #555;
    font-weight: 400;
    margin-top: 5px;
}
.h3-cat p {
	line-height: 1.6;
    text-align: justify;
    color: #555;
    font-weight: 400;
    margin-top: 5px;
}
.h3-genre {
  padding-top: 5px;
}
.h3-genre p {
  font-size: 14px;
  line-height: 1.6;
  text-align: justify;
  color: #777;
  font-weight: 400;
  margin-right:10px;
}
.genre-details h1 {
    font-size: 24px;
    color: #fff;
    margin-top: 5px;
    font-weight: 600;
    margin-right: 10px;
    display: inline-block;
}
.genre-details h2 {
	font-size: 20px;
    font-weight: 400;
    display: inline-block;
    color: #b9b8b8;
    letter-spacing: -1.0px;
    margin-right: 10px;
	direction: ltr;
}
.genre-details h3 {
  font-size: 12px;
  line-height: 1.7;
  text-align: justify;
  color: #999;
}
.genre-details h6 {
  font-size: 12px;
  line-height: 1.7;
  text-align: justify;
  color: #444;
  margin-top: 5px;
}
.genre-title {
  margin: 10px;
  background: #7b7b7b;
  color: #fff;
  float: right;
  padding: 3px;
  border-radius: 3px;
}
.category-img {
  float: right;
}
.category-img img {
  margin-right: 10px;
  border: 1px solid #333;
  border-radius: 125px;
  width: 175px;
  height: 175px;
}
.category-img:hover {
  opacity: 0.6;
  transition: .5s ease;
}
.category-details, .tag-details {
  margin-top: 5px;
  float: right;
}
.tag-details h2 {
  font-size: 24px;
  color: #fff;
  margin-top: 5px;
  font-weight: 600;
  display: inline-block;
}
.category-details h3 {
  font-size: 12px;
  line-height: 1.7;
  text-align: justify;
  color: #999;
}
.category-details i {
  margin-right: 10px;
}
.cat-title {
  margin: 10px;
  background: #7b7b7b;
  color: #fff;
  float: right;
  padding: 3px;
  border-radius: 3px;
}
.category-header {
  float: right;
  width: 100%;
  text-align: right;
}
.category h4 {
  border-radius: 3px;
  box-shadow: 0 0 5px 1px #ddd;
  margin-top: 15px;
  background: #fff;
  color: #626262;
  padding: 10px 15px;
  font: bold 14px iranyekan;
  overflow: hidden;
}
body.error404 {
  float: none;
  width: auto;
  margin-top: 0;
  padding: 0;
  background: #101010;
  font-size: inherit;
}
.searchnotfound {
  margin-top: 35px;
  text-align: center;
}
.searchnotfound i {
  font-size: 170px;
  color: #236dae;
}
.searchnotfound h2 {
  color: #fff;
  font-size: 20px;
  padding: 10px 0;
  line-height: 1.5;
  font-weight: 600;
}
.searchnotfound h6 {
  color: #999;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}
.ss-404-page {
  min-height: calc(100dvh - 170px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 96px;
  text-align: center;
}
.ss-404-page__inner {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ss-404-page__icon {
  margin-bottom: 18px;
  color: #d8d8d8;
  font-size: 58px;
  line-height: 1;
}
.ss-404-page__eyebrow {
  margin: 0 0 8px;
  color: #8f8f8f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.8;
}
.ss-404-page__title {
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.55;
}
.ss-404-page__text {
  max-width: 460px;
  margin: 8px 0 24px;
  color: #a8a8a8;
  font-size: 14px;
  line-height: 1.9;
}
.ss-404-page__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ss-404-page__button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e7e7e7;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ss-404-page__button:hover,
.ss-404-page__button:focus-visible {
  background: transparent;
  color: #fff;
}
.ss-404-page__button--primary {
  min-width: 142px;
  border-radius: 8px;
  background: #f2f2f2;
  color: #171717;
  padding: 0 18px;
}
.ss-404-page__button i {
  color: #9f9f9f;
}
.ss-404-page__button--primary i {
  color: #171717;
}
.ss-404-page__button:hover i,
.ss-404-page__button:focus-visible i {
  color: #fff;
}
.ss-404-page__button--primary:hover,
.ss-404-page__button--primary:focus-visible {
  background: #fff;
  color: #101010;
}
.ss-404-page__button--primary:hover i,
.ss-404-page__button--primary:focus-visible i {
  color: #101010;
}
.ss-404-page__quick-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ss-404-page__quick-links a {
  color: #9a9a9a;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.6;
  text-decoration: none !important;
}
.ss-404-page__quick-links a:hover,
.ss-404-page__quick-links a:focus-visible {
  color: #fff;
}
@media (max-width: 576px) {
  .ss-404-page {
    min-height: calc(100dvh - 190px);
    align-items: flex-start;
    padding: 38px 14px 110px;
  }
  .ss-404-page__icon {
    margin-bottom: 14px;
    font-size: 46px;
  }
  .ss-404-page__title {
    font-size: 24px;
  }
  .ss-404-page__text {
    margin-bottom: 20px;
    font-size: 13px;
  }
  .ss-404-page__button {
    width: auto;
    max-width: 100%;
  }
  .ss-404-page__actions {
    width: auto;
  }
}
.titlezone-i h3 {
  font: bold 13px iranyekan;
  padding: 5px 3px;
  text-align: center;
  border-bottom: 1px solid #353535;
  color: #fff;
  height: 55px;
  width: 100%;
  overflow: hidden;
}
.titlezone h3 {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
}
.titlezone-i h3:hover {
  color: #ccc
}
.post-edit-link, .comment-edit-link {
  text-decoration: none;
  color: #ccc;
  padding-right: 20px;
}
.post-edit-link:hover, .comment-edit-link:hover {
  text-decoration: none;
  color: #ccc
}
.dllink {
  width: 100%;
  background: #eee;
  padding: 5px;
  color: #666;
  font-weight: 500;
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
}
.dllink a {
  text-decoration: none;
  color: #fff;
}
.dllink:hover {
  background: #1a1a1a;
  color: #fff;
}
.postinfo {
  width: 100%;
  height: auto;
}
postinfo a {
  color: #eee;
  text-decoration: none;
}
postinfo a:hover {
  color: #fff;
}
.postinfo ul a {
  text-decoration: none;
}
.postinfo ul {
  list-style: none;
}
.postnameinsingle {
    font-size: 16px;
    color: #ccc;
    letter-spacing: 0.05em;
}
.TSale {
    background: rgba(0, 0, 0, .4);
    padding: 0 8px;
    border-radius: 18px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.TSale2 {
  background: #1a1a1a;
  padding: 0px 4px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid;
  color: rgb(255, 190, 125);
  margin-right: 2px;
}
.TSale-single {
  padding: 0px 4px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid;
  color: rgb(255, 190, 125);
}
.TSale-img {
  position: relative;
  text-align: center;
  color: white;
}
.TSale-txt {
  position: absolute;
  top: 10px;
  right: 10px;
  transform: rotate(0deg);
}
.TSale-txt2 {
  position: absolute;
  top: 5px;
  right: 0;
  transform: rotate(0deg);
}
.TSale-txt-single {
  text-align: left;
  transform: rotate(0deg);
  margin-bottom: 5px;
}
.sidearea {
  margin-top: 15px;
}
.sidebox {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .11);
  margin-top: 15px;
}
.titleside h3 {
  background: #F9F9F9;
  padding: 14px 15px;
  font: bold 16px iranyekan;
  border-bottom: 1px solid #dedede;
  overflow: hidden;
}
.titleside h4 {
  background: #F9F9F9;
  padding: 13px 15px;
  font: bold 16px iranyekan;
  border-bottom: 1px solid #dedede;
  color: #474747;
  overflow: hidden;
}
.titleside h4 i {
  padding-left: 5px;
  font-size: 18px;
}
.generm {
  background: #fff;
  width: 100%;
  height: auto;
  margin: 15px 0;
}
.generm img {
  float: right;
}
.postbox-single {
  color: #fff;
  border-radius: 5px;
  margin-top: 15px;
}
.postbox-page {
  margin-top: 5px
}
.titlezone-s {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
  display: block;
}
.titlezone a, .titlezone-i a, .titlezone-s a {
  text-decoration: none;
  color: #fff;
  display: none;
}
.titlezone-s a:hover, .titlezone a:hover {
  color: #ccc
}
.e-content {
  color: #ccc;
  text-align: justify;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  margin-top: 10px;
}
.e-content img {
  margin: 10px auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-radius: 1px;
}
.e-content img:hover {
  opacity: 0.8
}
.list-cat {
  margin: 10px 0 15px 0;
  float: right;
}
.list-cat ul {
  color: rgba(51, 51, 51, .7);
  font: 13px iranyekan;
  list-style: none;
  padding-top: 10px;
}
.list-cat ul li {
  float: right;
  padding-left: 5px;
  color: #ccc;
  text-align: right;
  line-height: 1.7;
}
.list-cat a {
  text-decoration: none;
  color: #ddd;
  font-size: 13px;
}
.list-cat a:hover {
  color: #999;
}
.list-cat i {
  margin: 5px 0 0 2px;
}
.post-tags {
  color: #555;
  text-align: justify;
  margin-top: 20px;
  padding: 10px 0;
  margin: 10px 10px;
  display: none;
}
.post-tags a {
  color: #666;
  text-decoration: none;
  font: normal 12px iranyekan;
  font-weight: 400;
  line-height: 1.7;
}
.post-tags a:hover {
  color: #fff;
}
.post-tags i {
  padding-left: 5px;
} /*start dlbox new*/ .dlbox-txtvip {
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid;
  float: left;
  color: rgb(255, 190, 125);
}
.dlbox-Si-i {
  font-size: 22px !important;
  margin-top: 8px !important;
  margin-right: 10px !important;
}
button.dlbox-Si-i {
  outline: none !important;
}

.fav-artists {
	margin-top:10px;
}
.posting-followpage {
    float: right;
}
.following-page-img img {
	float: right;
    height: auto;
    width: 100%;
	border-radius: 50%;
    opacity: 1;
    display: block;
    margin-bottom: 10px;
}
.f-p-artistname {
	display: block;
    text-align: center;
    font-size: 16px;
	font-weight: 700;
    color: #fff;
	margin-bottom: 5px;
}
.f-p-fansnumbber {
display: block;
    text-align: center;
    color: #666;
	margin-bottom:7px;
}
.fav-artists btn-secondary , .unbtmfollow {
    color: #333;
    background-color: #fbcb07;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    border-radius: 25px;
    line-height: 2;
}
.btn-secondary {
    color: #fff;
    background-color: #242424;
    border-color: #242424;
    border-radius: 25px;
    line-height: 2;
}
.btn-danger:hover {
    color: #fff;
    background-color: #ff0100;
    border: 0;
    border-radius: 25px;
    line-height: 2;
}
.btmfollow {
    color: #333;
    background-color: #fff;
    font-weight: 600;
    border: 0;
    border-radius: 25px;
    line-height: 2;
}
.followerscount {
	padding-right: 3px;
    color: #888;
    letter-spacing: -0.5px;
}

.page-template-recommended .ss-rec-artist {
	display: inline-block;
	float: none;
	padding-left: 5px;
	padding-right: 5px;
	transition: transform .18s ease;
	vertical-align: top;
	white-space: normal;
}

.page-template-recommended .ss-rec-artist:hover {
	transform: translateY(-4px);
}

.page-template-recommended .ss-rec-artist__card {
	margin: 5px 0;
	overflow: hidden;
}

.page-template-recommended .ss-rec-artist__info {
	width: 100%;
	height: auto;
}

.page-template-recommended .ss-rec-artist__inner {
	width: 190px;
}

.page-template-recommended .ss-rec-artist__media-link {
	display: block;
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-artist__media-link:hover,
.page-template-recommended .ss-rec-artist__media-link:focus-visible {
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-artist__media {
	border-radius: 50%;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	margin: 0 0 12px;
	overflow: hidden;
	position: relative;
	transition: transform .18s ease, box-shadow .18s ease;
}

.page-template-recommended .ss-rec-artist__image {
	border-radius: 50%;
	display: block;
	height: auto;
	object-fit: cover;
	opacity: 1;
	width: 100%;
}

.page-template-recommended .ss-rec-artist__media.is-placeholder {
	background: #222;
	box-shadow: none;
}

.page-template-recommended .ss-rec-artist__placeholder {
	align-items: center;
	color: rgba(255, 255, 255, 0.34);
	display: inline-flex;
	font-size: clamp(54px, 7vw, 78px);
	height: 100%;
	justify-content: center;
	line-height: 1;
	text-decoration: none !important;
	width: 100%;
}

.page-template-recommended .ss-rec-artist__placeholder i {
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-artist:hover .ss-rec-artist__media {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	transform: scale(1.02);
}

.page-template-recommended .ss-rec-artist__meta {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-template-recommended .ss-rec-artist__meta-item {
	margin: 0;
	padding: 0;
}

.page-template-recommended .ss-rec-artist__meta-item--title {
	margin-bottom: 6px;
}

.page-template-recommended .ss-rec-artist__title-link {
	color: #fff;
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-artist__title-link:hover,
.page-template-recommended .ss-rec-artist__title-link:focus-visible {
	color: #fff;
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-artist__followers {
	color: #8a8a8a;
	display: block;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
  direction: rtl;
}

.page-template-recommended .ss-rec-section {
	margin: 18px 0 8px;
  text-align: right;
}

.page-template-recommended .ss-rec-section__header {
	margin-bottom: 10px;
}

.page-template-recommended .ss-rec-section__title {
	align-items: center;
	color: #fff;
	display: inline-flex;
	gap: 8px;
	margin: 0;
	direction: rtl;
	float: right;
	font-size: 17px;
	font-weight: 800;
	text-align: right;
}

	.page-template-recommended .ss-rec-section__grid {
		cursor: grab;
		display: block;
		direction: rtl;
		margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		-ms-overflow-style: none;
		scrollbar-width: none;
		white-space: nowrap;
	}

.page-template-recommended .ss-rec-section__grid:active {
	cursor: grabbing;
}

.page-template-recommended .ss-rec-section__grid.is-dragging,
.page-template-recommended .ss-rec-section__grid.is-dragging * {
	cursor: grabbing !important;
	user-select: none;
}

.page-template-recommended .ss-rec-section__grid::-webkit-scrollbar {
	display: none;
	height: 0;
	width: 0;
}

.page-template-recommended .ss-rec-mix-rail {
	--ss-rec-mix-card-size: 148px;
	--ss-rec-mix-card-width: 158px;
}

.page-template-recommended .ss-rec-mix-card {
	box-sizing: border-box;
	direction: rtl;
	display: inline-block;
	float: none;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
	text-align: center;
	vertical-align: top;
	white-space: normal;
	width: var(--ss-rec-mix-card-width, 158px);
}

.page-template-recommended .ss-rec-mix-card__button {
	align-items: center;
	background:
		linear-gradient(145deg, var(--ss-rec-mix-accent, #4e88ff), #171717 116%);
	border: 0px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	box-shadow: none;
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	height: var(--ss-rec-mix-card-size, 148px);
	justify-content: center;
	margin: 5px 0 0;
	overflow: hidden;
	padding: 24px 18px;
	position: relative;
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease;
	width: var(--ss-rec-mix-card-size, 148px);
}

.page-template-recommended .ss-rec-mix-card__button::after {
	border: 2px solid transparent;
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity .16s ease, border-color .16s ease, box-shadow .16s ease;
	z-index: 3;
}

.page-template-recommended .ss-rec-mix-card__button:hover,
.page-template-recommended .ss-rec-mix-card__button:focus-visible {
	border-color: rgba(255, 255, 255, .28);
	transform: translateY(-2px);
}

.page-template-recommended .ss-rec-mix-card:has([data-ss-popular-track].is-current) .ss-rec-mix-card__button,
.page-template-recommended .ss-rec-mix-card__button.is-active {
	border-color: rgba(255, 255, 255, .56);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
	transform: translateY(-2px);
}

.page-template-recommended .ss-rec-mix-card:has([data-ss-popular-track].is-current) .ss-rec-mix-card__button::after,
.page-template-recommended .ss-rec-mix-card__button.is-active::after {
	border-color: rgba(255, 255, 255, .54);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), 0 0 0 1px rgba(255, 255, 255, .08);
	opacity: 1;
}

.page-template-recommended .ss-rec-mix-card__pattern {
	inset: 0;
	opacity: .58;
	pointer-events: none;
	position: absolute;
	transform: translate3d(0, 0, 0);
}

.page-template-recommended .ss-rec-mix-card__pattern::before,
.page-template-recommended .ss-rec-mix-card__pattern::after {
	content: "";
	position: absolute;
}

.page-template-recommended .ss-rec-mix-card--pattern-1 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 50%;
	height: 92px;
	left: 24px;
	top: 28px;
	width: 92px;
}

.page-template-recommended .ss-rec-mix-card--pattern-1 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
	height: 2px;
	left: 44px;
	top: 126px;
	transform: rotate(-28deg);
	width: 92px;
}

.page-template-recommended .ss-rec-mix-card--pattern-2 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 28px;
	height: 88px;
	right: 28px;
	top: 38px;
	transform: rotate(18deg);
	width: 88px;
}

.page-template-recommended .ss-rec-mix-card--pattern-2 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	height: 58px;
	right: 76px;
	top: 84px;
	transform: rotate(18deg);
	width: 2px;
}

.page-template-recommended .ss-rec-mix-card--pattern-3 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .34);
	border-left-color: transparent;
	border-radius: 50%;
	height: 116px;
	left: 34px;
	top: 30px;
	transform: rotate(-22deg);
	width: 116px;
}

.page-template-recommended .ss-rec-mix-card--pattern-3 .ss-rec-mix-card__pattern::after {
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	height: 46px;
	left: 70px;
	top: 66px;
	width: 46px;
}

.page-template-recommended .ss-rec-mix-card--pattern-4 .ss-rec-mix-card__pattern::before {
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
	height: 2px;
	left: 36px;
	top: 72px;
	transform: rotate(31deg);
	width: 116px;
}

.page-template-recommended .ss-rec-mix-card--pattern-4 .ss-rec-mix-card__pattern::after {
	border: 1px solid rgba(255, 255, 255, .26);
	border-bottom: 0;
	border-right: 0;
	height: 52px;
	left: 62px;
	top: 54px;
	transform: rotate(31deg);
	width: 52px;
}

.page-template-recommended .ss-rec-mix-card--pattern-5 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 999px;
	height: 58px;
	left: 44px;
	top: 44px;
	width: 98px;
}

.page-template-recommended .ss-rec-mix-card--pattern-5 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
	height: 2px;
	left: 56px;
	top: 118px;
	width: 74px;
}

.page-template-recommended .ss-rec-mix-card--pattern-6 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .28);
	height: 86px;
	left: 52px;
	top: 42px;
	transform: rotate(45deg);
	width: 86px;
}

.page-template-recommended .ss-rec-mix-card--pattern-6 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .16);
	border-radius: 50%;
	height: 8px;
	left: 90px;
	top: 84px;
	width: 8px;
}

.page-template-recommended .ss-rec-mix-card--pattern-7 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	height: 118px;
	left: -20px;
	top: 54px;
	transform: rotate(12deg);
	width: 118px;
}

.page-template-recommended .ss-rec-mix-card--pattern-7 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	height: 12px;
	left: 112px;
	top: 44px;
	transform: rotate(24deg);
	width: 48px;
}

.page-template-recommended .ss-rec-mix-card--pattern-8 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 999px;
	height: 42px;
	left: 42px;
	top: 44px;
	width: 104px;
}

.page-template-recommended .ss-rec-mix-card--pattern-8 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .2);
	border-radius: 50%;
	box-shadow: 18px 0 0 rgba(255, 255, 255, .16), 36px 0 0 rgba(255, 255, 255, .12);
	height: 5px;
	left: 70px;
	top: 116px;
	width: 5px;
}

.page-template-recommended .ss-rec-mix-card--pattern-9 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .28);
	border-bottom-color: transparent;
	border-radius: 50%;
	height: 104px;
	left: 44px;
	top: -14px;
	transform: rotate(-18deg);
	width: 104px;
}

.page-template-recommended .ss-rec-mix-card--pattern-9 .ss-rec-mix-card__pattern::after {
	border: 1px solid rgba(255, 255, 255, .18);
	height: 38px;
	left: 56px;
	top: 94px;
	transform: rotate(45deg);
	width: 38px;
}

.page-template-recommended .ss-rec-mix-card--pattern-10 .ss-rec-mix-card__pattern::before {
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	height: 2px;
	left: 24px;
	top: 62px;
	transform: rotate(-10deg);
	width: 136px;
}

.page-template-recommended .ss-rec-mix-card--pattern-10 .ss-rec-mix-card__pattern::after {
	border: 1px solid rgba(255, 255, 255, .22);
	border-left: 0;
	border-radius: 0 999px 999px 0;
	height: 76px;
	left: 118px;
	top: 70px;
	width: 38px;
}

.page-template-recommended .ss-rec-mix-card--pattern-11 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 32px;
	height: 78px;
	left: 28px;
	top: 72px;
	transform: rotate(-28deg);
	width: 78px;
}

.page-template-recommended .ss-rec-mix-card--pattern-11 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	height: 46px;
	left: 126px;
	top: 48px;
	transform: rotate(-28deg);
	width: 2px;
}

.page-template-recommended .ss-rec-mix-card--pattern-12 .ss-rec-mix-card__pattern::before {
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 50%;
	height: 66px;
	left: 58px;
	top: 36px;
	width: 66px;
}

.page-template-recommended .ss-rec-mix-card--pattern-12 .ss-rec-mix-card__pattern::after {
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
	height: 2px;
	left: 42px;
	top: 126px;
	transform: rotate(18deg);
	width: 108px;
}

.page-template-recommended .ss-rec-mix-card__title {
	display: block;
	max-width: 126px;
	overflow: hidden;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	z-index: 1;
}

.page-template-recommended .ss-rec-mix-card__title {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.42;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .26);
}

.page-template-recommended .ss-rec-mix-card__button.is-loading::after,
.page-template-recommended .ss-rec-mix-card:has([data-ss-popular-track].is-loading) .ss-rec-mix-card__button::after {
	animation: ss-rec-mix-spin .75s linear infinite;
	border-color: rgba(255, 255, 255, .22);
	border-top-color: var(--ss-rec-mix-accent-2, #fff);
	opacity: 1;
}

@media (max-width: 480px) {
	.page-template-recommended .ss-rec-mix-rail {
		--ss-rec-mix-card-size: 124px;
		--ss-rec-mix-card-width: 134px;
	}

	.page-template-recommended .ss-rec-mix-card__button {
		padding: 20px 14px;
	}

	.page-template-recommended .ss-rec-mix-card__title {
		font-size: 13px;
		line-height: 1.36;
	}
}

@media (max-width: 360px) {
	.page-template-recommended .ss-rec-mix-rail {
		--ss-rec-mix-card-size: 112px;
		--ss-rec-mix-card-width: 122px;
	}

	.page-template-recommended .ss-rec-mix-card__button {
		padding: 18px 12px;
	}

	.page-template-recommended .ss-rec-mix-card__title {
		font-size: 12px;
		line-height: 1.32;
	}
}

@keyframes ss-rec-mix-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes ss-rec-mix-drift {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	50% {
		transform: translate3d(3px, -2px, 0) rotate(1.5deg);
	}
}

.page-template-recommended .ss-rec-mix-card__pattern {
	animation: ss-rec-mix-drift 12s ease-in-out infinite;
}

.page-template-recommended .ss-rec-mix-card:nth-child(2n) .ss-rec-mix-card__pattern {
	animation-duration: 14s;
}

.page-template-recommended .ss-rec-mix-card:nth-child(3n) .ss-rec-mix-card__pattern {
	animation-duration: 16s;
	animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
	.page-template-recommended .ss-rec-mix-card__pattern {
		animation: none;
	}
}

.page-template-recommended .ss-rec-empty-state {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	direction: rtl;
	flex: 0 0 auto;
	gap: 10px;
	justify-content: flex-start;
	margin: 9px 0 14px;
	min-height: 72px;
	overflow: hidden;
	padding: 14px 2px 14px 18px;
	position: relative;
	text-align: right;
	white-space: normal;
}

.page-template-recommended .ss-rec-empty-state__icon {
	align-items: center;
	animation: ss-rec-empty-icon-float 2.8s ease-in-out infinite;
	color: var(--ss-rec-empty-color, #c3a056);
	display: inline-flex;
	flex: 0 0 32px;
	font-size: 22px;
	height: 32px;
	justify-content: center;
	line-height: 1;
	position: relative;
	width: 32px;
}

.page-template-recommended .ss-rec-empty-state--playlist {
	--ss-rec-empty-color: #c3a056;
}

.page-template-recommended .ss-rec-empty-state--album {
	--ss-rec-empty-color: #6fa0c7;
}

.page-template-recommended .ss-rec-empty-state--single {
	--ss-rec-empty-color: #9b78c6;
}

.page-template-recommended .ss-rec-empty-state--artist {
	--ss-rec-empty-color: #7aac86;
}

.page-template-recommended .ss-rec-empty-state__text {
	color: #b8b8b8;
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.95;
	padding-top: 1px;
}

@keyframes ss-rec-empty-icon-float {
	0% {
		opacity: .72;
		transform: translateY(0);
	}
	50% {
		opacity: 1;
		transform: translateY(-2px);
	}
	100% {
		opacity: .72;
		transform: translateY(0);
	}
}

.page-template-recommended .ss-rec-post {
	direction: rtl;
	display: inline-block;
	float: none;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: top;
	white-space: normal;
}

.page-template-recommended .ss-rec-post__card {
	background: transparent;
	margin: 5px 0;
	overflow: visible;
	transition: none;
}

.page-template-recommended .ss-rec-post__card:hover {
	background: transparent;
	box-shadow: none;
	transform: none;
}

.page-template-recommended .ss-rec-post__info {
	height: auto;
	width: 100%;
}

.page-template-recommended .ss-rec-post__inner {
	position: relative;
	width: 190px;
}

.page-template-recommended .ss-rec-post__media-link {
	display: block;
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-post__media-link:hover,
.page-template-recommended .ss-rec-post__media-link:focus-visible {
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-post__media {
	display: block;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.page-template-recommended .ss-rec-post__media img {
	display: block;
	height: auto;
	width: 100%;
}

.page-template-recommended .ss-rec-post__meta {
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
	text-align: right;
}

.page-template-recommended .ss-rec-post__meta-item {
	margin: 0;
	padding: 0;
}

.page-template-recommended .ss-rec-post__meta-item--title {
	margin-bottom: 4px;
}

.page-template-recommended .ss-rec-post__title-link {
	color: #fff;
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	text-align: left;
	text-decoration: none !important;
      white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: ltr;
}

.page-template-recommended .ss-rec-post__title-link:hover,
.page-template-recommended .ss-rec-post__title-link:focus-visible {
	color: #fff;
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-post__artist {
	color: #d5d5d5;
	display: block;
	direction: rtl;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page-template-recommended .ss-rec-post__term-link {
	color: inherit;
	text-decoration: none !important;
	transition: color 0.18s ease;
}

.page-template-recommended .ss-rec-post__term-link:hover,
.page-template-recommended .ss-rec-post__term-link:focus-visible {
	color: #ffca1a;
	text-decoration: none !important;
}

.page-template-recommended .ss-rec-post__term-separator {
	color: currentColor;
}

.page-template-recommended .ss-rec-post__match,
.page-template-recommended .ss-rec-post__date {
	color: #a8a8a8;
	display: block;
	font-size: 14px;
	line-height: 1.65;
	text-align: left;
}

.page-template-recommended .ss-rec-user-playlist {
	display: inline-block;
	float: none;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: top;
	white-space: normal;
	width: 200px;
}

.page-template-recommended .ss-rec-user-playlist .ss-playlist-card__body {
	display: block;
}

.page-template-recommended .ss-rec-user-playlist .ss-my-music-card__collage {
	aspect-ratio: 1 / 1;
	width: 100%;
}

.page-template-recommended .ss-rec-user-playlist .ss-my-music-card__subtitle,
.page-template-recommended .ss-rec-user-playlist .ss-my-music-card__meta {
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}
	.dlboxnew-shop {
  border: 1px solid #333;
  background: #282828;
  border-radius: 0;
  min-width: 400px;
  padding: 0;
  text-align: right;
}
.dlboxnew {
  border: 1px solid #333;
  background: #282828;
  border-radius: 0;
  min-width: 300px;
  padding: 0;
  text-align: right;
}
.dlboxnew li, .dlboxnew-shop li {
  list-style: none;
  transition: all 0.3s;
  border-top: 1px solid #333;
}
.dlboxnew li a i, .dlboxnew-shop li a {
  font-size: 24px;
  margin-left: 10px;
}
.dlboxnew a, .dlboxnew-shop a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.dlboxnew li a, .dlboxnew-shop li a {
  text-align: right;
  color: #fff;
  text-decoration: none;
  padding: 15px 5px;
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.dlboxnew li:hover, .dlboxnew-shop li:hover {
  background: #1a1a1a;
  color: #eee;
  transition: 0.3s;
}
.dlboxnew a:hover, .dlboxnew-shop a:hover {
  color: #fff !important;
} /*end dlbox new*/ .dlbox {
  border-radius: 5px;
  margin-bottom: 10px;
}
.dlbox img {
  margin-bottom: -5px;
}
.dlbox ul li {
  list-style: none;
  text-align: right;
  margin-top: 6px;
  padding: 10px 10px;
  transition: all 0.6s;
  background: #333;
  color: #fff;
  border-radius: 3px;
  font: bold 14px iranyekan !important;
}
.dlbox ul li a {
  text-align: right;
  color: #fff !important;
  text-decoration: none;
  padding: 0px 5px;
  font: bold 13px iranyekan !important;
}
.dlbox ul a {
  text-decoration: none;
}
.dlbox figure {
  display: initial;
}
.dlbox ul li:hover {
  background: #242424;
  color: #eee;
  transition: 0.3s;
}
.dlboxtile {
  font: bold 16px iranyekan;
  text-align: center;
  position: relative;
  z-index: 2;
}
.dlboxtile:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: solid 1px #929292;
  z-index: -1;
}
.dlbox a:hover {
  color: #fff !important;
}
.dlbox-old {
  background: #1a1a1a;
}
.dlbox-old img {
  display: none;
}
.dlbox-old p {
  padding: 5px 10px;
  font: bold 14px iranyekan;
}
.style1 {
  color: #fff;
}
.dlbox-old a {
  text-decoration: none;
  color: #fff !important;
  float: right;
}
.dlbox-old a:hover {
  color: #333 !important;
}
.dlbox-old ul li {
  list-style: none;
  margin: 6px 10px;
  padding: 6px 0px;
  transition: all 0.6s;
  background: #1BBC9B;
  border-radius: 3px;
}
.dlbox-old ul li a {
  text-align: right;
  color: #fff !important;
  text-decoration: none;
  padding: 0px 5px;
  font: bold 13px iranyekan !important;
}
.dlbox-old ul li a:hover {
  transition: all 0.6s;
  color: #1e5046 !important;
} /*Comment*/ .screen-reader-text {
  display: none;
}
.comment-awaiting-moderation {
  display: inline-block;
  margin: 10px;
  color: #ffd62f;
  font-size: 12px;
}
.form-submit input {
  color: #1b1b1b;
  background: #ffd62f;
  width: 100%;
  font: 16px iranyekan;
  padding: 10px 0;
  border-radius: 80px;
  margin-top: 5px;
}
.form-submit input:hover {
  background: #e4bf25;
}
.fn, .fn a {
  text-decoration: none;
  color: #ddd;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  font-style: normal;
  padding-top: 3px;
}
.says {
  display: none;
}
.reply {
  text-align: left;
  margin-bottom: 10px;
  margin-top: 10px
}
.reply a {
  text-decoration: none;
    color: #ccc !important;
    border-radius: 50px;
    font-size: 16px;
    padding: 5px 15px;
    border: 1px solid #333;
}
.reply a:hover {
  background: #4e4e4e;
  color: #fff;
}
.comment-body {
  padding: 10px 0;
}
.comment-body a {
  text-decoration: none;
  color: #999;
}
.comment-body a:hover {
  color: #fff
}
label[for=comment] {
  display: none;
}
.comment-meta a {
  color: #666;
  font-size: 11px;
  text-decoration: none;
}
.cm-content {
  padding-top: 35px;
}
#reply-title {
  margin-top: 15px;
  margin-right: 10px;
  color: #ccc;
}
#reply-title a {
  text-decoration: none;
  color: #444;
  display: inline-block;
  margin-right: 5px;
  font-size: 12px;
}
#reply-title a:hover {
  color: #ccc;
}
.commentarea {
  margin-top: 15px;
  margin-bottom: 100px;
}
#comment {
  background: #242424;
  width: 100%;
  max-height: 150px;
  box-shadow: none;
  color: #eee;
  padding: 5px;
  margin-top: 10px;
  border: none;
  outline: none;
}
#comment:focus {
  background: #333;
}
.cancel-comment-reply-link {
  margin-right: 20px;
  font-size: 13px;
  text-decoration: none;
  color: #ffd62f;
}
.comment-author img {
  float: right;
  border-radius: 50px;
  margin: 0 5px 10px 5px;
}
.depth-2 img {
  width: 45px;
  height: auto;
}
ul.children .depth-5:before {
  background: #ffd62f;
  top: 25px;
  right: -55px;
}
ul.children .depth-5:after {
  width: 52px !important;
  border-top: 2px solid #333 !important;
  top: 30px !important;
  right: -41px !important;
}
ul.children .depth-5 {
  margin-right: 5px;
  padding-right: 0;
}
.depth-3 img, .depth-4 img {
  width: 40px;
  height: auto;
}
ul.children .depth-4:before {
  background: #ffd62f;
  top: 24px;
  right: -50px;
}
ul.children .depth-4:after {
  width: 48px !important;
  border-top: 2px solid #444 !important;
  top: 30px !important;
  right: -36px !important;
}
ul.children .depth-3 {
  margin-right: 0;
  padding-right: 0;
}
ul.children .depth-3:before {
  background: #ffd62f;
  top: 24px;
  right: -45px;
}
ul.children .depth-3:after {
  width: 44px !important;
  border-top: 2px solid #444 !important;
  top: 30px !important;
  right: -31px !important;
}
ul.children .depth-2 {
  margin-right: 27px;
  padding-right: 0;
}
ul.children .depth-4 {
  margin-right: 5px;
  padding-right: 0;
}
ul.children li:before {
  background: #ffd62f;
  top: 30px;
  right: -45px;
}
ul.children li:after {
  width: 44px !important;
  border-top: 2px solid #666 !important;
  top: 36px !important;
  right: -31px !important;
}
.comment-body {
  padding: 10px;
  background: #242424;
}
.comment-list {
  list-style: none;
  padding: 0;
  border-right: 2px solid #333;
}
.comment-list li {
  list-style: none;
  font-size: 14px;
  margin-bottom: 5px;
  list-style-type: none;
  margin-right: 10px;
  position: relative;
  background: #242424;
}
.comment-list li p {
  line-height: 22px;
  width: 100%;
  display: inline-block;
  text-align: justify;
  color: #eee;
}
.comment-list li:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 100%;
  top: 29px;
  right: -18px;
  border: 2px solid #fff;
  box-sizing: content-box;
}
.comment-list li:after {
  content: '';
  width: 18px;
  border-top: 2px solid #666;
  position: absolute;
  top: 35px;
  right: -4px;
}
.logged-in-as {
  display: none !important;
}
.logged-in-as a {
  color: #ccc;
  text-decoration: none;
}
.must-log-in {
  margin: 20px 10px;
  color: #fff;
}
.must-log-in a {
  text-decoration: none;
  color: #ccc;
  pointer-events: none;
}
#comments {
  text-align: right;
}
.must-log-in a:hover {
  color: #fff;
}
.comment-form-login textarea {
  width: 100%;
  height: 120px;
  float: left;
  margin-top: 10px;
}
.comment-form-login-submit {
  background: #242424;
  border: none;
  color: #fff;
  font: 14px iranyekan;
  padding: 5px 0;
  text-align: center;
  width: 100%;
  margin-top: 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}
.comment-form-login-submit:hover {
  color: #ffffff;
  box-shadow: 0 0 0 1px #999;
  background: #1a1a1a;
}
.commentforms-submit {
  background: #1a1a1a;
  border: none;
  color: #fff;
  font: 14px iranyekan;
  padding: 5px 0;
  text-align: center;
  width: 43%;
  margin-top: 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}
.commentforms-submit:hover {
  background: #c0392b;
}
.comment-login {
  padding: 10px;
  font-size: 14px;
  color: #fff;
  color: #d04649
}
.commenttitle {
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  position: relative;
  margin-bottom: 10px;
  z-index: 2;
}
.commenttitle:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: solid 1px #333;
  z-index: -1;
}
.line-center {
  margin: 0;
  padding: 0 20px;
  background: #1a1a1a;
  display: inline-block;
  color: #fff;
  direction: ltr;
}
.line-center1 i {
  color: #fff;
}
.line-center1 {
  margin: 0;
  padding-left: 20px;
  background: #1a1a1a;
  display: inline-block;
}
.line-sidebar {
  background: #1a1a1a;
  margin: 0;
  padding: 0px 15px 0px 10px;
  display: inline-block;
  color: #fff;
}
.line-sidebar-ttitle {
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  position: relative;
  margin-bottom: 10px;
  z-index: 2;
}
.line-sidebar-ttitle:after {
  content: "";
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  border-top: solid 1px #333;
  z-index: -1;
} /*Comment*/ .search-page {
  margin: 10px auto;
}
.navigation {
  text-align: center;
  margin: 30px 0;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400;
}
.navigation a {
  text-decoration: none;
  color: #474647;
  padding: 5px 10px;
  margin: 0 5px;
}
span.page-numbers.current {
  background: #1a1a1a;
  color: #fff;
  padding: 8px 18px;
}
.page-numbers:hover {
  background: #1a1a1a;
  border-radius: 3px;
  color: #fff !important;
  border: none !important;
}
.wp-pagenavi {
  text-align: center;
  font: 16px iranyekan;
  float: right;
  width: 100%;
  margin-top: 25px;
  direction: ltr;
  margin-bottom: 30px
}
.pagenavi .pages {
  background: #ccc;
}
.wp-pagenavi a {
  text-decoration: none;
  color: #fff;
  margin: 0 5px 10px 0;
  padding: 8px 18px;
  box-shadow: 0 0 0 1px #333;
  border-radius: 93px;
}
.wp-pagenavi span {
  margin: 0 5px;
  padding: 8px 18px;
  background: #333;
  border-radius: 94px;
}
nav.navigation.pagination .nav-links {
  background: #1a1a1a;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
  background: #333;
  color: #fff;
}
.wp-pagenavi span.current {
  font: bold 16px iranyekan;
  color: #fff;
} /*page navi*/ .dlbox-Sitile {
  font: bold 16px iranyekan;
  text-align: center;
  position: relative;
  z-index: 2;
}
.dlbox-Sitile:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: solid 1px #929292;
  z-index: -1;
}
.social {
  font-size: 17px;
  text-align: center;
  margin-bottom: 5px;
}
.social-mob {
  font-size: 17px;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 30px;
}
.social-mob i {
  color: #eee;
  font-size: 28px;
  margin-left: 10px;
}
.social-mob i:hover {
  color: #ffd62f;
}
.social-mob a {
  padding-right: 15px;
}
.social a {
  text-decoration: none;
  padding-right: 10px;
  color: #000;
}
.social i {
  color: #888;
  font-size: 23px;
  padding-top: 7px;
}
.social i:hover {
  color: #fff;
}
.vipmob {
  margin: 25px 0;
}
.vipmob h6 {
  margin: 20px 30px;
  padding: 5px 20px;
  background: #1a1a1a;
  color: #fbfbfb;
  text-align: center;
  width: 200px;
  border-radius: 3px;
  text-decoration: none;
}
.vipmob a:hover {
  background: #1a1a1a;
  color: #ffff
}
.accordion-menu {
  text-align: right;
}
.accordion-menu:hover {
  background: #1a1a1a;
  color: #ccc;
  ;
}
.accordion-menu a {
  font-size: 18px;
  display: block;
  color: #eee;
  font-weight: 600;
  padding: 13px 0;
  border-bottom: 1px solid #333;
}
.accordion-menu ul {
  list-style: none;
}
.accordion-menu ul li a {
  font-size: 16px;
  display: block;
  color: #ddd;
  font-weight: 400;
  padding: 13px 0;
  padding-right: 15px;
  border-bottom: 1px solid #333;
}
.accordion-menu i {
  float: right;
  padding-right: 10px;
  margin-left: 10px;
  font-size: 24px;
  padding-top: 10px;
}
.titlesideindex {
  margin-right: 5px;
  margin-left: 5px;
  display: flex;
}
.titlesideindex a:hover {
  color: #fff;
}
.titlesideindex h3 {
  margin: 10px 10px 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  text-align: right;
}
.search-desk {
  min-width: 16px;
  margin: 10px;
  padding: 10px;
  font-size: 15px;
  text-align: right;
  list-style: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  border: none;
  border-radius: 0;
  box-shadow: 0px 1px 2px 2px rgba(25, 25, 25, 0.4);
  left: inherit;
}
.search-deski i {
  color: #fff;
  cursor: pointer;
  margin-right: 15px;
} /* Style the tab best posts */ 
.rss-tabs-title {
    list-style: none;
    float: left;
    border-radius: 20px;
    background: #1a1919;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.rss-tabs-title a {
  text-decoration: none;
  color: #ffffff;
    font-size: 15px;
    border-radius: 20px !important;
    padding: .5rem 1rem !important;
}
.rss-tabs-title li {
  float: right;
}
.rss-tabs-title li.active, rss-tabs-title li:hover {
  background: #333;
  border-radius: 3px;
}
.titlesidemost {
  margin-right: 5px;
}
.titlesidemost h4 {
  float: right;
  font-size: 18px;
  font-weight: 600;
  padding-top: 12px;
  color: #fff;
}
.side-popular {
  margin-top: 0;
  margin-bottom: 15px;
  margin-bottom: 0;
}
.tab-side-popular ul li {
  display: block !important;
  padding-left: 10px !important;
  flex-direction: row-reverse !important;
}
.tab-side-popular img {
  height: auto !important;
  width: 100% !important;
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}
.tab-side-popular ul {
  list-style: none !important;
  margin-top: 10px !important;
  display: flex !important;
  direction: rtl !important;
  overflow-y: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
  padding-left: 10% !important;
  overflow-x: scroll !important;
}
.ss-trending {
  margin-bottom: 0;
}
.ss-trending__head h4 {
  margin-bottom: 0;
}
.ss-trending .rss-tabs-title {
  gap: 6px;
}
.ss-trending .rss-tabs-title .nav-link {
  border-radius: 6px;
  padding: 6px 12px;
}
.tab-side-popular .ss-trending__list {
  align-items: flex-start;
  gap: 8px;
  direction: ltr !important;
  padding-left: 0 !important;
  padding-bottom: 10px;
  cursor: grab;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-side-popular .ss-trending__list.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.tab-side-popular .ss-trending__list::-webkit-scrollbar {
  display: none;
}
.tab-side-popular .ss-trending__list > .ss-trending__column,
.tab-side-popular .ss-trending__column-list > .ss-trending-card {
  padding: 0 !important;
}
.ss-trending__column {
  display: block !important;
  flex: 0 0 clamp(286px, 62vw, 320px);
  width: clamp(286px, 62vw, 320px);
  max-width: clamp(286px, 62vw, 320px);
  min-width: 0;
  padding-left: 0 !important;
  direction: ltr;
  white-space: normal;
  border-radius: 0;
  background: transparent;
}
.ss-trending__column:hover,
.ss-trending__column:focus-within {
  background: transparent !important;
  box-shadow: none !important;
}
.ss-trending__column-list {
  display: grid !important;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
  white-space: normal !important;
}
.tab-side-popular .ss-trending__column-list > .ss-trending-card {
  display: grid !important;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
}
.tab-side-popular .ss-trending__column-list > .ss-trending-card:hover,
.tab-side-popular .ss-trending__column-list > .ss-trending-card:focus-within {
  background: transparent !important;
  box-shadow: none !important;
}
.ss-trending-card__link {
  display: grid;
  grid-template-columns: 38px 68px minmax(0, 1fr);
  grid-template-areas: "rank cover meta";
  align-items: center;
  gap: 10px;
  direction: ltr;
  width: 100%;
  min-height: 68px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  min-width: 0;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 160ms ease;
}
.ss-trending-card__link:hover,
.ss-trending-card__link:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}
.ss-trending-card__rankline {
  grid-area: rank;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  direction: ltr;
  min-width: 0;
}
.ss-trending-card__rank {
  min-width: 34px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d8d9df;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.ss-trending-card__movement {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: #b8bbc2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  animation: ssTrendingMovementSoftIn 680ms cubic-bezier(.2, .75, .25, 1) 120ms 1 both;
}
.ss-trending-card__movement i {
  display: block;
  line-height: 1;
}
.ss-trending-card__movement.is-up {
  color: #2fd17c;
  background: transparent;
}
.ss-trending-card__movement.is-down {
  color: #ff5f67;
  background: transparent;
}
.ss-trending-card__movement.is-flat {
  color: #a7abb3;
  background: transparent;
}
.ss-trending-card__movement.is-new {
  color: #55d6ff;
  background: transparent;
}
.ss-trending-card__cover {
  grid-area: cover;
  display: block;
  width: 68px;
  min-width: 68px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #151515;
  transition: transform 180ms ease, filter 180ms ease;
}
.ss-trending-card__cover img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  opacity: 1;
  margin: 0 !important;
  border-radius: inherit;
}
.ss-trending-card__meta {
  grid-area: meta;
  display: grid;
  gap: 4px;
  min-width: 0;
  direction: ltr;
}
.ss-trending-card__title,
.ss-trending-card__artist,
.ss-trending-card__genre,
.ss-trending-card__artist a,
.ss-trending-card__genre a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.ss-trending-card__title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.38;
  transition: color 160ms ease;
}
.ss-trending-card__artist,
.ss-trending-card__artist a {
  color: #d6d7dc;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
.ss-trending-card__genre,
.ss-trending-card__genre a {
  color: #8f949c;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}
.ss-trending-card__link:hover .ss-trending-card__cover,
.ss-trending-card__link:focus-visible .ss-trending-card__cover {
  filter: brightness(1.06);
}
.ss-trending-card__link:hover .ss-trending-card__title,
.ss-trending-card__link:focus-visible .ss-trending-card__title {
  color: #fbcb07;
}
@keyframes ssTrendingMovementSoftIn {
  0% {
    opacity: .56;
    transform: scale(.88);
  }
  55% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ss-trending-card__movement {
    animation: none;
  }
  .ss-trending-card__link,
  .ss-trending-card__cover,
  .ss-trending-card__title {
    transition: none;
  }
  .ss-trending-card__link:hover,
  .ss-trending-card__link:focus-visible,
  .ss-trending-card__link:hover .ss-trending-card__cover,
  .ss-trending-card__link:focus-visible .ss-trending-card__cover {
    transform: none;
  }
}
@media (max-width: 575.98px) {
  .ss-trending__column {
    flex-basis: min(82vw, 300px);
    width: min(82vw, 300px);
    max-width: min(82vw, 300px);
  }
  .ss-trending-card {
    min-height: 0;
  }
  .ss-trending-card__link {
    grid-template-columns: 36px 64px minmax(0, 1fr);
    gap: 9px;
    min-height: 64px;
  }
  .ss-trending-card__cover {
    width: 64px;
    min-width: 64px;
  }
  .ss-trending-card__rank {
    min-width: 32px;
    font-size: 14px;
  }
  .ss-trending-card__movement {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
}
.sidebox-top {
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 65px;
  float: right;
  width: 100%;
}
.titlemoretag {
  font-size: 13px;
  font-weight: 400;
  padding-top: 15px;
  color: #ddd;
  direction: ltr;
}
.titlemore-mood {
  font-size: 13px;
  font-weight: 400;
  padding-top: 15px;
  color: #ddd;
  direction: ltr;
}
.views-mosted {
  font-size: 10px
}
.views-mosted i {
  color: #7d7d7d
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #333;
  padding: .5rem 3rem;
}
.tab-pane ul {
  list-style: none;
}
.tab-pane ul li {
  padding: 5px 0;
  display: flex;
  flex-direction: row-reverse;
}
.tab-pane ul li:hover {
  background: #242424;
  transition: 0.3s ease;
  border-radius: 5px;
}
.tab-pane ul li a {
  text-decoration: none;
}
.tab-pane ul li h4 {
  margin: 5px 0;
  display: block;
  line-height: 20px;
  text-align: justify;
  font-size: 12px;
  font-weight: 400;
}
.tab-pane ul li h4:hover {
  color: #1a1a1a;
}
.tab-pane img {
  margin: 5px 5px 5px 10px;
  width: 160px;
  height: auto;
}
.tab-pane img:hover {
  opacity: 0.8;
}
.myplaylist-header {
  margin-top: 20px
}
.addnewplaylist-single {
  background-color: #212121 !important;
  padding: 10px 0 !important;
  border: none !important;
}
.title-paylistn h2, h5 {
  margin-bottom: 15px !important;
  margin-right: 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}
.form-control-plan option {
  font-size: 14px;
  font-family: iranyekan;
  background-color: #242424;
  direction: rtl;
}
.form-control-plan {
    color: #fff;
    background-color: #242424;
    border-radius: 80px;
    border: 1px solid #333;
    height: calc(2.5em + .75rem + 16px);
}
.form-control-plan:focus {
  color: #ffffff;
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgb(111 111 111 / 15%);
}
.form-controladdPlaylist {
  background-color: #212121 !important;
  border: 1px solid #383838 !important;
  color: #fff;
}
.form-controladdPlaylist:focus {
  box-shadow: 0 0 0 0.1rem rgb(105 105 105) !important;
  color: #fff;
}
.btn-primary {
  background-color: #ffd62f !important;
  border-color: #ffd62f !important;
  color: #1b1b1b;
}
.addnewplaylist-icon {
  background-color: #ffd62f !important;
  border-color: #ffd62f !important;
  padding: 10px !important;
  font-size: 1rem !important;
  line-height: 0 !important;
  color: #1b1b1b !important;
}
.addnewplaylist-icon-new {
  background-color: #212121 !important;
  border-color: #212121 !important;
  padding: 10px !important;
  font-size: 1rem !important;
  color: #ffd62f;
  line-height: 0 !important;
  text-align: right;
  direction: rtl;
  float: right;
  margin-bottom: 10px;
}
.addnewplaylist-icon-new:focus:not(:focus-visible) {
  box-shadow: none;
}
.addnewplaylist-icon-new h3 {
  float: left;
  margin-right: 10px;
}
.alert-nonplaylist {
  color: #fff;
  background-color: #333;
  border-color: #1a1a1a;
  text-align: right;
  font-size: 16px;
  margin: 5% 1%;
}
/* Style the ralated post */ .related_posts {
  background: #1a1a1a;
  border-radius: 3px;
  padding: 10px;
}
.related_posts ul {
  list-style: none;
  margin-top: 15px;
}
.related_posts ul li {
  padding: 5px;
}
.related_posts ul li a {
  text-decoration: none;
}
.related_posts ul li:hover {
  background: #242424;
  border-radius: 3px;
}
.container-fluid_rel {
  position: relative;
}
.container-fluid_rel img {
  height: auto;
  width: 100%;
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}
.container-fluid_rel:hover img {
  opacity: 0.8;
}
.container-fluid_rel:hover .middle {
  opacity: 1;
}
.post-img-hover:hover .middle {
  opacity: 1;
}
.post-img-hover {
  position: relative;
}
.post-img-hover img {
  height: auto;
  width: 100%;
  opacity: 1;
  display: block;
  backface-visibility: hidden;
}
.p-date-hover {
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  background: rgba(0, 0, 0, .5);
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #fff;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}
.text {
  color: #fbf5f5;
  font-size: 12px;
  padding: 15% 1em;
  border-radius: 3px;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.text h2 {
  color: #fff;
  margin: 5px 0;
  line-height: 20px;
  text-align: justify;
}
.related-al-TOP {
  color: #fff;
  padding-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 500;
  max-height: 80px;
  height: auto;
  display: block;
  overflow: hidden;
  text-align: left;
  direction: ltr;
  letter-spacing: -.05em;
  line-height: 1.2;
}
.related-ar-TOP {
  font: 16px iranyekan;
  max-height: 37.5px;
  height: auto;
  margin-bottom: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-align: left;
  direction: ltr;
  color: #ccc;
}
.related-da-TOP {
  color: #ccc;
  font: 14px iranyekan;
  max-height: 37.5px;
  height: auto;
  display: block;
  overflow: hidden;
  text-align: left;
  direction: ltr;
  margin-top: 10px;
}
.related-al {
  color: #fff;
  padding-top: 5px;
  font-size: 14px;
  font-weight: 500;
  max-height: 37.5px;
  height: auto;
  text-align: left;
  direction: ltr;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}
.related-ar {
  font: 13px iranyekan;
  max-height: 37.5px;
  height: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  text-align: left;
  direction: ltr;
  color: #ccc;
}
.related-ar a {
  color: #ccc ;
}
.related-ar a:hover, .related-ar:hover {
  color: #666;
}
.related-da {
  color: #ccc;
  max-height: 37.5px;
  height: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  text-align: left;
  direction: ltr;
}
.index-al i, .index-ar i,.index-da i {
	color:#1a1a1a;
	font-size: 1px;
}
.index-al {
  color: #eee;
  padding-left: 5px;
  padding-top: 5px;
  font-size: 15px;
  font-weight: 500;
  min-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  text-align: left;
  direction: ltr;
  position: relative;
}
..index-al a {
    color: #eee;
      font-size: 17px;
}
.index-ar {
  color: #ccc;
  padding-left: 5px;
  font: 14px iranyekan;
  max-height: 37.5px;
  height: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  text-align: left;
  direction: ltr;
}
.index-ar a {
	  color: #d0d0d0;
}
.index-da a {
  color: #ccc;
}
.index-ar a:hover, .index-da a:hover {
  color: #fff;
}
.index-da {
  color:#b9b8b8;
  padding-left: 5px;
  min-height: 23px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  text-align: left;
  direction: ltr;
}
.ss-index-card__title-link {
  color: inherit;
  display: block;
  overflow: hidden;
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-index-card__title-link:hover,
.ss-index-card__title-link:focus-visible {
  color: #fff;
  text-decoration: none !important;
}
.ss-index-card__artist {
  color: #d5d5d5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}
.ss-index-card__artist a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.18s ease;
}
.ss-index-card__artist a:hover,
.ss-index-card__artist a:focus-visible {
  color: #ffca1a;
  text-decoration: none !important;
}
button.close.col-xs-1:focus:not(:focus-visible) {
  outline: none;
}
.search-input-mob {
 background: #333;
 color: #eee;
 font-size: 14px;
 text-align: right;
 height: 45px;
 border-radius: 0 15px 15px 0;
}
.search-input-mob-btm {
  float: left;
  border: 0;
  background: #333;
  color: #fff;
  position: relative;
  height: 45px;
  border-radius: 15px 0 0 15px;
}
.search-input-mob-btm i {
  font-size: 22px;
  padding-top: 4px;
} /*top menu & user panel*/
.menu-accordion a {
  color: #fff;
}
.menu-accordion li {
  list-style: none;
}
.search-form button, .topmenu button {
  outline: none;
}
.dLabel {
  background: none;
  border: none;
  color: #fff;
}
div.dropdown.d-mainmenu-l {
  float: left;
}
.c-search {
  position: relative;
  float: right;
  display: block;
  width: 500px;
  max-width: 100%;
  min-width: 0;
}
.c-search label {
  display: block;
  width: 100%;
  min-width: 0;
}
.search-input-desk {
  margin: 10px 0;
  font-size: 16px;
  background-color: #242424;
  height: 50px;
  float: right;
  margin-right: 40px;
  width: calc(100% - 90px);
  color: #eee;
  padding: 0 15px;
  max-width: 350px;
  border-radius: 0 50px 50px 0;
}
.search-input-desk:focus {
  background-color: #333;
  color: #eee;
}
.search-desk-btm {
  background-color: #242424;
  color: #fff;
  margin-top: 10px;
  width: 50px;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  float: right;
  cursor: pointer;
  border-radius: 50px 0 0 50px;
    height: 50px;
}
.search-desk-btm i {
    font-size: 24px;
    padding-top: 5px;
    padding-left: 5px;
    color: #ccc;
}
.search-desk-btm i:hover {
    color: #fff;
}
.regi {
  float: right;
  margin-right: 10px;
  cursor: pointer;
  margin-top: -10px;
}
.logi a:hover, .regi a:hover {
  color: #ccc;
}
#footerarea {
  padding-top: 180px;
}
/*vip plugin*/
.panel-user-p {
  display: flex;
}
.user-p-grid {
  font-size: 14px;
  font-weight: 400;
  background: #242424;
  padding: 5px;
  text-align: Center;
  margin: 0 10px 10px 15px;
  border-radius: 9px;
}
.user-profile {
  float: right;
}
.user-profile img {
  margin-right: 10px;
  float: right;
}
.user-profile-upload {
  display: block;
}
.table-bordered td, .table-bordered th, .table-bordered {
  border: 1px solid #333 !important;
  color: #eee;
}
.t-login-kadr {
margin-bottom: 5px;
    margin-right: 20px;
    font-size: 16px;
}
.btnlogin {
  padding: 6px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 3px;
  color: #fff;
  background-color: #1a1a1a;
  width: 100%;
  border: none;
  margin-top: 10px;
}
.btnlogin:hover {
  background-color: #d43b2f;
}
.icon-u-pop {
  font-size: 100px;
}
.form-reg-p {
  float: right;
  margin-bottom: 40px;
}
.form-reg-bank {
  margin-bottom: 40px !important;
  margin: 0 auto;
}
.reg-icon-page {
  text-align: center;
  margin-top: 30px;
  display: block;
}
.reg-icon-page i {
  font-size: 150px;
  color: #ffd62f;
}
.form-reg-dt {
  border-right: 1px solid #353535;
  margin-bottom: 20px;
}
.form-reg-dt h4 {
  margin: 20px 70px;
  color: #fff;
  border: 1px solid #353535;
  font-size: 22px;
  padding: 14px 5px;
  border-radius: 50px;
  text-align: center;
}
.form-reg-dt ul {
  list-style: none;
  line-height: 2;
  color: #525e61;
  padding: 0;
}
.form-reg-dt ul li {
  margin-bottom: 10px;
  color: #ccc;
}
.modal-content {
  border-radius: 0;
  background: #212121;
  box-shadow: none;
  border: none;
}
.btm-login-p {
  margin-top: 10px;
font-size: 16px;
}
.btn-reg-page, .btn-login-p {
  padding: 13px 5px;
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 90px;
  color: #1a1a1a;
  background-color: #ffd62f;
  border: none;
  float: right;
}
.btn-reg-page:hover, .btn-login-p:hover {
  background: #e4bf25;
}
.btn-login-restore {
  padding: 8px 5px;
  font-size: 18px;
  border-radius: 3px;
  color: #ffffff;
  background-color: #28a745;
  border: none;
  float: right;
}
}
.btn-login-restore:hover {
  background: #21963c;
}
.loginuserpp img {
  display: block;
  margin: 0 auto;
  width: 250px;
  height: auto;
}
.btn-reg-p {
  margin-top: 10px;
  font-size: 16px;
}
.btn-buy-p {
  padding: 18px 0;
  font-size: 18px;
  font-weight:600;
  line-height: 1.7;
  border-radius: 90px;
  color: #1b1b1b;
  background-color: #ffd62f;
  border: none;
  float: right;
  margin: 20px 0;
}
.select-selected {
  background-color: DodgerBlue;
}
.btn-buy-p:hover {
  background-color: #e4bf25;
}
.btn-cancell-login {
  float: left;
  border: 0;
  background: #1a1a1a;
  padding: 5px 10px;
  color: #fff;
  border-radius: 3px;
  margin-top: 10px;
}
.btn-cancell-login:hover {
  background: ##e4bf25;
}
.rememberm {
  margin-bottom: 10px;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
} /*main mobile menu*/ .menu-tax i {
  float: left;
  font-size: 14px;
}
@media (max-width: 759.98px) {
  #header {
    overflow: visible;
    isolation: isolate;
  }
}
.img__wrap {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
}
.img__wrap img {
  border-radius: 50%;
}
.img__wrap i {
  font-size: 30px;
  padding-top: 5px;
}
.img__description {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  display: block;
  padding: 0 44%;
  right: 0;
  background: #1a1a1a;
  color: #fff;
  opacity: 0.5;
  transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 0.8;
}
.welcome-user {
  text-align: center;
  color: #fff !important;
  background: #1a1a1a;
  font-weight: 500;
  margin: 0 25px;
  padding: 5px 0;
  border-radius: 60px;
  display: block;
}
.help-block {
  text-align: center;
  margin-top: 10px;
}
.avatar-change {
  text-align: center;
  display: block;
  color: #fbcb07;
  border-radius: 8px;
  margin-top: 10px;
  padding: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.avatar-change:hover {
  color: #eee;
}
.wel-avatar img {
  margin: 5px auto;
  border-radius: 50%;
}
.wel-user-panel {
  display: block;
  font-size: 15px;
  text-align: center;
  font-weight: 600;
  margin-top: 10px;
}
.panel-artist {
  margin-bottom: 15px;
  float: right;
}
.panel-artist-p {
  text-decoration: none;
  float: right;
  padding: 8px 5px;
  text-align: Center;
  margin: 0 10px 10px 15px;
  background: #181717;
  border: 1px solid #333;
  border-radius: 20px;
}
.panel-artist-p:hover {
  background: #1a1a1a;
  border: 1px solid #666;
  color: #fff;
}
.btn-dlbuypage {
    border-radius: 0px !important;
    font-size: 16px;
    font-weight: 600;
    border-color: #fbcb07 !important;
    background-color: #fbcb07 !important;
    color: #1b1b1b !important;
    display: inline-block;
    width: 110px;
}
.table-buy-color {
    color: #999;
    font-size: 14px !important;
    font-weight: 400;
}
.btn-dlbuypage:hover {
  color: #333 !important;
  background-color: #ffcd00 !important;
  border-color: #ffcd00 !important;
}
.panel-artist-p2 {
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  padding: 5px;
  color: #fbcb07;
  text-align: Center;
  margin: 10px 0;
  border: 2px solid #fbcb07;
}
.panel-artist-p a {
  color: #fbcb07;
  padding-right: 5px;
  opacity: 0.9;
  font-size: 16px;
  font-weight: 400;
}
.box-i {
  margin-bottom: 15px;
  margin-top: 10px;
  border-radius: 3px;
}
.box-i a {
  text-decoration: none;
}
.box-i h4 {
  font-size: 15px;
  background: #fbfbfb;
  color: #666;
  width: 100%;
  padding: 15px;
  border-bottom: 1px solid #ececec;
}
.postbox-i {
  color: #fff;
  margin: 5px 0;
  overflow: hidden;
}
.postbox-i h4 {
  padding: 3px 5px;
  float: left;
  direction: ltr;
  font-size: 13px;
  color: #5f5f5f;
} /*cat side list*/ .index-1.col-lg-9 {
  float: right;
}
.posting {
  float: right;
  padding-right: 5px;
  padding-left: 5px;
}
.posting:hover {
  transition: 0.2s;
  opacity: 0.8;
  background: #242424;
}
.posting.col-lg-4 {
  float: right;
}
.ads-h img {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.pic-s {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  text-align: inherit;
}
.pic-s img {
  width: 100%;
  height: auto;
  position: relative;
}
.ss-cover-viewer__trigger {
  cursor: pointer;
}
.pic-s img:hover {
  cursor: pointer;
  opacity: 0.8;
}
.ss-cover-viewer[hidden] {
  display: none !important;
}
.ss-cover-viewer {
  position: fixed;
  inset: 0;
  z-index: 10140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, background-color 180ms ease, visibility 0s linear 180ms;
  direction: ltr;
  overscroll-behavior: contain;
}
.ss-cover-viewer.is-open {
  background: rgba(0, 0, 0, 0.82);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.ss-cover-viewer__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: default;
}
.ss-cover-viewer__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(500px, calc(100vw - 32px));
  max-height: calc(100dvh - 72px);
  transform: translateY(8px) scale(0.985);
  transition: transform 180ms ease;
}
.ss-cover-viewer.is-open .ss-cover-viewer__dialog {
  transform: translateY(0) scale(1);
}
.ss-cover-viewer__figure {
  margin: 0;
  line-height: 0;
}
.ss-cover-viewer__image {
  display: block;
  width: min(500px, calc(100vw - 32px));
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 72px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.ss-cover-viewer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.ss-cover-viewer__close:hover,
.ss-cover-viewer__close:focus-visible {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(24, 24, 24, 0.92);
  color: #f9c80e;
}
.info-s {
  padding-right: 5px;
  padding-left: 0px;
  text-align: left;
}
.playlist-player {
  margin-bottom: 50px;
}
.AL-Si {
  font-size: 34px;
  direction: ltr;
  margin-bottom: 6px;
  margin-top: 5px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  font-weight: 800;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  position: relative;
}
.mypaylistname {
  font-size: 44px;
  direction: ltr;
  margin-bottom: 5px;
  overflow: hidden;
  margin-top: 15px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  font-weight: 800;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  position: relative;
}
.AR-Si {
	display: block;
    direction: ltr;
    font-weight: 400;
    font-size: 20px;
	margin-top: 5px;
    margin-bottom:6px;
    letter-spacing: -0.7px;
    float: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #ccc;
}
.AR-Si a {
  text-decoration: none;
  color: #f7f7f7;
}
.AR-Si a:hover {
  color: #d0d0d0;
}
.Da-Si {
  font-size: 13px;
  direction: ltr;
  color: #eee;
}
.T-N-T-Si li {
  display: inline-block;
}
.T-N-T-Si {
  color: #eee;
  margin-top: 5px;
  direction: ltr;
  position: absolute;
  left: 0px;
  bottom: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kk-star-ratings .kksr-legend {
  margin-top: 6px;
}
.rate-Si {
  margin-left: 0px;
  padding-top: 10px;
  font-size: 12px;
  direction: ltr;
  color: #fff;
}
.kk-star-ratings .kksr-muted {
  opacity: 1;
}
.rate-Si i {
  color: #ffc107;
  font-size: 12px;
}
.Fav-List-title {
  display: inline-grid;
  margin-top: 17px;
  color: #ccc;
}
.fa-bookmark::before {
  color: #bbbb;
}

.view-Si {
  display: block;
  padding-top: 8px;
  float: left;
  margin-left: 5px;
}
.pub-Si {
  direction: ltr;
  display: inherit;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 11px;
  color: #bbb;
}
.pub-Si a {
  color: #bbb;
  text-decoration: none;
}
.genre-Si {
  float: left;
  font-size: 14px;
  direction: ltr;
  margin-top: 5px;
  letter-spacing: -0.2px;
  margin-bottom: 5px;
}
.genre-Si a {
  text-decoration: none;
  color: #eee;
}
.genre-Si a:hover {
  color: #c8c8c8;
}
.mood-Si {
  float: left;
  font-size: 14px;
  direction: ltr;
  margin-top: 5px;
  letter-spacing: -0.2px;
  margin-bottom: 15px;
}
.mood-Si a {
  text-decoration: none;
  color: #999;
}
.mood-Si a:hover {
  color: #333;
}
.instrument-Si {
  float: left;
  font-size: 14px;
  direction: ltr;
  margin-top: 5px;
  letter-spacing: -0.2px;
  margin-bottom: 5px;
}
.instrument-Si a {
  text-decoration: none;
  color: #666;
}
.instrument-Si a:hover {
  color: #fff;
}
.badge {
  margin-top: -15px;
  color: #fff;
  background: #1a1a1a;
}
.postbox-single .e-content p:nth-of-type(2) img:first-of-type {
  display: none;
}
.postbox-single .e-content p:nth-of-type(1) img:first-of-type {
  display: none;
}
.noti-1 {
  margin-right: 20px;
  cursor: pointer;
}
.noti-1:hover {
  color: #1a1a1a;
}
.noti-1 a {
  color: #666;
}
.noti-1 ul li a {
  text-align: right;
  color: #666;
}
.noti-1 i {
  color: #fff;
  cursor: pointer;
}
.comment-num {
  margin-left: 5px;
  color: #fff;
}
.comment-num a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

.box-i-sc {
  display: flex;
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-left: 10%;
}
[data-ss-drag-rail] {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  scrollbar-color: #4a4a4a #222;
  scrollbar-width: thin;
}
[data-ss-drag-rail]:active {
  cursor: grabbing;
}
[data-ss-drag-rail].is-dragging,
[data-ss-drag-rail].is-dragging * {
  cursor: grabbing !important;
  user-select: none;
}
[data-ss-drag-rail]::-webkit-scrollbar {
  height: 8px;
}
[data-ss-drag-rail]::-webkit-scrollbar-track {
  background: #222;
  border-radius: 999px;
}
[data-ss-drag-rail]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4d4d4d, #383838);
  border-radius: 999px;
}
[data-ss-drag-rail]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5f5f5f, #444);
}
.box-i-sc a {
  text-decoration: none;
}
.postinfo-i2 {
  width: 100%;
  height: auto;
}
.postinfo-i2 ul a {
  text-decoration: none;
}
.postinfo-i2 ul {
  list-style: none;
}
.postinfo-i2-s {
  width: 220px;
}
.postinfo-i2-s-v img {
  height: 140px !important;
}
.posting-i2 {
  float: right;
  padding-right: 5px;
  padding-left: 5px;
}
.posting-i2.col-lg-4 {
  float: right;
}
.box-2r {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
}
.box-2r section {
  float: none
}
.box-i2 {
  margin-top: 15px;
  margin-bottom: 5px;
}
.postbox-i2 {
  margin: 5px 0;
  overflow: hidden;
}
.postbox-i2:hover {
  transition: 0.2s;
  opacity: 0.8;
  background: #242424;
}
.postbox-i2 img {
  height: auto;
  width: 100%;
  border-radius: 1px
}
.postbox-i2 h4 {
  padding: 3px 5px;
  float: left;
  direction: ltr;
  font-size: 13px;
  color: #5f5f5f;
}
.title-i2 {
  margin-bottom: 10px;
  margin-right: 5px;
}
.title-i2 a {
  text-decoration: none;
}
.title-i2 a:hover {
  color: #fff;
}
.title-i2 h2 {
  float: right;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
.titlemore-i2 {
  float: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  direction: ltr;
  transition: color .18s ease, transform .18s ease;
}
.titlemore-i2 i {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  opacity: .72;
  transform: translateX(0);
  transition: opacity .18s ease, transform .18s ease;
}
.titlemore-i2:hover,
.titlemore-i2:focus {
  color: #fff;
  transform: translateX(-2px);
}
.titlemore-i2:hover i,
.titlemore-i2:focus i {
  opacity: 1;
  transform: translateX(-3px);
}
.box-moods {
  text-align: center;
  margin: 10px 0 10px 10px;
  float: left;
  position: relative;
  text-decoration: none;
}
.box-moods-p {
  text-align: center;
  padding: 5px;
  float: right;
  position: relative;
  text-decoration: none;
}
.box-moods:hover {
  opacity: 0.8;
}
.moods-name {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: bold;
  color: #fff;
}
.box-moods-link {
  position: relative;
  z-index: 3;
  display: inline-block;
  text-align: center;
  text-decoration: none;
} /*artist page box*/ .postbox-foreign, .postbox-genre, .postbox-instrumentals, .a-width-foreign {
  margin: 5px 0;
  border-radius: 6px;
}
.a-width-instrumentals, .a-width-genre {
  width: 175px;
  height: auto;
}
.postbox-foreign:hover, .postbox-instrumentals:hover, .postbox-genre:hover, .a-width-instrumentals:hover, .a-width-genre:hover {
  opacity: 0.9;
}
.postbox-foreign img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 0 2px 1px #333;
}
.a-width-foreign img {
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 0 2px 1px #333;
  height: auto;
  width: 100%;
}
.postbox-foreign img:hover, .postbox-instrumentals img:hover, .postbox-genre img:hover, .a-width-instrumentals img:hover, .a-width-foreign img:hover, .a-width-genre img:hover {
  background-image: linear-gradient(-135deg, #FFDC80 10%, #C13584 30%, #E1306C 38%, #FD1D1D 20%, #FFDC80 86%);
}
.postbox-foreign h4, .a-width-foreign h4 {
  padding: 3px 5px;
  float: left;
  direction: ltr;
  font-size: 13px;
  color: #5f5f5f;
}
.titlezone-foreign h3 {
  padding: 5px 3px 5px 3px;
  text-align: center;
  color: #eee;
  height: 45px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  direction: rtl;
  font-size: 14px;
  font-weight: 500;
} /*instr page box*/ .titlezone-instrumentals, .titlezone-genre {
  padding-right: 13px;
  padding-left: 5px;
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
}
.titlezone-instrumentals a, .titlezone-genre a {
  text-decoration: none;
}
.titlezone-instrumentals h3, .titlezone-genre h3 {
  text-align: center;
  color: #ffffff;
  height: 45px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  font-size: 16px;
  direction: rtl;
  font-weight: 500;
}
.postbox-instrumentals img, .postbox-genre img, .a-width-instrumentals img, .a-width-genre img {
  filter: contrast(60%) brightness(80%);
  width: 100%;
  height: auto;
} /*Platlist Mood*/ .playlist-deep {
  width: 140px;
  height: 60px;
  background: linear-gradient(0deg, transparent, rgb(255 255 255 / 10%));
}
.playlist-deep h3 {
  position: relative;
  top: 15px;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: #1a1a1a26;
  display: block;
  padding: 5px;
  letter-spacing: .03em;
}
.playlist-relax {
  background-color: rgb(45, 70, 185)
}
.playlist-sad {
  background-color: rgb(83, 83, 83)
}
.playlist-epic {
  background-color: rgb(245, 155, 35)
}
.playlist-postive {
  background-color: rgb(180, 155, 200)
}
.playlist-study {
  background-color: rgb(75, 145, 125)
}
.playlist-epic {
  background-color: rgb(235, 30, 50)
}
.playlist-sleep {
  background-color: rgb(160, 195, 210)
}
.playlist-relaxing {
  background-color: rgb(255, 200, 100)
}
.playlist-workout {
  background-color: rgb(205, 245, 100)
}
.playlist-classical {
  background-color: rgb(0, 100, 80)
}
.playlist-meditation {
  background-color: rgb(195, 150, 135)
}
.playlist-christmas {
  background-color: rgb(245, 155, 35)
}
.playlist-meditation {
  background-color: rgb(195, 150, 135)
}
.playlist-meditation {
  background-color: rgb(195, 150, 135)
}
.more-explore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  flex: 0 0 268px;
  width: 268px;
  min-width: 268px;
  min-height: 56px;
  padding: 0 14px 0 10px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 62%),
    #202020;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .055), inset 0 1px 0 rgba(255, 255, 255, .035);
  box-sizing: border-box;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.more-explore i {
  order: 2;
  float: none;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.more-explore h3 {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 0 12px;
  overflow: hidden;
  text-align: right;
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .18s ease;
}
.more-explore:hover,
.more-explore:focus {
  opacity: 1;
  background-color: #252525;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translateY(-1px);
}
.more-explore:hover i,
.more-explore:focus i {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transform: translateX(-2px);
}
.more-explore:hover h3,
.more-explore:focus h3 {
  color: #fff;
}
.more-bestof {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  direction: rtl;
  min-width: 154px;
  height: 42px;
  padding: 0 12px;
  gap: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #202020;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  box-sizing: border-box;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.more-bestof i {
  float: none;
  flex: 0 0 auto;
  width: 16px;
  margin: 0;
  color: rgba(255, 255, 255, .42);
  font-size: 13px;
  line-height: 1;
  text-align: center;
  transition: color .18s ease, opacity .18s ease;
}
.more-bestof h3 {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .18s ease;
}
.more-bestof:hover,
.more-bestof:focus {
  opacity: 1;
  background-color: #252525;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
  transform: translateY(-1px);
}
.more-bestof:hover i,
.more-bestof:focus i {
  color: rgba(255, 255, 255, .62);
}
.more-bestof:hover h3,
.more-bestof:focus h3 {
  color: #fff;
} /*new Mood*/
.mood-pages {
  display: block;
  float: right;
  border: none;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-bottom: 25px;
}
.t-mood-page {
  text-align: center;
  font-size: 18px;
  color: #f9f9f9;
  font-weight: 700;
  display: block;
  padding-top: 40px;
  height: 100px;
}
.t-mood-page:hover {
  opacity: 0.8
}
.m-color-1 {
  background-color: rgb(39, 133, 106);
}
.m-color-2 {
  background-color: rgb(30, 50, 100);
}
.m-color-3 {
  background-color: rgb(232, 17, 91);
}
.m-color-4 {
  background-color: rgb(186, 93, 7);
}
.m-color-5 {
  background-color: rgb(80, 155, 245);
}
.m-color-6 {
  background-color: rgb(20, 138, 8);
}
.m-color-7 {
  background-color: rgb(71, 125, 149);
}
.m-color-8 {
  background-color: rgb(245, 115, 160);
}
.m-color-9 {
  background-color: rgb(141, 103, 171);
}
.m-color-10 {
  background-color: rgb(30, 50, 100);
}
.m-color-11 {
  background-color: rgb(71, 125, 149);
}
.m-color-12 {
  background-color: rgb(71, 125, 149);
}
.m-color-13 {
  background-color: #555;
}
.m-color-14 {
  background-color: rgb(225, 51, 0);
}
.m-color-15 {
  background-color: rgb(235, 30, 50);
}
.m-color-16 {
  background-color: rgb(80, 55, 80);
}
.m-color-17 {
  background-color: rgb(13, 115, 236);
}
.m-color-18 {
  background-color: rgb(232, 17, 91);
}
.m-color-19 {
  background-color: rgb(140, 25, 50);
}
.m-color-20 {
  background-color: rgb(45, 70, 185);
}
.m-color-21 {
  background-color: rgb(255, 200, 100);
}
.mood {
  background: linear-gradient(180deg, transparent, 75%, #1a1a1a);
  width: 190px;
  height: 140px;
}
.moods {
  background: linear-gradient(180deg, transparent, 75%, #1a1a1a);
  width: 100%;
  height: 140px;
}
.mood-winter h3, .mood-christmas h3, .mood-hopeful h3, .mood-autumn h3, .mood-trailer h3, .mood-relax-guitar h3, .mood-chill h3, .mood-summer h3, .mood-none h3, .mood-rest h3, .mood-spa h3, .mood-summer h3, .mood-christmas h3, .mood-dreadful h3, .mood-wedding h3, .mood-cinematic h3, .mood- h3, .mood-inspiring h3, .mood-chill h3, .mood-energetic h3, .mood-fantasy h3, .mood-spring h3, .mood-coloring h3, .mood--summer h3, .mood-piano-orchestral h3, .mood-piano-cello h3, .mood-rhythmic h3, .mood-phonetic h3, .mood-glorious h3, .mood-mellow h3, .mood-mysterious h3, .mood-wedding h3, .mood-dark h3, .mood-tropical h3, .mood-yoga h3, .mood-party h3, .mood-adventure h3, .mood-mystical h3, .mood-alone h3, .mood-walking h3, .mood-running h3, .mood-action h3, .mood-meditation h3, .mood-yoga h3, .mood-workout h3, .mood-native-american h3, .mood-piano-violin h3, .mood-piano-violin h3, .mood- h3, .mood-girls h3, .mood-autumn h3, .mood-sad-guitar h3, .mood-imaginary h3, .mood-melodic h3, .mood-floating h3, .mood-peaceful h3, .mood-coding h3, .mood-pregnancy-period h3, .mood-valentine h3, .mood-morning h3, .mood-nostalgic h3, .mood-happy-piano h3, .mood-background-music h3, .mood-relax-guitar h3, .mood-comedy h3, .mood-romantic-violin h3, .mood-kids h3, .mood-romantic-piano h3, .mood-romantic-guitar h3, .mood-sad-cello h3, .mood-happy-violin h3, .mood-sad-violin h3, .mood-cover h3, .mood-motivational h3, .mood-war h3, .mood-happy-guitar h3, .mood-sad-piano h3, .mood-winter h3, .mood-hopeful h3, .mood-sad-turkish h3, .mood-persian-happy h3, .mood-baby-sleep h3, .mood-no-copyright h3, .mood-sentimental h3, .mood-nostalgic h3, .mood-focus h3, .mood-rainy h3, .mood-positive-energy h3, .mood-positive-energy h3, .mood-sleep h3, .mood-study h3, .mood-night h3, .mood-dramatic h3, .mood-dreamy h3, .mood-sport h3, .mood-contemplative h3, .mood-romantic h3, .mood-excitedly h3, .mood-orchestral h3, .mood-depressed h3, .mood-epic h3, .mood-happy h3, .mood-relaxing h3, .mood-piano-solo h3, .mood-trailer h3, .mood-imagination h3 {
  position: relative;
  top: 99px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #fff;
  display: block;
  padding: 5px;
  letter-spacing: .03em;
}
.mood - christmas {
  background: url(images / mood.jpg)380px - 700px;
}
.mood - winter {
  background: url(images / mood.jpg)570px - 700px;
}
.mood-spring {
  background: url(images/mood.jpg) 190px -700px;
}
.mood-christmas {
  background: url(images/mood.jpg) 380px -700px;
}
.mood-autumn {
  background: url(images/mood.jpg) 760px -700px;
}
.mood-hopeful {
  background: url(images/mood.jpg) 950px -700px;
}
.mood-trailer {
  background: url(images/mood.jpg) 950px -560px;
}
.mood-relax-guitar {
  background: url(images/mood.jpg) 1140px -560px;
}
.mood-chill {
  background: url(images/mood.jpg) 760px -560px;
}
.mood-summer {
  background: url(images/mood.jpg) 1140px -700px;
}
.mood-relaxing {
  background: url(images/mood.jpg) 950px 0px;
}
.mood-epic {
  background: url(images/mood.jpg) 0px 0px;
}
.mood-happy {
  background: url(images/mood.jpg) 190px 0px;
}
.mood-depressed {
  background: url(images/mood.jpg) 570px 0px;
}
.mood-winter {
  background: url(images/mood.jpg) 570px -700px;
}
.mood-orchestral {
  background: url(images/mood.jpg) 1140px -420px;
}
.mood-excitedly {
  background: url(images/mood.jpg) 950px -420px;
}
.mood-romantic {
  background: url(images/mood.jpg) 950px -140px;
}
.mood-contemplative {
  background: url(images/mood.jpg) 760px -140px;
}
.mood-sport {
  background: url(images/mood.jpg) 570px -140px;
}
.mood-dreamy {
  background: url(images/mood.jpg) 380px -140px;
}
.mood-dramatic {
  background: url(images/mood.jpg) 190px -140px;
}
.mood-night {
  background: url(images/mood.jpg) 950px -280px;
}
.mood-study {
  background: url(images/mood.jpg) 760px -280px;
}
.mood-sleep {
  background: url(images/mood.jpg) 1140px -280px;
}
.mood-positive-energy {
  background: url(images/mood.jpg) 570px -280px;
}
.mood-rainy {
  background: url(images/mood.jpg) 380px -280px;
}
.mood-focus {
  background: url(images/mood.jpg) 190px -280px;
}
.mood-no-copyright {
  background: url(images/mood.jpg) 190px -420px;
}
.mood-piano-solo {
  background: url(images/mood.jpg) 380px -420px;
}
.mood-sentimental {
  background: url(images/mood.jpg) 570px -420px;
}
.mood-phonetic {
  background: url(images/mood.jpg) 760px -420px;
}
.mood-baby-sleep {
  background: url(images/mood.jpg) 190px -560px;
}
.mood-imagination {
  background: url(images/mood.jpg) 380px -560px;
}
.mood-sad-piano {
  background: url(images/mood.jpg) 570px -560px;
}
.mood-piano-solo {
  background: url(images/mood.jpg) 380px -420px;
} /*Mood*/ .cat-relax {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 800px 320px;
  border-radius: 5px;
}
.cat-happy {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 600px 320px;
  border-radius: 5px;
}
.cat-romantic {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 600px 240px;
  border-radius: 5px;
}
.cat-epic {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 200px 320px;
  border-radius: 5px;
}
.cat-kids {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 800px 240px;
  border-radius: 5px;
}
.cat-Nostalgic {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 600px 160px;
  border-radius: 5px;
}
.cat-Sad {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 400px 320px;
  border-radius: 5px;
}
.cat-Sport {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 400px 240px;
  border-radius: 5px;
}
.cat-Persian {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 800px 160px;
  border-radius: 5px;
}
.cat-Meditation {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 600px 80px;
  border-radius: 5px;
}
.cat-runnig {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 200px 240px;
  border-radius: 5px;
}
.cat-Postive {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 200px 160px;
  border-radius: 5px;
}
.cat-RelaxPiano {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 400px 160px;
  border-radius: 5px;
}
.cat-Yoga {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 800px 80px;
  border-radius: 5px;
}
.cat-Spring {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 200px 80px;
  border-radius: 5px;
}
.cat-Studying {
  width: 200px;
  height: 80px;
  background: url(images/Mood.jpg) 400px 80px;
  border-radius: 5px;
}
.cat-Studying h3, .cat-Nostalgic h3, .cat-kids h3, .cat-romantic h3, .cat-Spring h3, .cat-Yoga h3, .cat-RelaxPiano h3, .cat-Postive h3, .cat-runnig h3, .cat-Meditation h3, .cat-Persian h3, .cat-Sport h3, .cat-Sad h3, .cat-happy h3, .cat-epic h3, .cat-relax h3 {
  position: relative;
  top: 30px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  display: block;
  padding: 5px;
  letter-spacing: .04em;
}
.index-1.col-xs-12 {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
.form-control {
  direction: rtl !important;
}
.orderbybox {
    background: #333;
    color: #ddd;
    border: 0;
    padding: 10px 15px !important;
    border-radius: 55px !important;
}
#orderby, #filterby {
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}
#orderby:focus, #filterby:focus {
  outline: none;
}
#orderby h3 {
  float: right;
  color: #666;
  font-size: 13px;
  margin-left: 5px;
  margin-top: 5px;
}
.videoplayer video {
  width: 100%;
  height: auto;
  padding: 0 10px;
  margin-top: 10px;
}
body.videos figure.pic-s {
  display: none;
} /*mq css*/ @media screen and (min-width:1540px) {
  .h3-artist p {
    font-size: 15px;
  }
  .category-details h2, .tag-details h2 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1.0px;
  }
  .form-submit input {
    padding: 20px 0;
    font: 20px iranyekan;
    font-weight: 600;
  }
  #comment {
    max-height: 200px;
  }
  .postinfo-i2-s {
    width: 210px;
  }
  .line-sidebar-ttitle {
    font-size: 24px;
  }
  .tab-pane img {
    width: 250px;
  }
.posting-followpage {
    max-width: 14%;
}
  .AL-Si {
    font-size: 64px;
  }
  .AR-Si {
    font-size: 23px;
  }
  .Da-Si {
    font-size: 18px;
  }
  .genre-Si {
    font-size: 22px;
  }
.mood-Si {
    font-size: 22px;
  }
.instrument-Si {
    font-size: 22px;
  }
  .T-N-T-Si {
    font-size: 18px;
  }
  .related-al {
    font-size: 18px;
  }
  .related-al-TOP {
    font-size: 24px;
  }
  .related-ar {
    font-size: 18px;
  }
  .related-da {
    font-size: 16px;
  }
  .breadcrumb a {
    font-size: 18px;
  }
  .breadcrumb_last {
    font-size: 17px;
  }
  .commenttitle, .comment-num a {
    font-size: 24px;
  }
  .comment-list li p {
    line-height: 29px;
  }
  .comment-list li {
    font-size: 18px;
  }
  #reply-title {
    font-size: 20px;
  }
  #aramplayer .audioplayer-item-title {
    font-size: 16px;
  }
  #aramplayer .audioplayer-item-buy, #aramplayer .audioplayer-item-addplist, #aramplayer .audioplayer-item-removeplist, #aramplayer .audioplayer-item-dl {
    font-size: 22px;
  }
  #aramplayer .audioplayer-volume-button:before, #aramplayer .audioplayer-prev:before, #aramplayer .audioplayer-loop:before, #aramplayer .audioplayer-next:before, #aramplayer .audioplayer-stop:before, #aramplayer .audioplayer-pause:before, #aramplayer .audioplayer-play:before {
    font-size: 32px;
    padding: 5px 10px;
  }
  #aramplayer .audioplayer-item-info {
    font-size: 16px;
  }
  #aramplayer .audioplayer-time {
    font-size: 16px;
    padding-right: 22px;
  }
  .dlbox-Si-i {
    font-size: 28px !important;
  }
  .Fav-List {
    margin-left: 15px;
  }
  .Fav-List-title {
    margin-top: 20px;
    font-size: 16px;
  }
  .dlboxnew li a, .dlboxnew-shop li a {
    font-size: 18px;
    line-height: 1.8;
  }
  .dlboxnew-shop {
    min-width: 500px;
  }
  .dlboxnew {
    min-width: 400px;
  }
  .audioplayer-item-dl a {
    font-size: 18px;
  }
  .dldrop .dldrop-links {
    width: 190px;
  }
  #aramplayer .audioplayer-track-item .audioplayer-item-dl a {
    font-size: 18px;
  }
}
@media screen and (max-width:1200px) {
.c-search {
    width: 400px;
}
  .modal-sm {
    max-width: 300px;
    margin: 1.75rem auto;
  }
  .sidearea img {
    width: 100%;
  }
  .postbox-ads img {
    width: 100%;
  }
  .tilexs img, .sidearea-ads img {
    width: 100%;
    height: 260px;
  }
  .postbox img {
    width: 50%;
    height: 50%;
    margin-left: 17px;
  }
  .lform textarea {
    float: none;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 10px;
  }
  .rform {
    float: none;
    width: 100%;
    margin-top: 0px;
  }
  .commentforms-submit {
    width: 100%;
    margin-top: 2px;
  }
}
@media screen and (max-width:1366px) {
  .AL-Si {
    font-size: 34px;
    display: block;
    direction: ltr;
    overflow: hidden;
    margin-top: 5px;
    line-height: 1.2;
    letter-spacing: -0.8px;
    font-weight: 800;
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(2 * 1.2em);
    overflow: hidden;
    position: relative;
  }
  section.posting.col-lg-3 {
    width: 25%;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  section.posting.col-md-2 {
    width: 19.66666667%;
  }
  div.tab {
    font: normal 10px iranyekan;
    padding: 5px 2px;
    margin-left: 3px;
  }
  .tab-pane ul li h4 {
    margin: 5px 0;
    display: block;
    line-height: 17px;
    text-align: justify;
    font-size: 11px;
    font-weight: 400;
  }
}
@media screen and (max-width:992px) {
.commentarea {
    margin-bottom: 15px;
}
.artist-header {
	margin-bottom:10px;
}
.artist-details h6 {
	    text-align: center;
}
.artist-details {
    margin-top: 5px;
    float: right;
    text-align: center;
}
.artist-img {
    float: none;
    text-align: center;
}
.artist-img img {
	margin-right: 0px;
}
.h3-artist p {
    margin-top: 5px;
}
 .related-al-TOP {
    font-size: 14px;
    margin-bottom: 0;
  }
  .sidebox-top {
    margin-top: 0;
    margin-bottom: 95px;
  }
  .tab-pane ul li {
    display: block;
    padding-left: 10px;
    flex-direction: row-reverse;
  }
  .tab-pane img {
    height: auto;
    width: 100%;
    opacity: 1;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  .tab-pane ul {
    list-style: none;
    margin-top: 10px;
    display: flex;
    direction: rtl;
    overflow-y: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-left: 10%;
    overflow-x: scroll;
  }
  .titlezone a, .titlezone-i a, .titlezone-s a {
    display: block;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  .titlezone-s {
    font-size: 14px;
    font-weight: 600;
  }
  .related-al-mood a {
    color: #fff;
    padding-top: 5px;
    font-size: 14px;
    font-weight: 500;
    max-height: 37.5px;
    height: auto;
    text-align: left;
    direction: ltr;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
  }
  .related_posts ul {
    flex-wrap: nowrap;
    overflow-x: scroll;
  }
  .postinfo-i2-s {
    width: 180px;
  }
.related-sc {
    display: flex;
    overflow-x: scroll;
    direction: rtl;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    padding-left: 10%;
  }
  .AL-Si {
    white-space: normal;
  }
  .form-reg-dt h4 {
    margin: 20px 30px;
    font-size: 20px;
  }
  .sidearea img {
    width: 100%;
  }
  .postbox img {
    width: 51%;
    height: 51%;
    margin-left: 2%;
    height: 354px;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  section.posting.col-md-2 {
    width: 24.66666667%;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .related_posts ul li.col-sm-3 {
    width: 33.333%;
  }
  section.posting.col-sm-2 {
    width: 33.333%;
  }
}
@media screen and (max-width:768px) {
 .Fav-List {
    margin-left: 5px;
  }
  .AL-Si {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 0;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .postbox-single {
    box-shadow: none;
  }
  .slider-t {
    width: 400px
  }
  .social a {
    padding-right: 5px;
  }
  .postbox img {
    width: 51%;
    height: 51%;
    margin-left: 2%;
    height: 354px;
  }
  .dlbox-Si ul li a {
    padding: 15px 2%;
  }
  .posting.col-xs-6 {
    width: 43%;
    padding-right: 5px;
    padding-left: 5px;
  }
  .titlezone-i h3 {
    display: none;
  }
  .T-N-T-Si {
    position: initial;
  }
}
@media (min-width: 345px) and (max-width: 576px) {
  .T-N-T-Si {
    margin-top: 0px;
  }
}
@media (min-width: 345px) and (max-width: 768px) {
  figure.pic-s.col-xs-12 {
    width: 50%;
  }
  .T-N-T-Si {
    margin-top: 10px;
  }
}
@media (min-width: 531px) and (max-width: 768px) {
  span.category-details.col-xs-12 {
    width: 70%;
  }
}
@media (max-width: 530px) {
  .category-img {
    text-align: center;
    float: none;
  }
}
@media screen and (max-width:480px) {
.artist-details h2 {
	margin-top: 5px;
}
.Fav-List-title {
    margin-left: 0;
}
.category-details h2, .tag-details h2 {
    letter-spacing: -1.2px;
    line-height: 1.4;
    margin-top: 0;
  }
  .category-details {
    text-align: center;
  }
  #aramplayer .audioplayer-progress-played::after {
    top: -20px !important;
  }
  .mypaylistname {
    font-size: 30px;
  }
.dlbox-Si-i {
  margin-right: 5px !important;
} 
  .dlbox-Si {
    margin-left: 3px;
  }
  #aramplayer .audioplayer-time {
    margin: 10px 25px 0 5px !important;
  }
  .genre-Si {
    font-size: 13px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
.mood-Si {
    font-size: 13px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
.instrument-Si {
    font-size: 13px;
    margin-bottom: 5px;
  }
  #aramplayer .audioplayer-tracklist-container {
    max-height: none !important;
  }
  .cm-content {
    padding-top: 2px;
  }
  .slider-t {
    width: 300px
  }
  .category-details {
    margin-top: 10px;
  }
  .rate-Si {
    font-size: 10px;
  }
  .T-N-T-Si {
    font-size: 12px;
    margin-top: 10px;
  }
  .AL-Si {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 0;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: -0.4px;
  }
  .AR-Si {
    font-size: 14px;
  }
  .Da-Si {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .posting.col-xs-6 {
    width: 50%;
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
  .wp-pagenavi a {
    padding: 6px 16px;
  }
  .text {
    font-size: 8px;
    padding: 5%;
  }
  .dllink {
    background: #1a1a1a;
    padding: 6px;
    font-size: 14px;
    color: #fff;
  }
  .titlezone-i h3 {
    font-size: 16px;
    padding: 5px;
  }
  .rpwwt-post-title {
    font-size: 14px;
    display: block;
  }
  .relatedthumb img {
    margin: 0 0 1px 0;
    padding: 0;
  }
  .widgetcontent-polls ul li a {
    margin: 5px 100px;
  }
  .dlbox-Si ul li a {
    padding: 15px 2%;
  }
}
@media screen and (max-width:320px) {
  #aramplayer .audioplayer-time {
    margin: 6px 10px 0 0 !important;
    font-size: 12px;
  }
  .mainlogo img {
    width: 150px;
    height: auto;
    margin-top: 5px;
  }
  .T-N-T-Si {
    font-size: 12px;
    letter-spacing: -0.4px;
  }
  .Da-Si {
    font-size: 11px;
    margin-bottom: 5px;
    letter-spacing: -0.4px;
  }
  .AL-Si {
    font-size: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    letter-spacing: -0.6px;
  }
}

.ss-search-disabled-page {
  padding-top: 24px;
  padding-bottom: 24px;
}

.ss-search-disabled-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
}

.ss-search-disabled-card__icon {
  margin-bottom: 14px;
  color: #d7b14a;
  font-size: 38px;
  line-height: 1;
}

.ss-search-disabled-card__title {
  margin: 0 0 10px;
  color: #fff;
  font: 700 22px/1.6 iranyekan;
}

.ss-search-disabled-card__text {
  margin: 0;
  color: #b7b7b7;
  font: 500 14px/1.9 iranyekan;
}

/* Playlist moods: abstract category cards with stable per-card color and shared soft glow. */
.ss-playlist-moods .ss-playlist-mood-card {
  --mood-fill: #8a4f08;
  --mood-tint: #b06d14;
  --mood-glow-a: 18% 32%;
  --mood-glow-b: 86% 18%;
  --mood-glow-c: 68% 116%;
  display: block;
  flex: 0 0 clamp(174px, 18vw, 254px);
  width: clamp(174px, 18vw, 254px);
  min-width: 174px;
  aspect-ratio: 2.44 / 1;
  margin: 10px 0 12px 12px;
  overflow: hidden;
  border-radius: 13px;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, var(--mood-fill), var(--mood-tint));
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
  opacity: 1;
  white-space: normal;
  transition: transform .22s ease, filter .22s ease;
}

.ss-playlist-moods .ss-playlist-mood-card:hover,
.ss-playlist-moods .ss-playlist-mood-card:focus {
  opacity: 1;
  filter: brightness(1.07);
  transform: translateY(-2px);
}

.ss-playlist-mood-card__pattern,
.ss-playlist-mood-card__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ss-playlist-mood-card__pattern {
  z-index: 1;
  background:
    radial-gradient(ellipse 92% 138% at var(--mood-glow-a), rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .13) 34%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 74% 118% at var(--mood-glow-b), rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .07) 36%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(ellipse 96% 132% at var(--mood-glow-c), rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .07) 38%, rgba(0, 0, 0, 0) 76%);
  opacity: .78;
}

.ss-playlist-mood-card__shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .08) 38%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(10, 10, 10, 0) 8%, rgba(10, 10, 10, .28) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 46%);
}

.ss-playlist-mood-card__content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 18px 20px;
  background: transparent;
  box-sizing: border-box;
  white-space: normal;
}

.ss-playlist-mood-card__title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  direction: rtl;
  text-align: right;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(19px, 1.2vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--1 {
  --mood-fill: #9b5b05;
  --mood-tint: #bd7915;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--2 {
  --mood-fill: #8b2f38;
  --mood-tint: #7a496e;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--3 {
  --mood-fill: #655c30;
  --mood-tint: #8c8148;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--4 {
  --mood-fill: #7b6340;
  --mood-tint: #a18556;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--5 {
  --mood-fill: #3c6f83;
  --mood-tint: #4d88a5;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--6 {
  --mood-fill: #3d3b40;
  --mood-tint: #5a565f;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--7 {
  --mood-fill: #314f49;
  --mood-tint: #5b8272;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--8 {
  --mood-fill: #705a20;
  --mood-tint: #a28f35;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--9 {
  --mood-fill: #6e4d31;
  --mood-tint: #9b7251;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--10 {
  --mood-fill: #263a64;
  --mood-tint: #405f8d;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--11 {
  --mood-fill: #58605b;
  --mood-tint: #7f8a7d;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--12 {
  --mood-fill: #7a3a25;
  --mood-tint: #ad5f3f;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--13 {
  --mood-fill: #4e346d;
  --mood-tint: #7b5097;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--14 {
  --mood-fill: #243f32;
  --mood-tint: #55765c;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--15 {
  --mood-fill: #5a3f75;
  --mood-tint: #8c62a1;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--16 {
  --mood-fill: #2f5171;
  --mood-tint: #6d8fa8;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--17 {
  --mood-fill: #8f3d4d;
  --mood-tint: #bb6d82;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--18 {
  --mood-fill: #336151;
  --mood-tint: #78a076;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--19 {
  --mood-fill: #70602e;
  --mood-tint: #b49a4c;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--20 {
  --mood-fill: #466c6a;
  --mood-tint: #7aa4a0;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--21 {
  --mood-fill: #6d335c;
  --mood-tint: #9e5f8a;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--22 {
  --mood-fill: #414141;
  --mood-tint: #282828;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--23 {
  --mood-fill: #3e5c90;
  --mood-tint: #315b78;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--24 {
  --mood-fill: #8a5636;
  --mood-tint: #c18952;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--25 {
  --mood-fill: #57603a;
  --mood-tint: #8e9859;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--26 {
  --mood-fill: #954953;
  --mood-tint: #723b7b;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--27 {
  --mood-fill: #2d4b45;
  --mood-tint: #2e7770;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--28 {
  --mood-fill: #574676;
  --mood-tint: #6b74a8;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--29 {
  --mood-fill: #5b4b35;
  --mood-tint: #99866c;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--30 {
  --mood-fill: #254c62;
  --mood-tint: #4d7397;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--1,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--7,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--13,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--19,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--25 {
  --mood-glow-a: 14% 28%;
  --mood-glow-b: 82% 12%;
  --mood-glow-c: 74% 118%;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--2,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--8,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--14,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--20,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--26 {
  --mood-glow-a: 22% 78%;
  --mood-glow-b: 88% 20%;
  --mood-glow-c: 58% 116%;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--3,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--9,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--15,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--21,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--27 {
  --mood-glow-a: 18% 22%;
  --mood-glow-b: 76% 74%;
  --mood-glow-c: 48% 120%;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--4,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--10,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--16,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--22,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--28 {
  --mood-glow-a: 26% 52%;
  --mood-glow-b: 90% 16%;
  --mood-glow-c: 70% 118%;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--5,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--11,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--17,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--23,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--29 {
  --mood-glow-a: 16% 70%;
  --mood-glow-b: 84% 18%;
  --mood-glow-c: 54% 116%;
}

[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--6,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--12,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--18,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--24,
[data-ss-drag-rail="playlist-moods"] .ss-playlist-mood-card--30 {
  --mood-glow-a: 20% 26%;
  --mood-glow-b: 72% 68%;
  --mood-glow-c: 82% 120%;
}

@media screen and (max-width: 640px) {
  .ss-playlist-moods .ss-playlist-mood-card {
    flex-basis: 168px;
    width: 168px;
    min-width: 168px;
    border-radius: 12px;
  }

  .ss-playlist-mood-card__content {
    padding: 15px 16px;
  }

}

@media (max-width: 767.98px) {
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  select,
  textarea {
    font-size: 16px !important;
  }
}
/* Shared playlist placeholder tiles */
.ss-my-music-card__tile--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.52);
}
.ss-my-music-card__tile--placeholder i {
  font-size: 34px;
  line-height: 1;
}