:root {
    --black: #000;
    --white: #fff;
    --main-text-stroke: #fff;
    --text-primary: #fff;
    --text-secondary: hsla(0, 0%, 100%, 0.5);
    --layout-bg: #170f23;
    --layout-header-bg: rgba(23, 15, 35, 0.8);
    --sidebar-bg: hsla(0, 0%, 100%, 0.05);
    --player-bg: #130c1c;
    --sidebar-popup-bg: #2a213a;
    --primary-bg: #34224f;
    --gradient-latest-section-artist: linear-gradient(286.07deg, rgba(23, 15, 35, 0.95) 55.21%, rgba(23, 15, 35, 0.6));
    --alpha-layout-bg: rgba(41, 21, 71, 0.8);
    --alpha-bg: hsla(0, 0%, 100%, 0.1);
    --queue-player-popup-bg: #120822;
    --blur-queue-bg: rgba(30, 21, 47, 0.9019607843137255);
    --purple-primary: #9b4de0;
    --link-text-hover: #429eff;
    --chart-bg-img-alpha: rgba(32, 19, 53, 0.9);
    --search-text: #eeeeeec0;
    --text-placeholder: #dadada;
    --navigation-text: #dadada;
    --sticky-header-box-shadow: rgba(0, 0, 0, 0.1);
    --portal-menu-box-shadow: rgba(0, 0, 0, 0.2);
    --footer-color: #391e3e;
    --border-primary: hsla(0, 0%, 100%, 0.1);
    --text-item-hover: #fff;
    --scroll-thumb-bg: hsla(0, 0%, 100%, 0.3);
    --padding-section: 59px;
    --loading-bg: hsla(0, 0%, 100%, 0.1);
    --setting-icon-text: #d8d8d8;
    --border-player: hsla(0, 0%, 100%, 0.1);
    --player-text: #fff;
    --dark-alpha-10: rgba(0, 0, 0, 0.1);
    --dark-alpha-50: rgba(0, 0, 0, 0.5);
    --dark-alpha-80: rgba(0, 0, 0, 0.8);
    --song-item-action: hsla(0, 0%, 100%, 0.5);
    --progressbar-active-bg: #FFF;
    --progressbar-player-bg: hsla(0, 0%, 100%, 0.3);
    --new-release-box-shadow: none;
    --box-item-bg: hsla(0, 0%, 100%, 0.1);
    --img-logo-mp3: url(https://zmp3-static.zmdcdn.me/skins/zmp3-v6.1/images/backgrounds/logo-dark.svg);
    --hover-tooltip-opacity: hsla(0, 0%, 100%, 0.3);
}

div,
p {
    word-break: break-word;
}

img,
video {
    height: auto;
    width: 100%;
}

a {
    cursor: pointer;
    color: inherit;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
}

a,
a.active,
a:hover {
    text-decoration: none;
}

a.active,
a:hover {
    color: var(--link-text-hover);
}

input {
    background-color: transparent;
    outline: none;
    border: none;
    font: inherit;
}

figure {
    margin: 0;
    padding: 0;
    background-color: var(--loading-bg);
}

button {
    font: inherit;
    color: inherit;
    background-color: transparent;
    word-break: normal;
}

h3 {
    font-size: 100%;
    font-weight: 400;
}

.icon {
    line-height: 66%;
    display: inline-block;
}

main.zm-section::-webkit-scrollbar,
.sidebar-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: .3;
    cursor: none;
}

.is-6 {}

.is-18x18 {
    width: 18px;
    height: 18px;
}

.is-38x38 {
    width: 38px;
    height: 38px;
}

.is-40x40 {
    width: 40px;
    height: 40%;
}

.is-48x48 {}


.is-50x50 {
    width: 50px;
    height: 50px;
}

.is-60x60 {
    width: 60px;
    height: 60px;
}

.is-120x120 {
    width: 120px;
    height: 120px;
}

.is-rounded {
    overflow: hidden;
    border-radius: 999px !important;
}

.columns {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 -16px;
}

.column {
    display: block;
    flex-shrink: 1;
    padding: 0 15px;
}

.mar-b-0 {
    margin-bottom: 0 !important;
}

.mar-b-5 {
    margin-bottom: 5px !important;
}

