@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

html, body, div, 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, sup, 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, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Raleway', sans-serif;
	font-feature-settings: "lnum";
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	background: #F2F6F9;
	min-height: 100%;
}

body {
	margin: 0;
	position: relative;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	font-feature-settings: "lnum";
	background-color: #F3F7F8;
	min-width: 320px;
}

.cont_f {
	margin: 0 auto;
	max-width: 1200px;
	padding: 0px;
}

.about.cont_f {
    padding: 0px 10px;
    color: #000;
}

.main_cont {
	flex: 1 0;
	overflow: hidden;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.l_wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 100vh;
}

@media screen and (max-width: 1024px) {
	.l_wrap {
		margin-bottom: 64px;
	}
}
@media screen and (max-width: 800px) {
	.head_block {
		height:670px;background-color:#E0F0FB;
	}
    .ringtone .head_block {
       background-color :transparent; 
    }
}
.page_cont {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cat_list {
	display: grid;
	grid-gap: 16px;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	width: 100%;
}

.cat_stats {
	display: flex;
	gap: 8px;
	align-items: center;
}

.cat_stats-item {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 16px;
}

.cat_stats-item .r_icons {
	fill: #C5D2DB;
	width: 12px;
	height: 12px;
}

.cat_stats-item span {
	margin-top: 2px;
	font-weight: 700;
	font-size: 10px;
	line-height: 16px;
	color: #5F7D92;
}

.cat_item {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	border-radius: 12px;
	transition: background-color ease .3s;
}

@media screen and (max-width: 344px) {
	.cat_item {
		width: 92%;
	}
}

.cat_item.active {
	background-color: #FCFCFD;
}

.cat_item.active .ring-song {
	color: #4599D2;
}

.cat_item .cp-jplayer {
	position: absolute;
}

.cat_item .r-body {
    width: 50px;
    height: 50px;
    position: relative;
    border: 2px solid #2C3E50;
    border-radius: 50%;
    margin-right: 20px;
    background: #E6F4FF;
}

.cat_item .r-body .pgs {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cat_item .r-body .ring-process {
	width: 56px;
	height: 56px;
	display: none;
}

.cat_item .r-body .ring-process__circle {
	transition: .35s stroke-dashoffset;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	stroke-width: 2px;
	fill: transparent;
	stroke: #4599d2;
	stroke-dasharray: 188.496, 188.496;
	stroke-dashoffset: 188.496;
}

.cat_item .r-body .ring-process__circle-bg {
	transition: .35s stroke-dashoffset;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	stroke-width: 2px;
	fill: transparent;
	stroke: #F2F6F9;
	stroke-dasharray: 188.496, 188.496;
	stroke-dashoffset: 188.496;
}

.cat_item .r-body .poster-bg {
	position: relative;
}

.cat_item .r-body .stop-btn {
	display: none;
	cursor: pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	align-items: center;
	justify-content: center;
}

.cat_item .r-body .stop-btn .r_icons {
	fill: #000;
	width: 12px;
	height: 12px;
}

.cat_item .r-body .play-btn {
	cursor: pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cat_item .r-body .play-btn .r_icons {
	fill: #000000;
	margin-left: 2px;
	width: 12px;
	height: 12px;
}

.cat_item .r-body.jp-state-playing .stop-btn {
	display: flex;
}

.cat_item .r-body.jp-state-playing .play-btn {
	display: none;
}

.cat_item-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cat_item-txt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	width: 0;
	flex: 1;
}

.cat_item-txt.related {
	width: 100%;
}

.cat_item-txt:hover .cat_item-title .ring-song {
	color: #4599D2;
}

.cat_item-title {
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
}

.cat_item-title .ring-song {
	overflow: hidden;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #0A202F;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: color ease .3s;
}

.cat_item-title .track-artist {
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: #5F7D92;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.cat_item-buttons {
    font-family: 'Raleway';
    border: 2px solid #2c3e50;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    background: #e6f4ff;
    padding: 8px 5px 8px 5px;
    font-weight: bold;
    color: #000;
}

.cat_item-buttons .rbtn-track-like.disabled .r_icons {
	fill: #FB637F;
}

.cat_item-buttons .rbtn-track-like.disabled:hover .r_icons {
	font: #C5D2DB;
}

.cat_item-buttons .rbtn-track-like .r_icons {
	fill: #C5D2DB;
}

.none {
	display: none;
}

.dle-content {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.menu {
	z-index: 10;
	display: none;
	align-items: center;
	position: fixed;
	bottom: 0;
	height: 64px;
	width: 100%;
	background-color: #fff;
	border-top: 2px solid #F2F6F9;
}

@media screen and (max-width: 1024px) {
	.menu {
		display: flex;
	}
}

.menu__item {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	justify-content: center;
	gap: 4px;
	background: #fff;
	outline: none;
	border: none;
	text-decoration: none;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: #5F7D92;
	transition: color ease .3s;
}

.menu__item .r_icons {
	fill: #5F7D92;
}

.menu__item.active {
	color: #4599D2;
}

.menu__item.active .r_icons {
	fill: #4599D2;
}

#userinfo {
	margin-bottom: 32px;
}

.feedback {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 16px;
}

#dle-content {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media screen and (max-width: 480px) {
	#js-btn-catalogue {
		width: 100%;
	}
}

