/* SET BASE
----------------------------------------------- */
* {
	background: transparent;
	margin: 0;
	padding: 0;
	outline: none;
	border: 0;
	box-sizing: border-box;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

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

input,
select {
	vertical-align: middle;
}

article,
aside,
figure,
figure img,
hgroup,
footer,
header,
nav,
section,
main {
	display: block;
}

img {
	max-width: 100%;
}

.clr {
	clear: both;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

body {
	font: 15px 'Montserrat', sans-serif;
	line-height: normal;
	padding: 0;
	margin: 0;
	color: #333;
	background-color: #e1e1e1;
	background-attachment: fixed;
	min-height: 100%;
	width: 100%;
	font-weight: 400;
	background-blend-mode: lighten;
}

a {
	color: #333;
	text-decoration: none;
}

h2,
h3,
h4,
h5 {
	font-weight: 400;
	font-size: 22px;
}

h1 {
	font-weight: 500;
	font-size: 22px;
}

button,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="button"],
input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	font-size: 16px;
	font-family: 'Montserrat' !important;
}

.button,
.btn,
.pagi-load a,
.up-second li a,
.usp-edit a,
.qq-upload-button,
button:not(.color-btn):not([class*=fr]):not(.search-btn):not([class*=owl-]),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.meta-fav a,
.usp-btn a {
	display: inline-block;
	text-align: center;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 400;
	box-shadow: none;
	background-color: #008000;
	color: #fff;
	font-size: 15px;
}

.button:hover,
.btn:hover,
.up-second li a:hover,
.usp-edit a:hover,
.qq-upload-button:hover,
.pagi-load a:hover,
.usp-btn a:hover,
button:not(.color-btn):not([class*=fr]):not(.search-btn):not([class*=owl-]):hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.meta-fav a:hover {
	background-color: linear-gradient(to bottom, #008000, #FFD100);
	color: #fff;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
	box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="password"] {
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
	border: 0;
	padding: 0 15px;
}

select {
	height: 40px;
	border: 0;
	padding: 0 15px;
}

textarea {
	padding: 15px;
	overflow: auto;
	vertical-align: top;
	resize: vertical;
}

input[type="text"],
input[type="password"],
select,
textarea {
	width: 100%;
	background-color: #fff;
	color: #000;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px #e3e3e3, inset 1px 2px 5px rgba(0, 0, 0, 0.1);
}

select {
	width: auto;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
	box-shadow: inset 0 0 0 1px #3498db, inset 1px 2px 5px rgba(0, 0, 0, 0.1);
}

input::placeholder,
textarea::placeholder {
	color: #000;
	opacity: 0.5;
	font-size: 14px;
}

input:focus::placeholder,
textarea:focus::placeholder {
	color: transparent
}

.img-box,
.img-wide,
.img-resp,
.img-resp-vert,
.img-fit {
	overflow: hidden;
	position: relative;
}

.img-resp {
	padding-top: 70%;
}

.img-resp-vert {
	padding-top: 140%;
}

.img-box img,
.img-resp img,
.img-resp-vert img {
	width: 100%;
	min-height: 100%;
	display: block;
}

.img-resp img,
.img-resp-vert img {
	position: absolute;
	left: 0;
	top: 0;
}

.img-wide img {
	width: 100%;
	display: block;
}

.img-fit img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nowrap-side {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nowrap-side-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 11px;
	font-weight: 400 !important;
}

.fx-row {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.fx-col {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column
}

.fx-center {
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center
}

.fx-middle {
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center
}

.fx-start {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.fx-first {
	-ms-flex-order: -1;
	-webkit-order: -1;
	order: -1;
}

.fx-last {
	-ms-flex-order: 10;
	-webkit-order: 10;
	order: 10;
}

.fx-1,
.main-nav>li {
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
	min-width: 50px;
}

.fx-between {
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

b,
strong,
.fw700 {
	font-weight: 600;
}

.icon-left [class*="fa-"],
.icon-left .icon {
	margin-right: 10px;
}

.icon-right [class*="fa-"],
.icon-right .icon {
	margin-left: 10px;
}

.hidden,
#dofullsearch {
	display: none;
}

.anim,
.btn,
button,
.track-desc,
.track-title,
.track-subtitle,
.side-item,
.side-item * {
	transition: all .3s;
}

.mtitle,
.sub-title h1,
.form-wrap h1 {
	margin-bottom: 30px;
	font-size: 22px;
	font-weight: 500;
}

#dle-content {
	width: 100%;
}

.visible {
	display: block !important;
}

.h1-main {
	font-weight: 600 !important;
	font-size: 18px !important;
	margin-bottom: 10px;
}

.h2-main {
	font-weight: 500 !important;
	font-size: 16px !important;
	margin-bottom: 10px;
}

/* BASIC GRID
----------------------------------------------- */
.wrap {
	min-width: 320px;
	position: relative;
	padding-bottom: 60px;
}

.wrap-center {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	z-index: 20;
}

.header {
	padding: 10px 30px;
	background: #008000;
	margin-top: 30px;
	border-radius: 7px 7px 0px 0px;
}

.wrap-main {
	background-color: #fff;
	border-bottom: 1px solid #ababab36;
	border-radius: 0px 0px 7px 7px;
}

.nav {
	position: relative;
}

.nav-side {
	background: #ffffff !important;
}

.sharing-fdl {
	background: #ffffff00;
	position: relative;
	border: 1px solid #206994;
	color: #0082D1;
}

.col-right,
.col-left,
.col-main {
	padding: 15px 15px !important;
}

.col-main {
	min-height: auto;
	height: 100%;
	padding: 15px 0 0 0;
}

.col-right {
	width: 256px;
	padding: 15px 0 0 0;
	border-left: 1px solid #eee;
}

.footer {
	color: #fff;
	padding: 20px 60px;
	position: relative;
}

.footer-menu a {
	font-weight: 500;
	color: #00264e;
	border-bottom: 1px dotted #00264e;
	display: block;
	margin-right: 30px;
	background: #f1f1f1;
	padding: 5px 15px;
}

.overlay-box {
	position: fixed;
	z-index: 998;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	background-color: #000;
	cursor: pointer;
}

.go-top {
	position: fixed;
	bottom: 30px;
	right: 25px;
	z-index: 9999;
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	border: none;
	background: #008000;
	color: white;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
}

.go-top:hover {
	transform: scale(1.1) rotate(-5deg);
}

.go-top.show {
	opacity: 1;
	visibility: visible;
}


/* HEADER
----------------------------------------------- */
.logo {
	display: block;
	color: #fff !important;
	font-weight: 800;
	white-space: nowrap;
	font-size: 22px;
	text-transform: uppercase;
}

.logo img {
	max-height: 60px;
}

.logo div {
	font-size: 12px;
	font-weight: 400;
	margin-top: 3px;
	text-transform: none;
}

.logo span:not(.logo-domain) {
	background-color: #FF0000;
	display: inline-block;
	padding: 0 5px;
	margin: 0 3px;
	border-radius: 4px;
	color: #fff;
}

.logo span.logo-domain {
	font-size: 12px;
	font-weight: 500;
}

.search-wrap {
	margin: 0px 30px;
}

.search-box {
	position: relative;
	margin: 5px;
}

.search-box input,
.search-box input:focus {
	padding: 0 60px 0 15px;
	border-radius: 4px;
	box-shadow: none;
}

.search-box input:not(:focus)::placeholder {
	color: #333;
	opacity: 0.5;
	font-size: 13px;
}

.search-box button {
	position: absolute;
	right: 0;
	top: 0px;
	z-index: 10;
	width: 40px;
	cursor: pointer;
	background: none;
	color: #333;
	line-height: 40px;
	text-align: center;
}

.main-nav>li>a {
	display: block;
	text-align: center;
	color: #ffffff;
	position: relative;
	padding: 8px 0;
	font-size: 14px;
	white-space: nowrap;
	font-weight: 400;
}

.main-nav>li {
	background: #C8102E;
	border-right: 2px solid #ffffffba;
}

.main-nav>li:last-child {
	background: #C8102E;
	border-right: none;
}

.main-nav>li:hover .hidden-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0px);
	text-align: center;
}