.mar-t-15 {
    margin-top: 15px !important;
}

.mar-r-15 {
    margin-right: 15px !important;
}

.mar-b-30 {
    margin-bottom: 30px !important;
}

.level-item {
    align-items: center;
    display: flex;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
}

.is-desktop-1,
.is-desktop-1\.0,
.is-desktop-1\.1,
.is-desktop-1\.4,
.is-desktop-2,
.is-desktop-3,
.is-desktop-4,
.is-desktop-5,
.is-desktop-6,
.is-desktop-7,
.is-desktop-8,
.is-desktop-9,
.is-desktop-10,
.is-desktop-11,
.is-desktop-12,
.is-desktop-12-5,
.is-desktop-20,
.is-desktop-40,
.is-desktop-60,
.is-desktop-80,
.is-fullhd-1,
.is-fullhd-1\.0,
.is-fullhd-1\.1,
.is-fullhd-1\.4,
.is-fullhd-2,
.is-fullhd-3,
.is-fullhd-4,
.is-fullhd-5,
.is-fullhd-6,
.is-fullhd-7,
.is-fullhd-8,
.is-fullhd-9,
.is-fullhd-10,
.is-fullhd-11,
.is-fullhd-12,
.is-fullhd-12-5,
.is-fullhd-20,
.is-fullhd-40,
.is-fullhd-60,
.is-fullhd-80,
.is-tablet-1,
.is-tablet-1\.0,
.is-tablet-1\.1,
.is-tablet-1\.4,
.is-tablet-2,
.is-tablet-3,
.is-tablet-4,
.is-tablet-5,
.is-tablet-6,
.is-tablet-7,
.is-tablet-8,
.is-tablet-9,
.is-tablet-10,
.is-tablet-11,
.is-tablet-12,
.is-tablet-12-5,
.is-tablet-20,
.is-tablet-40,
.is-tablet-60,
.is-tablet-80,
.is-touch-1,
.is-touch-1\.0,
.is-touch-1\.1,
.is-touch-1\.4,
.is-touch-2,
.is-touch-3,
.is-touch-4,
.is-touch-5,
.is-touch-6,
.is-touch-7,
.is-touch-8,
.is-touch-9,
.is-touch-10,
.is-touch-11,
.is-touch-12,
.is-touch-12-5,
.is-touch-20,
.is-touch-40,
.is-touch-60,
.is-touch-80,
.is-widescreen-1,
.is-widescreen-1\.0,
.is-widescreen-1\.1,
.is-widescreen-1\.4,
.is-widescreen-2,
.is-widescreen-3,
.is-widescreen-4,
.is-widescreen-5,
.is-widescreen-6,
.is-widescreen-7,
.is-widescreen-8,
.is-widescreen-9,
.is-widescreen-10,
.is-widescreen-11,
.is-widescreen-12,
.is-widescreen-12-5,
.is-widescreen-20,
.is-widescreen-40,
.is-widescreen-60,
.is-widescreen-80 {
    position: relative;
    min-height: 1px;
    padding-left: 14px;
    padding-right: 14px;
    float: left;
    flex-shrink: 0;
}

.is-fullhd-1\.4 {
    width: 14.28571%;
}

.is-fullhd-3 {
    width: 25%;
}

.is-fullhd-4 {
    width: 33.33333%;
}

.is-fullhd-20 {
    width: 20%;
}

.is-fullhd-8 {
    width: 66.66667%;
}

.add-padding {
    padding: 0 4px;
}

.add-hidden-text {
    position: relative;
}

.hidden-desc {
    font-size: 12px;
    background-color: hsla(0, 0%, 100%, .1);
    text-align: center;
    color: #eeeeeec2;
    padding: 3px 6px;
    border-radius: 5px;
    position: absolute;
    top: -25px;
    display: none;
    line-height: 12px;
    width: 50px;
    height: 18px;
}

.hidden-desc::after {
    content: "";
    border-width: 7px 7px;
    border-style: solid;
    border-color: hsla(0, 0%, 100%, .1) transparent transparent transparent;
    position: absolute;
}

.hidden-desc.mv::after {
    right: 17px;
    top: 18px;
}

.hidden-desc.lyrics::after {
    right: 18px;
    top: 18px;
}