.rbtn-categories {
	z-index: 2;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 100%;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
	display: none;
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
}

.rbtn-categories.active {
	display: grid;
}

@media screen and (max-width: 1024px) {
	.rbtn-categories {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.rbtn-categories {
		grid-template-columns: repeat(1, 1fr);
	}
}

.rbtn-categories-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 12px 16px;
	width: 100%;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #0A202F;
	text-decoration: none;
	transition: background-color ease .3s, color ease .3s;
	border-bottom: 1px solid #FBFCFD;
	border-right: 1px solid #FBFCFD;
}

.rbtn-categories-item:hover {
	background: #FBFCFD;
	color: #4599D2;
}

#loading-layer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lds-roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.lds-roller div {
	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
}

.lds-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4599D2;
	margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
	animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
}

.lds-roller div:nth-child(2) {
	animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
}

.lds-roller div:nth-child(3) {
	animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
}

.lds-roller div:nth-child(4) {
	animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
	top: 72px;
	left: 40px;
}

.lds-roller div:nth-child(5) {
	animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
}

.lds-roller div:nth-child(6) {
	animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
}

.lds-roller div:nth-child(7) {
	animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
}

.lds-roller div:nth-child(8) {
	animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
}

@keyframes lds-roller {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.settings {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 16px;
}

.bottom-nav {
	opacity: 0;
}

.r_icons {
	fill: #0A202F;
	height: 16px;
	width: 16px;
	transition: fill .3s ease;
}

.rbtn {
	position: relative;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
	justify-content: space-between;
	border: none;
	outline: none;
	border-radius: 24px;
	transition: background ease .3s, color ease .3s;
}

.rbtn-center {
	justify-content: center;
}

.rbtn-track-like {
	width: 80px;
	height: 100%;
	outline: none;
	border: none;
	background: none;
	cursor: pointer;
}

.rbtn-track-like .icn {
	transition: fill ease .3s;
}

.rbtn-track-like:hover .icn {
	fill: #FB637F;
}

.rbtn:after {
	width: auto;
	height: auto;
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.1);
	z-index: 5;
	transition: opacity ease .3s;
	opacity: 0;
}

.rbtn-sm {
	padding: 10px 16px;
	gap: 8px;
	font-weight: 600;
	font-size: 12px;
	line-height: 12px;
	color: #FFFFFF;
}

.rbtn-sm.rbtn-ico {
	padding: 10px;
}

.rbtn-sm .icn {
	width: 12px;
	height: 12px;
}

.rbtn-md {
	padding: 16px 24px;
	gap: 16px;
	font-weight: 600;
	font-size: 16px;
	line-height: 16px;
	color: #FFFFFF;
}

.rbtn-md.rbtn-ico {
	padding: 16px;
}

.rbtn-border {
	border: 2px solid #F2F6F9;
}

.rbtn-transparent {
	background-color: transparent;
	color: #0A202F;
}

.rbtn-transparent .icn {
	fill: #0A202F;
}

.rbtn-transparent:hover .icn {
	fill: #4599D2;
}

.rbtn-white {
	background-color: white;
	color: #0A202F;
}

.rbtn-white .icn {
	fill: #0A202F;
}

.rbtn-white:hover {
	color: #4599D2;
}

.rbtn-white:hover .icn {
	fill: #4599D2;
}

.rbtn-main {
	background: #4d5562;
	box-shadow: 0 10px 30px #A2D2F2;
	color: white;
}

.rbtn-main:hover:after {
	opacity: 1;
}

