@charset "UTF-8";
body {
  font-family: Arial, "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  background-color: #262626;
}

html, body {
  width: 100%;
}

/*====Normal Css Start====*/
* {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: #fff;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #01FF95;
}

a:focus, button:focus {
  outline: none;
  color: #01FF95;
}

ul li {
  list-style: none;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
}

.font-size-xs {
  font-size: 0.65rem !important;
}

.font-size-sm {
  font-size: 0.85rem !important;
}

.font-size-md {
  font-size: 1.25rem !important;
}

.font-size-lg {
  font-size: 1.875rem !important;
}

.font-weight-100 {
  font-weight: 100;
}

.font-weight-200 {
  font-weight: 200;
}

.font-weight-300 {
  font-weight: 300;
}

.btn {
  color: #fff;
}
.btn:hover {
  color: #fff;
}
.btn-center {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.btn-n1 {
  background-color: #01FF95;
  border-color: #01FF95;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 700;
  font-size: 14px;
}
.btn-n1:hover, .btn-n1:focus {
  background-color: #22c38b;
  color: rgba(0, 0, 0, 0.8);
}
.btn-n2 {
  background-color: transparent;
  font-size: 14px;
}
.btn-n2:hover, .btn-n2:focus {
  color: #22c38b;
  border-color: transparent;
  box-shadow: none;
}
.btn-loading::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
  margin-right: 0.25rem;
}

.bi-16 {
  font-size: 16px;
}

.bi-18 {
  font-size: 18px;
}

.bi-20 {
  font-size: 20px;
}

.bi-20 {
  font-size: 22px;
}

.h-8 {
  height: 2rem !important;
}

.form-control {
  border-radius: 0;
}
.form-control:focus {
  box-shadow: none;
  border: 1px solid #01FF95;
}

.custom-control-input {
  width: 1.5rem;
  height: 1.75rem;
}

.custom-switch-lg .custom-control-label::before {
  left: -2.25rem;
  width: 2.5rem;
  border-radius: 0.75rem;
  height: 1.5rem;
}

.custom-switch-lg .custom-control-label::after {
  width: calc(1.5rem - 4px);
  height: calc(1.5rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.75rem;
}

.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
  -webkit-transform: translateX(1rem);
          transform: translateX(1rem);
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: #22c38b;
  background-color: #22c38b;
}

.dropdown-menu {
  background-color: #141414;
  padding: 10px 0;
  border: 0;
  z-index: 999;
  margin-top: -5px;
}

.dropdown-item {
  color: #fff;
  font-size: 14px;
}
.dropdown-item:hover {
  color: #fff;
  background-color: rgba(55, 55, 55, 0.8);
}

.dropdown-hover:hover .dropdown-menu {
  display: block;
}

.text-gray {
  color: #8c8c8c;
}

.table {
  color: #fff;
}

.login-show {
  display: -webkit-inline-box;
  display: inline-flex;
}

