/* 
Datalife Engine template by Webrambo.ru, design by Test-templates.com, 
name: Miyzvuk.net , creation date: 12 may 2024 , version dle: 15 and higher
*/

:root {
	--bg: #fff; --bg-darker: #f9fafb; --bg-darker-1: #f2f4f8; 
	--bg-darker-2: #eef1f6; --bg-darkest: #c6cfd8; --bg-colored: #d6f8e4;
	--tt: #2f4036; --tt-fade: #717a85; --tt-fade-1: #99a0aa; 
	--tt-icon: #99a0aa; --tt-on-colored: #4a5e6c; --tt-fade-0: #5d6876;
	--accent: #38c16f; --accent-1: #38c19f;
	--bg-btn: #38c16f; --tt-btn: #fff; --bg-btn-hover: #38c19f;
	
	--bdc: #f1f1f1; --bdc-lighter: #f3f5f9; --bdc-darker: #e5eaf4; --bdc-darker-1: #dae0ec;
	--bsh-album: 0 0 29px rgba(0,0,0,0.08); --bsh-long: 0 0 65px rgba(0,0,0,0.23); 
	--bsh-track: 0 0 18px rgba(0,0,0,0.11);
	
	--ui-bg: #fff; --ui-bg-darker: #f6f6f8; --ui-bg-darkest: #e4e5e7; --ui-accent: #06c;
	--ui-bdc: #e7e7e7; --ui-tt-fade: #919698; --ui-fw-bolder: 400; --ui-fw-fa: normal;
	--ui-bsh: 0 12px 40px rgba(0,0,0,0.3); --ui-bsh-inset: inset 1px 2px 5px rgba(0,0,0,0.1); --ui-bdrs: 0;
	--ui-gradient: linear-gradient(to bottom, #5c4f68, #352d3c); --ui-bg-black: #352d3c;
	--ui-green: #65c03e; --ui-red: #eb4d4b; --ui-bg-attention: #FFF3E0; --ui-bd-attention: #FF9800;
	--indent-negative: -115px; --indent: 115px; 
}

/* RESET, BASIC UI SETTINGS
----------------------------------------------- */
* {background: none; margin: 0; padding: 0; outline: none; border: 0; box-sizing: border-box;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
img, table, iframe, video, frame, embed, object {max-width: 100%;}
body {font: 14px / 1.4 'Inter', sans-serif; font-weight: 400; 
	color: var(--tt); background-color: var(--bg); width: 100%;}
a {color: var(--tt); text-decoration: none;}
a:focus {color: var(--tt); text-decoration: none;}
h1, h2, h3, h4, h5 {font-weight: 400; font-size: 24px;}
::selection {background: #38c16f; color: #fff;}
b, strong, .bolder {font-weight: 600;}

button, select, textarea, input[type="text"], input[type="password"], input[type="button"], [type="reset"], input[type="submit"] 
{appearance: none; -webkit-appearance: none; font-size: 16px; font-family: inherit; font-weight: inherit;}
input[type="button"], input[type="submit"] {font-size: 14px; font-weight: 500;}
button, .btn, [type="button"], [type="reset"], [type="submit"], .pmessages__links a, .qq-upload-button, .plupload_button,  
.self_delete_link, .us2__soc-btn a {display: inline-flex; justify-content: center; align-items: center;  
	cursor: pointer; padding: 0 23px; height: 50px; white-space: nowrap; gap: 12px; border-radius: 15px;
	font-size: 14px; font-weight: 500; background-color: var(--bg-btn); color: var(--tt-btn);}
button:active, input[type="button"]:active, input[type="submit"]:active {box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);}
.color-btn, [class*=fr], [class*=plyr], [class*=owl-], [id*=mceu], [class*=tox-], .ui-dialog-titlebar-close {padding: 0; margin: 0; 
	line-height: 1.4; border: 0; box-shadow: none; background: none; border-radius: 0;}
.btn-without-bg {background: none; color: var(--tt); padding: 0; height: 40px; min-width: 40px; box-shadow: none;}
.btn-secondary, .dle-popup-complaint .ui-dialog-buttonset button:first-child:not(:hover), 
.dle-popup-sendpm .ui-dialog-buttonset button:first-child:not(:hover),
.dle-popup-userprofile .ui-dialog-buttonset button:not(:first-child,:hover), 
.dle-popup-confirm .ui-dialog-buttonset button:first-child:not(:hover), 
.dle-popup-promt .ui-dialog-buttonset button:first-child:not(:hover)
 {background-color: var(--ui-bg-darker); color: var(--ui-tt-fade);}

[type="text"], [type="password"] {height: 50px; line-height: 49px; padding: 0 20px;}
select {height: 50px; padding: 0 20px; display: block; font-size: 14px;}
select:not([multiple]) {background-image: url(../dleimages/chevron-down.svg); padding-right: 30px;
	background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 12px auto;}
select option {padding: 6px 10px;}
select[multiple] option {padding: 3px 10px;}
select[multiple] {padding: 9px 5px;}
textarea {padding: 15px; overflow: auto; vertical-align: top; resize: vertical;}
[type="text"], [type="password"], select, textarea {width: 100%; background-color: var(--ui-bg); color: var(--tt); 
	border: 1px solid var(--ui-bdc); box-shadow: none; border-radius: 6px;}
[type="text"]:focus, [type="password"]:focus, textarea:focus {border-color: var(--accent); box-shadow: 0 8px 10px rgba(56,193,111,0.1);}
input::placeholder, textarea::placeholder {color: var(--ui-tt-fade); opacity: 1; font-size: 14px;} 
input:focus::placeholder, textarea:focus::placeholder {color: transparent}


/* SNIPPETS
----------------------------------------------- */
.img-wide, .img-responsive, .img-fixed-size, .has-expanded-link, .p-relative {position: relative;}
.img-responsive {padding-top: 60%;}
.img-responsive > img, .img-fixed-size img {width: 100%; height: 100%; object-fit: cover; 
	border-radius: inherit; display: block;}
.img-responsive > img {position: absolute; left: 0; top: 0;}
.img-wide img, .img-wide > a {width: 100%; display: block;}
.clr {clear: both;}
.clearfix::after {content: ""; display: table; clear: both;}
.ws-nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
.line-clamp {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.vw100 {margin:0 calc((100% - 100vw)/2); padding:0 calc((100vw - 100%)/2);}
.img-mask::before {content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 66%; 
	background: linear-gradient(to top, #000 0%, transparent 100%); opacity: 0.6;}
.has-expanded-link__trg::before {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10;}
.ar-1-1 {aspect-ratio: 1 / 1;}

.d-flex {display: flex; flex-wrap: wrap; flex-direction: row;}
.fd-column {flex-direction: column; flex-wrap: nowrap;} 
.jc-space-between {justify-content: space-between;}
.jc-flex-start {justify-content: flex-start;}
.jc-center {justify-content: center;}
.jc-flex-end {justify-content: flex-end;}
.ai-flex-start {align-items: flex-start;}
.ai-center {align-items: center;}
.ai-flex-end {align-items: flex-end;}
.order-first {order: -1;}
.order-last {order: 10;}
.flex-grow-1, .ui-dialog-title, .ac-form__bottom .comments_subscribe {flex: 1 1 0; max-width: 100%; min-width: 50px;}
.flex-grow-1-column {flex: 1 0 min-content}
.pi-center {display: inline-grid; place-items: center;}
.ta-center {text-align: center;}
.gap-10 {gap: 10px;}
.grid-items, .content:has(> .playlist-item) {display: grid; gap: 20px; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); grid-auto-flow: row dense;}
.grid-items > *:not(.grid-item), .pagination {grid-column: 1 / -1;}

.hidden, .d-none, .full-text .quote + br, 
#category option:empty, .ui-helper-hidden-accessible:empty, #related_news:empty, #result-registration:empty, 
.info br, #fullsearch + form .mass_comments_action, .bb-sep, .bb-pane > .clr, #dofullsearch {display: none;} 
.login__social:has(.login__social-caption:last-child), .serv__social:has(.serv__subtitle:last-child) {display: none;}
.animated-element, [type="text"], [type="password"], button, .btn, a, .sb__menu a:hover::after, 
.video-item__img, .video-item__img::before, .artist-item__img, .artist-item__overlay, .artist-item__overlay::before, 
.artist-item__overlay span, .radio-item__title, .radio-item__desc, .radio-item__desc::before, .album-item, 
.trc, .trc::before, .lp-panel__social a img, .sb__menu a:hover::before, .header__lp-menu a::before, .lp-panel, 
.genres li::before, .genres li::after, .header__lp, .header__notification-list, .trc__time, .trc__ctrl, .sb__menu span, 
.genres li, .album2-item__img, .playlist-item__desc::before, .ctrl__list li::after, .ctrl__list li > span, 
.popular-item__img::before, .pl-item
{transition: color 0.3s, background-color 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s, 
	border-color 0.3s, left 0.3s, bottom 0.3s, width 0.3s, background-position 0.3s;}

@font-face {font-family: 'inter'; src: url('../webfonts/inter-300.woff2') format('woff2');
	font-weight: 300; font-style: normal; font-display: swap;}
@font-face {font-family: 'inter'; src: url('../webfonts/inter-400.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: 'inter'; src: url('../webfonts/inter-500.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: swap;}
@font-face {font-family: 'inter'; src: url('../webfonts/inter-600.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;}
@font-face {font-family: 'inter'; src: url('../webfonts/inter-700.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;}
@font-face {font-family: 'inter'; src: url('../webfonts/inter-800.woff2') format('woff2');
	font-weight: 800; font-style: normal; font-display: swap;}
	
@media (hover: hover) and (pointer: fine) {
	a:hover {color: var(--tt); text-decoration: none;}
	button:hover, .btn:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, 
	.pmessages__links a:hover, .qq-upload-button:hover, .us__btn a:hover, .plupload_button:hover, 
	#searchsuggestions span.seperator a:hover, .self_delete_link:hover, .page__actions > a:hover, 
    .us2__soc-btn a:hover, .page__dl:hover 
	{background-color: var(--bg-btn-hover); color: var(--tt-btn); border-color: var(--bg-btn-hover);}
	.btn-without-bg:hover {background: none; color: var(--tt); border-color: transparent; box-shadow: none;}
	.ui-dialog-titlebar-close:hover, .lp-panel__close:hover, .getreg__close:hover, 
	.header__lp-header > a:hover, .header__lp-header > button:hover {background-color: var(--ui-red); color: var(--tt-btn);}
	.xfieldimagegallery a:hover, .comments-image-gallery a:hover {opacity: 0.8;}
	.fs-result:hover {background-color: var(--ui-bg-darker);}
	
	.header__btn-pro--guest:hover {background-color: var(--bg-darker-2); color: var(--tt);}
	.sb__btn-toggle:hover, .trc__fav a:hover, .header__btn-theme:hover, .header__btn-notification:hover, 
	.header__lp-menu a:hover::before, .sb__menu a:hover::before, .search-block__btn-clear:hover, 
	.trc__ctrl-btn:hover, .player__btn:hover, .search-block__btn:hover {color: var(--accent); background: none;}
	.sb__menu a:hover {color: var(--tt);}
	.sb__menu a:hover::after, .trc:hover .trc__ctrl, .ctrl__list li:hover::after {opacity: 1; transform: scale(1,1);}
	.trc:hover .trc__time {opacity: 0; transform: scale(0.5,0.5);}
	.sb__menu-years a:hover, .sb__menu-years button:hover {background-color: var(--bg-darkest); color: var(--tt);}
	.footer__menu a:hover, .header__login-short:hover .header__login-name, .video-item__desc:hover, 
	.popular-item__desc:hover, .speedbar a:hover, .getreg__later:hover {color: var(--accent); text-decoration: underline;}
	.footer__apps a:hover, .sect__link:hover, .video-item__btn:hover, .lp-panel__social a:hover, 
	.sect__menu a:hover, .pagination a:hover, .sect__tabs li:hover, .us2__set-sect-title:hover::before, 
	.page-video__like a:hover, .sect-tabs a:hover, .page__pl a:hover {background-color: var(--accent); color: #fff; border-color: var(--accent);}
	.mybnr-tlg:hover, .mybnr:hover, .mybnr-stream:hover, .mybnr2:hover {filter: saturate(150%); box-shadow: inset 0 0 30px rgba(0,0,0,0.2);}
	.sect__btn:hover, .header__lp-menu a:hover {background-color: var(--bg-colored); color: var(--tt);}
	.sect__link--accent:hover {background-color: #38c19f;}
	.col2 .sb__menu a:hover span {opacity: 1; visibility: visible; transform: translateX(0px);}
	.ctrl__list li:hover > a, .ctrl__list li:hover > span {background-color: var(--bg-darker);}

	.genres li:hover::before, .genres li:hover::after {right: 10%; bottom: 10%; width: 80%; }
	.genres li:hover::before {transform: translate(0%,0%) scale(0.8,0.8);}
	.genres li:hover a {animation: genre-in 0.6s 1 ease; animation-fill-mode: forwards;}
	.genres li a {animation: genre-out 0.6s 1 ease; animation-fill-mode: forwards;}
	.genres li:hover a::before {display: none;}
	.genres li:hover {box-shadow: 0 0 27px var(--accent); background-position: left -100% bottom 65px;}
	.genres li:nth-child(6n+2):hover, .genres .owl-item:nth-child(6n+2) li:hover {box-shadow: 0 0 27px #37b8d8;}
	.genres li:nth-child(6n+3):hover, .genres .owl-item:nth-child(6n+3) li:hover {box-shadow: 0 0 27px #b642ec;}
	.genres li:nth-child(6n+4):hover, .genres .owl-item:nth-child(6n+4) li:hover {box-shadow: 0 0 27px #ff8f3c;}
	.genres li:nth-child(6n+5):hover, .genres .owl-item:nth-child(6n+5) li:hover {box-shadow: 0 0 27px #d65092;}
	.genres li:nth-child(6n+6):hover, .genres .owl-item:nth-child(6n+6) li:hover {box-shadow: 0 0 27px #3675c2;}
	
	.trc:hover {border-color: transparent;}
	.trc:hover::before, .trc:hover .trc__play {opacity: 1; transform: scale(1,1);}
	.video-item__img:hover, .artist-item:hover .artist-item__img, .album-item:hover, 
	.album2-item:hover .album2-item__img {box-shadow: 0 0 27px var(--accent);}
	.video-item__img.has-icon2:hover::before, .playlist-item:hover .playlist-item__desc::before, 
	.popular-item__img:hover::before {opacity: 1; transform: translate(-50%,-50%) scale(1,1);}
	.playlist-item:hover .playlist-item__desc {animation: playlist-in 0.6s 1 ease; animation-fill-mode: forwards;}
	.playlist-item__desc {animation: playlist-out 0.6s 1 ease; animation-fill-mode: forwards;}
	.ctrl__list li:hover .ctrl__list {display: block;}
	
	.artist-item:hover .artist-item__overlay, .radio-item:hover .radio-item__desc {opacity: 1; transform: scale(1,1);}
	.artist-item:hover .artist-item__overlay span, .radio-item:hover .radio-item__title {opacity: 1; transform: translateY(0px); transition-delay: 0.4s;}
	.artist-item:hover .artist-item__overlay::before, .radio-item:hover .radio-item__desc::before {transform: scale(1,1) translateY(0px); opacity: 1; transition-delay: 0.2s;}
}

* {scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-darker-1);}
::-webkit-scrollbar {width: 10px; height: 10px; background-color:var(--bg-darker-1);}
::-webkit-scrollbar-thumb {border-radius: 5px; background-color:var(--accent); border: 0;}
::-webkit-scrollbar-track {background-color:var(--bg-darker-1); border-radius: 2px;}
* {scrollbar-color: #38c16f #f2f4f8; scrollbar-width: thin;}
html:has(.dt), .dt *, .dt {scrollbar-color: #38c16f #232e3b;}

@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}
50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}
@keyframes genre-in {
	0% {opacity: 1;} 50% {transform: scale(0.5,0.5); opacity: 0;} 51% {transform: translate(0%,100%); } 
	100% {transform: translate(0%,-0%); align-items: center; justify-content: center; text-align: center}
}
@keyframes genre-out {
	0% {align-items: center; justify-content: center; text-align: center}
 	50% {transform: scale(0.5,0.5); opacity: 0;} 51% {transform: translate(-100%,0); } 
	100% {transform: translate(0%,-0%);}
}
@keyframes playlist-in {
	0% {transform: translate(0,0) scale(1,1);}
	50% {transform: translate(0,100%) scale(1,1); opacity: 1; background-color: rgba(0,0,0,0.0); padding: 30px; padding-left: 40%; justify-content: flex-end; text-align: left;}
	51% {transform: translate(0,0) scale(0.5,0.5); opacity: 0; background-color: rgba(0,0,0,0.63); padding: 15px; justify-content: space-between; text-align: center;}
	100% {transform: translate(0,0) scale(1,1); opacity: 1; background-color: rgba(0,0,0,0.63); padding: 15px; justify-content: space-between; text-align: center;}
}
@keyframes playlist-out {
	0% {transform: translate(0,0) scale(1,1); opacity: 1; background-color: rgba(0,0,0,0.63); padding: 15px; justify-content: space-between; text-align: center;}
	50% {transform: translate(0,0) scale(0.5,0.5); opacity: 0; background-color: rgba(0,0,0,0.63); padding: 15px; justify-content: space-between; text-align: center;}
	51% {transform: translate(0,100%) scale(1,1); opacity: 1; background-color: rgba(0,0,0,0); padding: 30px; padding-left: 40%; justify-content: flex-end; text-align: left;}
	100% {transform: translate(0,0) scale(1,1); opacity: 1; background-color: rgba(0,0,0,0); padding: 30px; padding-left: 40%; justify-content: flex-end; text-align: left;}
}
@keyframes live {
	0% {box-shadow: 0 0 0 0px rgb(255,99,171,0.13)}; 50%{box-shadow: 0 0 0 8px rgb(255,99,171,0.15)};
	100% {box-shadow: 0 0 0 16px rgb(255,99,171,0.0);}
}
.body-preload .genre li a, .body-preload .playlist-item__desc {animation-duration: 0s;}

@font-face {font-family: 'ft-custom'; src: url('../webfonts/ft-custom.woff?z68rnk') format('woff');
	font-weight: 400; font-style: normal; font-display: swap;}
.has-icon2::before {font-family: 'ft-custom' !important; font-style: normal; font-weight: normal;
	font-variant: normal; text-transform: none; line-height: 1;}
.icon-spin {animation:fa-spin 2s infinite linear;}
@keyframes fa-spin { 0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)} }
  
.icon2-x:before {content: "\e91a";}
.icon2-facebook-f:before {content: "\e914";}
.icon2-odnoklassniki:before {content: "\e915";}
.icon2-skype:before {content: "\e916";}
.icon2-viber:before {content: "\e917";}
.icon2-vk:before {content: "\e918";}
.icon2-whatsapp:before {content: "\e919";}
.icon2-radio:before {content: "\e900";}
.icon2-shuffle:before {content: "\e901";}
.icon2-repeat:before {content: "\e902";}
.icon2-previous:before {content: "\e903";}
.icon2-play:before {content: "\e904";}
.icon2-pause:before {content: "\e905";}
.icon2-next-button:before {content: "\e906";}
.icon2-music-and-multimeda:before {content: "\e907";}
.icon2-audio-waves:before {content: "\e908";}
.icon2-windows:before {content: "\e909";}
.icon2-telegram:before {content: "\e90a";}
.icon2-play-button-arrowhead:before {content: "\e90b";}
.icon2-like1:before {content: "\e90c";}
.icon2-like:before {content: "\e90d";}
.icon2-google-play:before {content: "\e90e";}
.icon2-google:before {content: "\e90f";}
.icon2-facebook-logo:before {content: "\e910";}
.icon2-earbuds:before {content: "\e911";}
.icon2-bell:before {content: "\e912";}
.icon2-android:before {content: "\e913";}
  

.dt {
	--bg: #2c3e50; --bg-darker: #273644; --bg-darker-1: #232e3b; 
	--bg-darker-2: #1d2733; --bg-darkest: #4e6379; --bg-colored: #46504a;
	--tt: #eee; --tt-fade: #c0c9d4; --tt-fade-1: #99a0aa; 
	--tt-icon: #a7b3c5; --tt-on-colored: #bbe0cc; --tt-fade-0: #e0e0e0;
	--accent: #38c16f; --accent-1: #38c19f;
	--bg-btn: #38c16f; --tt-btn: #fff; --bg-btn-hover: #38c19f;
	
	--bdc: rgba(0,0,0,0.3); --bdc-lighter: var(--bdc); --bdc-darker: var(--bdc); --bdc-darker-1: var(--bdc);
	--bsh-album: 0 0 29px rgba(0,0,0,0.3); --bsh-long: 0 0 65px rgba(0,0,0,0.5); 
	--bsh-track: 0 0 18px rgba(0,0,0,0.3);
	
	--ui-bg: #2c3e50; --ui-bg-darker: #283849; --ui-bg-darkest: #222f3d; --ui-accent: #50a1f1;
	--ui-bdc: rgba(0,0,0,0.4); --ui-tt-fade: #919698;
	--ui-bsh: 0 12px 40px rgba(0,0,0,0.6); --ui-bsh-inset: inset 1px 2px 5px rgba(0,0,0,0.3);
	--ui-bg-black: #222c38; --ui-bg-attention: var(--bg-darker-1); --ui-bd-attention: #9b5e03;
}

.dt {color-scheme: dark;}
.dt select:not([multiple]) {background-image: url(../dleimages/chevron-down-light.svg);}
.dt .wrapper {background-image: url(../images/bg-dark.jpg);}
.dt .header.is-sticky {background-color: rgba(34,44,56,0.66);}
.dt .search-block__input {background-color: rgba(34,44,56,0.5);}
.content {grid-area: content; padding: 0 var(--indent); padding-bottom: 100px; min-height: 100vh;}
.dt .mybnr, .dt .mybnr-stream {color: #000;}
.dt .owl-carousel-progress-bar {background-color: var(--bg-darker-1) !important;}
.dt .owl-nav button {box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
.dt .footer__apps a:not(:hover) {background-color: var(--bg-darkest);}
.dt .lp {background-color: var(--bg);}
.dt .lp > img, .dt .lp-panel > img {opacity: 0.5;}
.dt .page__bg::before {background-color: rgba(34,44,56,0.7);}
.dt .wrapper--register {background-image: url(../images/bg-login-dark.jpg) !important;}
.dt .player__range {--bdc: #1b2630;}
.dt .player {--tt-icon: #b7b7b7;} 
.dt .player__btn-prev, .dt .player__btn-next {--tt-icon: #8d8d8d;}
.dt .player__info-text.expl:after {filter: invert(1);}