@import url(https://fonts.googleapis.com/css?family=Faster+One|Open+Sans:400,600,700);/**
 * @file
 * Project fonts
 */

@font-face {
  font-family: "Radikal Ultra Thin";
  src: url("/fonts/radikal-ultrathin.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Radikal Thin";
  src: url("/fonts/radikal-thin.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Radikal Light";
  src: url("/fonts/radikal-light.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Radikal";
  src: url("/fonts/radikal.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Radikal Medium";
  src: url("/fonts/radikal-medium.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Radikal Bold";
  src: url("/fonts/radikal-bold.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Radikal Black";
  src: url("/fonts/radikal-black.otf") format("opentype");
  font-weight: normal;
}

/* @import "base/reset"; */

body {
  font-family: "Radikal", Verdana, Tahoma, "DejaVu Sans", sans-serif;
  background-color: #000000;
  color: #ffffff;
  /* height: 100vh; */
  height: 100%;
  height: -webkit-fill-available;
  margin: 0;
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

strong {
  font-family: "Radikal Bold", Verdana, Tahoma, "DejaVu Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Radikal Bold", Verdana, Tahoma, "DejaVu Sans", sans-serif;
}

.header {
  background: #121212;
  line-height: 40px;
  text-align: center;
  width: 100%;
}

.flex-center {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

#app {
  display: grid;
  grid-template-rows: 1fr 50px;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

#app > div {
  display: grid;
  /* grid-template-rows: 40px calc(100vh - 133px) 43px; */
  grid-template-rows: 40px 1fr 43px;
  height: 100%;
}

.content {
  margin: 0;
  text-align: left;
}

.title {
  font-family: "Radikal Medium", Verdana, Tahoma, "DejaVu Sans", sans-serif;
  font-size: 18px;
  letter-spacing: 0.03em;
}

.playlist-title,
.tracks-title,
.tracks-month-title,
.tracks-year-title,
.artists-title,
.artists-month-title,
.artists-year-title {
  display: none;
}

.playlist-title.show,
.tracks-title.show,
.tracks-month-title.show,
.tracks-year-title.show,
.artists-title.show,
.artists-month-title.show,
.artists-year-title.show {
  display: block;
}

/* .tracks-this-month {
    opacity: 0;
} */

.title-sm {
  font-size: 34px;
}

.spotify-link img {
  display: block;
  height: 20px;
  margin: 1px 5px 0;
  opacity: 0.5;
  width: auto;
}

@media (max-width: 767px) {
  .spotify-link img {
    height: 18px;
    margin: 0 20px 0 0;
  }
}

.video-wrapper {
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube-id img {
  height: 18px;
  width: auto;
}

@media (max-width: 767px) {
  .youtube-id img {
    height: 16px;
    margin: 4px 8px 0;
  }
}

.desktop {
  display: block;
}

@media (max-width: 767px) {
  .desktop {
    display: none;
  }
}

.mobile {
  display: none;
}

@media (max-width: 767px) {
  .mobile {
    display: block;
  }
}

.sub-nav {
  padding: 0;
}

.sub-nav a {
  color: #b3b3b3;
  font-size: 12px;
  text-decoration: none;
  margin-right: 30px;
}

.sub-nav a:nth-child(3) {
  margin-right: 0;
}

.sub-nav a.active {
  font-weight: 400;
}

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
  /* .content-grid__column {
      @include breakpoint($mobile) {
          &:last-child {
              display: none;
          }
      }
  } */
}

@media (max-width: 767px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

table tr td.data {
  text-align: left;
}

table tr td.track {
  padding-right: 20px;
}

table tr td.time {
  width: 150px;
}

@media (max-width: 767px) {
  table tr td.time {
    width: 70px;
  }
}

.full-archive table tr::nth-of-type(1) {
  color: green;
}

.playlist {
  display: none;
}

.playlist-flex {
  opacity: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 100vw;
}

.playlist-flex.show {
  height: auto;
  opacity: 1;
  width: 100vw;
}

.playlist-flex .playlist-flex__row {
  display: -webkit-box;
  display: flex;
  padding: 23px 16px;
}

@media (max-width: 767px) {
  .playlist-flex .playlist-flex__row {
    overflow: hidden;
  }

  .playlist-flex .playlist-flex__row.active {
    height: auto;
    position: relative;
  }
}

.playlist-flex .playlist-flex__row .track {
  padding-right: 10px;
  -webkit-box-flex: 1;
          flex-grow: 1;
}

.playlist-flex .playlist-flex__row .track .track__artist,
.playlist-flex .playlist-flex__row .track .track__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-flex .playlist-flex__row .track .track__title {
  font-size: 18px;
  margin-bottom: 4px;
}

.playlist-flex .playlist-flex__row .track .track__artist {
  color: #b3b3b3;
  font-size: 15px;
}

.playlist-flex .playlist-flex__row .track .track__time {
  color: #b3b3b3;
  display: none;
  font-size: 10px;
  margin-top: 5px;
}

.playlist-flex .playlist-flex__row .track .track__time.show {
  display: block;
}

.playlist-flex .playlist-flex__row .data {
  text-align: left;
  overflow: hidden;
}

.playlist-flex .playlist-flex__row .data-youtube,
.playlist-flex .playlist-flex__row .data-spotify,
.playlist-flex .playlist-flex__row .data-time {
  display: none;
}

.playlist-flex .playlist-flex__row .data-spotify-column,
.playlist-flex .playlist-flex__row .data-play-count-column {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  margin: 0 15px 0 10px;
}

.playlist-flex .playlist-flex__row .data-menu {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}

.playlist-flex .playlist-flex__row .data-menu a {
  background: url(/images/ellypsis.svg);
  background-size: 100% auto;
  display: block;
  height: 24px;
  text-indent: -9999px;
  width: 24px;
}

.playlist-flex .playlist-flex__row .time {
  display: none;
  width: 150px;
}

@media (max-width: 767px) {
  .playlist-flex .playlist-flex__row .time {
    -webkit-box-flex: 0;
            flex-grow: 0;
    text-align: right;
    width: auto;
  }
}

.tabs {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: left;
          justify-content: left;
}

.tabs h3 {
  padding: 0 20px;
}

.tab.active {
  display: -webkit-box;
  display: flex;
}

.track-detail {
  background: rgba(37, 37, 37, 0.95);
  display: grid;
  grid-template-rows: 38vh 1fr 64px;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: absolute;
  top: 0;
  width: 100%;
}

.track-detail.close {
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.track-detail .track-detail__header {
  width: 100vw;
}

.track-detail .track-detail__header .track-detail__image {
  height: 80%;
}

.track-detail .track-detail__header .track-detail__image img {
  display: block;
  height: 100%;
  margin: 0 auto;
  width: auto;
}

.track-detail .track-detail__header .track-detail__youtube {
  margin: 0 auto;
  width: 402px;
}

.track-detail .track-detail__header .track-detail__title {
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  margin-top: 30px;
  text-align: center;
}

.track-detail .track-detail__content {
  margin: 40px 25px 0;
}

.track-detail .track-detail__content .track-detail__link {
  color: #ffffff;
  display: block;
  font-size: 15px;
  line-height: 64px;
  padding-left: 35px;
  text-decoration: none;
}

.track-detail .track-detail__content .track-detail__link.track-detail__link--spotify {
  background: url(/spotify.svg) no-repeat;
  background-size: 25px auto;
  background-position: left 16px;
}

.track-detail .track-detail__content .track-detail__link.track-detail__link--youtube {
  background: url(/youtube.svg) no-repeat;
  background-size: 25px auto;
  background-position: left 20px;
}

.track-detail .track-detail__content .track-detail__link.track-detail__link--frequency {
  background: url(/images/stats.svg) no-repeat;
  background-size: 25px auto;
  background-position: left 20px;
}

.track-detail .track-detail__footer a {
  background: #252525;
  display: block;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 64px;
  text-align: center;
  text-decoration: none;
}

.footer {
  background: #282828;
  width: 100%;
}

.footer a {
  color: #b3b3b3;
  text-decoration: none;
}

.footer a.router-link-exact-active,
.footer a.active {
  color: #ffffff;
}

.footer .main-links {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  height: 50px;
  justify-content: space-around;
  line-height: 1;
  text-align: center;
}

.footer .main-links a {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  height: 37px;
  -webkit-box-pack: justify;
          justify-content: space-between;
  text-decoration: none;
}

.footer .main-links a svg {
  color: #b3b3b3;
  height: 18px;
  stroke: #b3b3b3;
  width: auto;
}

.footer .main-links a svg.tracks-icon {
  height: 20px;
}

.footer .main-links a svg.artists-icon {
  height: 24px;
}

.footer .main-links a.router-link-exact-active svg {
  color: #ffffff;
  stroke: #ffffff;
}

.footer .main-links a span {
  font-size: 12px;
}

.sub-footer {
  background: #282828;
  border-bottom: 1px solid #121212;
  border-top: 2px solid #3e3e3e;
}

.sub-footer a {
  color: #b3b3b3;
  text-decoration: none;
}

.sub-footer a.router-link-exact-active,
.sub-footer a.active {
  color: #ffffff;
}

.sub-footer .sub-nav {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  height: 40px;
  -webkit-box-pack: center;
          justify-content: center;
  line-height: 40px;
  text-align: center;
}