/* SET BASE
----------------------------------------------- */
.img-box, .img-wide, .img-square, .img-resp, .img-resp-vert, .img-resp-sq, .img-fit {overflow: hidden; position: relative;}
.img-resp {padding-top: 60%;}
.img-resp-vert {padding-top: 124%;}
.img-resp-sq {padding-top: 100%;}
.img-box img, .img-square img, .img-resp img, .img-resp-vert img, .img-resp-sq img {width: 100%; min-height: 100%; display: block;}
.img-resp img, .img-resp-vert img, .img-resp-sq 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;}

.fx-row, #dle-content, .finfo li, .frate a {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, #dle-content {-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, .fheader h1 {-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;}

.icon-left .fa, .icon-left .icon {margin-right: 10px;}
.icon-right .fa, .icon-right .icon {margin-left: 10px;}
.hidden, #dofullsearch {display: none;}
.anim, .btn, button, .col-left a, .track-item a, .album-in, .collection-in, .album-in img, .collection-in img, 
.album-img, .collection-img, .ffav, .frate a, .frate a [class*=myicon-] {transition: all .3s;}
.mtitle, .sub-title h1, .form-wrap h1 {margin-bottom: 30px; font-size: 24px;}
.track-item a > * {line-height: 1;}
.track-desc {display:flex;flex-direction:column;justify-content:center}
.title_track {color:#a7b2c3}
.title_artist {color:#ffffff;font-size:14px;margin-bottom:5px;font-weight:700}


.share-box {width: 300px; background-color: #fff; border-radius: 10px; padding: 20px; position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center;}
.hshare > * {width: 40px; height: 40px; line-height: 40px !important; text-align: center; border-radius: 50%; background-color: #6996c7; color: #fff; font-size: 22px; margin: 0 6px 20px 6px; cursor: pointer;}
.hshare > .fa-facebook-f {background-color: #496194;}
.hshare > .fa-odnoklassniki {background-color: #ff9c43;}
.hshare > .fa-twitter {background-color: #28c3ff;}
.share-box-title {font-weight: 600; margin-bottom: 20px;}
.share-box-direct div {margin-bottom: 10px;}

/* TRACK
----------------------------------------------- */
.track-item {background-color: #0F172A; border-radius: 10px; /* box-shadow: 0 3px 17px rgba(51,51,51,0.05); */ padding: 15px 20px; position: relative; margin-bottom: 10px; font-weight: 500;}
.track-img {width:40px;height:40px;border-radius:7px;margin-right:30px}
.track-share {margin-right: 34px; color: #a7b2c3; font-size: 20px; padding-top: 4px; cursor: pointer;}
.track-info {width: 220px; margin-left: 20px;}
.track-desc, .track-item a, .track-share, .track-fav {line-height: 40px; height: 40px;}
.track-time {margin-left:20px;width:90px;color:#a7b2c3}
.track-dl {margin-left: 20px; color: #a7b2c3; font-size: 20px; padding-top: 4px;}
.track-fav {font-size: 25px; font-weight: 600; color: #a9b4c5; cursor: pointer; margin-left: 20px;}
.track-play {width: 40px; height: 40px; line-height: 40px; text-align: center; padding-top: 2px;color: #456690; background-color: rgba(255,255,255,0.7); font-size: 24px; padding-left: 5px;position: absolute; left: 0; top: 0; z-index: 2; cursor: pointer; opacity: 0;}
.track-item:hover .track-play, .show-player .track-play {opacity: 1;}
.show-player.track-item {color:#fff;background:linear-gradient(135deg,#456690 0%,#6faedb 100%)}
.show-player.track-item > * {color:#fff}
.show-player.track-item .title_artist,
.show-player.track-item .title_track {color:#fff}
.show-player a, .show-player .track-share, .show-player .track-fav, .show-player .td02 {color: #fff;}
.show-player .track-play .myicon-play:before, .show-player .fplay .myicon-play1:before {content: '\e917'; margin-left: -5px;}
.top100.track-item {width: 49.5% !important;}
.track-desc1 {line-height: 20px !important; margin-right: 20px;}
.td02 {font-weight: 400; color: #999;}

/* PLAYER
----------------------------------------------- */
.item-player {width: 100%; position: fixed; left: 0; bottom: 0; z-index: 997;}
.zfix .item-player {z-index: 10; opacity: 0;}
.audioplayer {position: relative; max-width: 100%; margin: 0 auto; padding: 10px 30px; box-shadow: 0 -1px 2px rgba(0,0,0,.15); background-color: #f2f6f8; box-shadow: 0 -60px 60px -60px rgba(0,0,0,0.1);}
.audioplayer svg {fill:#6eacd9;transition:all ease-in-out .2s}
.audioplayer audio {display: none;}
.audioplayer-bar {position: absolute; left: 0; right: 0; bottom: 100%; height: 15px; background-color: #ccc;}
.audioplayer-bar-loaded {position: absolute; left: 0; top: 0; height: 100%; background-color: rgba(0,0,0,0.05);}
.audioplayer-bar-played {position:absolute;left:0;top:0;height:100%;z-index:10;background:linear-gradient(135deg,#456690 0%,#6faedb 100%)}
.audioplayer-time {position:absolute;z-index:20;font-size:12px;bottom:100%;pointer-events:none;color:#fff;line-height:1.2}
.audioplayer-time-current {left: 10px;}
.audioplayer-time-duration {right: 10px;}
.audioplayer-playpause,
.audioplayer-volume-button,
.audioplayer-volume-adjust {display:inline-block;vertical-align:middle;background:#fff;border-radius:50%}
.audioplayer-playpause a,
.audioplayer-volume-button a,
.ap-dl {width:40px;height:40px;line-height:40px;text-align:center;border-radius:50%;cursor:pointer;font-size:16px;display:inline-flex;justify-content:center;align-items:center}
.audioplayer-playpause a {background-color: #6faedb;color: #fff;/* box-shadow: inset 0 0 0 1px #456690; */}
.audioplayer-playpause a svg {fill:#fff}
/* .audioplayer-stopped .audioplayer-playpause a {padding-left: 2px;} */
.audioplayer-muted .fa-volume-up:before {content: '\f026';}
.audioplayer-volume-adjust {margin-left: 10px;}
.audioplayer-volume-adjust > div {width: 50px; height: 10px; border-radius: 5px; position: relative; cursor: pointer; background-color: #ccc; overflow: hidden;}
.audioplayer-volume-adjust > div > div {height: 100% !important;background: #6faedb;position: absolute; left: 0; bottom: 0; z-index: 10;}
.ap-desc {padding: 0 20px;}
.ap-img {width: 40px; height: 40px; margin-right: 10px; overflow: hidden;}
.ap-img img {width:100%;height:100%;object-fit:cover;border-radius:7px}
.ap-artist {font-weight: 600;}
.ap-title {color: #a7b2c3;/* margin-top: 3px; */}
.ap-dl {background-color: #fff;/*  box-shadow: inset 0 0 0 1px #b564d9; */ margin-right: 10px; font-size: 14px; width: 30px; height: 30px; line-height: 30px;}
.ap-prev,
.ap-next {width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;cursor:pointer;color:#b564d9;background:#fff;background-color:rgb(255,255,255);font-size:12px;margin-right:10px;display:inline-flex;align-items:center;justify-content:center}
.ap-next {margin-right: 0; margin-left: 10px;}
.ap-next:hover, .ap-prev:hover, .ap-dl:hover, .audioplayer-playpause a:hover, 
.audioplayer-volume-button a:hover {background-color:#6faedb;color:#fff}
.ap-prev svg,
.ap-next svg,
.ap-dl svg {width:18px;height:18px}
.ap-next:hover svg,
.ap-prev:hover svg,
.ap-dl:hover svg,
.audioplayer-playpause a:hover svg,
.audioplayer-volume-button a:hover svg {fill:#fff}

/* ADAPTIVE
----------------------------------------------- */
.overlay-box {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; background-color: #000; cursor: pointer;}
.btn-menu {display: none;}
.side-panel {width:280px; height:100%; overflow-x:hidden; overflow-y:auto; background-color:#f8f9f9;padding:30px; z-index:9999; position:fixed; left:-320px; top:0; transition:left .4s;}
.side-panel.active {left:0;}
.close-overlay {width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; left:0; top:0; z-index:9998; display:none; cursor: pointer;}
.btn-close {cursor:pointer; display:block; left: 280px; top: -40px; position: fixed; z-index: 9999;width:40px; height:40px; line-height:40px; text-align:center; font-size:18px; background-color: #e84e36; color: #fff; transition:top .4s; -webkit-transition:top .4s;}
.btn-close.active {top:0px;}
body.opened-menu {overflow: hidden; width: 100%; height: 100%;}
.side-panel .side-box {margin-bottom: 30px;}


@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.woff?sr7zzu') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }
  
  [class^="myicon-"], [class*=" myicon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  .myicon-albums:before {
	content: "\e900";
  }
  .myicon-calendar-1:before {
	content: "\e901";
  }
  .myicon-download:before {
	content: "\e902";
  }
  .myicon-favorite:before {
	content: "\e903";
  }
  .myicon-genres:before {
	content: "\e904";
  }
  .myicon-genres2:before {
	content: "\e905";
  }
  .myicon-home-run:before {
	content: "\e906";
  }
  .myicon-hot:before {
	content: "\e907";
  }
  .myicon-like-2:before {
	content: "\e908";
  }
  .myicon-logo:before {
	content: "\e909";
  }
  .myicon-logo2:before {
	content: "\e912";
  }
  .myicon-music:before {
	content: "\e913";
  }
  .myicon-music2:before {
	content: "\e914";
  }
  .myicon-next-1:before {
	content: "\e915";
  }
  .myicon-next:before {
	content: "\e916";
  }
  .myicon-pause:before {
	content: "\e917";
  }
  .myicon-play:before {
	content: "\e918";
  }
  .myicon-play1:before {
	content: "\e919";
  }
  .myicon-radio:before {
	content: "\e91a";
  }
  .myicon-search-1:before {
	content: "\e91b";
  }
  .myicon-stop:before {
	content: "\e91c";
  }
  .myicon-volume:before {
	content: "\e91d";
  }