.rbtn-main .icn {
	fill: white;
}

.rbtn-green {
	background: #4B6CA7;
	box-shadow: 0 10px 30px #BEE6BD;
	color: white;
}

.rbtn-green:hover:after {
	opacity: 1;
}

.rbtn-green .r_icons {
	fill: white;
}

.rbtn-orange {
	background: linear-gradient(90deg, #E59136 0%, #EBAD4A 100%);
	box-shadow: 0 10px 30px #FFD39D;
	color: white;
}

.rbtn-orange:hover:after {
	opacity: 1;
}

.rbtn-orange .icn {
	fill: white;
}

.rbtn-no-shadow {
	box-shadow: none;
}

.link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #0A202F;
	text-decoration: none;
	transition: color ease .3s;
}

.link .icn {
	width: 10px;
	height: 10px;
}

.link:hover {
	color: #4599D2;
}

.button-up {
	z-index: 10;
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
}

.button-up.hide {
	display: none;
}

.navigation {
	position: relative;
	display: inline-block;
	-flex-direction: row;
	align-items: center;
	text-decoration: none;
	justify-content: center;
        margin: 0px auto;
}
.navigation * {
display: inline-block;
    min-width: 7px;
    padding: 5px 10px;
    font-weight: 500;
    text-decoration: none;
    color: #000;
    background: #fff;
    font-size: 18px;
    font-family: 'Jura';
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    margin-right: 11px;
    margin-bottom: 6px;
}
.navigation span {    display: inline-block;
    min-width: 7px;
    padding: 5px 10px;
    font-weight: bold;
    color: #000;
    background: #f2f1f0;
    font-size: 18px;
    font-family: 'Jura';
    border: 1px solid #2c3e50;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);}

.ring {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ring-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-weight: 700;
	font-size: 24px;
	line-height: 24px;
	color: #0A202F;
}

@media screen and (max-width: 480px) {
	.ring-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

.ring-cont {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
}

.ring-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	padding: 16px;
}

.ring-footer {
	border-top: 1px solid #F2F6F9;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	padding: 16px;
	background: #FFFFFF;
}

.input__group {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

@media screen and (max-width: 480px) {
	.input__group {
		flex-direction: column;
		align-items: stretch;
	}
}

.input__area {
	min-height: 120px;
}

.input__item {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	border: 2px solid #F2F6F9;
	padding: 22px 24px;
	justify-content: flex-end;
	width: 100%;
	background: #FFFFFF;
	border-radius: 24px;
}

.input__item label {
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	margin-left: 24px;
	position: absolute;
	top: -12px;
	left: -4px;
	padding: 4px;
	background-color: #fff;
}

.input__item-btn {
	padding: 8px 8px 8px 24px;
}

.input__item .s-btn {
	display: flex;
	gap: 8px;
	align-items: center;
}

.input__item textarea {
	min-height: 120px;
	resize: none;
}

.input__item input[type="file"] {
	cursor: pointer;
	line-height: 28px;
}

.input__item input[type="file"]::file-selector-button {
	display: none;
}

.input__item input, .input__item textarea {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 0 0;
	outline: none;
	border: none;
	padding: 8px 16px 8px 24px;
	font-family: "Raleway", serif;
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #0A202F;
}

.input__item input::placeholder, .input__item textarea::placeholder {
	color: #5F7D92;
}

.alert {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	padding: 24px;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #5F7D92;
}

.alert__title {
	display: flex;
	font-weight: 700;
	font-size: 16px;
	line-height: 16px;
	color: #0A202F;
}

.alert-error {
	background: rgba(239, 12, 12, 0.15);
	border: 1px solid rgba(239, 12, 12, 0.15);
}

.ui-dialog {
	padding: 24px;
	background: white;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
	border-radius: 16px;
}

.ui-dialog-titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header {
	height: 80px;
	position: relative;
}

@media screen and (max-width: 1024px) {
	header {
		position: unset;
	}
}

@media screen and (max-width: 480px) {
	header {
		height: 72px;
	}
}

@media screen and (min-width: 1024px) {
	header.scroll + .main_cont {
		margin-top: 80px;
	}
}

@media screen and (min-width: 1024px) and (max-width: 480px) {
	header.scroll + .main_cont {
		margin-top: 72px;
	}
}

@media screen and (min-width: 1024px) {
	header.scroll .head_btn-like a {
		border: 2px solid #F2F6F9;
	}
}

@media screen and (min-width: 1024px) and (min-width: 1024px) {
	header.scroll {
		position: fixed;
		z-index: 10;
		margin-top: 16px;
		width: 100%;
	}

	header.scroll #header {
		background: white;
		padding: 16px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
		border-radius: 16px;
	}
}

.header__profile {
	position: relative;
}

.header__profile-login {
	max-width: 120px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.header__profile-drop {
	position: absolute;
	right: 0;
	top: 56px;
	display: none;
	background: white;
	border-radius: 12px;
	z-index: 10;
	min-width: 328px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	flex-direction: column;
}

.header__profile-drop.mobile {
	right: 16px;
	top: unset;
	bottom: 64px;
}

.header__profile-drop.current {
	display: flex;
}

.header__profile-drop .drop-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 12px 16px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #0A202F;
	transition: background-color ease .3s, color ease .3s;
}

.header__profile-drop .drop-item:not(:last-child) {
	border-bottom: 1px solid #FBFCFD;
}

.header__profile-drop .drop-item:hover {
	background: #FBFCFD;
	color: #4599D2;
}

.head_logo,.footer__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 24px;
    color: #000;
    text-transform: uppercase;
    background: #e6f4ff;
    padding: 15px 15px 15px 15px;
    margin: 0 0 20px;
    border-bottom: 2px solid #2c3e50;
}

