.icon {
  display: inline-block;
  background-repeat: no-repeat;
  font-style: normal;
  background-position: center;
}
.icon.small {
  width: 11px;
  height: 11px;
  background-size: 11px 11px;
}
.icon.small.withtextbefore {
  padding: 0 14px 0 0;
  background-position: right center;
  color: #888;
  font-size: 12px;
  line-height: 12px;
  width: auto;
}
.icon.small.expand:before {
  content: '\25B6';
}
.icon.small.expand.blue {
  color: #0ec5ff;
}
.icon.small.collapse:before {
  content: '\25BC';
}
.icon.tiny {
  width: 7px;
  height: 7px;
  background-size: 7px 7px;
}
.icon.middle {
  width: 17px;
  height: 17px;
  background-size: 17px 17px;
}
.icon.big {
  width: 25px;
  height: 25px;
  background-size: 25px 25px;
}
@media (max-width: 1200px) {
  .icon.big {
    width: 18px;
    height: 18px;
  }
}
.icon.wait {
  background: url('/img/theme/svg/default/Loading.svg') no-repeat center;
  animation-name: buffering;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.icon.user {
  width: 22px;
  height: 22px;
  background: url('/img/theme/png/22/user.png') no-repeat center;
}
.icon.facebook {
  background-image: url('/img/theme/svg/40/facebook.svg');
  width: 40px;
  height: 40px;
  background-position: center;
}
.icon.facebook.light {
  background-image: url('/img/theme/svg/40/facebook-light.svg');
}
.icon.google {
  background-image: url('/img/theme/svg/40/google-plus.svg');
  width: 40px;
  height: 40px;
  background-position: center;
}
.icon.google.light {
  background-image: url('/img/theme/svg/40/google-plus-light.svg');
}
.icon.patreon {
  background-image: url('/img/theme/svg/patreon.svg');
  width: 40px;
  height: 40px;
  background-position: center;
}
.icon.patreon.light {
  background-image: url('/img/theme/svg/patreon.svg');
}
.icon.linked-in {
  background-image: url('/img/theme/svg/40/linked-in.svg');
  width: 40px;
  height: 40px;
  background-position: center;
}
.icon.linked-in.light {
  background-image: url('/img/theme/svg/40/linked-in-light.svg');
}
.icon.twitter {
  background-image: url('/img/theme/svg/40/twitter.svg');
  width: 40px;
  height: 40px;
  background-position: center;
}
.icon.twitter.light {
  background-image: url('/img/theme/svg/40/twitter-light.svg');
}
.icon.soundcloud {
  background-image: url('/img/theme/svg/40/soundcloud.svg');
  width: 40px;
  height: 40px;
  background-position: center;
}
.icon.soundcloud.light {
  background-image: url('/img/theme/svg/40/soundcloud-light.svg');
}
.icon.audiotoolness {
  background-image: url('/img/theme/svg/audiotoolness.svg');
}
.icon.unread {
  background-image: url('/img/theme/svg/unread.svg');
}
.icon.unread.small {
  background-size: 11px;
}
.icon.unread.middle {
  background-size: 18px;
}
.icon.audiotool {
  background-image: url('/img/theme/svg/logo-dark.svg');
}
.icon.audiotool.small {
  background-size: 11px;
}
.icon.audiotool.middle {
  background-size: 18px;
}
.icon .icon-resizable.small {
  background-size: 11px;
}
.icon .icon-resizable.middle {
  background-size: 18px;
}
.icon.community {
  background-color: #0ec5ff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
}
.icon.community.collaborate {
  background-image: url('/img/theme/svg/community/collaborate.svg');
}
.icon.community.learn {
  background-image: url('/img/theme/svg/community/learn.svg');
}
.icon.community.produce {
  background-image: url('/img/theme/svg/community/produce.svg');
}
.icon.community.promote {
  background-image: url('/img/theme/svg/community/promote.svg');
}
.selected .icon.like.lightgrey,
.active .icon.like.lightgrey,
.selected .icon.like.grey,
.active .icon.like.grey,
a:hover .selected .icon.like.black,
a:hover .active .icon.like.black,
a:focus .selected .icon.like.black,
a:focus .active .icon.like.black {
  background-image: url('/img/theme/svg/color/16d6ff/like.svg');
}
.selected .icon.like.black,
.active .icon.like.black {
  background-image: url('/img/theme/svg/color/ffffff/like.svg');
}
.selected .icon.like.orange,
.active .icon.like.orange {
  background-image: url('/img/theme/svg/color/282828/like.svg');
}
.icon.like.blue {
  background-image: url('/img/theme/svg/color/16d6ff/like.svg');
}
.icon.like.black {
  background-image: url('/img/theme/svg/color/282828/like.svg');
}
.icon.like.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/like.svg');
}
.icon.like.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/like.svg');
}
.icon.like.white {
  background-image: url('/img/theme/svg/color/ffffff/like.svg');
}
.icon.like.orange {
  background-image: url('/img/theme/svg/color/f16b1c/like.svg');
}
.selected .icon.add.lightgrey,
.active .icon.add.lightgrey,
.selected .icon.add.grey,
.active .icon.add.grey,
a:hover .selected .icon.add.black,
a:hover .active .icon.add.black,
a:focus .selected .icon.add.black,
a:focus .active .icon.add.black {
  background-image: url('/img/theme/svg/color/16d6ff/add.svg');
}
.selected .icon.add.black,
.active .icon.add.black {
  background-image: url('/img/theme/svg/color/ffffff/add.svg');
}
.selected .icon.add.orange,
.active .icon.add.orange {
  background-image: url('/img/theme/svg/color/282828/add.svg');
}
.icon.add.blue {
  background-image: url('/img/theme/svg/color/16d6ff/add.svg');
}
.icon.add.black {
  background-image: url('/img/theme/svg/color/282828/add.svg');
}
.icon.add.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/add.svg');
}
.icon.add.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/add.svg');
}
.icon.add.white {
  background-image: url('/img/theme/svg/color/ffffff/add.svg');
}
.icon.add.orange {
  background-image: url('/img/theme/svg/color/f16b1c/add.svg');
}
.selected .icon.close.lightgrey,
.active .icon.close.lightgrey,
.selected .icon.close.grey,
.active .icon.close.grey,
a:hover .selected .icon.close.black,
a:hover .active .icon.close.black,
a:focus .selected .icon.close.black,
a:focus .active .icon.close.black {
  background-image: url('/img/theme/svg/color/16d6ff/close.svg');
}
.selected .icon.close.black,
.active .icon.close.black {
  background-image: url('/img/theme/svg/color/ffffff/close.svg');
}
.selected .icon.close.orange,
.active .icon.close.orange {
  background-image: url('/img/theme/svg/color/282828/close.svg');
}
.icon.close.blue {
  background-image: url('/img/theme/svg/color/16d6ff/close.svg');
}
.icon.close.black {
  background-image: url('/img/theme/svg/color/282828/close.svg');
}
.icon.close.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/close.svg');
}
.icon.close.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/close.svg');
}
.icon.close.white {
  background-image: url('/img/theme/svg/color/ffffff/close.svg');
}
.icon.close.orange {
  background-image: url('/img/theme/svg/color/f16b1c/close.svg');
}
.selected .icon.sort.lightgrey,
.active .icon.sort.lightgrey,
.selected .icon.sort.grey,
.active .icon.sort.grey,
a:hover .selected .icon.sort.black,
a:hover .active .icon.sort.black,
a:focus .selected .icon.sort.black,
a:focus .active .icon.sort.black {
  background-image: url('/img/theme/svg/color/16d6ff/sort.svg');
}
.selected .icon.sort.black,
.active .icon.sort.black {
  background-image: url('/img/theme/svg/color/ffffff/sort.svg');
}
.selected .icon.sort.orange,
.active .icon.sort.orange {
  background-image: url('/img/theme/svg/color/282828/sort.svg');
}
.icon.sort.blue {
  background-image: url('/img/theme/svg/color/16d6ff/sort.svg');
}
.icon.sort.black {
  background-image: url('/img/theme/svg/color/282828/sort.svg');
}
.icon.sort.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/sort.svg');
}
.icon.sort.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/sort.svg');
}
.icon.sort.white {
  background-image: url('/img/theme/svg/color/ffffff/sort.svg');
}
.icon.sort.orange {
  background-image: url('/img/theme/svg/color/f16b1c/sort.svg');
}
.selected .icon.date.lightgrey,
.active .icon.date.lightgrey,
.selected .icon.date.grey,
.active .icon.date.grey,
a:hover .selected .icon.date.black,
a:hover .active .icon.date.black,
a:focus .selected .icon.date.black,
a:focus .active .icon.date.black {
  background-image: url('/img/theme/svg/color/16d6ff/date.svg');
}
.selected .icon.date.black,
.active .icon.date.black {
  background-image: url('/img/theme/svg/color/ffffff/date.svg');
}
.selected .icon.date.orange,
.active .icon.date.orange {
  background-image: url('/img/theme/svg/color/282828/date.svg');
}
.icon.date.blue {
  background-image: url('/img/theme/svg/color/16d6ff/date.svg');
}
.icon.date.black {
  background-image: url('/img/theme/svg/color/282828/date.svg');
}
.icon.date.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/date.svg');
}
.icon.date.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/date.svg');
}
.icon.date.white {
  background-image: url('/img/theme/svg/color/ffffff/date.svg');
}
.icon.date.orange {
  background-image: url('/img/theme/svg/color/f16b1c/date.svg');
}
.selected .icon.downvote.lightgrey,
.active .icon.downvote.lightgrey,
.selected .icon.downvote.grey,
.active .icon.downvote.grey,
a:hover .selected .icon.downvote.black,
a:hover .active .icon.downvote.black,
a:focus .selected .icon.downvote.black,
a:focus .active .icon.downvote.black {
  background-image: url('/img/theme/svg/color/16d6ff/downvote.svg');
}
.selected .icon.downvote.black,
.active .icon.downvote.black {
  background-image: url('/img/theme/svg/color/ffffff/downvote.svg');
}
.selected .icon.downvote.orange,
.active .icon.downvote.orange {
  background-image: url('/img/theme/svg/color/282828/downvote.svg');
}
.icon.downvote.blue {
  background-image: url('/img/theme/svg/color/16d6ff/downvote.svg');
}
.icon.downvote.black {
  background-image: url('/img/theme/svg/color/282828/downvote.svg');
}
.icon.downvote.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/downvote.svg');
}
.icon.downvote.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/downvote.svg');
}
.icon.downvote.white {
  background-image: url('/img/theme/svg/color/ffffff/downvote.svg');
}
.icon.downvote.orange {
  background-image: url('/img/theme/svg/color/f16b1c/downvote.svg');
}
.selected .icon.share.lightgrey,
.active .icon.share.lightgrey,
.selected .icon.share.grey,
.active .icon.share.grey,
a:hover .selected .icon.share.black,
a:hover .active .icon.share.black,
a:focus .selected .icon.share.black,
a:focus .active .icon.share.black {
  background-image: url('/img/theme/svg/color/16d6ff/share.svg');
}
.selected .icon.share.black,
.active .icon.share.black {
  background-image: url('/img/theme/svg/color/ffffff/share.svg');
}
.selected .icon.share.orange,
.active .icon.share.orange {
  background-image: url('/img/theme/svg/color/282828/share.svg');
}
.icon.share.blue {
  background-image: url('/img/theme/svg/color/16d6ff/share.svg');
}
.icon.share.black {
  background-image: url('/img/theme/svg/color/282828/share.svg');
}
.icon.share.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/share.svg');
}
.icon.share.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/share.svg');
}
.icon.share.white {
  background-image: url('/img/theme/svg/color/ffffff/share.svg');
}
.icon.share.orange {
  background-image: url('/img/theme/svg/color/f16b1c/share.svg');
}
.selected .icon.plays.lightgrey,
.active .icon.plays.lightgrey,
.selected .icon.plays.grey,
.active .icon.plays.grey,
a:hover .selected .icon.plays.black,
a:hover .active .icon.plays.black,
a:focus .selected .icon.plays.black,
a:focus .active .icon.plays.black {
  background-image: url('/img/theme/svg/color/16d6ff/plays.svg');
}
.selected .icon.plays.black,
.active .icon.plays.black {
  background-image: url('/img/theme/svg/color/ffffff/plays.svg');
}
.selected .icon.plays.orange,
.active .icon.plays.orange {
  background-image: url('/img/theme/svg/color/282828/plays.svg');
}
.icon.plays.blue {
  background-image: url('/img/theme/svg/color/16d6ff/plays.svg');
}
.icon.plays.black {
  background-image: url('/img/theme/svg/color/282828/plays.svg');
}
.icon.plays.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/plays.svg');
}
.icon.plays.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/plays.svg');
}
.icon.plays.white {
  background-image: url('/img/theme/svg/color/ffffff/plays.svg');
}
.icon.plays.orange {
  background-image: url('/img/theme/svg/color/f16b1c/plays.svg');
}
.selected .icon.check.lightgrey,
.active .icon.check.lightgrey,
.selected .icon.check.grey,
.active .icon.check.grey,
a:hover .selected .icon.check.black,
a:hover .active .icon.check.black,
a:focus .selected .icon.check.black,
a:focus .active .icon.check.black {
  background-image: url('/img/theme/svg/color/16d6ff/check.svg');
}
.selected .icon.check.black,
.active .icon.check.black {
  background-image: url('/img/theme/svg/color/ffffff/check.svg');
}
.selected .icon.check.orange,
.active .icon.check.orange {
  background-image: url('/img/theme/svg/color/282828/check.svg');
}
.icon.check.blue {
  background-image: url('/img/theme/svg/color/16d6ff/check.svg');
}
.icon.check.black {
  background-image: url('/img/theme/svg/color/282828/check.svg');
}
.icon.check.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/check.svg');
}
.icon.check.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/check.svg');
}
.icon.check.white {
  background-image: url('/img/theme/svg/color/ffffff/check.svg');
}
.icon.check.orange {
  background-image: url('/img/theme/svg/color/f16b1c/check.svg');
}
.selected .icon.comment.lightgrey,
.active .icon.comment.lightgrey,
.selected .icon.comment.grey,
.active .icon.comment.grey,
a:hover .selected .icon.comment.black,
a:hover .active .icon.comment.black,
a:focus .selected .icon.comment.black,
a:focus .active .icon.comment.black {
  background-image: url('/img/theme/svg/color/16d6ff/comment.svg');
}
.selected .icon.comment.black,
.active .icon.comment.black {
  background-image: url('/img/theme/svg/color/ffffff/comment.svg');
}
.selected .icon.comment.orange,
.active .icon.comment.orange {
  background-image: url('/img/theme/svg/color/282828/comment.svg');
}
.icon.comment.blue {
  background-image: url('/img/theme/svg/color/16d6ff/comment.svg');
}
.icon.comment.black {
  background-image: url('/img/theme/svg/color/282828/comment.svg');
}
.icon.comment.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/comment.svg');
}
.icon.comment.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/comment.svg');
}
.icon.comment.white {
  background-image: url('/img/theme/svg/color/ffffff/comment.svg');
}
.icon.comment.orange {
  background-image: url('/img/theme/svg/color/f16b1c/comment.svg');
}
.selected .icon.download.lightgrey,
.active .icon.download.lightgrey,
.selected .icon.download.grey,
.active .icon.download.grey,
a:hover .selected .icon.download.black,
a:hover .active .icon.download.black,
a:focus .selected .icon.download.black,
a:focus .active .icon.download.black {
  background-image: url('/img/theme/svg/color/16d6ff/download.svg');
}
.selected .icon.download.black,
.active .icon.download.black {
  background-image: url('/img/theme/svg/color/ffffff/download.svg');
}
.selected .icon.download.orange,
.active .icon.download.orange {
  background-image: url('/img/theme/svg/color/282828/download.svg');
}
.icon.download.blue {
  background-image: url('/img/theme/svg/color/16d6ff/download.svg');
}
.icon.download.black {
  background-image: url('/img/theme/svg/color/282828/download.svg');
}
.icon.download.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/download.svg');
}
.icon.download.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/download.svg');
}
.icon.download.white {
  background-image: url('/img/theme/svg/color/ffffff/download.svg');
}
.icon.download.orange {
  background-image: url('/img/theme/svg/color/f16b1c/download.svg');
}
.selected .icon.online.lightgrey,
.active .icon.online.lightgrey,
.selected .icon.online.grey,
.active .icon.online.grey,
a:hover .selected .icon.online.black,
a:hover .active .icon.online.black,
a:focus .selected .icon.online.black,
a:focus .active .icon.online.black {
  background-image: url('/img/theme/svg/color/16d6ff/online.svg');
}
.selected .icon.online.black,
.active .icon.online.black {
  background-image: url('/img/theme/svg/color/ffffff/online.svg');
}
.selected .icon.online.orange,
.active .icon.online.orange {
  background-image: url('/img/theme/svg/color/282828/online.svg');
}
.icon.online.blue {
  background-image: url('/img/theme/svg/color/16d6ff/online.svg');
}
.icon.online.black {
  background-image: url('/img/theme/svg/color/282828/online.svg');
}
.icon.online.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/online.svg');
}
.icon.online.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/online.svg');
}
.icon.online.white {
  background-image: url('/img/theme/svg/color/ffffff/online.svg');
}
.icon.online.orange {
  background-image: url('/img/theme/svg/color/f16b1c/online.svg');
}
.selected .icon.plays.lightgrey,
.active .icon.plays.lightgrey,
.selected .icon.plays.grey,
.active .icon.plays.grey,
a:hover .selected .icon.plays.black,
a:hover .active .icon.plays.black,
a:focus .selected .icon.plays.black,
a:focus .active .icon.plays.black {
  background-image: url('/img/theme/svg/color/16d6ff/plays.svg');
}
.selected .icon.plays.black,
.active .icon.plays.black {
  background-image: url('/img/theme/svg/color/ffffff/plays.svg');
}
.selected .icon.plays.orange,
.active .icon.plays.orange {
  background-image: url('/img/theme/svg/color/282828/plays.svg');
}
.icon.plays.blue {
  background-image: url('/img/theme/svg/color/16d6ff/plays.svg');
}
.icon.plays.black {
  background-image: url('/img/theme/svg/color/282828/plays.svg');
}
.icon.plays.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/plays.svg');
}
.icon.plays.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/plays.svg');
}
.icon.plays.white {
  background-image: url('/img/theme/svg/color/ffffff/plays.svg');
}
.icon.plays.orange {
  background-image: url('/img/theme/svg/color/f16b1c/plays.svg');
}
.selected .icon.tracks.lightgrey,
.active .icon.tracks.lightgrey,
.selected .icon.tracks.grey,
.active .icon.tracks.grey,
a:hover .selected .icon.tracks.black,
a:hover .active .icon.tracks.black,
a:focus .selected .icon.tracks.black,
a:focus .active .icon.tracks.black {
  background-image: url('/img/theme/svg/color/16d6ff/tracks.svg');
}
.selected .icon.tracks.black,
.active .icon.tracks.black {
  background-image: url('/img/theme/svg/color/ffffff/tracks.svg');
}
.selected .icon.tracks.orange,
.active .icon.tracks.orange {
  background-image: url('/img/theme/svg/color/282828/tracks.svg');
}
.icon.tracks.blue {
  background-image: url('/img/theme/svg/color/16d6ff/tracks.svg');
}
.icon.tracks.black {
  background-image: url('/img/theme/svg/color/282828/tracks.svg');
}
.icon.tracks.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/tracks.svg');
}
.icon.tracks.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/tracks.svg');
}
.icon.tracks.white {
  background-image: url('/img/theme/svg/color/ffffff/tracks.svg');
}
.icon.tracks.orange {
  background-image: url('/img/theme/svg/color/f16b1c/tracks.svg');
}
.selected .icon.reply.lightgrey,
.active .icon.reply.lightgrey,
.selected .icon.reply.grey,
.active .icon.reply.grey,
a:hover .selected .icon.reply.black,
a:hover .active .icon.reply.black,
a:focus .selected .icon.reply.black,
a:focus .active .icon.reply.black {
  background-image: url('/img/theme/svg/color/16d6ff/reply.svg');
}
.selected .icon.reply.black,
.active .icon.reply.black {
  background-image: url('/img/theme/svg/color/ffffff/reply.svg');
}
.selected .icon.reply.orange,
.active .icon.reply.orange {
  background-image: url('/img/theme/svg/color/282828/reply.svg');
}
.icon.reply.blue {
  background-image: url('/img/theme/svg/color/16d6ff/reply.svg');
}
.icon.reply.black {
  background-image: url('/img/theme/svg/color/282828/reply.svg');
}
.icon.reply.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/reply.svg');
}
.icon.reply.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/reply.svg');
}
.icon.reply.white {
  background-image: url('/img/theme/svg/color/ffffff/reply.svg');
}
.icon.reply.orange {
  background-image: url('/img/theme/svg/color/f16b1c/reply.svg');
}
.selected .icon.mute.lightgrey,
.active .icon.mute.lightgrey,
.selected .icon.mute.grey,
.active .icon.mute.grey,
a:hover .selected .icon.mute.black,
a:hover .active .icon.mute.black,
a:focus .selected .icon.mute.black,
a:focus .active .icon.mute.black {
  background-image: url('/img/theme/svg/color/16d6ff/mute.svg');
}
.selected .icon.mute.black,
.active .icon.mute.black {
  background-image: url('/img/theme/svg/color/ffffff/mute.svg');
}
.selected .icon.mute.orange,
.active .icon.mute.orange {
  background-image: url('/img/theme/svg/color/282828/mute.svg');
}
.icon.mute.blue {
  background-image: url('/img/theme/svg/color/16d6ff/mute.svg');
}
.icon.mute.black {
  background-image: url('/img/theme/svg/color/282828/mute.svg');
}
.icon.mute.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/mute.svg');
}
.icon.mute.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/mute.svg');
}
.icon.mute.white {
  background-image: url('/img/theme/svg/color/ffffff/mute.svg');
}
.icon.mute.orange {
  background-image: url('/img/theme/svg/color/f16b1c/mute.svg');
}
.selected .icon.link.lightgrey,
.active .icon.link.lightgrey,
.selected .icon.link.grey,
.active .icon.link.grey,
a:hover .selected .icon.link.black,
a:hover .active .icon.link.black,
a:focus .selected .icon.link.black,
a:focus .active .icon.link.black {
  background-image: url('/img/theme/svg/color/16d6ff/link.svg');
}
.selected .icon.link.black,
.active .icon.link.black {
  background-image: url('/img/theme/svg/color/ffffff/link.svg');
}
.selected .icon.link.orange,
.active .icon.link.orange {
  background-image: url('/img/theme/svg/color/282828/link.svg');
}
.icon.link.blue {
  background-image: url('/img/theme/svg/color/16d6ff/link.svg');
}
.icon.link.black {
  background-image: url('/img/theme/svg/color/282828/link.svg');
}
.icon.link.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/link.svg');
}
.icon.link.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/link.svg');
}
.icon.link.white {
  background-image: url('/img/theme/svg/color/ffffff/link.svg');
}
.icon.link.orange {
  background-image: url('/img/theme/svg/color/f16b1c/link.svg');
}
.selected .icon.edit.lightgrey,
.active .icon.edit.lightgrey,
.selected .icon.edit.grey,
.active .icon.edit.grey,
a:hover .selected .icon.edit.black,
a:hover .active .icon.edit.black,
a:focus .selected .icon.edit.black,
a:focus .active .icon.edit.black {
  background-image: url('/img/theme/svg/color/16d6ff/edit.svg');
}
.selected .icon.edit.black,
.active .icon.edit.black {
  background-image: url('/img/theme/svg/color/ffffff/edit.svg');
}
.selected .icon.edit.orange,
.active .icon.edit.orange {
  background-image: url('/img/theme/svg/color/282828/edit.svg');
}
.icon.edit.blue {
  background-image: url('/img/theme/svg/color/16d6ff/edit.svg');
}
.icon.edit.black {
  background-image: url('/img/theme/svg/color/282828/edit.svg');
}
.icon.edit.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/edit.svg');
}
.icon.edit.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/edit.svg');
}
.icon.edit.white {
  background-image: url('/img/theme/svg/color/ffffff/edit.svg');
}
.icon.edit.orange {
  background-image: url('/img/theme/svg/color/f16b1c/edit.svg');
}
.selected .icon.search.lightgrey,
.active .icon.search.lightgrey,
.selected .icon.search.grey,
.active .icon.search.grey,
a:hover .selected .icon.search.black,
a:hover .active .icon.search.black,
a:focus .selected .icon.search.black,
a:focus .active .icon.search.black {
  background-image: url('/img/theme/svg/color/16d6ff/search.svg');
}
.selected .icon.search.black,
.active .icon.search.black {
  background-image: url('/img/theme/svg/color/ffffff/search.svg');
}
.selected .icon.search.orange,
.active .icon.search.orange {
  background-image: url('/img/theme/svg/color/282828/search.svg');
}
.icon.search.blue {
  background-image: url('/img/theme/svg/color/16d6ff/search.svg');
}
.icon.search.black {
  background-image: url('/img/theme/svg/color/282828/search.svg');
}
.icon.search.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/search.svg');
}
.icon.search.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/search.svg');
}
.icon.search.white {
  background-image: url('/img/theme/svg/color/ffffff/search.svg');
}
.icon.search.orange {
  background-image: url('/img/theme/svg/color/f16b1c/search.svg');
}
.selected .icon.inbox.lightgrey,
.active .icon.inbox.lightgrey,
.selected .icon.inbox.grey,
.active .icon.inbox.grey,
a:hover .selected .icon.inbox.black,
a:hover .active .icon.inbox.black,
a:focus .selected .icon.inbox.black,
a:focus .active .icon.inbox.black {
  background-image: url('/img/theme/svg/color/16d6ff/inbox.svg');
}
.selected .icon.inbox.black,
.active .icon.inbox.black {
  background-image: url('/img/theme/svg/color/ffffff/inbox.svg');
}
.selected .icon.inbox.orange,
.active .icon.inbox.orange {
  background-image: url('/img/theme/svg/color/282828/inbox.svg');
}
.icon.inbox.blue {
  background-image: url('/img/theme/svg/color/16d6ff/inbox.svg');
}
.icon.inbox.black {
  background-image: url('/img/theme/svg/color/282828/inbox.svg');
}
.icon.inbox.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/inbox.svg');
}
.icon.inbox.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/inbox.svg');
}
.icon.inbox.white {
  background-image: url('/img/theme/svg/color/ffffff/inbox.svg');
}
.icon.inbox.orange {
  background-image: url('/img/theme/svg/color/f16b1c/inbox.svg');
}
.selected .icon.remix.lightgrey,
.active .icon.remix.lightgrey,
.selected .icon.remix.grey,
.active .icon.remix.grey,
a:hover .selected .icon.remix.black,
a:hover .active .icon.remix.black,
a:focus .selected .icon.remix.black,
a:focus .active .icon.remix.black {
  background-image: url('/img/theme/svg/color/16d6ff/remix.svg');
}
.selected .icon.remix.black,
.active .icon.remix.black {
  background-image: url('/img/theme/svg/color/ffffff/remix.svg');
}
.selected .icon.remix.orange,
.active .icon.remix.orange {
  background-image: url('/img/theme/svg/color/282828/remix.svg');
}
.icon.remix.blue {
  background-image: url('/img/theme/svg/color/16d6ff/remix.svg');
}
.icon.remix.black {
  background-image: url('/img/theme/svg/color/282828/remix.svg');
}
.icon.remix.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/remix.svg');
}
.icon.remix.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/remix.svg');
}
.icon.remix.white {
  background-image: url('/img/theme/svg/color/ffffff/remix.svg');
}
.icon.remix.orange {
  background-image: url('/img/theme/svg/color/f16b1c/remix.svg');
}
.selected .icon.lock.lightgrey,
.active .icon.lock.lightgrey,
.selected .icon.lock.grey,
.active .icon.lock.grey,
a:hover .selected .icon.lock.black,
a:hover .active .icon.lock.black,
a:focus .selected .icon.lock.black,
a:focus .active .icon.lock.black {
  background-image: url('/img/theme/svg/color/16d6ff/lock.svg');
}
.selected .icon.lock.black,
.active .icon.lock.black {
  background-image: url('/img/theme/svg/color/ffffff/lock.svg');
}
.selected .icon.lock.orange,
.active .icon.lock.orange {
  background-image: url('/img/theme/svg/color/282828/lock.svg');
}
.icon.lock.blue {
  background-image: url('/img/theme/svg/color/16d6ff/lock.svg');
}
.icon.lock.black {
  background-image: url('/img/theme/svg/color/282828/lock.svg');
}
.icon.lock.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/lock.svg');
}
.icon.lock.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/lock.svg');
}
.icon.lock.white {
  background-image: url('/img/theme/svg/color/ffffff/lock.svg');
}
.icon.lock.orange {
  background-image: url('/img/theme/svg/color/f16b1c/lock.svg');
}
.selected .icon.pin.lightgrey,
.active .icon.pin.lightgrey,
.selected .icon.pin.grey,
.active .icon.pin.grey,
a:hover .selected .icon.pin.black,
a:hover .active .icon.pin.black,
a:focus .selected .icon.pin.black,
a:focus .active .icon.pin.black {
  background-image: url('/img/theme/svg/color/16d6ff/pin.svg');
}
.selected .icon.pin.black,
.active .icon.pin.black {
  background-image: url('/img/theme/svg/color/ffffff/pin.svg');
}
.selected .icon.pin.orange,
.active .icon.pin.orange {
  background-image: url('/img/theme/svg/color/282828/pin.svg');
}
.icon.pin.blue {
  background-image: url('/img/theme/svg/color/16d6ff/pin.svg');
}
.icon.pin.black {
  background-image: url('/img/theme/svg/color/282828/pin.svg');
}
.icon.pin.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/pin.svg');
}
.icon.pin.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/pin.svg');
}
.icon.pin.white {
  background-image: url('/img/theme/svg/color/ffffff/pin.svg');
}
.icon.pin.orange {
  background-image: url('/img/theme/svg/color/f16b1c/pin.svg');
}
.selected .icon.visible.lightgrey,
.active .icon.visible.lightgrey,
.selected .icon.visible.grey,
.active .icon.visible.grey,
a:hover .selected .icon.visible.black,
a:hover .active .icon.visible.black,
a:focus .selected .icon.visible.black,
a:focus .active .icon.visible.black {
  background-image: url('/img/theme/svg/color/16d6ff/visible.svg');
}
.selected .icon.visible.black,
.active .icon.visible.black {
  background-image: url('/img/theme/svg/color/ffffff/visible.svg');
}
.selected .icon.visible.orange,
.active .icon.visible.orange {
  background-image: url('/img/theme/svg/color/282828/visible.svg');
}
.icon.visible.blue {
  background-image: url('/img/theme/svg/color/16d6ff/visible.svg');
}
.icon.visible.black {
  background-image: url('/img/theme/svg/color/282828/visible.svg');
}
.icon.visible.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/visible.svg');
}
.icon.visible.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/visible.svg');
}
.icon.visible.white {
  background-image: url('/img/theme/svg/color/ffffff/visible.svg');
}
.icon.visible.orange {
  background-image: url('/img/theme/svg/color/f16b1c/visible.svg');
}
.selected .icon.hidden.lightgrey,
.active .icon.hidden.lightgrey,
.selected .icon.hidden.grey,
.active .icon.hidden.grey,
a:hover .selected .icon.hidden.black,
a:hover .active .icon.hidden.black,
a:focus .selected .icon.hidden.black,
a:focus .active .icon.hidden.black {
  background-image: url('/img/theme/svg/color/16d6ff/hidden.svg');
}
.selected .icon.hidden.black,
.active .icon.hidden.black {
  background-image: url('/img/theme/svg/color/ffffff/hidden.svg');
}
.selected .icon.hidden.orange,
.active .icon.hidden.orange {
  background-image: url('/img/theme/svg/color/282828/hidden.svg');
}
.icon.hidden.blue {
  background-image: url('/img/theme/svg/color/16d6ff/hidden.svg');
}
.icon.hidden.black {
  background-image: url('/img/theme/svg/color/282828/hidden.svg');
}
.icon.hidden.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/hidden.svg');
}
.icon.hidden.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/hidden.svg');
}
.icon.hidden.white {
  background-image: url('/img/theme/svg/color/ffffff/hidden.svg');
}
.icon.hidden.orange {
  background-image: url('/img/theme/svg/color/f16b1c/hidden.svg');
}
.selected .icon.options.lightgrey,
.active .icon.options.lightgrey,
.selected .icon.options.grey,
.active .icon.options.grey,
a:hover .selected .icon.options.black,
a:hover .active .icon.options.black,
a:focus .selected .icon.options.black,
a:focus .active .icon.options.black {
  background-image: url('/img/theme/svg/color/16d6ff/options.svg');
}
.selected .icon.options.black,
.active .icon.options.black {
  background-image: url('/img/theme/svg/color/ffffff/options.svg');
}
.selected .icon.options.orange,
.active .icon.options.orange {
  background-image: url('/img/theme/svg/color/282828/options.svg');
}
.icon.options.blue {
  background-image: url('/img/theme/svg/color/16d6ff/options.svg');
}
.icon.options.black {
  background-image: url('/img/theme/svg/color/282828/options.svg');
}
.icon.options.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/options.svg');
}
.icon.options.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/options.svg');
}
.icon.options.white {
  background-image: url('/img/theme/svg/color/ffffff/options.svg');
}
.icon.options.orange {
  background-image: url('/img/theme/svg/color/f16b1c/options.svg');
}
.selected .icon.report.lightgrey,
.active .icon.report.lightgrey,
.selected .icon.report.grey,
.active .icon.report.grey,
a:hover .selected .icon.report.black,
a:hover .active .icon.report.black,
a:focus .selected .icon.report.black,
a:focus .active .icon.report.black {
  background-image: url('/img/theme/svg/color/16d6ff/report.svg');
}
.selected .icon.report.black,
.active .icon.report.black {
  background-image: url('/img/theme/svg/color/ffffff/report.svg');
}
.selected .icon.report.orange,
.active .icon.report.orange {
  background-image: url('/img/theme/svg/color/282828/report.svg');
}
.icon.report.blue {
  background-image: url('/img/theme/svg/color/16d6ff/report.svg');
}
.icon.report.black {
  background-image: url('/img/theme/svg/color/282828/report.svg');
}
.icon.report.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/report.svg');
}
.icon.report.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/report.svg');
}
.icon.report.white {
  background-image: url('/img/theme/svg/color/ffffff/report.svg');
}
.icon.report.orange {
  background-image: url('/img/theme/svg/color/f16b1c/report.svg');
}
.selected .icon.admin.lightgrey,
.active .icon.admin.lightgrey,
.selected .icon.admin.grey,
.active .icon.admin.grey,
a:hover .selected .icon.admin.black,
a:hover .active .icon.admin.black,
a:focus .selected .icon.admin.black,
a:focus .active .icon.admin.black {
  background-image: url('/img/theme/svg/color/16d6ff/admin.svg');
}
.selected .icon.admin.black,
.active .icon.admin.black {
  background-image: url('/img/theme/svg/color/ffffff/admin.svg');
}
.selected .icon.admin.orange,
.active .icon.admin.orange {
  background-image: url('/img/theme/svg/color/282828/admin.svg');
}
.icon.admin.blue {
  background-image: url('/img/theme/svg/color/16d6ff/admin.svg');
}
.icon.admin.black {
  background-image: url('/img/theme/svg/color/282828/admin.svg');
}
.icon.admin.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/admin.svg');
}
.icon.admin.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/admin.svg');
}
.icon.admin.white {
  background-image: url('/img/theme/svg/color/ffffff/admin.svg');
}
.icon.admin.orange {
  background-image: url('/img/theme/svg/color/f16b1c/admin.svg');
}
.selected .icon.moderate.lightgrey,
.active .icon.moderate.lightgrey,
.selected .icon.moderate.grey,
.active .icon.moderate.grey,
a:hover .selected .icon.moderate.black,
a:hover .active .icon.moderate.black,
a:focus .selected .icon.moderate.black,
a:focus .active .icon.moderate.black {
  background-image: url('/img/theme/svg/color/16d6ff/moderate.svg');
}
.selected .icon.moderate.black,
.active .icon.moderate.black {
  background-image: url('/img/theme/svg/color/ffffff/moderate.svg');
}
.selected .icon.moderate.orange,
.active .icon.moderate.orange {
  background-image: url('/img/theme/svg/color/282828/moderate.svg');
}
.icon.moderate.blue {
  background-image: url('/img/theme/svg/color/16d6ff/moderate.svg');
}
.icon.moderate.black {
  background-image: url('/img/theme/svg/color/282828/moderate.svg');
}
.icon.moderate.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/moderate.svg');
}
.icon.moderate.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/moderate.svg');
}
.icon.moderate.white {
  background-image: url('/img/theme/svg/color/ffffff/moderate.svg');
}
.icon.moderate.orange {
  background-image: url('/img/theme/svg/color/f16b1c/moderate.svg');
}
.selected .icon.mute-user.lightgrey,
.active .icon.mute-user.lightgrey,
.selected .icon.mute-user.grey,
.active .icon.mute-user.grey,
a:hover .selected .icon.mute-user.black,
a:hover .active .icon.mute-user.black,
a:focus .selected .icon.mute-user.black,
a:focus .active .icon.mute-user.black {
  background-image: url('/img/theme/svg/color/16d6ff/mute-user.svg');
}
.selected .icon.mute-user.black,
.active .icon.mute-user.black {
  background-image: url('/img/theme/svg/color/ffffff/mute-user.svg');
}
.selected .icon.mute-user.orange,
.active .icon.mute-user.orange {
  background-image: url('/img/theme/svg/color/282828/mute-user.svg');
}
.icon.mute-user.blue {
  background-image: url('/img/theme/svg/color/16d6ff/mute-user.svg');
}
.icon.mute-user.black {
  background-image: url('/img/theme/svg/color/282828/mute-user.svg');
}
.icon.mute-user.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/mute-user.svg');
}
.icon.mute-user.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/mute-user.svg');
}
.icon.mute-user.white {
  background-image: url('/img/theme/svg/color/ffffff/mute-user.svg');
}
.icon.mute-user.orange {
  background-image: url('/img/theme/svg/color/f16b1c/mute-user.svg');
}
.selected .icon.report-user.lightgrey,
.active .icon.report-user.lightgrey,
.selected .icon.report-user.grey,
.active .icon.report-user.grey,
a:hover .selected .icon.report-user.black,
a:hover .active .icon.report-user.black,
a:focus .selected .icon.report-user.black,
a:focus .active .icon.report-user.black {
  background-image: url('/img/theme/svg/color/16d6ff/report-user.svg');
}
.selected .icon.report-user.black,
.active .icon.report-user.black {
  background-image: url('/img/theme/svg/color/ffffff/report-user.svg');
}
.selected .icon.report-user.orange,
.active .icon.report-user.orange {
  background-image: url('/img/theme/svg/color/282828/report-user.svg');
}
.icon.report-user.blue {
  background-image: url('/img/theme/svg/color/16d6ff/report-user.svg');
}
.icon.report-user.black {
  background-image: url('/img/theme/svg/color/282828/report-user.svg');
}
.icon.report-user.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/report-user.svg');
}
.icon.report-user.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/report-user.svg');
}
.icon.report-user.white {
  background-image: url('/img/theme/svg/color/ffffff/report-user.svg');
}
.icon.report-user.orange {
  background-image: url('/img/theme/svg/color/f16b1c/report-user.svg');
}
.selected .icon.delete.lightgrey,
.active .icon.delete.lightgrey,
.selected .icon.delete.grey,
.active .icon.delete.grey,
a:hover .selected .icon.delete.black,
a:hover .active .icon.delete.black,
a:focus .selected .icon.delete.black,
a:focus .active .icon.delete.black {
  background-image: url('/img/theme/svg/color/16d6ff/delete.svg');
}
.selected .icon.delete.black,
.active .icon.delete.black {
  background-image: url('/img/theme/svg/color/ffffff/delete.svg');
}
.selected .icon.delete.orange,
.active .icon.delete.orange {
  background-image: url('/img/theme/svg/color/282828/delete.svg');
}
.icon.delete.blue {
  background-image: url('/img/theme/svg/color/16d6ff/delete.svg');
}
.icon.delete.black {
  background-image: url('/img/theme/svg/color/282828/delete.svg');
}
.icon.delete.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/delete.svg');
}
.icon.delete.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/delete.svg');
}
.icon.delete.white {
  background-image: url('/img/theme/svg/color/ffffff/delete.svg');
}
.icon.delete.orange {
  background-image: url('/img/theme/svg/color/f16b1c/delete.svg');
}
.selected .icon.move.lightgrey,
.active .icon.move.lightgrey,
.selected .icon.move.grey,
.active .icon.move.grey,
a:hover .selected .icon.move.black,
a:hover .active .icon.move.black,
a:focus .selected .icon.move.black,
a:focus .active .icon.move.black {
  background-image: url('/img/theme/svg/color/16d6ff/move.svg');
}
.selected .icon.move.black,
.active .icon.move.black {
  background-image: url('/img/theme/svg/color/ffffff/move.svg');
}
.selected .icon.move.orange,
.active .icon.move.orange {
  background-image: url('/img/theme/svg/color/282828/move.svg');
}
.icon.move.blue {
  background-image: url('/img/theme/svg/color/16d6ff/move.svg');
}
.icon.move.black {
  background-image: url('/img/theme/svg/color/282828/move.svg');
}
.icon.move.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/move.svg');
}
.icon.move.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/move.svg');
}
.icon.move.white {
  background-image: url('/img/theme/svg/color/ffffff/move.svg');
}
.icon.move.orange {
  background-image: url('/img/theme/svg/color/f16b1c/move.svg');
}
.selected .icon.sample-toc.lightgrey,
.active .icon.sample-toc.lightgrey,
.selected .icon.sample-toc.grey,
.active .icon.sample-toc.grey,
a:hover .selected .icon.sample-toc.black,
a:hover .active .icon.sample-toc.black,
a:focus .selected .icon.sample-toc.black,
a:focus .active .icon.sample-toc.black {
  background-image: url('/img/theme/svg/color/16d6ff/sample-toc.svg');
}
.selected .icon.sample-toc.black,
.active .icon.sample-toc.black {
  background-image: url('/img/theme/svg/color/ffffff/sample-toc.svg');
}
.selected .icon.sample-toc.orange,
.active .icon.sample-toc.orange {
  background-image: url('/img/theme/svg/color/282828/sample-toc.svg');
}
.icon.sample-toc.blue {
  background-image: url('/img/theme/svg/color/16d6ff/sample-toc.svg');
}
.icon.sample-toc.black {
  background-image: url('/img/theme/svg/color/282828/sample-toc.svg');
}
.icon.sample-toc.grey {
  background-image: url('/img/theme/svg/color/7f7f7f/sample-toc.svg');
}
.icon.sample-toc.lightgrey {
  background-image: url('/img/theme/svg/color/d6d6d6/sample-toc.svg');
}
.icon.sample-toc.white {
  background-image: url('/img/theme/svg/color/ffffff/sample-toc.svg');
}
.icon.sample-toc.orange {
  background-image: url('/img/theme/svg/color/f16b1c/sample-toc.svg');
}
/* button */
.button,
input[type="submit"],
button {
  display: inline-block;
  background: #303030;
  color: #fff;
  border: 1px transparent solid;
  text-decoration: none !important;
  text-transform: uppercase;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 400;
  border-radius: 3px;
  margin: 0;
  padding: 6px 11px;
  text-align: center;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  outline: none;
}
@media (max-width: 599px) {
  .button,
  input[type="submit"],
  button {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
@media (max-width: 699px) {
  .button,
  input[type="submit"],
  button {
    padding: 3px;
    font-size: 10px;
  }
}
.button.big,
input[type="submit"].big,
button.big {
  font-size: 16px;
  padding: 12px 14px 13px;
}
.button.secondary,
input[type="submit"].secondary,
button.secondary {
  background: #888;
}
.button.app,
input[type="submit"].app,
button.app {
  text-transform: none;
  padding: 7px 24px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  background-color: #0ec5ff;
}
.button.app:hover,
input[type="submit"].app:hover,
button.app:hover,
.button.app:focus,
input[type="submit"].app:focus,
button.app:focus,
.button.app:active,
input[type="submit"].app:active,
button.app:active {
  color: #fff !important;
}
.button.blue,
input[type="submit"].blue,
button.blue {
  color: #fff ! important;
  background-color: #0ec5ff;
  font-weight: 600;
}
.button.error,
input[type="submit"].error,
button.error {
  background: #f16b1c;
}
.button.warning,
input[type="submit"].warning,
button.warning {
  background: #f16b1c;
}
.button.failed,
input[type="submit"].failed,
button.failed,
.button.failed:focus,
input[type="submit"].failed:focus,
button.failed:focus {
  background: red;
  pointer-events: none;
}
.button.working,
input[type="submit"].working,
button.working,
.button.working:hover,
input[type="submit"].working:hover,
button.working:hover {
  color: transparent !important;
  position: relative !important;
  pointer-events: none;
  background-image: url('/img/theme/svg/default/Loading-animation.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.button.working i,
input[type="submit"].working i,
button.working i,
.button.working:hover i,
input[type="submit"].working:hover i,
button.working:hover i {
  visibility: hidden;
}
.button.iconbutton,
input[type="submit"].iconbutton,
button.iconbutton {
  padding: 0;
}
.button.iconbutton .icon,
input[type="submit"].iconbutton .icon,
button.iconbutton .icon {
  height: 33px;
}
.button.iconbutton.withtext,
input[type="submit"].iconbutton.withtext,
button.iconbutton.withtext {
  position: relative;
  padding: 9px 14px 9px 40px;
}
.button.iconbutton.withtext .icon,
input[type="submit"].iconbutton.withtext .icon,
button.iconbutton.withtext .icon {
  margin-right: 10px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 2px;
}
.button.selected,
input[type="submit"].selected,
button.selected,
.button.active,
input[type="submit"].active,
button.active {
  background: #f16b1c;
  color: #fff;
  cursor: pointer;
}
.button.action.big,
input[type="submit"].action.big,
button.action.big {
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
  width: 54px;
  height: 37px;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 0;
}
.button.action.big:hover,
input[type="submit"].action.big:hover,
button.action.big:hover,
.button.action.big:active,
input[type="submit"].action.big:active,
button.action.big:active,
.button.action.big:focus,
input[type="submit"].action.big:focus,
button.action.big:focus {
  cursor: pointer;
}
.button.action.big i,
input[type="submit"].action.big i,
button.action.big i {
  position: absolute;
  left: 16px;
  top: 8px;
}
.button.action.small,
input[type="submit"].action.small,
button.action.small {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  border-radius: 3px;
  background: #282828;
  color: #fff;
  padding: 3px 12px 4px 12px;
  margin-right: 0;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 15px;
  vertical-align: middle;
}
.button.action.small i,
input[type="submit"].action.small i,
button.action.small i {
  position: relative;
  top: 2px;
}
.button.action.small.selected,
input[type="submit"].action.small.selected,
button.action.small.selected {
  background: #f16b1c;
}
.button.double-action,
input[type="submit"].double-action,
button.double-action {
  /*
    &:hover,
    &:focus,
    &:active {
      background: @black;
      color: @white;
      span.state-0 {
        display: none;
      }
      span.state-1 {
        display: block;
      }
    }
    */
}
.button.double-action.active,
input[type="submit"].double-action.active,
button.double-action.active {
  color: #fff;
  cursor: pointer;
}
.button.double-action span.state-1,
input[type="submit"].double-action span.state-1,
button.double-action span.state-1 {
  display: none;
}
.button.follow,
input[type="submit"].follow,
button.follow {
  min-width: 7em;
  text-align: center;
}
.button.show-loader,
input[type="submit"].show-loader,
button.show-loader {
  position: relative;
}
.button.show-loader i.loader,
input[type="submit"].show-loader i.loader,
button.show-loader i.loader {
  display: none;
}
.button.show-loader i.loader.loading,
input[type="submit"].show-loader i.loader.loading,
button.show-loader i.loader.loading {
  position: absolute;
  left: 50%;
  top: 6px;
  margin-left: -10px;
  display: block;
}
.msgBoardTag {
  position: relative;
  display: inline-block;
  background-color: orange;
  color: #282828;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 5px 0px 5px;
  font-weight: 600;
  border-radius: 2px;
}
header.profile.board {
  background-size: cover;
  background: #1b1b1b url('/img/theme/png/header-board.png') center;
  clear: both;
}
@media (max-width: 599px) {
  header.profile.board.topic div.inner {
    height: initial;
  }
  header.profile.board.topic div.inner nav.profile {
    bottom: initial;
    top: 10px;
  }
  header.profile.board.topic div.inner nav.profile ul {
    background-color: transparent;
  }
  header.profile.board.topic section.head {
    position: relative;
  }
}
header.profile.board.topic div.downvote-msg {
  text-align: right;
  color: #d2d2d2;
  margin-bottom: 5px;
}
header.profile.board div.inner {
  min-height: 1px;
}
@media (max-width: 599px) {
  header.profile.board div.inner {
    height: 50px;
    padding-bottom: 0;
  }
  header.profile.board div.inner nav.profile {
    bottom: initial;
    top: 10px;
  }
  header.profile.board div.inner nav.profile ul {
    background-color: transparent;
  }
}
header.profile.board img.logo {
  width: 64px;
  height: 64px;
  float: left;
  display: block;
  margin-right: 20px;
}
@media (max-width: 599px) {
  header.profile.board img.logo {
    display: none;
  }
}
header.profile.board section.head {
  float: initial;
  position: absolute;
  left: 80px;
  right: 10px;
  overflow: hidden;
}
@media (max-width: 599px) {
  header.profile.board section.head {
    left: 5px;
  }
}
header.profile.board section.head h1 {
  margin: 0;
  padding-bottom: 5px;
}
@media (max-width: 699px) {
  header.profile.board section.head h1 {
    font-size: 17px;
    line-height: 1.3em;
  }
}
header.profile.board section.head a,
header.profile.board section.head span.username {
  line-height: 20px;
  color: #7f7f7f;
  font-size: 20px;
  padding: 0;
  font-weight: 200;
}
header.profile.board section.head a:hover,
header.profile.board section.head span.username:hover {
  color: #0ec5ff;
}
header.profile.board section.head span {
  font-size: 34px;
}
header.profile.board ul.interest {
  float: initial;
  position: absolute;
  right: 0;
}
@media (max-width: 599px) {
  header.profile.board ul.interest {
    display: none;
  }
}
header.profile.board .topic-name {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
}
header.profile.board nav.rooms ul.reordering li a {
  color: #0ec5ff;
}
header.profile.board section.permissions {
  position: absolute;
  right: 0;
  top: 0;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px #888 solid;
  display: inline-block;
  opacity: 0.6;
  color: #fff;
}
@media (max-width: 599px) {
  header.profile.board section.permissions {
    display: none;
  }
}
header.profile.board section.permissions h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}
header.profile.board section.permissions p {
  margin: 0;
  font-size: 12px;
}
header.profile.board .actionbar {
  position: absolute;
  right: 0;
  bottom: 5px;
}
div#body.board > article {
  max-width: 1200px;
}
div#body.board nav.nested-rooms ul.reordering li a {
  color: #0ec5ff;
}
div#body.board nav.nested-rooms ul li.selected a span {
  font-weight: 600;
}
div#body.board nav.filter {
  position: relative;
  float: left;
}
@media (max-width: 599px) {
  div#body.board nav.filter li {
    margin-bottom: 5px;
  }
}
div#body.board.room {
  position: relative;
}
div#body.board.room a.create-topic,
div#body.board.room p.follow {
  float: right;
  margin-bottom: 10px;
}
div#body.board.topic p.follow {
  float: right;
  margin: 0 20px 10px 0;
}
@media (max-width: 599px) {
  div#body.board.topic p.follow {
    margin: 0;
  }
}
div#body.board .description img.topic-image {
  float: left;
  display: block;
  margin-right: 20px;
  max-width: 256px;
}
div#body.board .description:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
div#body.board section.topic-list {
  position: relative;
  left: -15px;
  width: 100%;
}
div#body.board section.topic-list ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: min-content auto min-content 150px min-content min-content;
  grid-gap: 5px 10px;
  align-items: center;
}
div#body.board section.topic-list ul li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  /*
                        &.topic-name {
                            grid-column: ~"2 / 7";
                        }

                        &.icons {
                            grid-column: ~"1 / 2";
                        }

                        &.avatar {
                            // grid-column: ~" 1 / 2";
                        }
        */
}
div#body.board section.topic-list ul li.topic-name div.tag {
  position: relative;
  display: inline-block;
  background-color: orange;
  color: #282828;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 5px 0px 5px;
  font-weight: 600;
  border-radius: 2px;
  margin: 0 3px 1px 0;
}
div#body.board section.topic-list ul li.topic-name a {
  display: block;
}
div#body.board section.topic-list ul li.avatar {
  display: flex;
}
div#body.board section.topic-list ul li.avatar img.avatar {
  width: 22px;
  height: 22px;
  border-radius: 30px;
}
div#body.board section.topic-list ul li.avatar img.badge {
  bottom: 1px;
  right: -2px;
}
div#body.board section.topic-list ul li.user {
  overflow: hidden;
}
div#body.board section.topic-list ul li.user a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div#body.board section.topic-list ul li.user .date {
  color: #808080;
  font-size: 12px;
}
div#body.board section.topic-list ul li.state-icons,
div#body.board section.topic-list ul li.num {
  font-size: 14px;
  line-height: 14px;
  align-self: center;
  display: flex;
}
div#body.board section.topic-list ul li.state-icons .icon.middle,
div#body.board section.topic-list ul li.num .icon.middle {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background-size: 14px 14px;
}
div#body.board section.topic-list ul li.deleted {
  opacity: 0.3;
}
div#body.board nav.buttons {
  float: right;
}
@media (max-width: 599px) {
  div#body.board nav.buttons {
    float: none;
  }
}
div#body.board nav.buttons > * {
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
}
@media (max-width: 599px) {
  div#body.board nav.buttons p.follow {
    line-height: 1em;
  }
}
@media (max-width: 599px) {
  div#body.board nav.buttons form {
    display: none;
  }
}
div#body.board nav.buttons form input.topic-search,
div#body.board nav.buttons form input[type=text] {
  display: inline-block;
  font-size: 12px;
  margin: 0;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  background: url(/img/theme/svg/search.svg) no-repeat right center;
  outline: none !important;
  background-color: #404040;
  border: none;
  border-right: 14px solid #404040;
  color: #BFBFBF;
}
div#body.board ul.track.player:before {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
div#body.board div.topic-content {
  margin-bottom: 40px;
  min-height: 100px;
}
@media (max-width: 599px) {
  div#body.board div.topic-content {
    min-height: 0;
  }
}
div#body.board div.topic-content .topic-text p {
  margin-bottom: 0.5em;
}
div#body.board div.topic-content .topic-text .player li {
  padding-top: 0;
  margin-bottom: 25px;
}
div#body.board div.topic-content .topic-text .tag {
  position: relative;
  display: inline-block;
  background-color: orange;
  color: #282828;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0 5px 0px 5px;
  font-weight: 600;
  border-radius: 2px;
  margin-right: 3px;
  top: -4px;
}
div#body.board div.topic-content .topic-image,
div#body.board div.topic-content img.attachment {
  float: right;
  display: block;
  margin: 5px;
  border: 1px rgba(0, 0, 0, 0.25) solid;
  box-shadow: 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.05);
  max-width: 40%;
}
div#body.board div.topic-content .topic-image.left,
div#body.board div.topic-content img.attachment.left {
  float: left;
  margin-right: 15px;
}
div#body.board div.topic-content img + p {
  margin-top: 30px;
  border: 10px red solid;
}
div#body.board nav.filter span.tag {
  display: inline-block;
  margin: 1px;
}
div.dialogue.create-topic form .item-input span.item {
  background-color: orange;
}
.topic nav.rooms span.unread-marker,
.board nav.rooms span.unread-marker {
  top: 7px;
}
@media (max-width: 599px) {
  .topic nav.rooms span.unread-marker,
  .board nav.rooms span.unread-marker {
    top: 3px;
    right: 5px;
  }
}
.topic nav.nested-rooms span.unread-marker,
.board nav.nested-rooms span.unread-marker {
  top: 4px;
}
@media (max-width: 599px) {
  .topic nav.nested-rooms span.unread-marker,
  .board nav.nested-rooms span.unread-marker {
    top: 3px;
    right: 5px;
  }
}
.topic nav.filter.nested-rooms ul li,
.board nav.filter.nested-rooms ul li {
  padding: 6px 12px 6px 6px;
  position: relative;
}
.topic nav.filter.nested-rooms ul li:not(:first-child),
.board nav.filter.nested-rooms ul li:not(:first-child) {
  padding: 6px 12px;
}
aside.track .chart-placement {
  background-color: #0ec5ff;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
}
div#body div.album-list-with-tracks {
  margin-bottom: 80px;
}
div#body div.album-list-with-tracks header {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
div#body div.album-list-with-tracks header .cover {
  display: flex;
  margin-right: 12px;
  position: relative;
}
div#body div.album-list-with-tracks header .cover:hover span {
  display: block;
}
div#body div.album-list-with-tracks header .cover span.playing,
div#body div.album-list-with-tracks header .cover span.pausing,
div#body div.album-list-with-tracks header .cover span.buffering {
  display: block;
}
div#body div.album-list-with-tracks header .cover span {
  width: 128px;
  height: 128px;
  display: none;
  top: 0;
  left: 0;
  position: absolute;
}
div#body div.album-list-with-tracks header .right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
div#body div.album-list-with-tracks header .right .top-row {
  display: flex;
  font-size: 12px;
}
div#body div.album-list-with-tracks header .right .top-row div.user-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: fit-content;
  font-size: 14px;
  flex: 1;
}
div#body div.album-list-with-tracks header .right .top-row .info-wrapper {
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
div#body div.album-list-with-tracks header .right .top-row .info-wrapper .info-fav,
div#body div.album-list-with-tracks header .right .top-row .info-wrapper .info-date {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
div#body div.album-list-with-tracks header .right .top-row .info-wrapper .info-date {
  margin-right: 20px;
}
div#body div.album-list-with-tracks header .right .top-row .info-wrapper i.date,
div#body div.album-list-with-tracks header .right .top-row .info-wrapper i.like {
  margin-right: 4px;
}
div#body div.album-list-with-tracks header .right .top-row .info-wrapper a,
div#body div.album-list-with-tracks header .right .top-row .info-wrapper b {
  display: flex;
}
div#body div.album-list-with-tracks header .right a.name {
  font-size: 22px;
  font-weight: 800;
  width: fit-content;
  color: white;
}
div#body div.album-list-with-tracks header .right a {
  text-decoration: none !important;
}
div#body div.album-list-with-tracks header .right .publish {
  margin-top: auto;
  align-self: flex-end;
}
div#body div.album-list-with-tracks header .right .publish a {
  width: 100px;
}
.tracklist {
  margin-bottom: 50px;
}
.tracklist table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
  table-layout: fixed;
}
.tracklist table tr {
  height: 38px;
  background-color: #262626;
}
.tracklist table tr:hover,
.tracklist table tr.playing,
.tracklist table tr.pausing,
.tracklist table tr.buffering {
  background: #303030;
}
.tracklist table tr:hover th .play,
.tracklist table tr.playing th .play,
.tracklist table tr.pausing th .play,
.tracklist table tr.buffering th .play {
  display: block;
}
.tracklist table tr:hover th .position,
.tracklist table tr.playing th .position,
.tracklist table tr.pausing th .position,
.tracklist table tr.buffering th .position {
  display: none;
}
.tracklist table tr:not(.playing):not(.pausing):not(.buffering):hover {
  background: #2A2A2A;
}
.tracklist table th {
  width: 24px;
  height: 24px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 3px 0 0 3px;
}
.tracklist table th .play {
  display: none;
}
.tracklist table th .position {
  min-width: 24px;
  display: block;
  min-height: 24px;
  line-height: 24px;
}
.tracklist table td {
  white-space: nowrap;
}
.tracklist table td.cover,
.tracklist table td.avatar {
  width: 32px;
}
.tracklist table td.tracklist-title,
.tracklist table td.tracklist-author {
  padding: 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tracklist table td.tracklist-plays {
  width: 60px;
  padding-right: 10px;
}
.tracklist table td.remove-track {
  width: 10px;
  padding: 0 16px 0 0;
}
.tracklist table td:last-child {
  border-radius: 0 3px 3px 0;
}
.tracklist table img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
.tracklist table img.avatar {
  border-radius: 16px;
}
.tracklist .show-more {
  margin-top: 12px;
}
.tracklist a {
  text-decoration: none !important;
}
header.profile.sample {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  padding-top: 12px;
  background: #303030;
}
@media (min-width: 700px) {
  header.profile.sample {
    padding-top: 42px;
  }
}
@media (min-width: 1200px) {
  header.profile.sample {
    padding-top: 54px;
  }
}
header.profile.sample.admin-mode {
  background-color: #330000;
}
header.profile.sample h6.admin-note {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #ccc;
  font-size: 12px;
  text-transform: uppercase;
}
header.profile.sample .actionbar {
  position: absolute;
  left: -90px;
  top: 96px;
}
@media (max-width: 699px) {
  header.profile.sample .actionbar li.remix {
    display: none;
  }
}
@media (min-width: 480px) {
  header.profile.sample .actionbar {
    top: 0;
    left: 0;
    position: relative;
    float: right;
  }
}
@media (min-width: 700px) {
  header.profile.sample .actionbar {
    float: right;
    position: relative;
    top: -12px;
    left: auto;
    margin-right: 10px;
  }
}
header.profile.sample .actionbar li {
  padding: 0 11px;
  margin: 0;
}
header.profile.sample .actionbar li:first-child {
  padding-left: 0;
}
@media (min-width: 480px) {
  header.profile.sample .actionbar li {
    padding: 0;
    margin-top: 10px;
    padding: 0 10px;
  }
}
@media (min-width: 1200px) {
  header.profile.sample .actionbar li {
    padding: 0 21px;
  }
}
header.profile.sample .actionbar li a {
  font-size: 11px;
}
@media (min-width: 1200px) {
  header.profile.sample .actionbar li a {
    font-size: 14px;
  }
}
header.profile.sample .actionbar li button {
  margin: 0;
  padding: 0;
}
header.profile.sample .actionbar li:last-child {
  padding-right: 0;
}
@media (max-width: 599px) {
  header.profile.sample .inner ul.interest li.date {
    display: none;
  }
}
header.profile.sample .inner section.cover {
  position: absolute;
  overflow: hidden;
  background-color: #1b1b1b;
  width: 80px;
  height: 80px;
  left: 0;
  top: 0;
}
@media (min-width: 480px) {
  header.profile.sample .inner section.cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 140px;
    line-height: 140px;
  }
}
header.profile.sample .inner section.cover a {
  width: 100%;
  display: block;
}
header.profile.sample .inner section.cover img {
  vertical-align: middle;
  margin-bottom: 0;
  width: 100%;
}
@media (min-width: 480px) {
  header.profile.sample .inner section.cover img {
    width: 140px;
  }
}
@media (min-width: 700px) {
  header.profile.sample .inner section.cover {
    width: 150px;
    height: 150px;
    line-height: 150px;
    top: 0;
  }
  header.profile.sample .inner section.cover img {
    width: 150px;
  }
}
@media (min-width: 1200px) {
  header.profile.sample .inner section.cover {
    width: 200px;
    height: 200px;
    line-height: 200px;
  }
  header.profile.sample .inner section.cover img {
    width: 200px;
  }
}
@media (min-width: 600px) {
  header.profile.sample .inner .player {
    padding-bottom: 22px;
    margin-left: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 90px;
  }
  header.profile.sample .inner .player:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  header.profile.sample .inner .player .playbutton {
    position: absolute;
    display: block;
    width: 64px;
    height: 64px;
    z-index: 2;
  }
  header.profile.sample .inner .player .playbutton span {
    width: 50px;
    height: 50px;
    background-size: contain;
  }
  header.profile.sample .inner .player h1,
  header.profile.sample .inner .player h2 {
    font-size: 16px;
    top: 8px;
    color: #888;
    line-height: 12px;
    padding-top: 3px;
    margin: 0;
    margin-left: 0px;
  }
  header.profile.sample .inner .player h1 span,
  header.profile.sample .inner .player h2 span {
    padding-top: 2px;
    font-size: 24px;
    display: block;
    color: #fff;
    line-height: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header.profile.sample .inner .player .waveform {
    margin-left: 75px;
  }
  header.profile.sample .inner .player .waveform img,
  header.profile.sample .inner .player .waveform canvas {
    display: none;
  }
  header.profile.sample .inner .player .album-progress {
    margin: 8px 0 16px;
    position: absolute;
    top: 0;
    left: 70px;
    right: 0;
    display: none;
  }
  header.profile.sample .inner .player .position {
    float: none;
    font-size: 14px;
  }
  header.profile.sample .inner .player .position span:first-child {
    color: #fff;
    padding-right: 16px;
  }
  header.profile.sample .inner .player .position span:last-child {
    color: #888;
  }
}
@media (min-width: 600px) and (min-width: 480px) {
  header.profile.sample .inner .player {
    margin-left: 0;
    clear: both;
    position: relative;
    padding-bottom: 0;
    top: auto;
    left: auto;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.sample .inner .player {
    position: relative;
    margin-left: 0;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.sample .inner .player {
    margin-left: 0;
    padding-bottom: 26px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.sample .inner .player .playbutton span {
    width: 64px;
    height: 64px;
  }
}
@media (min-width: 600px) and (max-width: 699px) {
  header.profile.sample .inner .player h1,
  header.profile.sample .inner .player h2 {
    font-size: 14px;
  }
}
@media (min-width: 600px) and (min-width: 480px) {
  header.profile.sample .inner .player h1,
  header.profile.sample .inner .player h2 {
    display: block;
    padding-top: 10px;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.sample .inner .player h1,
  header.profile.sample .inner .player h2 {
    position: relative;
    line-height: 20px;
    top: -5px;
    margin-bottom: 4px;
    padding-top: 0;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.sample .inner .player h1,
  header.profile.sample .inner .player h2 {
    font-size: 20px;
    margin-bottom: 13px;
    top: -1px;
  }
}
@media (min-width: 600px) and (max-width: 599px) {
  header.profile.sample .inner .player h1 span,
  header.profile.sample .inner .player h2 span {
    font-size: 20px;
  }
}
@media (min-width: 600px) and (max-width: 699px) {
  header.profile.sample .inner .player h1 span,
  header.profile.sample .inner .player h2 span {
    line-height: 1.5em;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.sample .inner .player h1 span,
  header.profile.sample .inner .player h2 span {
    font-size: 28px;
    line-height: 1.5;
    position: relative;
    top: -5px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.sample .inner .player h1 span,
  header.profile.sample .inner .player h2 span {
    font-size: 34px;
    line-height: 1.5;
    position: relative;
    top: -3px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) and (max-width: 599px) {
  header.profile.sample .inner .player h1 span,
  header.profile.sample .inner .player h2 span {
    font-size: 24px;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.sample .inner .player .waveform img,
  header.profile.sample .inner .player .waveform canvas {
    width: 100%;
    min-height: 72px;
    max-height: 72px;
    margin-bottom: 17px;
    display: block;
    min-height: 50px;
    max-height: 50px;
    margin-bottom: 15px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.sample .inner .player .waveform img,
  header.profile.sample .inner .player .waveform canvas {
    min-height: 72px;
    max-height: 72px;
    margin-bottom: 22px;
  }
}
@media (min-width: 600px) and (min-width: 480px) {
  header.profile.sample .inner .player .album-progress {
    display: block;
    margin: 15px 0 16px;
    position: relative;
    border-right: 10px solid transparent;
    top: 2px;
    padding-left: 64px;
    left: 0;
    box-sizing: border-box;
    right: auto;
    z-index: 1;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.sample .inner .player .album-progress {
    display: block;
    padding-left: 0;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.sample .inner .player .album-progress {
    margin: 34px 0 34px;
  }
}
@media (min-width: 600px) and (max-width: 599px) {
  header.profile.sample .inner .player .position {
    font-size: 10px;
  }
}
@media (min-width: 600px) and (min-width: 480px) {
  header.profile.sample .inner .player .position {
    position: relative;
    left: 0;
    top: 0;
  }
}
@media (min-width: 600px) and (max-width: 699px) {
  header.profile.sample .inner .player .position {
    display: none;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.sample .inner .player .position {
    position: relative;
    left: 0;
    top: 0;
    float: left;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.sample .inner .player .position {
    font-size: 16px;
  }
}
header.profile.sample .interest {
  z-index: 300;
  clear: both;
  position: absolute;
  left: 0;
  top: 90px;
}
@media (max-width: 699px) {
  header.profile.sample .interest {
    position: absolute;
    top: 54px;
    left: 86px;
  }
  header.profile.sample .interest .created {
    display: none;
  }
}
@media (min-width: 480px) {
  header.profile.sample .interest {
    position: absolute;
    top: 150px;
  }
}
@media (min-width: 700px) {
  header.profile.sample .interest {
    top: -3px;
    right: 10px;
    left: auto;
  }
}
header.profile.sample .interest li {
  padding: 0;
}
@media (min-width: 700px) {
  header.profile.sample .interest li:first-child {
    margin-bottom: 10px;
  }
  header.profile.sample .interest li:nth-child(2) {
    display: block;
    clear: both;
  }
}
@media (min-width: 1000px) {
  header.profile.sample .interest li:first-child {
    margin-bottom: 0;
  }
  header.profile.sample .interest li:nth-child(2) {
    display: inline;
    clear: none;
  }
}
header.profile.sample .interest li i {
  margin-right: 0;
}
header.profile.sample .interest li span {
  font-size: 14px;
}
@media (min-width: 1200px) {
  header.profile.sample .interest li span {
    font-size: 16px;
  }
}
header.profile.sample .tags {
  display: none;
  background-image: url('/img/theme/svg/16/tag.grey.svg');
}
@media (min-width: 700px) {
  header.profile.sample .tags {
    display: block;
  }
}
header.profile.sample .tags li {
  font-size: 14px;
  padding-left: 16px;
  color: #888;
  text-transform: uppercase;
}
@media (min-width: 1200px) {
  header.profile.sample .tags li {
    font-size: 16px;
  }
}
header.profile.sample .tags li a {
  color: #888;
  text-decoration: none;
  text-transform: none;
}
header.profile.sample .tags li a:hover,
header.profile.sample .tags li a:hover,
header.profile.sample .tags li a:active {
  color: #0ec5ff;
}
header.noheader {
  background: transparent;
  height: 40px;
  margin-bottom: 0;
}
@media (max-width: 599px) {
  header.noheader {
    height: 10px;
  }
}
header.profile {
  padding-top: 35px;
  margin-bottom: 30px;
  position: relative;
  background-size: cover;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
@media (max-width: 599px) {
  header.profile {
    padding-top: 0;
  }
}
@media (max-width: 699px) {
  header.profile {
    margin-bottom: 10px;
  }
}
header.profile.small > .inner {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  height: 240px;
}
header.profile.small > .inner h1 {
  font-size: 32px;
  margin-bottom: 0;
  text-transform: none;
}
@media (max-width: 599px) {
  header.profile.small > .inner h1 {
    font-size: 22px;
  }
}
@media (max-width: 599px) {
  header.profile.small > .inner {
    height: auto;
  }
}
header.profile > .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 230px;
  padding-bottom: 53px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
@media (max-width: 599px) {
  header.profile > .inner {
    padding-top: 5px;
  }
}
@media (min-width: 700px) {
  header.profile > .inner {
    padding: 0 0 55px 0;
  }
}
header.profile > .inner > div {
  margin-left: 117px;
}
@media (min-width: 520px) {
  header.profile > .inner > div {
    margin-left: 217px;
  }
}
@media (min-width: 1200px) {
  header.profile > .inner > div {
    margin-left: 286px;
  }
}
header.profile > .inner h1 a {
  text-decoration: none;
  text-transform: none;
}
header.profile nav.profile {
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (max-width: 599px) {
  header.profile nav.profile.light li a {
    background-color: #404040;
  }
}
header.profile nav.profile li {
  position: relative;
  overflow: hidden;
  color: #fff;
}
header.profile nav.profile li.selected a,
header.profile nav.profile li a.selected {
  border-bottom: 4px solid #0ec5ff;
  text-decoration: none;
}
header.profile nav.profile li a {
  text-decoration: none;
}
header.profile nav.profile li a:hover,
header.profile nav.profile li a:active,
header.profile nav.profile li a:focus {
  color: inherit;
}
header.profile nav.profile li a .pill {
  top: -6px;
  vertical-align: middle;
}
header.profile ul.actionbar {
  margin: 0;
  padding: 0;
  list-style: none;
}
header.profile ul.actionbar:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
header.profile ul.actionbar > li {
  float: left;
  padding-right: 6px;
}
@media (max-width: 599px) {
  header.profile ul.actionbar li a {
    margin-right: 10px;
  }
}
header.profile .tags {
  position: relative;
  top: 8px;
  display: none;
  background-image: url('/img/theme/svg/16/tag.grey.svg');
}
@media (min-width: 700px) {
  header.profile .tags {
    display: block;
  }
}
header.profile .tags li {
  font-size: 14px;
  padding-left: 16px;
  color: #888;
}
header.profile .tags li a {
  color: #888;
  text-decoration: none;
  text-transform: capitalize;
}
header.profile .tags li a.genre {
  text-transform: uppercase;
}
header.profile .tags li a:hover,
header.profile .tags li a:hover,
header.profile .tags li a:active {
  color: #0ec5ff;
}
header.profile .adminbar {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 599px) {
  header.profile .adminbar {
    display: none;
  }
}
header.profile .adminbar:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
header.profile .adminbar div {
  max-width: 1200px;
  margin: auto;
  padding: 0 10px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
header.profile .adminbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 8px 0 9px;
}
@media (max-width: 599px) {
  header.profile .adminbar ul {
    padding: 1px 0 1px;
  }
}
header.profile .adminbar ul li {
  background: #404040;
  padding: 2px 10px;
  margin: 2px;
}
header.profile .adminbar ul li a {
  font-size: 10px;
  line-height: 1em;
  color: #d2d2d2;
  text-transform: uppercase;
  text-decoration: none;
}
@media (max-width: 599px) {
  header.profile .adminbar ul li a {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
header.profile .adminbar ul li a:hover,
header.profile .adminbar ul li a:active,
header.profile .adminbar ul li a:focus {
  color: #0ec5ff;
}
header.profile .adminbar ul li a .icon {
  position: relative;
  top: 1px;
}
header.profile .adminbar ul.staff {
  float: left;
}
header.sample-audit {
  background-color: #282828;
}
header.profile.track,
header.profile.album {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  background: #282828;
}
header.profile.track.admin-mode,
header.profile.album.admin-mode {
  background-color: #330000;
}
header.profile.track h6.admin-note,
header.profile.album h6.admin-note {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #ccc;
  font-size: 12px;
  text-transform: uppercase;
}
header.profile.track .position span:first-child,
header.profile.album .position span:first-child {
  color: #fff;
  padding-right: 16px;
}
header.profile.track .position span:last-child,
header.profile.album .position span:last-child {
  color: #888;
}
header.profile.track .actionbar .uncategorized,
header.profile.album .actionbar .uncategorized {
  background-color: #f16b1c;
  color: #fff;
  border: 0;
  padding: 0 14px;
}
@media (max-width: 699px) {
  header.profile.track .actionbar li.remix,
  header.profile.album .actionbar li.remix {
    display: none;
  }
}
header.profile.track .actionbar > li,
header.profile.album .actionbar > li {
  padding: 0 8px;
  margin: 0;
}
header.profile.track .actionbar > li:first-child,
header.profile.album .actionbar > li:first-child {
  padding-left: 0;
}
header.profile.track .actionbar > li > a,
header.profile.album .actionbar > li > a {
  font-size: 11px;
}
@media (min-width: 1200px) {
  header.profile.track .actionbar > li > a,
  header.profile.album .actionbar > li > a {
    font-size: 14px;
  }
}
header.profile.track .actionbar > li button,
header.profile.album .actionbar > li button {
  margin: 0;
  padding: 0;
}
header.profile.track .actionbar li:last-child,
header.profile.album .actionbar li:last-child {
  padding-right: 0;
}
@media (max-width: 599px) {
  header.profile.track > .inner ul.interest li.date,
  header.profile.album > .inner ul.interest li.date {
    display: none;
  }
}
header.profile.track > .inner section.cover,
header.profile.album > .inner section.cover {
  position: absolute;
  background-color: #1b1b1b;
  width: 80px;
  height: 80px;
  left: 0;
  top: 0;
}
@media (min-width: 480px) {
  header.profile.track > .inner section.cover,
  header.profile.album > .inner section.cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 140px;
  }
}
header.profile.track > .inner section.cover > a,
header.profile.album > .inner section.cover > a {
  width: 100%;
  display: block;
}
header.profile.track > .inner section.cover img,
header.profile.album > .inner section.cover img {
  vertical-align: middle;
  margin-bottom: 0;
  width: 100%;
}
@media (min-width: 700px) {
  header.profile.track > .inner section.cover,
  header.profile.album > .inner section.cover {
    width: 150px;
    height: 150px;
    top: 0;
  }
}
@media (min-width: 1200px) {
  header.profile.track > .inner section.cover,
  header.profile.album > .inner section.cover {
    width: 180px;
    height: 180px;
  }
}
@media (min-width: 600px) {
  header.profile.track > .inner .player,
  header.profile.album > .inner .player {
    padding-bottom: 22px;
    margin-left: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 90px;
  }
  header.profile.track > .inner .player:after,
  header.profile.album > .inner .player:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  header.profile.track > .inner .player .playbutton,
  header.profile.album > .inner .player .playbutton {
    display: block;
    width: 64px;
    height: 64px;
    z-index: 2;
    position: absolute;
    left: -75px;
    top: 14px;
  }
  header.profile.track > .inner .player .playbutton span,
  header.profile.album > .inner .player .playbutton span {
    width: 50px;
    height: 50px;
    background-size: contain;
  }
  header.profile.track > .inner .player h1,
  header.profile.album > .inner .player h1,
  header.profile.track > .inner .player h2,
  header.profile.album > .inner .player h2 {
    font-size: 16px;
    text-transform: none;
    top: 8px;
    color: #BFBFBF;
    line-height: 12px;
    padding-top: 3px;
    margin: 0;
  }
  header.profile.track > .inner .player h1 span,
  header.profile.album > .inner .player h1 span,
  header.profile.track > .inner .player h2 span,
  header.profile.album > .inner .player h2 span {
    padding-top: 2px;
    font-size: 24px;
    display: block;
    color: #fff;
    line-height: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header.profile.track > .inner .player .waveform,
  header.profile.album > .inner .player .waveform {
    position: relative;
    margin-top: 10px;
  }
  header.profile.track > .inner .player .waveform img,
  header.profile.album > .inner .player .waveform img,
  header.profile.track > .inner .player .waveform canvas,
  header.profile.album > .inner .player .waveform canvas {
    display: none;
  }
}
@media (min-width: 600px) and (min-width: 480px) {
  header.profile.track > .inner .player,
  header.profile.album > .inner .player {
    margin-left: 160px;
    clear: both;
    position: relative;
    padding-bottom: 0;
    top: auto;
    left: auto;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.track > .inner .player,
  header.profile.album > .inner .player {
    position: relative;
    margin-left: 216px;
  }
}
@media (min-width: 600px) and (min-width: 480px) {
  header.profile.track > .inner .player .playbutton,
  header.profile.album > .inner .player .playbutton {
    position: absolute;
    left: -115px;
    top: 45px;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.track > .inner .player .playbutton,
  header.profile.album > .inner .player .playbutton {
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.track > .inner .player .playbutton,
  header.profile.album > .inner .player .playbutton {
    width: 64px;
    height: 64px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.track > .inner .player .playbutton span,
  header.profile.album > .inner .player .playbutton span {
    width: 64px;
    height: 64px;
  }
}
@media (min-width: 600px) and (max-width: 699px) {
  header.profile.track > .inner .player h1,
  header.profile.album > .inner .player h1,
  header.profile.track > .inner .player h2,
  header.profile.album > .inner .player h2 {
    font-size: 14px;
  }
}
@media (min-width: 600px) and (min-width: 480px) {
  header.profile.track > .inner .player h1,
  header.profile.album > .inner .player h1,
  header.profile.track > .inner .player h2,
  header.profile.album > .inner .player h2 {
    display: block;
    padding-top: 10px;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.track > .inner .player h1,
  header.profile.album > .inner .player h1,
  header.profile.track > .inner .player h2,
  header.profile.album > .inner .player h2 {
    position: relative;
    margin-left: 65px;
    line-height: 20px;
    top: -5px;
    padding-top: 0;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.track > .inner .player h1,
  header.profile.album > .inner .player h1,
  header.profile.track > .inner .player h2,
  header.profile.album > .inner .player h2 {
    font-size: 20px;
    margin-left: 80px;
    top: -1px;
  }
}
@media (min-width: 600px) and (max-width: 599px) {
  header.profile.track > .inner .player h1 span,
  header.profile.album > .inner .player h1 span,
  header.profile.track > .inner .player h2 span,
  header.profile.album > .inner .player h2 span {
    font-size: 20px;
  }
}
@media (min-width: 600px) and (max-width: 699px) {
  header.profile.track > .inner .player h1 span,
  header.profile.album > .inner .player h1 span,
  header.profile.track > .inner .player h2 span,
  header.profile.album > .inner .player h2 span {
    line-height: 1.5em;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.track > .inner .player h1 span,
  header.profile.album > .inner .player h1 span,
  header.profile.track > .inner .player h2 span,
  header.profile.album > .inner .player h2 span {
    font-size: 28px;
    line-height: 1.5;
    position: relative;
    top: -5px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) {
  header.profile.track > .inner .player h1 span,
  header.profile.album > .inner .player h1 span,
  header.profile.track > .inner .player h2 span,
  header.profile.album > .inner .player h2 span {
    font-size: 32px;
    line-height: 1.5;
    position: relative;
    top: -3px;
  }
}
@media (min-width: 600px) and (min-width: 1200px) and (max-width: 599px) {
  header.profile.track > .inner .player h1 span,
  header.profile.album > .inner .player h1 span,
  header.profile.track > .inner .player h2 span,
  header.profile.album > .inner .player h2 span {
    font-size: 22px;
  }
}
@media (min-width: 600px) and (min-width: 700px) {
  header.profile.track > .inner .player .waveform img,
  header.profile.album > .inner .player .waveform img,
  header.profile.track > .inner .player .waveform canvas,
  header.profile.album > .inner .player .waveform canvas {
    width: 100%;
    display: block;
    min-height: 64px;
    max-height: 64px;
    margin-bottom: 15px;
  }
}
header.profile.track .interest,
header.profile.album .interest {
  z-index: 300;
  clear: both;
  position: absolute;
  left: 0;
  top: 90px;
}
@media (max-width: 699px) {
  header.profile.track .interest,
  header.profile.album .interest {
    top: 54px;
    left: 86px;
  }
  header.profile.track .interest .created,
  header.profile.album .interest .created {
    display: none;
  }
}
@media (min-width: 480px) {
  header.profile.track .interest,
  header.profile.album .interest {
    top: 150px;
  }
}
@media (min-width: 700px) {
  header.profile.track .interest,
  header.profile.album .interest {
    top: -3px;
    right: 0px;
    left: auto;
  }
}
header.profile.track .interest li,
header.profile.album .interest li {
  padding: 0;
}
@media (min-width: 700px) {
  header.profile.track .interest li:first-child,
  header.profile.album .interest li:first-child {
    margin-bottom: 10px;
  }
  header.profile.track .interest li:nth-child(2),
  header.profile.album .interest li:nth-child(2) {
    display: block;
    clear: both;
  }
}
@media (min-width: 1000px) {
  header.profile.track .interest li:first-child,
  header.profile.album .interest li:first-child {
    margin-bottom: 0;
  }
  header.profile.track .interest li:nth-child(2),
  header.profile.album .interest li:nth-child(2) {
    display: inline;
    clear: none;
  }
}
header.profile.track .interest li i,
header.profile.album .interest li i {
  margin-right: 0;
}
header.profile.track .interest li span,
header.profile.album .interest li span {
  font-size: 14px;
}
header.profile.track div.dropdown,
header.profile.album div.dropdown {
  top: 25px;
  left: -12px;
}
header.profile.track div.dropdown a,
header.profile.album div.dropdown a {
  font-size: 10px;
}
@media (max-width: 599px) {
  header.profile.track {
    padding: 0;
  }
  header.profile.track > .inner {
    background-color: #282828;
    padding: 0 0 20px 0;
    border: 0;
  }
  header.profile.track > .inner section.cover {
    position: relative;
    top: 0px;
    width: initial;
    height: initial;
    margin-bottom: 55px;
  }
  header.profile.track > .inner section.cover a {
    pointer-events: none;
  }
  header.profile.track > .inner h1 {
    font-weight: 400;
    position: absolute;
    top: 5px;
    left: 2px;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
  }
  header.profile.track > .inner h1 var {
    font-size: 12px;
    line-height: 12px;
  }
  header.profile.track > .inner h1 var.authors {
    margin-top: 4px;
  }
  header.profile.track > .inner h1 span,
  header.profile.track > .inner h1 var.authors {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px;
    margin-left: 6px;
    opacity: 0.85;
  }
  header.profile.track > .inner h1 span {
    display: block;
  }
  header.profile.track > .inner .player {
    margin-left: 0;
  }
  header.profile.track > .inner .player .playbutton {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: calc((80px / -2) - 25px) 0 0 calc(80px / -2);
  }
  header.profile.track > .inner .player .playbutton span.play {
    background-size: cover;
  }
  header.profile.track > .inner .player .waveform {
    position: absolute;
    bottom: 32px;
    left: 0px;
    width: calc(100% - 20px);
    margin: 0 10px;
    -moz-box-sizing: padding-box;
    box-sizing: border-box;
  }
  header.profile.track > .inner .player .waveform canvas {
    height: 30px;
    width: 100%;
    border-right: 200px;
  }
  header.profile.track > .inner .player .position {
    display: none;
  }
  header.profile.track > .inner ul.interest {
    position: absolute;
    top: initial;
    left: initial;
    bottom: 5px;
    right: 10px;
  }
  header.profile.track > .inner ul.interest.big li span {
    padding-left: 5px;
    font-size: 12px;
  }
  header.profile.track > .inner ul.interest i {
    width: 11px;
    height: 11px;
    background-size: cover;
  }
  header.profile.track > .inner ul.actionbar {
    top: initial;
    left: 10px;
    bottom: 5px;
  }
  header.profile.track > .inner ul.actionbar > li {
    padding-right: 0px;
  }
  header.profile.track > .inner ul.actionbar > li i {
    width: 11px;
    height: 11px;
    background-size: cover;
  }
  header.profile.track > .inner var.authors {
    max-width: 70vw;
  }
  header.profile nav.profile {
    z-index: 9999;
    position: absolute;
    top: 7px;
    right: 5px;
    bottom: initial;
  }
  header.profile nav.profile ul {
    position: absolute;
    padding: 5px;
    top: 0;
    right: 0;
  }
  header.profile nav.profile ul:hover {
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.43);
    background: #202020 none;
  }
  header.profile nav.profile ul:hover li {
    background-color: #202020;
    max-height: none;
    display: block;
  }
  header.profile nav.profile ul:hover li:before {
    content: ' ';
  }
  header.profile nav.profile ul:hover li a {
    display: block;
    margin: 12px 20px;
    background-color: #202020;
  }
  header.profile nav.profile ul:hover li.selected {
    padding: 2px 0;
  }
  header.profile nav.profile ul:hover li.selected a {
    font-size: 11px;
  }
  header.profile nav.profile ul:hover li.selected a:before {
    content: '\2713 \00a0';
  }
  header.profile nav.profile li {
    display: none;
    float: none;
    color: #fff !important;
    margin: 1px;
    text-align: center;
    background-color: #404040;
    padding: 2px 0;
  }
  header.profile nav.profile li.selected a,
  header.profile nav.profile li a.selected {
    border: 0 !important;
    border: inherit;
    font-size: 11px;
    border-bottom: inherit;
  }
  @keyframes hide {
    to {
      opacity: 0;
      width: 0;
      height: 0;
    }
  }
  header.profile nav.profile li span.overlay {
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    right: 0;
    bottom: 0;
    background-color: transparent;
    animation: hide 0s ease-in 0.3s forwards;
  }
  header.profile nav.profile li.selected {
    display: block;
    color: #282828;
    font-size: 16px;
    padding: 3px 3px 3px 5px;
    pointer-events: none;
  }
  header.profile nav.profile li.selected:before {
    content: '\2630 \00a0';
  }
  header.profile nav.profile li.selected a {
    display: none;
  }
  header.profile nav.profile li.selected .badge {
    width: 100%;
  }
  header.profile nav.profile li a {
    display: inline-block;
    font-size: 11px;
    border-radius: 3px;
    padding: 7px;
    text-align: center;
    color: #fff;
    margin: 0 5px 5px 0;
  }
  header.profile nav.profile li a * {
    vertical-align: middle;
  }
  header.profile nav.profile li a span.pill {
    display: none;
  }
  header.profile nav.profile li a:hover,
  header.profile nav.profile li a:active,
  header.profile nav.profile li a:focus {
    color: inherit;
  }
}
header.musicpage {
  position: relative;
  background-size: cover;
  background: #1b1b1b url('/img/theme/png/header-musicpage.png') center;
}
@media (max-width: 599px) {
  header.musicpage {
    padding-top: 0;
  }
}
header.musicpage > .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
header.musicpage > .inner h1 span {
  color: #0ec5ff;
}
header.musicpage > .inner .profile {
  position: absolute;
  left: 0;
  bottom: 0;
}
header.profile.domain {
  /* socialstats */
}
header.profile.domain .inner h1 {
  text-transform: none;
  color: #d2d2d2;
  position: relative;
  vertical-align: top;
  display: inline;
  top: -1px;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 16px 12px 0;
}
@media (min-width: 680px) {
  header.profile.domain .inner h1 {
    font-size: 32px;
  }
}
@media (min-width: 680px) and (max-width: 599px) {
  header.profile.domain .inner h1 {
    font-size: 22px;
  }
}
@media (max-width: 699px) {
  header.profile.domain .inner h1 {
    font-size: 17px;
  }
}
header.profile.domain .blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
header.profile.domain .inner > article {
  display: grid;
  grid-template-columns: min-content auto min-content min-content;
  grid-gap: 20px;
}
header.profile.domain section.avatar {
  width: 100%;
  height: 100%;
  position: relative;
}
header.profile.domain section.avatar span.online-indicator {
  position: absolute;
  z-index: 1000;
  bottom: -2px;
  right: 0;
  font-size: 10px;
  color: #0ec5ff;
  font-weight: 600;
}
@media (max-width: 599px) {
  header.profile.domain section.avatar {
    padding-left: 10px;
  }
}
header.profile.domain section.follow {
  align-self: end;
}
header.profile.domain section.follow p.profile-follow {
  margin: 0 10px 5px 0;
}
header.profile.domain img.avatar {
  width: 100px;
  height: 100px;
  border-radius: 250px;
}
@media (min-width: 520px) {
  header.profile.domain img.avatar {
    width: 190px;
    height: 190px;
  }
}
header.profile.domain img.badge-profile {
  width: 20px;
  height: 20px;
}
@media (max-width: 699px) {
  header.profile.domain img.badge-profile {
    width: 20px;
    height: 20px;
  }
}
@media (min-width: 680px) {
  header.profile.domain img.badge-profile {
    width: 30px;
    height: 30px;
  }
}
@media (min-width: 1200px) {
  header.profile.domain img.badge-profile {
    width: 72px;
    height: 72px;
    position: relative;
    top: -24px;
    left: -4px;
  }
}
header.profile.domain nav.profile {
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (max-width: 599px) {
  header.profile.domain nav.profile {
    top: -5px;
    bottom: initial;
  }
  header.profile.domain nav.profile ul {
    top: 0;
    background-color: #202020;
    padding: 0;
    margin: 0;
  }
  header.profile.domain nav.profile ul li {
    background-color: #202020;
  }
}
@media (max-width: 599px) {
  header.profile.domain nav.social {
    display: none;
  }
}
header.profile.domain nav.social ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25px, 25px));
  grid-gap: 11px;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
header.profile.domain nav.social ul li a {
  display: block;
}
header.profile.domain nav.social ul li img {
  width: 20px !important;
  height: 20px !important;
}
header.profile.domain .socialstats {
  display: flex;
  justify-content: flex-end;
  color: #808080;
  font-size: 14px;
  line-height: 15px;
  margin-top: 5px;
  margin-bottom: 10px;
}
header.profile.domain .socialstats span {
  white-space: nowrap;
  margin-bottom: 10px;
  padding-left: 20px;
}
header.profile.domain .socialstats span:first-child {
  padding-left: 0;
}
header.profile.domain .socialstats span em {
  color: #BFBFBF;
  font-weight: inherit;
  font-style: normal;
}
@media (min-width: 420px) {
  header.profile.domain .socialstats span em {
    display: block;
  }
}
@media (max-width: 599px) {
  header.profile.domain .socialstats {
    display: none;
  }
}
@media (max-width: 599px) {
  header.profile.domain .socialstats {
    flex-direction: column;
    font-size: 10px;
  }
  header.profile.domain .socialstats span {
    padding-left: 0;
  }
}
header.profile.domain .patreon-badge {
  position: absolute;
  left: 30px;
  bottom: 30px;
}
header.profile.domain .profile-follow {
  margin: 0 0 17px 0;
  text-align: center;
}
@media (min-width: 1200px) {
  header.profile.domain .profile-follow {
    margin: 0 0 35px 0;
  }
}
header.profile.domain .profile-follow span.follows-you {
  display: block;
  margin-top: 12px;
  color: #808080;
  text-transform: uppercase;
  /* font-style: italic; */
  font-size: 12px;
}
@media (max-width: 599px) {
  header.profile.domain .profile-follow span.follows-you {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
@media (max-width: 699px) {
  header.profile.domain .profile-follow span.follows-you {
    display: none;
  }
}
header.profile.domain .profile-description {
  font-size: 14px;
  line-height: 20px;
  color: #888;
  position: relative;
  margin-bottom: 15px;
  width: 70%;
  max-height: 4.5em;
  overflow: hidden;
}
@media (max-width: 599px) {
  header.profile.domain .profile-description {
    font-size: 10px;
  }
}
@media (max-width: 699px) {
  header.profile.domain .profile-description {
    display: none;
  }
}
header.profile.domain .profile-description p {
  font-size: inherit;
  line-height: inherit;
}
header.profile.domain .profile-description span {
  white-space: nowrap;
}
header.profile.domain .actionbar {
  position: absolute;
  right: 0px;
  bottom: 5px;
}
@media (max-width: 599px) {
  header.profile.domain .actionbar {
    display: none;
  }
}
header.profile.domain .actionbar > li {
  padding: 0 11px;
  margin: 0;
}
header.profile.domain .actionbar > li:first-child {
  padding-left: 0;
}
@media (min-width: 480px) {
  header.profile.domain .actionbar > li {
    margin-top: 10px;
    padding: 0 10px;
  }
}
@media (min-width: 1200px) {
  header.profile.domain .actionbar > li {
    padding: 0 5px;
  }
}
header.profile.domain .actionbar > li > a {
  font-size: 11px;
}
@media (min-width: 1200px) {
  header.profile.domain .actionbar > li > a {
    font-size: 14px;
  }
}
header.profile.domain .actionbar > li button {
  margin: 0;
  padding: 0;
}
header.profile.domain .actionbar li:last-child {
  padding-right: 0;
}
header.profile.domain .actionbar div.dropdown {
  right: 0;
}
@media (max-width: 599px) {
  header.profile.domain nav.profile .tab-assets {
    display: none;
  }
  header.profile.domain .inner {
    height: 110px;
    min-height: 110px;
  }
}
header.album {
  position: relative;
  clear: both;
}
header.album:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
header.album .tags {
  top: 30px;
}
@media (min-width: 480px) {
  header.album .inner .player h1 {
    padding-top: 0;
  }
}
@media (min-width: 480px) {
  header.album .inner .player .playbutton {
    left: 0;
    top: 68px;
  }
}
@media (min-width: 700px) {
  header.album .inner .player .playbutton {
    top: 0;
  }
}
header.album .album-progress {
  margin: 8px 0 16px;
  position: absolute;
  top: 0;
  left: 70px;
  right: 0;
  display: none;
}
@media (min-width: 480px) {
  header.album .album-progress {
    margin: 14px 0 14px;
    position: relative;
    border-right: 10px solid transparent;
    top: 2px;
    padding-left: 64px;
    left: 0;
    box-sizing: border-box;
    right: auto;
    z-index: 1;
    display: block;
    padding-left: 0;
  }
}
header.album > h3 {
  font-size: 24px;
  color: #d2d2d2;
  text-transform: none;
  padding: 25px 0 0 0;
  margin-bottom: 17px;
  float: left;
}
@media (max-width: 599px) {
  header.album > h3 {
    font-size: 20px;
  }
}
header.album > h3 a {
  text-decoration: none;
  color: #888;
}
header.album > h3 a:first-child {
  color: #282828;
}
header.album > p {
  float: right;
  right: 0;
  padding: 25px 0 0 0;
  text-transform: uppercase;
  color: #888;
  font-size: 14px;
}
@media (max-width: 599px) {
  header.album > p {
    font-size: 10px;
  }
}
header.album .cover {
  position: relative;
  clear: both;
}
@media (min-width: 400px) {
  header.album .cover {
    width: 124px;
    height: 124px;
    float: left;
  }
}
header.album .cover .play {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 400px) {
  header.album .cover .play {
    width: 124px;
    height: 124px;
  }
}
header.album .cover img {
  display: block;
  margin-bottom: 11px;
  width: 100%;
  height: 100%;
}
header.album .cover div {
  font-size: 14px;
  color: #eee;
  text-align: center;
}
@media (max-width: 599px) {
  header.album .cover div {
    font-size: 10px;
  }
}
@media (min-width: 400px) {
  header.album .cover div {
    float: left;
  }
}
header.album .cover div a {
  display: block;
  margin-bottom: 4px;
  text-decoration: none;
}
header.album .cover div b {
  display: block;
  margin-bottom: 4px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  padding: 3px 12px;
  margin-right: 0;
  font-size: 15px;
  line-height: 21px;
  vertical-align: middle;
}
header.album .cover > a {
  float: right;
}
header.album .actionbar {
  position: absolute;
  right: 0;
  bottom: 5px;
}
header.album .actionbar a {
  line-height: 17px;
}
header.album .inner .player .position {
  position: absolute;
  top: 38px;
  right: 0px;
}
@media (min-width: 400px) {
  header.album .tracklist {
    margin-left: 154px;
  }
}
header.album .tracklist a {
  text-decoration: none;
}
header.album .button.publish {
  width: 100px;
}
header.album .album-progress {
  height: 38px;
}
header.album .album-progress > div {
  background: #404040;
  border-right: 1px solid #282828;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  height: 38px;
  float: left;
}
header.album .album-progress > div.current {
  background: #3e606a;
}
header.album .album-progress > div.current div {
  background: #0ec5ff;
  height: 38px;
  border-left: 1px solid #0ec5ff;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
@media (max-width: 599px) {
  header.album .inner {
    position: relative;
    min-height: 160px;
  }
  header.album .inner section.cover {
    position: relative;
    top: 30px;
    width: 100%;
    height: initial;
  }
  header.album .inner .album-progress {
    position: relative;
    top: 35px;
    height: 20px;
  }
  header.album .inner .album-progress div {
    height: 20px;
  }
  header.album .inner div.player {
    margin-left: 0;
  }
  header.album .inner div.player .playbutton {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: calc((80px / -2) - 15px) 0 0 calc(80px / -2);
  }
  header.album .inner div.player .playbutton span.play {
    background-size: cover;
  }
  header.album .inner h1 {
    font-weight: 400;
    position: absolute;
    top: -5px;
    left: 2px;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
  }
  header.album .inner h1 span {
    font-size: 20px;
    line-height: 20px;
    display: block;
  }
  header.album .inner ul.interest {
    position: absolute;
    bottom: 5px;
    top: initial;
    left: initial;
    right: 0;
  }
  header.album .inner .actionbar {
    position: absolute;
    bottom: 2px;
    left: 0;
    top: initial;
  }
  header.album .inner .actionbar > li {
    padding: 0 10px 0 0;
  }
  header.album .inner .actionbar > li i {
    height: 18px;
    width: 18px;
    background-size: cover;
  }
}
header.profile.track > .inner .cover {
  box-shadow: 0 0.5px 1px 0 rgba(0, 0, 0, 0.1);
}
header.profile.track > .inner .cover div.placement {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 0;
  right: -8px;
  height: 25px;
  text-align: left;
  opacity: 1;
  font-weight: 800;
  font-size: 18px;
}
@media (max-width: 599px) {
  header.profile.track > .inner .cover div.placement {
    font-size: 14px;
  }
}
header.profile.track > .inner .cover div.placement .num {
  height: 100%;
  position: relative;
  background-color: #0ec5ff;
  min-width: 45px;
  color: #fff;
  padding: 0 5px;
}
header.profile.track > .inner .cover div.placement.past .num {
  background-color: #888;
}
header.profile.track > .inner .cover div.placement.past .fx .inner {
  background-color: #6f6f6f;
}
header.profile.track > .inner .cover div.placement .diff {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #404040;
  color: #fff;
  width: 16px;
  height: 25px;
}
header.profile.track > .inner .cover div.placement .diff i {
  display: block;
}
header.profile.track > .inner .cover div.placement .diff .diff-num {
  font-size: 10px;
}
header.profile.track > .inner .cover div.placement .diff.new .diff-num,
header.profile.track > .inner .cover div.placement .diff.unchanged .diff-num {
  display: none;
}
header.profile.track > .inner .cover div.placement .diff.new i {
  background-image: url(/img/content/charts/new.svg);
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
}
header.profile.track > .inner .cover div.placement .diff.unchanged i {
  background-image: url(/img/content/charts/unchanged.svg);
  width: 16px;
  height: 16px;
}
header.profile.track > .inner .cover div.placement .diff.up i,
header.profile.track > .inner .cover div.placement .diff.down i {
  margin-top: 1px;
  width: 8px;
  height: 8px;
}
header.profile.track > .inner .cover div.placement .diff.up i {
  background-image: url(/img/content/charts/up.svg);
}
header.profile.track > .inner .cover div.placement .diff.down i {
  background-image: url(/img/content/charts/down.svg);
}
header.profile.track > .inner .cover div.placement .fx {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  position: absolute;
  right: -1px;
  bottom: -8px;
  overflow: hidden;
  width: 9px;
  height: 17px;
}
header.profile.track > .inner .cover div.placement .fx .inner {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  position: relative;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  left: -5px;
  top: 3px;
  background-color: #00a6da;
}
header.profile.track > .inner .cover div.placement .num:before {
  content: '#';
}
@media (max-width: 599px) {
  header.profile.track > .inner .cover div.placement {
    display: none;
  }
}
header.profile.track var.authors {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 30vw;
}
header.profile.track var.authors,
header.profile.track var.authors var {
  white-space: nowrap;
}
header.profile.track .position {
  position: absolute;
  top: -40px;
  right: 0;
  margin-bottom: 5px;
  font-size: 14px;
}
@media (max-width: 599px) {
  header.profile.track .position {
    font-size: 10px;
  }
}
@media (max-width: 699px) {
  header.profile.track .position {
    display: none;
  }
}
header.profile.track .position span:first-child {
  color: #fff;
  padding-right: 16px;
}
header.profile.track .position span:last-child {
  color: #888;
}
header.profile.track .actionbar {
  position: absolute;
  right: 0;
  bottom: 5px;
}
@media (max-width: 599px) {
  header.profile.track .report {
    display: none;
  }
}
form.comment {
  max-width: 800px;
  margin-bottom: 10px;
}
form.comment a.avatar {
  position: relative;
}
form.comment a.avatar img.avatar {
  border-radius: 50px;
  width: 40px;
}
form.comment a.avatar img.badge {
  bottom: initial;
  top: 30px;
}
form.comment > header {
  display: grid;
  grid-template-columns: min-content auto min-content;
  grid-gap: 10px;
}
@media (max-width: 599px) {
  form.comment > header {
    grid-template-columns: repeat(2, auto);
  }
}
form.comment div.chars-left {
  text-align: center;
  display: none;
  color: #808080;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 10px;
}
form.comment textarea {
  height: 31px;
  padding: 4px 0 0 8px;
}
form.comment textarea.dirty,
form.comment textarea:focus {
  height: 100px;
}
form.comment textarea.stealth {
  background-color: #f16b1c;
  color: #fff;
}
form.comment textarea.stealth::placeholder {
  color: #404040;
}
form.comment aside {
  grid-column-end: -1;
}
form.comment:focus-within div.chars-left {
  display: block;
}
form.comment:focus-within aside {
  align-self: flex-start;
}
form.comment .button {
  width: 100%;
}
form.comment section.url-preview {
  margin-left: 50px;
}
form.comment ul.suggestions {
  display: none;
  position: absolute;
  background-color: #303030;
  z-index: 9999;
  border: 1px #888 solid;
  border-radius: 5px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
}
form.comment ul.suggestions li {
  font-size: 12px;
  margin: 0;
  padding: 3px 8px;
}
form.comment ul.suggestions li.selected {
  background-color: #404040;
  color: #fff;
}
form.comment ul.suggestions li * {
  vertical-align: middle;
}
form.comment ul.suggestions li img.avatar {
  position: relative;
  height: 25px;
  width: 25px;
  border-radius: 20px;
  margin-right: 15px;
}
ul.comment {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-width: 800px;
  width: 100%;
}
ul.comment * {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
ul.comment span.info {
  color: #0ec5ff;
  text-transform: uppercase;
  margin-bottom: 5px;
}
ul.comment span.info p {
  font-size: 12px;
  margin: 0;
}
@media (max-width: 599px) {
  ul.comment span.info p {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
ul.comment span.info a {
  color: #0ec5ff;
  font-weight: 600;
}
ul.comment img.avatar {
  border-radius: 40px;
  width: 40px;
}
ul.comment section.content {
  display: grid;
  grid-template-columns: min-content [content] auto min-content;
  grid-gap: 0 10px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1em;
}
ul.comment section.content nav.icons {
  justify-self: end;
  display: flex;
  position: relative;
}
ul.comment section.content nav.icons > a {
  margin-left: 3px;
}
ul.comment section.content a.avatar {
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
}
ul.comment section.content a.avatar img.badge {
  right: -2px;
  top: 26px;
}
ul.comment section.content > header {
  display: flex;
}
ul.comment section.content > header h2,
ul.comment section.content > header em {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1em;
  color: #888;
  font-style: normal;
}
@media (max-width: 599px) {
  ul.comment section.content > header h2,
  ul.comment section.content > header em {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
ul.comment section.content > header em {
  color: #888;
  font-size: 11px;
  line-height: 11px;
  text-transform: uppercase;
  font-style: normal;
}
ul.comment section.content > header h2 a {
  font-weight: 400;
  color: #888;
  display: block;
  margin-right: 10px;
}
ul.comment section.content > header nav {
  text-align: right;
  flex-grow: 1;
  position: relative;
  line-height: 1em;
}
ul.comment section.content div.dropdown {
  position: absolute;
  right: -11px;
  top: 15px;
}
ul.comment section.content article {
  grid-column: content;
}
ul.comment section.content div.comment {
  margin-bottom: 5px;
}
ul.comment section.content div.comment p {
  font-size: 14px;
}
@media (max-width: 599px) {
  ul.comment section.content div.comment p {
    font-size: 10px;
  }
}
ul.comment section.content div.comment p:last-of-type {
  margin: 0;
}
ul.comment section.content div.comment a.create-reply {
  margin-top: 10px;
  display: inline-block;
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
}
ul.comment section.content .text p {
  padding: 0;
  margin-bottom: 0.25em;
}
ul.comment section.content div.replies {
  grid-column-start: 2;
  grid-column-end: 4;
  margin-top: 10px;
}
ul.comment section.content div.replies ul.comment:empty {
  display: none;
}
.preferences {
  padding: 0 0 20px 0;
}
.preferences h1 {
  font-size: 34px;
  text-transform: uppercase;
  margin: 0 0 62px;
}
@media (max-width: 599px) {
  .preferences h1 {
    font-size: 24px;
  }
}
.preferences h4 {
  margin-top: 30px;
  margin-bottom: 5px;
}
.preferences h4:first-of-type {
  margin-top: 0;
}
.preferences b {
  font-weight: 600;
}
.preferences p {
  color: #bbbbbb;
}
.preferences fieldset div {
  margin-bottom: 10px;
}
.preferences table {
  width: 100%;
  margin-bottom: 10px;
}
.preferences table th {
  color: #bbbbbb;
  font-weight: 800;
  text-align: left;
}
.preferences table td {
  color: #848484;
}
.preferences table tr.selected td {
  background-color: #d2d2d2;
}
.preferences .newsletter table td:first-child {
  max-width: 100px;
}
.preferences section.social-links ul {
  list-style-type: none;
  padding-left: 0;
}
.preferences section.social-links ul li {
  padding-left: 0;
}
.preferences section.social-links ul.links li input {
  background: no-repeat right 12px center;
  width: 90%;
}
.preferences section.social-links ul.links li a {
  display: inline-block;
  text-decoration: none;
  margin-left: 10px;
}
.preferences section.social-links ul.types {
  margin-bottom: 25px;
  clear: both;
}
.preferences section.social-links ul.types li {
  display: inline-block;
  list-style-type: none;
  margin-right: 8px;
}
.preferences .profile-prefs textarea {
  min-height: 30vh;
}
.newsfeed h1 {
  margin: 0 0 6px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .newsfeed h1 {
    line-height: 1.1em;
    margin-bottom: 20px;
    margin-top: 10px;
  }
}
.newsfeed ul {
  margin-bottom: 0;
}
.newsfeed > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.newsfeed > ul > li {
  position: relative;
  padding: 5px 0 5px 0;
}
.newsfeed > ul > li:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.newsfeed > ul > li.track {
  margin-bottom: 10px;
}
.newsfeed > ul > li.track > div {
  position: relative;
  clear: both;
  margin-left: 40px;
  top: 5px;
}
@media (max-width: 599px) {
  .newsfeed > ul > li.track > div {
    margin-left: 0;
  }
}
.newsfeed > ul > li.track > div div.cover {
  position: absolute;
  line-height: 120px;
  width: 124px;
  height: 124px;
  background-color: #1b1b1b;
}
.newsfeed > ul > li.track > div div.cover img {
  vertical-align: middle;
  width: 124px;
  display: block;
}
.newsfeed > ul > li.track > div div.cover span {
  position: absolute;
  left: 0;
  top: 0;
  width: 124px;
  height: 124px;
}
@media (max-width: 599px) {
  .newsfeed > ul > li.track > div div.cover {
    width: 75px;
    height: 75px;
  }
  .newsfeed > ul > li.track > div div.cover img {
    width: 75px;
  }
  .newsfeed > ul > li.track > div div.cover span {
    top: 12px;
    left: 12px;
    width: 50px;
    height: 50px;
    background-size: cover;
  }
}
.newsfeed > ul > li.track > div div.cover div.placement {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 0;
  right: -8px;
  height: 25px;
  text-align: left;
  opacity: 1;
  font-weight: 800;
  font-size: 18px;
}
@media (max-width: 599px) {
  .newsfeed > ul > li.track > div div.cover div.placement {
    font-size: 14px;
  }
}
.newsfeed > ul > li.track > div div.cover div.placement .num {
  height: 100%;
  position: relative;
  background-color: #0ec5ff;
  min-width: 45px;
  color: #fff;
  padding: 0 5px;
}
.newsfeed > ul > li.track > div div.cover div.placement.past .num {
  background-color: #888;
}
.newsfeed > ul > li.track > div div.cover div.placement.past .fx .inner {
  background-color: #6f6f6f;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #404040;
  color: #fff;
  width: 16px;
  height: 25px;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff i {
  display: block;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff .diff-num {
  font-size: 10px;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff.new .diff-num,
.newsfeed > ul > li.track > div div.cover div.placement .diff.unchanged .diff-num {
  display: none;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff.new i {
  background-image: url(/img/content/charts/new.svg);
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff.unchanged i {
  background-image: url(/img/content/charts/unchanged.svg);
  width: 16px;
  height: 16px;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff.up i,
.newsfeed > ul > li.track > div div.cover div.placement .diff.down i {
  margin-top: 1px;
  width: 8px;
  height: 8px;
}
.newsfeed > ul > li.track > div div.cover div.placement .diff.up i {
  background-image: url(/img/content/charts/up.svg);
}
.newsfeed > ul > li.track > div div.cover div.placement .diff.down i {
  background-image: url(/img/content/charts/down.svg);
}
.newsfeed > ul > li.track > div div.cover div.placement .fx {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  position: absolute;
  right: -1px;
  bottom: -8px;
  overflow: hidden;
  width: 9px;
  height: 17px;
}
.newsfeed > ul > li.track > div div.cover div.placement .fx .inner {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  position: relative;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  left: -5px;
  top: 3px;
  background-color: #00a6da;
}
.newsfeed > ul > li.track > div div.cover div.placement .num:before {
  content: '#';
}
.newsfeed > ul > li.track > div div.cover div.placement {
  line-height: initial;
  font-size: 12px;
  height: 18px;
}
.newsfeed > ul > li.track > div div.cover div.placement .num {
  min-width: 25px;
}
.newsfeed > ul > li.track > div .waveform {
  height: 88px;
  margin-left: 140px;
  margin-bottom: 8px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
@media (max-width: 599px) {
  .newsfeed > ul > li.track > div .waveform {
    margin-left: 80px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    margin-bottom: 5px;
  }
  .newsfeed > ul > li.track > div .waveform p {
    font-size: 10px;
  }
}
.newsfeed > ul > li.track > div .waveform img,
.newsfeed > ul > li.track > div .waveform canvas {
  width: 100%;
  height: 100%;
}
.newsfeed > ul > li.track > div .waveform p {
  padding-top: 10px;
}
.newsfeed > ul > li.track > div .actionbar {
  float: left;
  margin-left: 140px;
  display: flex;
  list-style-type: none;
  padding: 0;
}
.newsfeed > ul > li.track > div .actionbar li {
  padding: 0 5px 0 0;
}
@media (max-width: 599px) {
  .newsfeed > ul > li.track > div .actionbar {
    margin-left: 80px;
    margin-bottom: 7px;
  }
}
.newsfeed > ul > li.track > div .interest {
  float: right;
  position: relative;
  top: 10px;
}
@media (max-width: 599px) {
  .newsfeed > ul > li.track > div .interest {
    float: right;
    margin-bottom: 27px;
  }
}
.newsfeed > ul > li h2 {
  font-size: 14px;
  color: #808080;
  line-height: 30px;
  margin-bottom: 5px;
  box-sizing: border-box;
  padding-left: 39px;
  position: relative;
}
@media (max-width: 599px) {
  .newsfeed > ul > li h2 {
    font-size: 10px;
  }
}
@media (min-width: 600px) {
  .newsfeed > ul > li h2 {
    float: left;
    width: 70%;
  }
}
@media (max-width: 599px) {
  .newsfeed > ul > li h2 {
    line-height: 15px;
    padding-left: 25px;
  }
}
.newsfeed > ul > li h2 a {
  color: #BFBFBF;
  text-decoration: none;
}
.newsfeed > ul > li h2 a:hover,
.newsfeed > ul > li h2 a:focus,
.newsfeed > ul > li h2 a:active {
  color: #0ec5ff;
}
.newsfeed > ul > li h2 img.avatar {
  border-radius: 30px;
  vertical-align: middle;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 0;
}
.newsfeed > ul > li h2 img.badge {
  left: 20px;
  top: 20px;
}
@media (max-width: 599px) {
  .newsfeed > ul > li h2 img.avatar {
    width: 20px;
    height: 20px;
  }
  .newsfeed > ul > li h2 img.badge {
    left: 10px;
    top: 10px;
  }
}
.newsfeed > ul > li > p {
  right: 0;
  top: 6px;
  position: relative;
  font-size: 14px;
  color: #888;
  text-transform: uppercase;
  font-weight: 400;
  margin: 14px 39px 15px;
  box-sizing: border-box;
}
@media (max-width: 599px) {
  .newsfeed > ul > li > p {
    font-size: 10px;
  }
}
.newsfeed > ul > li > p.time {
  font-size: 12px;
}
@media (max-width: 599px) {
  .newsfeed > ul > li > p.time {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
@media (max-width: 599px) {
  .newsfeed > ul > li > p {
    position: absolute;
    top: -2px;
    right: 0;
    margin: 0;
  }
  .newsfeed > ul > li > p.time {
    font-size: 7px;
  }
}
@media (min-width: 600px) {
  .newsfeed > ul > li > p {
    float: right;
    width: 25%;
    margin: 0;
    text-align: right;
  }
}
.newsfeed > ul > li blockquote {
  font-size: 16px;
  margin: 14px 39px 5px;
  clear: both;
  font-style: italic;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 599px) {
  .newsfeed > ul > li blockquote {
    font-size: 12px;
  }
}
@media (max-width: 599px) {
  .newsfeed > ul > li blockquote {
    margin: 0 39px 0 20px;
  }
}
.newsfeed.log {
  font-size: 14px;
  font-weight: 200;
  position: relative;
  margin-bottom: 30px;
}
@media (max-width: 599px) {
  .newsfeed.log {
    font-size: 10px;
  }
}
@media (max-width: 599px) {
  .newsfeed.log {
    margin-bottom: 10px;
  }
}
.newsfeed.log.empty {
  margin-bottom: 0;
}
.newsfeed.log p {
  color: #888;
  font-size: 14px;
  margin-bottom: 0;
}
@media (max-width: 599px) {
  .newsfeed.log p {
    font-size: 10px;
  }
}
.newsfeed.log h1 {
  margin-bottom: 12px;
}
.newsfeed.log a {
  white-space: nowrap;
}
.newsfeed.log .messages {
  width: 75%;
  position: relative;
}
@media (max-width: 599px) {
  .newsfeed.log .messages {
    width: initial;
  }
}
.newsfeed.log .messages a {
  color: #bbbbbb;
  text-decoration: none;
}
.newsfeed.log .messages p {
  color: #888;
  line-height: 1.2em;
  margin-bottom: 10px;
}
@media (max-width: 599px) {
  .newsfeed.log .messages p {
    margin-bottom: 10px;
  }
}
@media (min-width: 960px) {
  .newsfeed.log div.show-more {
    position: absolute;
    color: #888;
    bottom: 0;
    right: 0;
  }
}
.newsfeed section.new-user {
  margin-bottom: 20px;
}
section.private-message-list ul {
  list-style-type: none;
  margin: 0 0 20px 0;
  padding: 0;
}
section.private-message-list ul li {
  background-color: #f16b1c;
  padding: 5px;
  color: #fff;
}
section.private-message-list ul li header {
  display: flex;
  align-items: center;
}
section.private-message-list ul li header span.subject {
  flex-grow: 1;
}
section.private-message-list ul li header img.avatar {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  margin-right: 10px;
}
section.private-message-list ul li header .date {
  text-transform: uppercase;
  font-size: 12px;
}
section.private-message-list ul li article,
section.private-message-list ul li footer {
  margin-left: 40px;
}
section.private-message-list ul li article {
  padding: 5px 0 25px 0;
}
section.private-message-list ul li .button {
  min-width: 100px;
}
ul.user {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.user .button {
  width: 120px;
}
ul.user > li {
  padding: 20px 0;
  position: relative;
}
ul.user > li ul.tags {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
ul.user > li ul.tags li {
  font-size: 10px;
  background-color: #303030;
  margin: 0;
  border-radius: 3px;
  padding: 2px 5px;
  text-transform: uppercase;
}
ul.user > li ul.tags li:not(:first-child) {
  margin: 0 3px;
}
ul.user > li img.avatar {
  border-radius: 100px;
  width: 70px;
  height: 70px;
}
ul.user > li img.badge {
  bottom: -3px;
  right: -3px;
  width: 32px;
  height: 32px;
}
ul.user > li i.online-indicator {
  position: absolute;
  top: 0;
  left: 0;
}
ul.user > li:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
ul.user > li > a {
  position: absolute;
  left: 0;
  top: 20px;
}
ul.user > li > img {
  float: left;
}
ul.user > li > div {
  float: left;
  margin-left: 110px;
}
ul.user > li > div > h3 {
  font-size: 16px;
  margin: 0;
  text-transform: none;
}
@media (max-width: 599px) {
  ul.user > li > div > h3 {
    font-size: 12px;
  }
}
ul.user > li > div > h3 a {
  text-decoration: none;
}
ul.user > li > div > p {
  color: #888;
  font-size: 14px;
  margin: 2px 0 4px 0;
}
@media (max-width: 599px) {
  ul.user > li > div > p {
    font-size: 10px;
  }
}
ul.user > li > div > p a {
  text-decoration: none;
  font-weight: 400;
}
ul.user > li > div > div {
  padding-top: 20px;
}
@media (min-width: 480px) {
  ul.user > li > div > div {
    position: absolute;
    right: 0;
    top: 8px;
  }
}
ul.user > li > div > div > span {
  display: block;
  color: #808080;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  padding: 4px 0 0;
}
ul.user.muted li .date {
  position: absolute;
  right: 140px;
  top: 35px;
  font-size: 12px;
  text-transform: uppercase;
  color: #bbbbbb;
}
@media (max-width: 599px) {
  ul.user.muted li .date {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
@media (max-width: 599px) {
  ul.user li span.follows-you {
    display: initial;
  }
}
.player.track {
  padding: 0;
  position: relative;
  margin: 0;
  list-style: none;
}
.player.track .waveform {
  min-height: 72px;
  max-height: 72px;
  margin-bottom: 17px;
}
.player.track .waveform img,
.player.track .waveform canvas {
  width: 100%;
  min-height: 72px;
  max-height: 72px;
}
@media (max-width: 699px) {
  .player.track .waveform img,
  .player.track .waveform canvas {
    min-height: 45px;
    max-height: 45px;
  }
}
.player.track .waveform canvas.no-waveform {
  background-color: #d2d2d2;
}
.player.track .waveform p {
  text-align: center;
  font-size: 16px;
  color: #d2d2d2;
  padding-top: 38px;
  margin: 0;
}
@media (min-width: 600px) {
  .player.track .waveform p {
    font-size: 24px;
  }
}
@media (min-width: 600px) and (max-width: 599px) {
  .player.track .waveform p {
    font-size: 20px;
  }
}
.player.track > li {
  position: relative;
  padding: 15px 0 0;
}
.player.track > li.hidden {
  opacity: 0.5;
}
.player.track > li.hidden div.cover img {
  filter: grayscale(100%);
}
.player.track > li:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.player.track > li h2 {
  text-transform: none;
  color: #888;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
}
@media (min-width: 699px) {
  .player.track > li h2 {
    width: 70%;
    float: left;
  }
}
@media (max-width: 699px) {
  .player.track > li h2 {
    font-size: 15px;
    margin-bottom: 0;
  }
}
.player.track > li h2 .co-authors,
.player.track > li h2 .parent {
  color: #888;
  margin-top: 2px;
  font-size: 15px;
  letter-spacing: 0;
}
.player.track > li h2 .co-authors a,
.player.track > li h2 .parent a {
  color: #888 !important;
}
.player.track > li h2 .co-authors a:hover,
.player.track > li h2 .parent a:hover,
.player.track > li h2 .co-authors a:focus,
.player.track > li h2 .parent a:focus,
.player.track > li h2 .co-authors a:active,
.player.track > li h2 .parent a:active {
  color: #0ec5ff !important;
}
.player.track > li h2 .co-authors .co-author:last-of-type .delimiter,
.player.track > li h2 .parent .co-author:last-of-type .delimiter {
  display: none;
}
.player.track > li h2 a {
  text-decoration: none;
}
.player.track > li h2 a:hover,
.player.track > li h2 a:focus,
.player.track > li h2 a:active {
  color: #0ec5ff;
}
.player.track > li > p {
  right: 0;
  top: 3px;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 0;
  color: #888;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 599px) {
  .player.track > li > p {
    font-size: 10px;
  }
}
@media (min-width: 699px) {
  .player.track > li > p {
    width: 25%;
    float: right;
    text-align: right;
  }
}
@media (max-width: 699px) {
  .player.track > li > p {
    font-size: 9px;
    top: 0;
  }
}
.player.track > li > div {
  position: relative;
  min-height: 124px;
  padding-left: 137px;
  clear: both;
}
.player.track > li > div .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.player.track > li > div .cover a {
  display: block;
  width: 124px;
  height: 124px;
  text-decoration: none;
}
.player.track > li > div .cover a span {
  position: absolute;
  left: 0;
  top: 0;
}
.player.track > li > div div.cover {
  background-color: #1b1b1b;
}
.player.track > li > div div.cover img {
  vertical-align: middle;
  width: 120px;
  height: 120px;
}
.player.track > li > div div.next-track-indicator {
  top: 120px;
  left: 0;
  width: 120px;
}
.player.track > li > div div.next-track-indicator a {
  color: #fff;
  font-size: 10px;
}
@media (max-width: 599px) {
  .player.track > li > div div.next-track-indicator {
    left: 20px;
    opacity: 0.75;
  }
}
.player.track > li > div .actionbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
  display: flex;
}
@media (max-width: 699px) {
  .player.track > li > div .actionbar {
    margin-top: -40px;
  }
}
.player.track > li > div .actionbar li {
  margin-right: 5px;
}
.player.track > li > div .interest {
  clear: both;
  padding-top: 20px;
}
@media (min-width: 480px) {
  .player.track > li > div .interest {
    clear: none;
    float: right;
    padding-top: 10px;
  }
}
@media (max-width: 699px) {
  .player.track > li > div .interest {
    padding-top: 7px;
  }
}
.player.track > li > div .interest li:last-child {
  padding-right: 0;
}
.player.track.invitation > li {
  padding-bottom: 18px;
}
.player.track.invitation .invitation-action {
  padding: 18px 0 0;
  min-height: 0;
}
.player.track.invitation .invitation-action p {
  margin: 0;
}
.player.track.invitation .invitation-action p:first-child {
  float: left;
}
.player.track.invitation .invitation-action p:first-child .button {
  width: 124px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
.player.track.invitation .invitation-action p:last-child {
  float: right;
}
.player.track.invitation .invitation-action p:last-child .button.secondary {
  margin: 0 5px 0 15px;
}
.player.track.draft p {
  margin-bottom: 0;
  text-align: right;
}
.player.track.draft p .button {
  position: relative;
  top: -10px;
}
.player.track.draft .state {
  position: absolute;
  left: 144px;
  top: 98px;
  color: #0ec5ff;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .player.track.draft .state {
    font-size: 10px;
  }
}
.player.track .action.small.uncategorized {
  background-color: #f16b1c;
  color: #fff;
}
ul.player.track-compact,
ul.player.album-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.player.track-compact.no-genre .genre,
ul.player.album-compact.no-genre .genre {
  display: none;
}
ul.player.track-compact.no-genre > li,
ul.player.album-compact.no-genre > li {
  margin-top: 4px;
}
ul.player.track-compact li.header nav.filter,
ul.player.album-compact li.header nav.filter {
  margin-bottom: 0;
}
@media (max-width: 599px) {
  ul.player.track-compact,
  ul.player.album-compact {
    grid-gap: 10px;
  }
}
ul.player.track-compact *,
ul.player.album-compact * {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
ul.player.track-compact li,
ul.player.album-compact li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}
ul.player.track-compact li.hidden,
ul.player.album-compact li.hidden {
  opacity: 0.3;
}
ul.player.track-compact li.header,
ul.player.album-compact li.header {
  grid-column-start: 1;
  grid-column-end: -1;
}
ul.player.track-compact li.playing .cover nav.actions,
ul.player.album-compact li.playing .cover nav.actions {
  display: flex;
}
ul.player.track-compact li.playing .cover span.play,
ul.player.album-compact li.playing .cover span.play {
  display: block;
}
ul.player.track-compact div.cover,
ul.player.album-compact div.cover {
  width: 100%;
  flex-grow: 1;
  position: relative;
  height: 100%;
}
ul.player.track-compact div.cover > a,
ul.player.album-compact div.cover > a {
  display: block;
  background-color: #1b1b1b;
  height: 100%;
  line-height: 0;
}
ul.player.track-compact div.cover img,
ul.player.album-compact div.cover img {
  width: 100%;
  box-shadow: 0 0.5px 1px 0 rgba(0, 0, 0, 0.1);
}
ul.player.track-compact div.cover div.placement,
ul.player.album-compact div.cover div.placement {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 0;
  right: -8px;
  height: 25px;
  text-align: left;
  opacity: 1;
  font-weight: 800;
  font-size: 18px;
}
@media (max-width: 599px) {
  ul.player.track-compact div.cover div.placement,
  ul.player.album-compact div.cover div.placement {
    font-size: 14px;
  }
}
ul.player.track-compact div.cover div.placement .num,
ul.player.album-compact div.cover div.placement .num {
  height: 100%;
  position: relative;
  background-color: #0ec5ff;
  min-width: 45px;
  color: #fff;
  padding: 0 5px;
}
ul.player.track-compact div.cover div.placement.past .num,
ul.player.album-compact div.cover div.placement.past .num {
  background-color: #888;
}
ul.player.track-compact div.cover div.placement.past .fx .inner,
ul.player.album-compact div.cover div.placement.past .fx .inner {
  background-color: #6f6f6f;
}
ul.player.track-compact div.cover div.placement .diff,
ul.player.album-compact div.cover div.placement .diff {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #404040;
  color: #fff;
  width: 16px;
  height: 25px;
}
ul.player.track-compact div.cover div.placement .diff i,
ul.player.album-compact div.cover div.placement .diff i {
  display: block;
}
ul.player.track-compact div.cover div.placement .diff .diff-num,
ul.player.album-compact div.cover div.placement .diff .diff-num {
  font-size: 10px;
}
ul.player.track-compact div.cover div.placement .diff.new .diff-num,
ul.player.album-compact div.cover div.placement .diff.new .diff-num,
ul.player.track-compact div.cover div.placement .diff.unchanged .diff-num,
ul.player.album-compact div.cover div.placement .diff.unchanged .diff-num {
  display: none;
}
ul.player.track-compact div.cover div.placement .diff.new i,
ul.player.album-compact div.cover div.placement .diff.new i {
  background-image: url(/img/content/charts/new.svg);
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
}
ul.player.track-compact div.cover div.placement .diff.unchanged i,
ul.player.album-compact div.cover div.placement .diff.unchanged i {
  background-image: url(/img/content/charts/unchanged.svg);
  width: 16px;
  height: 16px;
}
ul.player.track-compact div.cover div.placement .diff.up i,
ul.player.album-compact div.cover div.placement .diff.up i,
ul.player.track-compact div.cover div.placement .diff.down i,
ul.player.album-compact div.cover div.placement .diff.down i {
  margin-top: 1px;
  width: 8px;
  height: 8px;
}
ul.player.track-compact div.cover div.placement .diff.up i,
ul.player.album-compact div.cover div.placement .diff.up i {
  background-image: url(/img/content/charts/up.svg);
}
ul.player.track-compact div.cover div.placement .diff.down i,
ul.player.album-compact div.cover div.placement .diff.down i {
  background-image: url(/img/content/charts/down.svg);
}
ul.player.track-compact div.cover div.placement .fx,
ul.player.album-compact div.cover div.placement .fx {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  position: absolute;
  right: -1px;
  bottom: -8px;
  overflow: hidden;
  width: 9px;
  height: 17px;
}
ul.player.track-compact div.cover div.placement .fx .inner,
ul.player.album-compact div.cover div.placement .fx .inner {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  position: relative;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  left: -5px;
  top: 3px;
  background-color: #00a6da;
}
ul.player.track-compact div.cover div.placement .num:before,
ul.player.album-compact div.cover div.placement .num:before {
  content: '#';
}
ul.player.track-compact div.cover:hover nav.actions,
ul.player.album-compact div.cover:hover nav.actions {
  display: flex;
}
ul.player.track-compact div.cover:hover span.play,
ul.player.album-compact div.cover:hover span.play {
  display: block;
}
ul.player.track-compact div.cover nav.actions,
ul.player.album-compact div.cover nav.actions {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  height: 20%;
  position: absolute;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  color: #fff;
}
ul.player.track-compact div.cover nav.actions a,
ul.player.album-compact div.cover nav.actions a {
  background-position: center;
  background-size: auto;
  font-size: 14px;
  text-transform: uppercase;
}
ul.player.track-compact div.cover nav.actions a i,
ul.player.album-compact div.cover nav.actions a i {
  display: block;
}
ul.player.track-compact div.cover nav.actions a.fav.selected i,
ul.player.album-compact div.cover nav.actions a.fav.selected i {
  background-image: url(/img/theme/svg/color/16d6ff/like.svg);
}
ul.player.track-compact div.cover nav.actions a.open,
ul.player.album-compact div.cover nav.actions a.open {
  display: none;
}
ul.player.track-compact footer canvas,
ul.player.album-compact footer canvas {
  height: 15px;
  width: 100%;
  margin: 3px 0 0 0;
}
ul.player.track-compact footer h2.meta,
ul.player.album-compact footer h2.meta {
  font-size: 14px;
  max-width: 100%;
  margin: 0;
  color: #bfbfbf;
}
@media (max-width: 599px) {
  ul.player.track-compact footer h2.meta,
  ul.player.album-compact footer h2.meta {
    font-size: 10px;
  }
}
ul.player.track-compact footer h2.meta var.name,
ul.player.album-compact footer h2.meta var.name {
  display: flex;
}
ul.player.track-compact footer h2.meta var.name a.name,
ul.player.album-compact footer h2.meta var.name a.name {
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul.player.track-compact footer h2.meta var.name i.remix,
ul.player.album-compact footer h2.meta var.name i.remix {
  flex-shrink: 0;
  margin-left: 2px;
  background-size: 13px 13px;
  width: 13px;
  height: 13px;
  position: relative;
}
ul.player.track-compact footer h2.meta .authors,
ul.player.album-compact footer h2.meta .authors {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin: 2px 0;
  color: #BFBFBF;
  font-size: 13px;
}
@media (max-width: 599px) {
  ul.player.track-compact footer h2.meta .authors,
  ul.player.album-compact footer h2.meta .authors {
    font-size: 10px;
    letter-spacing: 1px;
  }
}
ul.player.track-compact footer h2.meta .authors a,
ul.player.album-compact footer h2.meta .authors a {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul.player.track-compact footer h2.meta .authors a:after,
ul.player.album-compact footer h2.meta .authors a:after {
  content: ', ';
}
ul.player.track-compact footer h2.meta .authors a:last-child:after,
ul.player.album-compact footer h2.meta .authors a:last-child:after {
  content: '';
}
ul.player.track-compact footer div.info,
ul.player.album-compact footer div.info {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 1.2em;
}
ul.player.track-compact footer div.info i,
ul.player.album-compact footer div.info i {
  position: relative;
  background-position: center;
  background-size: cover;
  width: 12px;
  height: 12px;
  display: block;
  margin-right: 2px;
}
ul.player.track-compact footer div.info i:first-of-type,
ul.player.album-compact footer div.info i:first-of-type {
  left: -2px;
}
ul.player.track-compact footer div.info var,
ul.player.album-compact footer div.info var {
  display: flex;
  align-items: center;
}
ul.player.track-compact footer div.info var *,
ul.player.album-compact footer div.info var * {
  display: block;
}
ul.player.track-compact footer div.info span,
ul.player.album-compact footer div.info span {
  display: block;
  margin-right: 10px;
  white-space: nowrap;
}
ul.player.track-compact footer div.info var.toggle-fav i.selected,
ul.player.album-compact footer div.info var.toggle-fav i.selected {
  background-image: url(/img/theme/svg/color/7f7f7f/like.svg);
}
ul.player.track-compact a.genre,
ul.player.album-compact a.genre,
ul.player.track-compact span.no-genre,
ul.player.album-compact span.no-genre {
  font-size: 12px;
  margin: 0;
  color: #808080;
  text-transform: uppercase;
  padding: 0 3px 3px 0;
}
@media (max-width: 599px) {
  ul.player.track-compact a.genre,
  ul.player.album-compact a.genre,
  ul.player.track-compact span.no-genre,
  ul.player.album-compact span.no-genre {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
ul.player.track-compact a.genre.uncategorized,
ul.player.album-compact a.genre.uncategorized,
ul.player.track-compact span.no-genre.uncategorized,
ul.player.album-compact span.no-genre.uncategorized {
  color: #f16b1c;
}
ul.player.track-compact span.play,
ul.player.album-compact span.play {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 80%;
  background-size: 40%;
}
ul.player.track-compact.charts,
ul.player.album-compact.charts {
  grid-gap: 20px;
}
ul.player.track-compact.drafts footer canvas,
ul.player.album-compact.drafts footer canvas {
  display: none;
}
ul.player.track-compact.drafts footer .info,
ul.player.album-compact.drafts footer .info {
  display: none;
}
ul.player.track-compact.drafts .cover,
ul.player.album-compact.drafts .cover {
  margin-bottom: 5px;
}
ul.player.track-compact.drafts .cover .actions .open,
ul.player.album-compact.drafts .cover .actions .open {
  display: initial;
}
@media (min-width: 600px) {
  ul.player.track-compact,
  ul.player.album-compact {
    grid-template-columns: repeat(auto-fit, minmax(180px, 180px));
  }
  ul.player.track-compact div.cover nav.actions,
  ul.player.album-compact div.cover nav.actions {
    display: none;
  }
  ul.player.track-compact div.cover span.play,
  ul.player.album-compact div.cover span.play {
    display: none;
  }
}
ul.player.album-compact div.cover {
  margin-bottom: 5px;
}
article.no-sidebar ul.player.track-compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (min-width: 600px) {
  article.no-sidebar ul.player.track-compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 200px));
  }
}
/* dialogue */
.dialogue {
  background-color: #282828;
  position: relative;
  max-width: 800px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  padding: 33px 40px 20px;
}
.dialogue.transparent {
  background-color: transparent;
}
.dialogue input[type=text],
.dialogue input[type=file],
.dialogue textarea,
.dialogue ul.tagit {
  margin-bottom: 10px;
}
.dialogue article > section {
  margin-bottom: 20px;
}
.dialogue.stealth input[type=text],
.dialogue.stealth input[type=file],
.dialogue.stealth textarea,
.dialogue.stealth ul.tagit {
  background-color: #f16b1c;
  color: #fff;
}
.dialogue.stealth input[type=text]::placeholder,
.dialogue.stealth input[type=file]::placeholder,
.dialogue.stealth textarea::placeholder,
.dialogue.stealth ul.tagit::placeholder {
  color: #404040;
}
.dialogue label {
  font-size: 14px;
  text-transform: uppercase;
  display: block;
  padding-left: 2px;
  margin-bottom: 8px;
  color: #808080;
}
.dialogue i.icon.close {
  width: 24px;
  height: 24px;
  background-size: 12px 12px;
  background-position: center;
}
.dialogue header {
  display: flex;
  margin-bottom: 15px;
}
.dialogue header > h1 {
  flex-grow: 1;
  font-size: 24px;
  margin: 0;
}
@media (max-width: 599px) {
  .dialogue header > h1 {
    font-size: 20px;
  }
}
.dialogue header > a {
  text-decoration: none;
}
@media (max-width: 599px) {
  .dialogue.mobile-fullscreen {
    height: 100vh;
  }
}
@media (max-width: 599px) {
  .dialogue {
    width: 100vw;
    min-width: 100vw;
    padding: 20px;
  }
  .dialogue header h1 {
    font-size: 24px;
    margin: 0 30px 0 0;
  }
  .dialogue header > a {
    top: 15px;
    right: 15px;
  }
  .dialogue article {
    scroll-y: auto;
  }
}
@media (max-width: 599px) and (max-width: 599px) {
  .dialogue header h1 {
    font-size: 20px;
  }
}
.dialogue article {
  overflow: auto;
  padding-right: 10px;
}
.dialogue article h2 {
  font-size: 24px;
  margin: 0 0 25px;
}
@media (max-width: 599px) {
  .dialogue article h2 {
    font-size: 20px;
  }
}
.dialogue article p {
  font-size: 16px;
  margin: 0 0 0.5em;
}
.dialogue article-action {
  text-align: right;
  padding: 20px 0 0;
}
.dialogue article-action .button {
  min-width: 150px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  margin: 0 0 20px 20px;
}
.dialogue article label.hideIfCompact {
  font-size: 12px;
  width: 100%;
}
.dialogue article label.hideIfCompact span {
  display: inline-block;
  width: 30%;
  vertical-align: top;
}
.dialogue article label.hideIfCompact input,
.dialogue article label.hideIfCompact select {
  width: 60%;
  margin-bottom: 10px;
  padding: 3px;
}
.dialogue article label.hideIfCompact input,
.dialogue article label.hideIfCompact select,
.dialogue article label.hideIfCompact textarea {
  font-size: 12px;
}
.dialogue article label.hideIfCompact input[type=checkbox],
.dialogue article label.hideIfCompact input[type=number] {
  width: auto;
}
.dialogue article label.hideIfCompact.range input,
.dialogue article label.hideIfCompact.range select {
  width: 29%;
}
.dialogue article .export {
  border-top: 1px solid #eee;
  margin-bottom: 25px;
  padding-top: 25px;
}
.dialogue article .export:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.dialogue article .export:first-child {
  border-top: none;
  padding-top: 0;
}
.dialogue article .export p {
  text-align: left;
  float: left;
  font-size: 16px;
}
.dialogue article .export p.statistics {
  line-height: 24px;
  vertical-align: middle;
}
.dialogue article .export p.statistics i {
  vertical-align: middle;
  margin-right: 10px;
  margin-left: 20px;
}
.dialogue article .export p.statistics i:first-child {
  margin-left: 0;
}
.dialogue article .export div {
  float: right;
}
.dialogue article .export div .button {
  margin-left: 20px;
}
.dialogue footer {
  text-align: right;
  padding: 20px 0 0;
}
.dialogue footer .button,
.dialogue footer input[type="submit"] {
  min-width: 150px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  margin: 0 0 10px 10px;
}
.dialogue .progress-bar {
  position: relative;
  width: 540px;
  height: 45px;
  line-height: 25px;
  margin: 25px auto 25px auto;
  border: 0;
  text-align: center;
  background-color: #888;
  border-radius: 3px;
}
.dialogue .progress-bar .progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #0ec5ff;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.dialogue .progress-bar .progress.unknown {
  width: 30px;
  margin-left: -15px;
  -webkit-animation: wind 3s linear infinite;
  -moz-animation: wind 3s linear infinite;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.dialogue .progress-message {
  display: block;
  position: relative;
  width: 540px;
  margin: 10px auto;
}
.dialogue.export-status {
  min-width: 800px;
}
.dialogue.export-status article {
  margin-bottom: 25px;
}
.dialogue.contest.html {
  max-width: 1000px;
}
.dialogue.contest.html textarea {
  width: 900px;
  height: 400px;
  font-size: 13px;
}
.dialogue.track-invitation .recipient-container {
  max-height: 160px;
  min-height: 16px;
  overflow-y: auto;
}
.dialogue.track-invitation .recipient-container ul {
  margin: 0;
  padding: 0;
}
.dialogue.track-invitation .recipient-container ul li {
  margin: 0 0 0.5em;
  list-style-type: none;
  height: 32px;
  margin-bottom: 10px;
  padding: 5px;
}
.dialogue.track-invitation .recipient-container ul li img {
  height: 32px;
  width: 32px;
  background-color: #282828;
  float: left;
  margin-right: 8px;
}
.dialogue.track-invitation .recipient-container ul li i {
  float: right;
  position: relative;
  top: 4px;
  right: 4px;
}
.dialogue.track-invitation .recipient-container ul li:hover {
  background-color: #eee;
}
.dialogue.track-invitation .recipient-container ul li:hover img.button {
  background-color: #eee;
}
.dialogue.track-invitation .recipient-container ul li.selected {
  background: #888;
}
.dialogue.track-invitation .recipient-container ul span {
  line-height: 29px;
}
.dialogue.feature-album {
  width: 100%;
  max-width: 100%;
}
.dialogue.feature-album ul.albums {
  text-decoration: none;
  padding: 0;
  margin: 0;
}
.dialogue.feature-album ul.albums li {
  padding: 0;
  display: block;
  float: left;
  margin: 5px;
}
.dialogue.feature-album ul.albums li p {
  max-width: 120px;
  height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.dialogue.feature-album ul.albums.full li:first-child {
  opacity: 0.2;
}
.dialogue.feature-album #album-ids {
  display: none;
}
.dialogue.feature-album footer {
  clear: both;
}
.dialogue.track.properties .hidden {
  display: none;
}
.dialogue.track.properties .genre-list {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  grid-gap: 5px;
}
.dialogue.track.properties .genre-list .genre {
  max-height: 50px;
}
.dialogue.track.properties .genre-list .genre a {
  font-size: 14px;
  font-weight: 800;
}
@media (max-width: 599px) {
  .dialogue.track.properties .genre-list .genre a {
    font-size: 10px;
  }
}
.dialogue.track.properties .genre-list .genre.selected a {
  color: #f16b1c;
  text-shadow: 1px 1px 1px #404040, 1px -1px 1px #404040, -1px 1px 1px #404040, -1px -1px 1px #404040;
}
.dialogue.track.properties article {
  margin-bottom: 20px;
}
.dialogue.track.properties input[type=text],
.dialogue.track.properties input[type=number],
.dialogue.track.properties input[type=password],
.dialogue.track.properties input[type=email],
.dialogue.track.properties input[type=checkbox] {
  margin-bottom: 10px;
}
.dialogue.track.properties textarea {
  margin-bottom: 10px;
}
.dialogue.track.properties .tagit input {
  margin-bottom: 0;
}
.dialogue label.cb {
  display: flex;
  align-items: center;
  line-height: 1em;
  margin-bottom: 10px;
}
.dialogue label.cb input[type=checkbox] {
  display: block;
  width: initial;
  height: initial;
  margin-right: 5px;
}
.dialogue.confirm-invite {
  max-width: 500px;
}
.dialogue.confirm-invite article a {
  font-weight: 600;
}
.dialogue.confirm-invite fieldset {
  margin: 0 0 20px;
}
.dialogue.confirm-invite footer {
  text-align: center;
}
.dialogue.confirm-invite footer .button {
  width: 100%;
  margin: 0 0 10px;
  height: 50px;
}
.dialogue.static {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
}
.dialogue.static.small {
  max-width: 600px;
}
.dialogue.add-to-album h2 {
  font-size: 16px;
  margin-bottom: 5px;
}
.dialogue.add-to-album article {
  overflow: initial;
}
.dialogue.add-to-album .album-list {
  font-size: 12px;
  min-height: 200px;
  height: 40vh;
  overflow-y: scroll;
}
.dialogue.add-to-album .album-list table {
  width: 100%;
  border-collapse: collapse;
}
.dialogue.add-to-album .album-list table td,
.dialogue.add-to-album .album-list table th {
  padding: 3px;
  vertical-align: middle;
  text-align: start;
  /* Added by Andre Michelle */
  color: #808080;
}
.dialogue.add-to-album .album-list table td.name,
.dialogue.add-to-album .album-list table th.name {
  color: #BFBFBF;
  font-weight: 400;
  display: flex;
  align-items: center;
}
.dialogue.add-to-album .album-list table td.name img,
.dialogue.add-to-album .album-list table th.name img {
  margin-right: 15px;
  width: 30px;
  height: 30px;
}
.dialogue.add-to-album .album-list table td var,
.dialogue.add-to-album .album-list table th var {
  display: flex;
  align-items: center;
}
.dialogue.add-to-album .album-list table td var i,
.dialogue.add-to-album .album-list table th var i {
  margin-right: 3px;
}
.dialogue.add-to-album .album-list table td a,
.dialogue.add-to-album .album-list table th a {
  height: 100%;
}
.dialogue.add-to-album .album-list table td span.disabled,
.dialogue.add-to-album .album-list table th span.disabled {
  color: #888;
}
@media (max-width: 599px) {
  .dialogue.add-to-album .album-list table td.album-list-date,
  .dialogue.add-to-album .album-list table th.album-list-date {
    display: none;
  }
}
@media (max-width: 599px) {
  .dialogue.add-to-album .album-list table td.album-list-duration,
  .dialogue.add-to-album .album-list table th.album-list-duration {
    display: none;
  }
}
.dialogue.add-to-album .album-list table tr,
.dialogue.add-to-album .album-list table tr * {
  cursor: pointer;
}
.dialogue.add-to-album .album-list table tr:hover {
  background-color: #404040;
}
.dialogue.add-to-album .album-list table tr.selected,
.dialogue.add-to-album .album-list table tr.selected th,
.dialogue.add-to-album .album-list table tr.selected td {
  background: #eee;
}
.dialogue.small {
  width: 30vw;
  max-width: 580px;
}
.dialogue.small article {
  max-height: 60vh;
}
@media (max-width: 599px) {
  .dialogue.small {
    width: 100vw;
    max-width: initial;
    height: initial;
  }
}
.dialogue.medium {
  width: 60vw;
}
.dialogue.medium article {
  max-height: 60vh;
}
@media (max-width: 599px) {
}
.dialogue.big {
  width: 70vw;
  max-width: 80vw;
}
.dialogue.big article {
  max-height: 60vh;
}
@media (max-width: 599px) {
}
.dialogue.unpublish {
  min-width: 800px;
}
.dialogue.unpublish textarea {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  font-size: 18px;
  padding: 15px;
  border: 1px #ccc solid;
}
@media (max-width: 599px) {
  .dialogue.unpublish textarea {
    font-size: 14px;
  }
}
.dialogue.unpublish a.template {
  display: inline-block;
  margin-right: 5px;
  border-bottom: 0;
  border-radius-bottom: 0;
  background-color: #666;
}
.dialogue.block-sample .templates {
  margin: 10px 0 0 15px;
}
.dialogue.block-sample textarea {
  height: 150px;
}
.dialogue.single-column label > span {
  display: inline-block;
  margin-bottom: 5px;
}
.dialogue.share article.platforms section {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.dialogue.share article.platforms section button {
  cursor: pointer;
}
.dialogue article.vertical-item-list {
  display: flex;
  flex-direction: column;
}
.dialogue article.vertical-item-list .item {
  margin-bottom: 5px;
}
#dialogs {
  z-index: 9999999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 599px) {
  #dialogs {
    align-items: flex-end;
  }
}
#dialogs div.container {
  z-index: 1;
}
#dialogs div.background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  opacity: 0.8;
}
#dialogs .dialogue {
  box-shadow: 0 0 6px 0 #000000;
  border-radius: 3px;
}
.dialogue.suggest-genre .genre-list {
  grid-template-columns: repeat(auto-fit, minmax(130px, 160px));
  grid-gap: 5px;
}
.dialogue.suggest-genre .genre-list .genre {
  height: 40px;
  background-color: #303030;
}
.dialogue.http-error .more a {
  display: inline-block;
  padding: 5px;
}
.genre-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 15px;
}
.genre-list * {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
.genre-list section.genre {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  background-color: #282828;
  border-radius: 5px;
  text-align: center;
  border: 1px #242424 solid;
}
.genre-list section.genre a.genre {
  position: relative;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 599px) {
  .genre-list section.genre a.genre {
    font-size: 12px;
  }
}
.genre-list section.genre a.genre span {
  display: block;
  position: relative;
}
.genre-list section.genre a.genre img.banner {
  position: absolute;
  top: 0;
  left: 0;
  filter: none;
  height: 100%;
}
.genre-list section.genre a.genre:hover img.banner {
  filter: brightness(2);
}
.genre-list section.genre.selected a.genre img.banner {
  filter: brightness(2);
}
section.genre-charts .player.track > li:first-of-type {
  padding-top: 0;
}
section.genre-charts header {
  display: flex;
  align-items: flex-end;
}
section.genre-charts header a {
  display: block;
  margin-right: 10px;
  font-size: 14px;
  text-transform: uppercase;
}
section.genre-charts header a.disabled {
  color: #808080;
  pointer-events: none;
}
section.genre-charts header h3 {
  flex-grow: 1;
  margin: 0 15px 0 0;
  text-transform: none;
  font-size: 16px;
}
@media (max-width: 599px) {
  section.genre-charts header h3 {
    font-size: 12px;
  }
}
nav.filter.genre ul {
  list-style-type: none;
}
nav.filter.genre ul li a.active {
  font-weight: 600;
}
#body.genre.board.topic .topic-text h1:first-of-type {
  margin-bottom: 5px;
}
#body.genre.board.topic .topic-text h2:first-of-type {
  font-size: 14px;
  text-transform: none;
  margin-bottom: 20px;
}
@media (max-width: 599px) {
  #body.genre.board.topic .topic-text h2:first-of-type {
    font-size: 10px;
  }
}
#body.genre.board.topic .topic-text h2:first-of-type a {
  text-decoration: none;
}
#body.genre.board.topic .topic-text .tag {
  position: initial;
}
#body.genre.board.topic ul.actionbar {
  float: right;
  margin: 0 5px 0 0;
  padding: 0;
}
#body.genre.board.topic ul.actionbar > li {
  display: inline-block;
  background: #303030;
  color: #fff;
  border: 1px transparent solid;
  text-decoration: none !important;
  text-transform: uppercase;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 400;
  border-radius: 3px;
  margin: 0;
  padding: 6px 11px;
  text-align: center;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  outline: none;
}
@media (max-width: 599px) {
  #body.genre.board.topic ul.actionbar > li {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
@media (max-width: 699px) {
  #body.genre.board.topic ul.actionbar > li {
    padding: 3px;
    font-size: 10px;
  }
}
#body.genre.board.topic ul.actionbar > li.big {
  font-size: 16px;
  padding: 12px 14px 13px;
}
#body.genre.board.topic ul.actionbar > li.secondary {
  background: #888;
}
#body.genre.board.topic ul.actionbar > li.app {
  text-transform: none;
  padding: 7px 24px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  background-color: #0ec5ff;
}
#body.genre.board.topic ul.actionbar > li.app:hover,
#body.genre.board.topic ul.actionbar > li.app:focus,
#body.genre.board.topic ul.actionbar > li.app:active {
  color: #fff !important;
}
#body.genre.board.topic ul.actionbar > li.blue {
  color: #fff ! important;
  background-color: #0ec5ff;
  font-weight: 600;
}
#body.genre.board.topic ul.actionbar > li.error {
  background: #f16b1c;
}
#body.genre.board.topic ul.actionbar > li.warning {
  background: #f16b1c;
}
#body.genre.board.topic ul.actionbar > li.failed,
#body.genre.board.topic ul.actionbar > li.failed:focus {
  background: red;
  pointer-events: none;
}
#body.genre.board.topic ul.actionbar > li.working,
#body.genre.board.topic ul.actionbar > li.working:hover {
  color: transparent !important;
  position: relative !important;
  pointer-events: none;
  background-image: url('/img/theme/svg/default/Loading-animation.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#body.genre.board.topic ul.actionbar > li.working i,
#body.genre.board.topic ul.actionbar > li.working:hover i {
  visibility: hidden;
}
#body.genre.board.topic ul.actionbar > li.iconbutton {
  padding: 0;
}
#body.genre.board.topic ul.actionbar > li.iconbutton .icon {
  height: 33px;
}
#body.genre.board.topic ul.actionbar > li.iconbutton.withtext {
  position: relative;
  padding: 9px 14px 9px 40px;
}
#body.genre.board.topic ul.actionbar > li.iconbutton.withtext .icon {
  margin-right: 10px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 2px;
}
#body.genre.board.topic ul.actionbar > li.selected,
#body.genre.board.topic ul.actionbar > li.active {
  background: #f16b1c;
  color: #fff;
  cursor: pointer;
}
#body.genre.board.topic ul.actionbar > li.action.big {
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
  width: 54px;
  height: 37px;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 0;
}
#body.genre.board.topic ul.actionbar > li.action.big:hover,
#body.genre.board.topic ul.actionbar > li.action.big:active,
#body.genre.board.topic ul.actionbar > li.action.big:focus {
  cursor: pointer;
}
#body.genre.board.topic ul.actionbar > li.action.big i {
  position: absolute;
  left: 16px;
  top: 8px;
}
#body.genre.board.topic ul.actionbar > li.action.small {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  border-radius: 3px;
  background: #282828;
  color: #fff;
  padding: 3px 12px 4px 12px;
  margin-right: 0;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 15px;
  vertical-align: middle;
}
#body.genre.board.topic ul.actionbar > li.action.small i {
  position: relative;
  top: 2px;
}
#body.genre.board.topic ul.actionbar > li.action.small.selected {
  background: #f16b1c;
}
#body.genre.board.topic ul.actionbar > li.double-action {
  /*
    &:hover,
    &:focus,
    &:active {
      background: @black;
      color: @white;
      span.state-0 {
        display: none;
      }
      span.state-1 {
        display: block;
      }
    }
    */
}
#body.genre.board.topic ul.actionbar > li.double-action.active {
  color: #fff;
  cursor: pointer;
}
#body.genre.board.topic ul.actionbar > li.double-action span.state-1 {
  display: none;
}
#body.genre.board.topic ul.actionbar > li.follow {
  min-width: 7em;
  text-align: center;
}
#body.genre.board.topic ul.actionbar > li.show-loader {
  position: relative;
}
#body.genre.board.topic ul.actionbar > li.show-loader i.loader {
  display: none;
}
#body.genre.board.topic ul.actionbar > li.show-loader i.loader.loading {
  position: absolute;
  left: 50%;
  top: 6px;
  margin-left: -10px;
  display: block;
}
#body.genre.board.topic ul.actionbar > li > a {
  line-height: 1em;
}
header.genre {
  background-color: #303030;
  background-repeat: no-repeat;
  background-size: cover;
}
header.genre h1 {
  color: #fff;
  margin: 0;
}
header.genre .inner {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
header.genre .inner nav.profile {
  position: absolute;
  left: 0;
  bottom: 0;
}
header.genre .inner > div {
  margin-left: 117px;
}
@media (min-width: 520px) {
  header.genre .inner > div {
    margin-left: 217px;
  }
}
@media (min-width: 1200px) {
  header.genre .inner > div {
    margin-left: 286px;
  }
}
header.genre .inner h1 a {
  text-decoration: none;
}
ul.tagit {
  margin: 0;
  background: #404040;
  overflow: auto;
  margin-left: inherit;
  /* usually we don't want the regular ul margins. */
  margin-right: inherit;
  border-radius: 3px;
  border: 1px solid #404040;
  font-size: 14px;
  color: #BFBFBF;
  padding: 3px;
}
@media (max-width: 599px) {
  ul.tagit {
    font-size: 10px;
  }
}
ul.tagit li.tagit-choice {
  border-radius: 3px;
  border: 0;
  background: none;
  background-color: #282828;
  font-weight: normal;
  color: #fff;
  padding: 15px;
}
ul.tagit li.tagit-choice .tagit-label:not(a) {
  text-transform: uppercase;
  color: #fff;
}
ul.tagit li.tagit-choice a.tagit-close {
  text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
  right: 0.4em;
}
ul.tagit li.tagit-choice .ui-icon {
  display: none;
}
ul.tagit li.tagit-choice .tagit-close .text-icon {
  display: inline;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  color: #777;
}
ul.tagit li.tagit-choice:hover,
ul.tagit li.tagit-choice.remove {
  background-color: #0ec5ff;
}
ul.tagit li.tagit-choice a.tagLabel:hover,
ul.tagit li.tagit-choice a.tagit-close .text-icon:hover {
  color: #fff;
}
ul.tagit input[type="text"] {
  color: #BFBFBF;
  background: none;
}
ul.tagit .ui-widget {
  font-size: 1.1em;
}
ul.tagit li {
  display: block;
  float: left;
  margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice {
  position: relative;
  line-height: inherit;
}
ul.tagit li.tagit-choice-read-only {
  padding: 0.2em 0.5em 0.2em 0.5em;
}
ul.tagit li.tagit-choice-editable {
  padding: 5px 25px 5px 15px;
}
ul.tagit li.tagit-new {
  padding: 0.25em 4px 0.25em 0;
}
ul.tagit li.tagit-choice a.tagit-label {
  cursor: pointer;
  text-decoration: none;
}
ul.tagit li.tagit-choice .tagit-close {
  cursor: pointer;
  position: absolute;
  right: 0.1em;
  top: 50%;
  margin-top: -8px;
  line-height: 17px;
  display: inline-block;
  margin-right: 5px;
  color: #fff;
}
ul.tagit li.tagit-choice input {
  display: block;
  float: left;
  margin: 2px 5px 2px 0;
}
ul.tagit input[type="text"] {
  box-sizing: border-box;
  box-shadow: none;
  border: none;
  margin: 0;
  padding: 0;
  width: inherit;
  background-color: inherit;
  outline: none;
}
.ui-helper-hidden-accessible,
input.tagit-hidden-field[type=text] {
  display: none;
}
/* Forked from a jQuery UI theme, so that we don't require the jQuery UI CSS as a dependency. */
.tagit-autocomplete.ui-autocomplete {
  position: absolute;
  cursor: default;
}
* html .tagit-autocomplete.ui-autocomplete {
  width: 1px;
}
/* without this, the menu expands to 100% in IE6 */
.tagit-autocomplete.ui-menu {
  list-style: none;
  padding: 2px;
  margin: 0;
  display: block;
  float: left;
}
.tagit-autocomplete.ui-menu .ui-menu {
  margin-top: -3px;
}
.tagit-autocomplete.ui-menu .ui-menu-item {
  margin: 0;
  padding: 0;
  zoom: 1;
  float: left;
  clear: left;
  width: 100%;
}
.tagit-autocomplete.ui-menu .ui-menu-item a {
  text-decoration: none;
  display: block;
  padding: 5px 15px;
  line-height: 1.5;
  zoom: 1;
}
.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-hover,
.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-active {
  font-weight: normal;
  margin: -1px;
}
.tagit-autocomplete.ui-widget-content {
  border: 1px solid #aaaaaa;
  background: #ffffff 50% 50% repeat-x;
  color: #222222;
}
.tagit-autocomplete.ui-corner-all,
.tagit-autocomplete .ui-corner-all {
  border-radius: 3px;
}
.tagit-autocomplete .ui-state-hover,
.tagit-autocomplete .ui-state-focus {
  border: 0;
  background: #0ec5ff;
  font-weight: normal;
  color: #fff;
}
.tagit-autocomplete .ui-state-active {
  border: 1px solid #aaaaaa;
}
.tagit-autocomplete .ui-widget-content {
  border: 1px solid #aaaaaa;
}
.tagit .ui-helper-hidden-accessible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
}
.tipsy {
  font-size: 13px;
  position: absolute;
  z-index: 100000;
  padding: 4px 8px 4px 8px;
  background: #323232;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.43);
  border-radius: 3px;
}
.tipsy .tipsy-inner {
  font-family: 'Open Sans';
  color: #BFBFBF;
  max-width: 300px;
  max-height: 200px;
  overflow: hidden;
  text-align: left;
  line-height: 18px;
}
section.homepage section.slides {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}
section.homepage section.slides > article {
  text-shadow: 2px 2px 2px #282828;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: slide 49s ease infinite;
}
section.homepage section.slides > article:first-child {
  position: relative;
}
section.homepage section.slides > article:nth-child(1) {
  opacity: 1;
}
section.homepage section.slides > article > img {
  width: 100%;
}
@media (max-width: 599px) {
  section.homepage section.slides > article {
    overflow: hidden;
  }
  section.homepage section.slides > article > img {
    height: 30vh;
    width: initial;
  }
}
section.homepage section.slides > article:nth-child(7) {
  animation-delay: 42s;
}
section.homepage section.slides > article:nth-child(6) {
  animation-delay: 35s;
}
section.homepage section.slides > article:nth-child(5) {
  animation-delay: 28s;
}
section.homepage section.slides > article:nth-child(4) {
  animation-delay: 21s;
}
section.homepage section.slides > article:nth-child(3) {
  animation-delay: 14s;
}
section.homepage section.slides > article:nth-child(2) {
  animation-delay: 7s;
}
section.homepage section.slides > article:nth-child(1) {
  animation-delay: 0s;
}
@keyframes slide {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  14.285714285714285% {
    opacity: 1;
  }
  16.285714285714285% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
}
section.homepage section.slides > article > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
section.homepage section.slides > article > div h2 {
  text-transform: uppercase;
  font-size: 34px;
}
@media (max-width: 599px) {
  section.homepage section.slides > article > div h2 {
    font-size: 24px;
  }
}
section.homepage section.slides > article > div h3 {
  font-weight: 300;
}
section.homepage section.slides > article > div img.avatar {
  height: 60%;
}
section.homepage section.slides > article h2,
section.homepage section.slides > article h3 {
  text-transform: none;
}
section.homepage section.slides > article h3 {
  color: #ddd;
}
section.homepage section.slides > article blockquote,
section.homepage section.slides > article h2 {
  font-size: 32px;
  font-weight: 400;
  color: #fff;
}
@media (max-width: 599px) {
  section.homepage section.slides > article blockquote,
  section.homepage section.slides > article h2 {
    font-size: 22px;
  }
}
section.homepage section.slides > article.quote > div {
  flex-direction: row;
}
section.homepage section.slides > article.quote > div img.avatar {
  height: 60%;
}
section.homepage section.slides > article.quote > div blockquote {
  font-style: italic;
}
section.homepage section.slides > article.sample-lib h4 {
  display: flex;
  align-items: center;
}
section.homepage section.slides > article.sample-lib h4 span,
section.homepage section.slides > article.sample-lib h4 a {
  display: block;
  margin-right: 30px;
  font-size: 18px;
  font-weight: 400;
}
@media (max-width: 599px) {
  section.homepage section.slides > article.sample-lib h4 span,
  section.homepage section.slides > article.sample-lib h4 a {
    font-size: 14px;
  }
}
section.homepage section.slides > article.sample-lib h4 img {
  height: 30px;
}
section.homepage section.slides > article.sample-lib p {
  font-size: 22px;
}
@media (max-width: 599px) {
  section.homepage section.slides > article.sample-lib p {
    font-size: 18px;
  }
}
section.homepage > footer {
  display: grid;
  grid-template-areas: "info action" "listen listen";
  grid-gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 599px) {
  section.homepage > footer {
    grid-template-areas: "info" "action" "listen";
  }
}
section.homepage > footer h1,
section.homepage > footer h2 {
  color: #fff;
}
section.homepage > footer section.info {
  grid-area: info;
  margin-bottom: 0;
}
section.homepage > footer section.info p {
  font-size: 16px;
  margin: 0;
}
@media (max-width: 599px) {
  section.homepage > footer section.info p {
    font-size: 12px;
  }
}
section.homepage > footer section.info p,
section.homepage > footer section.info p * {
  vertical-align: middle;
}
section.homepage > footer section.info p i.small {
  display: inline-block;
  margin: 0 2px;
  width: 13px;
  height: 13px;
  background-size: 13px 13px;
}
section.homepage > footer section.info h1 span {
  color: #0ec5ff;
  display: inline-block;
  margin-left: 5px;
  font-weight: 400;
}
section.homepage > footer section.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: action;
}
section.homepage > footer section.action a.button {
  padding: 17px 50px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
section.homepage > footer section.action a.button.signup {
  margin-bottom: 10px;
}
section.homepage > footer section.action a {
  display: inline-block;
}
section.homepage > footer section.action a.about {
  text-decoration: underline;
  margin-left: 5px;
}
section.homepage > footer section.listen {
  grid-area: listen;
}
section.homepage > footer section.listen h2 {
  font-size: 18px;
}
@media (max-width: 599px) {
  section.homepage > footer section.listen h2 {
    font-size: 14px;
  }
}
.newsfeed.log p.enable-notifications {
  line-height: 1em;
  font-size: 14px;
}
@media (max-width: 599px) {
  .newsfeed.log p.enable-notifications {
    font-size: 10px;
  }
}
#body.homepage > article,
#body.homepage > aside {
  margin-bottom: 20px;
}
#body.homepage .ads .banner-carousel a img {
  width: 100%;
}
#body.homepage .ads .ad-facebook,
#body.homepage .ads .video {
  margin-bottom: 5px;
}
#body.homepage aside > section {
  margin-bottom: 30px;
}
#body.homepage aside > section > header {
  display: flex;
  margin-bottom: 5px;
}
#body.homepage aside > section > header > * {
  display: block;
  align-self: center;
}
#body.homepage aside > section > header h2 {
  flex-grow: 1;
  font-size: 14px;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
  color: #bfbfbf;
}
@media (max-width: 599px) {
  #body.homepage aside > section > header h2 {
    font-size: 10px;
  }
}
#body.homepage aside section.active-tracks > header {
  margin-bottom: 8px;
}
#body.homepage aside section.active-tracks ul.items {
  margin: 0;
  padding: 0;
}
#body.homepage aside section.active-tracks ul.items li {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  overflow: hidden;
}
#body.homepage aside section.active-tracks ul.items li div.cover {
  position: relative;
  margin: 0 10px 0 0;
}
#body.homepage aside section.active-tracks ul.items li div.cover img {
  display: block;
  width: 110px;
}
#body.homepage aside section.active-tracks ul.items li i.join-policy {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  margin-right: 5px;
  background-size: cover;
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
}
#body.homepage aside section.active-tracks ul.items li i.join-policy.all {
  background-image: url(/img/theme/svg/join-policy-all.svg);
}
#body.homepage aside section.active-tracks ul.items li i.join-policy.invite {
  background-image: url(/img/theme/svg/join-policy-invite.svg);
}
#body.homepage aside section.active-tracks ul.items li i.join-policy.friends {
  background-image: url(/img/theme/svg/join-policy-friends.svg);
}
#body.homepage aside section.active-tracks ul.items li footer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#body.homepage aside section.active-tracks ul.items li footer > article {
  display: grid;
  grid-template-columns: 1fr min-content;
  flex-direction: row;
}
#body.homepage aside section.active-tracks ul.items li footer > article a.join {
  align-self: flex-start;
  padding: 2px 10px;
  margin-left: 5px;
  text-align: center;
  background-color: rgba(14, 197, 255, 0.9);
  color: #fff;
  text-transform: uppercase;
  border-radius: 3px;
  font-size: 12px;
}
@media (max-width: 599px) {
  #body.homepage aside section.active-tracks ul.items li footer > article a.join {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
#body.homepage aside section.active-tracks ul.items li footer > article h2.meta {
  flex-grow: 1;
  font-size: 14px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 599px) {
  #body.homepage aside section.active-tracks ul.items li footer > article h2.meta {
    font-size: 10px;
  }
}
#body.homepage aside section.active-tracks ul.items li footer > article h2.meta a {
  color: #bfbfbf;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#body.homepage aside section.active-tracks ul.items li footer > article h2.meta a.name {
  font-weight: 600;
}
#body.homepage aside section.active-tracks ul.items li footer:hover > article a.join {
  display: block;
}
#body.homepage aside section.active-tracks ul.items li footer section.users {
  flex: 1 0 0;
  align-items: flex-end;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
  overflow: hidden;
  grid-gap: 0 5px;
  margin: 10px 0 5px 0;
}
#body.homepage aside section.active-tracks ul.items li footer section.users img.avatar {
  width: 25px;
  height: 25px;
}
#body.homepage aside section.active-tracks ul.items li footer section.users * {
  display: block;
}
#body.homepage aside section.suggest-genre {
  display: flex;
  flex-direction: column;
  align-content: center;
}
@media (max-width: 599px) {
  #body.homepage aside section.suggest-genre {
    display: none;
  }
}
#body.homepage aside section.ad a.img {
  width: 100%;
}
#body.homepage aside ul.player.track-compact {
  grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
}
#body.homepage aside ul.player.track-compact footer div.info {
  margin-bottom: 0;
}
#body.homepage aside section.follow-us header {
  margin-bottom: 10px;
}
#body.homepage aside section.follow-us article {
  display: grid;
  flex-direction: row;
  grid-template-columns: repeat(3, 50px);
  justify-items: center;
  grid-gap: 15px;
}
#body.homepage aside section.follow-us article img {
  width: 50px;
}
#body.homepage aside section.follow-us article * {
  display: block;
}
.global-charts,
.featured-albums {
  clear: both;
}
.global-charts h3,
.featured-albums h3 {
  margin-bottom: 10px;
}
.global-charts ul.player.track-compact,
.featured-albums ul.player.track-compact,
.global-charts ul.player.album-compact,
.featured-albums ul.player.album-compact {
  grid-template-columns: repeat(auto-fit, minmax(80px, 140px));
}
.global-charts > .charts,
.featured-albums > .charts {
  margin-bottom: 40px;
}
.sample-audit-single .assets ul li:hover {
  background-color: initial;
}
.sample-audit-single .assets ul.tags li {
  background-color: #404040;
  text-transform: uppercase;
  padding: 2px;
  font-size: 10px;
}
.sample-audit-single > footer,
.sample-audit-single header,
.sample-audit-single .meta {
  margin-bottom: 10px;
}
.sample-audit-single .buttons .good {
  background-color: #489b2d;
}
.sample-audit-single .buttons .unsure {
  background-color: #a3a300;
}
.sample-audit-single .buttons .bad {
  background-color: #660000;
}
.sample-audit-single ul.tags {
  display: flex;
}
.sample-audit-single ul.tags li {
  margin-right: 10px;
}
.sample-audit .assets ul > li footer {
  margin-left: 35px;
}
.sample-audit .assets ul > li footer section.meta var.meta {
  font-size: 10px;
}
.sample-audit .assets ul > li footer section.meta var.meta .key {
  font-weight: 600;
}
.sample-audit .assets ul > li footer section.meta var.meta:after {
  content: ',';
}
.sample-audit .assets ul > li footer section.meta var.meta:last-of-type:after {
  content: '';
}
.sample-audit .assets ul > li footer section.sample-description {
  font-size: 10px;
}
.sample-audit .assets ul > li footer ul.tags {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}
.sample-audit .assets ul > li footer ul.tags li {
  background: #303030;
  color: #fff;
  font-size: 9px;
  padding: 3px;
  margin: 1px;
  border-radius: 3px;
}
.sample-audit form label {
  display: block;
}
.sample-audit input[type='checkbox'] {
  width: initial;
  height: initial;
  margin: 0;
  padding: 0;
}
.sample-audit form fieldset {
  margin: 0;
}
.sample-audit form input[type='submit'] {
  margin-bottom: 40px;
}
.sample-audit .buttons .good {
  background-color: #489b2d;
}
.sample-audit .buttons .unsure {
  background-color: #a3a300;
}
.sample-audit .buttons .bad {
  background-color: #660000;
}
.sample-audit .button.small {
  padding: 3px 15px;
}
.sample-audit .button.small.selected {
  font-weight: 800;
}
.sample-audit .date {
  float: right;
  text-transform: uppercase;
  font-size: 14px;
}
@media (max-width: 599px) {
  .sample-audit .date {
    font-size: 10px;
  }
}
.sample-audit .wave-and-info {
  margin-left: 50px;
}
.sample-audit .wave-and-info span,
.sample-audit .wave-and-info a {
  font-size: 14px;
}
@media (max-width: 599px) {
  .sample-audit .wave-and-info span,
  .sample-audit .wave-and-info a {
    font-size: 10px;
  }
}
.sample-audit .private {
  opacity: 1;
}
.sample-audit .private canvas {
  opacity: 0.2;
}
.sample-audit em {
  font-style: normal;
}
.sample-audit nav.filter {
  background-color: #282828;
  padding: 5px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.sample-audit nav.filter div.filters {
  float: left;
}
.sample-audit nav.filter div.categories {
  float: right;
}
.sample-audit nav.filter div.filters,
.sample-audit nav.filter div.categories {
  width: 50%;
}
.sample-audit nav.filter div.filters h3,
.sample-audit nav.filter div.categories h3 {
  margin: 0 0 10px 0;
  font-weight: 600;
}
.sample-audit nav.filter ul {
  float: none;
}
.sample-audit nav.filter ul li {
  padding: 0 0px 0 23px;
}
.sample-audit nav.filter * {
  color: #888;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}
.sample-audit nav.filter * li a {
  font-size: 12px;
}
@media (max-width: 599px) {
  .sample-audit nav.filter * li a {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
.sample-audit nav.filter input {
  float: none;
  position: relative;
  top: 0px;
}
.sample-audit input[type=checkbox] {
  height: 13px;
  top: 10px;
  padding: 0;
}
.sample-audit input[type=number] {
  text-align: left;
  width: 50px;
  padding: 3px 0 3px 5px ;
  height: 20px;
}
.sample-audit .audit-log ul {
  max-height: 500px;
  overflow: auto;
  padding: 0;
  list-style-type: none;
}
.sample-audit .audit-log ul li {
  margin-bottom: 2px;
  padding: 3px;
}
.sample-audit .audit-log ul li:hover {
  background-color: #404040;
}
.sample-audit .audit-log ul li header {
  display: flex;
}
.sample-audit .audit-log ul li header .user,
.sample-audit .audit-log ul li header .time {
  color: #808080;
  font-size: 10px;
}
.sample-audit .audit-log ul li header .time {
  flex-grow: 1;
  align-content: flex-end;
  text-align: right;
}
.sample-audit .audit-log ul li a,
.sample-audit .audit-log ul li span.uploader {
  font-size: 12px;
}
.sample-audit .audit-log ul li .time {
  color: #808080;
  text-transform: uppercase;
}
.sample-audit .audit-log ul li .action {
  text-transform: uppercase;
  border-radius: 4px;
  color: #fff;
  padding: 0 2px;
  font-size: 12px;
}
.sample-audit .audit-log ul li .action.approve,
.sample-audit .audit-log ul li .action.approved {
  background-color: #489b2d;
}
.sample-audit .audit-log ul li .action.unsure {
  background-color: #eeee00;
  color: black;
}
.sample-audit .audit-log ul li .action.blocked,
.sample-audit .audit-log ul li .action.block {
  color: #fff;
  background-color: #880000;
}
.assets h2 {
  font-size: 22px;
  line-height: 1.5;
  padding-bottom: 13px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .assets h2 {
    font-size: 18px;
  }
}
.assets ul {
  margin: 0 0 35px 0;
  padding: 0;
  list-style: none;
}
.assets ul li {
  border-radius: 3px;
  margin-bottom: 2px;
  padding: 4px;
  background-color: #262626;
}
.assets ul li:hover {
  background: #303030;
}
.assets ul li.selected {
  background: #2A2A2A;
}
.assets ul li header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 12px;
  position: relative;
}
.assets ul li header span.name {
  flex-grow: 1;
}
.assets ul li header span.name i {
  margin-left: 3px;
}
.assets ul li header span.name span.user,
.assets ul li header span.name span.user a {
  color: #808080;
}
.assets ul li header .plugin-image {
  margin-right: 10px;
}
.assets ul li header span.play {
  background-size: 25px 25px;
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
.assets ul li header span.play.disabled {
  pointer-events: none;
  opacity: 0.2;
}
.assets ul li header b {
  color: #888;
  font-size: 16px;
  font-weight: 400;
}
.assets ul li header a {
  text-decoration: none;
}
.assets ul li header div.icons {
  display: flex;
}
.assets ul li header div.icons span.num {
  display: block;
  min-width: 30px;
  text-align: right;
}
.assets ul li header div.icons i.icon {
  padding: 0 0 0 10px;
}
.assets ul li header div.icons em {
  display: flex;
  font-size: 12px;
  font-style: normal;
  position: relative;
  top: 2px;
}
.assets ul li header div.icons em i {
  margin-right: 4px;
}
.assets ul li header em.ci {
  margin-right: 10px;
}
.assets div.dropdown {
  z-index: 9999;
  right: -15px;
}
#body.admin .sysprefs section.group {
  margin-bottom: 15px;
}
#body.admin .sysprefs section.group label {
  margin-bottom: 5px;
}
#body.admin .sysprefs section.group label.chk {
  max-width: 600px;
  display: flex;
  align-items: center;
}
#body.admin .sysprefs section.group label.chk .name {
  flex-grow: 1;
}
#body.admin .sysprefs section.group label.chk input[type=number] {
  width: 100px;
}
#body.admin .newsletters .item {
  margin-bottom: 50px;
}
#body.admin .newsletters .item header h4 {
  margin: 0;
}
#body.admin .newsletters .item .button {
  min-width: 100px;
}
#body.admin .newsletters .item .dropdown {
  min-width: 100px;
}
#body.admin .newsletters .item ul.status {
  padding: 0;
}
#body.admin .newsletters .item ul.status li {
  display: flex;
  width: 330px;
}
#body.admin .newsletters .item ul.status li > var {
  flex-grow: 1;
}
#body.admin .newsletters .item ul.status li > span {
  justify-self: flex-end;
}
#body.admin .admin.scratch h3 {
  margin-bottom: 7px;
  font-size: 18px;
}
@media (max-width: 599px) {
  #body.admin .admin.scratch h3 {
    font-size: 14px;
  }
}
#body.admin .admin.scratch > section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
  margin-bottom: 30px;
  justify-items: stretch;
}
#body.admin .admin.scratch > section a.button {
  display: block;
  margin-bottom: 10px;
}
div.new-player-wrapper {
  font-family: "Open Sans", serif;
  font-size: 14px;
  line-height: 18px;
  height: 60px;
  width: 100%;
  bottom: 0;
  position: fixed;
  background-color: #1a1a1a;
  display: none;
  flex-direction: row;
  justify-content: center;
  border-top: 1px rgba(0, 0, 0, 0.25) solid;
  box-shadow: 0 -1px 16px 0 rgba(0, 0, 0, 0.5);
}
@media (max-width: 888px) {
  div.new-player-wrapper {
    font-size: 9px;
    line-height: 7px;
    height: 36px;
    padding-bottom: 4px;
  }
}
div.new-player-wrapper div.new-player {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div.new-player-wrapper div.new-player .cover img {
  width: 48px;
  height: 48px;
  display: block;
  border: 1px black solid;
  border-radius: 2px;
  box-shadow: 0 0.75px 1px 0 rgba(255, 255, 255, 0.14);
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .cover img {
    display: none;
  }
}
div.new-player-wrapper div.new-player .spectrum-wrapper {
  position: relative;
  margin-left: 20px;
  display: none;
}
div.new-player-wrapper div.new-player .spectrum-wrapper .spectrum {
  width: 99px;
  height: 48px;
  border-radius: 2px;
  border: 1px black solid;
  box-shadow: 0 0.75px 1px 0 rgba(40, 229, 255, 0.14);
  background-color: #141414;
  cursor: pointer;
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .spectrum-wrapper .spectrum {
    display: none;
  }
}
div.new-player-wrapper div.new-player .spectrum-wrapper:hover .control-wrapper {
  visibility: visible;
}
div.new-player-wrapper div.new-player .spectrum-wrapper .control-wrapper {
  top: 0;
  left: 0;
  width: 99px;
  height: 48px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  position: absolute;
  visibility: hidden;
}
div.new-player-wrapper div.new-player .spectrum-wrapper .control-wrapper .control {
  height: 18px;
  font-size: 8px;
  margin-top: 3px;
  padding: 0 2px;
  border-radius: 9px;
  color: #999;
  background-color: rgba(0, 0, 0, 0.6);
}
div.new-player-wrapper div.new-player .spectrum-wrapper .control-wrapper .control span {
  padding: 0 3px;
  cursor: pointer;
  user-select: none;
}
div.new-player-wrapper div.new-player .spectrum-wrapper .control-wrapper .control span:hover {
  color: white;
}
div.new-player-wrapper div.new-player span.button-spectrum {
  width: 30px;
  height: 30px;
  display: block;
  margin-left: 20px;
  margin-right: -8px;
  background-image: url('/img/theme/svg/player/global/spectrum.svg');
  cursor: pointer;
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player span.button-spectrum {
    display: none;
  }
}
div.new-player-wrapper div.new-player .controls {
  width: 118px;
  margin: 0 20px;
  padding: 6px 10px;
  background-color: #141414;
  border-radius: 15px;
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .controls {
    width: 20px;
    margin: 0 10px;
    background-color: transparent;
    border-radius: unset;
  }
}
div.new-player-wrapper div.new-player .controls span {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  display: block;
  background: url('/img/theme/svg/default/GlobalPlayPaused.svg') no-repeat center;
  cursor: pointer;
}
div.new-player-wrapper div.new-player .controls span.rewind {
  opacity: 1;
  background-image: url('/img/theme/svg/player/global/previous.svg');
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .controls span.rewind {
    display: none;
  }
}
div.new-player-wrapper div.new-player .controls span.forward {
  opacity: 1;
  background-image: url('/img/theme/svg/player/global/next.svg');
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .controls span.forward {
    display: none;
  }
}
div.new-player-wrapper div.new-player .controls span.loop {
  background-image: url('/img/theme/svg/player/global/loop.svg');
}
div.new-player-wrapper div.new-player .controls span.loop.off {
  filter: grayscale(100%) brightness(60%);
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .controls span.loop {
    display: none;
  }
}
div.new-player-wrapper div.new-player .controls span.buffering {
  background-image: url('/img/theme/svg/default/GlobalPlayInit.svg');
}
div.new-player-wrapper div.new-player .controls span.playing {
  background-image: url('/img/theme/svg/default/GlobalPlayPlaying.svg');
}
div.new-player-wrapper div.new-player .controls span.pausing {
  background-image: url('/img/theme/svg/default/GlobalPlayPaused.svg');
}
div.new-player-wrapper div.new-player .controls span.disabled {
  opacity: 0.3;
  pointer-events: none;
}
div.new-player-wrapper div.new-player .center {
  flex: auto;
  display: flex;
  height: 44px;
  flex-direction: column;
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .center {
    height: 30px;
  }
}
div.new-player-wrapper div.new-player .center .labels {
  flex: 0.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.new-player-wrapper div.new-player .center .labels .title-author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #CCCCCC;
}
div.new-player-wrapper div.new-player .center .labels .title-author span:nth-child(2) {
  margin: 0 1px;
  color: #666;
}
div.new-player-wrapper div.new-player .center .labels .playlist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #bbbbbb;
  margin-left: 4px;
}
div.new-player-wrapper div.new-player .center .labels .playlist:empty {
  display: none;
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .center .labels .playlist {
    display: none;
  }
}
div.new-player-wrapper div.new-player .center .labels .playlist::before {
  display: inline-block;
  content: " ";
  width: 14px;
  height: 14px;
  background-size: 14px 14px;
  background-image: url('/img/theme/svg/player/global/album.svg');
  position: relative;
  margin-right: 4px;
  top: 4px;
}
div.new-player-wrapper div.new-player .center .progress {
  flex: 0.5;
  display: flex;
  align-items: center;
  height: 100%;
}
div.new-player-wrapper div.new-player .center .progress ._timeElapsed,
div.new-player-wrapper div.new-player .center .progress ._timeDuration {
  color: #7f7f7f;
}
div.new-player-wrapper div.new-player .center .progress .progress-bar {
  flex: 1;
  margin: 0 10px;
  cursor: pointer;
  height: 10px;
  border-radius: 2px;
  background-color: #404040;
  border: 1px #1A1A1A solid;
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.06);
}
div.new-player-wrapper div.new-player .center .progress .progress-bar .value {
  border-radius: 1px;
  background-color: #0ec5ff;
  box-shadow: 0 1px 2px 0 rgba(40, 229, 255, 0.4);
  width: 0;
  height: 100%;
}
div.new-player-wrapper div.new-player .context {
  width: 140px;
  margin: 0 0 0 20px;
  padding: 0 0 0 10px;
  border-left: 1px #2A2A2A solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .context {
    width: 30px;
    margin: 0 20px 0 10px;
  }
}
div.new-player-wrapper div.new-player .context .icon {
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
}
div.new-player-wrapper div.new-player .context .disabled .icon {
  opacity: 0.3;
}
@media (max-width: 888px) {
  div.new-player-wrapper div.new-player .context ._share,
  div.new-player-wrapper div.new-player .context ._add-album,
  div.new-player-wrapper div.new-player .context ._remix,
  div.new-player-wrapper div.new-player .context #volume-button {
    display: none;
  }
}
@media (max-width: 888px) {
  div.new-player-wrapper .hideIfCompact {
    display: none;
  }
}
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 10px;
}
progress::-webkit-progress-value {
  border-radius: 1px;
  background-color: #0ec5ff;
  box-shadow: 0 1px 2px 0 rgba(40, 229, 255, 0.4);
}
progress::-webkit-progress-bar,
progress::-moz-progress-bar {
  border-radius: 2px;
  background-color: #404040;
  border: 1px #1A1A1A solid;
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.06);
}
progress::-moz-progress-bar {
  border-radius: 2px;
  background-color: #404040;
  border: 1px #1A1A1A solid;
  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.06);
}
/* footer */
footer.global {
  background: #282828;
  color: #888;
  font-weight: 400;
  line-height: 1.333;
  padding: 85px 10px 0;
}
footer.global > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  max-width: 880px;
  margin: auto;
}
@media (max-width: 599px) {
}
footer.global > div > div {
  justify-self: center;
}
footer.global div.logo img {
  width: 50%;
}
footer.global ul {
  font-size: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 599px) {
  footer.global ul {
    font-size: 10px;
  }
}
footer.global ul li {
  margin: 0 0 4px 0;
}
footer.global ul li.copyright {
  color: #666;
}
footer.global h2 {
  font-size: 18px;
  line-height: 1.714;
  text-transform: uppercase;
  font-weight: inherit;
  margin: 0 0 20px;
  padding: 0;
}
@media (max-width: 599px) {
  footer.global h2 {
    font-size: 14px;
  }
}
footer.aside {
  font-size: 14px;
  line-height: 1.714;
}
@media (max-width: 599px) {
  footer.aside {
    font-size: 10px;
  }
}
footer.aside:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
footer.aside div {
  clear: both;
}
footer.aside div div:last-child {
  padding-top: 25px;
}
footer.aside div div:last-child h2 {
  display: none;
}
footer.aside div div:last-child li:nth-child(2):before {
  content: '';
}
footer.aside h2 {
  float: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.714;
  margin: 0;
  padding-right: 3px;
}
@media (max-width: 599px) {
  footer.aside h2 {
    font-size: 10px;
  }
}
footer.aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
footer.aside li {
  color: #888;
  float: left;
  font-size: 14px;
  line-height: 24px;
}
@media (max-width: 599px) {
  footer.aside li {
    font-size: 10px;
  }
}
footer.aside li:before {
  content: '|';
  color: #888;
}
footer.aside li:first-child:before {
  content: '';
}
footer.aside a {
  text-decoration: none;
  color: #888;
  padding: 0 3px;
}
div[id=lift__noticesContainer__] {
  position: fixed;
  top: 65px;
  right: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  z-index: 1000;
  color: #fff;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li {
  max-width: width: 350px;
  cursor: initial;
  border-radius: 5px;
  background-color: #000000;
  padding: 10px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li > i.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li > h2 {
  padding-right: 20px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div .interest {
  top: inherit;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li h2 {
  margin: 0;
  width: initial;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li p.time {
  display: none;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div div.cover {
  width: 64px;
  height: 64px;
  line-height: 64px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div div.cover span {
  width: 32px;
  height: 32px;
  background-size: cover;
  top: 16px;
  left: 16px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div div.cover img {
  width: 64px;
  height: 64px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div .waveform {
  height: 32px;
  margin-left: 80px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div .actionbar {
  margin-left: 80px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div .actionbar .button.action.small {
  padding: 2px 5px 4px 5px;
  font-size: 10px;
  line-height: 10px;
}
div[id=lift__noticesContainer__] div.newsfeed > ul > li.track > div .actionbar .icon.middle {
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
}
div[id=lift__noticesContainer__] > div > ul > li {
  cursor: pointer;
}
div[id=lift__noticesContainer__] div[id=lift__noticesContainer___error] li {
  background-color: red;
  border-radius: 3px;
}
div[id=lift__noticesContainer__] div[id=lift__noticesContainer___warning] li {
  background-color: #f16b1c;
  border-radius: 3px;
}
div[id=lift__noticesContainer__] div[id=lift__noticesContainer___notice] li {
  background-color: #242424;
  border: 2px #d2d2d2 solid;
  border-radius: 3px;
}
div[id=lift__noticesContainer__] ul {
  margin: 0;
  padding: 0;
}
div[id=lift__noticesContainer__] li {
  list-style-type: none;
  height: 100%;
  line-height: 1.333;
  font-size: 16px;
  padding: 5px;
  margin-bottom: 10px;
}
div[id=lift__noticesContainer__] > .simple {
  width: 350px;
  border-radius: 5px;
  background-color: #000000;
  padding: 10px;
  margin-bottom: 10px;
  cursor: initial;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
div[id=lift__noticesContainer__] > .simple > img {
  max-width: 50px;
  margin-right: 10px;
}
div[id=lift__noticesContainer__] > .simple > article {
  width: 100%;
}
div[id=lift__noticesContainer__] > .simple > article > header {
  display: flex;
  flex-direction: row;
}
div[id=lift__noticesContainer__] > .simple > article > header h2 {
  font-size: 14px;
  font-weight: 600;
  flex-grow: 1;
  margin-bottom: 3px;
  margin-right: 10px;
}
@media (max-width: 599px) {
  div[id=lift__noticesContainer__] > .simple > article > header h2 {
    font-size: 10px;
  }
}
div[id=lift__noticesContainer__] > .simple > article > section.body {
  margin-bottom: 5px;
}
div[id=lift__noticesContainer__] > .simple > article > footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
div[id=lift__noticesContainer__] > .simple > article > footer a.button {
  margin-left: 10px;
  padding: 2px 20px;
}
/* colour mixins */
.gradient-vertical {
  background: #0ec5ff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #00e4ff 0%, #0ec5ff 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00e4ff), color-stop(100%, #0ec5ff));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00e4ff 0%, #0ec5ff 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00e4ff 0%, #0ec5ff 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00e4ff 0%, #0ec5ff 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #00e4ff 0%, #0ec5ff 100%);
  /* W3C */
}
.gradient-horizontal {
  background: #0ec5ff;
  /* Old browsers */
  background: -moz-linear-gradient(left, #00e4ff 0%, #0ec5ff 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00e4ff), color-stop(100%, #0ec5ff));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #00e4ff 0%, #0ec5ff 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #00e4ff 0%, #0ec5ff 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #00e4ff 0%, #0ec5ff 100%);
  /* IE10+ */
  background: linear-gradient(to right, #00e4ff 0%, #0ec5ff 100%);
  /* W3C */
}
@media (max-width: 599px) {
  .hideOnMobile {
    display: none;
  }
}
.coverShadow {
  box-shadow: 0 0.5px 1px 0 rgba(0, 0, 0, 0.1);
}
/*
 * =2 basic styles of global scope
 */
/* base styles */
html {
  margin: 0;
  padding: 0;
  overflow-y: overlay;
}
@media (max-width: 599px) {
  html {
    overflow-x: hidden;
  }
}
body {
  font-family: 'Open Sans';
  color: #BFBFBF;
  background-color: #242424;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
@media (max-width: 599px) {
  body {
    font-size: 10px;
  }
}
body > div.frame {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
input,
textarea,
select,
option,
button {
  font-family: 'Open Sans';
}
h1,
.h1 {
  font-size: 32px;
  font-weight: 300;
  line-height: 1em;
  text-transform: uppercase;
  margin: 0 0 20px;
  white-space: nowrap;
}
@media (max-width: 599px) {
  h1,
  .h1 {
    font-size: 22px;
  }
}
h2,
.h2 {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  /* 40px of 34px */
  text-transform: none;
  margin: 0 0 10px;
}
@media (max-width: 599px) {
  h2,
  .h2 {
    font-size: 20px;
  }
}
h2 b,
.h2 b {
  font-weight: 400;
}
h3,
.h3 {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  /* 35px of 30px */
  text-transform: uppercase;
  margin: 0 0 40px;
}
@media (max-width: 599px) {
  h3,
  .h3 {
    font-size: 20px;
  }
}
h4,
.h4 {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  /* 28px of 24px */
  text-transform: none;
  margin: 0 0 20px;
}
@media (max-width: 599px) {
  h4,
  .h4 {
    font-size: 20px;
  }
}
h5,
.h5 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  /* 28px of 22px */
  text-transform: none;
  margin: 0 0 20px;
}
@media (max-width: 599px) {
  h5,
  .h5 {
    font-size: 18px;
  }
}
h6,
.h6 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  /* 25px of 18px */
  text-transform: none;
  margin: 0 0 20px;
}
@media (max-width: 599px) {
  h6,
  .h6 {
    font-size: 14px;
  }
}
hr {
  border: none;
  border-bottom: 1px solid #eee;
}
.default-text {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 1em;
}
@media (max-width: 599px) {
  .default-text {
    font-size: 10px;
  }
}
@media (max-width: 699px) {
  .default-text {
    font-size: 16px;
  }
}
p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 1em;
}
@media (max-width: 599px) {
  p {
    font-size: 10px;
  }
}
@media (max-width: 699px) {
  p {
    font-size: 16px;
  }
}
blockquote {
  font-size: 18px;
  line-height: 1.5;
}
@media (max-width: 599px) {
  blockquote {
    font-size: 14px;
  }
}
a {
  text-decoration: none;
  color: inherit;
}
a.disabled,
.disabled a {
  cursor: default;
}
p a {
  font-weight: 600;
}
label.chk {
  position: relative;
  line-height: 24px;
}
label.chk * {
  vertical-align: middle;
}
label.chk .chkbox-img {
  display: inline-block;
  margin-right: 5px;
}
label.checkbox {
  display: flex;
  align-items: center;
  position: relative;
  color: #BFBFBF;
  width: auto;
}
label.checkbox input[type=checkbox] {
  width: initial;
  height: initial;
  margin: 0 4px 0 0;
  padding: 0;
}
form p.form-hint {
  color: #888;
  font-size: 18px;
}
@media (max-width: 599px) {
  form p.form-hint {
    font-size: 14px;
  }
}
form .col-2:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
form .col-2 > div {
  float: left;
  width: 50%;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
form .col-2 > div:first-child {
  padding-right: 25px;
}
form .col-2 > div:last-child {
  padding-left: 25px;
}
form .col-2 > div:only-child {
  padding-left: 0;
}
form .checkbox-container {
  margin-bottom: 10px;
  position: relative;
}
form .input-and-submit {
  display: flex;
}
form .input-and-submit input,
form .input-and-submit input[type=text] {
  width: 70%;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  margin-bottom: 0;
  margin-right: 10px;
}
form .input-and-submit .button,
form .input-and-submit input[type=submit] {
  width: 20%;
  position: relative;
  flex-grow: 1;
  margin-right: 0;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
legend {
  font-size: 24px;
  margin-bottom: 20px;
}
@media (max-width: 599px) {
  legend {
    font-size: 20px;
  }
}
select {
  margin-bottom: 20px;
}
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=checkbox] {
  font-family: 'Open Sans';
  background: #404040;
  border-radius: 3px;
  border: 1px solid #404040;
  font-size: 14px;
  color: #BFBFBF;
  padding: 7px 8px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  width: 100%;
  display: inline-block;
}
@media (max-width: 599px) {
  input[type=text],
  input[type=number],
  input[type=password],
  input[type=email],
  input[type=checkbox] {
    font-size: 10px;
  }
}
input[type=text].small,
input[type=number].small,
input[type=password].small,
input[type=email].small,
input[type=checkbox].small {
  padding: 0px 2px;
}
input[type=checkbox] {
  width: initial;
}
input:focus {
  border-color: #888;
  background: #404040;
  outline: none;
}
textarea,
div.textarea,
select {
  font-family: "Open Sans", serif;
  background: #404040;
  border-radius: 3px;
  border: 1px solid #404040;
  font-size: 14px;
  color: #BFBFBF;
  padding: 8px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  width: 100%;
}
@media (max-width: 599px) {
  textarea,
  div.textarea,
  select {
    font-size: 10px;
  }
}
textarea:focus,
div.textarea:focus,
select:focus {
  border-color: #888;
  background: #404040;
  outline: none;
}
span.checkbox input[type=checkbox] {
  /*
    & + label,
    & + input[type=hidden] + label {
        background-image: url('/img/theme/png/controls/checkbox.png');
        width: 24px;
        height: 24px;
        display: inline-block;
        overflow: hidden;
        text-indent: -1000em;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;
    }
    &:checked {
        & + label,
        & + input[type=hidden] + label {
            background-image: url('/img/theme/png/controls/checkbox-checked.png');
            width: 24px;
            height: 24px;
            display: inline-block;
            overflow: hidden;
            text-indent: -1000em;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    */
}
.chkbox-img {
  width: 24px;
  height: 24px;
  background-image: url('/img/theme/png/controls/checkbox.png');
}
.chkbox-img.checked {
  background-image: url('/img/theme/png/controls/checkbox-checked.png');
}
p.form-submit {
  text-align: right;
  margin-bottom: 0;
}
p.form-submit button,
p.form-submit .button,
p.form-submit input[type="submit"] {
  margin: 0 0 20px 20px;
  min-width: 165px;
}
cite {
  font-style: normal;
}
/* borderbox */
.borderbox {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
/* clearfixing */
.clearfix {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
/* one line text ellipsis */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fullwidth {
  width: 100%;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
.loading {
  -moz-animation-name: loading;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -webkit-animation-name: loading;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -ms-animation-name: loading;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: loading;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  animation-name: loading;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* missingdesign is for diagnostic reasons only */
.missingdesign {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background: #f00;
  margin: 0;
  padding: 1em;
}
@media (max-width: 599px) {
  .missingdesign {
    font-size: 20px;
  }
}
/*
 * =4 modules in alphabetical order
 */
/* about */
.about {
  padding-bottom: 24px;
}
.about h2 {
  font-size: 22px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .about h2 {
    font-size: 18px;
  }
}
.about p {
  color: #888;
  font-size: 14px;
  line-height: 1.286;
  margin-bottom: 18px;
}
@media (max-width: 599px) {
  .about p {
    font-size: 10px;
  }
}
/* actionbar */
.actionbar.dark li a {
  color: #BFBFBF;
}
.actionbar.dark li a.button.action.small {
  background: #303030;
}
.actionbar li a {
  color: #d2d2d2;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  line-height: 18px;
}
@media (max-width: 599px) {
  .actionbar li a {
    font-size: 10px;
  }
}
@media (min-width: 1200px) {
  .actionbar li a {
    line-height: 24px;
  }
}
.selected .actionbar li a {
  color: #0ec5ff;
}
.actionbar li.track-download {
  position: relative;
}
.actionbar li.track-download .notification {
  display: none;
  width: auto;
  position: absolute;
  right: 14px;
  top: 22px;
  z-index: 9000;
  background-color: #fff;
}
.actionbar li.track-download .notification li {
  float: none;
  padding: 0 !important;
}
.actionbar li.track-download .notification li a {
  white-space: nowrap;
  text-transform: none;
  display: block;
}
.actionbar li.track-download-open .notification {
  display: block;
}
.actionbar button {
  background: transparent;
  border: none;
}
@media (max-width: 679px) {
  .actionbar-share {
    display: none;
  }
}
@media (max-width: 600px) {
  .actionbar-remix {
    display: none;
  }
}
/* ad and ads */
.ad {
  margin-bottom: 20px;
}
.ad img {
  width: 100%;
  height: auto;
}
.ads .fb-like {
  background-color: #fff;
  margin-bottom: 20px;
  height: 238px;
}
.ads .fb-like .fb-like-box iframe {
  width: 350px !important;
  height: 238px !important;
}
/* concept */
.concept {
  background: #dcdfdf;
  padding: 77px 0 47px 0;
}
.concept .inner {
  max-width: 1200px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: auto;
}
.concept .inner:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.concept .inner h2 {
  text-transform: uppercase;
  font-size: 28px;
  text-align: center;
  margin-bottom: 33px;
}
@media all and (min-width: 860px) {
  .concept .inner h2 {
    font-size: 34px;
  }
}
@media all and (min-width: 860px) and (max-width: 599px) {
  .concept .inner h2 {
    font-size: 24px;
  }
}
.concept .inner > div {
  padding-right: 20px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
@media all and (min-width: 600px) {
  .concept .inner > div {
    float: left;
    width: 33%;
  }
}
.concept .inner > div:last-child {
  margin: 0;
}
.concept .inner > div img {
  width: 100%;
  max-width: 220px;
  margin: 0 auto 46px;
  display: block;
}
.concept .inner > div h3 {
  text-transform: uppercase;
  color: #282828;
  font-size: 26px;
  text-align: center;
  margin-bottom: 32px;
}
@media all and (min-width: 860px) {
  .concept .inner > div h3 {
    font-size: 30px;
  }
}
@media all and (min-width: 860px) and (max-width: 599px) {
  .concept .inner > div h3 {
    font-size: 20px;
  }
}
.concept .inner > div p {
  font-size: 16px;
  color: #282828;
  line-height: 24px;
}
@media all and (min-width: 860px) {
  .concept .inner > div p {
    font-size: 18px;
    color: #282828;
    line-height: 28px;
  }
}
@media all and (min-width: 860px) and (max-width: 599px) {
  .concept .inner > div p {
    font-size: 14px;
  }
}
/* copy */
.copy {
  border-top: 1px solid #eee;
  padding: 34px 0 0 0;
}
.copy p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.copy img {
  max-width: 100%;
  border-top: 10px solid transparent;
  border-bottom: 5px solid transparent;
}
.copy.secondary {
  color: #888;
  border-top: none;
  padding-top: 0;
}
/* dashboard */
.dashboard {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.dashboard .fb-like {
  position: absolute;
  right: 0;
  top: 30px;
}
section.dashboard p.show-more {
  margin-top: 40px;
}
.dashboard nav.filter {
  float: none;
  position: absolute;
  right: 0;
  top: 20px;
}
.dashboard nav.filter ul:first-child {
  float: none;
}
/* description */
#body .description {
  /* font-style: italic; */
  line-height: 1.25;
  margin: 0 0 24px;
}
#body .description,
#body .description p {
  font-size: 14px;
}
@media (max-width: 599px) {
  #body .description,
  #body .description p {
    font-size: 10px;
  }
}
#body .description p {
  margin: 0;
}
@media (max-width: 599px) {
  #body .description {
    margin-bottom: 10px;
  }
}
/* double-column */
.double-column > div {
  float: left;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  width: 50%;
}
.double-column > div:first-child {
  padding-right: 25px;
}
.double-column > div:last-child {
  padding-left: 25px;
}
/* feedback */
.feedback {
  color: #fff;
}
.feedback.failure {
  background: #f16b1c;
}
.feedback.success {
  background: #489b2d;
}
.feedback:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.feedback > div {
  max-width: 1200px;
  margin: auto;
  position: relative;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
.feedback > div a {
  position: absolute;
  top: 10px;
  right: 0;
  text-decoration: none;
}
.feedback > div p {
  font-size: 20px;
  margin: 0 40px 0 0;
  padding: 10px 0 13px;
}
/* faqpage */
.faqpage {
  background-color: #eee;
}
/* faq */
.faq {
  max-width: 1200px;
}
.faq h1 {
  font-size: 34px;
}
.faq .faq-box {
  vertical-align: top;
  max-width: 840px;
  display: inline-block;
}
.faq #accordion {
  position: relative;
  display: inline-block;
  max-width: 790px;
  margin-top: 13px;
}
.faq #accordion h3 {
  text-transform: none;
  font-size: 22px;
  margin: 0px 0px 1em 0px;
  padding-left: 2em;
  background: url('/img/theme/png/chevron-down.png') no-repeat 2px 9px;
  cursor: pointer;
}
@media (max-width: 599px) {
  .faq #accordion h3 {
    font-size: 18px;
  }
}
.faq #accordion h3.ui-state-active {
  background: url('/img/theme/png/chevron-up.png') no-repeat 2px 9px;
}
.faq #accordion h3.ui-state-focus {
  outline: none;
}
.faq #accordion .ui-accordion-content {
  padding: 0px 3em 0px 3.5em;
}
.faq #accordion p {
  margin-bottom: 3em;
}
/* header */
div.next-track-indicator {
  position: absolute;
  margin: 0;
  display: inline-block;
  transform: translateY(-100%) rotate(-90deg);
  transform-origin: left bottom;
  background-color: #888;
  text-align: center;
  text-transform: uppercase;
  border-radius: 3px 3px 0 0;
  left: -1px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
}
header.product {
  position: relative;
  background-size: cover;
  padding: 60px 0 0 0;
  background: #303030;
  margin-bottom: 0;
  padding-top: 82px;
}
header.product .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  min-height: 280px;
  padding-bottom: 53px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
header.product .inner > div {
  margin-left: 290px;
}
@media all and (min-width: 800px) {
  header.product .inner h1 {
    font-size: 50px;
  }
}
header.product .inner h1 a {
  text-decoration: none;
}
header.product .inner {
  padding-bottom: 42px;
}
header.product .inner h1 {
  color: #eee;
  text-transform: uppercase;
  font-size: 30px;
  text-align: center;
  margin-bottom: 95px;
}
@media (max-width: 599px) {
  header.product .inner h1 {
    font-size: 20px;
  }
}
header.product .inner img {
  margin: 0 auto 49px;
  display: block;
  width: 100%;
  max-width: 1070px;
}
header.product .inner p {
  color: #eee;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
@media (max-width: 599px) {
  header.product .inner p {
    font-size: 14px;
  }
}
header.product .inner p em {
  color: #0ec5ff;
  /* font-style: italic; */
  display: block;
}
header.help {
  position: relative;
  background-size: cover;
  background: #303030;
  padding-top: 57px;
}
header.help .inner {
  max-width: 1200px;
  margin: 0 auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  padding-bottom: 59px;
  position: relative;
}
header.help .inner h1 {
  color: #fff;
  font-size: 34px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
}
@media (max-width: 599px) {
  header.help .inner h1 {
    font-size: 24px;
  }
}
header.help .inner h1 span {
  color: #0ec5ff;
}
header.help .inner .profile {
  position: absolute;
  left: 0;
  bottom: 0;
}
/* icon */
.icon-size-40 {
  width: 40px;
  height: 40px;
  background-position: center;
}
/* info */
aside > div.info {
  margin-bottom: 20px;
}
aside > div.info h2 {
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 10px;
}
@media (max-width: 599px) {
  aside > div.info h2 {
    font-size: 12px;
  }
}
aside > div.info ul {
  margin: 0 0 0;
  padding: 0;
  list-style: none;
}
aside > div.info ul:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
aside > div.info ul li {
  float: left;
  padding-left: 20px;
  font-size: 12px;
  color: #888;
}
@media (max-width: 599px) {
  aside > div.info ul li {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
aside > div.info ul li:first-child {
  padding-left: 0;
}
aside > div.info ul li a {
  color: #888;
  text-decoration: none;
}
aside > div.info ul li a:hover,
aside > div.info ul li a:focus,
aside > div.info ul li a:active {
  color: #0ec5ff;
}
/* impressum */
.impressum h3 {
  font-size: 22px;
  text-transform: none;
}
@media (max-width: 599px) {
  .impressum h3 {
    font-size: 18px;
  }
}
@media (min-width: 800px) {
  .impressum h3 {
    width: 450px;
    display: inline-block;
  }
}
.impressum div {
  vertical-align: top;
}
@media (min-width: 800px) {
  .impressum div div {
    display: inline-block;
  }
}
/* instruments */
.instruments {
  background: #eee;
  padding: 42px 0 0 0;
}
.instruments .inner {
  max-width: 1200px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: 0 auto;
}
.instruments .inner .section {
  color: #1A1A1A;
  padding: 42px 0;
}
.instruments .inner .section h2 {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 27px;
}
.instruments .inner .section > div {
  position: relative;
}
.instruments .inner .section > div:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.instruments .inner .section > div > div {
  padding-bottom: 100px;
}
@media (max-width: 800px) {
  .instruments .inner .section > div > div {
    position: relative;
  }
}
@media (min-width: 800px) {
  .instruments .inner .section > div > div {
    float: left;
    width: 33%;
    padding: 0 10px 42px;
    -moz-box-sizing: padding-box;
    box-sizing: border-box;
  }
}
.instruments .inner .section > div > div > img {
  width: 100%;
  max-width: 380px;
  display: block;
  margin: 0 auto 24px;
}
.instruments .inner .section > div > div > h3 {
  text-align: center;
  margin: 0 0 33px;
}
.instruments .inner .section > div > div > p {
  line-height: 28px;
}
.instruments .inner .section > div > div > p a {
  font-size: 14px;
  text-transform: uppercase;
  color: #0ec5ff;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 599px) {
  .instruments .inner .section > div > div > p a {
    font-size: 10px;
  }
}
.instruments .inner .section > div > div > .demo {
  position: absolute;
  bottom: 57px;
  width: 100%;
}
@media (min-width: 800px) {
  .instruments .inner .section > div > div > .demo {
    width: 33%;
    -moz-box-sizing: padding-box;
    box-sizing: border-box;
  }
}
.instruments .inner .section > div > div > .demo p {
  font-size: 14px;
  color: #d2d2d2;
  margin: 0 0 15px;
}
@media (max-width: 599px) {
  .instruments .inner .section > div > div > .demo p {
    font-size: 10px;
  }
}
.instruments .inner .section > div > div > .demo p a {
  color: #d2d2d2;
  text-decoration: none;
}
.instruments .inner .section > div > div > .demo p a:hover,
.instruments .inner .section > div > div > .demo p a:focus,
.instruments .inner .section > div > div > .demo p a:active {
  color: #0ec5ff;
}
.instruments .inner .section > div > div > .demo .logo {
  position: absolute;
  right: 0;
  top: 0;
}
@media (min-width: 800px) {
  .instruments .inner .section > div > div > .demo .logo {
    right: 40px;
  }
}
.instruments .inner .section > div > div > .demo .logo a {
  display: block;
  width: 13px;
  height: 13px;
  background: url('/img/theme/png/logo-mini.png');
}
.instruments .inner .section > div > div > .demo .play {
  position: absolute;
}
.instruments .inner .section > div > div > .demo .play a {
  display: block;
  width: 39px;
  height: 39px;
  background: url('/img/theme/png/instrument-play.png');
}
.instruments .inner .section > div > div > .demo .play a:hover {
  background: url('/img/theme/png/instrument-play-hover.png');
}
.instruments .inner .section > div > div > .demo .waveform {
  width: 100%;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  height: 39px;
  background: url('/img/theme/png/waveform-instruments.png') left center;
  background-repeat: no-repeat;
  background-size: contain;
  border-left: 50px solid #eee;
  border-right: 38px solid #eee;
}
.instruments .inner .section > div > div > .demo.active p {
  color: #eee;
}
.instruments .inner .section > div > div > .demo.active p a {
  color: #eee;
  text-decoration: none;
}
.instruments .inner .section > div > div > .demo.active p a:first-child {
  color: #282828;
}
.instruments .inner .section > div > div > .demo.active p a:hover,
.instruments .inner .section > div > div > .demo.active p a:focus,
.instruments .inner .section > div > div > .demo.active p a:active {
  color: #0ec5ff;
}
.instruments .inner .section > div > div > .demo.active .logo a {
  text-decoration: none;
  background: url('/img/theme/png/logo-mini-active.png');
}
.instruments .inner .section > div > div > .demo.active .play a {
  text-decoration: none;
  background: url('/img/theme/png/instrument-play-active.png');
}
.instruments .inner .section > div > div > .demo.active .play a:hover {
  background: url('/img/theme/png/instrument-play-hover.png');
}
.instruments .inner .section > div > div > .demo.active .waveform {
  background-image: url('/img/theme/png/waveform-instruments-active.png');
}
/* interest */
.interest {
  margin: 0;
  padding: 0;
  list-style: none;
}
.interest:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.interest li {
  float: left;
  line-height: 16px;
  padding-right: 7px;
}
@media (min-width: 1000px) {
  .interest li {
    padding-right: 15px;
  }
}
.interest li i {
  vertical-align: middle;
}
.interest li span {
  line-height: 18px;
  vertical-align: middle;
  text-transform: uppercase;
}
.interest.small li {
  color: #888;
  font-size: 14px;
}
@media (max-width: 599px) {
  .interest.small li {
    font-size: 10px;
  }
}
.interest.small li span {
  padding-left: 5px;
  font-size: 11px;
}
.interest.big li {
  color: #888;
  font-size: 16px;
}
.interest.big li span {
  font-size: 16px;
  padding-left: 6px;
  padding-right: 20px;
}
.interest.big li:last-child span {
  padding-right: 0;
}
/* itemlist-collection */
.itemlist-collection {
  position: relative;
  margin-bottom: 20px;
}
.itemlist-collection h2 {
  font-size: 14px;
  line-height: 1;
  margin: 0 0 19px 0;
  padding: 0;
  text-transform: uppercase;
  float: left;
}
.itemlist-collection p {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  float: right;
  position: relative;
  top: -3px;
}
.itemlist-collection p a {
  color: #888;
  font-size: 14px;
  line-height: 1.429;
  text-decoration: none !important;
  font-weight: 400;
}
@media (max-width: 599px) {
  .itemlist-collection p a {
    font-size: 10px;
  }
}
.itemlist-collection p a:hover {
  color: #0ec5ff;
}
.itemlist-collection ul {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 40px));
  grid-gap: 11px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.itemlist-collection ul li {
  position: relative;
}
.itemlist-collection ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.itemlist-collection ul li a img.avatar {
  width: 100%;
  height: 100%;
}
@media (min-width: 1300px) {
  .itemlist-collection ul li a img.avatar {
    width: 40px;
    height: 40px;
  }
}
.itemlist-collection ul li a i.online-indicator {
  position: absolute;
  top: 0;
  left: 0;
}
.itemlist-collection.itemlist-collection-70 ul li a {
  width: 70px;
  height: 70px;
  text-decoration: none;
}
.itemlist-collection.itemlist-collection-70 ul li a img.avatar {
  width: 70px;
  height: 70px;
}
.itemlist-context {
  position: relative;
}
.itemlist-context > h2 {
  font-size: 16px;
  line-height: 1;
  margin: 0 0 19px 0;
  padding: 0;
  text-transform: uppercase;
  float: left;
}
.itemlist-context > p {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  float: right;
  position: relative;
  top: -3px;
}
.itemlist-context > p a {
  color: #888;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.429;
  text-decoration: none !important;
}
@media (max-width: 599px) {
  .itemlist-context > p a {
    font-size: 10px;
  }
}
.itemlist-context > p a:hover,
.itemlist-context > p a:focus,
.itemlist-context > p a:active {
  color: #0ec5ff;
}
.itemlist-context > ul {
  clear: both;
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-bottom: 14px;
}
.itemlist-context > ul:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.itemlist-context > ul > li {
  padding-bottom: 25px;
  position: relative;
}
.itemlist-context > ul > li > a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  text-decoration: none;
  font-weight: 400;
}
@media (min-width: 1300px) {
  .itemlist-context > ul > li > a {
    width: 70px;
    height: 70px;
  }
}
.itemlist-context > ul > li > a img {
  width: 50px;
  height: 50px;
  box-shadow: 0 0.5px 1px 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 1300px) {
  .itemlist-context > ul > li > a img {
    width: 70px;
    height: 70px;
  }
}
.itemlist-context > ul > li > a span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-image: url('/img/theme/png/play-40.png');
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1300px) {
  .itemlist-context > ul > li > a span {
    width: 70px;
    height: 70px;
  }
}
.itemlist-context > ul > li > a span.play {
  background-image: url('/img/theme/png/play-40-active.png');
}
.itemlist-context > ul > li > a span.pause {
  background-image: url('/img/theme/png/pause-40-active.png');
}
.itemlist-context > ul > li > div {
  padding-left: 60px;
}
@media (min-width: 1300px) {
  .itemlist-context > ul > li > div {
    padding-left: 85px;
  }
}
.itemlist-context > ul > li > div h2 {
  font-size: 14px;
  text-transform: none;
  font-weight: 600;
  margin: 0 0 3px 0;
}
.itemlist-context > ul > li > div h2 a {
  text-decoration: none;
}
.itemlist-context > ul > li > div p {
  font-size: 14px;
  color: #888;
  margin: 0 0 13px 0;
  position: relative;
  top: -3px;
}
@media (max-width: 599px) {
  .itemlist-context > ul > li > div p {
    font-size: 10px;
  }
}
.itemlist-context > ul > li > div p a {
  font-weight: 400;
  text-decoration: none;
}
.itemlist-context > ul > li > div ul {
  margin: 0;
}
/* login */
.login {
  float: right;
  padding: 18px 0 0 0;
}
.login a {
  text-decoration: none;
  color: #0ec5ff;
  font-size: 14px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .login a {
    font-size: 10px;
  }
}
/* missing-questions */
.missing-questions {
  padding: 100px 0 60px 0;
}
.missing-questions h3 {
  color: #282828;
  font-size: 22px;
  line-height: 1;
  margin: 0 0 19px 0;
  padding: 0;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .missing-questions h3 {
    font-size: 18px;
  }
}
/* nav */
nav ul {
  list-style: none;
}
nav.content {
  margin: 6px 0 40px;
}
nav.content ul {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-size: 16px;
  color: #888;
}
nav.content ul:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
nav.content ul li {
  margin-bottom: 18px;
  float: left;
  margin-right: 36px;
}
nav.content ul li a {
  text-decoration: none;
}
nav.content ul li a:hover,
nav.content ul li a:active,
nav.content ul li a:focus {
  color: #0ec5ff;
}
nav.content ul li.selected a {
  color: #303030;
  text-decoration: none;
}
nav.filter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 28px;
}
@media (max-width: 599px) {
  nav.filter {
    justify-content: flex-end;
  }
}
nav.filter h2 {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: -12px;
}
@media (max-width: 599px) {
  nav.filter h2 {
    font-size: 12px;
  }
}
nav.filter h2 .icon {
  position: relative;
  top: 6px;
  margin-right: 10px;
}
nav.filter ul {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 599px) {
  nav.filter ul {
    margin: 0;
  }
}
@media (max-width: 599px) {
  nav.filter ul li a {
    display: inline-block;
    background: #303030;
    color: #fff;
    border: 1px transparent solid;
    text-decoration: none !important;
    text-transform: uppercase;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 400;
    border-radius: 3px;
    margin: 0;
    padding: 6px 11px;
    text-align: center;
    -moz-box-sizing: padding-box;
    box-sizing: border-box;
    outline: none;
    background-color: #888;
    color: #fff !important;
  }
  nav.filter ul li a.big {
    font-size: 16px;
    padding: 12px 14px 13px;
  }
  nav.filter ul li a.secondary {
    background: #888;
  }
  nav.filter ul li a.app {
    text-transform: none;
    padding: 7px 24px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    background-color: #0ec5ff;
  }
  nav.filter ul li a.app:hover,
  nav.filter ul li a.app:focus,
  nav.filter ul li a.app:active {
    color: #fff !important;
  }
  nav.filter ul li a.blue {
    color: #fff ! important;
    background-color: #0ec5ff;
    font-weight: 600;
  }
  nav.filter ul li a.error {
    background: #f16b1c;
  }
  nav.filter ul li a.warning {
    background: #f16b1c;
  }
  nav.filter ul li a.failed,
  nav.filter ul li a.failed:focus {
    background: red;
    pointer-events: none;
  }
  nav.filter ul li a.working,
  nav.filter ul li a.working:hover {
    color: transparent !important;
    position: relative !important;
    pointer-events: none;
    background-image: url('/img/theme/svg/default/Loading-animation.svg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  nav.filter ul li a.working i,
  nav.filter ul li a.working:hover i {
    visibility: hidden;
  }
  nav.filter ul li a.iconbutton {
    padding: 0;
  }
  nav.filter ul li a.iconbutton .icon {
    height: 33px;
  }
  nav.filter ul li a.iconbutton.withtext {
    position: relative;
    padding: 9px 14px 9px 40px;
  }
  nav.filter ul li a.iconbutton.withtext .icon {
    margin-right: 10px;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 2px;
  }
  nav.filter ul li a.selected,
  nav.filter ul li a.active {
    background: #f16b1c;
    color: #fff;
    cursor: pointer;
  }
  nav.filter ul li a.action.big {
    background: #fff;
    border-bottom: 1px solid #d2d2d2;
    width: 54px;
    height: 37px;
    position: relative;
    padding: 0;
    margin: 0;
    line-height: 0;
  }
  nav.filter ul li a.action.big:hover,
  nav.filter ul li a.action.big:active,
  nav.filter ul li a.action.big:focus {
    cursor: pointer;
  }
  nav.filter ul li a.action.big i {
    position: absolute;
    left: 16px;
    top: 8px;
  }
  nav.filter ul li a.action.small {
    -moz-box-sizing: padding-box;
    box-sizing: border-box;
    border-radius: 3px;
    background: #282828;
    color: #fff;
    padding: 3px 12px 4px 12px;
    margin-right: 0;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 15px;
    vertical-align: middle;
  }
  nav.filter ul li a.action.small i {
    position: relative;
    top: 2px;
  }
  nav.filter ul li a.action.small.selected {
    background: #f16b1c;
  }
  nav.filter ul li a.double-action {
    /*
    &:hover,
    &:focus,
    &:active {
      background: @black;
      color: @white;
      span.state-0 {
        display: none;
      }
      span.state-1 {
        display: block;
      }
    }
    */
  }
  nav.filter ul li a.double-action.active {
    color: #fff;
    cursor: pointer;
  }
  nav.filter ul li a.double-action span.state-1 {
    display: none;
  }
  nav.filter ul li a.follow {
    min-width: 7em;
    text-align: center;
  }
  nav.filter ul li a.show-loader {
    position: relative;
  }
  nav.filter ul li a.show-loader i.loader {
    display: none;
  }
  nav.filter ul li a.show-loader i.loader.loading {
    position: absolute;
    left: 50%;
    top: 6px;
    margin-left: -10px;
    display: block;
  }
}
@media (max-width: 599px) and (max-width: 599px) {
  nav.filter ul li a {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
@media (max-width: 599px) and (max-width: 699px) {
  nav.filter ul li a {
    padding: 3px;
    font-size: 10px;
  }
}
nav.filter ul:first-child li,
nav.filter ul.intervals li {
  padding: 0 23px 0 0;
}
@media (max-width: 599px) {
  nav.filter ul:first-child li,
  nav.filter ul.intervals li {
    padding: 3px;
  }
}
@media (max-width: 679px) {
  nav.filter ul.filter-sort {
    display: none;
  }
}
nav.filter ul li {
  padding: 0 0 0 23px;
}
nav.filter ul li.selected a {
  color: white !important;
  text-decoration: none;
}
nav.filter ul li.selected.reversed {
  transform: scaleX(-1);
  padding: 0 23px 0 0;
}
nav.filter ul li a {
  color: #848484;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 0.875;
}
@media (max-width: 699px) {
  nav.filter ul li a {
    font-size: 10px;
  }
}
@media (max-width: 599px) {
  nav.filter ul li a .pill {
    display: none;
  }
}
nav.filter input {
  float: right;
}
nav.filter select {
  float: left;
}
nav.preferences ul {
  margin: 0;
  padding: 0;
}
nav.preferences ul li {
  padding: 0 0 19px 0;
}
nav.preferences ul li a {
  text-decoration: none;
  display: inline-block;
}
nav.preferences ul li a:hover,
nav.preferences ul li a:focus,
nav.preferences ul li a:active {
  color: #0ec5ff;
}
nav.preferences ul li.selected a,
nav.preferences ul li.active a {
  font-weight: 700;
  color: #0ec5ff;
}
nav.profile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav.profile ul li {
  padding: 0 0 0 0;
  float: left;
  font-weight: 600;
}
@media (min-width: 600px) {
  nav.profile ul li {
    padding: 0 12px 0 0;
  }
}
@media (min-width: 700px) {
  nav.profile ul li {
    padding: 0 10px 0 0;
  }
}
@media (min-width: 800px) {
  nav.profile ul li {
    padding: 0 20px 0 0;
  }
}
@media (max-width: 599px) {
  nav.profile ul li {
    max-height: 22px;
  }
}
nav.profile ul li.selected a,
nav.profile ul li a.selected {
  text-decoration: none;
}
@media (max-width: 599px) {
  nav.profile ul li.selected a,
  nav.profile ul li a.selected {
    border-bottom: 0;
  }
}
nav.profile ul li a {
  display: block;
  font-size: 12px;
  line-height: 0.875;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  padding: 6px;
}
@media (min-width: 700px) {
  nav.profile ul li a {
    font-size: 14px;
    padding: 6px 12px;
  }
}
nav.profile ul li a:hover,
nav.profile ul li a:active,
nav.profile ul li a:focus {
  color: white !important;
}
nav.profile.light li {
  color: #fff;
}
nav.profile.light li.selected a {
  text-decoration: none;
  border-bottom: 6px solid #0ec5ff;
}
nav.profile.light li a {
  color: #fff;
  text-decoration: none;
}
nav.profile.light li a:hover,
nav.profile.light li a:active,
nav.profile.light li a:focus {
  color: #0ec5ff;
}
/* notification */
.notification {
  position: relative;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.43);
  width: 250px;
}
@media (min-width: 340px) {
  .notification {
    width: 300px;
  }
}
@media (max-width: 599px) {
  .notification {
    width: initial;
  }
  .notification .checkbox-container {
    display: none;
  }
  .notification input[type=submit],
  .notification a.button.fullwidth {
    padding: 10px;
  }
}
.notification p.helplink a {
  white-space: nowrap;
}
.notification .tail:after {
  background: #282828;
}
.notification nav {
  background: #282828;
}
.notification nav ul {
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid #303030;
}
.notification nav ul:first-child {
  border-top: none;
}
.notification nav ul li a {
  font-size: 14px;
  text-decoration: none;
  padding: 0 20px;
  display: block;
  line-height: 32px;
}
.notification nav ul li a:hover,
.notification nav ul li a:focus,
.notification nav ul li a:active,
.notification nav ul li a.selected,
.notification nav ul li a.active {
  color: #303030;
  background: #eee;
}
.notification nav ul li.selected a,
.notification nav ul li.active a {
  color: #303030;
  background: #eee;
  text-decoration: none;
}
.notification .form {
  background: #282828;
  padding: 15px 19px;
}
.notification .form .tail:after {
  background: #282828;
}
@media (max-width: 599px) {
  .notification .form input[type=text],
  .notification .form input[type=password] {
    margin-bottom: 10px;
  }
}
.notification .text {
  background: #404040;
  padding: 15px 19px;
}
.notification h2 {
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 18px;
}
@media (max-width: 599px) {
  .notification h2 {
    font-size: 12px;
  }
}
.notification h2 i {
  position: relative;
  top: 2px;
  margin-right: 13px;
}
.notification a.close {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 19px;
  top: 17px;
}
.notification p {
  font-size: 14px;
  line-height: 1.429;
  margin: 0 0 6px;
}
@media (max-width: 599px) {
  .notification p {
    font-size: 10px;
  }
}
.notification input[type=text] {
  margin-bottom: 16px;
}
.notification .helplink {
  text-align: right;
  font-size: 12px;
  color: #888;
}
.notification .helplink a {
  text-decoration: none;
}
.notification .button.fullwidth {
  margin-bottom: 15px;
}
.notification form .checkbox-container {
  margin: 15px 0;
}
.notification .tail {
  position: absolute;
  right: 12px;
  top: -9px;
  height: 9px;
  width: 9px;
  overflow: hidden;
  z-index: 10000;
}
.notification .tail:after {
  content: "";
  display: block;
  height: 9px;
  width: 9px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.43);
  transform: rotate(45deg);
  position: relative;
  top: 7px;
}
.notification ul.social {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.notification ul.social:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.notification ul.social li {
  float: left;
  width: 58px;
  margin-right: 10px;
}
.notification ul.social li:last-child {
  margin-right: 0;
}
.notification .iconbutton {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.notification .iconbutton.last {
  margin-right: 0;
}
.notification .iconbutton .icon {
  width: 34px;
  height: 18px;
  background-size: contain;
  background-position: center;
}
.notification.search-results {
  background: #fff;
}
nav.site-header .notification nav ul li a.selected {
  color: inherit;
  background: inherit;
  font-weight: 600;
}
/* oauth-connect */
.oauth-connect section {
  margin-bottom: 60px;
}
.oauth-connect .buttons {
  float: right;
}
.oauth-connect .buttons .button {
  width: 160px;
  margin-left: 50px;
}
/* outgoing-invitation */
section.outgoing-invitation {
  list-style-type: none;
  margin-bottom: 70px;
}
section.outgoing-invitation div.recipients {
  margin-left: 154px;
}
section.outgoing-invitation div.recipients table {
  margin-bottom: 10px;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 7px;
  border-bottom: 1px solid #eee;
}
section.outgoing-invitation div.recipients table td {
  border-top: 1px solid #eee;
  padding: 13px 14px 14px 15px;
}
section.outgoing-invitation div.recipients table td.disinvite {
  width: 18px;
}
section.outgoing-invitation div.recipients table td.disinvite i {
  position: relative;
  top: 3px;
}
section.outgoing-invitation h3 {
  font-size: 24px;
  color: #888;
  text-transform: none;
  padding: 25px 0 0 0;
  margin-bottom: 17px;
}
@media (max-width: 599px) {
  section.outgoing-invitation h3 {
    font-size: 20px;
  }
}
section.outgoing-invitation h3 a {
  text-decoration: none;
}
section.outgoing-invitation .cover {
  width: 124px;
  float: left;
  position: relative;
}
section.outgoing-invitation footer {
  margin-top: 20px;
  clear: both;
}
section.outgoing-invitation footer .button {
  float: right;
}
/* partnerbox */
.partnerbox {
  background-color: #242424;
  text-align: center;
  padding: 50px 0 0px;
}
@media (min-width: 710px) {
  .partnerbox .partnerbox-podcast {
    border-left: 1px solid #282828;
  }
}
.partnerbox h3 {
  margin-bottom: 5px;
}
.partnerbox h4 {
  font-size: 18px;
  margin-bottom: 0.75em;
}
@media (max-width: 599px) {
  .partnerbox h4 {
    font-size: 14px;
  }
}
.partnerbox div {
  vertical-align: top;
  margin: auto;
  display: inline-block;
  margin: 0 0 50px;
  padding: 0 20px;
}
.partnerbox div p {
  margin: 5px;
}
.partnerbox div .logo {
  background: url('/img/theme/png/logo-dark.png') no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.partnerbox div .podcast {
  font-size: 30px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .partnerbox div .podcast {
    font-size: 20px;
  }
}
.partnerbox div a {
  text-decoration: none;
}
.partnerbox .right {
  border-left: 1px solid #282828;
}
/* pill */
.pill {
  text-align: center;
  display: inline-block;
  background: #bbbbbb;
  color: #1a1a1a;
  font-size: 8px;
  height: 10px;
  min-width: 4px;
  line-height: 10px;
  border-radius: 10px;
  padding: 1px 4px;
  margin-left: 4px;
  vertical-align: text-top;
  opacity: 0.9;
  position: relative;
  bottom: 1px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
/* play */
@-moz-keyframes buffering {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes buffering {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-ms-keyframes buffering {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes buffering {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@keyframes buffering {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes wind {
  0% {
    left: 0%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}
@-webkit-keyframes wind {
  0% {
    left: 0%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}
@-moz-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.play {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.play.cover.big {
  background-image: url('/img/theme/svg/default/TrackCoverBigPlay.svg');
}
.play.cover.big.buffering {
  background-image: url('/img/theme/svg/default/TrackCoverBigPlayInit.svg');
}
.play.cover.big.playing {
  background-image: url('/img/theme/svg/default/TrackCoverBigPlayPlaying.svg');
}
.play.cover.big.pausing {
  background-image: url('/img/theme/svg/default/TrackCoverBigPlayPaused.svg');
}
.play.cover.middle {
  background-image: url('/img/theme/svg/default/TrackCoverMidPlay.svg');
}
.play.cover.middle.buffering {
  background-image: url('/img/theme/svg/default/TrackCoverMidPlayInit.svg');
}
.play.cover.middle.playing {
  background-image: url('/img/theme/svg/default/TrackCoverMidPlayPlaying.svg');
}
.play.cover.middle.pausing {
  background-image: url('/img/theme/svg/default/TrackCoverMidPlayPaused.svg');
}
.play.track,
.play.sample {
  background-image: url('/img/theme/svg/default/TrackPlay-xs.svg');
}
@media (min-width: 500px) {
  .play.track,
  .play.sample {
    background-image: url('/img/theme/svg/default/TrackPlay.svg');
  }
}
.play.track.buffering,
.play.sample.buffering {
  background-image: url('/img/theme/svg/default/TrackPlayInit-xs.svg');
}
@media (min-width: 500px) {
  .play.track.buffering,
  .play.sample.buffering {
    background-image: url('/img/theme/svg/default/TrackPlayInit.svg');
  }
}
.play.track.playing,
.play.sample.playing {
  background-image: url('/img/theme/svg/default/TrackPlayPlaying-xs.svg');
}
@media (min-width: 500px) {
  .play.track.playing,
  .play.sample.playing {
    background-image: url('/img/theme/svg/default/TrackPlayPlaying.svg');
  }
}
.play.track.pausing,
.play.sample.pausing {
  background-image: url('/img/theme/svg/default/TrackPlayPaused-xs.svg');
}
@media (min-width: 500px) {
  .play.track.pausing,
  .play.sample.pausing {
    background-image: url('/img/theme/svg/default/TrackPlayPaused.svg');
  }
}
.play.global {
  background-image: url('/img/theme/svg/default/GlobalPlay.svg');
}
.play.global.buffering {
  background-image: url('/img/theme/svg/default/GlobalPlayInit.svg');
}
.play.global.playing {
  background-image: url('/img/theme/svg/default/GlobalPlayPlaying.svg');
}
.play.global.playing.blue,
.tracklist .selected .play.global.playing {
  background-image: url('/img/theme/svg/default/16d6ff/GlobalPlayPlaying.svg');
}
.play.global.pausing {
  background-image: url('/img/theme/svg/default/GlobalPlayPaused.svg');
}
.play.global.pausing.blue,
.tracklist .selected .play.global.pausing {
  background-image: url('/img/theme/svg/default/16d6ff/GlobalPlayPaused.svg');
}
.play.global.disabled {
  background-image: url('/img/theme/svg/default/GlobalPlayDisabled.svg');
}
.play.content {
  background-image: url('/img/theme/svg/default/ContentPlay.svg');
}
.play.content.buffering {
  background-image: url('/img/theme/svg/default/ContentPlayInit.svg');
}
.play.content.playing {
  background-image: url('/img/theme/svg/default/ContentPlayPlaying.svg');
}
.play.content.pausing {
  background-image: url('/img/theme/svg/default/ContentPlayPaused.svg');
}
.play.buffering {
  -moz-animation-name: buffering;
  -moz-animation-duration: 1.3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -webkit-animation-name: buffering;
  -webkit-animation-duration: 1.3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -ms-animation-name: buffering;
  -ms-animation-duration: 1.3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: buffering;
  -o-animation-duration: 1.3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  animation-name: buffering;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* playbuttons */
.playbuttons {
  float: left;
  margin: 15px 16px 0 31px;
  padding: 0;
  list-style: none;
}
.playbuttons li {
  float: left;
}
.playbuttons li a {
  width: 26px;
  height: 30px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  text-decoration: none;
}
.playbuttons li a.rewind {
  background-image: url('/img/theme/svg/player/global/previous.svg');
}
.playbuttons li a.forward {
  background-image: url('/img/theme/svg/player/global/next.svg');
}
.playbuttons li.selected a.rewind,
.playbuttons li.selected a:active.rewind {
  background-image: url('/img/theme/svg/player/global/previous-selected.svg');
}
.playbuttons li.selected a.forward,
.playbuttons li.selected a:active.forward {
  background-image: url('/img/theme/svg/player/global/next-selected.svg');
}
.playbuttons li.disabled a.rewind {
  background-image: url('/img/theme/svg/player/global/previous-disabled.svg');
}
.playbuttons li.disabled a.forward {
  background-image: url('/img/theme/svg/player/global/next-disabled.svg');
}
.player.global {
  overflow: hidden;
  background: #1a1a1a;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  z-index: 1000;
}
@media (min-width: 710px) {
  .player.global {
    height: 60px;
  }
}
.player.global div.cover img {
  width: 60px;
  height: 60px;
  display: block;
}
@media (max-width: 599px) {
  .player.global div.cover img {
    width: 40px;
    height: 40px;
  }
}
.player.global ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.player.global .inner {
  max-width: 1200px;
  border-left: 10px solid #282828;
  border-right: 10px solid #282828;
  margin: auto;
  position: relative;
}
.player.global .inner .cover {
  float: left;
}
.player.global .inner .playbuttons {
  float: left;
  margin: 15px 15px 0 15px;
}
@media (max-width: 699px) {
  .player.global .inner {
    border: 0;
  }
  .player.global .inner .playbuttons li {
    background-color: #333;
    min-width: 35px;
    margin: 0 0 10px 5px;
    padding-left: 10px;
    border-radius: 3px;
  }
  .player.global .inner .actions {
    margin: 0;
  }
}
.player.global .inner .name {
  float: left;
  font-size: 14px;
  color: #eee;
  width: 100px;
  margin-top: 10px;
}
@media (max-width: 599px) {
  .player.global .inner .name {
    font-size: 10px;
  }
}
@media (min-width: 710px) {
  .player.global .inner .name {
    height: 195px;
  }
}
@media (max-width: 699px) {
  .player.global .inner .name {
    font-size: 10px;
  }
}
.player.global .inner .name a {
  text-decoration: none;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}
.player.global .inner .name span {
  display: block;
  color: #eee;
  white-space: nowrap;
  position: relative;
}
.player.global .inner .name span a {
  position: absolute;
  left: 20px;
  max-width: 100px;
  top: 0;
  text-decoration: none;
}
.player.global .inner .position {
  line-height: 14px;
  font-size: 14px;
  position: absolute;
  left: 10px;
  top: 70px;
  right: 10px;
}
@media (max-width: 599px) {
  .player.global .inner .position {
    font-size: 10px;
  }
}
@media (min-width: 710px) {
  .player.global .inner .position {
    position: absolute;
    left: 310px;
    top: 23px;
    right: 245px;
  }
}
@media (max-width: 699px) {
  .player.global .inner .position {
    font-size: 10px;
  }
}
.player.global .inner .position .current {
  color: #eee;
  position: absolute;
  left: 0;
  top: 0;
}
.player.global .inner .position .all {
  color: #eee;
  position: absolute;
  right: 0;
  top: 0;
}
.player.global .inner .position .progress {
  height: 10px;
  margin: 2px 9px;
  background: #404040;
  margin: 2px 50px;
}
.player.global .inner .position .progress > div {
  background: #0ec5ff;
  height: 10px;
}
.player.global .inner .actions {
  clear: both;
  top: 30px;
  position: relative;
}
@media (min-width: 560px) {
  .player.global .inner .actions {
    float: right;
    top: -50px;
  }
}
@media (min-width: 710px) {
  .player.global .inner .actions {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
.player.global .inner .actions li {
  float: left;
  padding-left: 2px;
}
.player.global .inner .actions li:last-child {
  padding-left: 10px;
}
.player.global .inner .actions li:last-child a {
  width: 44px;
  text-decoration: none;
}
.player.global .inner .actions li a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #888;
}
@media (max-width: 599px) {
  .player.global .inner .actions li a {
    font-size: 10px;
  }
}
.player.global .inner .actions li a.disabled {
  opacity: 0.3;
  cursor: default;
}
.player.global .inner .actions li a .icon {
  width: 40px;
  height: 40px;
}
@media (max-width: 599px) {
  .player.global .inner ul.playbuttons,
  .player.global .inner .name {
    margin-top: 5px;
  }
  .player.global .inner ul.playbuttons li,
  .player.global .inner .name li {
    margin-bottom: 5px;
  }
  .player.global .inner ul.actions {
    display: none;
  }
  .player.global .inner div.position {
    display: none;
  }
}
/* profile */
.profile .bg {
  display: none;
  width: 200%;
  margin-left: -100%;
  margin-top: -100%;
  opacity: 0.3;
}
/* show-more */
.show-more {
  color: #888;
  text-transform: uppercase;
  font-size: 18px;
  text-align: center;
}
@media (max-width: 599px) {
  .show-more {
    font-size: 14px;
  }
}
.show-more a {
  background-position: right center;
  padding-right: 27px;
  background-repeat: no-repeat;
  text-decoration: none;
  font-weight: normal;
}
.show-more.more a {
  background-image: url('/img/theme/png/show-more.png');
}
.show-more.less a {
  background-image: url('/img/theme/png/show-less.png');
}
.show-more.forward a {
  background-image: url('/img/theme/png/show-forward.png');
}
/* sign-up */
.sign-up {
  padding: 0 0 20px 0;
}
.sign-up h2 {
  font-size: 24px;
}
@media (max-width: 599px) {
  .sign-up h2 {
    font-size: 20px;
  }
}
.sign-up .services {
  margin-bottom: 12px;
}
.sign-up .services .button {
  margin-right: 20px;
}
.sign-up .userdata label {
  display: block;
  margin-bottom: 3px;
}
.sign-up input[type=submit] {
  margin-top: 15px;
}
.sign-up .hint {
  font-size: 14px;
}
@media (max-width: 599px) {
  .sign-up .hint {
    font-size: 10px;
  }
}
.sign-up-create-account label {
  margin-bottom: 3px;
}
.sign-up-create-account .checkbox-container label {
  display: flex;
}
.sign-up-create-account > div:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.sign-up-create-account > div > div {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .sign-up-create-account > div > div {
    float: left;
    width: 50%;
  }
  .sign-up-create-account > div > div:first-child {
    padding-right: 25px;
  }
  .sign-up-create-account > div > div:last-child {
    padding-left: 25px;
  }
  .sign-up-create-account > div > div:only-child {
    padding: 0 25px 0 0;
  }
}
.sign-up-create-account > div p {
  text-align: right;
}
.sign-up-create-account-options > div {
  float: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}
.sign-up-create-account .checkbox-container {
  padding-left: 0;
  padding-right: 0;
}
/* site-header */
.site-header {
  background: #000;
  padding: 0 0 2px 0;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  min-height: 54px;
}
.site-header.moderator {
  background: #f16b1c;
}
.site-header .inner {
  position: relative;
  max-width: 1200px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: auto;
}
.site-header .inner:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
@media (max-width: 599px) {
  .site-header .inner {
    border: 0;
  }
}
.site-header .inner a.working h1 {
  background-image: url('/img/theme/svg/default/Loading-animation.svg');
}
.site-header .inner h1 {
  text-indent: -9999px;
  height: 28px;
  width: 28px;
  margin: 13px 0 0 0;
  background-image: url('/img/theme/svg/logo-site-header.svg');
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}
.site-header .inner .site-sections {
  color: white;
  font-size: 16px;
  float: left;
  margin: 17px 22px 0 29px;
  width: auto;
  padding: 0;
  list-style: none;
}
.site-header .inner .site-sections li {
  float: left;
  padding: 0 5px;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}
@media (min-width: 420px) {
  .site-header .inner .site-sections li {
    padding: 0 18px;
    margin-bottom: 0;
  }
}
@media (max-width: 539px) {
  .site-header .inner .site-sections li.site-sections-app {
    display: none;
  }
}
.site-header .inner .site-sections li a {
  position: relative;
  text-decoration: none;
  color: #eee;
}
.site-header .inner .site-sections li a:hover,
.site-header .inner .site-sections li a:focus,
.site-header .inner .site-sections li a:active {
  color: white;
}
.site-header .inner .site-sections li a.button {
  position: relative;
  top: -7px;
}
.site-header .inner .site-sections li a span.unread-marker {
  top: 3px;
}
.site-header .inner .site-sections li a.working {
  color: transparent !important;
  pointer-events: none;
  background-image: url('/img/theme/svg/default/Loading-animation.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.site-header .inner .site-sections li span.beta {
  position: relative;
  top: -10px;
  background-color: #f16b1c;
  display: inline-block;
  padding: 1px 2px;
  margin: 2px;
  font-size: 8px;
  text-transform: uppercase;
  border-radius: 3px;
}
.site-header .inner .site-sections li.selected a {
  color: white;
  text-decoration: none;
}
.site-header .inner .site-sections li .button:hover,
.site-header .inner .site-sections li .button:focus,
.site-header .inner .site-sections li .button:active {
  color: white;
}
@media (max-width: 799px) {
  .site-header .inner .searchForm {
    display: block;
    position: absolute;
    right: 70px;
    width: 35px;
    padding-left: 0;
  }
  .site-header .inner .searchForm input {
    border-right-width: 0 !important;
    background-position: center !important;
  }
  .site-header .inner .searchForm.full {
    right: 0;
    left: 0;
    width: auto;
  }
  .site-header .inner .searchForm.full input {
    border-right-width: 14px !important;
    background-position: right center !important;
  }
}
@media (max-width: 539px) {
  .site-header .inner .searchForm {
    right: 50px;
  }
}
@media (min-width: 800px) {
  .site-header .inner .searchForm {
    float: left;
    width: 200px;
  }
}
@media (min-width: 900px) {
  .site-header .inner .searchForm {
    width: 300px;
  }
}
@media (min-width: 1000px) {
  .site-header .inner .searchForm {
    width: 400px;
  }
}
.site-header .inner .searchForm input[type=text] {
  border-radius: 5px;
  border: none;
  border-right: 14px solid #404040;
  outline: none !important;
  font-size: 16px;
  line-height: 1.5;
  padding: 6px 30px 6px 10px;
  margin: 10px 0 4px 0;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  background: #404040 url('/img/theme/svg/color/7f7f7f/search.svg') no-repeat right center;
  /*
&:focus {
  background-color: @white;
  border-color: @white;
  color: @black;
}
*/
}
.site-header .inner ::-webkit-input-placeholder,
.site-header .inner :-moz-placeholder,
.site-header .inner ::-moz-placeholder,
.site-header .inner :-ms-input-placeholder {
  color: #888;
}
.site-header .inner .tracktitle {
  float: left;
  color: #eee;
  font-size: 14px;
  margin: 20px 0 0 0;
}
@media (max-width: 599px) {
  .site-header .inner .tracktitle {
    font-size: 10px;
  }
}
.site-header .inner .tracktitle a {
  text-decoration: none;
}
.site-header .inner .tracktitle .trackname {
  color: #eee;
}
.site-header .inner .tracktitle .trackname:hover,
.site-header .inner .tracktitle .trackname:focus,
.site-header .inner .tracktitle .trackname:active {
  color: #0ec5ff;
}
.site-header .inner .tracktitle .artistname {
  color: #eee;
}
.site-header .inner .tracktitle .artistname:hover,
.site-header .inner .tracktitle .artistname:focus,
.site-header .inner .tracktitle .artistname:active {
  color: #0ec5ff;
}
.site-header .inner .messages {
  float: left;
  margin: 11px 15px 0 44px;
  position: relative;
}
.site-header .inner .messages > a {
  width: 36px;
  height: 36px;
  display: inline-block;
  background: url('/img/theme/svg/25/megaphone.svg') no-repeat center;
  position: relative;
  text-decoration: none;
}
.site-header .inner .messages > a .pill {
  position: absolute;
  right: 0;
  top: 0;
}
.site-header .inner .messages ul {
  display: none;
}
.site-header .inner .messages.open ul {
  display: block;
  position: absolute;
  left: 0;
  top: 100px;
  padding: 0;
  margin: 0;
  z-index: 1000;
}
.site-header .inner .profilenav {
  position: absolute;
  right: 0;
  top: 13px;
}
@media (min-width: 540px) {
  .site-header .inner .profilenav {
    right: 15px;
  }
}
.site-header .inner .profilenav > span {
  display: none;
}
@media (min-width: 799px) {
  .site-header .inner .profilenav > span {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    color: #d2d2d2;
    font-size: 16px;
    text-decoration: none;
  }
}
.site-header .inner .profilenav > a {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  vertical-align: middle;
}
.site-header .inner .profilenav > a img.avatar {
  width: 100%;
  height: 100%;
}
.site-header .inner .profilenav img.badge {
  bottom: 0;
  right: 0;
}
.site-header .inner .profilenav ul {
  display: none;
  background-color: #fff;
}
.site-header .inner .profilenav.open ul {
  display: block;
  position: absolute;
  left: 0;
  top: 100px;
  padding: 0;
  margin: 0;
  z-index: 1000;
}
.site-header .inner .login {
  font-size: 18px;
  line-height: 18px;
  color: #0ec5ff;
  text-decoration: none;
}
@media (max-width: 599px) {
  .site-header .inner .login {
    font-size: 14px;
  }
}
@media (max-width: 599px) {
  .site-header {
    min-height: 1px;
  }
  .site-header .inner ul.site-sections {
    margin-top: 5px;
  }
  .site-header .inner ul.site-sections li {
    margin-bottom: 5px;
  }
  .site-header .inner h1 {
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    background-size: cover;
    margin: 2px !important;
  }
  .site-header .inner form.searchForm input[type=text] {
    padding: 0px 20px 0px 10px;
    margin: 5px 0 0 15px;
    background: transparent url('/img/theme/svg/color/ffffff/search.svg') no-repeat right center;
    -moz-box-sizing: padding-box;
    box-sizing: border-box;
  }
  .site-header .inner form.searchForm input[type=text]::placeholder {
    opacity: 0;
  }
  .site-header .inner form.searchForm input[type=text]:focus {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    height: 32px;
    border-radius: 0;
  }
  .site-header .inner form.searchForm input[type=text]:focus::placeholder {
    opacity: 1;
  }
  .site-header .inner .profilenav.opener {
    top: 5px;
    right: 10px;
  }
  .site-header .inner .profilenav.opener img.avatar,
  .site-header .inner .profilenav.opener a.avatar {
    width: 22px;
    height: 22px;
  }
  .site-header .inner ul.site-sections li a {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}
.site-header .inbox.opener {
  position: absolute;
  top: 11px;
  right: 62px;
}
@media (max-width: 599px) {
  .site-header .inbox.opener {
    display: none;
  }
}
.site-header .inbox.opener i {
  width: 35px;
  height: 35px;
  background-size: 35px 35px;
}
.site-header .inbox.opener .pill {
  width: 14px;
  height: 14px;
  background-color: #0ec5ff;
  min-width: 1.3em;
  text-align: center;
  position: absolute;
  left: -8px;
  bottom: 21px;
  padding: 0px;
  font-size: 9px;
  line-height: 13px;
  color: white;
  font-weight: 600;
}
.site-header .inbox.opener .pill.hidden {
  display: none;
}
.site-header .notification.inbox {
  width: 25vw;
}
.site-header .inner-hidden {
  right: 15px;
  top: 50px;
  position: absolute;
  /*
    .notification {
      position: fixed;
      right: 48px;
      top: 52px;
      z-index: 10000;
    }
    */
}
@media (max-width: 599px) {
  .site-header .inner-hidden {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}
.site-header .inner-hidden.hidden {
  display: none;
}
.site-header .inner-hidden .notification {
  position: absolute;
  right: -1px;
  top: 5px;
  z-index: 10000;
  outline: none;
}
.site-header .inner-hidden .notification.inbox {
  background-color: #282828;
  right: 52px;
  top: 10px;
}
.site-header .inner-hidden .notification.inbox a {
  font-weight: 400;
}
.site-header .inner-hidden .notification.inbox article {
  max-height: 70vh;
  overflow: auto;
  outline: none;
}
.site-header .inner-hidden .notification.inbox .dashboard {
  margin: 0;
  border: 0;
}
.site-header .inner-hidden .notification.inbox p.time {
  float: none;
  display: none;
}
.site-header .inner-hidden .notification.inbox .text {
  padding: 0;
  background-color: #282828;
}
.site-header .inner-hidden .notification.inbox .text h2 {
  text-transform: none;
  font-size: 14px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed > ul {
  border: none;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed > ul > li,
.site-header .inner-hidden .notification.inbox .text .newsfeed > ul > li.track {
  padding: 7px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed > ul > li blockquote,
.site-header .inner-hidden .notification.inbox .text .newsfeed > ul > li.track blockquote {
  margin-left: 30px;
  line-height: 1.2em;
  font-size: 14px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed > ul > li:hover,
.site-header .inner-hidden .notification.inbox .text .newsfeed > ul > li.track:hover {
  background-color: #404040 !important;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul > li h2 {
  padding-left: 30px;
  width: initial;
  line-height: 20px;
  margin-bottom: 0;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul > li h2 img.avatar {
  width: 24px;
  height: 24px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul > li h2 img.badge {
  width: 9px;
  height: 9px;
  top: 12px;
  left: 14px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul.actionbar,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul.interest,
.site-header .inner-hidden .notification.inbox .text .newsfeed div.waveform,
.site-header .inner-hidden .notification.inbox .text .newsfeed .cover,
.site-header .inner-hidden .notification.inbox .text .newsfeed .next-track-indicator {
  display: none;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track div .cover {
  position: relative;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track {
  margin-bottom: 1px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li:hover,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track:hover,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.read:hover,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.read:hover {
  background-color: inherit;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.read h2,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.read h2,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.read blockquote,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.read blockquote {
  color: #888;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.read a,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.read a {
  color: #bbbbbb;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.read img,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.read img,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.read div.waveform,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.read div.waveform,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.read div.cover,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.read div.cover {
  opacity: 0.5;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.unread,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.unread {
  background-color: #353535;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.unread a,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.unread a {
  color: white;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.unread h2,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track.unread h2 {
  color: #eee;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li div.cover,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track div.cover,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li div.cover img,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track div.cover img {
  position: absolute;
  width: 45px;
  height: 45px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li canvas,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track canvas,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li div.waveform,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track div.waveform {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li .waveform,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track .waveform {
  margin-left: 75px;
  margin-bottom: 0;
}
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li .cover.play,
.site-header .inner-hidden .notification.inbox .text .newsfeed ul li.track .cover.play {
  background-size: 22.5px;
  position: absolute;
  width: 45px;
  height: 45px;
}
@media (max-width: 599px) {
  .site-header .inner-hidden .notification {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    height: 100vh;
  }
  .site-header .inner-hidden .notification nav {
    height: 100vh;
  }
}
.site-header .result-preview {
  position: relative;
}
.site-header .result-preview .notification {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  z-index: 10000;
}
.site-header .result-preview .notification .results {
  background-color: #303030;
}
.site-header .result-preview .notification .results section {
  position: relative;
  border-top: 1px solid #404040;
  padding-bottom: 15px;
}
.site-header .result-preview .notification .results section:last-child {
  padding-bottom: 0;
}
.site-header .result-preview .notification .results section header {
  padding: 5px;
  display: flex;
  align-items: center;
}
.site-header .result-preview .notification .results section header h3 {
  flex-grow: 1;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.site-header .result-preview .notification .results section ul {
  margin: 0;
  padding: 0;
}
.site-header .result-preview .notification .results section ul li {
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header .result-preview .notification .results section ul li > * {
  display: block;
}
.site-header .result-preview .notification .results section ul li:hover,
.site-header .result-preview .notification .results section ul li.selected {
  background-color: #404040;
}
.site-header .result-preview .notification .results section ul li img.avatar,
.site-header .result-preview .notification .results section ul li img.cover {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.site-header .result-preview .notification .results section ul li img.avatar {
  border-radius: 100px;
}
.site-header .result-preview .notification .results section ul li img.badge {
  position: absolute;
  left: 30px;
}
.site-header .result-preview.hidden {
  display: none;
}
/* socialBox */
.socialBox {
  background-color: #242424;
  padding: 0;
}
.socialBox h3 {
  margin-bottom: 10px;
}
.socialBox:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.socialBox .social {
  margin: auto;
  max-width: 1200px;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  padding: 0 10px;
}
.socialBox .social .box {
  vertical-align: top;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  padding: 20px;
  margin: 0;
}
@media (min-width: 800px) {
  .socialBox .social .box {
    width: 33%;
    float: left;
  }
  .socialBox .social .box:first-child {
    padding-left: 0;
  }
  .socialBox .social .box:last-child {
    padding-right: 0;
  }
}
.socialBox .social .box > div {
  margin: 15px 0;
}
.socialBox .social .box > div h5 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}
.socialBox .social .box > div .text {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.socialBox .social .box > div .text span {
  color: #888;
}
.socialBox .social .box > div .time {
  color: #888;
  text-transform: uppercase;
  font-size: 14px;
}
@media (max-width: 599px) {
  .socialBox .social .box > div .time {
    font-size: 10px;
  }
}
/* tags */
header.profile .tags {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
  background: url('/img/theme/svg/color/7f7f7f/tag.svg') no-repeat left center;
}
header.profile .tags:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
header.profile .tags li {
  color: #888;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  float: left;
  padding-left: 18px;
}
@media (max-width: 599px) {
  header.profile .tags li {
    font-size: 10px;
  }
}
header.profile .tags li a {
  color: #888;
  text-decoration: none;
}
header.profile .tags li a:hover,
header.profile .tags li a:active,
header.profile .tags li a:focus {
  color: #0ec5ff;
}
/* tell-your-friends */
.tell-your-friends h2 {
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 5px;
}
@media (max-width: 599px) {
  .tell-your-friends h2 {
    font-size: 18px;
  }
}
.tell-your-friends nav {
  margin-bottom: 36px;
}
.tell-your-friends nav:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
/* track */
.track .draft-actions {
  padding: 18px 0 0;
  min-height: 0;
}
@media (max-width: 599px) {
  .track .draft-actions {
    display: none;
  }
}
.track .draft-actions p {
  margin: 0;
}
.track .draft-actions p.open {
  float: right;
}
.track .draft-actions p.open .button.secondary {
  margin: 0 5px 0 15px;
}
/* tutorials */
.tutorials {
  margin: 0 auto 100px;
  max-width: 1220px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}
.tutorials h1 {
  font-size: 34px;
  text-transform: uppercase;
  margin: 0 0 47px;
  padding-left: 8px;
}
@media (max-width: 599px) {
  .tutorials h1 {
    font-size: 24px;
  }
}
@media (min-width: 400px) {
  .tutorials > div:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
@media (min-width: 900px) {
  .tutorials > div:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.tutorials > div > div {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  padding: 0 8px 50px;
}
@media (min-width: 400px) {
  .tutorials > div > div {
    float: left;
    width: 50%;
  }
}
@media (min-width: 900px) {
  .tutorials > div > div {
    float: left;
    width: 25%;
  }
}
.tutorials > div > div h2 {
  font-size: 18px;
  margin: 0 0 27px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 599px) {
  .tutorials > div > div h2 {
    font-size: 14px;
  }
}
.tutorials > div > div > a {
  display: block;
  text-decoration: none;
}
.tutorials > div > div img {
  width: 100%;
}
/* tutorial-teaser */
.tutorial-teaser {
  position: relative;
}
.tutorial-teaser h3 {
  color: #282828;
  font-size: 22px;
  line-height: 1;
  margin: 0 0 19px 0;
  padding: 0;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .tutorial-teaser h3 {
    font-size: 18px;
  }
}
.tutorial-teaser > span a {
  position: absolute;
  right: 0;
  top: 0;
  color: #eee;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.429;
  text-transform: uppercase;
  text-decoration: none;
}
@media (max-width: 599px) {
  .tutorial-teaser > span a {
    font-size: 10px;
  }
}
.tutorial-teaser iframe {
  width: 100%;
}
/* ui-autocomplete */
ul.ui-autocomplete {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 430px;
  background-color: #fff;
  border: 1px #888 solid;
}
ul.ui-autocomplete li:hover {
  background: #0ec5ff;
}
ul.ui-autocomplete li:hover a {
  color: #fff;
}
ul.ui-autocomplete a {
  cursor: pointer;
  text-decoration: none;
  display: block;
  padding: 5px;
}
/* ui-front */
.ui-front {
  z-index: 99999;
}
/* userterm */
.userterm span {
  color: #eee;
  text-transform: uppercase;
  float: right;
  font-size: 16px;
  margin-top: 13px;
}
/*
 * =5 page layout
 */
/* 5 x 47 - 7 */
/* 6 x 47 - 7 */
/* 6 x 60 - 10 */
#body {
  max-width: 1200px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: 0 auto 70px auto;
}
#body:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
#body > article {
  font-size: 14px;
  width: 100%;
  float: left;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  #body > article {
    margin-right: -268px;
  }
}
@media (min-width: 1000px) {
  #body > article {
    margin-right: -315px;
  }
}
@media (min-width: 1300px) {
  #body > article {
    margin-right: -400px;
  }
}
@media (min-width: 768px) {
  #body > article .article-container {
    margin-right: 268px;
  }
}
@media (min-width: 1000px) {
  #body > article .article-container {
    margin-right: 315px;
  }
}
@media (min-width: 1300px) {
  #body > article .article-container {
    margin-right: 400px;
  }
}
#body > article.no-sidebar .article-container {
  margin-right: 0 !important;
}
#body > aside {
  font-size: 16px;
  float: right;
  display: none;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
#body > aside:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
@media (min-width: 768px) {
  #body > aside {
    width: 228px;
    display: block;
  }
}
@media (min-width: 1000px) {
  #body > aside {
    width: 275px;
  }
}
@media (min-width: 1300px) {
  #body > aside {
    width: 350px;
  }
}
#body.preferences article,
#body.admin article {
  float: right;
  width: 67.5%;
  /* 810px of 1200px */
  margin-right: 0;
}
#body.preferences aside,
#body.admin aside {
  float: left;
  width: 29.167%;
  /* 350px of 1200px */
}
#body.admin table th {
  font-weight: 700;
}
#body.admin section.status p {
  margin-bottom: 0.5em;
}
.logout,
.userterm,
.page404,
.impressum {
  padding-top: 4em;
  margin-bottom: -6em;
}
.logout .gray,
.userterm .gray,
.page404 .gray,
.impressum .gray {
  color: #888;
}
.admin#stats-content table {
  width: 70%;
}
.admin#stats-content table tr td:first-of-type {
  text-align: left;
}
.admin#stats-content table tr td {
  white-space: nowrap;
  text-align: right;
}
.admin#stats-content table tr td:nth-child(2) {
  width: 100%;
}
.banner-carousel a {
  display: none;
}
.banner-carousel a:first-of-type {
  display: block;
}
#body.stats-trends nav.preferences ul li {
  display: inline-block;
  margin: 10px;
}
#body.stats-trends #chart {
  height: 500px;
  margin-right: 0;
}
#body.stats-trends ul.reports {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}
#body.stats-trends ul.reports li {
  margin: 5px;
  padding: 5px;
  background-color: #d2d2d2;
  display: inline-block;
  border-radius: 5px;
  color: #fff;
}
#body.stats-trends ul.reports li a:focus,
#body.stats-trends ul.reports li a:active,
#body.stats-trends ul.reports li a:hover {
  color: #fff;
}
#body.stats-trends ul.reports li span {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
#body.stats-trends ul.reports li.selected {
  background-color: #f16b1c;
}
#body.stats-trends .stats-message {
  height: 20px;
}
#body.stats-trends .ui-rangeSlider-label-inner {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  top: -10px;
}
.player.track .author:last-of-type .delimiter,
header.track.profile .author:last-of-type .delimiter {
  display: none;
}
var {
  font-style: normal;
}
section.mailtemplates section.category {
  margin-bottom: 30px;
}
section.mailtemplates h2 {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 5px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  section.mailtemplates h2 {
    font-size: 20px;
  }
}
section.mailtemplates h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
@media (max-width: 599px) {
  section.mailtemplates h3 {
    font-size: 14px;
  }
}
section.mailtemplates p.meta {
  color: #7f7f7f;
  font-size: 11px;
  line-height: 1.429;
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: 10px;
}
section.mailtemplates p.meta a.user {
  color: #7f7f7f;
  text-decoration: none !important;
  font-weight: 400;
}
section.mailtemplates div.content,
section.mailtemplates p.subject {
  box-sizing: border-box;
  width: 100%;
  border: 1px #888 solid;
  font-size: 16px;
  color: #666;
  padding: 5px;
  margin-bottom: 10px;
  padding: 5px 15px;
}
section.mailtemplates div.content {
  height: 100px;
}
section.mailtemplates footer {
  text-align: left;
}
section.mailtemplates section.item {
  padding: 15px;
}
section.mailtemplates section.item:hover {
  background-color: #fafafa;
}
.dialogue.mailtemplate {
  min-width: 800px;
}
.dialogue.mailtemplate textarea {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  font-size: 18px;
  padding: 15px;
}
@media (max-width: 599px) {
  .dialogue.mailtemplate textarea {
    font-size: 14px;
  }
}
.tipsy a {
  text-decoration: underline;
}
header.profile.topic .profile-follow {
  float: initial;
}
form.comment section.url-preview,
section.url-preview {
  position: relative;
  background-color: #1A1A1A;
  padding: 10px;
  margin-top: 10px;
  border-radius: 3px;
  clear: both;
}
form.comment section.url-preview iframe,
section.url-preview iframe {
  border: 0;
  width: 100%;
}
form.comment section.url-preview canvas,
section.url-preview canvas,
form.comment section.url-preview img.preview,
section.url-preview img.preview {
  max-width: 80vw;
  max-height: 20vh;
}
form.comment section.url-preview a.delete,
section.url-preview a.delete {
  position: absolute;
  top: 0;
  left: initial;
  right: 5px;
}
form.comment section.url-preview img.preview,
section.url-preview img.preview {
  display: block;
  margin-right: 10px;
  float: left;
}
form.comment section.url-preview h1,
section.url-preview h1 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1em;
  margin: 0 10px 0.5em 0;
  padding: 0;
  white-space: pre-wrap;
}
form.comment section.url-preview span.descr,
section.url-preview span.descr {
  font-size: 14px;
  text-align: left;
  margin-right: 10px;
}
.local-errors {
  padding: 5px;
  background-color: #f16b1c;
  color: #fff;
  margin-bottom: 5px;
}
.local-errors:empty {
  display: none;
}
#dialog-errors {
  background-color: #f16b1c;
  color: #fff;
  padding: 5px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
}
#dialog-errors:empty {
  display: none;
}
.dialogue.create-room label select,
.dialogue.move-topic label select {
  display: block;
  width: 100%;
  font-size: 18px;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 33px;
}
.dialogue.create-room label input,
.dialogue.move-topic label input {
  margin-top: 5px;
}
.dialogue.create-room table,
.dialogue.move-topic table {
  margin-bottom: 30px;
}
.dialogue.create-room table input[type=checkbox],
.dialogue.move-topic table input[type=checkbox] {
  margin: 0;
}
.dialogue.create-room table th,
.dialogue.move-topic table th {
  text-align: center;
}
.dialogue.create-room table td,
.dialogue.move-topic table td,
.dialogue.create-room table th,
.dialogue.move-topic table th {
  border: 1px #888 solid;
  padding: 5px;
}
form.comment .attachment {
  position: relative;
}
form.comment .attachment i.wait {
  display: none;
}
form.comment .attachment.uploading i.wait {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  top: 0;
  margin: auto;
}
form.comment .attachment.uploading canvas {
  opacity: 0.5;
}
form .item-input {
  font-family: 'Open Sans';
  background: #404040;
  border-radius: 3px;
  border: 1px solid #404040;
  font-size: 12px;
  color: #fff;
  padding: 6px 0;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  display: inline-block;
  min-height: 20px;
}
form .item-input span.item,
form .item-input input.item,
form .item-input select,
form .item-input input {
  border: 1px #282828 solid;
  position: relative;
  display: inline-block;
  color: #fff;
  border: none;
  text-decoration: none !important;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
  margin: 0 10px 0px;
  padding: 2px 8px;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  form .item-input span.item,
  form .item-input input.item,
  form .item-input select,
  form .item-input input {
    font-size: 10px;
  }
}
form .item-input input.item,
form .item-input input.item:focus,
form .item-input select {
  border: 1px #282828 solid;
  padding: 7px !important;
  width: 150px;
  text-transform: uppercase;
  box-sizing: border-box;
  height: 27px;
}
form .item-input span.item {
  background: #282828;
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}
form .item-input span.item i {
  display: inline-block;
  margin-right: 5px;
  cursor: pointer;
}
form .item-input span.item.new {
  min-width: 100px;
  border: 1px solid #282828;
  background: #fff;
  color: #282828;
}
form .item-input img.avatar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(8px);
}
form .item-input i.icon.close {
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
}
form .item-input * {
  vertical-align: middle;
}
nav.filter.bread-crumb {
  width: 80%;
  overflow: hidden;
}
@media (max-width: 599px) {
  nav.filter.bread-crumb {
    display: none;
  }
}
nav.filter.bread-crumb ul li {
  padding: 10px 6px;
  color: #d2d2d2;
  line-height: 0.875;
}
nav.filter.bread-crumb ul li a {
  white-space: nowrap;
  max-width: 250px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}
nav.filter.bread-crumb ul li.topic-name {
  text-transform: uppercase;
  color: #888;
  font-size: 14px;
}
nav.filter.bread-crumb ul li,
nav.filter.bread-crumb ul li a {
  font-size: 14px;
}
nav.filter.bread-crumb ul li:last-of-type {
  display: none;
}
section.next-beta {
  margin-bottom: 30px;
}
section.next-beta h2 {
  margin-bottom: 0.5em;
}
section.next-beta .button {
  margin-top: 4px;
}
section.next-beta .button.subscribe {
  background-color: #f16b1c;
  font-weight: 600;
}
section.next-beta p {
  margin-bottom: 0.5em;
}
.dialogue.create-topic .attachment canvas,
.dialogue.create-topic .attachment img {
  max-height: 100px;
}
.dialogue.create-topic .attachment i.wait {
  display: none;
}
.dialogue.create-topic .attachment.uploading i.wait {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  top: 0;
  margin: auto;
}
.dialogue.create-topic .attachment.uploading canvas {
  opacity: 0.5;
}
aside img.avatar {
  border-radius: 40px;
}
.board section.buttons {
  margin: 20px 0;
}
.board section.user-infringement table tr td {
  font-size: 16px;
}
.board section.user-infringement table tr td:first-of-type {
  white-space: nowrap;
}
.board section.user-infringement span.toggle-details span:last-of-type {
  display: none;
}
.board section.user-infringement span.toggle-details.expanded span:first-of-type {
  display: none;
}
.board section.user-infringement span.toggle-details.expanded span:last-of-type {
  display: inline;
}
section.dashboard section.admonishment {
  border-radius: 4px;
  background-color: #f16b1c;
  color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}
section.dashboard section.admonishment h3 {
  font-size: 16px;
  margin-bottom: 0.5em;
}
@media (max-width: 599px) {
  section.dashboard section.admonishment h3 {
    font-size: 12px;
  }
}
section.dashboard section.admonishment div.message {
  font-size: 12px;
  margin: 0 0 20px 0;
}
@media (max-width: 599px) {
  section.dashboard section.admonishment div.message {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
section.dashboard section.admonishment a {
  text-decoration: underline;
}
section.dashboard section.admonishment textarea {
  width: 100%;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  height: 100px;
  border: 1px #ccc solid;
  display: block;
  margin-bottom: 20px;
}
section.dashboard section.admonishment input.button {
  float: right;
}
section.dashboard section.admonishment:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
span.unread-marker {
  display: inline-block;
  background: #0ec5ff;
  color: #fff;
  font-size: 10px;
  border-radius: 10px;
  padding: 3px;
  margin-left: 3px;
  /*vertical-align: text-top;*/
  opacity: 0.9;
  position: absolute;
}
@media (max-width: 599px) {
  span.unread-marker {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
.wiki-markup a {
  text-decoration: underline;
  display: inline-block;
}
.wiki-markup ul,
.wiki-markup ol {
  margin: 8px 0;
}
.wiki-markup h1,
.wiki-markup h2,
.wiki-markup h3,
.wiki-markup h4,
.wiki-markup h5 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1em;
  margin: 0;
  padding: 0;
  text-transform: initial;
}
.wiki-markup h1 {
  margin: 4px 0 8px 0;
  font-size: 24px;
  color: #d2d2d2;
  font-weight: 600;
}
@media (max-width: 599px) {
  .wiki-markup h1 {
    font-size: 20px;
  }
}
.wiki-markup h1.topic-name {
  text-transform: uppercase;
  color: white;
  margin: 0 0 8px 0;
}
.wiki-markup h2 {
  margin: 0 0 12px 0;
  color: #d2d2d2;
  font-size: 22px;
}
@media (max-width: 599px) {
  .wiki-markup h2 {
    font-size: 18px;
  }
}
.wiki-markup h3 {
  font-size: 16px;
  color: #d2d2d2;
}
@media (max-width: 599px) {
  .wiki-markup h3 {
    font-size: 12px;
  }
}
.wiki-markup h4,
.wiki-markup h5,
.wiki-markup h6 {
  font-size: 18px;
}
@media (max-width: 599px) {
  .wiki-markup h4,
  .wiki-markup h5,
  .wiki-markup h6 {
    font-size: 14px;
  }
}
.wiki-markup b {
  font-style: normal;
  font-weight: 600;
}
.wiki-markup pre {
  background-color: #eee;
  padding: 20px;
  border: 1px dashed #282828;
  white-space: normal;
}
.wiki-markup blockquote {
  background-color: #eee;
  padding: 20px;
  white-space: normal;
}
nav.wiki-text {
  margin-bottom: 5px;
}
nav.wiki-text a {
  display: inline-block;
  background: #303030;
  color: #fff;
  border: 1px transparent solid;
  text-decoration: none !important;
  text-transform: uppercase;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 400;
  border-radius: 3px;
  margin: 0;
  padding: 6px 11px;
  text-align: center;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  outline: none;
}
@media (max-width: 599px) {
  nav.wiki-text a {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
@media (max-width: 699px) {
  nav.wiki-text a {
    padding: 3px;
    font-size: 10px;
  }
}
nav.wiki-text a.big {
  font-size: 16px;
  padding: 12px 14px 13px;
}
nav.wiki-text a.secondary {
  background: #888;
}
nav.wiki-text a.app {
  text-transform: none;
  padding: 7px 24px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  background-color: #0ec5ff;
}
nav.wiki-text a.app:hover,
nav.wiki-text a.app:focus,
nav.wiki-text a.app:active {
  color: #fff !important;
}
nav.wiki-text a.blue {
  color: #fff ! important;
  background-color: #0ec5ff;
  font-weight: 600;
}
nav.wiki-text a.error {
  background: #f16b1c;
}
nav.wiki-text a.warning {
  background: #f16b1c;
}
nav.wiki-text a.failed,
nav.wiki-text a.failed:focus {
  background: red;
  pointer-events: none;
}
nav.wiki-text a.working,
nav.wiki-text a.working:hover {
  color: transparent !important;
  position: relative !important;
  pointer-events: none;
  background-image: url('/img/theme/svg/default/Loading-animation.svg') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
nav.wiki-text a.working i,
nav.wiki-text a.working:hover i {
  visibility: hidden;
}
nav.wiki-text a.iconbutton {
  padding: 0;
}
nav.wiki-text a.iconbutton .icon {
  height: 33px;
}
nav.wiki-text a.iconbutton.withtext {
  position: relative;
  padding: 9px 14px 9px 40px;
}
nav.wiki-text a.iconbutton.withtext .icon {
  margin-right: 10px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 2px;
}
nav.wiki-text a.selected,
nav.wiki-text a.active {
  background: #f16b1c;
  color: #fff;
  cursor: pointer;
}
nav.wiki-text a.action.big {
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
  width: 54px;
  height: 37px;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 0;
}
nav.wiki-text a.action.big:hover,
nav.wiki-text a.action.big:active,
nav.wiki-text a.action.big:focus {
  cursor: pointer;
}
nav.wiki-text a.action.big i {
  position: absolute;
  left: 16px;
  top: 8px;
}
nav.wiki-text a.action.small {
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  border-radius: 3px;
  background: #282828;
  color: #fff;
  padding: 3px 12px 4px 12px;
  margin-right: 0;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 15px;
  vertical-align: middle;
}
nav.wiki-text a.action.small i {
  position: relative;
  top: 2px;
}
nav.wiki-text a.action.small.selected {
  background: #f16b1c;
}
nav.wiki-text a.double-action {
  /*
    &:hover,
    &:focus,
    &:active {
      background: @black;
      color: @white;
      span.state-0 {
        display: none;
      }
      span.state-1 {
        display: block;
      }
    }
    */
}
nav.wiki-text a.double-action.active {
  color: #fff;
  cursor: pointer;
}
nav.wiki-text a.double-action span.state-1 {
  display: none;
}
nav.wiki-text a.follow {
  min-width: 7em;
  text-align: center;
}
nav.wiki-text a.show-loader {
  position: relative;
}
nav.wiki-text a.show-loader i.loader {
  display: none;
}
nav.wiki-text a.show-loader i.loader.loading {
  position: absolute;
  left: 50%;
  top: 6px;
  margin-left: -10px;
  display: block;
}
.comma-separated-list .item:last-of-type > .separator {
  display: none;
}
img.badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 12px;
  height: 12px;
}
.avatar-container {
  position: relative;
  display: inline-block;
}
section.dashboard section.patreon p {
  margin-bottom: 2em;
  font-size: 14px;
}
@media (max-width: 599px) {
  section.dashboard section.patreon p {
    font-size: 10px;
  }
}
@media (max-width: 599px) {
  section.dashboard section.patreon p {
    display: none;
  }
}
aside section.patreon.creator {
  margin-bottom: 19px;
}
aside section.patreon.creator a.creator-url {
  display: block;
  padding: 15px 5px;
  text-align: center;
  background-color: #f16b1c;
  font-size: 16px;
  color: #fff;
  font-weight: 300;
  border-radius: 2px;
}
aside section.patreon.creator a.creator-url .user {
  font-weight: 400;
}
aside section.patreon.creator a.creator-info-url {
  color: #888;
  display: block;
  text-align: right;
  text-decoration: underline;
  font-size: 12px;
}
.notification.logged-in .close {
  display: none;
}
@media (max-width: 599px) {
  .notification.logged-in .close {
    display: block;
  }
}
img.avatar.online {
  border: 2px rgba(14, 197, 255, 0.5) solid;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
}
article.discover h1 {
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 0;
}
@media (max-width: 599px) {
  article.discover h1 {
    font-size: 20px;
  }
}
article.discover div.track {
  display: inline-block;
  margin-right: 10px;
}
article.discover div.track h2,
article.discover div.track h3 {
  font-size: 18px;
  width: 128px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}
@media (max-width: 599px) {
  article.discover div.track h2,
  article.discover div.track h3 {
    font-size: 14px;
  }
}
article.discover div.track h3 {
  text-transform: none;
}
article.discover div.track img.cover {
  width: 128px;
  height: 128px;
}
article.discover section.genre {
  margin-bottom: 30px;
}
div.browse-tracks ul.genres a {
  margin-bottom: 10px;
}
div.browse-tracks nav.tag-filter {
  overflow: hidden;
  max-height: 60px;
}
.margin-medium {
  margin-bottom: 20px;
}
.margin-large {
  margin-bottom: 40px;
}
ul.tagit {
  margin-bottom: 0;
}
ul.tagit input {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
ul.tagfilter {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  overflow: hidden;
  margin: 0;
  padding: 0;
}
ul.tagfilter li {
  float: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul.tagfilter li a {
  display: block;
  background-color: black !important;
  color: #fff;
  padding: 3px 10px;
  margin: 5px 5px 3px 0;
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 75px;
}
@media (max-width: 599px) {
  ul.tagfilter li a {
    font-size: 10px;
  }
}
ul.tagfilter li a.selected {
  background-color: #f16b1c !important;
}
span.error-msg {
  color: #f16b1c;
}
.static-warning,
.static-info {
  background-color: #f16b1c;
  color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.static-warning a,
.static-info a,
.static-warning a:hover,
.static-info a:hover {
  color: #fff;
  font-weight: 600;
}
.static-warning a:hover,
.static-info a:hover {
  text-decoration: underline;
}
.static-warning.closable,
.static-info.closable {
  display: flex;
}
.static-warning.closable header,
.static-info.closable header {
  flex-grow: 1;
}
.static-info {
  background-color: #0ec5ff;
}
#body.invite {
  margin-bottom: 0;
}
div.dim {
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
header.product.invite {
  opacity: 0.5;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
header.product.invite .inner {
  position: absolute;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
}
header.product.invite .inner p {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
}
div.runmode-ribbon {
  position: fixed;
  z-index: 10000;
  top: 45px;
  left: -80px;
  background-color: #f16b1c;
  color: #fff;
  font-size: 18px;
  padding: 10px 10px;
  width: 300px;
  text-align: center;
  transform: rotate(-45deg);
}
@media (max-width: 599px) {
  div.runmode-ribbon {
    font-size: 14px;
  }
}
#content.admin-page input[type=checkbox] {
  width: initial;
  margin-bottom: 0;
}
#content.page-sample-toc label {
  text-transform: none;
}
#content.page-sample-toc h2 {
  margin-bottom: 0.4em;
}
#content.page-sample-toc em {
  font-style: normal;
}
#content.page-sample-toc article.quiz ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  clear: both;
}
#content.page-sample-toc article.quiz ul li {
  margin: 0;
  padding: 0;
}
#content.page-sample-toc article.quiz ul li input[type=radio] {
  margin-right: 5px;
  float: left;
  display: block;
}
#content.page-sample-toc article.quiz ul li div {
  float: left;
  max-width: 80%;
}
#content.page-sample-toc article.quiz ul li:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
#content.page-sample-toc article.quiz ul:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
#content.page-sample-toc article.quiz input[type=submit] {
  display: block;
  clear: both;
  margin-top: 20px;
}
#content.page-sample-toc article.quiz #body > article {
  max-width: 800px;
}
.sane input[type=checkbox] {
  width: initial;
  margin-bottom: initial;
}
.sane label {
  text-transform: none;
  margin: initial;
}
.sane p {
  margin-bottom: 1.5em;
}
.tag-filter {
  display: flex;
  flex-wrap: wrap;
}
.tag-filter a.tag {
  font-size: 12px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  background-color: #282828;
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
}
@media (max-width: 599px) {
  .tag-filter a.tag {
    font-size: 9px;
    letter-spacing: 1px;
  }
}
.tag-filter a.tag:before {
  content: '#';
}
.tag-filter a.tag.selected {
  background-color: #0ec5ff;
}
.tag-filter a.tag.selected:hover {
  text-decoration: line-through;
}
div.dropdown {
  display: none;
  position: absolute;
  z-index: 999;
}
div.dropdown > ul {
  text-transform: uppercase;
  list-style-type: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.43);
  background-color: #282828;
}
div.dropdown > ul > li {
  padding: 0 5px;
  display: block;
}
div.dropdown > ul > li a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 10px;
  line-height: 25px;
  letter-spacing: 1px;
  padding: 0 5px;
  white-space: nowrap;
}
div.dropdown > ul > li a * {
  display: block;
}
div.dropdown > ul > li a i {
  margin-left: 10px;
}
div.dropdown > ul > li:hover {
  background-color: #303030;
}
div.dropdown .tail {
  position: absolute;
  left: 15px;
  top: -10px;
  height: 9px;
  width: 9px;
  overflow: hidden;
  z-index: 10000;
}
div.dropdown .tail:after {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.43);
  background-color: #282828;
  content: "";
  display: block;
  height: 9px;
  width: 9px;
  transform: rotate(45deg);
  position: relative;
  top: 7px;
}
#body.preferences input[type=text],
#body.preferences textarea {
  margin-bottom: 15px;
}
form.standard input {
  margin-bottom: 10px;
}
.page-sample-toc b {
  color: #AAA;
}
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  background-clip: padding-box;
  -webkit-border-radius: 8px;
  background-color: rgba(153, 153, 153, 0.4);
}
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
.meta-text {
  color: #808080;
}
form.single-column label {
  display: block;
  margin-bottom: 5px;
}
form.single-column label > span {
  display: inline-block;
}
.is-ms {
  display: none;
}
@supports (-ms-ime-align:auto) {
  display: initial;
}