html body #spinitron-recent-tracks {
  padding-top: 2rem;
  @media (min-width: 1024px) {
    padding-top: 0;
  }
  .head.station { 
    display: none;
  }  
  .table-striped tr:nth-child(odd) {
    background-color: #000000;
  }
  ul {
    padding: 1rem 0 0 0;
    display: flex;
    gap: 0;
    margin-right: 16px;
  }
  td {
    vertical-align: middle;
    padding: 0 8px;
  } 
  .song::before, .song::after {
    transform: rotate(45deg); 
    display: none;
  }
  .song {
    color: #FFD031;
    font-weight: bold;
  }
  span.references.hide {
    display: none;
  }

  h3.show-title a {
    --tw-text-opacity: 1;
    color: #05abbb;
    text-decoration: underline;
    margin-bottom: .4rem;
    display: block;
    font-size: 1.6rem;
    line-height: 1.3;
  }
  h3.show-title {
    color: #ffffff !important;
  }
  .spin-icons {
    display: none;
  }
  .spin-play-icon, .spin-pause-icon { 
    margin: auto; 
    text-align: center;
    padding-top: 1rem;
    svg {
      margin: auto;
    }
  }
  
}

.not-prose {
  .spin-player {
    align-items: center;
    background: hsla(0,0%,100%,.6);
    cursor: pointer;
    display: flex;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: .3s ease;
    width: 100%
  }

  .spin-player.active:not(.not-playable),.spin-player:hover:not(.not-playable) {
    opacity: 1;
    transition: .3s ease
  }

  .spin-player .player-icon {
    color: rgba(0,0,0,.6);
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .spin-player .player-icon svg {
    height: 50%;
    width: 50%;
    fill: rgba(0,0,0,.6);
    vertical-align: sub
  }

  .spin-player .spin-pause-icon {
    display: none
  }

  .spin-player .spin-play-icon {
    display: inline-block
  }

  .spin-player.active .spin-pause-icon,.spin-player.active .spin-play-icon {
    display: none
  }

  .spin-player.playing .spin-pause-icon {
    display: inline-block
  }

  .spin-player.playing .spin-play-icon {
    display: none
  }

  .spin-player.not-playable {
    cursor: auto
  }

  .spin-player.not-playable .spin-pause-icon,.spin-player.not-playable .spin-play-icon {
    visibility: hidden
  }

  .spin-icons {
    display: flex;
    padding: 0;
  }

  .spin-icons ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0
  }

  .spin-icons li {
    margin-right: 10px
  }

  .spin-icons .buy-icon {
    background-repeat: no-repeat;
    /* background-size: contain; */
    height: 34px;
    width: 34px;
    background-size: cover;
  }

  .spin-icons .buy-icon-apple {
    background-image: url(https://spinitron.com/static/images/apple.png)
  }

  .spin-icons .buy-icon-amazon {
    background-image: url(https://spinitron.com/static/images/amazon.png)
  }

  .spin-icons .buy-icon-spotify {
    background-image: url(https://spinitron.com/static/images/spotify.png)
  }

  .playlist.spins .active,.playlist.spins .table-striped tr.active,.public-spins .active,.public-spins .table-striped tr.active {
    background-color: #FFD031 !important;
  }

  .playlist.spins .spin-time,.public-spins .spin-time {
    color: #555;
    font-size: 85%;
    white-space: nowrap;
    width: 5rem;
    position: absolute;
    right: 0;
    margin-top: 12px !important;
    border-bottom: 0px;
    background: #444444;
    border-radius: 8px;
    padding: 0px 4px !important;
    text-align: center;
  }

  .playlist.spins .spin-time a,.public-spins .spin-time a {
    color: #FFD031;
    font-family: monospace;
    font-size: 0.8rem
  }

  .playlist.spins .spin-art,.public-spins .spin-art {
    padding: .2rem 0;
    width: 4rem
  }

  .playlist.spins .spin-art .spin-art-container,.public-spins .spin-art .spin-art-container {
    /* border: 1px solid #23b557; */
    height: auto;
    position: relative;
    width: 6rem;
    height: 6rem;
    margin: 1rem 0;
  }

  .playlist.spins .spin-art img,.public-spins .spin-art img {
    width: 100%
  }

  .playlist.spins .spin-art .spin-art-placeholder,.public-spins .spin-art .spin-art-placeholder {
    left: 50%;
    opacity: .5;
    position: relative;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 50%
  }

  .playlist.spins .spin-art:hover .spin-art-placeholder,.public-spins .spin-art:hover .spin-art-placeholder {
    opacity: 0;
    transition: .3s ease
  }

  .playlist.spins .not-playable .spin-art-placeholder,.public-spins .not-playable .spin-art-placeholder {
    visibility: hidden
  }

  .playlist.spins .spin-text .artist,.public-spins .spin-text .artist {
    color: #22C55F;
    font-weight: bolder;
    font-size: 1.4rem;
    display: block;
    line-height: 1;
    font-weight: 600;
    padding: 1rem 0 0 0;
  }

  .playlist.spins .spin-text .song:before,.public-spins .spin-text .song:before {
    content: "‘"
  }

  .playlist.spins .spin-text .song:after,.public-spins .spin-text .song:after {
    content: "’"
  }

  .playlist.spins .spin-text .release,.public-spins .spin-text .release {
    color: #22C55F;
    font-style: oblique
  }

  .playlist.spins .spin-text .release:before,.public-spins .spin-text .release:before {
    color: #c4c3bd;
    content: "from ";
    font-style: normal
  }

  .playlist.spins .spin-text .parenthesis,.public-spins .spin-text .parenthesis {
    color: #fdfdfc;
    display: none;
  }

  .playlist.spins .spin-text .parenthesis:before,.public-spins .spin-text .parenthesis:before {
    content: "("
  }

  .playlist.spins .spin-text .parenthesis:after,.public-spins .spin-text .parenthesis:after {
    content: ")"
  }

  .playlist.spins .spin-text .parenthesis>:nth-last-child(n+2):after,.playlist.spins .spin-text .references>:nth-last-child(n+2):after,.public-spins .spin-text .parenthesis>:nth-last-child(n+2):after,.public-spins .spin-text .references>:nth-last-child(n+2):after {
    content: ","
  }

  .playlist.spins .spin-text .local,.playlist.spins .spin-text .new,.playlist.spins .spin-text .request,.playlist.spins .spin-text .va,.public-spins .spin-text .local,.public-spins .spin-text .new,.public-spins .spin-text .request,.public-spins .spin-text .va {
    font-size: .8em;
    font-weight: bolder
  }

  .playlist.spins .non-music-type,.public-spins .non-music-type {
    font-style: italic
  }

  .social-share {
    list-style: none;
    margin: 0;
    padding: 0
  }

  .social-share li {
    display: inline-block;
    margin-right: 10px
  }

  .icon-social {
    border-radius: .2em;
    display: inline-block;
    height: 2rem;
    vertical-align: baseline;
    width: 2rem;
  }

  .icon-fb {
    background: url(https://spinitron.com/static/images/fb.svg);
    background-color: #3a5a9a;
    background-size: cover;
  }

  .icon-fb:hover {
    background-color: #57b
  }

  .icon-tw {
    background: url(https://spinitron.com/static/images/twitter.svg);
    background-color: #40aeef
  }

  .icon-tw:hover {
    background-color: #72bce8
  }

  @-webkit-keyframes spinner-line-fade-more {
    0%,to {
      opacity: 0
    }

    1% {
      opacity: 1
    }
  }

  @keyframes spinner-line-fade-more {
    0%,to {
      opacity: 0
    }

    1% {
      opacity: 1
    }
  }

  @-webkit-keyframes spinner-line-fade-quick {
    0%,39%,to {
      opacity: .25
    }

    40% {
      opacity: 1
    }
  }

  @keyframes spinner-line-fade-quick {
    0%,39%,to {
      opacity: .25
    }

    40% {
      opacity: 1
    }
  }

  @-webkit-keyframes spinner-line-fade-default {
    0%,to {
      opacity: .22
    }

    1% {
      opacity: 1
    }
  }

  @keyframes spinner-line-fade-default {
    0%,to {
      opacity: .22
    }

    1% {
      opacity: 1
    }
  }

  @-webkit-keyframes spinner-line-shrink {
    0%,25%,to {
      opacity: .25;
      -webkit-transform: scale(.5);
      transform: scale(.5)
    }

    26% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  }

  @keyframes spinner-line-shrink {
    0%,25%,to {
      opacity: .25;
      -webkit-transform: scale(.5);
      transform: scale(.5)
    }

    26% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1)
    }
  }

  .infpager {
    position: relative;
    text-align: center
  }

  .infpager_next {
    padding-top: .5em
  }

  .infpager_prev {
    padding-bottom: .5em
  }

  .infpager__control {
    display: none
  }

  .infpager__control_visible {
    display: block
  }

  .infpager__more {
    opacity: .75
  }

  .infpager__more_loading {
    display: block;
    visibility: hidden
  }

  .playlist-list {
    display: inline-block;
    margin-top: .5rem
  }

  @media(max-width: 500px) {
    .playlist-list {
      overflow-x:auto
    }
  }

  .playlist-list .list-item {
    border-bottom: 1px solid #ddd;
    display: flex;
    position: relative
  }

  .playlist-list .list-item:first-of-type {
    border-top: 1px solid #ddd
  }

  .playlist-list .block {
    display: inline-block;
    flex-grow: 1
  }

  .playlist-list .row>div {
    display: inline-block
  }

  .playlist-list .datetime {
    display: inline-block;
    min-width: 15em;
    white-space: nowrap
  }

  .playlist-list .datetime span {
    display: inline-block;
    padding: 0 .333em;
    text-decoration: inherit
  }

  .playlist-list .datetime .month {
    width: 2em
  }

  .playlist-list .datetime .day {
    min-width: 3.5em;
    padding-right: .333em;
    text-align: right
  }

  .playlist-list .datetime .year {
    min-width: 3em
  }

  .playlist-list .datetime .time {
    min-width: 5em;
    text-align: right
  }

  .playlist-list .dj,.playlist-list .show {
    white-space: nowrap
  }

  .playlist-list .details {
    color: #000;
    padding: 0 .333em
  }

  .playlist-list .link p:first-child {
    margin-top: 0
  }

  .playlist-list .toggle {
    float: right;
    margin-left: .75em
  }

  .playlist-list .toggle button {
    background-color: transparent;
    border: none;
    color: #999;
    font-size: .9em
  }

  .playlist-list .ark-player-button {
    float: right;
    margin-left: .75em;
    position: absolute;
    right: -3em
  }

  .playlist-list .ark-player-button button {
    background-color: transparent;
    border: none;
    color: #999;
    font-size: .9em
  }

  .playlist-list .link.row:hover {
    text-decoration: none
  }

  .playlist-list .link.row:hover .datetime span,.playlist-list .link.row:hover .dj span,.playlist-list .link.row:hover .show span {
    text-decoration: underline
  }

  .playlist-list .block[data-expanded="0"] .row {
    display: block
  }

  .playlist-list .block[data-expanded="0"] .details,.playlist-list .block[data-expanded="1"] .row {
    display: none
  }

  .playlist-list .block[data-expanded="1"] .details {
    display: block
  }

  @font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans Regular"),local("OpenSans-Regular"),url(https://spinitron.com/static/fonts/open-sans-v15-latin-regular.woff2) format("woff2"),url(https://spinitron.com/static/fonts/open-sans-v15-latin-regular.woff) format("woff")
  }

  @font-face {
    font-family: Open Sans;
    font-style: italic;
    font-weight: 400;
    src: local("Open Sans Italic"),local("OpenSans-Italic"),url(https://spinitron.com/static/fonts/open-sans-v15-latin-italic.woff2) format("woff2"),url(https://spinitron.com/static/fonts/open-sans-v15-latin-italic.woff) format("woff")
  }

  @font-face {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://spinitron.com/static/fonts/open-sans-v15-latin-600.woff2) format("woff2"),url(https://spinitron.com/static/fonts/open-sans-v15-latin-600.woff) format("woff")
  }

  @font-face {
    font-family: spinitron-fa-icons;
    font-style: normal;
    font-weight: 400;
    src: url(https://spinitron.com/static/fonts/spinitron-fa-icons.woff2) format("woff2"),url(https://spinitron.com/static/fonts/spinitron-fa-icons.woff) format("woff")
  }

  [class*=" fa-"]:before,[class^=fa-]:before {
    font-family: spinitron-fa-icons;
    font-style: normal;
    font-weight: 400;
    speak: never;
    display: inline-block;
    font-variant: normal;
    line-height: 1em;
    margin-left: .2em;
    margin-right: .2em;
    text-align: center;
    text-decoration: inherit;
    text-transform: none;
    width: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
  }

  .fa-pause:before {
    content: "⎉"
  }

  .fa-play:before {
    content: "â–¶"
  }

  .fa-check-square-o:before {
    content: "☑"
  }

  .fa-cog:before {
    content: "âš™"
  }

  .fa-pencil-square-o:before {
    content: "✍"
  }

  .fa-pencil:before {
    content: "✎"
  }

  .fa-check:before {
    content: "✓"
  }

  .fa-times:before {
    content: "✕"
  }

  .fa-undo:before {
    content: "⟲"
  }

  .fa-ok-circled2:before {
    content: ""
  }

  .fa-cancel-circled2:before {
    content: ""
  }

  .fa-eye:before {
    content: ""
  }

  .fa-retweet:before {
    content: ""
  }

  .fa-comment:before {
    content: ""
  }

  .fa-trash-o:before {
    content: ""
  }

  .fa-list:before {
    content: "îž‚"
  }

  .fa-magic:before {
    content: ""
  }

  .fa-envelope:before {
    content: ""
  }

  .fa-comment-o:before {
    content: ""
  }

  .fa-pencil-square:before {
    content: "ï…‹"
  }

  .fa-file-text:before {
    content: ""
  }

  .fa-paper-plane:before {
    content: ""
  }

  .fa-calendar:before {
    content: "📅"
  }

  .fa-search:before {
    content: "🔍"
  }

  .fa-clock:before {
    content: "🕔"
  }

  .fa-ban:before {
    content: "🚫"
  }

  [class*=" fa-"]:before,[class^=fa-]:before {
    margin: 0
  }

  .fa-2x {
    font-size: 2em
  }

  html {
    box-sizing: border-box
  }

  body,html {
    height: 100%
  }

  body {
    -webkit-backface-visibility: hidden;
    margin: 0
  }

  .page-title {
    color: #444;
    font-family: Open Sans,sans-serif;
    font-size: 8vw;
    font-weight: 400;
    letter-spacing: .15em;
    margin: 0;
    padding: .2em;
    text-align: center;
    text-transform: uppercase
  }

  @media screen and (min-width: 40em) {
    .page-title {
      font-size:2rem
    }
  }

  @media screen and (min-width: 53.75em) {
    .page-title {
      font-size:2rem
    }
  }

  body.member .wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 112rem;
    width: 95%
  }

  body.member .wrapper:after {
    clear: both;
    content: "";
    display: block
  }

  body.public .wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 65rem;
    width: 98%
  }

  body.public .wrapper:after {
    clear: both;
    content: "";
    display: block
  }

  .spinitron-page-container {
    min-height: 100vh;
    position: relative
  }

  .main-container {
    padding-bottom: 1rem;
  }

  .footer-container {
   display: none;
  }

  .footer-container footer {
    border-top: 1px solid #ddd;
    margin-top: 1.8rem
  }

  .footer-container footer p {
    color: #999;
    font-size: .833em;
    font-weight: 400;
    margin: 0
  }

  .footer-container footer a {
    color: #447bc8
  }

  .header-with-buttons {
    margin: 0;
    position: relative
  }

  .header-with-buttons div {
    display: inline-block;
    margin-right: 1em
  }

  .header-with-buttons .header-button {
    bottom: 1rem;
    float: right;
    margin-bottom: 0;
    margin-top: 0;
    position: absolute;
    right: 0
  }

  .header-with-buttons .header-button * {
    margin-bottom: 0;
    margin-top: 0
  }

  .flex-row-container {
    display: flex;
    flex-direction: row
  }

  .flex-row-container>div {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
    margin: .5em .5em 0 0;
    padding: .5em 1em .5em .5em
  }

  .flex-row-container>div>h3 {
    font-size: 1.1em;
    margin: .25em 0 0
  }

  ol,ul {
    margin: 0 0 0 1em;
    padding: 0
  }

  ul {
    list-style: disc inside
  }

  dl {
    margin-bottom: .75rem
  }

  dt {
    font-weight: 600;
    margin-top: .75rem
  }

  dd {
    margin: 0
  }

  .no-list-style {
    list-style: none;
    margin: 0
  }

  figure {
    margin: 0
  }

  img,picture {
    margin: 0;
    max-width: 100%
  }

  table {
    border-collapse: collapse;
    margin: .375rem 0;
    position: relative;
    table-layout: auto;
    width: 100%
  }

  table input:not([type]),table input[type=color],table input[type=date],table input[type=datetime-local],table input[type=datetime],table input[type=email],table input[type=month],table input[type=number],table input[type=password],table input[type=search],table input[type=tel],table input[type=text],table input[type=time],table input[type=url],table input[type=week],table textarea {
    font-size: .875em
  }

  th {
    font-weight: 600;
    padding: .09375rem .1875rem;
    text-align: left
  }

  td,th,tr {
    vertical-align: middle
  }

  .table-bordered td,.table-bordered th {
    border-bottom: 1px solid #57564f5e;
    border-top: 0;
  }

  .table-striped tr:nth-child(odd) {
    background-color: #eee
  }

  td.p30 {
    max-width: 30%
  }

  tr.success {
    background-color: #dff0d8!important
  }

  tr.error {
    background-color: #f2dede!important
  }

  tr.notice {
    background-color: #d9edf7!important
  }

  tr.alert {
    background-color: #fcf8e3!important
  }

  body.member {
    color: #333;
    font-family: Open Sans,sans-serif
  }

  body.member,body.public {
    font-size: 1em;
    line-height: 1.5
  }

  body.public {
    color: #000;
    font-family: sans-serif
  }

  h1,h2,h3,h4,h5,h6 {
    font-weight: 600;
    line-height: 1.2;
    margin: 1em 0 .25em
  }

  h1 {
    font-size: 2em
  }

  h1:first-child {
    margin-top: 1em
  }

  h2 {
    font-size: 1.667em
  }

  h3 {
    font-size: 1.4em
  }

  h4 {
    font-size: 1.2em
  }

  h5,h6 {
    font-size: 1em;
    margin: 0 0 .25em
  }

  p {
    margin: .75rem 0 0
  }

  a {
    color: #0a4ba6;
    text-decoration: none;
    transition: color .15s ease
  }

  a:active,a:focus,a:hover {
    color: #355e98
  }

  a:active,a:hover {
    text-decoration: underline
  }

  hr {
    border: 0;
    border-bottom: 1px solid #ddd;
    margin: 1.5rem 0
  }

  .monospace {
    font-family: Consolas,monospace
  }

  blockquote {
    font-style: italic
  }

  blockquote footer {
    font-style: normal;
    margin-left: 1rem
  }

  .secondary {
    color: #666;
    font-size: .75em
  }

  .auth-clients {
    margin-bottom: 0
  }

  .view-page {
    padding-top: 0;
  }

  .view-page .head {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.5rem;
    align-items: center;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    color: #fff;
  }

  .view-page .head p {
    margin: 0
  }

  .view-page .head>div {
    margin: 0 .5rem
  }

  .view-page .head>div:first-child {
    flex: 1 1;
    min-width: 50%;
    padding: 2rem 0;
  }

  .view-page .head>div:first-child .show-title,.view-page .head>div:first-child .station-description,.view-page .head>div:first-child .station-title {
    margin: 0
  }

  .view-page .head>div:first-child .station-slogan {
    font-size: 1.2em;
    margin: .25rem 0
  }

  .view-page .head>div:nth-child(2).image>img {
    border: 1px solid #ddd;
    border-radius: .33rem;
    max-height: 250px;
    max-width: 250px
  }

  .view-page .head>div>h1:first-child,.view-page .head>div>h2:first-child,.view-page .head>div>h3:first-child,.view-page .head>div>h4:first-child,.view-page .head>div>h5:first-child,.view-page .head>div>p:first-child {
    margin-top: 0
  }

  .view-page .head nav>ul {
    margin: 0;
    padding: 0
  }

  .view-page .head nav>ul>li {
    display: inline;
    list-style-type: none
  }

  .view-page .head nav>ul>li>a {
    display: inline-block
  }

  .view-page .head nav>ul>li:not(:first-child):before {
    content: " | "
  }

  #help-videos .reveal {
    cursor: pointer;
    display: inline-block;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out
  }

  #help-videos .videos {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out
  }

  #help-videos.open .videos {
    max-height: 12rem;
    transition: max-height .3s ease-in-out
  }

  #help-videos.open .reveal {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out
  }

  .spins-chat {
    display: flex
  }

  .spins-chat>div:first-child {
    flex: 1 1
  }

  .spins-chat>.chat-container {
    flex-shrink: 0;
    margin-left: 1.618em;
    width: 30%
  }

  .spins-chat>.chat-container.hidden {
    width: auto
  }

  @media(max-width: 768px) {
    .spins-chat {
      flex-direction:column
    }

    .spins-chat>div:first-child {
      overflow-x: auto
    }

    .spins-chat>.chat-container {
      margin: 1.618em 0 0;
      max-width: 100vw;
      width: 100%
    }
  }

  ul.pagination {
    display: inline;
    margin: 0;
    padding: 0;
    text-align: center
  }

  ul.pagination li {
    display: inline;
    list-style: none
  }

  ul.pagination li a {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    display: inline-block;
    min-width: 1.5em;
    outline: none;
    padding: .25rem;
    text-align: center;
    text-decoration: none;
    transition: all .2s ease-in-out
  }

  ul.pagination li a:focus,ul.pagination li a:hover {
    background: #ddd;
    color: #477dca
  }

  ul.pagination li a:active {
    background: #f7f7f7
  }

  ul.pagination li.active a {
    background: #ddd;
    color: #333
  }

  body.public {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol
  }

  body.public .table td {
    padding: .3em;
    vertical-align: top
  }

  body.public #chat {
    font-size: 92%
  }

  body.public .table-narrow {
    width: auto
  }

  body.public .current-playlist .show-title {
    font-size: 1rem
  }

  body.public .show-time {
    color: #555;
    padding-right: 1em
  }

  .head .playlist p,.head .show p {
    margin: 0
  }

  ul.timeslot.show-schedule {
    margin-left: 0
  }

  .playlist-block h4,.show-block h4 {
    margin-bottom: 0;
    background-color: #22c55f;
    display: inline-block;
    clear: right;
    margin-bottom: 1rem;
    border-radius: 999px;
    padding: .5rem 1rem;
    position: absolute;
    margin-top: -1.5rem;
    margin-left: 1rem;
  }

  .playlist.spins .active {
    background-color: rgba(255,245,157,.6)
  }

  .playlist.spins .spin-time {
    color: #555;
    font-size: 85%;
    white-space: nowrap;
    width: 5rem
  }

  .playlist.spins .spin-art {
    padding: .2rem 0;
    width: 4rem
  }

  .playlist.spins .spin-art .spin-art-container {
    border: 1px solid #ddd;
    height: 4rem;
    position: relative;
    width: 4rem
  }

  .playlist.spins .spin-art img {
    width: 100%
  }

  .playlist.spins .spin-art .spin-art-placeholder {
    left: 50%;
    opacity: .5;
    position: relative;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 50%
  }

  .playlist.spins .spin-art:hover .spin-art-placeholder {
    opacity: 0;
    transition: .3s ease
  }

  .playlist.spins .not-playable .spin-art-placeholder {
    visibility: hidden
  }

  .playlist.spins .non-music-type {
    font-style: italic
  }

  .ark-player {
    border: 2px solid #ccc;
    color: #999;
    display: inline-flex;
    height: 2.2em;
    position: relative;
    width: 100%;
    fill: #999;
    background: #eee;
    line-height: normal;
    margin-top: 1em
  }

  .ark-player button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 100%;
    height: 100%;
    outline: 0
  }

  @media(min-width: 25em) {
    .ark-player {
      max-width:18em
    }
  }

  .ark-player__control,.ark-player__status {
    display: inline-block;
    height: 100%
  }

  .ark-player__control {
    border-right: 2px solid #ccc;
    position: relative;
    text-align: center
  }

  .ark-player__status {
    display: flex;
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    line-height: 2em;
    white-space: nowrap;
    width: 100%
  }

  .ark-player__status.waiting {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    border-radius: 10%;
    color: #000
  }

  .ark-player__status.waiting:hover {
    -webkit-animation: none;
    animation: none
  }

  @-webkit-keyframes pulse {
    0% {
      opacity: .2
    }

    to {
      opacity: 1
    }
  }

  @keyframes pulse {
    0% {
      opacity: .2
    }

    to {
      opacity: 1
    }
  }

  .ark-player__date {
    padding-right: .7em;
    text-align: right;
    width: 46%
  }

  .ark-player__time {
    padding-left: .7em;
    text-align: left;
    width: 54%
  }

  .ark-player__picker {
    display: flex;
    width: 100%
  }

  .ark-player__picker .ark-player__date {
    padding: .3em .4em 0 0
  }

  .ark-player__picker .ark-player__date .select-css[name=date] {
    width: 5em
  }

  .ark-player__picker .ark-player__time {
    padding: .3em 0 0 .4em
  }

  .ark-player__picker .ark-player__time .select-css[name=hours] {
    width: 3.5em
  }

  .ark-player__picker .ark-player__time .select-css[name=minutes] {
    width: 2.5em
  }

  .ark-player__picker .select-css {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #fafafa;
    border: 1px solid #ccc;
    border-radius: .1em;
    box-sizing: border-box;
    color: #666;
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    font-size: 1em;
    line-height: 1.4;
    margin: 0;
    outline: none;
    vertical-align: -1px
  }

  .ark-player__picker .select-css::-ms-expand {
    display: none
  }

  .ark-player__picker .select-css:focus {
    color: #000
  }

  .ark-player__picker .select-css option {
    font-weight: 400
  }

  .ark-player__pause,.ark-player__play {
    padding: .4em;
    width: 2em
  }

  .ark-player__pause svg,.ark-player__play svg {
    height: 100%;
    width: 100%
  }

  .ark-player_hide {
    display: none
  }

  .ark-play-button {
    display: inline-block;
    opacity: .5;
    width: 1.6em
  }

  .ark-play-button.ark-ark-play-button_hide {
    display: none
  }

  .public-spins .ark-play-button {
    display: block;
    margin-top: 1em
  }

  .ark-play-button-box {
    display: inline-block;
    width: 1.6rem
  }

  .ark-player__volume-control {
    position: relative
  }

  @media(hover: none) {
    .ark-player__volume-control {
      display:none
    }
  }

  @media(hover: hover) {
    .ark-player__volume-control {
      display:inline-block
    }
  }

  .ark-player__volume-control .ark-player__mute-button {
    padding: 0;
    width: 2em
  }

  .ark-player__volume-control:hover .ark-player__volume-area {
    transition: .3s;
    width: 4.4em!important
  }

  .ark-player__volume-control .ark-player__volume-area {
    background-color: #eee;
    border-right: 2px solid #ccc;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    position: absolute;
    transition: .3s;
    width: 0;
    z-index: 10
  }

  .ark-player__volume-control .ark-player__volume-area .ark-player__volume-slider {
    -webkit-appearance: none;
    background: #999;
    border-radius: 1.5px;
    display: block;
    height: 3px;
    margin: 1.1em .25em 0 0;
    outline: none;
    width: 4em
  }

  .ark-player__volume-control .ark-player__volume-area .ark-player__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #999;
    border-radius: 50%;
    cursor: pointer;
    height: 9px;
    width: 9px
  }

  .ark-player__volume-control .ark-player__volume-area .ark-player__volume-slider::-moz-range-thumb {
    background: #999;
    border-radius: 50%;
    cursor: pointer;
    height: 9px;
    width: 9px
  }

  .ark-player__mode-hint {
    font-size: 60%;
    position: absolute;
    right: 2px
  }
}