/*弹出框*/
@keyframes anim-loading {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes anim-loading {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.loading-wrap .loading-img {
  padding: 5px;
}

.loading-wrap .loading-img .loading-icon {
  animation: anim-loading 1s linear infinite;
  -webkit-animation: anim-loading 1s linear infinite;
  display: inline-block;
}

.jBox-container {
  background-color: #262626;
}

.jBox-Modal .jBox-title {
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
}

.jBox-Confirm {
  color: #fff;
}
.jBox-Confirm .jBox-container {
  border-radius: 5px;
  background-color: #141414;
}
.jBox-Confirm .jBox-title {
  display: none;
}
.jBox-Confirm-footer {
  text-align: center;
}
.jBox-Confirm-button {
  height: 30px;
  background-color: #39c1de;
  display: inline-block;
  padding: 0 20px;
  line-height: 30px;
  text-transform: capitalize;
  font-size: 13px;
  border-radius: 15px;
  color: #fff;
  width: auto;
  float: none;
  margin: 0 10px;
}
.jBox-Confirm-button-cancel {
  color: #8c8c8c;
  border: solid 1px #8c8c8c;
  background-color: transparent;
}
.jBox-Confirm-button-submit:hover {
  background-color: rgba(57, 193, 222, 0.8);
}

.bucket {
  width: 100%;
  margin: 0 0 20px;
  position: relative;
  clear: both;
}

.bucket-header {
  margin-bottom: 10px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
}
.bucket-header h3, .bucket-header .title {
  font-size: 1.45rem;
  font-weight: 500;
}
.bucket-header .more {
  color: #8c8c8c;
}

.bucket-bg {
  background: rgba(55, 55, 55, 0.8);
}

.content-wrapper {
  min-height: 660px;
}

.list-group-item {
  background-color: transparent;
}

.article-content b, .article-content strong {
  color: #adb5bd;
}

.card {
  background: rgba(55, 55, 55, 0.8);
}

.zoom-wrap {
  position: relative;
  border-radius: 4px;
}
.zoom-wrap .zoom-item {
  transition: transform 0.3s cubic-bezier(0, 1, 0.4, 1), -webkit-transform 0.3s cubic-bezier(0, 1, 0.4, 1);
  display: block;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
}
.zoom-wrap:hover .zoom-item {
  position: absolute;
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
  z-index: 99;
  box-shadow: 0 2px 40px 0 rgba(0, 0, 0, 0.7);
}
.zoom-wrap-footer {
  background: linear-gradient(to bottom, transparent, transparent 19px, #262e41 19px);
}

.author-hall-wrap:hover .zoom-item {
  position: static;
}

.header-wrap {
  background: #141414;
}
.header-wrap .header-top {
  padding-top: 10px;
}
.header-wrap .navbar-main {
  background: #141414;
  border-bottom: 1px solid #333;
  height: 57px;
}
.header-wrap .navbar-nav .nav-link {
  color: #fff;
  font-weight: bold;
  font-size: 15px;
}
.header-wrap .navbar-nav .hover-item {
  position: relative;
}
.header-wrap .navbar-nav .nav-link:hover,
.header-wrap .navbar-nav .active > .nav-link {
  color: #22c38b;
}
.header-wrap .hover-item .hover-menu {
  display: none;
  background: #232323;
  left: 0;
  border-radius: 2px;
  min-width: 120px;
  position: absolute;
  top: 32px;
  z-index: 999;
  padding: 5px 0;
}
.header-wrap .hover-item .hover-menu .nav-link {
  font-weight: 400;
  font-size: 13px;
  display: inline-block;
  padding: 5px 10px;
  margin-right: 0;
}
.header-wrap .hover-item .hover-menu .active .nav-link {
  color: #22c38b;
}
.header-wrap .hover-item:hover .hover-menu {
  display: block;
}

.head-search {
  position: relative;
}
.head-search .form-control {
  height: 34px;
  line-height: 34px;
  padding: 3px 40px 3px 15px;
  background-color: #282828;
  border: 1px solid transparent;
  border-radius: 22px;
  max-width: 320px;
  color: #ced4da;
}
.head-search .form-control:focus {
  box-shadow: none;
  border-color: #01FF95;
}
.head-search .btn {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 0 0.55rem;
}

.show-user .btn {
  background-color: #333333;
  border-radius: 30px;
  padding: 0.275rem 0.75rem;
}
.show-user .active-avatar img {
  width: 20px;
  height: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.login-dialog {
  max-width: 400px;
}
.login-dialog .modal-content {
  background-color: #141414;
}
.login-dialog .auth-header {
  text-align: center;
  font-size: 22px;
  padding: 10px 0;
}
.login-dialog .auth-header .btn-modal-reg {
  margin-top: 10px;
  padding: 0.375rem 2.25rem;
}
.login-dialog .auth-line {
  height: 40px;
  line-height: 40px;
  display: block;
  position: relative;
}
.login-dialog .auth-line:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  top: 20px;
  background-color: rgba(255, 255, 255, 0.08);
  z-index: 9;
}
.login-dialog .auth-line__text {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}
.login-dialog .auth-line__text span {
  padding: 5px 10px;
  background-color: #141414;
}
.login-dialog .remember-box {
  position: relative;
  height: 36px;
}

.index-carousel {
  cursor: pointer;
  overflow: hidden;
  padding-bottom: 30px;
}
.index-carousel .carousel-item img {
  height: 280px;
  width: 100%;
  -o-object-fit: fill;
     object-fit: fill;
}
.index-carousel .carousel-control-prev,
.index-carousel .carousel-control-next {
  background: url("../images/carousel-control.svg") no-repeat;
  width: 40px;
  height: 110px;
  background-size: 200% 200%;
  position: absolute;
  z-index: 9;
  top: calc(50% - 60px);
}
.index-carousel .carousel-control-next {
  right: -40px;
}
.index-carousel .carousel-control-next:hover {
  background-position: 0 100%;
}
.index-carousel .carousel-control-prev {
  left: -40px;
  background-position: 100% 0;
  -webkit-transition: right 0.2s;
  transition: right 0.2s;
}
.index-carousel .carousel-control-prev:hover {
  background-position: 100% 100%;
}
.index-carousel:hover .carousel-control-prev {
  left: 0;
  -webkit-transition: left 0.2s;
  transition: left 0.2s;
}
.index-carousel:hover .carousel-control-next {
  right: 0;
  -webkit-transition: right 0.2s;
  transition: right 0.2s;
}
.index-carousel .carousel-indicators {
  margin-bottom: 0;
  margin-left: -3px;
  margin-right: -3px;
}
.index-carousel .carousel-indicators li {
  width: auto;
  -webkit-box-flex: 1;
          flex: 1;
}

.carousel-inner:hover {
  overflow: initial;
}

.cover-carousel {
  padding-bottom: 30px;
}
.cover-carousel .carousel-header {
  display: block;
  overflow: hidden;
}
.cover-carousel .carousel-header h2 {
  font-size: 20px;
  font-weight: 500;
  float: left;
}
.cover-carousel-controls {
  float: right;
  position: relative;
}
.cover-carousel-controls .carousel-control-next,
.cover-carousel-controls .carousel-control-prev {
  position: static;
  display: inline-block;
  background: #494949;
  padding: 3px 5px;
  font-size: 22px;
  border-radius: 3px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  width: auto;
}
.cover-carousel .carousel-indicators {
  margin-bottom: 0;
  margin-left: -3px;
  margin-right: -3px;
}
.cover-carousel .carousel-indicators li {
  width: auto;
  -webkit-box-flex: 1;
          flex: 1;
}

.cover-grids-header h2 {
  font-size: 20px;
  font-weight: 500;
}
.cover-grids-content {
  display: block;
}
.cover-grids .cover-item-parent {
  min-height: 210px;
}

.top-tabs {
  position: relative;
  margin-bottom: 10px;
}
.top-tabs:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  bottom: 1px;
  background-color: #5a5a5a;
}
.top-tabs h3 {
  -webkit-box-flex: 1;
          flex: 1;
  font-weight: 500;
}
.top-tabs .nav-link {
  color: #ffffff;
  border-radius: 0;
  border-bottom: 2px solid transparent;
}
.top-tabs .nav-link.active {
  color: #01FF95;
  background-color: transparent;
  border-bottom: 2px solid #01FF95;
  position: relative;
}
.top-tabs .nav-link.active:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: calc(100% + 2px);
  left: calc(50% - 7px);
  border-color: #01ff95 rgba(55, 55, 55, 0.8) rgba(55, 55, 55, 0.8);
  border-style: solid;
  border-width: 5px 7px;
}

.track-actions {
  position: absolute;
  right: 10px;
  bottom: 5px;
  height: 30px;
  line-height: 30px;
  top: 50%;
  margin-top: -20px;
  display: none;
  z-index: 99;
}
.track-actions a {
  text-align: center;
  font-size: 20px;
  width: 30px;
  display: inline-block;
}
.track-actions a:hover {
  background-color: #565656;
}

.line-tracks .track-item {
  position: relative;
  margin: 10px 0;
  height: 48px;
}
.line-tracks .track-item .tra-num {
  margin: 0;
  font: 300 24px Oswald, CoreSans, Arial, sans-serif;
  color: #8c8c8c;
  text-align: center;
  width: 40px;
  line-height: 48px;
  display: inline-block;
}
.line-tracks .track-item .tra-num.o-1 {
  color: #B62806;
}
.line-tracks .track-item .tra-num.o-2 {
  color: #458BA1;
}
.line-tracks .track-item .tra-num.o-3 {
  color: #9ED700;
}
.line-tracks .track-item .action-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  font-size: 30px;
  margin-top: -15px;
  display: none;
  text-align: center;
}
.line-tracks .track-item .track-progress {
  top: 0;
  left: 40px;
  right: 0;
  bottom: 0;
  z-index: 2;
  position: absolute;
  overflow: hidden;
}
.line-tracks .track-item .track-progress .jp-seek-bar {
  height: 100%;
  width: 100%;
}
.line-tracks .track-item .track-progress .jp-seek-bar .jp-play-bar {
  height: 100%;
  background-color: #22c38b;
}
.line-tracks .track-item .track-progress .jp-time {
  display: inline-block;
  position: absolute;
  right: 10px;
  bottom: -5px;
  font-size: 10px;
  color: #8c8c8c;
}
.line-tracks .track-item .track-progress .track-name {
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  position: absolute;
  line-height: 24px;
  top: 0;
  left: 0;
}
.line-tracks .track-item .track-progress .track-user {
  display: block;
  color: #39c1de;
  font-size: 12px;
  position: absolute;
  line-height: 24px;
  left: 0;
  bottom: 0;
}
.line-tracks .track-item .tra-detail {
  position: absolute;
  top: 0;
  left: 40px;
  right: 5px;
  padding: 0 5px;
  line-height: 24px;
  z-index: 2;
  overflow: hidden;
}
.line-tracks .track-item .tra-detail .track-name {
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.line-tracks .track-item .tra-detail .track-user {
  display: block;
  color: #39c1de;
  font-size: 12px;
}
.line-tracks .track-item:hover .tra-detail,
.line-tracks .track-item:hover .track-progress {
  right: 120px;
}
.line-tracks .track-item:hover .track-actions {
  display: inline-block;
}
.line-tracks .track-item:hover .action-wrap {
  display: block;
}
.line-tracks .track-item:hover .tra-num {
  display: none;
}
.line-tracks .jp-state-playing .action-wrap {
  display: block;
}
.line-tracks .jp-state-playing .tra-num {
  display: none;
}
.line-tracks .jp-state-playing .tra-detail .track-user {
  color: #8c8c8c;
}

.cover-items {
  margin-left: -5px;
  margin-right: -5px;
}
.cover-items .cover-item {
  float: left;
  box-sizing: border-box;
  padding: 5px;
  margin-top: 10px;
}
.cover-items.items-three .cover-item {
  width: 33.333333%;
}
.cover-items.items-four .cover-item {
  width: 25%;
}
.cover-items.items-five .cover-item {
  width: 20%;
}

.cover-item-parent {
  display: block;
}
.cover-item-con {
  background: #373737;
}
.cover-item-con .hover-show {
  display: none;
}
.cover-item-con:hover .hover-show {
  display: block;
}
.cover-artwork {
  position: relative;
  display: block;
  overflow: hidden;
}
.cover-artwork img {
  width: 100%;
  height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
}
.cover-media__text {
  padding: 5px 10px;
  background: #373737;
}
.cover-media__text p {
  margin-bottom: 0;
}
.cover-media__name {
  font-weight: 600;
}
.cover-media__user {
  font-size: 12px;
  color: #8c8c8c;
}
.cover-media__action {
  color: #8c8c8c;
}

.bucket-item {
  margin: 5px 0;
  padding-right: 5px;
  position: relative;
}
.bucket-item .artwork-parent {
  display: inline-block;
  position: relative;
}
.bucket-item .bucket-num {
  display: inline-block;
  color: #8c8c8c;
  font: 300 1.8rem Oswald, CoreSans, Arial, sans-serif;
  width: 40px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  vertical-align: top;
}
.bucket-item .bucket-num.tc-num-1 {
  color: #B62806;
}
.bucket-item .bucket-num.tc-num-2 {
  color: #458BA1;
}
.bucket-item .bucket-num.tc-num-3 {
  color: #9ED700;
}
.bucket-item .cover-artwork {
  clip: auto;
  width: 50px;
  height: 50px;
}
.bucket-item .action-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
}
.bucket-item .action-wrap .action-play {
  font-size: 32px;
  line-height: 50px;
  display: inline-block;
}
.bucket-item .track-progress {
  position: absolute;
  left: 100px;
  right: 10px;
  top: 0;
  bottom: 0;
  height: 50px;
  z-index: 1;
}
.bucket-item .track-progress .jp-seek-bar {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}
.bucket-item .track-progress .jp-seek-bar .jp-play-bar {
  height: 100%;
  background-color: #22c38b;
}
.bucket-item .track-progress .jp-time {
  display: inline-block;
  position: absolute;
  right: 5px;
  bottom: -5px;
  font-size: 10px;
  color: #8c8c8c;
}
.bucket-item .track-progress .tc-name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 25px;
  z-index: 2;
}
.bucket-item .track-progress .tc-label {
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 25px;
  z-index: 2;
}
.bucket-item .bucket-meta {
  position: absolute;
  left: 100px;
  right: 10px;
  top: 0;
  bottom: 0;
  z-index: 2;
  line-height: 25px;
}
.bucket-item .bucket-meta p {
  margin-bottom: 0;
  max-height: 25px;
}
.bucket-item .bucket-meta p.tc-name {
  font-weight: 700;
}
.bucket-item:hover .track-actions {
  display: inline-block;
}
.bucket-item:hover .action-wrap {
  display: block;
}
.bucket-item:hover .bucket-meta,
.bucket-item:hover .track-progress {
  right: 120px;
}