.main-nav>li:hover>a {
	background-color: #f1f1f1;
	color: #003064;
	font-size: 14px;
	transition: 0.2s;
	overflow: hidden;
	transform: scale(1.01);
}

.fdl {
	display: block;
	text-align: center;
	color: #002651;
	position: relative;
	padding: 15px 0 15px 0;
	font-size: 14px;
	white-space: nowrap;
	font-weight: 600;
	margin-right: 15px;
	width: 83px;
	border-radius: 5px;
	color: white;
	flex-grow: 1;
}

.fdl {
	background: #bc2933;
	position: relative;
}

.main-nav .fal,
.fdl .fal,
.fdl .fas {
	display: block;
	height: 40px;
	font-size: 23px;
	position: absolute;
	left: 20px;
	top: 12px;
	text-align: center;
	opacity: 0.666;
}

.hidden-menu {
	background-color: #fcfdff;
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
	z-index: 100;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	column-width: 300px;
	column-gap: 20px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(30px);
	padding: 30px;
	text-align: center;
}

.hidden-menu li a {
	display: block;
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 15px;
	white-space: nowrap;
	padding-right: 5px;
	border: 1px solid #008000;
	border-radius: 5px;
	padding: 10px;
	transition: 0.2s;
}

.hidden-menu li a:hover {
	transform: scale(1.01);
	background-color: #008000;
	color: #fdce0c;
	font-weight: 600;
}

/* SECTION
----------------------------------------------- */
.sect {
	margin-bottom: 15px;
	position: relative;
}

.sect-title {
	font-weight: 600;
	font-size: 22px;
	color: #008000;
	background: #f1f1f1;
	line-height: 40px;
	padding: 5px 20px;
	min-height: 50px;
	margin-bottom: 10px;
	border-radius: 5px;
	border-bottom: 1px solid rgb(40 123 6 / 15%);
}

.site-desc {
	padding: 15px 60px;
	background-color: #f1f1f1;
	line-height: 1.6;
	font-size: 13px;
	border-radius: 0px 0px 7px 7px;
}

.site-desc .logo {
	color: #000 !important;
	margin-right: 60px;
	line-height: normal;
}

.site-desc a,
.site-copyright span {
	color: #008000;
	border-bottom: 1px dotted #008000;
	margin: 0px 5px;
	font-size: 12px;
	font-weight: 600;
}

.site-copyright {
	margin-top: 23px;
	font-size: 13px;
	color: #666;
	gap: 10px;
}

.sect-border {
	border: 1px solid #eeeeeea6;
	margin-bottom: 15px;
	border-radius: 5px;
}

/* TRACK ITEM
----------------------------------------------- */
.track-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 12px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.track-item:nth-child(2n+1) {
	background-color: #4caf5014;
}

.track-item:first-child {
	border-radius: 5px 5px 0px 0px;
}

.track-item a,
.track-item a.track-desc {
	display: block;
	color: #2b0000;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: color 0.3s ease;
}

.track-item:hover {
	background-color: #e1e1e1;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px #e1e1e1;
}

.track-item span {
	font-size: 17px;
}

.track-item:hover a,
.track-item:hover a.track-desc {
	color: #008000;
}

.track-img {
	width: 35px;
	height: 35px;
	border-radius: 5px;
	margin-right: 7px;
}