@media screen and (max-width: 480px) {
	.head_logo {
		width: 100%;
	}
}

.head_nav-desktop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 0;
	gap: 32px;
}

@media screen and (max-width: 990px) {
	.head_nav-desktop {
		flex-direction: column;
		align-items: center;
		gap: 16px;
		padding-bottom: 0;
	}
}

.head_s {
	position: relative;
	width: 100%;
}

.head_s-layout {
	width: 100%;
}

.head_s-layout.active {
	display: flex;
}

.head_s-input {
	z-index: 3;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 8px 8px 8px 24px;
	gap: 16px;
	justify-content: flex-end;
	background: #FFFFFF;
	border-radius: 24px;
}

.head_s-input .s-btn {
	display: flex;
	gap: 8px;
	align-items: center;
}

.head_s-input.typing {
	border: 2px solid #F2F6F9;
	padding: 6px 8px 6px 24px;
}

.head_s-input input[name="story"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: 0 0;
	border: none;
	outline: none;
	padding: 8px 16px 8px 24px;
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	color: #0A202F;
}

.head_s-input input[name="story"]::placeholder {
	color: #5F7D92;
}

.head_s-result {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: calc(100% + 16px);
	left: -8px;
	top: -8px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	z-index: 2;
}

.head_s-result.hide {
	display: none;
}

.head_s-result.show {
	display: flex;
}

.head_s-result .suggestions-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	text-decoration: none;
	color: #0A202F;
	transition: background-color ease .2s;
}

.head_s-result .suggestions-item:first-child {
	margin-top: 64px;
	border-top: 1px solid #FBFCFD;
}

.head_s-result .suggestions-item:not(:last-child) {
	border-bottom: 1px solid #FBFCFD;
}

.head_s-result .suggestions-item:hover {
	background: #FBFCFD;
}

.head_btn {
	display: flex;
	align-items: center;
	gap: 16px;
}

@media screen and (max-width: 1024px) {
	.head_btn {
		display: none;
	}
}

.head_btn-like {
	position: relative;
}

.head_btn-like a:hover .icn {
	fill: #FB637F;
}

.head_btn-like span {
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FB637F;
	font-weight: 700;
	font-size: 9px;
	line-height: 10px;
	color: #fff;
	border-radius: 16px;
	z-index: 1;
}

.tags {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: center;
	overflow-x: auto;
	border-radius: 16px;
	scroll-snap-type: x mandatory;
}

.tags__header {
	display: none;
}

@media screen and (max-width: 1024px) {
	.tags__header {
		display: flex;
	}

	.tags__header .tags {
		display: flex;
	}
}

@media screen and (max-width: 480px) {
	.tags__header {
		width: 100%;
	}
}

.tags__wrapper {
	position: relative;
	width: 100%;
}

.tags__wrapper:before {
	content: '';
	position: absolute;
	width: 96px;
	height: 32px;
	right: 0;
	top: 0;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(270deg, #F2F6F9 0%, rgba(242, 246, 249, 0) 100%);
}

.tags::-webkit-scrollbar {
	display: none;
}

.tags__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	gap: 10px;
	background: #FFFFFF;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	color: #0A202F;
	transition: color ease .3s;
}