.hidden-desc.mode::after {
    right: 19px;
    top: 18px;
}

.add-hidden-text:hover .hidden-desc {
    display: block;
}

.setting-text-hidden {
    border-radius: 5px;
    display: none;
    position: absolute;
    top: 54px;
    right: -8px;
    font-size: 12px;
    color: #eeeeeec1;
    padding: 3px 6px;
    background-color: hsla(0, 0%, 100%, .1);
}

.setting-text-hidden::before {
    content: "";
    border-width: 7px 7px;
    border-style: solid;
    border-color: transparent transparent hsla(0, 0%, 100%, .1) transparent;
    position: absolute;
    bottom: 24px;
    right: 20px;
}

.setting-item:hover .setting-text-hidden {
    display: block;
}

#btn-volume,
#progress {
    cursor: pointer;
    accent-color: #e2e2e2;
}

.zm-play {
    display: block;
}

.zm-pause {
    display: none;
}

.repeat-loop {
    display: none;
    position: absolute;
    right: -2px;
    top: 3px;
    font-size: 11px;
    background-color: hsla(0, 0%, 100%, .1);
    padding: 6px 3.5px;
    border-radius: 50%;
}

.channel-section {
    margin-top: 48px;
}

.pad-0 {
    padding: 0 !important;
}

.is-hidden {
    visibility: hidden;
    opacity: 0;
    user-select: none;
    pointer-events: none;
}

.is-center {
    display: flex;
    align-self: center;
    justify-content: center;
    align-items: center;
}

.zm-actions .icon {
    color: var(--white);
}

.icon.ic-my-upload,
.icon.ic-svg-checked,
.icon.ic-svg-close,
.icon.ic-svg-close-white,
.icon.ic-svg-dics-music-icon,
.icon.ic-svg-music-icon,
.icon.ic-svg-pause-outline,
.icon.ic-svg-play,
.icon.ic-svg-play-block,
.icon.ic-svg-play-circle,
.icon.ic-svg-play-outline,
.icon.ic-svg-video-icon,
.icon.ic-svg-vip-account,
.icon.ic-svg-zing-choice {
    shape-rendering: optimizeSpeed;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: contain;
}

.icon.ic-svg-play-circle {
    background-image: url(https://zjs.zmdcdn.me/zmp3-desktop/releases/v1.9.55/static/media/play.81e7696e.svg);
}

.zm-actions.artist-actions .icon.action-play,
.zm-actions.playlist-actions .icon.action-play,
.zm-actions.video-actions .icon.action-play {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 50%;
}

.title-wrapper .title {
    line-height: 1.3;
    text-transform: none;
}

.zm-card-image:hover {
    cursor: pointer;
}

.is-ghost:hover {
    text-decoration: underline;
}

.media-item.active .opacity,
.media-item.active .zm-actions,
.media-item.focus .opacity,
.media-item.focus .zm-actions,
.media-item:hover .opacity,
.media-item:hover .zm-actions {
    visibility: visible;
}

.rt-chart-home .rt-chart-song-item a {
    color: hsla(0, 0%, 100%, .5);
}

.playist-wrapper .nav-btn {
    line-height: 0;
}

.playist-wrapper .zm-tooltip-btn .icon {
    font-size: 20px;
    padding: 10px 7px;
    border-radius: 50%;
}

.is-normal {
    line-height: normal;
}

.zm-actions.artist-actions .icon.action-play,
.zm-actions.playist-actions .icon.action-play,
.zm-actions.video-actions .icon.action-play {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 50%;
}

.zm-actions .zm-tooltip-btn:hover {
    background-color: var(--hover-tooltip-opacity);
}

.media-item .media-right .is-hover-circle:hover {
    background-color: var(--alpha-bg);
    border-radius: 50%;
}

.media .subtitle .indicator {
    margin-right: 5px;
    font-size: 6px;
}

.media .subtitle .indicator:first-child {
    margin-left: 2px;
}

.ic-explicit {
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    border-radius: 3px;
    padding: 1px 2px;
}

.card-info h3[id="circle-e"] {
    display: flex;
    align-items: center;
}

.list-item.is-vip {
    color: hsla(0, 0%, 100%, 0.5);
}