.track-play {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	width: 35px;
	height: 35px;
	color: #ffffff;
	background: #008000;
	margin: 5px;
	border-radius: 5px;
	border: 1px solid rgba(0, 88, 183, 0.2);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.track-play:hover {
	background: #008000;
	transform: scale(1.01);
	box-shadow: 0 4px 12px rgba(27, 136, 237, 0.25);
}

.track-play:active {
	transform: scale(0.95);
	box-shadow: 0 2px 6px rgba(27, 136, 237, 0.15);
}

.track-desc {
	padding: 0 0px 0px 10px;
}

.track-title {
	font-weight: 500;
	display: inline;
}

.track-subtitle {
	color: #666;
	display: inline;
}

.track-subtitle:before {
	content: '-';
	display: inline;
	margin: 0 4px;
}

.track-time {
	font-size: 11px;
	color: #000000;
	height: 17px;
	line-height: 17px;
	border-radius: 5px;
	width: 35px;
	text-align: center;
}

.track-download-button {
	background-color: #008000;
	color: #ffffff !important;
	height: 35px;
	line-height: 35px;
	width: 35px;
	border-radius: 5px;
	text-align: center;
	margin-left: 10px;
}

.fa-arrow-down {
	color: #fff;
}

.fa-angle-double-down {
	color: #fff;
}

.track-download-button:hover {
	transform: scale(1.01);
	transition: all .3s ease;
	background-color: #008000;
	color: #ffffff !important;
}

.js-item-played .fa-play:before {
	content: '\f04c';
	color: #ffffff;
}


/* SIDEBAR
----------------------------------------------- */
.side-bt {
	font-weight: 500;
	font-size: 17px;
	margin-bottom: 10px;
	background: #f1f1f1;
	height: 50px;
	line-height: 50px;
	padding: 0px 20px;
	border-radius: 5px;
	margin-left: 15px;
}

.side-bt-playlist {
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 10px;
	background: #f1f1f1;
	height: 45px;
	line-height: 40px;
	padding: 5px 20px;
	border-radius: 5px;
	margin-left: 10px;
}

.side-item {
	display: block;
	padding: 15px 60px 15px 75px;
	color: #999;
	font-size: 13px;
	border-top: 1px solid #eee;
	position: relative;
	margin-right: -60px;
}

.side-item-icons {
	display: flex;
	padding: 10px 15px 5px 15px;
	color: #999;
	font-size: 13px;
	border: 1px solid #eee;
	position: relative;
	border-top: none;
}

.side-item-icons:hover {
	background-color: #f1f1f1;
}

.side-bc .side-item-icons:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.side-bc .side-item-icons {
	display: flex;
	padding: 10px 15 5px 15px;
	text-decoration: none;
	border: 1px solid #eee;
	border-top: none;
	align-items: normal;
	background: #fff;
	transition: background .12s ease;
}

.side-bc .side-item-icons:first-child {
	border-top: 1px solid #eee;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.side-bc .side-item-icons:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.side-bc .side-item-icons:hover {
	background: #f1f1f1;
}


.side-item div {
	font-weight: 500;
	color: #333;
	margin-bottom: 4px;
	font-size: 15px;
}

.side-item-icons div {
	font-weight: 500;
	color: #333;
	margin-bottom: 4px;
	min-width: 35px;
}

.sect-main-title {
	background-color: #f1f1f1;
	padding: 10px 25px;
	border-bottom: 1px solid #5ab1ff !important;
	border: 1px solid #eee;
	border-radius: 5px 5px 0px 0px;
}

.sect-main-text {
	background-color: #f1f1f1;
	border: 1px solid #eee;
	padding: 10px 15px;
	font-weight: 400;
	margin: 0 auto;
	border-radius: 0px 0px 5px 5px;
	margin-bottom: 15px;
}

.sect-content {
	margin-bottom: 30px;
	border-bottom: 1px solid #eee;
	height: 100%;
	min-height: 100%;
}

.side-bt-text {
	padding: 20px;
	font-weight: 400;
	font-size: 15px;
	margin: 0 auto;
	background-color: #f1f1f1;
	border-radius: 5px;
	position: relative;
	margin-bottom: 15px;
}

.side-menu {
	padding: 10px;
	margin-top: -20px;
}

.side-item-icons-text {
	display: block;
}

.side-artists {
	display: flex;
	background: #64b7e117;
	height: 24px;
	margin: 10px;
	width: 110px;
	line-height: 24px;
}


.side-playlist a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
	padding: 8px 12px;
	width: 225px;
	text-align: left;
	color: #008000;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(63, 130, 194, 0.12);
	border-radius: 5px;
	transition: all 0.25s ease;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.side-playlist a:hover {
	background: #008000;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(27, 136, 237, 0.2);
}


/* BOTTOM NAVIGATION
----------------------------------------------- */
.bottom-nav {
	margin-bottom: 10px;
	padding-top: 10px;
	border-top: 1px solid #eeeeeea6;
}

.nav-load a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	max-width: 340px;
	margin: 0 auto;
	background: #008000;
	color: #fff;
	line-height: 40px;
	text-align: center;
	height: 40px;
	border-radius: 4px;
	transition: 0.2s;
	font-size: 16px;
}

.nav-load a:hover,
.artist-a-end:hover {
	background: #006100;
	color: #ffffff !important;
	font-weight: 500;
	font-size: 16px;
	transform: scale(1.01);
	transition: .3s ease-in-out;
}

.nav-load>span {
	display: none;
}

.navigation {
	text-align: center;
}

.navigation a,
.navigation span,
.pnext a,
.pprev a,
.pprev>span,
.pnext>span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 40px;
	height: 40px;
	margin: 6px 3px;
	padding: 0 10px;
	font-weight: 500;
	font-size: 15px;
	color: #008000;
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px #eee;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
}

.navigation span:not(.nav_ext),
.pagi-nav a:hover {
	background: #008000;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(27, 136, 237, 0.2);
}

.navigation a:active,
.pnext a:active,
.pprev a:active {
	transform: scale(0.95);
	box-shadow: 0 1px 4px rgba(27, 136, 237, 0.15);
}


/* PLAYER
----------------------------------------------- */
.wplayer {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 990;
}

.audioplayer {
	max-width: 1280px;
	margin: 0 auto;
	height: 60px;
	padding: 10px 20px 10px 10px;
	background-color: #ffffff;
	color: #008000;
	box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.2);
	position: relative;
}

.audioplayer audio {
	display: none;
}

.audioplayer-bar {
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
	background-color: #c8102e;
	overflow: hidden;
	cursor: pointer;
}

.audioplayer-bar-loaded {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: rgba(0, 122, 61, 0.35);
	border-radius: 10px 10px 0 0;
}

.audioplayer-bar-played {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	z-index: 10;
	border-radius: 0;
	background-color: #007a3d;
	border-top: 1px solid rgba(200, 16, 46, 0.35);
}

.audioplayer-volume {
	position: relative;
	z-index: 100;
	margin-left: 20px;
	font-size: 18px;
}

.audioplayer-muted .fa-volume-up:before {
	content: '\f6a9';
}