.tags__item.active {
	background: #4599D2;
	color: #fff;
	transition: background-color ease .3s;
}

.tags__item.active:hover {
	background-color: #62a9d9;
	color: #fff;
}

.tags__item.current {
	background-color: #4599D2;
	color: white;
	pointer-events: none;
}

.tags__item.current:hover {
	color: white;
}

.tags__item:hover {
	color: #4599D2;
}

.header-profile-drop-login {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
}

.header-profile-drop-login.current {
	display: block;
}

.auth__form {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 12px;
	background: white;
	max-width: 492px;
	min-width: 328px;
}

.auth__form-header {
	padding: 24px;
	border-bottom: 1px solid #F2F6F9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-weight: 700;
	font-size: 20px;
	line-height: 16px;
	color: #0A202F;
}

.auth__form-header svg {
	cursor: pointer;
	width: 12px;
	height: 12px;
}

.auth__form-header svg:hover {
	fill: #FB637F;
}

.auth__form-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.auth__form-forgot {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth__form-register {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	justify-content: center;
}

.auth__form button {
	width: 100%;
}

footer {
	background-color: white;
}

.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32px 0;
}

@media screen and (max-width: 480px) {
	.footer {
		flex-direction: column;
		gap: 16px;
	}
}

.footer_inf {
	display: flex;
	align-items: center;
	gap: 16px;
}

@media screen and (max-width: 990px) {
	.footer_inf {
		flex-direction: column;
	}
}

.footer__soc {
	display: flex;
	gap: 8px;
}

.footer__soc .soc-vk:hover, .footer__soc .soc-fb:hover, .footer__soc .soc-twitter:hover, .footer__soc .soc-ok:hover {
	background-color: #F2F6F9;
}

.footer__soc .soc-vk .icn {
	fill: #0077FF;
}

.footer__soc .soc-fb .icn {
	fill: #1877F2;
}

.footer__soc .soc-twitter .icn {
	fill: #00ACED;
}

.footer__soc .soc-ok .icn {
	fill: #F7931E;
}