.jp-state-playing .action-wrap {
  display: block;
}

.tc-item .tc-label a {
  color: #8c8c8c;
}

.bucket-tracks {
  background-color: rgba(55, 55, 55, 0.8);
  padding: 10px;
}

.cate-tabs .nav-link {
  font-size: 16px;
}

.bucket-two {
  clear: both;
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
  padding-top: 10px;
}
.bucket-two .tc-item {
  width: 50%;
  float: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.bucket-two .tc-num {
  display: none;
}
.bucket-two .bucket-item .bucket-meta,
.bucket-two .bucket-item .track-progress {
  left: 60px;
}

.bucket-category-tracks .tc-num {
  display: none;
}
.bucket-category-tracks .bucket-item .bucket-meta,
.bucket-category-tracks .bucket-item .track-progress {
  left: 60px;
}

.page-footer {
  background: #373737;
}

.filter .dropdown-hover {
  display: inline-block;
  margin-right: 5px;
}
.filter .dropdown-hover:hover {
  background-color: rgba(55, 55, 55, 0.8);
}
.filter .btn-dropdown {
  background-color: transparent;
  font-weight: bold;
}
.filter .dropdown-menu {
  background-color: rgba(55, 55, 55, 0.8);
  width: 360px;
}
.filter .dropdown-item {
  display: inline-block;
  width: auto;
  margin-right: 10px;
}
.filter .dropdown-item:hover {
  color: #22c38b;
}

.filter-items .filter-item {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-transform: uppercase;
}
.filter-items .item-title {
  font-size: 15px;
  font-weight: 600;
  padding-right: 10px;
}
.filter-items .item-link {
  font-size: 15px;
  font-weight: 700;
  padding: 0 5px;
  color: #8c8c8c;
  display: inline-block;
}
.filter-items .item-link:hover {
  color: #22c38b;
}
.filter-items .active .item-link {
  color: #22c38b;
}

.page-selectors {
  display: block;
  margin-bottom: 0;
}
.page-selectors .page-selector {
  display: inline-block;
  margin: 0 18px 14px 0;
}
.page-selectors .selector-link {
  display: inline-block;
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
}
.page-selectors .active .selector-link {
  color: #22c38b;
  border-bottom: 2px solid #22c38b;
}
.page-selectors .active .selector-link:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: calc(100% + 2px);
  left: calc(50% - 7px);
  border-color: #22c38b #262626 #262626;
  border-style: solid;
  border-width: 5px 7px;
}