.audioplayer-volume-button a {
	color: #007a3d;
	display: block;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

.audioplayer-volume-adjust {
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 30px;
	height: 100px;
	background-color: #333;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	padding: 10px;
	display: none;
}

.audioplayer-volume-adjust>div {
	width: 10px;
	height: 80px;
	border-radius: 0px;
	position: relative;
	cursor: pointer;
	background-color: #222;
	overflow: hidden;
}

.audioplayer-volume-adjust>div>div {
	width: 100% !important;
	background-color: #ff3b3b;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
}

.audioplayer-volume:hover .audioplayer-volume-adjust {
	display: block;
}

.ap-dl {
	font-size: 24px;
	color: #008000;
	margin-left: 20px;
}

.ap-time {
	font-size: 11px;
	color: #000000;
	margin-left: 20px;
	font-weight: 600;
}

.audioplayer-time-current:after {
	display: inline;
}

.ap-desc {
	width: 300px;
}

.ap-img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

.ap-artist {
	font-size: 11px;
	margin-top: 5px;
	color: #ccc;
}

.ap-title {
	font-size: 13px;
	font-weight: 600;
}

.ap-btns {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.audioplayer-volume-button a:hover,
.ap-dl:hover {
	opacity: 1;
	color: #007a3d;
}

.audioplayer-stopped .audioplayer-playpause a {
	padding-left: 3px;
}

.wplayer-init .audioplayer-playpause .fas:before {
	content: '\f04b';
}

.player-hide .wplayer {
	bottom: -80px;
}

.player-hide .audioplayer {
	box-shadow: 0 -15px 30px rgba(0, 0, 0, 0);
	transform: scale(0.5, 0.5);
}

.ap-title,
.ap-artist {
	max-width: 230px;
}

.audioplayer-playpause a {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 12px;
	border-radius: 7px;
	background: #008000;
	color: #ffffff;
	font-size: 18px;
	border: 1px solid rgb(40 123 6 / 15%);
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.audioplayer-playpause a:hover {
	background: #008000;
	color: #ffffff;
	transform: scale(1.01);
	box-shadow: 0 6px 18px rgba(0, 87, 183, 0.3);
}

.audioplayer-playpause a:active {
	transform: scale(0.95);
	box-shadow: 0 3px 8px rgba(0, 87, 183, 0.2);
}

.ap-prev,
.ap-next {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	font-size: 14px;
	background: #008000;
	color: #ffffff;
	border-radius: 7px;
	border: 1px solid rgb(40 123 6 / 15%);
	transition: all 0.3s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ap-prev:hover,
.ap-next:hover {
	background: #008000;
	color: #ffffff;
	transform: translateY(-1px) scale(1.01);
	box-shadow: 0 4px 12px rgba(0, 87, 183, 0.3);
}

.ap-prev:active,
.ap-next:active {
	transform: translateY(0) scale(0.97);
	box-shadow: 0 2px 6px rgba(0, 87, 183, 0.2);
}


/* FULL
----------------------------------------------- */
.speedbar {
	font-size: 12px;
	color: #414141;
	padding: 10px 15px;
	margin-bottom: 20px;
	border-radius: 5px;
	background: #f1f1f1;
	border-bottom: 1px solid rgb(40 123 6 / 15%);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

.speedbar i {
	margin: 0px 4px;
	font-size: 10px;
	color: #0b3760;
}

.speedbar a {
	color: #0b3760;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.speedbar a:hover {
	color: #008000;
	text-decoration: underline;
}

.speedbar span {
	color: #777;
}

.title-song {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	margin: 20px auto;
	margin-top: -10px;
}

.fsct-track-name {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	font-weight: 600;
	background: #f1f1f1;
	border-radius: 5px;
	padding: 14px 20px;
	font-size: 22px !important;
	color: #008000;
	width: 100%;
	line-height: 1.3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fsct-track-name .artist {
	font-size: 20px;
	color: #008000;
	margin-bottom: 4px;
}

.fsct-track-name .track {
	font-size: 24px;
	color: #008000;
}

.fsct-track-name .fa-pencil {
	margin-left: 6px;
	font-size: 16px;
	color: #0b3760;
	transition: transform 0.3s ease, color 0.3s ease;
	cursor: pointer;
}

.fsct-track-name .fa-pencil:hover {
	transform: rotate(-15deg);
	color: #008000;
}

.complaint-title {
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(255, 0, 0, 0.85);
	color: #fff !important;
	font-size: 13px;
	padding: 4px 8px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.complaint-title a {
	color: #Fff !important;
}

.complaint-title i {
	margin: 0px 5px;
}

.complaint-title:hover {
	background: rgba(200, 0, 0, 0.9);
	transform: translateY(-2px);
}

@media (max-width: 550px) {
	.fsct-track-name {
		padding: 10px 12px;
	}

	.fsct-track-name .artist {
		font-size: 18px;
	}

	.fsct-track-name .track {
		font-size: 20px;
	}

	.complaint-title {
		font-size: 12px;
		padding: 3px 8px;
	}
}


h1>span {
	color: #222222;
	font-size: 15px !important;
}

h1 a {
	margin-left: 15px;
}

.fmain h1 {
	font-size: 22px;
}

.fimg {
	width: 182px;
	height: 182px;
	border-radius: 0px 5px 5px 0px;
}

.fsc {
	display: flex;
	align-items: center;
	justify-content: space-around;
	border: 1px solid #eeeeee98;
	border-radius: 5px;
}

.finfo {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	flex-wrap: nowrap;
}

.finfo li {
	font-size: 13px;
	line-height: 1.8;
	padding: 7px 10px 6px 140px;
	min-height: 27px;
	position: relative;
}

.finfo li:nth-child(2n+1) {
	background-color: rgba(62, 156, 179, 0.04);
}

.finfo li>span:first-child {
	color: #666;
	display: inline-block;
	width: 120px;
	position: absolute;
	left: 10px;
	top: 5px;
}

.finfo li span {
	display: flex;
	justify-content: flex-end;
	padding-right: 10px;
	font-weight: 500;
}

.frate {
	position: absolute;
	z-index: 10;
	right: 0;
	top: 0px;
	background-color: #fff;
	font-size: 12px;
	padding: 0 8px;
	border-radius: 4px 0px 0px 4px;
	height: 30px;
	line-height: 30px;
}

.frate a .fas {
	color: #6ab04c;
	margin-right: 2px;
}

.frate a+a .fas {
	color: #eb4d4b;
	margin-left: 13px;
}

.fbtm {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	max-width: 700px;
	margin: 15px 0px;
}

.fdl span {
	position: relative;
}

.fcaption-sharing-main {
	font-size: 19px;
	line-height: 1.6;
	border-radius: 5px;
	position: relative;
	color: #060606;
	background-color: #f1f1f1;
	padding: 13px 30px 13px 30px;
	margin: 5px auto;
	text-align: center;
	height: auto;
	border: 1px solid #00800014;
}

.sharing-text {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.fcaption-sharing {
	font-size: 14px;
	line-height: 1.6;
	border-radius: 5px;
	position: relative;
	color: #060606;
	background-color: #f1f1f1;
	padding: 13px 30px 13px 30px;
	height: 83px;
	margin-bottom: 10px;
	min-width: 300px;
	text-align: center;
	border: 1px solid #00800014;
}

.fcaption-sharing div {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: center;
}

.fcaption-sharing-text-box {
	display: inline-flex;
}

.fcaption-share-item {
	display: flex;
}

.fcaption {
	font-size: 12px;
	line-height: 1.6;
	border-radius: 5px;
	position: relative;
	color: #060606;
	background: #f1f1f1;
	padding: 13px 30px 13px 15px;
	margin: 20px auto;
}

.fcaption div {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* .fcaption::before {content: '\f028'; font-family: 'Font Awesome 5 Pro'; font-weight: 300; 
	position: absolute; left: 30px; top: 50%; color: #008000; font-size: 38px; transform: translateY(-50%);} */
.fplay {
	width: 83px;
	background: #008000;
	cursor: pointer;
	color: white;
	flex-grow: 1;
	max-width: 210px;
}

.fplay .fas {
	color: #eee;
	opacity: 1;
}

.js-item-played .fplay .fa-play:before {
	content: '\f04c';
	color: #ffffff;
}

.fdl:hover,
.fplay:hover {
	background: #006100;
	color: #ffffff !important;
	transform: scale(1.01);
	transition: .3s ease-in-out;
}

.fdl:hover .fa-play {
	color: #ffffff;
}

.show-text {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	background-color: #008000;
	color: #fff;
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -20px;
	z-index: 5;
}

.ftext[style]::before {
	content: '';
	pointer-events: none;
	height: 100%;
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, transparent 0%, #fff 100%);
}

.ftext {
	position: relative;
}

.fab:hover {
	transform: scale(1.01);
	transition: all .3s ease
}

/* FULL STORY STATIC
----------------------------------------------- */
.video-box embed,
.video-box object,
.video-box video,
.video-box iframe,
.video-box frame {
	max-width: 100% !important;
	display: block;
	width: 100%;
	height: 400px;
}

.mejs-container {
	max-width: 100% !important;
}

.full-text {
	line-height: 1.7;
	font-size: 15px;
}

.full-text img:not(.emoji) {
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.full-text>img[style*="left"],
.full-text>.highslide img[style*="left"] {
	margin: 0 10px 10px 0;
}

.full-text>img[style*="right"],
.full-text>.highslide img[style*="right"] {
	margin: 0 0 10px 10px;
}

.full-text a {
	text-decoration: underline;
	color: #06c;
}

.full-text a:hover {
	text-decoration: none;
}

.full-text h2,
.full-text h3,
.full-text h4,
.full-text h5 {
	margin: 10px 0;
}

.full-text p {
	margin-bottom: 10px;
}

.full-text>ul,
.full-text>ol {
	margin: 0;
}

.full-text>ul li {
	list-style: disc;
	margin-left: 40px;
}

.full-text>ol li {
	list-style: decimal;
	margin-left: 40px;
}

.share-container {
	position: fixed;
	top: 30px;
	right: 25px;
	z-index: 9999;
}

.share-button {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 40px;
	height: 40px;
	border-radius: 12px !important;
	border: none;
	background: #008000;
	color: white;
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.share-button i {
	font-size: 20px;
}

.share-button:hover {
	transform: scale(1.01) rotate(5deg);
}

.share-icons {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-10px);
	transition: all 0.3s ease;
}

.share-icons a {
	color: white;
	background: rgba(0, 0, 0, 0.6);
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px 0;
	font-size: 18px;
	transition: all 0.3s ease;
}

.share-icons a:hover {
	background: #008000;
	transform: scale(1.01);
}

.share-container.active .share-icons {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.sharing-sect {
	background-color: #0080002e;
	padding: 15px;
	text-align: center;
}

.text-share {
	font-size: 19px;
}

.fshare {
	border-radius: 15px;
	width: auto;
	padding: 0 12px;
	font-size: 12px;
	display: flex;
	align-items: center;
	position: absolute;
	color: #ffffff;
	background-color: #ef0707 !important;
	height: 25px;
	line-height: 25px;
	right: 0;
	bottom: 10px;
}

.fshare .fal {
	font-size: 18px;
	margin-right: 10px;
	vertical-align: middle;
}

.ffav {
	background-color: #03a9f4a1;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 5px 0 0 5px;
	font-size: 14px;
	padding: 0 7px;
	color: #ffffff;
	cursor: pointer;
	margin-top: 6px;
	max-width: max-content;
}

.button:not(.color-btn):not([class*=fr]):not(.search-btn):not([class*=owl-]) {
	background-color: #56a4c9;
}

.sidem {
	font-size: 16px;
	font-weight: 500;
	padding: 10px;
	text-align: left;

}

.genre-button {
	background: #e8f4ff;
	padding: 5px 15px;
	margin: 5px;

}

/* comments */

.comm-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 15px;
	margin-bottom: 15px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comm-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.comm-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.comm-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.comm-right {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.comm-one {
	font-size: 13px;
	color: #666;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}

.comm-author {
	font-weight: 600;
	color: #008000;
}

.comm-two {
	font-size: 14px;
	color: #333;
	line-height: 1.4;
	margin-bottom: 8px;
	word-wrap: break-word;
}

.comm-three {
	font-size: 13px;
	color: #555;
	display: flex;
	justify-content: space-between;
}

.comm-rate3 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.comm-rate3 .fa-thumbs-up {
	color: #28a745;
	cursor: pointer;
}

.comm-rate3 .fa-thumbs-down {
	color: #dc3545;
	cursor: pointer;
}

.comm-rate3 .fa-thumbs-up:hover {
	color: #1e7e34;
}

.comm-rate3 .fa-thumbs-down:hover {
	color: #bd2130;
}

.reply {
	margin-left: 15px;
	color: #0b3760;
	cursor: pointer;
	transition: color 0.3s ease;
}

.reply:hover {
	color: #008000;
}

.last-comm-link {
	font-size: 14px;
	color: #0b3760;
	font-weight: 500;
	margin-bottom: 8px;
	display: block;
	text-decoration: none;
}

.last-comm-link:hover {
	color: #008000;
	text-decoration: underline;
}

.add-comms {
	background: #fff;
	border-radius: 5px;
	/* padding: 20px; */
	margin: 20px 0;
}

.ac-inputs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.ac-inputs input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

.ac-inputs input:focus {
	outline: none;
	border-color: #008000;
}

/* Текстовое поле */
.ac-textarea textarea,
.ac-textarea {
	width: 100%;
	min-height: 100px;
	/* padding: 10px; */
	font-size: 14px;
	/* border: 1px solid #ccc; */
	border-radius: 5px;
	transition: border-color 0.2s ease;
}

.bb-editor {
	width: 100%;
	min-height: 100px;
	font-size: 14px;
	border-radius: 5px;
	transition: border-color 0.2s ease;
}

.ac-textarea textarea:focus {
	border-color: #008000;
	outline: none;
}

.ac-protect {
	margin-top: 15px;
}

.form-item {
	margin-bottom: 15px;
}

.form-item label {
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
	font-size: 13px;
	color: #333;
}

.form-item input[type="text"] {
	width: 100%;
	padding: 8px 10px;
	/* border: 1px solid #ccc; */
	border-radius: 5px;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

.form-item input[type="text"]:focus {
	border-color: #008000;
	outline: none;
}

.ac-submit {
	margin-top: 10px;
	/* text-align: right; */
}

.ac-submit button {
	background: #008000;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.ac-submit button:hover {
	background: #008000;
	transform: translateY(-2px);
}


.comms-title {
	font-weight: 600;
	font-size: 22px;
	color: #008000;
	min-height: 50px;
	background: #f1f1f1;
	padding: 10px 18px;
	margin: 25px 0 15px 0;
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	gap: 8px;
}

.comms-title::before {
	content: "\f4ad";
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	font-size: 18px;
	color: #008000;
}

@media (max-width: 550px) {
	.comms-title {
		font-size: 18px;
		padding: 8px 14px;
	}

	.comms-title::before {
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.comm-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.comm-avatar {
		width: 40px;
		height: 40px;
	}

	.ac-inputs {
		flex-direction: column;
	}

	.ac-submit {
		text-align: center;
	}
}

/* end comments */


.artist-info {
	padding: 10px;
	margin: 10px 10px 30px;
	font-size: 14px;
	font-weight: 400;
}

.artist-a a {
	color: #000000;
	font-size: 14px;
	text-align: center;
	background: #f1f1f1;
	padding: 5px 10px;
	line-height: 40px;
	margin-right: 10px;
	border-radius: 2px;
	width: 120px;
	overflow: hidden;
}

.artist-a a:hover {
	color: #fdce0c;
	background: #116cbb;
	font-size: 14px;
	text-align: center;
	padding: 5px 10px;
	line-height: 40px;
	margin-right: 10px;
	border-radius: 2px;
	width: 120px;
	overflow: hidden;
}

.artist-a-end {
	font-weight: 500;
	text-align: center;
	background: #008000;
	padding: 0px 15px;
	line-height: 35px;
	margin: 5px 10px;
	border-radius: 5px;
	overflow: hidden;
	transition: 0.2s;
}

.artist-a-end a {
	color: #ffffff;
}


.artist-a-end a:hover {
	color: #fdce0c;
}


.button-block {
	text-align: center;
	margin: 0 auto;
	display: flex;
	border-top: 1px solid #eeeeeea6;
}

.button-section {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	text-align: center;
	background: #008000;
	padding: 0 18px;
	line-height: 40px;
	margin: 12px auto;
	border-radius: 5px;
	width: 340px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.button-section i {
	margin-left: 5px;
}

.button-section:hover {
	color: #ffffff !important;
	background: #006100;
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 6px 18px rgba(0, 87, 183, 0.3);
}

.button-section:active {
	transform: scale(0.97);
	box-shadow: 0 3px 8px rgba(0, 87, 183, 0.2);
}

.button-section a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.button-section a:hover {
	color: #fdce0c;
}


.artist-menu {
	margin: 0 auto;
	margin-left: 5px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px;
	max-width: 227px;
	justify-content: center;
	margin-bottom: 14px;
}

.side-bt-artist {
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 10px;
	background: #f1f1f1;
	height: 45px;
	line-height: 40px;
	padding: 5px 20px;
	border-radius: 5px;
	margin-left: 10px;
}

.side-bt-artist-menu {
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 15px;
	color: #008000;
	background: #f1f1f1;
	border-bottom: 1px solid rgb(40 123 6 / 15%);
	box-shadow: inset 0 -2px 6px rgba(255, 255, 255, 0.6),
		0 2px 6px rgba(0, 0, 0, 0.05);
	height: 50px;
	line-height: 40px;
	padding: 5px 20px;
	border-radius: 5px;
}

[data-switcher] {
	margin-bottom: 30px;
	position: relative;
}

[data-switcher-show] {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	padding: 6px;
	cursor: pointer;
}

[data-switcher-show].selected {
	background: #008000;
	border-radius: 5px;
	color: #fff;
	box-shadow: 0 0 0.875rem 0 #29304215;
}

[data-switcher-name]:not(.selected) {
	display: none;
}

.decorated {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 1.5em;
	display: inline-block;
}

.decorated .decorated-inner {
	padding: .7em 1.2em;
	position: relative;
}

.change-block-text {
	padding: 5px 10px;
	/* margin: 5px auto; */
	font-weight: 400;
	font-size: 13px;
}

.button-change-block {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 5px auto;
	flex-wrap: wrap;
	padding: 5px 10px;
}


.button-change-cat {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	text-align: center;
	background: rgba(177, 177, 177, 0.15);
	/* прозрачный liquid glass */
	padding: 6px 14px;
	margin: 6px 10px;
	border: 1px solid rgba(0, 88, 183, 0.3);
	border-radius: 5px;
	color: #008000;
	font-size: 14px;
	height: 34px;
	max-width: 140px;
	flex-grow: 1;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.button-change-cat:hover {
	background: #006100;
	color: #ffffff !important;
	box-shadow: 0 6px 18px rgba(27, 136, 237, 0.3);
	transform: translateY(-2px);
	border-radius: 5px;

}

.button-change-cat:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(27, 136, 237, 0.25);
	border-radius: 12px !important;
}

.pagecounter {
	display: flex;
	justify-content: space-between;
}

.pagecounter-item {
	font-size: 14px;
}

.sect-title-changer {
	font-weight: 500;
	font-size: 16px;
	background: #f1f1f1;
	line-height: 40px;
	padding: 5px 20px;
	border-radius: 5px;
}

.sect-title-footer {
	font-weight: 500;
	font-size: 16px;
	background: #f1f1f1;
	line-height: 40px;
	padding: 5px 20px;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 1px solid #002a4e15;
	border: 1px solid #eee;
}

.footer-text {
	padding: 10px 20px;
	font-weight: 400;
	font-size: 15px;
	margin: 0 auto;
	background-color: #f1f1f1;
	border-radius: 5px;
	position: relative;
	margin-bottom: 15px;
	border: 1px solid #eee;
}

.form-wrap {
	padding: 10px;
}

.h2-sect {
	font-size: 16px;
	font-weight: 500;
}

/* ADAPTIVE
----------------------------------------------- */
.btn-menu {
	display: none;
}

.side-panel {
	width: 320px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;
	position: fixed;
	left: -320px;
	top: 0;
	z-index: 9999;
	transition: left .28s ease;
	background: #0a192f;
	box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.side-panel.active {
	left: 0;
}

.close-overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.55);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9998;
	display: none;
	backdrop-filter: blur(2px);
}

.btn-close {
	cursor: pointer;
	position: fixed;
	right: 20px;
	top: -44px;
	z-index: 10000;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 18px;
	border-radius: 5px;
	background: #c8102e;
	color: #ffffff;
	opacity: 0;
	transition: top .28s ease, opacity .28s ease, transform .12s ease, box-shadow .12s ease;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.btn-close.active {
	top: 20px;
	opacity: 1;
}

.btn-close:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
}

.btn-close:active {
	transform: translateY(0);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) inset;
}

body.opened-menu {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.side-panel .nav,
.side-panel .main-nav {
	display: block;
	margin: 0;
	padding: 10px 0 0 0;
}

.side-panel .main-nav>li {
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.side-panel .main-nav>li>a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	padding: 0 14px 0 46px;
	height: 44px;
	line-height: 44px;
	background: transparent;
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border-radius: 5px;
	margin: 4px 10px;
	transition: background .14s ease, color .14s ease, transform .12s ease;
	position: relative;
}

.side-panel .main-nav>li>a:before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	bottom: 7px;
	width: 4px;
	border-radius: 5px;
	background: #007a3d;
	opacity: 0.85;
}

.side-panel .main-nav .fal {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: rgba(255, 255, 255, 0.80);
	height: auto;
}

.side-panel .main-nav>li>a:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}

.side-panel .main-nav>li.active>a,
.side-panel .main-nav>li.current>a {
	background: rgba(200, 16, 46, 0.22);
	color: #ffffff;
}

.side-panel .main-nav>li.active>a:before,
.side-panel .main-nav>li.current>a:before {
	background: #c8102e;
}

.side-panel .hidden-menu {
	width: 100%;
	box-shadow: none;
	border-radius: 0;
	position: static;
	visibility: visible;
	transform: none;
	opacity: 1;
	padding: 12px 10px 16px 10px;
	text-align: left;

	column-width: 200px;
	column-gap: 12px;
}

/* sub items */
.side-panel .hidden-menu li {
	break-inside: avoid;
}

.side-panel .hidden-menu li a {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 8px 10px;
	margin: 0 0 8px 0;
	font-size: 13px;
	font-weight: 700;
	white-space: normal;
	text-decoration: none;

	border-radius: 5px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.86);
	transition: background .14s ease, border-color .14s ease, transform .12s ease;
}

.side-panel .hidden-menu li a:hover {
	background: rgba(0, 122, 61, 0.18);
	border-color: rgba(0, 122, 61, 0.35);
	transform: translateY(-1px);
}

.side-panel .side-title {
	padding: 14px 14px 10px 14px;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 900;
	font-size: 14px;
}

.side-panel::-webkit-scrollbar {
	width: 8px;
}

.side-panel::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 5px;
}

.side-panel::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.18);
}

.fa-cloud-download {
	color: #Fff;
	font-size: 18px;
}

@media screen and (max-width: 1220px) {
	.go-top {
		bottom: 75px;
		right: 15px;
	}

	.share-container {
		width: 45px !important;
		height: 45px !important;
	}

	.share-button {
		width: 45px !important;
		height: 45px !important;
		width: 35px;
		height: 35px;
		border-radius: 5px;
		color: #008000 !important;
		background: #ffffff !important;


	}

	.header {
		border-radius: 0px;
	}

	.wrap {
		overflow: hidden;
	}

	.nav,
	.site-desc .logo {
		display: none;
	}

	.btn-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		margin: 0 10px 0 5px;
		cursor: pointer;

		width: 35px;
		height: 35px;
		border-radius: 5px;
		color: #008000;
		background: #ffffff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.btn-menu:hover {
		transform: scale(1.1) rotate(5deg);
		background: #f1f1f1;
	}

	.footer,
	.site-desc,
	.cols {
		padding-left: 5px;
		padding-right: 5px;
		margin: 0px 7px;
	}

	.header {
		padding-left: 20px;
		padding-right: 20px;
		margin: 0px auto;
	}

	.col-right {
		width: 100%;
		width: calc(100% + 30px);
		margin: 0 5px;
		border-left: 0;
	}

	.side-item {
		margin-left: 0;
		margin-right: 0;
		padding-right: 15px;
		padding-left: 46px;
		width: 50%;
	}

	.side-item::before {
		left: 15px;
	}

	.side-item:nth-child(2n) {
		border-left: 1px solid #eee;
	}

	.side-items {
		display: block;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.side-item-icons {
		margin-right: 0px;
		padding-left: 30px;
		border-right: 1px solid #eee;
		border-left: 1px solid #eee;
	}

	.side-bt-artist-menu,
	.visible {
		margin-left: 0;
	}

	.side-bt {
		padding-left: 15px;
		text-align: center;
		margin-left: 30px;
	}

	.side-bt-artist {
		padding-left: 15px;
		text-align: center;
	}

	.side-bt-artist-menu {
		margin-bottom: 0px;
	}

	.site-desc {
		text-align: center;
		margin-top: 20px;
	}

	.footer {
		display: block;
		text-align: center;
		padding-top: 60px;
	}

	.footer-menu {
		justify-content: center;
	}

	.footer-menu a {
		display: inline-block;
		margin: 0 10px 20px 10px;
	}

	.logo {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		display: flex;
		justify-content: flex-end;
		flex-grow: 1;
		max-width: 100%;
		min-width: 50px;
	}

	.search-wrap {
		-ms-flex-order: 10;
		-webkit-order: 10;
		order: 10;
		margin: 0;
		margin-top: 5px;
		min-width: 100%;
	}

	.search-box {
		max-width: 100%;
	}

	.wplayer {
		bottom: 0;
	}

	.audioplayer,
	.audioplayer-bar {
		border-radius: 0;
		max-width: 100%;
		left: 0;
	}

	.video-box embed,
	.video-box object,
	.video-box video,
	.video-box iframe,
	.video-box frame {
		height: 400px;
	}

	.artist-menu {
		display: flex;
		width: auto;
		flex-direction: column;
	}

	.side-bt-artist-menu {
		display: none;

	}

	.nav-side {
		background: #fcfdff !important;
	}

	.side-playlist a {
		width: 290px;
		text-align: center;
		font-size: 13px;
		font-weight: 500;
	}
}

@media screen and (max-width: 950px) {}

@media screen and (min-width: 768px) {
	.ap-info {
		margin-left: 73%;
		width: 10%;
		color: black;
	}

	.ap-artist {
		color: black;
	}

	.audioplayer-time-duration::before {
		content: '/  ';
		color: black;
	}

	.audioplayer-time-current {
		margin-right: 5px;
		color: black;
	}

	.audioplayer-volume-button a {
		color: #007a3d;
	}

	.audioplayer-time-duration {
		color: black;
	}

	.ap-btns {
		left: 10%;
	}

	.ap-img {
		display: none;
	}

	.audioplayer-bar {
		max-width: 35%;
		top: 26px;
		height: 10px;
		left: 20%;
		border-radius: 2px;
		color: black;
	}

	.audioplayer {
		border-radius: 0;
		background-color: white;
		color: black;
		/* border-top: 1px solid #2195f359; */
	}

	.audioplayer-bar {
		background-color: #c8102e;
	}

	.audioplayer-bar-played {
		background-color: #007a3d;
	}

	.audioplayer-bar-loaded {
		background-color: rgba(0, 122, 61, 0.35);
	}

	.audioplayer-bar-played,
	.audioplayer-bar-loaded {
		border-radius: 0;
	}
}

@media screen and (max-width: 760px) {
	.hshare {
		background: linear-gradient(to top, #3e9cb3, #48b0ca);
		justify-content: space-between;
		padding: 10px 15px;
		margin: 0 -15px;
		margin-top: 15px;
		width: 100%;
		width: calc(100% + 30px);
		-ms-flex-order: 10;
		-webkit-order: 10;
		order: 10;
	}

	.hshare>* {
		margin: 0;
		width: 30px;
		height: 30px;
	}

	.header {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.share-container {
		top: 15px;
	}

	.ap-title,
	.ap-artist {
		max-width: 100%;
		color: #001a37;
	}

	.ap-desc {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 115%;
		z-index: 5;
		min-width: 100%;
		padding: 10px;
		background-color: #ffffff;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
		visibility: hidden;
	}

	.ap-mob-btn {
		display: block;
		cursor: pointer;
		font-size: 28px;
		color: #008000;
	}

	.ap-time {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
		min-width: 50px;
		justify-content: flex-end;
	}

	.ap-desc.is-active {
		visibility: visible;
		border-top: 1px solid #008000;
		border-bottom: 1px solid #008000;
	}

	.audioplayer-volume {
		display: none;
	}

	.audioplayer-time-duration::before {
		content: '/  ';
		color: black;
	}

	.audioplayer-time-current {
		width: 32px;
		margin-right: 5px;
		color: black;
	}

	.ap-btns {
		left: 70px;
		transform: translate(0, -50%);
	}

	.fcols {
		display: block;
	}

	.fimg {
		margin: 0 auto 15px auto;
	}

	.fcaption {
		min-width: 100%;
		margin-top: 15px;
	}

	.fdl {
		margin: 0;
	}

	.fplay {
		margin-right: 15px;
		-ms-flex-preferred-size: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
		min-width: 50px;
	}

	.side-menu {
		padding: 20px;
		font-size: 14px;
		margin-top: -30px;
	}

	.sidem {
		font-size: 17px;
		font-weight: 400;
		padding: 10px;
		margin: 0 auto;
		text-align: center;
	}

	.side-bt-playlist {
		font-weight: 600;
		font-size: 17px;
		margin-bottom: 10px;
		background: #f1f1f1;
		height: 45px;
		line-height: 40px;
		padding: 5px 20px;
		border-radius: 5px;
		margin-left: 10px;
		text-align: center;
	}

	.playlist-block {
		display: flex;
		margin: 0 auto;
		position: relative;
		margin-bottom: 40px;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.playlist-count {
		line-height: 40px;
	}

	.fcaption-sharing {
		margin-left: 15px;
	}

	.button-change-cat {
		margin: 5px 7px;
	}
}


@media screen and (max-width: 590px) {
	.ac-inputs input {
		width: 100%;
	}

	.video-box embed,
	.video-box object,
	.video-box video,
	.video-box iframe,
	.video-box frame {
		height: 300px;
	}

	.ui-dialog {
		width: 100% !important;
	}

	.upop-left,
	.upop-right {
		float: none !important;
		width: 100% !important;
		margin: 0;
		padding: 0 20px;
	}

	.upop-left {
		margin-bottom: 10px;
		text-align: center;
	}

	.ui-dialog-buttonset button {
		display: block;
		margin: 0 0 5px 0;
		width: 100%;
	}

	#dofullsearch,
	#searchsuggestions span.seperator {
		display: none !important;
	}

	.attach .download-link {
		margin: 0 -15px 0 0;
		float: none;
		display: block;
		padding: 0 10px;
	}

	.attach-info {
		float: none;
	}

	.fcaption-sharing {
		margin-left: 0px;
		margin-top: 10px;
		flex-grow: 1;
	}
}

@media screen and (max-width: 510px) {
	.change-block-text {
		width: 500px;
		text-align: center;
	}

	.fsc {
		display: flex;
		flex-direction: column-reverse;
	}

	.finfo {
		width: -webkit-fill-available;
	}

	.finfo li span {
		display: flex;
		justify-content: flex-end;
	}
}

@media screen and (max-width: 470px) {
	.wrap-center22 {
		max-width: 360px;
	}

	.ac-inputs input {
		width: 100%;
	}

	.track-item {
		margin-left: 0px;
		margin-right: 0px;
		padding: 5px;
	}

	.track-play {
		width: 40px;
		padding-left: 1px;
	}

	.fcaption {
		padding: 15px;
	}

	.fcaption::before {
		display: none;
	}

	.track-time {
		display: none;
	}

	.track-download-button {
		background-color: #008000;
		height: 40px;
		line-height: 40px;
		width: 40px;
		border-radius: 5px;
		text-align: center;
		margin-left: 10px;
		font-size: 20px;
	}

	.video-box embed,
	.video-box object,
	.video-box video,
	.video-box iframe,
	.video-box frame {
		height: 250px;
	}
}

@media screen and (max-width: 400px) {

	.fcaption-sharing {
		margin: 10px auto;
	}
}