.ringtone {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ringtone_soc {
	position: relative;
}

@media screen and (max-width: 1024px) {
	.ringtone_soc {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.ringtone_share-wrapper {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	padding: 16px;
	background-color: #fff;
	border-radius: 16px;
	right: 0;
	top: -80px;
	box-shadow: 0 8px 32px rgb(0 0 0 / 16%);
}

.ringtone_share-wrapper.active {
	display: flex;
}

@media screen and (max-width: 1024px) {
	.ringtone_share-wrapper {
		top: -50%;
		left: 50%;
		transform: translate(-50%, -100%);
		width: 100%;
	}

	.ringtone_share-wrapper .ya-share2 {
		width: 100% !important;
	}

	.ringtone_share-wrapper .ya-share2 .ya-share2__container {
		width: 100% !important;
	}

	.ringtone_share-wrapper .ya-share2 .ya-share2__container .ya-share2__list {
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
}

@media screen and (max-width: 480px) {
	.ring_like {
		width: 100%;
	}
}

.ring_stat {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

@media screen and (max-width: 480px) {
	.ring_stat {
		justify-content: center;
	}
}

.ring_stat-item {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 16px;
	text-decoration: none;
}

.ring_stat-item.stat-link span {
	color: #4599D2;
}

@media screen and (max-width: 480px) {
	.ring_stat-item {
		justify-content: center;
	}
}

.ring_stat-item .r_icons {
	fill: #C5D2DB;
	width: 16px;
	height: 16px;
}

.ring_stat-item span, .ring_stat-item a {
	margin-top: 2px;
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #5F7D92;
	text-decoration: none;
}

.ring_stat-item a {
	transition: color ease .3s;
}

.ring_stat-item a:hover {
	color: #4599D2;
}

.ringtone-down {
	display: flex;
	align-items: center;
	gap: 16px;
}

@media screen and (max-width: 1024px) {
	.ringtone-down {
		flex-direction: column;
		width: 100%;
	}

	.ringtone-down a {
		width: 100%;
	}
}

.ringtone-down-wrapp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

@media screen and (max-width: 1024px) {
	.ringtone-down-wrapp {
		flex-direction: column;
		gap: 32px;
	}
}

.ringtone-track {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 14px;
	gap: 32px;
	background: #FFFFFF;
	border: 2px solid #F2F6F9;
	border-radius: 12px;
	width: 100%;
}

.ringtone-track .jp-current-time {
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #5F7D92;
}

.ringtone-track .jp-controls-holder {
	position: relative;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 2px solid #F2F6F9;
	border-radius: 32px;
}

.ringtone-track .jp-controls-holder .jp-play-custom {
	display: flex;
}

.ringtone-track .jp-controls-holder .jp-play-custom .r_icons {
	padding-left: 2px;
	fill: #5F7D92;
}

.ringtone-track .jp-controls-holder .jp-pause-custom {
	display: none;
}

.ringtone-track .jp-controls-holder .jp-pause-custom .r_icons {
	fill: #4599D2;
}

.ringtone-track .jp-controls-holder .jp-play-custom, .ringtone-track .jp-controls-holder .jp-pause-custom {
	position: absolute;
	top: -22px;
	left: -22px;
	width: 80px;
	height: 80px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	outline: none;
	border: none;
}

.ringtone-track .jp-controls-holder .jp-play-custom svg, .ringtone-track .jp-controls-holder .jp-pause-custom svg {
	width: 12px;
	height: 12px;
}

.ringtone_footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

@media screen and (max-width: 1024px) {
	.ringtone_footer {
		flex-direction: column;
		gap: 16px;
	}
}

.ringtone_faq {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

@media screen and (max-width: 1024px) {
	.ringtone_faq {
		justify-content: center;
	}
}

#waveform {
	width: 100%;
	height: 48px;
	cursor: pointer;
}

#waveform wave {
	height: 100% !important;
	overflow: unset;
}

#progress {
	visibility: hidden;
	display: none;
}

.ya-share2__badge {
	width: 40px;
	height: 40px;
	display: flex !important;
	align-items: center;
	border: 2px solid #F2F6F9;
	justify-content: center;
	background-color: #fff !important;
}

.ya-share2__icon {
	background-size: 24px 24px !important;
}

.ya-share2__item_service_vkontakte .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(24%) sepia(100%) saturate(2134%) hue-rotate(205deg) brightness(109%) contrast(104%);
}

.ya-share2__item_service_twitter .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(48%) sepia(63%) saturate(2212%) hue-rotate(163deg) brightness(99%) contrast(101%);
}

.ya-share2__item_service_odnoklassniki .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(64%) sepia(99%) saturate(1878%) hue-rotate(347deg) brightness(101%) contrast(94%);
}

.ya-share2__item_service_skype .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(69%) sepia(30%) saturate(7184%) hue-rotate(179deg) brightness(95%) contrast(85%);
}

.ya-share2__item_service_skype .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(69%) sepia(30%) saturate(7184%) hue-rotate(179deg) brightness(95%) contrast(85%);
}

.ya-share2__item_service_viber .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(43%) sepia(55%) saturate(5717%) hue-rotate(243deg) brightness(103%) contrast(103%);
}

.ya-share2__item_service_whatsapp .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(5152%) hue-rotate(59deg) brightness(109%) contrast(47%);
}

.ya-share2__item_service_telegram .ya-share2__icon {
	filter: brightness(0) saturate(100%) invert(57%) sepia(66%) saturate(384%) hue-rotate(157deg) brightness(100%) contrast(93%);
}

.ya-share2__list {
	display: flex !important;
	align-items: center;
	gap: 8px;
}

#dle-comments-form {
	width: 100%;
}

.comment__edit {
	display: flex;
	gap: 16px;
	align-items: center;
}

.comment__addcomment {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.comment__list {
	width: 100%;
}

.comment__list #dle-comments-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.comment__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.comment__item:before {
	content: '';
	width: 1px;
	height: 100%;
	background: #F2F6F9;
	position: absolute;
	top: 32px;
	left: 15px;
}

.comment__item-wrapper {
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.comment__item-msg {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 16px;
	gap: 16px;
	border: 2px solid #F2F6F9;
	border-radius: 16px;
}

.comment__info {
	display: flex;
	align-items: center;
	gap: 8px;
}

.comment__info img {
	width: 32px;
	height: 32px;
	border-radius: 32px;
}

.comment__info-text {
	display: flex;
	align-items: center;
	gap: 8px;
}

.comment__info-text a {
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: #0A202F;
	text-decoration: none;
	transition: color ease .3s;
}

.comment__info-text a:hover {
	color: #4599D2;
}

.comment__info-text p {
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	color: #C5D2DB;
}