.interior-tracks .tracks-item, .interior-tracks .tracks-header {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  background-color: #373737;
  margin-bottom: 2px;
}
.interior-tracks .tracks-header {
  border-top: 1px solid #494949;
  background-color: transparent;
  font-weight: bold;
  margin-top: 10px;
}
.interior-tracks .track-cover {
  height: 40px;
  width: 40px;
}
.interior-tracks .cover-artwork {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.interior-tracks .track-control {
  height: 40px;
  width: 40px;
  position: relative;
}
.interior-tracks .track-control .action-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  font-size: 28px;
  z-index: 9;
  display: none;
}
.interior-tracks .track-control:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 7;
  display: none;
}
.interior-tracks .track-control:after {
  font-family: bootstrap-icons !important;
  content: "\F4F3";
  display: none;
  font-size: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  margin-top: -13px;
  margin-left: -13px;
}
.interior-tracks .track-progress {
  -webkit-box-flex: 1;
          flex: 1;
  position: relative;
  height: 40px;
  line-height: 40px;
}
.interior-tracks .track-title-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  bottom: 0;
  z-index: 9;
  height: 20px;
  line-height: 20px;
  margin-top: -10px;
  max-width: 100%;
}
.interior-tracks .jp-seek-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}
.interior-tracks .jp-seek-bar .jp-play-bar {
  height: 100%;
  width: 0;
  background-color: #22c38b;
}
.interior-tracks .jp-time {
  position: absolute;
  top: 50%;
  right: 0;
  padding-right: 7px;
  color: #8c8c8c;
  z-index: 5;
  height: 20px;
  line-height: 20px;
  margin-top: -10px;
}
.interior-tracks .track-title {
  position: relative;
  display: inline-block;
  padding-right: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding-left: 10px;
  -webkit-box-flex: 1;
          flex: 1;
}
.interior-tracks .track-title .tra-mark {
  position: absolute;
  top: 0;
  right: 0;
  color: #ff53a0;
}
.interior-tracks .track-right {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.interior-tracks .item-sub {
  width: 80px;
  text-align: left;
  display: inline-block;
  padding: 0 5px;
  overflow: hidden;
}
.interior-tracks .tra-author {
  width: 120px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.interior-tracks .tra-price,
.interior-tracks .tra-listens {
  width: 60px;
}
.interior-tracks .tra-actions {
  width: 110px;
  text-align: right;
}
.interior-tracks .tra-actions .ac-item {
  display: inline-block;
  width: 30px;
  text-align: center;
  font-size: 16px;
}
.interior-tracks .tra-actions .ac-item:hover .bi-heart {
  color: #ff53a0;
}
.interior-tracks .tracks-item .item-sub {
  color: #8c8c8c;
  font-size: 11px;
}
.interior-tracks .tracks-item .tra-author {
  color: #39c1de;
}
.interior-tracks .tracks-item:hover .track-control:before, .interior-tracks .tracks-item:hover .action-wrap {
  display: -webkit-box;
  display: flex;
}
.interior-tracks .jp-state-playing .track-control:before, .interior-tracks .jp-state-playing .action-wrap {
  display: -webkit-box;
  display: flex;
}
.interior-tracks .active-player .track-title-wrap {
  padding-right: 66px;
}
.interior-tracks .active-player .tra-mark-wrap {
  padding-right: 86px;
}

.pagination-wrap {
  margin: 10px 0 5px;
  position: relative;
  text-align: center;
  height: 40px;
}
.pagination-wrap nav {
  margin: 0;
  border: 0;
  width: auto;
  display: inline-block;
}
.pagination-wrap nav .pagination {
  margin-bottom: 0;
}
.pagination-wrap .page-link {
  background-color: transparent;
  padding: 0.5rem 0.35rem;
  color: #fff;
  opacity: 0.5;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  border-bottom: 2px solid transparent;
}
.pagination-wrap .page-link:focus {
  box-shadow: none;
}
.pagination-wrap .page-item.active .page-link {
  z-index: 3;
  background-color: transparent;
  border-color: transparent;
  border-bottom: 2px solid #01ff95;
  opacity: 1;
}
.pagination-wrap .page-item.disabled .page-link {
  background-color: transparent;
  border-color: transparent;
}
.pagination-wrap .page-item:first-child .page-link,
.pagination-wrap .page-item:last-child .page-link {
  text-indent: -9999px;
  width: 40px;
  height: 40px;
  position: relative;
}
.pagination-wrap .page-item:first-child .page-link:before,
.pagination-wrap .page-item:last-child .page-link:before {
  content: "\F22D";
  font-family: bootstrap-icons !important;
  font-size: 30px;
  position: absolute;
  top: 3px;
  left: 5px;
  text-indent: initial;
}
.pagination-wrap .page-item:last-child .page-link:before {
  content: "\F231";
}
.pagination-wrap h3 {
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
  text-transform: uppercase;
}

.page-results-per {
  position: absolute;
  left: 0;
  top: 5px;
}
.page-results-per .per-link {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  font-size: 12px;
  border-radius: 20px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #6c6c6c;
  color: #fff;
  font-weight: 700;
  opacity: 0.5;
}
.page-results-per .per-link:hover {
  opacity: 1;
}
.page-results-per .per-link-active {
  opacity: 1;
}

.page-jump {
  display: block;
  position: absolute;
  right: 0;
  top: 5px;
}
.page-jump-input {
  width: 30px;
  text-align: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  border: 0;
  padding: 3px;
}
.page-jump-input:focus {
  -webkit-appearance: none;
  outline: 2px solid #01ff95;
}

.modal-playlist .playlist-select {
  margin: -15px -20px 0 -20px;
}
.modal-playlist .btn-create {
  height: 50px;
  line-height: 1;
  text-align: left;
  background-color: rgba(55, 55, 55, 0.8);
  border-radius: 0;
}
.modal-playlist .btn-create i {
  padding-left: 15px;
}
.modal-playlist .playlist-wrap {
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-playlist .playlist-select-item {
  padding: 6px 0 6px 75px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.modal-playlist .playlist-select-item .item-cover {
  display: inline;
  float: left;
  margin-left: -50px;
  overflow: hidden;
  width: 40px;
}
.modal-playlist .playlist-select-item .item-cover img {
  width: 40px;
  height: 40px;
}
.modal-playlist .playlist-select-item p {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 20px;
}
.modal-playlist .playlist-select-item .name {
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-playlist .playlist-select-item:hover {
  background-color: rgba(55, 55, 55, 0.8);
}

.interior-covers .cover-artwork img {
  height: 220px;
}

.interior-playlists .cover-item-parent {
  min-height: 278px;
}

.release-artwork-parent {
  width: 100%;
  padding: 0;
}

.release-artwork {
  width: 100%;
  max-height: 400px;
  margin-bottom: 10px;
}

.release-desc-item {
  margin-bottom: 10px;
}
.release-desc-item .label {
  margin-right: 3px;
  text-transform: uppercase;
  color: #8c8c8c;
}

.release-content__title {
  font-size: 22px;
  font-weight: 200;
  margin: 16px 0;
}
.release-content-item {
  display: block;
  height: 40px;
  line-height: 40px;
}
.release-content-item__profile-image {
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  width: 35px;
  height: 35px;
  position: relative;
  margin-right: 12px;
}
.release-content .value {
  font: 700 1.077em SourceSans, Arial, sans-serif;
  display: inline;
}
.release-content .social-share .social-share-icon {
  border-radius: 5px;
  color: #fff;
  border-color: rgba(55, 55, 55, 0.8);
  background-color: rgba(55, 55, 55, 0.8);
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.release-content .social-share .icon-wechat .wechat-qrcode {
  z-index: 9999;
  top: 36px;
}
.release-content .social-share .icon-wechat .wechat-qrcode:after {
  bottom: initial;
  top: -15px;
  border-color: transparent transparent #fff transparent;
}

.interior-ranks .track-control {
  height: 60px;
  display: -webkit-box;
  display: flex;
  width: 150px;
  -webkit-box-align: center;
          align-items: center;
}
.interior-ranks .track-control .cover-artwork {
  width: 60px;
}
.interior-ranks .track-control:before {
  opacity: 0;
}
.interior-ranks .track-control .rank-action-wrap {
  width: 40px;
  font-size: 28px;
  text-align: center;
}
.interior-ranks .track-num {
  width: 50px;
  color: #fff;
  font-size: 24px;
  text-align: right;
}
.interior-ranks .track-num.tc-num-1 {
  color: #B62806;
}
.interior-ranks .track-num.tc-num-2 {
  color: #458BA1;
}
.interior-ranks .track-num.tc-num-3 {
  color: #9ED700;
}
.interior-ranks .track-play {
  left: 120px;
  display: block;
  height: 60px;
  line-height: 60px;
  background-color: transparent;
}
.interior-ranks .track-title a {
  font-weight: 700;
}
.interior-ranks .tracks-item .tra-author {
  font-weight: 700;
}
.interior-ranks .tracks-item:hover .track-control:before, .interior-ranks .tracks-item:hover .action-wrap {
  display: none;
}
.interior-ranks .track-progress {
  height: 60px;
  line-height: 60px;
}

.author-image .btn-loading::before {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 50%;
  left: 50%;
  margin-top: -1rem;
  margin-left: -1rem;
  color: #22c38b;
}

.cert-image {
  width: 100%;
  border: 1px dashed #c6d3e6;
  position: relative;
  text-align: center;
}
.cert-image img {
  max-width: 100%;
  height: 200px;
}
.cert-image .drop-tip {
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 0;
}

.cert-image .btn {
  position: absolute;
  font-weight: normal;
  font-size: 14px;
  width: 100px;
  padding: 0.2125rem 1.25rem;
  bottom: 5px;
  left: 50%;
  margin-left: -50px;
}

.hall-art {
  position: relative;
  margin: 50px 0 30px;
  text-align: center;
  border-radius: 10px;
  background: rgba(55, 55, 55, 0.8);
  padding: 15px;
}
.hall-art .cover-art {
  width: 100px;
  height: 100px;
  margin: -60px auto 0;
}
.hall-art .cover-art img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.hall-art-info {
  margin-top: 15px;
}
.hall-art-info a {
  color: #fff;
  font-weight: 500;
  display: block;
  font-size: 19px;
}
.hall-art-cells {
  display: -webkit-box;
  display: flex;
  padding-top: 10px;
  margin-top: 10px;
  -webkit-box-pack: center;
          justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.hall-art-cells .stats {
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  color: #8c8c8c;
  font-size: 13px;
}

.shape-parent {
  background-color: #373737;
}

.shape-blur {
  position: absolute;
  pointer-events: none;
  top: 0;
  right: 0;
  left: 0;
}

.author-shape {
  background-size: cover;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.author-shape .author-bg, .author-shape:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.author-shape:before {
  background: rgba(255, 255, 255, 0.5);
  content: "";
  z-index: 5;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -180%, 0);
          transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -180%, 0);
}
.author-shape:hover:before {
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
          transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
}
.author-shape .author-bg {
  z-index: 2;
}
.author-shape .author-bg img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 50%;
  display: block;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
}
.author-shape .author-gradient {
  background: linear-gradient(to top, #171719 0px, rgba(23, 23, 25, 0.35));
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}
.author-shape .author-info {
  z-index: 9;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.author-shape .author-info .author-avatar {
  width: 150px;
  min-width: 150px;
  height: 150px;
  position: relative;
}
.author-shape .author-info .author-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff;
}
.author-shape .author-info .author-cells {
  padding: 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.author-shape .author-info .btn-author-follow {
  padding: 0.375rem 2.25rem;
  border-radius: 36px;
  background-color: #e91e63;
  color: #fff;
}
.author-shape .author-banner-wrap {
  position: absolute;
  top: 36px;
  right: 36px;
  z-index: 99;
}
.author-shape .author-banner-wrap .btn-author-banner {
  font-size: 36px;
  color: #e91e63;
}

.author-shape-parent {
  min-height: 160px;
}

.author-stats-item {
  color: #adb5bd;
  font-size: 15px;
}
.author-stats-item span {
  color: #fff;
  display: block;
}

.navbar-selectors .selector-link {
  font-size: 18px;
  font-weight: 500;
}

/*.author-tracks {
    .track-right {
        width: 300px;
    }
}*/
.border-bottom {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.nav-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.account-space-bg {
  background: url(../images/04.png) no-repeat center center;
  background-size: cover;
}

.account-space {
  padding-top: 36px;
  padding-bottom: 78px;
}
.account-space .breadcrumb {
  background-color: transparent;
  padding-left: 0;
}

.account-container {
  margin-top: -80px;
}

.account-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.account-avatar .avatar-img {
  width: 100px;
  border-radius: 50%;
}
.account-avatar .avatar-status {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 24px;
}

.card-sidebar {
  background-color: #373737;
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-sidebar .account-name {
  font-weight: 500;
  font-size: 1.25rem;
}
.card-sidebar .text-cap {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: #8c8c8c;
}
.card-sidebar .nav-vertical {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.card-sidebar .nav-vertical .nav-item {
  display: inline-block;
  width: 50%;
}
.card-sidebar .nav-vertical .nav-item .nav-link {
  padding-right: 0;
  font-weight: 600;
  position: relative;
}
.card-sidebar .nav-vertical .nav-item .nav-link.active {
  color: #22c38b;
}
.card-sidebar .nav-vertical .nav-item .nav-link-badge {
  position: absolute;
  top: 12px;
  right: 30px;
  color: #fff;
  background-color: #39c1de;
}
.card-sidebar .nav-icon {
  opacity: 0.7;
  margin-right: 10px;
}

.card-dark {
  background-color: #373737;
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.card-dark .card-header-title {
  font-weight: 400;
  font-size: 18px;
}

.acc-stats {
  background-color: #373737;
  height: 110px;
  border-radius: 0.25rem;
  padding: 20px 20px 20px 110px;
}
.acc-stats .stats-text {
  font-weight: 400;
  color: #8c8c8c;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
}
.acc-stats .stats-num {
  font-size: 16px;
  color: #8c8c8c;
  margin-bottom: 0;
}
.acc-stats .acc-stats-icon {
  position: absolute;
  top: 50%;
  left: 50px;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  font-size: 40px;
}
.acc-stats-sm {
  padding-left: 70px;
}
.acc-stats-sm .acc-stats-icon {
  left: 40px;
  height: 30px;
  width: 30px;
  margin-top: -15px;
  font-size: 30px;
}
.acc-stats-sm .stats-text {
  font-size: 16px;
}
.acc-stats-sm .stats-num {
  font-size: 14px;
}

.no-data {
  width: auto;
  margin: 50px auto;
  line-height: 40px;
  position: relative;
  padding-left: 45px;
  font-weight: 600;
}
.no-data:before {
  content: "\F332";
  font-family: bootstrap-icons !important;
  font-size: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

.no-author .tracks-item, .no-author .tracks-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.no-author .tracks-header {
  margin-top: 0;
  border-top: 0;
}
.no-author .tra-actions {
  width: 40px;
}

.upload-track-cover {
  width: 100%;
  text-align: center;
  position: relative;
  cursor: pointer;
  margin-bottom: 12px;
  background-color: rgba(0, 0, 0, 0.1);
}

.upload-cover-content {
  overflow: hidden;
  position: relative;
}
.upload-cover-content .cover-img {
  width: 100%;
}

.upload-audio {
  background-color: rgba(0, 0, 0, 0.1);
}

.charge-content .package-list {
  margin-left: -7.5px;
  margin-right: -7.5px;
}
.charge-content .package-list .item {
  text-align: center;
  width: 25%;
  float: left;
  padding: 7.5px;
}
.charge-content .package-list .item a {
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 0.375rem;
}
.charge-content .package-list .item .amount {
  display: block;
  font-size: 26px;
  margin-top: 10px;
}
.charge-content .package-list .item .amount b {
  font-size: 14px;
}
.charge-content .package-list .item .price {
  padding: 5px 0;
}
.charge-content .package-list .active a {
  border: 1px solid #22c38b;
  color: #22c38b;
}
.charge-content .package-list .active a::before {
  content: " ";
  position: absolute;
  bottom: -30px;
  right: -30px;
  background-color: #22c38b;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 60px;
  height: 60px;
  z-index: 1;
}
.charge-content .package-list .active a::after {
  position: absolute;
  z-index: 2;
  content: "\F633";
  display: inline-block;
  font-family: bootstrap-icons !important;
  color: #fff;
  font-size: 26px;
  bottom: 0;
  right: 0;
}

.btn-recharge {
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  width: 200px;
}

.cart-dropdown .dropdown-menu {
  min-width: 26rem;
  color: #fff;
}
.cart-dropdown .card {
  background-color: transparent;
}
.cart-dropdown .list-group-item .column-desc {
  padding: 0 5px;
}
.cart-dropdown .card-body {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}
.cart-dropdown .card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-table {
  margin-bottom: 0;
  color: #fff;
}
.cart-table td, .cart-table th {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cart-table thead th {
  border: 0;
}
.cart-table tbody > tr > td {
  padding: 0.5rem;
  vertical-align: middle;
  border-color: rgba(255, 255, 255, 0.08);
}
.cart-table tbody > tr > td.column-thumb .cover-parent {
  height: 40px;
  width: 40px;
  display: inline-block;
}
.cart-table tbody > tr > td.column-thumb .cover-parent img {
  height: 100%;
  width: 100%;
}
.cart-table tbody > tr > td.column-price {
  width: 95px;
  padding-right: 0;
  color: #dee2e6;
}
.cart-table tbody > tr > td.column-desc {
  padding: 8px;
}
.cart-table tbody > tr > td.column-price {
  width: 95px;
  padding-right: 0;
}

.entry-container {
  padding: 1.5rem 2rem 2rem;
  background-color: rgba(55, 55, 55, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -1px 0px rgba(0, 0, 0, 0.02);
}

.entry-header {
  display: -webkit-box;
  display: flex;
}
.entry-header .post-thumbnail {
  position: relative;
  padding: 0;
  width: 220px;
  height: 220px;
  margin-right: 20px;
  border-radius: 4px;
  background-color: rgba(110, 120, 130, 0.2);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 0.4s, -webkit-transform 0.35s;
  transition: opacity 0.4s, -webkit-transform 0.35s;
  transition: opacity 0.4s, transform 0.35s;
  transition: opacity 0.4s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
  margin-top: -3.5rem;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
}
.entry-header .post-thumbnail img {
  border-radius: inherit;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.entry-header .entry-info-parent {
  -webkit-box-flex: 1;
          flex: 1;
}

.entry-info span + span:before, .entry-cat li + li:before {
  display: inline-block;
  content: "\B7";
  color: var(--text-secondary-color);
  width: 1.25rem;
  font-weight: bold;
  text-align: center;
}

.btn-play-wrap {
  display: -webkit-inline-box;
  display: inline-flex;
  position: relative;
  padding-left: 50px;
  height: 46px;
}
.btn-play-wrap .btn-play {
  color: #1b869d;
  border-width: 0;
  font-size: 22px;
  padding: 5px;
  background-color: #1b869d;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-play-wrap .btn-play i {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #fff;
  color: white;
}
.btn-play-wrap .play-count {
  display: inline-block;
  font-size: 13px;
  width: 80px;
  background-color: #1b869d;
  border-radius: 19px;
  padding-left: 20px;
  height: 36px;
  line-height: 36px;
  margin-top: 5px;
  margin-left: -30px;
}
.btn-play-wrap .play-count .count {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.btn-track-round {
  border-color: #8c94a8;
  border-radius: 18px;
  padding: 0.375rem 0.75rem;
  font-size: 13px;
  margin: 0 5px;
}

.entry-player {
  margin-top: 10px;
  position: relative;
}
.entry-player-waveform {
  width: 100%;
  height: 110px;
  position: relative;
}
.entry-player-waveform .player-head-bg {
  background: -webkit-linear-gradient(left, #8dcb04, #3bc1d9);
  background-size: cover;
  -webkit-mask-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.entry-player-waveform * {
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
      user-select: none;
  box-sizing: content-box;
}
.entry-player-waveform img {
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  z-index: 1;
}
.entry-player-waveform .player-wave, .entry-player-waveform .player-head, .entry-player-waveform .player-progress {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.entry-player-waveform .player-wave {
  z-index: 1;
}
.entry-player-waveform .player-head {
  z-index: 2;
  width: 50%;
  overflow: hidden;
}
.entry-player-waveform .jp-current-time, .entry-player-waveform .jp-duration {
  top: 46px;
  left: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 10px;
  font-weight: 500;
  padding: 0 5px;
  display: inline-block;
  height: 1rem;
  line-height: 1rem;
  border-radius: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 3;
}
.entry-player-waveform .jp-duration {
  left: auto;
  right: 0;
}
.entry-player-footer {
  padding: 5px 0;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
.entry-player-footer .player-controls {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.entry-player-footer .player-controls .btn-control {
  border-width: 0;
  font-size: 50px;
  padding: 0;
}
.entry-player-footer .player-controls .jp-next {
  font-size: 36px;
  margin-right: 10px;
}
.entry-player-footer .player-controls .jp-prev {
  font-size: 36px;
  margin-left: 10px;
}
.entry-player-footer .player-mode-parent, .entry-player-footer .volume-control-parent {
  position: absolute;
  top: 50%;
  height: 30px;
  line-height: 30px;
  margin-top: -15px;
}
.entry-player-footer .player-mode-parent {
  left: 0;
}
.entry-player-footer .player-mode-parent .toggle-model {
  height: 28px;
  width: 28px;
  display: inline-block;
  background-image: url("../images/loop.png");
  background-size: cover;
  text-indent: -999px;
}
.entry-player-footer .player-mode-parent .shuffle {
  background-image: url("../images/shuffle.png");
}
.entry-player-footer .player-mode-parent .repeat {
  background-image: url("../images/repeat.png");
}
.entry-player-footer .volume-control-parent {
  right: 0;
  display: -webkit-box;
  display: flex;
}
.entry-player-footer .volume-control-parent .volume-control {
  margin-top: 3px;
  width: 100px;
}
.entry-player-footer .volume-control-parent .volume-icon {
  font-size: 28px;
}

.playlist-tabs .nav-link {
  padding: 0.5rem 0.5rem;
}

.playlist-items {
  min-height: 20px;
  max-height: 470px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px;
}
.playlist-items::-webkit-scrollbar {
  width: 7px;
  height: 1px;
}
.playlist-items::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #D0004A;
}
.playlist-items .list-item {
  padding: 5px 0;
  color: #777b86;
  position: relative;
  padding-right: 40px;
}
.playlist-items .list-item a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-items .list-item .btn-remove-playlist, .playlist-items .list-item .btn-add-item {
  position: absolute;
  right: 0;
  top: 4px;
  width: 22px;
  height: 22px;
  display: inline-block;
  text-align: center;
}
.playlist-items .active a {
  color: #22c38b;
}

.download-inner {
  margin: 50px auto;
  width: 600px;
  height: 520px;
  background-color: rgba(55, 55, 55, 0.8);
}

.down-wrap {
  width: 100%;
  padding: 15px;
}
.down-wrap .title {
  padding-left: 15px;
  margin-bottom: 20px;
  position: relative;
  font-size: 1.25rem;
}
.down-wrap .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background-color: #22c38b;
}
.down-wrap .detail {
  display: -webkit-box;
  display: flex;
  line-height: 30px;
}
.down-wrap .detail img {
  width: 120px;
  height: 120px;
}
.down-wrap .detail .item {
  margin-left: 60px;
  color: #8c8c8c;
}
.down-wrap .detail .item div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.down-wrap .detail .item span {
  margin-left: 10px;
  color: #fff;
}
.down-wrap .down-tips {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.05);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: justify;
          justify-content: space-between;
}

.materials-filter {
  background-color: #373737;
}

.filter-parent {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 5px;
}
.filter-parent .filter-item {
  position: relative;
}
.filter-parent .active::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  background-color: #373737;
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 6.5px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 9;
}

.page-orders {
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
  padding: 0 5px;
}
.page-orders .order-item {
  padding: 5px 10px;
  display: inline-block;
}
.page-orders .order-title {
  font-size: 15px;
  padding-right: 0;
}
.page-orders .order-link {
  display: inline-block;
}
.page-orders .active .order-link {
  color: #22c38b;
}

.material-item {
  margin-bottom: 20px;
  /* height: 235px; */
  position: relative;
  overflow: hidden;
}
.material-item-cover {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 67.45%;
  height: 0;
  background: #1b1b1b;
}
.material-item-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* min-height: 200px; */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.material-item-bottom {
  position: absolute;
  bottom: -28px;
  left: 15px;
  right: 15px;
  height: 60px;
  background: #1b1b1b;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.material-item-bottom .item-name {
  overflow: hidden;
  padding: 5px 10px;
  color: #3e3e3e;
}
.material-item-bottom .item-name h2 {
  font-size: 16px;
  margin: 0;
  line-height: 25px;
  font-weight: 500;
}
.material-item-info {
  padding: 10px;
  height: 15px;
  color: #8a8888;
  text-align: left;
  font-size: 13px;
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  display: none;
}
.material-item:hover .material-item-bottom {
  bottom: 0;
  color: #fff;
}
.material-item:hover .material-item-cover img {
  -webkit-transform: scale(0.7, 0.7);
          transform: scale(0.7, 0.7);
}
.material-item:hover .material-item-info {
  display: block;
}

.material-wrap .material-cover {
  text-align: center;
}
.material-wrap .material-cover img {
  max-width: 100%;
}

.card-material .btn-like {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  padding: 0;
  border: 1px solid #fff;
}
.card-material .btn-like:hover {
  border-color: #22c38b;
  background-color: #22c38b;
}
.card-material .list-group-item {
  border: 0;
}

.fileinput-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  height: 100%;
  opacity: 0;
  font-size: 200px !important;
  direction: ltr;
  cursor: pointer;
}

@media screen\9  {
  .fileinput-button input {
    font-size: 150% !important;
  }
}
.alert-upload {
  position: relative;
  padding: 0.45rem 0.85rem;
  margin-bottom: 0.25rem;
  border: 0;
  border-radius: 0.25rem;
  display: none;
}

.upload-progress {
  height: 0.25rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
  margin: 0.25rem 0;
  display: none;
}

.upload-progressbar {
  height: 0.25rem;
}

.three-comments {
  font-size: 14px;
  color: #fff;
}

.three-comments *, .three-comments ::after, .three-comments ::before {
  box-sizing: border-box;
  margin: 0;
}

.comment-loading {
  display: none;
}

.comment-loading__mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.comment-toast {
  position: fixed;
  z-index: 5500;
  font-size: 14px;
  width: 6.6rem;
  height: 6.6rem;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  line-height: 1.4;
}

.comment-loading__icon {
  font-size: 10px;
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
          animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
  background-size: 100%;
}

@-webkit-keyframes weuiLoading {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes weuiLoading {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
.comment-form-parent {
  display: -webkit-box;
  display: flex;
}

.comment-avatar {
  height: 42px;
  width: 42px;
  margin-right: 10px;
}

.comment-avatar img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.comment-form, .comment-auth {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
}

.comment-auth {
  height: 62px;
  line-height: 62px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(0, 0, 0, 0.2);
}

.comment-auth .login-link {
  color: #17a2b8;
  margin-right: 0.25rem;
}

.no-comment {
  color: #ffc107;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

.three-comments .form-group {
  margin-bottom: 1rem;
}

.three-comments .form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #f8f9fa;
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.three-comments textarea.form-control {
  height: auto;
  overflow: auto;
  resize: vertical;
  padding-right: 40px;
}

.three-comments .form-control:focus {
  box-shadow: none;
  border: 1px solid #01FF95;
}

.comment-form__footer {
  margin-bottom: 1rem;
  text-align: right;
}

.comment-form__btn {
  border-radius: 50rem;
  color: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  margin-left: 10px;
  border: 1px solid #17a2b8;
  user-select: none;
  background-color: transparent;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  cursor: pointer;
}

.comment-form__btn:hover {
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.three-comments .btn-link {
  border: 0;
  background-color: transparent;
  color: #fff;
  text-decoration: none;
  padding: 5px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.three-comments .btn-link:hover {
  color: #17a2b8;
}

/* 表情 */
.emoji-popover-parent,
.emoji-popover .emoji-wrap {
  position: relative;
}

.emoji-popover {
  position: absolute;
  top: 5px;
  right: 5px;
}

.emoji-popover .emoji-items {
  width: 360px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  -webkit-transform-origin: 21px -4px;
          transform-origin: 21px -4px;
  z-index: 99;
}

/*评论列表*/
.comment-media {
  padding: 16px 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
          align-items: flex-start;
}

.comment-media:last-child {
  padding-bottom: 0;
}

.comment-media__avatar {
  height: 42px;
  width: 42px;
  margin-right: 10px;
}

.comment-media__avatar img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.comment-media-wrap, .comment-media__bd {
  -webkit-box-flex: 1;
          flex: 1;
}

.comment-media-con {
  display: -webkit-box;
  display: flex;
}

.comment-media__tit a {
  font-size: 13px;
  color: #8c8c8c;
  text-decoration: none;
}

.comment-media__text {
  padding: 5px 0;
}

.btn-comment-like {
  height: 40px;
  min-width: 40px;
  padding-top: 20px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAb1JREFUOE+1lDFoU1EUhv/zAhkFyZJzXhDERapQ3DsoFES03cTBzaKDiK52kCIOuirSQYmbiLi1FREKOnRwk4IWFxdJzskSBMdA3i83JCGtTXhDvXCH+9653/3Puf+5giMackQc7AO5+wkAd0VkgeQcgN1+v/8gHVapVB4BmBeRPZI7AJ6Z2a+RkDGo3W4vi0gTwAcAOyLym+QSgOVh8IaIbJI8DmABwCWSK3meb6T/Y5C7fxKRz6r6cDJdd7+e1mb2evJ7RKyRPG9mF8agiLhMcktEzqjqXpm6RcQcye8ickVV3w8UufstAKtmdrIMZBSTsgDwxsxeDEAHZZaFpX0pNpVjpOgiyWae542ykKGALyTXzOzjANTtdo/1er2vJJ+Y2csyMHe/KSL3q9XquVqt9md8a51O51pRFM+LolhsNBq7s2CtVms+y7LtLMvu1Ov1t/uuf1QrAFdV9ewsUER8A/Bu0ir/tIi7PxaRpWmwBCG5aWark4cd2msRsU3yVHKvmf0YWuR0cr2I/FTVxYOKpzZtRDRJ3gBwb7jpqYi8UtWVw9Ke2f0RcRtAmmmsq+r6tNr9n2ekjH+mxfwFmEO4ExXWaPYAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: top center;
}

.btn-comment-like.active {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAWhJREFUOE+1lDtLw2AUht83gpsOJsXBTXfBf1DBQaUm3XRwkQ4uQlJQwUFaN3Fp0kKHDp11a4oXHEQHf4AOrg6ONh10q9AcaUqLvdKUesbznfOc+0dMSDghDjpAXiy5QEUOQUQFWCLx6gOnPjg9JUgBsgzgjcJn+vXs3HX2o5VIG1TRTZ1kAcB8V5ZfQBBw9q+egOeLJCJlp9zQt0GeYT0CiIYs9Ulz7dU26DNubSiC25CQwFwEsUjZvgkyqhrJPYEUxwIR+5GSXWiCdCslRHocEAVptWyfBaBK3IpS0OhRaCFkXXWd+yZIP55RlJ8XESyGIZF4R62+ot7lvttTqxrmtoCXoUCQHdV1rjrGH2RmmBcEj0aBtXrTs5AthWdYjQXbGg6Tc811TroWtNelaiRvBLLZH8YHzc2sdb8NPFpPNw9A5jociKJWshP9Agy9fk83d4VMKUBNwLzmZvKDSv6fb2SUaQ2y+QXDHnET18Ai1AAAAABJRU5ErkJggg==");
  color: #DD4D72;
}

.comment-media__ft {
  padding: 5px 0;
  display: -webkit-box;
  display: flex;
}

.comment-media__ft-l {
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
}

.comment-media__tm, .comment-media__as {
  font-size: 13px;
  color: #8c8c8c;
  margin-right: 10px;
  padding: 5px 0;
}

.three-comments .btn-edit-comment {
  color: #39c1de;
}

.three-comments .btn-delete-comment {
  color: #fb9096;
}

.three-comments .btn-delete-comment:hover {
  color: #fa5151;
}

.three-comments .hover-show {
  display: none;
}

.three-comments .comment-media__ft:hover .hover-show {
  display: -webkit-box;
  display: flex;
}

.comment-reply-actions {
  padding-top: 10px;
  text-align: right;
}

.comment-form__btn.btn-cancel {
  color: #8c8c8c;
  border-color: #8c8c8c;
}

.comment-form__btn.btn-cancel:hover {
  color: #fff;
  background-color: #8c8c8c;
}

/* 加载更多*/
.comment-more-wrap {
  text-align: center;
  padding: 10px;
}

.comment-more-wrap .btn-load-more {
  background-color: #141414;
  color: #fff;
  padding: 0.5rem 1.05rem;
  border-radius: 3px;
}

.comment-more-wrap .btn-loading__text,
.comment-more-wrap .btn-more-loading .btn-load-more__text {
  display: none;
}

.comment-more-wrap .btn-more-loading .btn-loading__text {
  display: inline-block;
}

.moment-tags .tag-item {
  width: 50%;
  margin-bottom: 15px;
  font-weight: 600;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.moment-tags .tag-item i {
  font-size: 20px;
  margin-right: 10px;
  color: #6c757d;
}
.moment-tags .tag-item .tag-item-img {
  text-indent: -20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  margin-right: 10px;
}
.moment-tags .tag-item img {
  width: 20px;
  height: 20px;
  margin-top: -3px;
  -webkit-filter: drop-shadow(20px 0 #6c757d);
          filter: drop-shadow(20px 0 #6c757d);
}
.moment-tags .active {
  color: #22c38b;
}
.moment-tags .active i {
  color: #22c38b;
}
.moment-tags .active img {
  -webkit-filter: drop-shadow(20px 0 #22c38b);
          filter: drop-shadow(20px 0 #22c38b);
}

.bucket-gg img,
.sidebar-guest img {
  border: none;
  max-width: 100%;
}

.sidebar-guest {
  position: relative;
}
.sidebar-guest .reg-text a {
  color: #515365;
}
.sidebar-guest .reg-text b {
  color: #22c38b;
}
.sidebar-guest-content {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 15px;
  text-align: center;
}
.sidebar-guest-btn {
  display: block;
  width: 101px;
  height: 31px;
  line-height: 31px;
  border-radius: 20px;
  background-color: #22c38b;
  color: white;
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 2px 6px 0 #22c38b;
}

.sidebar-login {
  background-color: rgba(55, 55, 55, 0.8);
}
.sidebar-login-bg {
  width: 100%;
  height: 85px;
}
.sidebar-login-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.sidebar-login-avatar {
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  margin: -40px auto auto auto;
}
.sidebar-login-avatar .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid #ffffff;
  box-sizing: border-box;
}
.sidebar-login .fans-data a {
  display: inline-block;
  -webkit-box-flex: 1;
          flex: 1;
  text-align: center;
}
.sidebar-login .fans-data a:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.moment-style {
  padding-bottom: 20px;
  background-color: rgba(55, 55, 55, 0.8);
}

.moment-title {
  width: 100%;
  padding: 15px 30px;
  box-sizing: border-box;
}
.moment-title h2 {
  font-size: 1.45rem;
  position: relative;
  font-weight: 600;
  padding-bottom: 10px;
}

.moment-form {
  display: block;
  padding: 0 30px;
  box-sizing: border-box;
}
.moment-form .moment-avatar {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.moment-form .textarea-wrap {
  width: 100%;
  padding: 0 10px 6px 10px;
  position: relative;
}
.moment-form textarea {
  border: none;
  min-height: 50px;
  height: 80px;
  line-height: 20px;
  background-color: transparent;
  font-size: 14px;
  color: #fff;
}
.moment-form .moment-btn {
  background-color: #22c38b;
  border-radius: 5px;
  padding: 0.175rem 1.275rem;
}
.moment-form .upload-images-wrap .uploader-add button {
  display: none;
}
.moment-form .upload-images-wrap .dz-preview {
  margin: 5px;
}
.moment-form .upload-images-wrap .dz-preview.dz-image-preview,
.moment-form .upload-images-wrap .three-uploader .uploader-preview {
  background-color: transparent;
}
.moment-form .upload-video-wrap .uploader-add button {
  display: none;
}
.moment-form .upload-video-wrap .dz-preview {
  margin: 5px;
}

.moment-emo .cursor {
  margin-right: 20px;
  cursor: pointer;
}
.moment-emo .cursor i {
  font-size: 22px;
  color: #6c757d;
}
.moment-emo .tag-img {
  width: 25px;
}

.moment-emoji-wrap .emoji-popover {
  position: static;
}
.moment-emoji-wrap .emoji-popover .emoji-items {
  right: initial;
  left: 0;
}

.select-tags-wrap div.tagsinput {
  background-color: transparent;
  overflow-y: hidden;
  border: 0;
}
.select-tags-wrap div.tagsinput span.tag {
  border: 0;
  padding: 2px 3px;
  background: transparent;
  color: #8c8c8c;
}
.select-tags-wrap div.tagsinput span.tag a {
  color: #ff53a0;
}
.select-tags-wrap div.tagsinput input {
  display: none;
}

.ht-hover-list {
  z-index: 999;
  position: absolute;
  top: 20px;
  left: -53px;
  width: 132px;
  display: none;
  line-height: 17px;
  border-radius: 6px;
  background-color: white;
  color: #101010;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
}
.ht-hover-list ul > li {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  box-sizing: border-box;
}
.ht-hover-list ul > li a {
  color: rgba(0, 0, 0, 0.7);
}
.ht-hover-list ul > li .selected {
  color: #22c38b;
}

.ht-hover:hover .ht-hover-list {
  display: block;
}

.cursor {
  cursor: pointer;
}

.moment-content-nav {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 51px;
  padding-left: 30px;
  background-color: rgba(55, 55, 55, 0.8);
}
.moment-content-nav a {
  position: relative;
  margin-right: 30px;
}
.moment-content-nav .active {
  color: #22c38b;
}
.moment-content-nav .active::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #22c38b;
  border-top: 0;
  bottom: -14px;
  left: 0;
  right: 0;
  margin: auto;
}

.moment-item {
  background-color: rgba(55, 55, 55, 0.8);
}
.moment-item-header-left {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.moment-item-header-left a {
  position: relative;
}
.moment-item-header-left .avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 10px;
}
.moment-item-header-left .v-tag {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 22px;
}
.moment-item-header-right .follow-btn {
  border-color: #22c38b;
  font-size: 14px;
  padding: 0.275rem 0.75rem;
  color: #22c38b;
  border-radius: 20px;
}
.moment-item-header-right .follow-btn:hover {
  background-color: #22c38b;
  color: #fff;
}
.moment-item-header-right .hover-more {
  position: relative;
  width: 30px;
  padding: 0.275rem 0.35rem;
  font-size: 16px;
}
.moment-item-header-right .hover-more:hover .hover-more-list {
  display: block;
}
.moment-item-header-right .hover-more-list {
  z-index: 99;
  position: absolute;
  display: none;
  top: 19px;
  left: -101px;
  border-radius: 6px;
  background-color: white;
  color: #101010;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
  width: 128px;
  overflow: hidden;
}
.moment-item-header-name .user-name {
  color: #22c38b;
}
.moment-item-header-name .time {
  font-size: 13px;
  color: #6c757d;
}
.moment-item-body {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  color: #ced4da;
  padding-left: 45px;
}
.moment-item-body .item-images {
  margin-left: -2.5px;
  margin-right: -2.5px;
}
.moment-item-body .item-img {
  margin: 2.5px;
  max-width: 200px;
}
.moment-item-body .item-video {
  text-align: center;
  border-radius: 10px;
}
.moment-item-body .item-video .btn-play-moment {
  width: 100%;
  max-height: 460px;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
.moment-item-body .item-video .btn-play-moment img {
  width: 100%;
  max-height: 100%;
}
.moment-item-body .item-video .btn-play-moment i {
  font-size: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  color: rgba(255, 255, 255, 0.6);
}
.moment-item-body .item-video .btn-play-moment:hover i {
  color: white;
}
.moment-item-body .item-video .local-video-player {
  width: 100%;
  border-radius: 10px;
}
.moment-item-footer .handle-item {
  position: relative;
  margin-right: 40px;
}
.moment-item-footer .handle-item i {
  font-size: 20px;
  color: #6c757d;
}
.moment-item-footer .handle-item span {
  position: absolute;
  top: -10px;
  right: -21px;
  color: #6c757d;
  font-size: 12px;
}
.moment-item-footer .comment-wrap {
  display: none;
}
.moment-item-footer .comment-wrap .comment-form input {
  width: 100%;
  border-radius: 6px;
  height: 40px;
  background-color: #edf2f6;
  border: none;
}
.moment-item-footer .comment-wrap .emotions i {
  font-size: 22px;
  color: #6c757d;
}
.moment-item .card-video {
  position: relative;
  display: block;
  overflow: hidden;
}
.moment-item .card-video .moment-video-player {
  width: 100%;
  max-height: 360px;
}
.moment-item .card-video .moment-video-player.xgplayer-is-cssfullscreen {
  max-height: 100%;
}
.moment-item .card-video .moment-video-poster {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
  background-color: #000;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: 2;
}
.moment-item .card-video .btn-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  z-index: 6;
}
.moment-item .card-video .btn-video-play i {
  font-size: 60px;
  color: rgba(255, 255, 255, 0.6);
}
.moment-item .card-video .btn-video-play:hover i {
  color: #22c38b;
}
.moment-item .card-video-active .moment-video-poster {
  display: none;
}

.bucket-moment {
  /*.moment-item-header-left .avatar {
      width: 36px;
      height: 36px;
  }*/
}
.bucket-moment .marquee-moments {
  height: 800px;
  overflow: hidden;
}
.bucket-moment .moment-item-header-name .time {
  font-size: 12px;
}
.bucket-moment .moment-item-body .item-video .btn-play-moment {
  max-height: 200px;
}
.bucket-moment .moment-item-body .item-video .btn-play-moment img {
  width: auto;
  max-width: 100%;
}
.bucket-moment .moment-item-body .item-video .btn-play-moment i {
  font-size: 46px;
  margin-left: -23px;
  margin-top: -23px;
}

.video-popup-modal .jBox-container {
  background-color: transparent;
  box-shadow: none;
}
.video-popup-modal .jBox-title {
  background-color: transparent;
  border-bottom: 0;
}
.video-popup-modal .jBox-closeButton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  right: -10px;
  bottom: 10px;
}

.video-sidebar {
  background-color: #373737;
  padding: 15px;
}
.video-sidebar .nav-link {
  font-size: 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  line-height: 20px;
}
.video-sidebar .nav-link .icon-img {
  position: relative;
  margin-right: 15px;
  text-indent: -22px;
  width: 22px;
  height: 22px;
  overflow: hidden;
}
.video-sidebar .nav-link .icon-img img {
  display: inline-block;
  width: 22px;
  height: 22px;
  -webkit-filter: drop-shadow(22px 0 #8c8c8c);
  filter: drop-shadow(22px 0 #8c8c8c);
}
.video-sidebar .nav-link .icon-text {
  font-size: 20px;
  margin-right: 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  color: #dbdbdb;
}
.video-sidebar .active {
  color: #22c38b;
  background: #333;
}
.video-sidebar .active .icon-img img {
  -webkit-filter: drop-shadow(22px 0 #22c38b);
  filter: drop-shadow(22px 0 #22c38b);
}

.bucket-videos .bucket-header {
  margin-bottom: 20px;
}

.video-grid {
  margin-right: -10px;
  margin-left: -10px;
}
.video-grid .video-item {
  padding-right: 10px;
  padding-left: 10px;
}

.gaps {
  gap: 1rem;
  margin-bottom: 5px;
}
.gaps .gap-item {
  font-size: 13px;
  position: relative;
  color: #8c8c8c;
}
.gaps .gap-item:before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  background: #626569;
  left: -0.65rem;
  bottom: 10px;
  border-radius: 50%;
}
.gaps .gap-item:first-child:before {
  display: none;
}

.video-item__body {
  position: relative;
  overflow: hidden;
}
.video-item__cover {
  border-radius: 0.15rem;
  overflow: hidden;
  --aspect-ratio: calc(9 / 16 * 100%);
  background-color: #212529;
  position: relative;
}
.video-item__cover:before {
  display: block;
  padding-top: var(--aspect-ratio);
  content: "";
}
.video-item__cover img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.7s;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
  position: absolute;
  top: 0;
  left: 0;
}
.video-item__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}
.video-item__mark:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.8;
}
.video-item__mark .icon {
  font-size: 46px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.video-item__length {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  left: auto;
  background: rgba(0, 0, 0, 0.8);
}
.video-item__link {
  position: relative;
  display: block;
}
.video-item__link:hover .video-item__img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.video-item__link:hover .video-item__mark {
  opacity: 1;
}
.video-item__bottom {
  margin-top: 1rem;
}
.video-item__avatar {
  margin-right: 0.5rem;
  width: 40px;
  height: 40px;
}
.video-item__avatar img {
  border-radius: 50%;
}
.video-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  line-height: 1.5;
  word-break: break-word;
  font-size: 0.85rem;
  font-weight: 400;
}
.video-item__title a {
  color: #E1E3E5;
}
.video-item__author {
  color: #8c8c8c;
  margin-bottom: 5px;
}

.line-videos__item {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  margin-bottom: 12px;
}
.line-videos__item .video-item__link {
  margin-right: 12px;
  width: 160px;
}
.line-videos__item .video-item__cover {
  width: 160px;
}

.video-items .cover-media__text {
  min-height: 82px;
}

.single-video__title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.single-video__body {
  width: 100%;
}
.single-video__body .player-wrap {
  width: 100%;
  position: relative;
  --bs-aspect-ratio: 56.25%;
}
.single-video__body .player-wrap::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
  background-color: #000;
}
.single-video__body .player-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.single-video__author {
  display: -webkit-box;
  display: flex;
  padding: 15px;
}
.single-video__author .author-info {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
}
.single-video__author .author-avatar {
  height: 40px;
  width: 40px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  margin-right: 12px;
}
.single-video__author .author-avatar img {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.3s ease 0s;
  transition: -webkit-transform 0.3s ease 0s;
  transition: transform 0.3s ease 0s;
  transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.single-video__author .player-actions {
  -webkit-box-flex: 1;
          flex: 1;
}
.single-video__meta {
  padding: 15px;
}
.single-video__desc .gap-item {
  font-size: 15px;
}
.single-video .btn {
  background-color: rgba(0, 0, 0, 0.15);
  margin-left: 5px;
  position: relative;
}
.single-video .btn:hover {
  background-color: #8c8c8c;
}
.single-video .btn .icon {
  font-size: 15px;
}
.single-video hr {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.single-video__actions .btn {
  padding: 0.5rem 1rem !important;
}
.single-video__actions .btn .icon {
  font-size: 18px;
}
.single-video__introduce {
  padding: 15px;
  color: #8c8c8c;
}
.single-video .js-read.js-more {
  max-height: 3.2rem;
  overflow: hidden;
}
.single-video .js-read-toggler {
  background-color: transparent;
  margin-top: 10px;
}
.single-video .js-read-toggler:hover {
  background-color: transparent;
}
.single-video .js-read-toggler span {
  font-size: 1.25rem;
}
.single-video .js-read-less span:before {
  content: "\F281";
}

.btn-three {
  background-color: rgba(51, 51, 51, 0.6);
}

@media (max-width: 768px) {
  .bucket-two .tc-item {
    width: 100%;
  }

  .index-carousel .carousel-item img {
    height: 160px;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .container-lg {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .container-lg {
    max-width: 100%;
  }
}
@media (min-width: 1440px) {
  .container-lg {
    max-width: 1440px;
  }
}